html {width: 100%; height: 100%; margin: 0; 
	font-size: 1em; /* 1 */
    -webkit-text-size-adjust: 1em; /* 2 */
    -ms-text-size-adjust: 1em; /* 2 */}
body {width: 100%; height: 100%; margin: 0; font-family: Arial, sans-serif; font-size: 10px; display: flex; }
.wrapper {display: flex; flex-wrap: wrap; width: 100%;}

#top {background-color: #fff; width: 100%; height: 15%; text-align: center; color: #000; display: flex; align-items: center; justify-content: center; flex-direction: column;}

#bottom {background-color: #fff; width: 100%; height: 15%; text-align: center; z-index: 99; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 1.3em;}

#left, #right {width: 50%; height:70%; text-align: center; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2em;}

#left {background-color: #b9012d;
	/*transition: width .5s;
    -moz-transition: width .5s; /* Firefox 4 */
    /*-webkit-transition: width .5s; /* Safari and Chrome */
    /*-o-transition: width .5s; /* Opera */
    /*-ms-transition: width .5s; /* IE9 (maybe) */
	}
/*#left:hover {width: 60%; z-index: 10;}*/

#right {background-color: #af7f01;
	/*transition: width .5s;
    /*-moz-transition: width .5s; /* Firefox 4 */	
    /*-webkit-transition: width .5s; /* Safari and Chrome */
    /*-o-transition: width .5s; /* Opera */
    /*-ms-transition: width .5s; /* IE9 (maybe) */
	}
/*#right:hover {width: 60%;}*/

.container {width: 600px; height: 500px; margin-left: auto; margin-right: auto;}

#toplogo {height: 250px; width: auto;}
.logos {margin: 40px 0px 30px 0px; height: 250px; width: auto; background: #fff; padding: 50px;}

h1 {font-size: 3.500em; font-weight: normal;}
h2 {font-size: 2.000em; font-weight: normal;}
h3 {font-size: 1.600em; font-weight: normal;}

p {font-size: 1.5em;}


.linkleft {text-decoration: underline; color: #6d6768;}
.linkright {text-decoration: underline; color: #ababab;}
.linkbottom {text-decoration: underline; color: #fff; text-transform: lowercase; white-space: nowrap;}

.footer {text-transform: uppercase; color: #000; font-size: 1.5em; line-height: 0.8em; margin: 0px; height: 1.2em; position: relative; top: 50%; margin-top: -0.6em; font-size: 1em;}
.phone {color: #000; text-decoration: underline;}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) { 
	
	body {width: 100%; height: auto; margin: 0; font-family: DINNextLTPro-Regular, sans-serif; font-size: 18px; }
	h2 {display: none;}
	h3 {font-size: 2em; font-weight: normal;}
	p {font-size: 2em;}
	#toplogo {height: 220px; width: auto; position: relative; top: 50%; margin-top:-100px;}
	.logos {margin: 40px 0px 0px 0px; height: 180px; width: auto;}
	#top {width: 100%; height: 500px;}
	#left {background-color: #ffffff; width: 100%; height:800px; text-align: center; color: #6d6768; position: relative; float: none; }
    #left:hover {width: 100%; z-index: auto;}
    #right {background-color: #6d6768; width: 100%; height:800px; text-align: center; color: #ababab; position: relative; float: none; padding-top: 50px; padding-bottom: 100px; margin-top: 50px;}
	#right:hover {width: 100%; z-index: auto;}
	#bottom {background-color: #524c4d; width: 100%; height:auto; position: relative; bottom: 0; text-align: center; z-index: 0; padding: 25px 0px;}

	.footer {text-transform: uppercase; color: #fff; font-size: 1.4em; line-height: 1.5em; padding: 20px 20px;}
	
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  	
  	#top {background-color: #524c4d; width: 100%; height:250px; text-align: center;}
  	#toplogo {height: 120px; width: 400px; position: relative; top: 50%; margin-top:-60px;}
  	.footer {text-transform: uppercase; color: #fff; font-size: 1em; line-height: 1.5em; padding: 20px 2px;}
}