/*
    Arquivo         : style.css
    Empresa         : M3 Web - Agência de Criação
    Autor           : Mário da Silva
    Data de criação : 02/11/2016
    Alterado por    : Mário da Silva
    Última alteração: 11/11/2016
    Função          : Gerenciar Layout do website
    Cliente         : STH Suplementos
    Observações     : Arquivo recriado, 1a criação feita em Setembro/2016
*/

/*Content*/
.content { width: 92%; margin: 0 4%; padding: 20px 0; }

/*Header*/
.backtop              { position: fixed; z-index: 99; display: none; cursor: pointer; bottom: 15px; right: 25px; text-transform: uppercase; color: #fff; 
                      font-size: 0.8em; color: #fff; padding: 10px; background: rgba(0,0,0,0.5);}
.main_header          { background: linear-gradient(to bottom, #333333,#990000 ); position: relative; }
.main_header_logo     { font-size: 0; float: left; }
.main_header_logo img { height: 58px; }
.mobile_action        { width: 46px; height: 46px; margin: 10px 0 0 0; float: right; cursor: pointer; 
                 background: #1a5977 url(../img/mobile.png) center center no-repeat ;
                border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.mobile_action.active { background-color: #000; }
.mobile_action:hover  { background-color: #fff; }

/*Slide*/
.slide { background: #222; position: relative; display: block;  }
.slide_controll { position: absolute; top: 25%; width: 100%;}
.slide_nav { position: absolute; padding: 5px 15px; font-size: 2em; background: rgba(255,255,255,0.6);
            cursor: pointer; z-index: 89; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.slide_nav:hover { background: #007fff; }
.slide_nav.back { left: 0; margin-left: 5px;  }
.slide_nav.go { right: 0; margin-right: 5px; }
.slide_item { display: none;  }
.slide_item.first { display: block; }
.slide_item_desc { padding: 15px; text-transform:  uppercase; color: #fff; }
.slide_item_desc h1 { margin-bottom: 10px; font-size: 1.2em; }
.slide_item_desc a  { color: #fff; text-decoration: none; }
.slide_item_desc a:hover { text-decoration: underline; }
.slide_item_desc .tagline { font-size: 0.875em; color: #bbb; font-weight: 300;  }

/*Destinos mais visto*/
.more_news                   { padding: 25px; background: url(../img/bg_news.jpg); }
.more_news_item              { float: left; width: 100%; background: #fff; margin-top: 20px; box-shadow: 0 0 5px #000;
                                min-height: 350px; }
.more_news_item img          {  margin: 0 auto; text-align: center; padding: 20px 0 20px 0; }
.more_news_item_desc         { padding: 15px; }
.more_news_item_desc h1      { font-size: 1em; margin-bottom: 10px;  }
.more_news_item_desc a       { text-decoration: none; color: #007fff; }
.more_news_item_desc a:hover { text-decoration: underline;  }
.more_news_item_desc time    { font-size: 0.8em; color: #888;  }

.como-comprar                { padding: 15px; width: 100%; margin-top: 20px;  border-radius: 4px; background: #009900; color: #fff; text-align: center;
                              text-transform: uppercase; cursor: pointer; }
.como-comprar                { text-align: center; }
.como-comprar p              { font-size: 1em; }
.como-comprar mark           { background: none; font-weight: bold; font-size: 1em; color: #FFFF00;  }

/*nao encontrei*/
#dontfind_         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
                     background-color: #333333; }
#dontfind_         { margin: 0 auto; }
.bestviews .content { width: 90%; padding: 2%; margin: 5%; }
#dontfind_ header  { color: #fff; }
#dontfind_ span    { font-size: 0; }
#dontfind_ input   { margin: 5px auto; }
#dontfind_ .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#dontfind_ a       { text-decoration: none; }
#dontfind_ .btn    { float: left; width: 100%; margin: 0 auto; }

/*Categorias*/
/*Acessorios*/
.content     { width: 90%; }
#ace         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#ace         { margin: 0 auto; }
#ace header  { color: #fff; }
#ace span    { font-size: 0; }
#ace .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#ace a       { text-decoration: none; }

/*albumina*/
.content     { width: 90%; }
#albu         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#albu         { margin: 0 auto; }
#albu header  { color: #fff; }
#albu span    { font-size: 0; }
#albu .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#albu a       { text-decoration: none; }

/*bca*/
.content     { width: 90%; }
#bca         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#bca         { margin: 0 auto; }
#bca header  { color: #fff; }
#bca span    { font-size: 0; }
#bca .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#bca a       { text-decoration: none; }

/*cafeina*/
.content     { width: 90%; }
#cafe         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#cafe         { margin: 0 auto; }
#cafe header  { color: #fff; }
#cafe span    { font-size: 0; }
#cafe .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#cafe a       { text-decoration: none; }

/*creatna*/
.content     { width: 90%; }
#crea         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#crea         { margin: 0 auto; }
#crea header  { color: #fff; }
#crea span    { font-size: 0; }
#crea .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#crea a       { text-decoration: none; }

/*emagracedores*/
.content     { width: 90%; }
#ema         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#ema         { margin: 0 auto; }
#ema header  { color: #fff; }
#ema span    { font-size: 0; }
#ema .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#ema a       { text-decoration: none; }

/*glutamina*/
.content     { width: 90%; }
#gluta         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#gluta         { margin: 0 auto; }
#gluta header  { color: #fff; }
#gluta span    { font-size: 0; }
#gluta .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#gluta a       { text-decoration: none; }

/*kits*/
.content     { width: 90%; }
#kit         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#kit         { margin: 0 auto; }
#kit header  { color: #fff; }
#kit span    { font-size: 0; }
#kit .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#kit a       { text-decoration: none; }

/*massa*/
.content     { width: 90%; }
#massa         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#massa         { margin: 0 auto; }
#massa header  { color: #fff; }
#massa span    { font-size: 0; }
#massa .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#massa a       { text-decoration: none; }

/*pre*/
.content     { width: 90%; }
#pre         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#pre         { margin: 0 auto; }
#pre header  { color: #fff; }
#pre span    { font-size: 0; }
#pre .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#pre a       { text-decoration: none; }

/*thermogenico*/
.content     { width: 90%; }
#thermo         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#thermo         { margin: 0 auto; }
#thermo header  { color: #fff; }
#thermo span    { font-size: 0; }
#thermo .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#thermo a       { text-decoration: none; }

/*whey*/
.content     { width: 90%; }
#whey         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#whey         { margin: 0 auto; }
#whey header  { color: #fff; }
#whey span    { font-size: 0; }
#whey .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#whey a       { text-decoration: none; }

/*zma*/
.content     { width: 90%; }
#zma         { display:none; position:fixed; left:0; top:0; z-index:9000; width: 100%; height: 100%; 
               background-color: #333333; overflow:auto; }
#zma         { margin: 0 auto; }
#zma header  { color: #fff; }
#zma span    { font-size: 0; }
#zma .fechar { font-weight: bold; font-size: 2em;  color: #fff; }
#zma a       { text-decoration: none; }



.bestviews h1           { font-size: 1.2em; color: #fff; }
.bestviews h2           { font-size: 1em; color: #fff; }
.letter_form label      { display: block; width: 100%; margin-bottom: 20px; margin-left: 10px; }
.letter_form span       { font-size: 0; }
.letter_form input      { width: 90%; border: none; background: #fff; padding: 10px; margin-top: 5px;
                        font-family: 'Arial', sans-serif; }
.letter_form .btn       { border: none; background: #289cb5; padding: 15px 25px; text-transform: uppercase; font-weight: 600; 
                        font-size: 0.875em; float: right; margin-top: 10px; cursor: pointer; color: #fff; widows: 50%; }
.letter_form .btn:hover { background: #51c1d9; }

/*NewsLetter*/
.newsletter         { top: 0; }
.newsletter         { margin-top: 0; background: #007fff;  text-align: center; position: relative;
            color: #fff;}
.newsletter h1      { font-size: 1.5em; font-weight: 300; margin-bottom: 20px; }
.newsletter h1 mark { background: none; font-weight: bold; color: #fff; }
.newsletter form    { width: 100%; max-width: 550px; margin: 0 auto;}
.newsletter input   [type="email"]{ float: left; width: 60%; border: none; padding: 11px; }
.newsletter input   [type="submit"]{ float: left; width: 40%; background: #1a5977; border: none;
                    font-size: 1em; text-transform: uppercase; color: #fff; font-weight: bold; cursor: pointer;}
.newsletter_icon   { width: 54px; height: 54px; background: #007fff url(../img/newsletter.png) center center no-repeat ; 
                   position: absolute; top: 0; left: 50%; margin-top: -24px; margin-left: -27px;
                   border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.newsletter p mark { background: none; font-size: 1.2em; font-weight: bold; color: #ffff00; cursor: pointer; }
.newsletter .t     { font-size: 0.8em; padding-bottom: 5px; }
.newsletter .m3 a  { border: 0; }
.newsletter .m3    { text-align: center; cursor: pointer; }
.newsletter .btn   { border: none; background: #ffff4f; padding: 15px 25px; text-transform: uppercase; font-weight: 600; 
                 font-size: 0.875em; float: right; margin-top: 10px; cursor: pointer; color: #333; width: 100%; }
.newsletter .btn:hover { background: #51c1d9; color: #fff; }

.contato_form span { font-size: 0; }

/*Mais vistos*/
.most_views { background: #eee; }
.most_views_item { float: left; width: 100%; margin: 15px 0;}
.most_views_item img { float: left; width: 35%; }
.most_views_item_desc { float: right; width: 65%; padding-left: 15px;}
.most_views_item_desc time { font-size: 0.875em; color: #333; margin-bottom: 5px; display: block; }
.most_views_item_desc h1 { font-size: 1em; }
.most_views_item_desc a { text-decoration: none; color: #007fff; }
.most_views_item_desc a:hover { text-decoration: underline; }

/*Galeria*/
.more_and_gallery .container { background: #fff; }
.gallery                     { padding: 25px; }
.gallery .section_title      { padding: 15px; }
.gallery img                 { float: left; width: 25%; padding: 1%; }

.comprar                     { text-align: center; background: #009900; padding: 5px; }
.comprar h1                  { font-size: 0.8em; color: #fff; }
.comprar h2                  { color: #ffff00; font-size: 0.7em; }
.comprar h2 img              { width: 20px; height: 20px; }

/*Footer*/
.main_footer { padding: 10px; background: #333; text-align: center; color: #fff; font-size: 0.875em; }
.main_footer h1 { font-size: 1em; padding-bottom: 5px; }
.main_footer_social { float: left; width: 100%; margin: 0 0 30px 0; }
.main_footer_social li { display: inline-block; margin: 10px 10px; padding-bottom: 20px; }
.main_footer_social a { float: left; padding: 10px; background: #fff; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;  }
.main_footer_social a:hover { background: #007fff; }

.main_footer_copy p mark  { background: none; font-weight: bold; color: #fff; cursor: pointer; }
.main_footer_copy warning {  font-weight: bold; font-size: 1em; padding-bottom: 8px; }
.main_footer_copy .t      { font-size: 0.8em; padding-bottom: 5px; }
.main_footer_copy .m3 a   { border: 0; }
.main_footer_copy .m3     { margin-top: 5px; text-align: center; cursor: pointer; }
.main_footer_copy         { margin-top: 5px; }

.main_footer_copy  { }
.face { background: #fff; margin-top: 20px; }


/*480 Break Point*/
@media (min-width: 30em){
    .more_news_item { float: left; width: 48%; margin-right: 4%; min-height: 300px; }
    .more_news_item:nth-of-type(2n+0){ margin-right: 0; }
    
    .comprar    { text-align: center; background: #009900; }
    .comprar h1 { font-size: 1.2em; color: #fff; }
    .comprar h2 { color: #ffff00; font-size: 1em; }
    
    .main_footer h1 { font-size: 1.5em; }
}

/*592 Break Point*/
@media (min-width: 37em){
    .most_views_item h1 { font-size: 1.3em; }
    .gallery img { float: left; width: 20%; padding: 1%; }
    .gallery img:nth-of-type(5n+0){}
}

/*768 Break Point*/
@media (min-width: 48em){
    .main_header_nav { float: left; width: 80%; text-align: left; margin-top: 20px; }
    .main_header_nav_item { position: fixed; display: inline-block; margin-right: 10px; }
    .main_header_nav_sub {  position: absolute; top: 100%; left: 0; width: 300%; 
                            background: #fff; padding: 10px; text-align: left; z-index:99; }
    .main_header_nav_item:hover .main_header_nav_sub,
    .main_header_nav_item > a:hover .main_header_nav_sub { display: block; }
    .main_header_nav_sub_item { float: left; width: 50%; }
    .main_header_nav_sub_item > a { float: left; width: 100%; padding: 10px; text-decoration: none; 
                            text-transform: uppercase; font-size: 0.8em; color: #333; }
    .main_header_nav_sub_item a:hover { background: #007fff; color: #fff; }
    .main_header_nav_item > a { float: left; padding: 10px; text-transform: uppercase; text-decoration: none;
                                color: #fff; font-size: 0.9em; font-weight: bold;}
    .main_header_nav_item:last-of-type { margin-right: 20px;}
    .main_header_nav_item:hover,
    .main_header_nav_item > a:hover { background: #007fff; }
    
    .main_header_logo     { position: absolute; top: 10px; z-index: 99; border: 0; }
    .main_header_logo img { width: 180px; height: 180px; }
    .section_title        { font-size: 2em; font-weight: 300; text-align: left; }
    
    .more_news_item:nth-of-type(2n+0),
    .more_news_item                  { float: left; width: 23.5%; margin-right: 2%; }
    .more_news_item:nth-of-type(4n+0){ margin-right: 0; }
    .como-comprar p                  { font-size: 1.1em; }
    .como-comprar mark               { background: none; font-weight: bold; font-size: 1.4em; color: #FFFF00;  }
    
    .newsletter h1 { font-size:  1.8em; }    
    
    .comprar        { text-align: center; background: #009900; }
    .comprar h1     { font-size: 2em; color: #fff; }
    .comprar h2     { color: #ffff00; font-size: 1.4em; }
    .comprar h2 img { width: 50px; height: 50px; }    
} 

/*959pixels*/
@media (max-width: 59.9375em){
    .main_header { background: linear-gradient(to bottom, #333333,#990000 ); height: 100px; padding: 0; }   
    .main_header_nav { position: fixed; left: -100%; top: 0; width: 76%; height: 100%; min-width: 200px; 
                      max-width: 360px; background: #222; z-index: 99; overflow: hidden; overflow-y: auto; }
    .spl a { font-size: 2em; color: #f2723E; }
    .main_header_nav_item { float: left; width: 100%; position: relative; }
    .main_header_nav_item > a { float: left; width: 100%; padding: 15px; text-transform: 
                               uppercase; text-decoration: none; color: #eee; font-weight: bold; font-size: 0.875em; }
    .main_header_nav_item:hover,
    .main_header_nav_item > a:hover { background: #444; color: #fff; }
    .main_header_nav_sub { float: left; width: 100%; padding: 10px; background: #333; }
    .main_header_nav_sub_item { float: left; width: 100%; }
    .main_header_nav_sub_item a { float: left; width: 100%; padding: 15px; text-transform: uppercase;
                                text-decoration: none; color: #fff; font-size: 0.8em;}
    .main_header_nav_sub_item a:hover { background: #007fff; }       
}

/*960 Break Point*/
@media (min-width: 60em){
    .main_header { background: linear-gradient(to bottom, #333333,#990000 ); height: 100px; padding: 0; }
    .mobile_action { display: none; }
    .spl { color: #f2723E; }
    .main_header_nav { float: right; width: 80%; text-align: right; margin-top: 20px; }
    .main_header_nav_item { position: relative; display: inline-block; margin-right: 10px; }
    .main_header_nav_sub { display: none; position: absolute; top: 100%; left: 0; width: 300%; 
                            background: #fff; padding: 10px; text-align: left; z-index:99; }
    .main_header_nav_item:hover .main_header_nav_sub,
    .main_header_nav_item > a:hover .main_header_nav_sub { display: block; }
    .main_header_nav_sub_item { float: left; width: 50%; }
    .main_header_nav_sub_item > a { float: left; width: 100%; padding: 10px; text-decoration: none; 
                            text-transform: uppercase; font-size: 0.8em; color: #333; }
    .main_header_nav_sub_item a:hover { background: #007fff; color: #fff; }
    .main_header_nav_item > a { float: left; padding: 10px; text-transform: uppercase; text-decoration: none;
                                color: #fff; font-size: 0.9em; font-weight: bold;}
    .main_header_nav_item:last-of-type { margin-right: 20px;}
    .main_header_nav_item:hover,
    .main_header_nav_item > a:hover { background: #007fff; }
    
    .slide_controll { width: 92%; margin: 0 4%; top: 30%; }
    .slide_item_desc { position: absolute; width: 100%; padding: 20px 4%; bottom: 0;
                    background: rgba(0,0,0,0.7);}
    
    .slide_item_desc h1 { font-size: 1.8em; text-shadow: 2px 2px 4px #000; }
    .slide_item_desc .tagline { font-size: 1em; text-shadow: 2px 2px 4px #000; color: #fff;  }  
}

/*1280 Break Point*/
@media (min-width: 80em ){    
    .more_and_gallery .container   { background: #fff; }
    .gallery img                   { width: 10%; padding: 0.5%; }
    .gallery img:nth-of-type(10n+0){}
}

/*1366 Break Point*/
@media (min-width: 85em){
    .content, 
    .slide_item_desc,
    .slide_controll,
    .more_and_gallery{ width: 80%; margin: 0 10%; }
    .slide_item_desc { padding: 20px; }
    .slide_nav.back,
    .slide_nav.go{ margin: 0; }
}

/*1600 Break Point*/
@media (min-width: 100em){
     .content,
     .more_and_gallery,
     .slide_controll,
     .slide_item_desc { width: 76%; margin: 0 12%; }
     .slide_controll { top: 40%;}
}