/*#E60094; Rhodamine Red*/
/*#757575; Grey Nav color*/
/*#FFE9F5; light pink*/
/*#ddd; light grey background of header under transparent pink flowers*/

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	/*background: -webkit-gradient(linear, right top, left top, color-stop(0.21, #FFE9F5), color-stop(0.21, #FFFFFF)); 
	background: -moz-linear-gradient(right center, #FFE9F5 21%, #FFFFFF 21%);*/
}

h1{font-weight: 800; font-size: 22pt;}
h2{font-weight: 700; color: #E60094; font-size: 20pt;}
h3{font-weight: 700; font-style: italic; font-size: 19pt;}
h4{font-weight: 600; font-size: 18pt;}
h5{font-weight: 500; font-size: 14pt;}
/*h6{font-weight: 400; font-size: 18pt;}*/
p {font-weight: 500; font-size: 17pt; line-height: 20pt;}
th {font-weight: 600; font-size: 17pt; line-height: 22pt;}
td {font-weight: 500; font-size: 14pt; line-height: 22pt;}
footer li {font-weight: 500; font-size: 11pt;}
li {font-weight: 500; font-size: 15pt;}
nav li {font-weight: 600; font-size: 12pt;}


/*Begin layout for responsive main content*/
#Wrapper {  min-height: 100%;
  height: auto !important;
  margin-bottom: -40px;}
  
 #Wrapper:after {
  content: "";
  display: block;
  height: 40px; /* the footer's total height */
}

#Content {
  height: 100%;
}
#Footer {
height: 40px;
 /* position: absolute;
  bottom: 0;
  left: 0;
  right: 0;*/
}

#Sidebar {
	width: 17%;
	max-width: 450px;
	padding: 2%;
	padding-top: 0px;
	margin-bottom: 7rem;
	max-height: 200vh;
	background-color: #FFE9F5;
	overflow: scroll;
	float: right;
	/*vertical-align: top;
	/*display: inline;
	position: absolute;
	right: 0;
	/*position: relative;*/
}

#Login {z-index: 60; top: 0; position: relative;}
#Logo {z-index: 50; position: relative;}
#NavBar {z-index: 50;}
#Main {
	width: 70%;
	margin-left: 5%;
	margin-right: 4%;
	float: left;
	display: block;
	/*left: 0;
	display: inline-block;
	/*position: absolute;
	/*margin-bottom: 65px;
	position: relative;*/
}




#BreadCrumbs {
	background-color:#FFE9F5;
	color: #333;
	padding: 10px 0px 10px 25px;
	font-weight: 600;
}

#BreadCrumbs a {color: #333; font-weight: 600;}

#BreadCrumbs .BC_NoLink {text-decoration: none;}

div #MainSubMenus {
	padding-top: 5px;
	display: block;
	width: 98%;
	margin: 0 auto;
	text-align: center;
}

#MainSubMenus ul {
	list-style-type: none; 
}

#MainSubMenus li {
	display: inline-block;
	padding: 10px 20px 0px 20px;
	font-size: 17px;
	font-weight: 700;
}

#MainSubMenus a {
	color: #5b0082;
	font-size: 20px;
	font-weight: 700;
}

#MainSubMenus a:hover {
	color: #b30073;
}



#Sidebar {
	width: 17%;
	max-width: 450px;
	padding: 2%;
	padding-top: 0px;
	right: 0;
	bottom: 0;
	/*min-height: 100vh;*/
	background-color: #FFE9F5;
	overflow: scroll;
	vertical-align: top;
	display: inline;
	position: relative;
	float: right;
}
	

#Sidebar h3 {text-align: center;}



#topPhoto img {
	max-width: 90%;
	max-height: 600px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#BodyContent {
	padding: 5%;
	padding-top: 5px;
}
/*Styling for sub page slideshows*/

.instuction {
	font-family: sans-serif, Arial;
	display: block;
	margin: 0 auto;
	max-width: 820px;
	width: 100%;
	padding: 0 70px;
	color: #222;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.instuction h1 img {
	max-width: 170px;
	vertical-align: middle;
	margin-bottom: 10px;
}
.instuction h1 {
	color: #2F98B3;
	text-align: center;
}
.instuction h2 {
	position: relative;
	font-size: 1.1em;
	color: #2F98B3;
	margin-bottom: 20px;
	margin-top: 40px;
}
.instuction h2 span.num {
	position: absolute;
	left: -70px;
	top: -18px;
	display: inline-block;
	vertical-align: middle;
	font-style: italic;
	font-size: 1.1em;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background: #2F98B3;
	color: #fff;
	border-radius: 50%;
}
.instuction .mono {
	color: #000;
	font-family: monospace;
	font-size: 1.3em;
	font-weight: normal;
}
.instuction li.mono {
	font-size: 1.5em;
}

.instuction ul {
	font-size: 0.9em;
	margin-top: 0;
	padding-left: 0;
	list-style: none;
}
.instuction .note {
	color: #A3A3B2;
	font-style: italic;
	padding-top: 10px;
}
.instuction p.note {
	text-align: center;
	padding-top: 0;
	margin-top: 4px;
}
.instuction textarea {
	font-size: 0.9em;
	min-height: 60px;
	padding: 10px;
	margin: 0;
	overflow: auto;
	max-width: 100%;
	width: 100%;
}
.instuction a,
.instuction a:visited {
	color: #2F98B3;
}

/*Begin design layout for the Top Social Media bar*/

.top {
	width: 100%;
	text-align: right;
	height: auto;
	margin: 0px;
	display: inline;
	z-index: 50;
}

.topsocial {
	padding: 4px 15px 4px 0px;
	float: right;
}


.topsocial a {
	text-decoration: none;
	padding-left: 5px;
}



/*Begin style for top navigation bar */			  

#globalnav {
	height: 22px;
	float: right; 
	display: inline;
	top: 0;
	right: 0;
	position: absolute;
	z-index: 50;
}


#globalnav #global.nav {
	margin: 0 auto;
	width: auto;

}

#globalnav ul {
	list-style: none;
}

#globalnav li {
	float: right;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; /*"Maven Pro", Helvetica, Arial, sans-serif;*/
	font-weight: 600; 
	font-size: 15px;
}

#globalnav li a {
	text-decoration: none;
	color: #ffffff;
	
}

#globalnav #global.nav li a:hover {
	color: #ffffff;
	text-decoration: underline;
}

#AccountLogin {
  background: #E60094;
  text-align: center;
  border-radius: 5px;
  color: #ffffff;  
  padding: 5px;
  font-weight: 800;
  font-size: 16px;
}

/* For buttons in a "list", menus */
.button a {
  display: block;
  width: auto;
  padding: 5px;
  height: auto;
  background: #E60094;
  text-align: center;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  margin-right: 5px;
  margin-top: 5px;
}

/* For id="Content" buttons */
a.button {
  padding: 10px;
  background: #E60094;
  text-align: center;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  border: none;
}

/* Full width buttons */
.bigButton {
  display: block;
  width: auto;
  padding: 13px;
  height: auto;
  background: #E60094;
  text-align: center;
  border-radius: 7px;
  color: #ffffff;
  font-weight: bold;
  margin-right: 5px;
  margin-bottom: 35px;
  text-decoration: none;
}

.active a {
	color: #E60094;
}

/*CSS for the BFO logo with grey background*/

.logo {/*background-image: url('../images/pinkbkgnd.png'); background-size: cover; background-repeat: no-repeat; */background-color: #ddd;}
.bfologo {  
	max-height: 150px;
	width: 35%;
	text-align: left;
	padding-top: 3px;
}

.bfologo_subpage {  
	max-height: 90px;
	width: auto;
	text-align: left;
	padding-top: 3px;
}

#TopSocial {text-align: right; display: inline; right: 0; position: absolute; bottom: 0;}

/*begin design layout for Main Horizontal Nav*/

nav {
  background-color: #757575;
  border: 1px solid #dedede;
  border-radius: 2px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: #fff;
  display: block;
  margin:0 auto;
  overflow: hidden;
  width: 100%; 
  z-index: 50;
  position: static;
}

nav .level3 {
	background-color: #888888;
}

nav .level4 {
	background-color: #999999;
}

nav .level5 {
	background-color: #a9a9a9;
}

nav .level6 {
	background-color: #B0B0B0;
}

nav .level7{
	background-color: #c0c0c0;
}

  nav ul {
    margin: 0;
    padding: 0;
  }

    nav ul li {
      display: inline-block;
      list-style-type: none;
      
      -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; 
    }
      
	  
	 nav > ul > li > a > .caret,
nav > ul > li > div ul > li > a > .caret {
	border-top: 4px solid #fff;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;

	-webkit-transition: color 0.1s linear;
	  -moz-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
	  transition: color 0.1s linear; 
  }
  
	nav > ul > li > div ul > li > a > .caret {
		border-bottom: 4px solid transparent;
		border-top: 4px solid transparent;
		border-right: 4px solid transparent;
		border-left: 4px solid #f2f2f2;
		margin: 0 0 0 8px;
	}
	
	nav > ul > li > div,
nav > ul > li > div ul > li > div {
	background-color: rgb( 40, 44, 47 );
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 165px;
	visibility: hidden;
	
	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-transition: opacity 0.2s;
}

	nav > ul > li > div ul > li > div {
		border-radius: 0 4px 4px 4px;
		box-shadow: inset 2px 0 5px rgba(0,0,0,.15);
		margin-top: -42px;
		right: -165px;
	}
	
		nav > ul > li:hover > div,
		nav > ul > li > div ul > li:hover > div {
		  display: block;
		  opacity: 1;
		  visibility: visible;
		}

      nav > ul > li > a {
        color: #fff;
        display: block;
        line-height: 22px;
		margin: 7px 0px;
        padding: 5px 12px;
        text-decoration: none;
      }

        nav > ul > li:hover {
          background-color: rgb( 40, 44, 47 );
        }

        nav > ul > li:hover > a {
          color: rgb( 255, 255, 255 );
        }

        nav > ul > li:hover > a > .caret {
          border-top-color: rgb( 255, 255, 255 );
        }
      
      nav > ul > li > div {
        background-color: rgb( 40, 44, 47 );
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
        display: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 165px;
	visibility: hidden;
	z-index: 100;
  
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
      }

        nav > ul > li:hover > div {
          display: block;
          opacity: 1;
          visibility: visible;
        }

          nav > ul > li > div ul > li {
            display: block;
          }

            nav > ul > li > div ul > li > a {
              color: #fff;
              display: block;
              padding: 8px 18px;
              text-decoration: none;
            }

              nav > ul > li > div ul > li:hover > a {
                background-color: rgba( 255, 255, 255, 0.1);
              }





/*begin laying out the footer div
footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* The margin rule below gets rid of a one pixel gap below footer in WinIE. */
/* Hide from MacIE. Only WinIE sees this. \*/
/** html footer {
	position: absolute !important;
	margin-bottom: -1px;
	/*font: 90%  "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 90%;/*scales the font to 80% of the default set int he body selector

	}
/* End hide from MacIE. */

footer ul {
	padding: 2px 0 4px 0;/*sets the padding on the ul gives a little space around the li elements*/
	margin: 0;/*zero off the margins*/
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	/*font: 95% Arial, Verdana, Helvetica, sans-serif; */
	text-align: center;
	}

footer p {
	padding: 3px;/*sets the padding around the company text in the footer*/
	margin: 0;/*zeroes off the margins*/
	color: #FFFFFF;/*changes the default colour*/
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	text-decoration: none; /* this gets rid of the underlines */
}

footer ul li {
	padding: 2px 30px 2px 10px;/* sets the padding values*/  
	margin: 0;/*zeroes off the margins */
	display: inline;/*sets the list to display inline*/	
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	text-decoration: none; /* this gets rid of the underlines */
}


footer a {/* Styles the links within the footer */
	color: #fff;/*sets the text to white*/
	text-decoration: none; /* this gets rid of the underlines */
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
}

footer a:hover, footer a:focus {
	text-decoration: underline;/*removes the underline*/
}

/*Centred IMG with max & min width*/

img.displayCenter {display: block; margin-left: auto; margin-right: auto; width: 80%; min-width: 595px;}



/*create a marker to show the user where in the site they are at any given time*/
.youarehere {
	color: #000000; /*#B6B4C1;set a link in the navigation to this class to show where the user is - remove the link and apply this class to the li tag*/
}

/*begin design layout for the 4 nav icons on the index page*/

.icon{ 
	width: 99%;
	margin: 0 auto;
	margin-top: 35px;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.iconHome { 
	width: 78%;
	margin: 0 auto;
	margin-top: 35px;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.icon2 {
 width: 99%;
 margin: 0 auto;
 text-align: center;
}

.box {
	vertical-align: top;
    display: inline-block;
	overflow: hidden;
	text-align: center;
}

.box2 {
	vertical-align: top;
    display: inline-block;
	overflow: hidden;
	text-align: center;
	padding: 0 40px;
}

.box a, .box2 a {
	text-decoration: none;
	color: #000;
	text-align: center;
}

.stretch {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
.expand {
	width: 175px;
	height: 175px;
	border-radius: 5%;
    transition: width 0.5s, height 0.5s;
    -webkit-transition: width 0.5s, height 0.5s; /* Safari 3.1 to 6.0 */
	display: block;
    margin-left: auto;
    margin-right: auto

}

.expand:hover {
    width: 200px;
	height: 200px;
}

.blocktext {margin-left: auto; margin-right: auto; text-align: center;}

			  
			  
/*begin design layout for the social media div on the index page....you can DELETE this CSS if that social media div is scrapped,
now that it's streamlined on the top of the page*/

div.social {
width: 70%;
height: auto;
margin: 0 auto;
border: 8px;
border-color: #faafbe;
border-style: solid;
margin-bottom: 50px;
box-shadow: 10px 10px 5px #ccc;
text-align:center;
display: block;
}

div.centerblock {display:inline-block;}

.social a {
	text-decoration: none;
}

.nowrap { white-space: nowrap; } /*nowrap with the Emspaces allows social media icons to stay with their title, 
no matter how the page is resized, or what screen it is viewed on. */

#AccredLogos {display: block; margin: 0 auto;}

/* ----------------  Tables  ---------------- */

.MPTable {
    padding: 0px;
    border: medium none;
    border-collapse: collapse;
    margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.MPTable th {
    background: #E60094 none repeat scroll 0% 0%;
    color: #FFF;
    text-align: center;
    border: medium none;
    padding: 5px 2px;
}

.MPTable tr {
    border: medium none;
    background: #FFF none repeat scroll 0% 0%;
    padding: 5px 2px;
	height: 30px;
}

.MPTable tr.evenrow {
    background: #FFE9F5 none repeat scroll 0% 0%;
}

.MPTable td.centercell {
    text-align: center;
}

/*My Account Tables*/
th.editDesc {font-weight: 600; font-size: 17pt; line-height: 25pt;}
td.editData {font-weight: 500; font-size: 13pt; line-height: 25pt;}
td.ShadedRow {line-height: 25pt;}

/*----------- Countdown Styling -----------*/

.is-countdown {
    border: 1px solid #ccc;
    background-color: #eee;
}

#content td {
    text-align: left;
}

#content table {
    border-collapse: collapse;
}
			  
			  
/*----------- Sidebar Content Styling -----------*/

a.DTRLink {
	text-decoration: none;
	color: #000000;
	font-size: 14px;
	font-weight: 500;
}

.DTRTitle {
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
}

.DTRLocation{

}

.DTRDate{

}

.DTREarlyBird {
	color: #E60094;
	font-weight: 600;
}

/* ------------ Content Page Slider Styling -------*/
.instuction {
	font-family: sans-serif, Arial;
	display: block;
	margin: 0 auto;
	max-width: 820px;
	width: 100%;
	padding: 0 70px;
	color: #222;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.instuction h1 img {
	max-width: 170px;
	vertical-align: middle;
	margin-bottom: 10px;
}
.instuction h1 {
	color: #2F98B3;
	text-align: center;
}
.instuction h2 {
	position: relative;
	font-size: 1.1em;
	color: #2F98B3;
	margin-bottom: 20px;
	margin-top: 40px;
}
.instuction h2 span.num {
	position: absolute;
	left: -70px;
	top: -18px;
	display: inline-block;
	vertical-align: middle;
	font-style: italic;
	font-size: 1.1em;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background: #2F98B3;
	color: #fff;
	border-radius: 50%;
}
.instuction .mono {
	color: #000;
	font-family: monospace;
	font-size: 1.3em;
	font-weight: normal;
}
.instuction li.mono {
	font-size: 1.5em;
}

.instuction ul {
	font-size: 0.9em;
	margin-top: 0;
	padding-left: 0;
	list-style: none;
}
.instuction .note {
	color: #A3A3B2;
	font-style: italic;
	padding-top: 10px;
}
.instuction p.note {
	text-align: center;
	padding-top: 0;
	margin-top: 4px;
}
.instuction textarea {
	font-size: 0.9em;
	min-height: 60px;
	padding: 10px;
	margin: 0;
	overflow: auto;
	max-width: 100%;
	width: 100%;
}
.instuction a,
.instuction a:visited {
	color: #2F98B3;
}

/*Style for new HTML/CSS Option Boxes*/

div.OptionBox {
padding:2px 8px;align:center;max-width:500px;width:75%;min-width:250px;height:auto;margin:0 auto;opacity:0.8;border-radius:25px;
}

p.OptionBoxText {
font-size:250%;line-height:110%;color:#000;font-weight:700;
}

/* --------------- Other ---------------------- */

.center_image {
	display: block;
    margin: auto;
	width: 45%;
	max-width: 700px;
}

.h_inline {display: inline;}

#Slideshow {width: 100%;}

.center {
	margin-left: 0;
	margin-right: 0;
}

.padded {padding: 10px;}


.myAccount  {text-align: left;}
.myAccount, .accountTable {padding-top: 50px;}
.myAccount tr:nth-child(even) {background: #DDD;}
.myAccount tr:nth-child(odd) {background: #FFF;}
.ShadedRow {background: #DDD;}
.accountTable {
	margin:0 auto;
	width: 80%;
	min-width: 600px;
}

.ItemTitle {
	background: #ffb6de;
	border-top: solid white 20px;
	font-weight: 600;
}
.tableTitle {font-size: 20px; text-align: center;}
.thCenter, .trCenter {text-align: center;}

.grayBox {
	padding: 20px;
	background-color: #dddddd;
	border-style: solid;
	border-width: 1px;
	border-color: #444444;
	border-radius: 10px;
}

/* -------------- Media Queries -----------------*/

@media only screen {

nav > ul > li:hover > div,
		nav > ul > li > div ul > li:hover > div {
		  display: block;
		  opacity: 1;
		  visibility: visible;
		}

}

@media only screen 
	and (min-device-width: 200px)
	and (max-device-width: 1024px)
	{
	.expand,
	.expand:hover {
	width: 200px;
	height: 200px;
	visibility: visible !important; 
	transition: none !important; 
	-moz-transition: none !important; 
	-webkit-transition: none !important; 
	-o-transition: none !important; 
	-ms-transition: none !important;
	margin-left: auto;
    margin-right: auto;
	}
	.box {margin: 0 50px;}
	
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	.button a{font-size: 2.2vmin; font-weight: 400;}
	
	#MainSubMenus li  a {font-size: 3.0vmin;}

	a.DTRLink {font-size: 2.3vmin;}
	.DTRTitle {font-size: 2.5vmin;}

	
	}
	

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  {
  
  nav li {font-weight: 600; font-size: 4.0vmin;}
    p, li{font-weight: 400; font-size: 3.7vmin;}
	h1{font-weight: 800; font-size: 4.2vmin;}
	h2{font-weight: 700; font-size: 4.1vmin;}
	h3{font-weight: 700; font-size: 4.0vmin;}
	h4{font-weight: 600; font-size: 3.9vmin;}
	h5{font-weight: 600; font-size: 3.8vmin;}
	h6{font-weight: 500; font-size: 3.7vmin;}
	
	.box {margin: 0 30px;}
	
	#MainSubMenus li  a {font-size: 4.1vmin;}
	
	a.DTRLink {font-size: 3.1vmin;}
	.DTRTitle {font-size: 3.3vmin;}
	
	.button a{font-size: 2.8vmin; font-weight: 400;}
	



}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  
  nav li {font-weight: 600; font-size: 4.2vmin;}
  #globalnav {height: 3.8vmin;}
    p, li{font-weight: 400; font-size: 3.9vmin;}
	h1{font-weight: 800; font-size: 4.2vmin;}
	h2{font-weight: 700; font-size: 4.1vmin;}
	h3{font-weight: 700; font-size: 4.0vmin;}
	h4{font-weight: 600; font-size: 3.9vmin;}
	h5{font-weight: 600; font-size: 3.8vmin;}
	h6{font-weight: 500; font-size: 3.8vmin;}
	
	.box {margin: 0 30px;}
	
	#MainSubMenus li  a {font-size: 4.2vmin;}
	
	a.DTRLink {font-size: 3.1vmin;}
	.DTRTitle {font-size: 3.3vmin;}
	
	.button a{font-size: 2.6vmin; font-weight: 400;}
	
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  
  nav li {font-weight: 600; font-size: 3.8vmin;}
    p, li{font-weight: 400; font-size: 3.5vmin;}
	h1{font-weight: 800; font-size: 4.0vmin;}
	h2{font-weight: 700; font-size: 3.9vmin;}
	h3{font-weight: 700; font-size: 3.8vmin;}
	h4{font-weight: 600; font-size: 3.7vmin;}
	h5{font-weight: 600; font-size: 3.6vmin;}
	h6{font-weight: 500; font-size: 3.5vmin;}
	
	.box {margin: 0 30px;}
	
	#MainSubMenus li  a {font-size: 4.1vmin;}
	
	a.DTRLink {font-size: 3.1vmin;}
	.DTRTitle {font-size: 3.3vmin;}
	
	.button a{font-size: 2.5vmin; font-weight: 400;}

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  
  nav li {font-weight: 600; font-size: 2.5vmin;}

    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	.box {margin: 0 30px;}

	#MainSubMenus li a {font-size: 3.6vmin;}
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}

	.box {margin: 0 30px;}
	
	#MainSubMenus li a {font-size: 3.6vmin;}
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	.box {margin: 0 30px;}
	
	#MainSubMenus li a {font-size: 3.6vmin;}


}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.4vmin;}
	h1{font-weight: 800; font-size: 2.9vmin;}
	h2{font-weight: 700; font-size: 2.8vmin;}
	h3{font-weight: 700; font-size: 2.7vmin;}
	h4{font-weight: 600; font-size: 2.6vmin;}
	h5{font-weight: 600; font-size: 2.5vmin;}
	h6{font-weight: 500; font-size: 2.4vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}
	
	.button a {font-weight: 600;}
	.bigButton {font-size: 2.7vmin;}

}

/* Portrait 
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Landscape 
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}
*/
/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
  nav li {font-weight: 600; font-size: 2.5vmin;}

  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
  nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.3vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
  nav li {font-weight: 600; font-size: 3.1vmin;}
  #globalnav {height: 4.5vmin;}
    p, li{font-weight: 400; font-size: 2.6vmin;}
	h1{font-weight: 800; font-size: 3.8vmin;}
	h2{font-weight: 700; font-size: 3.3vmin;}
	h3{font-weight: 700; font-size: 3.1vmin;}
	h4{font-weight: 600; font-size: 2.9vmin;}
	h5{font-weight: 600; font-size: 2.7vmin;}
	h6{font-weight: 500; font-size: 2.7vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}
}



/* ----------- iPad 3 and 4 , and iPad Air 2----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
    nav li {font-weight: 600; font-size: 2.5vmin;}
  #globalnav {height: 3.0vmin;}
    p, li{font-weight: 400; font-size: 2.0vmin;}
	h1{font-weight: 800; font-size: 2.8vmin;}
	h2{font-weight: 700; font-size: 2.7vmin;}
	h3{font-weight: 700; font-size: 2.6vmin;}
	h4{font-weight: 600; font-size: 2.5vmin;}
	h5{font-weight: 600; font-size: 2.4vmin;}
	h6{font-weight: 500; font-size: 2.3vmin;}
	
	#MainSubMenus li a {font-size: 3.0vmin;}

}