/* Site Developer: Karoline Dassie

    Main Colors
    - Black: #000000
    - Red: #a81e12
    - White: #fff
    - Gray: #f3f3f3
    - Dark Gray: #393939
*/

/*===================== 
	CSS reset/normalize 
=======================*/
/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	base styles 
=======================*/
html, body {
    font-family: Arial, sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	margin: 0;
    background: #a81e12;
}

svg:not(:root) {overflow: hidden;/*reset*/}
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}
	
/*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;
	} 

img { border: 0;} 
	
/*===================== 
	typography 
=======================*/
h1{font-family: 'Oswald', sans-serif;}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
    h1 {font-size: 62px; color: #fff; text-transform: uppercase; font-weight: 900;}
	h2 {font-size: 28px; color: #ac1c14; text-transform: uppercase; font-weight: 400;}

body, p {
	margin: 0;
	font-size: 16px; 
	line-height: 26px;
	font-family: 'Fira Sans', sans-serif;
	}

p{color: #5e5e5e}
b, strong {font-weight: 900;}

/*===================== 
	link styles 
=======================*/
a:focus {outline: thin dotted;/*reset*/}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: inherit; 
    text-decoration:none;
    transition: all 300ms ease;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		color: #ccc;
        transition: all 300ms ease;
		}  

/*===================== 
	header styles 
=======================*/
    header {background:#f3f3f3; width: 100%; display: inline-block; }
    .logo {
        width: 28%; 
        display: inline-block; 
        text-align: center; 
        margin: 0 auto; 
        vertical-align: middle; 
        background: #fff;
        }
        .logo img {width: 90%; padding: 2%; margin: 0 auto; max-width: 180px; text-align: center;}

    .header-right {width: 71%; display: inline-block; vertical-align: middle;}

    .header-contact {background: #000;  padding: 10px; text-align: center; color: #d2d2d2}
    .header-contact p {color:#d2d2d2; display: inline-block; margin: 0 20px}
    .header-contact a, .header-contact a[href^="tel:"] {color:#d2d2d2!important}
    .header-contact a:hover{color: #fff!important}

    hr {width: 100%; background: #ccc; height: .5px; margin: 2% 0;border:0;}

/*===================== 
	layout styles 
=======================*/
    .graybg{background:#393939}
    .pad{padding: 4em 0;}

    .left {float: left;}
    .right {float: right;}

    .sitewidth {
        width:90%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .col-1-6 { width: 16%;}
    .col-1-5 { width: 20%;}
    .col-1-2 { width: 50%;}
    .col-2-3 { width: 65%;}
    .col-3-4 { width: 75%;}

/*===================== 
	footer styles 
=======================*/
    #footer{background: #a81e12; padding:2em 0; text-align: center}
    #footer p{font-size: 12px; line-height: 23px; color: #fff}	

/* ======================
	Home Page
====================== */
    .mainimg{
        background: url("../siteart/slideshow/main-img.jpg") no-repeat fixed ; 
        moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        padding: 10% 0;
    }
    .CTAbtm{background: url("../siteart/bottom-inscricao-img.jpg") no-repeat fixed ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        padding: 4em 0;
    }
    .CTAbtm h3{
        text-transform: uppercase;
        color: #fff;
        font-weight: 300;
        font-size: 40px;
        display: inline-block;
        vertical-align: middle;
    }
    a.red-btn { 
        text-transform: uppercase; 
        background:#a81e12; 
        padding: 10px 0; 
        display: inline-block; 
        width: 200px; 
        color:#fff; 
        font-weight: 600; 
        transition: .3s ease; 
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0.5%;
    }
    .red-btn:hover{background: #000; color: #fff}

    a.white-btn { 
        text-transform: uppercase; 
        background:#fff; 
        padding: 10px 0; 
        display: inline-block; 
        width: 200px; 
        color:#a81e12; 
        font-weight: 600; 
        transition: .3s ease; 
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0.5%;
    }
    .white-btn:hover{background: #000; color: #fff}


/* ======================
	BOXES
====================== */
    .caixas a{
        color: #fff; 
        text-transform: uppercase; 
        text-align: center; 
        font-size: 40px;
        font-weight: 800;
        font-family: 'Oswald', sans-serif;
    }

    .box1wrap{
        width: 98%; 
        margin: 1%;
        height: 250px;
        overflow: hidden;
        position: relative;
        float: left;
        display: inline-block;
        cursor: pointer;
        line-height: 250px;
        }
        .box1img{
            background:url("../siteart/box1.jpg") no-repeat center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 100%;
            width: 100%;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .box1wrap:hover .box1img, .box1wrap:focus .box1img{transform: scale(1.2); transition: all 300ms ease;}
    
        .box2wrap{
            width: 48%; 
            margin: 1%;
            height: 200px;
            overflow: hidden;
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;
            line-height: 200px;
            }
            .box2img{
                background:url("../siteart/box2.jpg") no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 100%;
                width: 100%;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
            }
            .box2wrap:hover .box2img, .box2wrap:focus .box2img{transform: scale(1.2); transition: all 300ms ease;}

        .box3wrap{
            width: 48%; 
            margin: 1%;
            height: 200px;
            overflow: hidden;
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;
            line-height: 200px;
            }
            .box3img{
                background:url("../siteart/box3.jpg") no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 100%;
                width: 100%;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
            }
            .box3wrap:hover .box3img, .box3wrap:focus .box3img{transform: scale(1.2); transition: all 300ms ease;}


        .box4wrap{
            width: 98%; 
            margin: 1%;
            height: 150px;
            overflow: hidden;
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;
            line-height: 150px;
            }
            .box4img{
                background:url("../siteart/box4.jpg") no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 100%;
                width: 100%;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
            }
            .box4wrap:hover .box4img, .box4wrap:focus .box4img{transform: scale(1.2); transition: all 300ms ease;}

        .box5wrap{
            width: 98%; 
            margin: 1%;
            height: 300px;
            overflow: hidden;
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;
            line-height: 300px;
            }
            .box5img{
                background:url("../siteart/box5.jpg") no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 100%;
                width: 100%;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
            }
            .box5wrap:hover .box5img, .box5wrap:focus .box5img{transform: scale(1.2); transition: all 300ms ease;}
            
            /*
            IF BACKGROUND COLOR IS NEEDED ON HOVER 
            .box5img::before {
                content: "";
                display: none;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgb(166, 30, 17, 0.3);
            }

            .box5wrap:hover .box5img:before,
            .box5wrap:focus .box5img:before {
                display: block;
            }*/


/* ======================
	CONTACT STYLES
====================== */
    .contact-wrap-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .contact-left-side {
        width: 70%;
        background: #f1f1f1;
        padding: 5% 0;
    }
    .contact-right-side {
        width: 30%;
    }
    .contact-right-side p{color: #fff}
    .contact-right-side p span{color:#d9d9d9}
    .contact-right-side h2{color: #fff}
    .width-90 {
        width: 90%;
        margin: 0 auto;
    }



/* ======================
	CONTENT
====================== */
    .mid-page{background: url("../siteart/gplaypattern.png") repeat;}
    iframe.mapa{border: none; width: 100%; height: 300px;}

    .formcont{ background:#f8f8f8; padding: 2%;}
    .formcont p{color: #000; font-weight: 400; font-size: 16px}

    .order-form{display:block;}
    .order-form label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    .order-form 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: 'Fira Sans', sans-serif;
}
    .order-form input.half{width:49%;float:left;}

    .order-form input:focus{ outline: #000 solid 1px!important;}

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

    .order-form input.button2:hover{
        background-color:#787878;
        cursor:pointer;
    }

    .order-form 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;
    }
    .order-form select.half{width:48%;float:left;}

    .order-form textarea{
        font-family: 'Fira Sans', 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;
    }
    .order-form textarea:focus{ outline: #000 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:0 0 10px 0!important; width:100%}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}




/* ------------- MEDIA SCREENS ------------------------- */


@media screen and (max-width: 1280px) { 
    h1{font-size: 48px}
    
}

@media screen and (max-width: 1060px) {
    nav.primary ul {
        max-width:920px;
        padding: 0;
        margin: 0 auto;
    }
    nav.primary ul li a {
        font-weight: bold;
        display: block;
        padding: 15px 25px;
        text-decoration:underline;
        color: #222;
        margin: 0;
    }
}

@media screen and (max-width: 980px) {
    h1{font-size: 38px; line-height: 40px}
    .header-contact p{font-size: 14px}
    .logo {width: 50%;}
    .logo img{max-width: 150px}
    .header-right {width: 48%;}
    
}

@media screen and (max-width: 780px) {
    .pad{padding: 3em 0;}
    .CTAbtm{padding: 3em 0;}
    .header-contact p{display: block; margin: 0; line-height: 20px; }
    .col-1-2 { width: 100%;}
    
    .CTAbtm h3{
        margin-bottom: 10px;
    }
    a.red-btn {  
        padding: 10px 0; 
        display: block; 
        width: 80%;
        margin: 10px auto;
    }
    a.white-btn { 
        padding: 10px 0; 
        display: block; 
        width: 80%; 
        margin: 10px auto;
    }
    .contact-left-side {
        width: 100%;
    }
    .contact-right-side {
        width: 100%;
        padding: 2em 0;
        text-align: center;
    }
    .contact-wrap-flex {
        display: block;
    }
    .CaptchaPanel { width: 100%!important;}
    .order-form input.half {width: 99%;float: left;}

    /* ----------- Mobile Nav Styles ------------ */	
    #menu-button { /* initially will need to be hidden */
        display: block;
        font-size: 30px;
        width: 97%;
        position: relative;
        z-index: 900;/* needs to be lower than nav.mobile, adjust as needed */
        padding-bottom: .5%;
        margin-top:2%;
    }
    #menu-button a {
        color: #fff;
        text-decoration: none;
    }
    nav.primary {
        display:none;	
    }
    nav.mobile {
        display: block;
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background: #333;
        z-index: 1200; /* needs to be higher than #menu-button, adjust as needed */
        overflow: auto;
    }
    nav.mobile h3 { /* Menu header styles */
        position: relative;
        padding: 12px 10px;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        border-bottom: 4px solid #222;
    }
    nav.mobile .menu-toggle { /* Menu close button */
        position: absolute;
        top: 12px;
        right: 10px;
        display: inline-block;
        padding: 6px 9px 5px;
        font-family: Arial, sans-serif;
        font-weight: bold;
        line-height: 1;
        background: #222;
        color: #999;
        text-decoration: none;
        vertical-align: top;
    }
    nav.mobile .menu-toggle:hover { /* Menu close button on hoveer */
        color: #fff;
    }
    nav.mobile ul {
        list-style: none;
        font-weight: 300;
        border-top: 1px solid #151515;
        border-bottom: 1px solid #454545;
        margin: 0;
        padding: 0;
    }
    nav.mobile ul li {
        border-top: 1px solid #454545;
        border-bottom: 1px solid #151515;
    }
    nav.mobile ul li a {
        position: relative;
        display: block;
        padding: 10px;
        color: #999;
        text-decoration: none;
    }
    nav.mobile ul li a:hover {
        background: #000;
        color: #fff;
    }
    nav.mobile ul li li a { /* appearance of the sub-level links */
        background: #444;
        position: relative;
        display: block;
        padding: 10px 10px 10px 15px;
        color: #ccc;
        text-decoration: none;
    }
    nav.mobile ul li li li a { /* appearance of third level sub-level links if needed */
        background: #666;
        position: relative;
        display: block;
        padding: 10px 10px 10px 25px;
        color: #000;
        text-decoration: none;
    }
    nav.mobile ul li span.click {/* dropdown menu idicator arrow be sure to include this image with your image files */
        background: url(../siteart/arrow.png) 10px 12px no-repeat;
        background-size: 45%;
        position: relative;
        display: block;
        float: right;
        margin: -44px 0 0 0;
        cursor: pointer;
        z-index: 12399994;
        width: 40px;
        height: 40px;
        -webkit-transition: background-size .3s ease-in-out;
        -moz-transition: background-size .3s ease-in-out;
        transition: background-size .3s ease-in-out;
    }
    nav.mobile ul li span.click:hover {
        background-size: 60%;
    }
}


@media screen and (max-width: 550px) {
   
    
}