/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Red: #e12828
    - Black: #000
    - White: #fff
    - Gray: #333333
*/

/*==========================================================

    RESET

===========================================================*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;	

    }
    ol, ul {list-style: none;}
    table{border-collapse:collapse; width:100%;}
    td{vertical-align:top;}

    svg:not(:root) {overflow: hidden;/*reset*/}

/*image replacement*/
    .hide-text {
        text-indent:  100%;
        white-space:  nowrap;
        overflow:  hidden;
        }	

    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        border-style: solid;
        height: 0;
        color: #ccc;
        margin: 3em 0
        } 

    img { border: 0; max-width:100%;} 
    img.imgresp{max-width: 100%;}

    /* Make HTML 5 elements display block-level for consistent styling */  
    header, nav, article, footer, address { display: block;  } 

    /* Clearfix */
    .cf:before,.cf:after {content: " ";display: table;}
    .cf:after {clear: both;}
    .cf {*zoom: 1;}
    .clear{clear: both}
    /* clear floats */ 
    .group:before,
    .group:after {content: ""; display: table;} 
    .group:after {clear: both;}
    .group {zoom: 1;}	
    .clear { clear: both;}

    ::-moz-selection {
        background: #e12828; 
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #000;
        color: #fff;
        text-shadow: none;
    }

    html, body{
        -webkit-text-size-adjust: none; 
        -ms-text-size-adjust: 100%; 
        margin: 0;
        padding: 0;
        background: #333333!important;
        line-height: normal; 
        font-family: 'Montserrat', sans-serif !important;
    }

/*==========================================================

    TYPOGRAPHY

===========================================================*/

    h1 { font-weight:900; color:#e12828; font-size:45px; text-transform: uppercase; line-height:normal;}
        h1 span{color: #333333}
	h2 { font-weight:900; color:#e12828; font-size:25px; text-transform: uppercase; font-style: italic}
	h3 { font-weight:900; color:#fff; font-size:25px; text-transform: uppercase}
	h4 { font-weight:600; color:#e12828; font-size:20px; text-transform: uppercase;}
	h5 { font-weight:800; color:#e12828; font-size:18px; text-transform: uppercase;} 
    h6 { font-weight:300; color: #fff; font-size: 15px; }

    b{font-weight: 900}
	p, ul, ol, li { font-size: 15px; font-weight: 500; color: #333333; line-height: 25px; }

    a, button, .button, a:hover, button:hover, .button:hover, button.mobile_btn::after {
        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease;
        transition:all .3s ease;
    } 

    a:link, a:visited, a:active {text-decoration:none; color:#e12828}
    a:hover {text-decoration:none;}
    .center{text-align: center!important}
    b, strong{font-weight: 900}

/*==========================================================

    FRAMELESS INVENTORY STYLES

===========================================================*/
    .hosted-content h1 {font-size: 27px!important;}
	

/*==========================================================

   NEW HEADER

===========================================================*/
header {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);position: relative;z-index: 3 !important;}
.top-bar {background:#111 !important;position: relative;}
ul.flex-nav {display: flex;align-items: center;float: none !important;gap: 30px;}
.half-nav {width: 50%;}
.logo {position: relative;}
.wid90 {margin:0 auto;width:90%;}
.align-left {text-align: left;}
.flex-contain {display:flex;gap: 5%;}
.flex-start {justify-content: flex-start}
.flex-end {justify-content: flex-end}
.logo a {display: inline-block;position: relative;width: 350px;z-index: 9;max-width: 100%;}

.logo img {max-width: 100%;position: absolute;width: 100%;top: -30px;left: 0;right: 0;bottom: 0;}

.bottom-head {background: #fff;}
.topleft, .topright,.top-center {flex-basis: 33%;}
.bottom-head .flex-contain {justify-content: space-between;align-items: center;}
.topleft a, .topright a {color: #000;transition:.3s all;display: inline-block;}
.topleft a { padding: 20px 0;}
.topleft a:before {content: "\f276";font-family: "Font Awesome 7 Free";font-weight: 900;margin-right: 15px;color: #e12828;display: inline-block;vertical-align: middle;font-size: 18px;}

.topleft span {display: inline-block;vertical-align: middle;}

.topright {padding: 20px 0;display: flex;justify-content: flex-end;gap: 10px;}

.top-center {text-align: center;font-size: 22px;font-weight: 900;line-height: 2;padding-top: 45px;padding-bottom: 5px;}
.top-center i {font-size: 18px;}
.topright a { line-height: 2;padding: 5px 10px;transition: .3s all;}

a#active-page {background: #ddd;border: 1px solid #ddd;color: #000;}

a#inactive-page {border-bottom: 1px solid #ddd;}
.mobile-logo {display: none;}
.slideSwiper {background:#111 !important;}
.slideSwiper .swiper-slide {}
.swiper-slide img {max-width: 100%;width: 100%;}


.grid-cats {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
	display: grid;
}

.cat-option {height: 300px;overflow: hidden;position: relative;}
.cat-option img {height: 100%;width: 100%;object-fit: cover;transition: transform 0.4s ease, filter 0.4s ease;
}

span.cat-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 50px;transition: background 0.4s ease;
    box-sizing: border-box;
}

span.cat-title p {color:#fff;display:block;text-transform: uppercase;font-style: italic;letter-spacing: 2px;}


.cat-option:hover img {
  transform: scale(1.1);
  filter: blur(3px);
}

.cat-option:hover span.cat-title {
  background: rgba(0, 0, 0, 0.65); /* darkens background */
}

/*==========================================================

    LAYOUT STYLES

===========================================================*/
.page-wid {max-width: 1300px;}
	.column1 {width:100%;}
	.column2 {width:47.5%; float:left; margin-right:5%; box-sizing: border-box; color:#fff;}
	.column3 {width:33.33333%; float:left; padding:0 ; box-sizing: border-box;}
	.column4 {width:23%; margin-right:2%; float:left;  box-sizing: border-box;}
	.column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
    .column6 {width:16%; float:left; padding-right:1%; box-sizing: border-box;}
	
	.twothird{width:60%; float:left; box-sizing: border-box;}
	.onethird{width:40%; float:left; padding-left: 40px; box-sizing: border-box; text-align:right}
	.dois-terco{width:70%; float:left; box-sizing: border-box;}
	.um-terco{width:30%; float:left; box-sizing: border-box; }
	
	.last{padding-right:0; margin-right:0 !IMPORTANT;}
    .midcolumn {padding:0 20px;}
	.center{text-align:center}
    
    article{background:#fff}
    .wrapper{ width:96%; margin:0 auto; padding:0; max-width:1200px; position:relative}
    .wrapper-small{ width:100%; margin:0 auto; padding:0; max-width:1024px; position:relative}
    .pad{padding:3em 0;}



/*==========================================================

    HEADER STYLES 

===========================================================*/
/*
    .top{background:#000; color: #fff; padding:10px 0}
        .top a, .top p{color: #fff;}
    
    .topleft{float: left; text-align: left;}
        .topleft h6{display: inline-block; margin:5px 20px 0 0; }

    .topright{float: right; text-align: left;}
        .topright a{display: inline-block; border: 2px solid #fff; padding: 5px 20px;}
        .topright a:hover{background: #fff; color: #000; border-color: #ccc}

    header{
        position:fixed;
        width:100%;
        margin:0;
        padding:0;
        background:#fff url("../siteart/pattern.jpg") repeat;
        z-index:999;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
        box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.6);
    }

    #spaceheader{height:250px}

    .headerwrap{width:96%;max-width:1000px;margin:0 auto;}
    .logo{float: left; margin: 0; text-align: left; padding: 5px 0}
    .logo img{width:100%; max-width: 450px; display:block!important; margin: 0;}

    .header-right{float:right; width: calc(100% - 450px); text-align: right; margin-top: 3.5em;}
*/
   
/*==========================================================

    NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */



/*==========================================================

    CONTENT STYLES

===========================================================*/
    .botoes a{
        width: 47%;
        float: left;
        text-align: center; 
        display: block;
        background: #000;
        text-transform: uppercase;
        padding: 20px 0;
        margin:0 1% 2em 1%;
        color: #fff;
        font-weight: 700;
        font-size: 17px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        border: 1px solid #000;
    }
    .botoes a:hover{
        background: #fff;
        color: #e12828;
        border: 1px solid #ccc;
    }

    a.botao{
        padding: 15px 0; 
        text-align: center; 
        border: 3px solid #e12828; 
        display: block;
        text-transform: uppercase;
        color: #e12828;
        font-weight:700;
        font-size: 22px;
    }
    a.botao:hover{background: #e12828; color: #fff}

    #mainphoto{
        background: url("../siteart/mainimg.jpg") no-repeat bottom ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 290px;
        padding: 100px 0 0 0;
    }
    #mainphoto a{
        padding: 20px 0; 
        text-align: center;  
        display: block;
        width: 380px;
        margin: 10px 0;
        text-transform: uppercase;
        color: #fff;
        background: #000;
        font-weight:700;
        font-size: 17px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        }
        #mainphoto a:hover{background:#fff;color:  #e12828}

    #graybtm{background:#5c5a5a}
    
    .formcont{ background: #ebebeb; border: 1px solid #000; padding: 2%}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}
    
    iframe.mapa{border:0; width:100%; height: 350px; display: block}
    #loctitle{display: block; border: 2px solid #000; text-align: center; padding: 10px 0; margin:2em auto 10px auto ;}
    
    .entrega{margin:1%; width: 31%; float: left}
    .entrega img{max-width: 395px;width: 100%;}

/*==========================================================

	ZOOM

==========================================================*/
    .image-zoom-container {
        list-style: none;
        margin: 2em auto;
    }

    .square{
        width: 32.33%;
        float: left;
        margin: 0.5%;
    }

    .square h3 {
        display: block;
        text-align: center;
        margin: 15% auto 0 auto;
        padding: 10px 0;
        width: 100%;
        color: #fff;
    }
    
    .zoom-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%; 
        vertical-align: top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float:left;
    }

    .zoom-container img {
        display: block;
        width: 100%;
        height: auto;
        -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
    }
    .zoom-container .zoom-caption {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
    }

    .zoom-container:hover img {
        -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
    }
    .zoom-container:hover .zoom-caption {background: none;}

    .hide-zoom-mobile{clear:both}


/*==========================================================

    SCROLLING INVENTORY

===========================================================*/

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
    }

    .scrolling{
        width:100%;
        height:92px;
    }


/*==========================================================

    FORM

===========================================================*/

    .order-form{display:block;}
    #formpage{padding:0;}
    form{ margin:0 0 0;}
    label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    input{
        border: #ccc solid 1px;
        border-radius: 2px;
        padding: 12px;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px 0  ;
        width: 99%;
        font-family: 'Montserrat', sans-serif;
    }
    input.half{width:49%;float:left;}

    input:focus{ outline: #e12828 solid 1px!important;}

    input.button2{
        display:block;
        width:200px;
        padding: 10px 0;
        margin:10px 0 0 0;
        background-color:#000;
        color:#fff;
        border: 0;
        -webkit-transition:.3s ease-in;  
        -moz-transition:.3s ease-in;  
        -o-transition:.3s ease-in;  
        transition:.3s ease-in;
    }

    input.button2:hover{
        background-color:#4d4d4d;
        cursor:pointer;
    }

    select{
        border:#ccc solid 1px;
        border-radius: 2px;
        padding: 2%;
        font-size:14px;
        box-sizing:border-box;
        width:98%;
        margin:0 1% 10px;
        color:#969696;
    }
    select.half{width:48%;float:left;}

    textarea{
        font-family: 'Montserrat', sans-serif;
        border: #ccc solid 1px;
        border-radius: 2px;
        padding: 10px;
        font-size:14px;
        width:99%;
        margin:0 0 10px 0  ;
        box-sizing:border-box;
    }
    textarea:focus{ outline: #e12828 solid 1px!important;}

    .CaptchaPanel {
        margin: 0px 0px 0px 0px !important;
        text-align: center;
        padding: 0px !important;
    }

    .CaptchaWhatsThisPanel a{color: #000!important}
    .CaptchaImagePanel,
    .CaptchaMessagePanel,  
    .CaptchaAnswerPanel, 
    .CaptchaWhatsThisPanel {
        margin:0px 0px 0px !important;
        font-size: 12px;
        color: #000;
        text-align: left !important;
        font-weight:normal!important;
        padding:0px 0 0!important;
        box-sizing:border-box;
        }

    .CaptchaImagePanel{float:left;margin-right:10px !important;}
    .CaptchaMessagePanel{}
    #CaptchaAnswer{margin:5px 0; width:100%}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

/*==========================================================

    FOOTER STYLES

===========================================================*/
    #bottom{
        width: 100%;
        margin: 0 auto;
        background:#333333 ;
        color: #fff;
        padding: 2em 0;  
        display: block;
        text-align: left;
        }

    #bottom p{ font-weight:500; color:#e4e4e4; font-size:13px;}
    #bottom a{color:#e4e4e4}
    #bottom a:hover{color:#fff!important; font-weight:600}

/*==========================================================

    RESPONSIVE STYLES

===========================================================*/


@media screen and (max-width: 1250px) {
	.mobile-logo {display: block;position: relative;}

.mobile-logo a {width: 300px;z-index: 9;max-width: 100%;position: absolute;top: 50%;z-index: 999 !important;left: 50%;transform: translate(-50%, -50%);}
	.flex-contain {gap:2%;}
}
@media screen and (max-width: 1150px) {
	.top-center a {font-size: 18px;}
	.topleft a,.topright a{font-size: 15px !important;}
	
}

/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1025px) {
    .wrapper-small{width: 90%;}
	.bottom-head .flex-contain {flex-wrap:wrap;}
	.top-center{flex-basis: 100%;order: -1;}
	.topright {padding: 0px 0 20px 0;display: flex;justify-content: center !important;flex-basis:100%;}
	.topleft {display: none;}
	span.cat-title{padding: 30px;}
	span.cat-title p {text-align: left !important;}
}


@media screen and (max-width: 950px) {
	
}
@media screen and (max-width: 900px) {
    header{position:relative}
    #spaceheader { height:auto;}
	span.cat-title h3 {font-size: 18px;}
    h1{font-size: 32px; text-align: center}
    h2{font-size: 22px; text-align: center}
    p{text-align: center}
    #bottom p{text-align: left}
    .column2 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    a.botao {padding: 10px 0;font-size: 18px;}
    
    a.morebutton {
        max-width: 150px;
        margin: 10px auto 0 auto;
    }
    .square {
        width: 50%;
        float: none;
        margin:1% auto;
    }
    
    .header-left, .header-right{width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .logo {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .logo img {
        max-width: 350px;
        margin: 0 auto;
    }
    
    .column4{width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .entrega{margin:1%; width:48%; float: left}
    .footlink{margin: 0 auto 2em auto}
    #bottom p{text-align: center}
    
    #mainphoto a {
        padding: 15px 0;
        width: 90%;
        margin: 10px auto;
        font-size: 14px;
    }
    
    #mainphoto {background: url(../siteart/mainimg.jpg) no-repeat right; height: 222px;}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    .botoes a {
        width:80%;
        float:none;
        margin: 1% auto;
    }
    .botoes{padding: 0 0 2em 0}
    .pad{padding:2em 0}
    .square { width: 80%;}
    
    .twothird{width:100%; float:none; margin: 0 auto; text-align: center}
    .onethird{width:100%; float:none; padding:0 ; margin: 3em auto 0 auto; text-align: center}
    .dois-terco{width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .um-terco{width:100%; float:none; margin: 0 auto; text-align: center}
	
	.grid-cats {
		grid-template-columns: repeat(1, 1fr);}
	.cat-option {height: 160px;}
}


/* Galaxy (portrait and landscape) ----------- */


/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 500px){
    /*#spaceheader { height: 320px;}*/
    .entrega{margin:1% auto; width:100%; float: none}
    .entrega img{display: block; margin: 0 auto;}
}
 
@media screen and (max-width: 450px){
	    .mobile-logo a {
        position: unset !important;
        transform: unset !important;
        width: 85% !important;
    }
	    .mobile-logo {
			display: inline-flex;
        justify-content: center;
        width: 100%;
    }
	.mobile-logo img {
    max-width: 100%;
    width: 100%;
    margin: 0 auto !important;
}
	
	.top-center {padding-top: 15px;}
}