/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');

body{ font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300; color: #a4a9ad; margin: 0; padding: 0; }

#page {max-width: 1280px; margin: 0 auto; position: relative;}

/* Text */
/* top rigth bottom( for the amount of space after an h1 tag O will use 1em -one time the basic size of 16px) left*/
h1{ margin: 0 0 1em 0; font-size: 1.7em; font-weight: 700; }
h2{ margin: 0 0 .5em 0; font-size: 1.5em; font-weight: 700; line-height: 1.1em;}
h3{ margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; line-height: 1.1em;}
h4{ margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; line-height: 1.1em;}

p{ margin: 0 0 1em 0;}

a{color: #007eff}
/*psuedo-element of visited*/
a:visited{ color: #65b1ff;}

a.btn {font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; /* width style color*/ padding: 4px 15px; /*in size the element*/
        transition: background-color .5s; }
a.btn:hover{background-color: rgba(0, 0, 0, .3);}
header {height: 712px; background: #f16522 url(../images/banner_1280.jpg) no-repeat center bottom; position: relative;}
 /*y-position i set this to bottom*/

 header a.logo{position: absolute; display: block; width: 495px; height: 235px; background: url(../images/logo.png) no-repeat 0 0; background-size: contain; 
    top:43px;
    left:47px; }
 /*logo w 495 h 235*/

 header a.logo span{display: none;}

 header div.hero {position: absolute; width: 50%; top: 280px; left: 3%}
 header div.hero h1 { line-height: 1em; margin: 0 0 10px 0; color:#fff;}

 /* Section - All */
 section { padding: 0 30px;}
 section::after {content: ''; display: block; clear: both;}

 /* Section - Main */
 /* Section - Main margin-top: 20px and margin-bottom: 30px*/
 section.main { margin-top: 0px; margin-bottom: 0px; padding: 0; background-color: #fff ; background-image: url(../images/bg_tour.png); }
 section.main aside {width: 33%; float: left; text-align: center;}

 section.main .content {margin: 15px; background: no-repeat center top; background-size: 230px 95px; padding-top: 95px;}

 /* Section - h3 a #f7931e or #f16522 */
 section.main aside h3 a {color:#f57d42; text-decoration: none;}
 section.main aside h3 a:hover {text-decoration: underline;}

 section.main .content.trending{background-image: url(../images/sunglasses_polarized01.png);}
 section.main .content.find-it{background-image: url(../images/none_polarized_sunglasses_gradient_blue01.png);}
 section.main .content.tools{background-image: url(../images/new_arrivals.png);}

 /* Section - Article */
 section.main article {padding: 5px 30px;}
 section.main article h2 {margin-top: 20px;}

 /* Section - Atmosphere */
 section.atmosphere {background-color: #f16522; padding-top: 30px; padding-bottom: 20px; color: #fff;}
 section.atmosphere article.polarized {padding: 0 20px 0 615px; background: url(../images/polarized_info.png) no-repeat 0 5px; min-height: 134px;}
  /*position x =0 y= 5px*/
 section.atmosphere article.none_polarized {padding: 0 20px 0 0; background: url(../images/none_polarized.png) no-repeat 615px 5px; min-height: 134px;} 
 /*position x =515px y= 5px*/
 
 /* Section - How to */
 section.how-to {background-color: #eeecec; background-image: url(../images/bg_tour.png); position: relative;}
 section.how-to aside{width: 30%; float: left; margin-right: 10px;}/*ver aqui me queda un gap*/
 section.how-to aside .content{padding: 30px 30px 20px 0;}
 section.how-to aside .content img{ display: block; margin-bottom: 15px; width: 70%;}
 section.how-to aside .content h4 {margin-bottom: 0;}
 section.how-to aside .content p {margin-bottom: .5em;}
 section.how-to aside .content a {display: inline-block; color: #cc6633; font-weight: 700;}
 section.how-to blockquote { margin: 0; width: 32%; color: #444; background-color: #fff; position: absolute; bottom: 0; right: 4%;}
 section.how-to blockquote p { margin: 30px 30px 20px 50px;}
 section.how-to blockquote p.quote {font-style: italic; font-size: 1.2em;}
 section.how-to blockquote p.credit {color: #777; font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; position: relative; }
 section.how-to blockquote::before{content: '\201c'; color: #d2bd65; position: absolute; top: 10px; left: 8px; font-size: 5em; font-family: serif;}
 section.how-to blockquote p.quote::after{content: '\201d'; font-family: serif;}
 section.how-to blockquote p.credit::before{content: '\2014'; position: absolute; position: absolute; top: -1px; left: 0;}

 /* Navigation */
 nav{ background-color:  #f16522; position: relative;  }
 
 /* after */
nav::after{content: ''; display: block; clear: both;}

nav a.mobile_menu {width: 32px; height: 32px; background: url(../images/icon_menu.svg) no-repeat 0 0; background-size: contain; position: absolute; top:5px; left:10%; margin-left: -16px; display: none;}

 nav ul { list-style: none; margin: 0; padding: 0;}
 nav ul li:hover{background-color: #a4a9ad;}
 nav ul li:hover > ul {display: block;}

 nav ul li a {display: inline-block; color: #fff; padding: 10px 20px; text-decoration: none; width: 125px; position: relative;}
 nav ul li a:visited {color: #fff;}
 nav ul li a:hover {background-color: #a4a9ad;}
 
nav ul ul {position: absolute; top: 100%; background-color: #777; display: none;}
nav ul ul li {position: relative;}
nav ul ul ul {left: 100%; top: 0px;}

 /* important flow to the left*/
 nav > ul > li {float: left;}
 nav > ul > li > a {width: auto; padding: 15px 20px 15px 20px;}

 nav a[aria-haspopup="true"]::after{ content: ''; display: block; width: 0px; height: 0px; position: absolute; top:16px; right: 15px; 
border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #fff;} 

nav > ul > li > a[aria-haspopup="true"]::after{border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; left: 20px; right: auto; bottom: 6px; top: auto;}

 /* Footer */
 footer {padding: 30px 30px 20px 30px; font-size: .8em; margin: 0; color: #fff; background-color: #f16522;}
 footer .content {display: inline;}
 footer a {margin: 30px; color: #fff;}
 footer a:visited { color: #fff;}
 footer a:hover {color: #000;}

 /* media Queries */
 @media screen and (max-width: 1000px) {
     h1 {font-size: 1.3em;}

     /* header */
     header div.hero {right: 56%;}
     header div.hero h1{ margin-top: 10px; margin-bottom: 10px;}

     /* Section - Atmosphere */
     section.atmosphere article.polarized {padding-left: 400px; background-size: 375px auto; /* background-size: width:375px heigth:auto */}
     section.atmosphere article.none_polarized { padding-right: 400px; background-size: 375px auto;}
 }

 @media screen and (max-width: 985px) {
    /* Section - Atmosphere - images h2 ul li*/
    section.atmosphere article.polarized{padding-right: 400px; background-size: 400px; }
    section.atmosphere article.polarized {padding: 0 20px 0 375px; background: url(../images/polarized_info_275px.png) no-repeat 0 5px; min-height: 134px;}
   
    SECTION.atmosphere article.none_polarized ul li{width: 350px;}
    section.atmosphere article.none_polarized{padding-left: 300px; background-size: 400px; }
    section.atmosphere article.none_polarized {padding: 0 20px 0 0; background: url(../images/none_polarized_info_275px.png) no-repeat 400px 5px; min-height: 134px;}
    }

 @media screen and (max-width: 865px) {
    h1 {font-size: 1.2em;}
        
    /* header */
    header {height: 459px; background-image: url(../images/banner_848.jpg); background-position: left top;}
    header a.logo{top: 20px; right: 48%; background: url(../images/logo_300.png) no-repeat 0 0; top:43px; left:47px; }
    header a.logo{width: 300px; height: 142px;}
    header div.hero {top: 180px; right: 10%;}

    /* Section - Atmosphere - images h2 ul li*/
    section.atmosphere article.polarized h2{width: 400px;padding-right: 30px; padding-left: 30px;}
    section.atmosphere article.polarized ul li{width: 400px; padding-right: 30px; }
    section.atmosphere article.none_polarized ul li{width: 310px; padding-right: 50px;}
 }

 @media screen and (max-width: 848px) {
    header{min-width:465px  ; min-height: 100%;}
    
    /* Section - How To */
    section.how-to blockquote p.quote {font-size: 1.1em; line-height: 1.2em;}
    section.how-to blockquote p.credit {font-size: .85em;}
 }

 @media screen and (max-width: 760px) {
    h1{font-size:1em;}
    h2{font-size:.90em;}
    h3{font-size:.80em;}
    a.btn {font-size: 1em;}

   /*Section - Main */
   section.main aside{width: auto; float: none; text-align: left;}
   section.main aside div.content{margin: 8px 20px 0px 0px; padding: 5px 0px 20px 170px; background-size: 50px 50px; background-position: 20PX 5PX; }

   section.main .content.trending {background: url(../images/polarized_sunglasses_g_1501_W130.png) no-repeat 30px 0;}
   section.main .content.find-it  {background: url(../images/gradient_blue_W130.png) no-repeat 30px 0;}
   section.main .content.tools {background: url(../images/new_arrivals_W130.png) no-repeat 30px 0;}

   /* Section - Atmosphere - images h2 ul li*/
   section.atmosphere article.polarized {padding: 160px 0px 0px 0px; background: url(../images/polarized_info.png) no-repeat 0 5px; background-size: auto; min-height: initial;}
   section.atmosphere article.polarized ul li{width: 100%; font-size: .85em;}
   section.atmosphere article.none_polarized {padding: 160px 0px 0px 0px; background: url(../images/none_polarized.png) no-repeat 0 5px; background-size: auto; min-height: initial;}
   section.atmosphere article.none_polarized ul li{width: 100%; font-size: .85em;}

   /* Section - How To */
   section.how-to aside{ width: 100%; float: none; margin: 0; position: relative;}
   section.how-to aside div.content{padding: 20px 20px 20px 170px;}
   section.how-to aside div.content img{display: inline-block; width: 160px; position: absolute; top: 30px; left: 0px;}

   section.how-to blockquote{ margin: 0 20px 0 40px; width: 90%; padding: 1px 0px 20px 0px; position: relative;}
   section.how-to blockquote p.credit{ margin-bottom: 0; }

   }

 @media screen and (max-width: 560px) {
   header {height: auto; min-height:348px;  background-image: url(../images/banner_625.jpg); background-position: left top;}
   header a.logo{top: 20px; right: 48%; background: url(../images/logo_200.png) no-repeat 0 0; top:43px; left:47px; }
   header a.logo{width: 200px; height: 95px;}
   header div.hero {top: 130px; right: 10%;}
   
   
   a.btn {font-size: .80em;}
   a {font-size: .90em;}
   h1{font-size:.80em;}
   h2{font-size:.75em;}
   h3{font-size:.70em;}
   p{font-size: .85em;}
   ul > li {font-size: .85em;}

   /*Section - Main */
   section.main aside div.content{margin: 8px 20px 0px 0px; padding: 5px 0px 10px 120px; background-size: 50px 50px; background-position: 20PX 5PX; }
   section.main .content.trending {background: url(../images/polarized_sunglasses_g_1501_W90.png) no-repeat 15px 0;}
   section.main .content.find-it  {background: url(../images/gradient_blue_W90.png) no-repeat 15px 0;}
   section.main .content.tools {background: url(../images/new_arrivals_W90.png) no-repeat 15px 0;}

   /* Section - How To */
   section.how-to blockquote p.quote {font-size: .90em; line-height: 1.2em;}
   section.how-to blockquote p.credit {font-size: .80em;}

   /* Section - Atmosphere - images h2 ul li
   section.atmosphere article.polarized{padding-right: 200px; background-size: 200px; }
   section.atmosphere article.polarized {padding: 0 20px 0 300px; background: url(../images/polarized_info_275px.png) no-repeat 0 5px; min-height: 134px;}
   
   section.atmosphere article.none_polarized ul li{width: 200px;}
   section.atmosphere article.none_polarized{padding-left: 200px; background-size: 200px; }
   section.atmosphere article.none_polarized {padding: 0 20px 0 0; background: url(../images/none_polarized_info_275px.png) no-repeat 250px 5px; min-height: 134px;}*/

   /* Navigation */
   nav { padding: 25px 15px 15px 15px; background-color: #f16522; height: 0px; overflow: hidden;}
   nav a.mobile_menu {display: block;}
   nav ul,
   nav ul ul,
   nav ul ul ul{display: block; position: static;}

   nav > ul {padding: 0;}
   nav > ul > li {float: none; margin-top: 10px;}

   nav ul li:hover {background: none;}

   nav ul li a {width: auto; display: block; margin: 8px 10px; padding: 6px 15px 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, .25);}

   nav ul li a:hover { background-color: rgba(255, 255, 255, .2);}

   nav ul ul{ background: none;}

   nav ul ul li a{margin-left: 30px;}
   nav ul ul ul li a{margin-left: 60px;}

   nav a[aria-haspopup="true"]::after {display: none;}

   /* Footer */
   footer div.content {display: block; margin-top: 15px;}
   footer div.content a { margin: 0 20px 0 0;}

}

 @media screen and (max-width: 480px) {
   header{min-width:380px  ; min-height: 100%;}
   header {height: 195px;  background-image: url(../images/banner_450.jpg); background-position: left top;}
   header a.logo{ top: 20px; right: 10%; background: url(../images/logo_200.png) no-repeat 0 0; top: 10px; left:10px; }
   header div.hero {top: 100px; right: 10%;}
 }


 @media screen and (max-width: 380px) {
   header{min-width:200px  ; min-height: 100%;}
   header {height: 150px;   background-image: url(../images/banner_350.jpg) no-repeat; background-position: left top;}
   header a.logo{ top: 10px; right: 10%; background: url(../images/logo_100.png) no-repeat 0 0; top: 10px; left:10px; }
   header div.hero {top: 50px; right: 10%;}
   
   a.btn {font-size: .70em;}
   a {font-size: .80em;}
   h1{font-size:.75em;}
   h2{font-size:.65em;}
   h3{font-size:.60em;}
   p{font-size: .85em;}
   ul > li {font-size: .85em;}
   
   footer {padding: 10px 5px 10px 5px; font-size: .8em;}

   /* Section - Atmosphere - images h2 ul li
   section.atmosphere article.polarized{padding-right: 100px; background-size: 100px; }
   section.atmosphere article.polarized {padding: 0 10px 0 200px; background: url(../images/polarized_info_175px.png) no-repeat 0 5px; min-height: 134px;}
   section.atmosphere article.polarized
      
   section.atmosphere article.none_polarized ul li{width: 100px;}
   section.atmosphere article.none_polarized{padding-left: 100px; background-size: 150px; }
   section.atmosphere article.none_polarized {padding: 0 50px 0 0; background: url(../images/none_polarized_info_175px.png) no-repeat 250px 5px; min-height: 134px;}*/
 }

 @media screen and (max-width: 330px) {
   header{min-width:100px  ; min-height: 100%;}
   header {height: 120px;  background-size: auto; background: url(../images/banner_300.jpg) no-repeat center;}
 }