@charset "UTF-8";
/* CSS Document */

.logo {width:180px; margin: 5px 0 0 20px;}

  nav {margin: 0 0; float:none;}
  nav ul {padding:0;}
  nav:hover ul {margin-top:0;}
  nav ul li {display:none; margin: 0; top:0;}  
  nav:hover li {display:block; list-style: outside none none;}
  nav ul ul {margin-left:225px;}
  nav ul ul li { }
  nav a, nav a:link, nav a:visited {color:#fff; padding:10px 15px 12px; margin:0 auto 0 0;} 

.menu {display:inline-block;}	

.contact a, .contact a:link, .contact a:visited {margin:0 0 10px 0;}

.products {margin: 0 0 0 -133px; top: 38px; width:135px;}
.order {margin: 0 0 0 -133px; top: 100px; width:135px;}
.about {margin: 0 0 0 -133px; top: 155px; width:135px;}
.support {margin: 0 0 0 -133px; top: 198px; width:135px;}

.submenu a, .submenu a:link, .submenu a:visited {background-color: #073b99;}
.submenu a:hover {color:#ffffff; background-color: #073b99;}
	
#head_image_home, #head_image_contact {padding: 120px 60px 40px; min-height: 300px;}
#head_image_home h1, #head_image_contact h1 {width: 300px; font-size:270%;}
#head_image_home h2, #head_image_contact h2 {width: 330px; font-size:130%;}
.quick_facts {top: 350px; right: 60px;}
	
.item_container {padding: 45px 60px 40px;}
.first {margin: 50px 0 0 0; padding: 35px 60px 40px; }

.photo, .photo_r {width:45%;}


  .responsive-video {
    width: 95%;      /* Or 90% if you want a margin */
  }


#footer {padding: 0 0 20px;}

#footer_content {margin: 30px 40px 0;}

.footer_left {float: left; width: auto;}
.footer_left img {width: 90%; height: auto; margin: 0 0 5px 0;}
.footer_right {
	float: right; 
	width: 60%;
	margin: 0;}

#footer nav {width: 100%; padding: 0 0 0 0; text-align: left;}
#footer nav:after {display:inline;}
#footer nav ul {display: list-item;}
#footer nav ul li {margin:0 0 20px 0; display:list-item;}
#footer nav ul ul {position: relative;}
#footer nav ul ul li {background-color:transparent;}
#footer nav a, #footer nav a:link, #footer nav a:visited {display:inline;}

#footer .contact {position: absolute; right:0; text-align: center; margin: 13px 0 0 0;}
#footer .contact a, #footer .contact a:link, #footer .contact a:visited {width:100px; padding:7px 10px 9px;}

#footer .submenu {text-align: left; margin: 0;}
#footer .submenu a, #footer .submenu a:link, #footer .submenu a:visited {color:#9ce2ff; background-color:transparent; padding:7px 20px;}
#footer .submenu a:hover {color:#fff;}	

#footer .products {margin: 0; width: auto;}
#footer .order {margin: 0; width: auto;}
#footer .about {margin: 0; width: auto;}
#footer .support {margin: 0; width: auto;}


@media (max-width: 980px){
#head_image_home, #head_image_contact {padding: 120px 60px 40px; min-height: 300px;}
.quick_facts {top: 375px;}
	
.item_container {padding: 45px 40px 40px;}
.first {margin: 50px 0 0 0; padding: 25px 40px 40px; }
.three_col {width:31%; margin: 0;}
.center {margin: 0 3%;}
}

@media (max-width: 900px){
#head_image_home, #head_image_contact {padding: 130px 40px 0px; min-height: 270px; text-shadow: 0 0 10px #000000;}
#head_image_home h1, #head_image_contact h1 {width: 275px; font-size:260%;}
#head_image_home h2, #head_image_contact h2 {width: 320px; font-size:130%;}
.quick_facts {top: 330px; text-shadow: none;}
	
.photo, .photo_r {float: none; width: 60%; margin:0 15% 30px 20%;}
.text {float:none; width: 80%; margin: 0 10%;}

.three_col {float: none; width:80%; margin: 0 10%;}
.center {margin:40px 10%;}
}

@media (max-width: 770px) {
.photo, .photo_r {float: none; width: 70%; margin:0 15% 25px 15%;}
.text {float:none; width: 80%; margin: 0 10%;}
}

@media (max-width: 650px) {
nav a, nav a:link, nav a:visited {color:#fff; padding:8px 15px 10px; margin:0 auto 0 0;} 
.submenu a, .submenu a:link, .submenu a:visited {padding:8px 15px 10px;}
	
#head_image_home, #head_image_contact {padding: 120px 30px 0; min-height: 245px;}
#head_image_home h1, #head_image_contact h1 {width: 250px; font-size:220%;}
#head_image_home h2, #head_image_contact h2 {width: 320px; font-size:120%;}
.quick_facts {top: 310px; right: 20px; font-size: 115%;}	
.quick_facts a, .quick_facts a:link, .quick_facts a:visited {padding:5px 20px 8px;}

.photo, .photo_r {float: none; width: 80%; margin:0 10% 25px 10%;}
.text {float:none; width: 90%; margin: 0 5%;}
	
.three_col {float: none; width:90%; margin: 0 5%;}
.center {margin:40px 5%;}
}

@media (max-width: 550px) {
.products {top: 38px; width:135px;}
.order {top: 87px; width:135px;}
.about {top: 135px; width:135px;}
.support {top: 145px; width:135px;}
	
#head_image_home, #head_image_contact {
	padding: 60px 25px 0; 
	min-height: 270px; 	
	background-position:bottom;
	background-position-x:10px;
	background-size:550px auto;}
	
#head_image_home h1, #head_image_contact h1 {width: 200px; margin:1px 0 10px; font-size:200%;}
#head_image_home h2, #head_image_contact h2 {width: 220px; margin:15px 0 5px 0; font-size:110%; }	
.quick_facts {top: 280px; right: auto; left:25px; font-size: 105%;}
.quick_facts a, .quick_facts a:link, .quick_facts a:visited {padding:4px 20px 7px;}

.photo, .photo_r {float: none; width: 100%; margin:0 0 25px;}
.text {float:none; width: 100%; margin: 0;}
}

@media (max-width: 500px) {
#head_image_home h2, #head_image_contact h2 {width: 220px; margin:20px 0 5px 0; font-size:110%;}
	
#footer_content {margin: 30px 30px 0;}

.footer_left {float: none; width: 100%;}
.footer_right {float: none; width: 100%; margin: 0 0 0 -15px;}
#footer .contact {position: absolute; right:-10px; top:-210px; margin:0;}
	
.copyright {margin: 20px 0 40px 0;}
}

@media (max-width: 450px) {
.item_container {padding: 35px 30px 30px;}
.first {margin: 50px 0 0 0; padding: 20px 30px 30px; }
}

@media (max-width: 370px) {  
nav ul li {width:160px;}  
.products, .order, .about, .support {margin: 0 0 0 -160px;}
#footer .contact {position: absolute; right:-40px; top:-210px; margin:0;}
}