/* --------------------------------------------------------------------------------------- */
/* core.css - The main global public facing foundation styles used on every page
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* About                                                                                   */
/* -----                                                                                   */
/* - Use this style sheet in every page as the basis for styling. Then we only need to     */
/*   create dynamically created CSS files for embedded widgets.                            */

/* --------------------------------------------------------------------------------------- */
/* Define custom fonts                                                                     */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@font-face
{ 
  font-family: "Heading-font";
  font-style: normal;
  font-weight: 600;
  src: 
    url(/_fonts/Roboto-Bold.ttf) format("truetype");
}

@font-face
{ 
  font-family: "Body-font";
  font-style: normal;
  font-weight: 400;
  src: 
    url(/_fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face
{ 
  font-family: "Bold-font";
  font-style: normal;
  font-weight: 400;
  src: 
    url(/_fonts/Roboto-Bold.ttf) format("truetype");
}


/* --------------------------------------------------------------------------------------- */
/* Define branding colours                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.branding
{
   color: #ffeecc;
}


/* --------------------------------------------------------------------------------------- */
/* Tag definitions                                                              */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

hr
{
  border: 4px solid #ffeecc;
  border-radius: 50%;
   /* color: #ffeecc; */
}


h1
{
  font-family: "Heading-font", cursive;
  font-weight: 600;
  text-align: center;
  
  margin-top: 4px;
  margin-bottom: 4px;
}


h2
{
  font-family: "Heading-font", cursive;
  font-weight: 400;
  text-align: left;
  
  margin-top: 4px;
  margin-bottom: 4px;
}


/* --------------------------------------------------------------------------------------- */
/* Define main body container                                                              */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body
{
  font-family: "Body-font", cursive;
  font-weight: 300;
  text-align: justify;
  background-color: white;
  color: #1d1d1d;
}


/* --------------------------------------------------------------------------------------- */
/* Define main body section blocks                                                         */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* --- Banner block --- */
#layout_0 { }


/* --- Ticker block --- */
#layout_1 { }


/* --- Menu container --- */
#layout_2
{
  background-color: #eeeeee;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;

   border-radius: 5px;
}

/* --- Navi bar --- */
#layout_2a { }


/* --- Tool bar --- */
#layout_3 { }


/* --- Ruled line under menu --- */
#layout_4
{
   border-top: 2px solid #eeeeee;
}


/* --- Footer section --- */
#layout_5
{
   border-top: 2px solid #eeddbb;
   
   background-color: #ffeecc;
   color: #777777;
   
   padding: 10px;
}


#layout_5 .heading_24
{
   color: #777777;
}

#layout_5 a
{
   color: #777777;
}

#layout_5 a:hover
{
   color: #444444;
}

#layout_5 a:visited hover
{
   color: #777777;
}


/* --- Status bar --- */
#layout_6 { }


/* --- Left Nav --- */
#layout_L { }


/* --- Right Nav --- */
#layout_R { }


/* --- Popup panel --- */
#layout_P { }


/* --------------------------------------------------------------------------------------- */
/* Define body content fonts                                                                    */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.heading_48   { font-size: 48px; font-weight: 600; letter-spacing: -.002em; line-height: 1.08349;       color: #1d1d1d; }
.heading_40   { font-size: 40px; font-weight: 600; letter-spacing:  0;      line-height: 1.1;           color: #1d1d1d; }
.heading_28   { font-size: 28px; font-weight: 600; letter-spacing: .007em;  line-height: 1.14286;       color: #1d1d1d; }
.heading_24   { font-size: 24px; font-weight: 600; letter-spacing: .009em;  line-height: 1.1666666667;  color: #1d1d1d; }
  
.small_print  { font-size: 12px; font-weight: 400; letter-spacing: -0.01em;  line-height: 1.3333733333; color: #1d1d1d; }
  
.footer_text  { font-size: 12px; font-weight: 400; letter-spacing: -0.12px;  line-height: 16.000479px;  color: #1d1d1d; }
  
.body_14      { font-size: 14px; font-weight: 400; letter-spacing: -.016em;  line-height: 1.28577;      color: #6e6e73; }
.body_17      { font-size: 17px; font-weight: 400; letter-spacing: -0.374px; line-height: 25.000032px;  color: #6e6e73; }
.body_19      { font-size: 19px; font-weight: 400; letter-spacing: .012em;   line-height: 1.21053;      color: #6e6e73; }
.body_21      { font-size: 21px; font-weight: 400; letter-spacing: .011em;   line-height: 1.381;        color: #6e6e73; }
.body_21_bold { font-size: 21px; font-weight: 700; letter-spacing: 0.231px;  line-height: 29.001001px;  color: #6e6e73; }
.body_24      { font-size: 24px; font-weight: 400; letter-spacing: .009em;   line-height: 1.16667;      color: #1d1d1f; }




/* --------------------------------------------------------------------------------------- */
/* Define menu buttons                                                                       */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.menu_button
{
   float: right;
   
   display: inline-block;
   background-color: #dddddd;

   height: 26px;
   margin-top: 0px;
   margin-right: 1px;
   margin-bottom: 0px;
   margin-left: 4px;
   
   padding: 4px;
   border: 1px solid #dddddd;
   border-radius: 5px;

   font-size: 17px; 
   font-weight: 400; 
   letter-spacing: -0.374px;   
   line-height: 25.000032px;   
   text-align: center;   
   color: #777777;
   text-decoration: none;
}

.menu_button:hover
{
   background-color: black;
   border: 1px solid black;
   color: #dddddd;

}

.home_button
{
   filter: invert(0%);
}

.home_button:hover
{
   filter: invert(100%);
}


/* --------------------------------------------------------------------------------------- */
/* Define info box support                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.dl_info_box
{
   /* --- Spatial properties --- */
   width: 75%;
   margin-left: 11%;
   margin-bottom: 15px;

   /* --- Appearance properties --- */
   border: 3px solid #cccccc;

   /* --- Shape properties */
   border-radius: 15px;
   
   /* --- Content alignment properties */
   text-align: center;
   padding: 15px;
}


.dl_info_box h1
{
   margin-top: 0px;
}


/* --------------------------------------------------------------------------------------- */
/* Biography boxes support                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.dl_biographies
{
   width: 95%;

   text-align: center;
}

.bio_box
{
   background-color: ivory;
   border: 3px solid #cccccc;
   
   text-align: center;
   
   display: inline-block;
   
   border-radius: 15px;
   padding: 15px;
   margin: 0px 7px 14px 7px;

   width: 252px;
   height: 400px;

  vertical-align: top;
}


.bio_mug_shot
{
   width: 250px;
   height: 250px;
   border: 1px solid #aaaaaa;

   border-radius: 15px;
}


.bio_name
{
   font-size: 24px; 
   font-weight: 600; 
   letter-spacing: .009em;  
   line-height: 1.1666666667;  
   color: #1d1d1d;
   
   display: block;
}

.bio_role
{
   font-size: 21px; 
   font-weight: 700; 
   letter-spacing: 0.231px;  
   line-height: 29.001001px;  
   color: #6e6e73;
   
   display: block;
}

.bio_body_text
{
   font-size: 14px; 
   font-weight: 400; 
   letter-spacing: -.016em;  
   line-height: 1.28577;      
   color: #6e6e73;
   
   display: block;
   
   width: 250px;
}




/* --------------------------------------------------------------------------------------- */
/* Biography boxes support                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.review_container
{
   width: 95%;
   text-align: center;
}


/* --------------------------------------------------------------------------------------- */
/* Pricing table support                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.pricing_container
{
   width: 95%;
   text-align: center;
   
}

.crates_etc
{
   border-collapse: collapse;
   margin: auto;
}


.crates_etc tr th
{
   border: 2px solid #cccccc;
   text-align: center;
   background-color: #ffeecc;
   padding: 5px;
}


.crates_etc tr td
{
border: 2px solid #cccccc;
   text-align: left;
   background-color: ivory;
   padding: 5px 10px 5px 10px;
}

.crates_etc tr td.item_price
{
   padding: 5px 10px 5px 15px;
   text-align: right;
}



/* --------------------------------------------------------------------------------------- */
/* Socials container support                                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.social_icon_box
{
position: relative;

   float: right;
   Padding: 10px;
   margin: 10px;
   margin-right: 0px;
   margin-bottom: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   
   bottom: 45px;
   xright: 10px;
   
   xbackground-color: cyan;
   
   xborder: solid 1px red;

}


.social_icon
{
  width:  40px;
  height: 40px;
  
  cursor: pointer;
  
  opacity: 100%;
  
  margin-left: 5px;
   padding-bottom: 0px;

}

.social_icon:hover
{
  opacity: 50%;
}