@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

/* HEADER: Top row, full width */
.header {
	width: 100%;
	height: 75px;
	display: block;
    	top: 0;
	left: 0;
	right:0;
	position: fixed;
	border-bottom: solid;
	border-bottom-color: #FD8103;
	border-bottom-width: 0px;
	background-color: #FFFFFF;
}
p {
	/*line-height: 20px;*/
}

/* INNER HEADER: Percentage of header the menu makes up */
.inner_header {
	width: 70%;
	height: 100%;
    	display: flex;
	margin: 0 auto;
	
}
@media (max-width: 480px) {
    .inner_header{
       width: 90%;
    }
}
@media (max-width: 320px) {
    .inner_header{
       width: 95%;
    }
}

/* LOGO CONTAINER: 100% of inner header H, flexible width */
.logo_container {
	height: 100%;
	display: flex;
	float: left;
}
/* MENU CONTAINER: 100% of inner header H, W, right of logo */
.menu_container {
	height: 100%;
	width: 100%;
	display: table;
	float: right;

}
/* Menu setup */
#menu {
    height: 100%;
	padding-right: 18px;
	padding-top: 25px;
	border-bottom: solid;
	border-bottom-color: #FFDBBB;
	border-bottom-width: 0px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
#menu ul {
	width: 100%;
	text-align: right;
}

#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FD8103;
	font-size: 20px;
	font-family: Roboto;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #FFFFFF;
	background: #FD8103;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	color: #FD8103;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #FFFFFF;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FD8103;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #FD8103;
	color: #FFFFFF;
}
@media screen and (max-width: 500px){
	#menu {position:relative}
	#menu ul {background:#FFFFFF;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#FD8103}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}
.lightorange {
	background: #FFDBBB;
	margin: 0 auto;
	padding: 0 auto;
	width: 100%;
	height: 100%;
}
/* TOP DUMMY SPACER: Used to move the body down below menu */
.topdummyspacer {
	width: 100%;
	height: 75px;
	display: block;
    	top: 0;
	left: 0;
	right:0;
}
body{
	display:block;
	width: 100%;
	border-width: 0;
	background-color: khaki;
	margin-top: 75px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0;
	font-family: "Roboto", serif;
	font-size: 1em;
}
/* COL CENTER - Center column where content lies. Same width% as header, varies depending on width of media */
.col_center {
	width: 70%;
	display: flex;
	margin: 0 auto;
	padding: 0 auto;
}
@media (max-width: 480px) {
    .col_center{
       width: 90%;
       	display: block;
    }
}
@media (max-width: 320px) {
    .col_center{
       width: 95%;
              	display: block;
    }
}

/* HEADER H1-H6 - May vary based upon width. */
h1 {
	text-decoration: none;
	color: #826B5B;
	font-size: 3.5em;
  	font-family: 'MangoGrotesqueBdIta',"Roboto", serif;
  	font-style: normal;
	line-height: 50px;
	padding: 0;
	margin: 0;
}
@media (max-width: 480px) {
    h1{
       font-size: 2.5em;
    }
}

@media (max-width: 320px) {
    h1{
       font-size: 2em;
    }
}
h2 {
	text-decoration: none;
	font-size: 2.5em;
  	font-family: "MangoGrotesqueBold","Roboto", serif;
  	font-style: normal;
	line-height: 40px;
	padding: 0;
	margin: 0;
}
h3 {
	text-decoration: none;
	color: #826B5B;
	font-size: 2em;
  	font-family: "MangoGrotesqueBold","Roboto", serif;
  	font-style: normal;
	line-height: 40px;
	padding: 0;
	margin: 0;
}
h4 {
	text-decoration: none;
	color: #826B5B;
	font-size: 18px;
  	font-weight: 700;
  	font-style: normal;
  	line-height: 40px;
  	padding: 0;
	margin: 0;
}
h5 {
	text-decoration: none;
	color: #826B5B;
	font-size: 16px;
  	font-weight: 700;
  	font-style: normal;
  	line-height: 40px;
  	padding: 0;
	margin: 0;
}
h6 {
	text-decoration: none;
	color: #826B5B;
	font-size: 14px;

  	font-weight: 700;
  	font-style: normal;
	line-height: 40px;
	padding: 0;
	margin: 0;
}
/* Body content rows - Change background, text color */
.orangebox {
    	display: block;
	background-color: #ada59f;
	width: 100%;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;

}
.orangebox h1,h2,h3,h4,h5,h6 {
	color: white;
}

.blackbox {
    	display: block;
	background-color: black;
	width: 100%;
	color: white;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.blackbox h1,h2,h3,h4,h5,h6 {
	color: #ada59f;
	margin: 0;
}
.whitebox {
    	display: inline-block;
    	background-color: white;
	width: 100%;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.whitebox h1,h2,h3,h4,h5,h6 {
	color: black;
	margin: 0;
}

/* Makes reference lookup start below menu. */
#carroteaters {
    scroll-margin-top: 75px;
}
#casualagents {
    scroll-margin-top: 75px;
}
#about {
    scroll-margin-top: 75px;
}
#explodingobjects {
    scroll-margin-top: 75px;
}
#coaxing {
    scroll-margin-top: 75px;
}
#instantdarlings {
    scroll-margin-top: 75px;
}



.imgbox {
  width:auto;
  height:auto;
    	display: inline-block;
	max-width: 33%;
	min-width: 1%;
	max-height: 100%;
	min-height: 1%;
	font-size: 0.5em;
}
@media (max-width: 480px) {
    .imgbox{
       display: block;
    }
}


.imgbox img {
	object-fit: contain;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: 2px solid black;
	border-offset: 0.5rem;

}
.txtbox {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 1.25em;

}
.txtbox_left {
	width: auto;
	height: auto;
	max-width: 67%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 30px;
	font-size: 1.25em;
}
@media (max-width: 480px) {
    .txtbox_left{
	display: block;
	max-width: 100%;
	padding-right: 0px;
	
    }
}
.txtbox_right {
	width: auto;
	height: auto;
	max-width: 67%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 0px;
	font-size: 1.25em;
	
}
@media (max-width: 480px) {
    .txtbox_right{
	display: block;
	max-width: 100%;
	padding-left: 0px;    }
}


/* Txt Ovr Img - Image Box that allows text inside to make buttons */
.txt-ovr-img {
	background: 
	linear-gradient(
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.6)
	);
	background-size: cover;
	color: white;
	width: 100%;
	min-height:200px;
	margin: 0px;
	position: relative;
	float: left;
}
/* Background Images Setup */
.reel01
{
	background:url(/images/reel01.jpg)
}
.mongolia01
{
	background:url(/images/mongolia01.jpg)
}
.mongolia02
{
	background:url(/images/mongolia02.jpg)
}
.warmerasers01
{
	background:url(/images/warmerasers01.jpg)
}
.carroteaters01
{
	background:url(/images/carroteaters01.jpg)
}
.carroteaters02
{
	background:url(/images/carroteaters02.jpg)
}

/* Subdivisions within menu row divs to locate content */
.divl {
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
	float: left;
	max-width: 50%;
}
.divr {
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	max-width: 50%;
}
.divc {
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	max-width: 33.3%;
}
.divfull {
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	max-width: 100%
}
.top {
	padding: 20px;
	color: white;
}
.top h1{
	color: white;
}
.top p{
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
}
.lr p {
	font-family: 'Roboto', sans-serif;
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: white;
	margin: 0;
}
.topleft p {
	position: absolute;
	top: 10%;
	left: 10%;
	color: white;
	transform: translate(-50%, -50%);
	text-align: left;
}
.topleft h1 {
	position: absolute;
	top: 10%;
	left: 10%;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	color: white;
	text-transform: uppercase;
	margin: 0;
	font-size: 2rem;
	transform: translate(-50%, -50%);
	text-align: left;
}
.mid p {
	position: absolute;
	top: 60%;
	left: 50%;
	color: white;
	transform: translate(-50%, -50%);
}
.mid h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	color: white;
	text-transform: uppercase;
	margin: 0;
	font-size: 2rem;
	transform: translate(-50%, -50%);
}
.cap p {
	padding: 20px;
	color: white;
	font: 12px "Roboto", Mono-Space;
	margin: 0;
}
.clear {
	clear:both
}

/* Set up web fonts */
/* Webfont: MangoGrotesque-Black */@font-face {
	font-family: MangoGrotesqueBlack;
	src: url('/fonts/MangoGrotesque-Black.eot'); /* IE9 Compat Modes */
	src: url('/fonts/MangoGrotesque-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/fonts/MangoGrotesque-Black.woff') format('woff'), /* Modern Browsers */
		url('/fonts/MangoGrotesque-Black.woff2') format('woff2'), /* Modern Browsers */
		url('/fonts/MangoGrotesque-Black.ttf') format('truetype'); /* Safari, Android, iOS */
			font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-BlackItalic */@font-face {
	font-family: 'MangoGrotesqueBlackIta';
	src: url('/fonts/MangoGrotesque-BlackItalic.eot'); /* IE9 Compat Modes */
	src: url('/fonts/MangoGrotesque-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/fonts/MangoGrotesque-BlackItalic.woff') format('woff'), /* Modern Browsers */
		url('/fonts/MangoGrotesque-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
		url('/fonts/MangoGrotesque-BlackItalic.ttf') format('truetype'); /* Safari, Android, iOS */
			font-style: italic;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}
/* Webfont: MangoGrotesque-Bold */@font-face {
    font-family: 'MangoGrotesqueBold';
    src: url('/fonts/MangoGrotesque-Bold.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Bold.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-BoldItalic */@font-face {
    font-family: 'MangoGrotesqueBdIta';
    src: url('/fonts/MangoGrotesque-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-BoldItalic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-ExtBdIta */@font-face {
    font-family: 'MangoGrotesqueExtBdIta';
    src: url('/fonts/MangoGrotesque-ExtBdIta.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-ExtBdIta.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-ExtBdIta.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtBdIta.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtBdIta.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-ExtLtIta */@font-face {
    font-family: 'MangoGrotesqueExtLtIta';
    src: url('/fonts/MangoGrotesque-ExtLtIta.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-ExtLtIta.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-ExtLtIta.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtLtIta.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtLtIta.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-ExtraBold */@font-face {
    font-family: 'MangoGrotesqueExtBd';
    src: url('/fonts/MangoGrotesque-ExtraBold.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-ExtraBold.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtraBold.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtraBold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-ExtraLight */@font-face {
    font-family: 'MangoGrotesqueExtLt';
    src: url('/fonts/MangoGrotesque-ExtraLight.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-ExtraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-ExtraLight.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtraLight.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ExtraLight.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-Italic */@font-face {
    font-family: 'MangoGrotesqueIta';
    src: url('/fonts/MangoGrotesque-Italic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Italic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Italic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-Light */@font-face {
    font-family: 'MangoGrotesqueLight';
    src: url('/fonts/MangoGrotesque-Light.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Light.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Light.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Light.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-LightItalic */@font-face {
    font-family: 'MangoGrotesqueLightIta';
    src: url('/fonts/MangoGrotesque-LightItalic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-LightItalic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-LightItalic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-LightItalic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-Medium */@font-face {
    font-family: 'MangoGrotesqueMed';
    src: url('/fonts/MangoGrotesque-Medium.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Medium.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-MediumItalic */@font-face {
    font-family: 'MangoGrotesqueMedIta';
    src: url('/fonts/MangoGrotesque-MediumItalic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-MediumItalic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-MediumItalic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-Regular */@font-face {
    font-family: 'MangoGrotesque';
    src: url('/fonts/MangoGrotesque-Regular.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Regular.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-SemiBold */@font-face {
    font-family: 'MangoGrotesqueSemBd';
    src: url('/fonts/MangoGrotesque-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-SemiBold.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-SemiBold.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-SemiBoldItalic */@font-face {
    font-family: 'MangoGrotesqueSemBdIta';
    src: url('/fonts/MangoGrotesque-SemiBoldItalic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-SemiBoldItalic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-SemiBoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-SemiBoldItalic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-Thin */@font-face {
    font-family: 'MangoGrotesqueThin';
    src: url('/fonts/MangoGrotesque-Thin.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-Thin.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Thin.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-Thin.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: MangoGrotesque-ThinItalic */@font-face {
    font-family: 'MangoGrotesqueThinIta';
    src: url('/fonts/MangoGrotesque-ThinItalic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/MangoGrotesque-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/MangoGrotesque-ThinItalic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/MangoGrotesque-ThinItalic.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
.roboto-xlight {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-xlightitalic {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}
.roboto-light {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-lightitalic {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}
.roboto {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-italic {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}
.roboto-xbold {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-xbolditalic {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}
.roboto-black {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-blackitalic {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}