@font-face {font-family: 'GoldplayRegular'; src: url('../fonts/GoldplayRegular.otf') format('OpenType'); font-style: normal;}
@font-face {font-family: 'GoldplayMedium'; src: url('../fonts/GoldplayMedium.otf') format('OpenType'); font-style: normal;}
@font-face {font-family: 'GoldplaySemiBold'; src: url('../fonts/GoldplaySemiBold.otf') format('OpenType'); font-style: normal;}

*{padding: 0px; margin: 0px; list-style: none; border: 0px; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-modify: read-only; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}


html{}
body{}

.mobile{display: none;}
.desktop{display: block;}
.menu-open{display: none;}

/* geral */
img{border: none;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}

.limite{width: 1200px; margin: auto;}
.corte{clear: both;}
.left{float: left;}
.right{float: right;}


#header{border-left: #64ac6d solid 20px; height: 550px; background: #404d9c; padding-top: 30px; position: relative;}
	#header h1{}
	#header nav{border-radius: 50px 0 0 50px; background: #64ac6d; padding: 30px 0 30px 40px; top: 42px; right: 0; width: calc(50% + 300px); position: absolute; z-index: 2;}

	#header nav ul li{float: left; margin: 0 10px;}
	#header nav ul li a{font-family: 'GoldplayMedium'; font-size: 18px; color: #fff;}
	
	#header .slogan{font-family: 'GoldplaySemiBold'; font-size: 35px; color: #fff; line-height: 40px; padding: 110px 0 0 70px; letter-spacing: 1px;}

	#header .banner{position: absolute; right: 0; z-index: 1; top: 0; width: calc(50% + 170px); background: url('../images/topo.jpeg') no-repeat right bottom; height: 550px;}

#header_interno{border-left: #64ac6d solid 20px; height: 170px; background: #404d9c; padding-top: 30px; position: relative;}
	#header_interno nav{border-radius: 50px 0 0 50px; background: #64ac6d; padding: 30px 0 30px 40px; top: 42px; right: 0; width: calc(50% + 300px); position: absolute; z-index: 2;}

	#header_interno nav ul li{float: left; margin: 0 10px;}
	#header_interno nav ul li a{font-family: 'GoldplayMedium'; font-size: 18px; color: #fff;}

	#header_interno .banner_interno{position: absolute; right: 0; z-index: 1; top: 0; width: calc(50% + 170px); background: url('../images/topo.jpeg') no-repeat right bottom; height: 170px;}
	
	.item{display: block; font-family: 'GoldplaySemiBold'; font-size: 22px; color: #404d9c; margin-bottom: -20px}

#promix{background: #e2e2e2 url('../images/br_promix.jpg') no-repeat center top -150px; padding: 20px 0}
	#promix .limite{width: 920px;}
	#promix .left{width: 400px; padding-top: 80px}
	#promix h2{font-family: 'GoldplaySemiBold'; font-size: 40px; color: #404d9c; margin-bottom: 10px; line-height: 30px}
	#promix h2 span{font-family: 'GoldplayRegular'; font-size: 20px; color: #666666;}
	
	#promix .texto{margin: 30px 0; font-family: 'GoldplayRegular'; font-size: 18px; color: #666666; line-height: 40px}
	#promix .botao{display: block; width: 260px; background: transparent; padding: 12px 0; text-align: center; color: #0ebc67; font-family: 'GoldplayMedium'; font-size: 18px; border: 3px solid #0ebc67; border-radius: 25px; cursor: pointer; text-decoration: none; margin-top: 8px;}

#solucoes{background: #f8f8f8; padding: 60px 0 0; text-align: center; margin-bottom: -130px}
	#solucoes h2{font-family: 'GoldplayMedium'; font-size: 36px; color: #404d9c; margin-bottom: 5px;}
	#solucoes span{font-family: 'GoldplayRegular'; font-size: 24px; color: #666666;}
	#solucoes img{margin-top: 50px;}
	
#catalogo{background: #e2e2e2; padding: 110px 0 90px;}
	#catalogo .limite{width: 680px;}
	#catalogo .texto{text-align: right; font-family: 'GoldplayMedium'; font-size: 28px; color: #666666;}
	#catalogo .botao{display: block; width: 260px; background: transparent; padding: 12px 0; text-align: center; color: #0ebc67; font-family: 'GoldplayMedium'; font-size: 18px; border: 3px solid #0ebc67; border-radius: 25px; cursor: pointer; text-decoration: none; margin-top: 8px;}
	
#footer{background: #404d9c url('../images/footer.jpg') no-repeat center bottom -100px; padding: 80px 0;}
	
	#footer .left{width: 500px;}
	#footer .left h2{font-family: 'GoldplayMedium'; font-size: 30px; color: #fff; margin-bottom: 10px;}
	#footer .left span{font-family: 'GoldplayRegular'; font-size: 20px; color: #fff;}
	#footer .left .campos{width: 100%; color: #fff; font-family: 'GoldplayRegular'; font-size: 16px; margin-top: 20px;}
	#footer .left .campos .campo_txt{width: 100%; background: #fff; border: 0; border-radius: 6px; padding: 10px; color: #222222; font-family: 'GoldplayRegular'; font-size: 18px; margin: 5px 0 10px;}
	#footer .left .campos .btEnviar{width: 100%; background: transparent; padding: 10px 2px; color: #6bb974; font-family: 'GoldplayMedium'; font-size: 16px; border: 2px solid #6bb974; border-radius: 6px; cursor: pointer; margin-top: 10px;}
	#footer .left .campos .btEnviar:hover{color: #fff;}
	
	#footer .right{width: 550px; padding: 340px 0 0 200px; font-family: 'GoldplayRegular'; font-size: 14px; color: #fff; letter-spacing: 1px; line-height: 30px;}
	#footer .right h2{font-family: 'GoldplayRegular'; font-size: 20px; color: #fff; margin-bottom: 5px; font-weight: normal; letter-spacing: 0;}
	#footer .right a{color: #fff;}
	#footer .right i{font-size: 20px; color: #6bb974; vertical-align: middle}

.copyright{padding: 20px 0; background: #fff;}
	.copyright .contato{font-family: 'GoldplayRegular'; font-size: 16px; color: #666666; text-align: right; margin-top: 15px;}


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

.side-menu-wrapper { /* style menu wrapper */
	display: none;
	background: rgba(0,0,0, 0.7);
	padding: 15px 20px 0;
	position: fixed; /* Fixed position */
	top: 0;
	right: 0; /* Sidebar initial position. "right" for right positioned menu */
	height: 100%;
	z-index: 9999999;
	transition: 0.4s; /* CSS transition speed */
	width: 285px;
	box-sizing: border-box;
}
.side-menu-wrapper > ul{ /* css ul list style */
	list-style:none;
	padding:0;
	margin:0;
    overflow-y: auto; /* enable scroll for menu items */
	height: 100%;
}
.side-menu-wrapper > ul > li > a { /* links */
    display: block; font-family: 'GoldplayMedium'; font-size: 18px; border-bottom: 1px solid #333333; padding: 15px 5px;
    color: #aaaaaa; transition: 0.2s; text-decoration: none;
}

.side-menu-wrapper > ul > li > a i{font-size: 20px; vertical-align: middle; margin-right: 5px;}

.side-menu-wrapper > a.menu-close { /* close button */
    display: block;
	font-family: 'ManropeBold';
    color: #999999;
    font-size: 40px;
	padding: 5px 0;
    text-decoration: none;
}

.menu-overlay { /* overlay */
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s;
}

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


@media only screen and (min-width: 360px) and (max-width: 800px){
	
.mobile{display: block;}
.desktop{display: none;}
.menu-open{display: block; font-size: 35px; color: #404d9c; position: absolute; top: 35px; right: 20px;}

.limite{width: 100%;}
.left{float: none;}
.right{float: none;}

#header{border-left: none; height: auto; padding-top: 0; position: static;}
	
	#header h1{background: #fff; width: 100%; padding: 20px 0 15px;}
	#header h1 img{width: 160px; margin: auto}
	#header nav{display: none;}
	
	#header .slogan{display: none;}

	#header .banner{position: static; right: 0; z-index: 1; top: 0; width: 100%; background: url('../images/topo.jpeg') no-repeat center bottom; height: 550px;}

#header_interno{border-left: none; height: auto; padding-top: 0; position: static;}
	
	#header_interno h1{background: #fff; width: 100%; padding: 20px 0 15px;}
	#header_interno h1 img{width: 160px; margin: auto}
	#header_interno nav{display: none;}

	#header_interno .banner_interno{position: static; right: 0; z-index: 1; top: 0; width: 100%; background: url('../images/topo.jpeg') no-repeat center bottom; height: 170px;}

#promix{background: #e2e2e2 url('../images/br_promix.jpg') no-repeat center top -150px; padding: 60px 20px;}
	#promix .limite{width: 100%;}
	#promix .left{width: 100%; padding-top: 0; text-align: center;}
	#promix h2{font-size: 38x;}
	#promix h2 span{font-size: 18px;}
	
	#promix .texto{margin: 30px 0; line-height: 38px}
	#promix .botao{width: 260px; margin: auto;}

#solucoes{padding: 60px 20px 0; text-align: center; margin-bottom: -60px}
	#solucoes h2{font-size: 30px; margin-bottom: 5px;}
	#solucoes span{font-size: 22px;}
	#solucoes img{margin-top: 50px; width: 100%;}
	
#catalogo{padding: 70px 30px 80px;}
	#catalogo .limite{width: 100%; text-align: center;}
	#catalogo .texto{text-align: center; font-size: 26px;}
	#catalogo .botao{width: 100%; padding: 12px 0; font-size: 18px; margin-top: 15px;}
	
#footer{background: #404d9c url('../images/footer.jpg') no-repeat center bottom -90px; padding: 40px 20px;}
	
	#footer .left{width: 100%; margin-bottom: 50px;}
	#footer .left h2{font-size: 25px; text-align: center;}
	#footer .left span{font-size: 18px;}
	#footer .left .campos{font-size: 16px; margin-top: 20px;}
	#footer .left .campos .campo_txt{padding: 12px; font-size: 18px; margin: 6px 0 12px;}
	#footer .left .campos .btEnviar{padding: 12px 2px; font-size: 16px; border: 2px solid #6bb974; margin-top: 10px;}
	
	#footer .right{width: 208px; margin: auto; padding: 0; font-size: 16px; line-height: 35px;}
	#footer .right h2{text-align: center; font-size: 22px; margin-bottom: 10px;}
	#footer .right i{font-size: 25px; margin-right: 5px;}

.copyright{padding: 22px 0 20px; text-align: center;}
	.copyright .contato{font-size: 16px; text-align: center; margin-top: 15px;}

}