/*
Blue #003273
Red #E4232F
Beige #E2E1C7
Dark Red #BD000
*/

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);

/* --------------------- GLOBAL FORMATING ----------------- */

body {
    margin:0 auto;
    font-family: 'News Cycle', sans-serif;
    font-size:16px;
    line-height:180%;
    color:DimGray;
    background-color:white
    }

@media(max-width:800px){/* Collapsed menu padding */
                        body {width:100%;margin:0 auto; font-size:18px;} }

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {display: block; margin: 0; padding: 0;}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear {clear:both}
.clearing{width:100%;height:10px;background-color:RED;display:block; }
    
 .clear_for_phone {display:none;}   
 @media only screen and (max-device-width: 500px) { .clear_for_phone {clear:both}  }
 
.container {width:1000px; margin:0 auto; background-color: #fff}

 
font {margin:0; padding:0 }
/* --------------------- SEO ----------------- */
  
#SEO-outer{
           width:100%;
          background-image:url('images/BG.jpg');
          
          }
   @media only screen and (max-device-width: 500px) { #SEO-outer {width:100%}  }

   #SEO-inner{
           width:1000px;
           height:107px;
           padding-top:3px;
           margin:0 auto;
           }
   @media only screen and (max-device-width: 500px) { #SEO-inner {width:100%;height:180px;margin-bottom:0}  }
   
  
   
#header-logo {float:left;
             margin-top:20px;
             width:302px;
             }
             @media only screen and (max-device-width: 500px) { #header-logo {width:280px; margin:10px auto; float:none;}  }
             
           
             
#header-logo-type { font-family:'Oswald', sans-serif;
                 font-size: 0.8em;
                 font-weight:300;
                 color:#003273;
                 line-height:125%;
                 text-align:left;
                 width:420px;
                 padding-left:95px
                 }
                 @media only screen and (max-device-width: 500px) { #header-logo-type {width:100%; text-align:center; margin-top:-10px; font-size:1em; line-height:140%; padding-left:0;}  }
                 
                 

#flavex {float:right; 
        border:1px transparent solid;
        margin-top:-80px;
        width:200px;
        padding:0;
        }
        @media only screen and (max-device-width: 500px) { #flavex {margin:10px auto; float:none; width:160px; padding:0;}  }

#menu-phone {float:right; }
            @media only screen and (max-device-width: 500px) { #menu-phone {display:none; }  }

#phone-number {color:white; float:right; margin-top:8px; line-height:100%; font-size:1.5em}
              @media only screen and (max-device-width: 500px) { #phone-number {margin:0 0 15px 40px; float:left;}  }
              @media only screen and (max-device-width: 500px) { #phone-number a {color:white; font-size:.8em; font-weight:700;}  }
   

   

 

 /*----- General formating ------*/
img {border:0}
  @media only screen and (max-device-width: 800px){img {width:100%}}
  

@media only screen and (max-device-width: 800px){.show-on-screen {display:none;}}

/* @media only screen and (max-device-width: 480px) { #page-container p, #page-container h1, #page-container h2, #page-container h3, #page-container h4, #page-container li, #page-container img  {padding-left:10px;padding-right: 10px}  } */


h1 {
   font-size: 1.8em;
   color:#E4232F;
   font-weight:300;
   
   word-spacing:0px;
   margin-top:10px;
   font-family:'Oswald', sans-serif;
   font-weight:normal;
   line-height:140%;
   }
   @media only screen and (max-device-width: 800px){h1 {font-size: 1.6em;}}

h2 {
   font-family:'Oswald', sans-serif;
   font-size: 1.5em;
   color:#003273;
   font-weight:normal;
   line-height:130%
   }


h3 {
   font-size: 1.3em;
   color:#003273;
   font-family:'Oswald', sans-serif;
   font-weight:normal;
   line-height:130%;
   }
   
h4 {
   font-size: 1em;
   line-height:130%;
   }


p  {
   font-size:1em;
   color:DimGray;
   line-height:160%;
   }
   


#page-container li, #page-container dt  {
   font-size:1em;
   color:DimGray;
   letter-spacing:0;
   line-height:160%
   }
   
.image-one {width:450px;  }
           @media only screen and (max-device-width: 500px) { .image-one {width:100%}  }

.image-two {width:450px }
            @media only screen and (max-device-width: 500px) { .image-two {display:none;}  }
   
/* Links */
#page-container    a         { color:#3B3B3B; text-decoration:none; font-family: 'News Cycle', sans-serif; letter-spacing:0; font-size:1em}
#page-container    a:visited { color:black; }
#page-container    a:hover   { color:DimGray; text-decoration:underline;}
#page-container    a:active  { color:DimGray; }
    
a { text-decoration:none;}

.product-images {float:right; margin-left:20px; text-align:center;}
                @media only screen and (max-device-width: 500px) {.product-images {float:none; margin-left:0;}  }
                
.product-images img {width:100%}                
                @media only screen and (max-device-width: 500px) {.product-images img {width:95%;  margin-left:-20px; margin-bottom:20px}  }
/* Images */     


iframe {width:750px }

/* ---------------- Main Menu ------------------*/

#main-menu-type{ display:none;}
@media only screen and (max-device-width: 500px) { #main-menu-type {display:inline; float:left; font-size:1.0em; margin:20px 0 0 0 ;line-height:12px; color:white;}  }


 /*----- Page Container ------*/
   
#page-container {
                border:0px blue dotted; 
                width:1000px; 
                margin:0 auto;
                display:block;
                background-color:white;
                padding-left:0;
                padding-top:20px;
                }
 @media only screen and (max-device-width: 500px) { #page-container {width:100%; padding-left:0; padding-top:0}  }
 @media only screen and (max-device-width: 500px) { #page-container p {font-size:1.2em; margin:0}  }
  @media only screen and (max-device-width: 500px) { #data-container {font-size:1.2em;padding-left:10px}  }

  
  



/* ----------------  Home page ------------------*/

#wow img {padding: 0}

#wow {float:right;
   }
     @media only screen and (max-device-width: 500px) { #wow {width:95%; float:none; margin:5px 0 0 0px; display:inline-block; float:none; position:relative; padding-left:0}  }
     
     
#logos {float:right; margin:0px 0 12px 12px; width:540px; z-index:2;}
  @media only screen and (max-device-width: 800px){#logos {float:none; width:95%; margin:0 0 0 -10px;}}
  
  
#home-left-panel {border:0px pink solid; width:350px; margin-top:-440px; float:left; }
                 @media only screen and (max-device-width: 800px){#home-left-panel {width:95%; margin:20px 12px 7px 10px; float:none;}}
                 @media only screen and (max-device-width: 800px){#home-left-panel p {margin-right:10px}}

                
#data-container {
    width:350px;
    border:0px red solid;
    margin-top:-5px;
    margin-bottom:15px;
     }
	@media only screen and (max-device-width: 800px){#data-container {width:98%; text-indent:-10px}}
    
	.data-col-1 {
	width:49%;
	border:0px red solid;
    float:left;
    margin:0 0;
	}
	
    
	.data-col-2 {
	width:49%;
	border:0px blue solid;
	float:right;
    margin:0 0;
	}
    
    .clear {clear:both}
    
.home-logos {height:87px; margin-right:10px; text-align:center; }    

.home-logos:first-child {margin-left:15px } 
                        @media only screen and (max-device-width: 800px){.home-logos:first-child {margin-left:0}} 
             
/* --------------------- CONTACT PAGE ----------------- */ 

#contact_address {float:right;border:0px red dotted; margin-top:20px }
         @media only screen and (max-device-width: 500px){  #address {float:left; text-align:left; width:100%;margin-bottom:20px}} 
         
iframe {width:100% }
  
    
 #input-form {float:left; padding-right:20px; border:0px red dotted; width:600px} 
             @media only screen and (max-device-width: 500px){ #input-form {width:100%; font-size:1em}}
             @media only screen and (max-device-width: 500px){ #input-form img {width:200px}}
             @media only screen and (max-device-width: 500px){ #input-form table {padding-left:10px}}
            
    
 input[type=text] {width:350px }   
                  @media only screen and (max-device-width: 500px){  input[type=text] {width:90%; font-size:1em}}
    
 textarea#styled {height:120px; width:350px }  
                 @media only screen and (max-device-width: 500px){  textarea#styled {width:90%; font-size:1em}} 
 
/*  #map {width:1000px; height:600px }
      @media only screen and (max-device-width: 500px){   #map {width:80%; height:250px }}
 
@media only screen and (max-device-width: 500px){  iframe {width:100%; height:250px; padding-left:10px}} */

input[type=submit] {font-size:1em} 
                   @media only screen and (max-device-width: 500px){  input[type=submit] {padding-left:10px}}
                   

         
         
         
/*----------------  distrubutors page ------------------*/
 .container {width:1000px; }
 @media only screen and (max-device-width: 500px) {.container {width:100%; margin-left:10px}  }
        
@media only screen and (max-device-width: 500px){  .col-xs-12>img {width:150px }

.col-xs-12 {margin-left:10px }

/*----------------  About Us page ------------------*/

.first-image {float:right;margin-left:20px; width:500px }
             @media only screen and (max-device-width: 500px){  .first-image {float:none; width:100%}}
             
.about-indent {padding-left:10px; padding-right:10px }

                   
/* --------------------- FOOTER ----------------- */

footer {background-color:#E4232F; width:100%; border:1px red dashed}
footer p {color:#fff }
   
footer .container h1.seo-footer {
   font-family:'Oswald', sans-serif;
   font-size: 0.6em;
   font-weight:300;
   color:Gray;
   padding:10px 5px 15px 5px;
   line-height:120%;
   margin:10px 0px;
   letter-spacing:1px;
   word-spacing:normal;
   text-transform:none;
   } 
   @media only screen and (max-device-width: 500px) { #SEO-inner-foot h1 {font-family:verdana, sans-serif; letter-spacing:0; font-size:0.8em; padding:0; text-align:center; margin-bottom:10px; width:100%;}  }

footer-bg {
      width:100%; 
      background-color:#E4232F;
      background-image:url('images/footerBG.jpg');
      background-repeat:repeat-x; 
      height:190px;
      vertical-align:top;
      line-height:150%;
      border:0px blue solid
      }
       @media only screen and (max-device-width: 500px) { #footer-container {height:180px; margin-top:20px}  }
       
#footer-container-inner {
      display:block;
      margin-right:auto; 
      margin-left:auto;
      width:1000px;
      font-size:0.8em;
      font-family: 'News Cycle', sans-serif;
      color:white;
      background-color:transparent; 
      border:0px lime dotted;
      }
      @media only screen and (max-device-width: 500px) { #footer-container-inner {width:100%;}  }
      
      
footer a {
	color:white;
    text-decoration:none;
    padding-bottom:20px;
    font-size:0.8em;
    letter-spacing:1px;
    }
    
    
footer a:hover {
	color:#E2E1C7;
	text-decoration:none;
    padding-bottom:20px;
    }
    
footer p {
      color: white;
      text-align:left;
      }

       
         
#footerlogo {width:150px;}
    @media only screen and (max-device-width: 900px) { #footerlogo {width:255px; padding-top:10px; }  }
    
#footerlogo img {width:125px; margin-bottom:10px}
    @media only screen and (max-device-width: 900px) { #footerlogo img {width:150px; }  }
    
#footerlogo p {line-height:120%; color:#fff; }
    
     
#web-design {width:1000px; margin:10px auto; border:0px red dashed}
            @media only screen and (max-device-width: 500px) { #web-design {width:100%;margin-top:0}  }
#web-design a {font-family:Arial, sans-serif; font-size:1em; letter-spacing:0; color:#888888 }