/* General -------------------- */

*{

	margin:0; 

	padding:0; 

	outline:none;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	transition:0.3s;

}



*:before, *:after {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}



@font-face {

    font-family: 'poppinsmedium';

    src: url('../font/Lato/lato-regular_0-webfont.woff2') format('woff2'),

    	 url('../font/Lato/Lato-Regular_0.ttf') format('ttf'),

         url('../font/Lato/lato-regular_0-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



html, body{height:100%;}



body{

	margin: 0;

	font: 20px Lato;

	color: #fff;

	background: #2d0305;

}



li{list-style:none;}

ul{margin:0px;}



a{ text-decoration: none; }



.container{

	margin:0 auto;

	width: 800px;

}

/* end: General -------------------- */



/* Slider --------------------------------------- */

header{ position: relative; }

header .slider{ width: 100%; }



header .bannerText{

	height: 100%;

	width: 55%;

	background: url(../img/bg.png) no-repeat;

	background-size: cover;

	position: absolute;

    top: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: right;

    padding-right: 110px;

}



header .bannerText .content{

	font-size: 27px;

	width: 400px;

}



header .bannerText img{

	width: 100%; 

	display: block;

	margin-bottom: 10px;

}



/* Banners --------------------------------------- */

#banners .banners{
	background: url(../img/assessoria.jpg) no-repeat;
    height: 330px;
    background-size: contain;
    position: relative;
    margin-bottom: 40px;
}

#banners .banners:last-of-type{ margin-bottom: 90px; }

#banners .banners.instagram{
	background: url(../img/instagram.jpg) no-repeat;
	background-size: contain;
}

#banners .banners.mpa{
	background: url(../img/mpa.jpg) no-repeat;
	background-size: contain;
}

#banners .banners.mpaonline{
	background: url(../img/mpaonline.jpg) no-repeat;
	background-size: contain;
}




#banners .banners.ebook{
	background: url(../img/ebook.jpg) no-repeat;
	background-size: contain;
}

#banners .banners.boss{
	background: url(../img/boss.jpg) no-repeat;
	background-size: contain;
}

#banners .banners.magia{
	background: url(../img/magia.png) no-repeat;
	background-size: contain;
}

#banners .banners.ebook{
	background: url(../img/ebook.jpg) no-repeat;
	background-size: contain;
}

#banners .banners.palestra{
	background: url(../img/palestra.jpg) no-repeat;
	background-size: contain;
}

#banners .banners .bannerText{
	display: block;
    position: absolute;
    top: 128px;
    text-align: right;
    width: 390px;
    left: 40px;
}

#banners .banners.online .bannerText{ top: 98px; }
#banners .banners.ebook .bannerText{ top: 72px; color: #781c1d; }

#banners .banners .bannerText img{ display: block; width: 100%; }
#banners .banners.instagram .bannerText img{ margin-top:5px; }
#banners .banners.ebook .bannerText img{ margin-top: 10px; }

#banners .banners .link{
	border: 2px solid #fff;
    position: absolute;
    bottom: 30px;
    width: 320px;
    height: 58px;
    left: 30px;
    background-image: linear-gradient(90deg, #781c1d, #781c1d, #781c1d, #781c1d);
    border-radius: 38px;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

#banners .banners.palestra .bannerText{
	left: auto;
    right: 40px;
    height: 100%;
    top: 0;
    padding-top: 64px;
}

#banners .banners.palestra .bannerText img,
#banners .banners.palestra .bannerText .link{ display: block; position:relative; }

#banners .banners.palestra .bannerText .link{
	bottom: auto;
	left: auto;
	margin: 22px 0 22px auto;
}

#banners .banners.palestra .bannerText img.name{ width: 340px; margin: 0 0 0 auto; }
#banners .banners.palestra .bannerText .link .text{ width: 152px; margin: 6px auto 0; }



#banners .banners.boss .link{

	left: auto;

	right: 44px;

	bottom: 30px;

}

#banners .banners.magia .link{

	left: auto;

	right: 44px;

	bottom: 30px;

}




#banners .banners .link::before{

	content: '';

	display: block;

	width: 0px;

	height: 86%;

	position: absolute;

	top: 7%;

	left: 0%;

	opacity: 0;

	background: #fff;

	box-shadow: 0 0 50px 30px #fff;

	-webkit-transform: skewX(-20deg);

	-moz-transform: skewX(-20deg);

	-ms-transform: skewX(-20deg);

	-o-transform: skewX(-20deg);

	transform: skewX(-20deg);

	box-sizing: border-box;

}



#banners .banners .link:hover{

	background-image: linear-gradient(90deg, #781c1d, #3c0707, #781c1d, #3c0707);

    border-color: #781c1d;

    box-shadow: inset 0px 0px 5px 5px #781c1d, 0 0 30px 5px #ef6b6d !important;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

}



#banners .banners .link:hover::before{

	-webkit-animation: sh02 0.5s 0s linear;

	-moz-animation: sh02 0.5s 0s linear;

	animation: sh02 0.7s 0s linear;

}



#banners .banners .link .text{

	background: url(../img/handIcon.png) no-repeat right center;

    color: #fff;

    height: 42px;

    display: flex;

    align-items: center;

    padding-right: 49px;

}







/* Rodapé --------------------------------------- */

footer{

	background: #d9d9d9;

	min-height: 72px;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	padding: 15px 0;

}



footer .container{

	font-size: 16px;

	text-align: center;

	min-height: 36px;

	line-height: 18px;

	color: #2d0305;

}



footer .container .dev{

	width: 100%;

	display: block;

}



footer .container .dev .company{ font-weight: 700; color: #2d0305; }



/* Botão Voltar ao topo ------------- */

.bt-top{

	display: inline-block;

	height: 40px;

	width: 40px;

	position: fixed;

	bottom: 40px;

	border-radius:4px;

	right: 10px;

	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

	overflow: hidden;

	text-indent: 100%;

	white-space: nowrap;

	background: rgba(232, 98, 86, 0.8) url("../img/setaVoltar.png") no-repeat center 50%;

	visibility: hidden;

	opacity: 0;

	-webkit-transition: opacity .3s 0s, visibility 0s .3s;

	-moz-transition: opacity .3s 0s, visibility 0s .3s;

	transition: opacity .3s 0s, visibility 0s .3s;

	z-index:999;

}



.bt-top,

.cd-is-visible, 

.cd-fade-out, 

.no-touch .bt-top:hover {

  -webkit-transition: opacity .3s 0s, visibility 0s 0s;

  -moz-transition: opacity .3s 0s, visibility 0s 0s;

  transition: opacity .3s 0s, visibility 0s 0s;

}



.cd-is-visible{

  visibility: visible;

  opacity: 1;

}



.cd-fade-out{opacity: .5;}



.cd-fade-out:hover,

.bt-top:hover{

  background-color: rgba(232, 98, 86, 1);

  opacity: 1;

}

/* end: Botão Voltar ao topo ------------- */

	

/* end: Rodapé --------------------------------------- */



/* Responsive ------------------------------------------ */

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

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

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

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



@media only screen and (max-width: 1366px){

	header .bannerText{ width: 65%; background-position-y: -70px; }

}



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

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

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

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

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

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

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

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



@media only screen and (max-width: 900px){

	.container{ width: 500px; }
	header .bannerText{ padding-right: 30px; }

	#banners .banners{
		width: 500px;
		margin: 0 auto 40px;
		height: 205px;
	}

	#banners .banners .link .text{ background-size: 36px; padding-right: 42px; }

	#banners .banners .bannerText{
	    top: 42px;
	    width: 260px;
	    left: 24px;
	    font-size: 15px;
	}

	#banners .banners.online .bannerText{ top: 38px; }

	#banners .banners.ebook .bannerText{ top: 27px; left: 35px; }
	#banners .banners.ebook .bannerText img{ margin-top:0; }

	#banners .banners .link{ width: 230px; height: 48px; }

	#banners .banners.boss .link{right: 24px; bottom: 20px; }
	#banners .banners.magia .link{right: 24px; bottom: 20px; }
	#banners .banners.mpa .link{bottom: 14px;}

	#banners .banners.palestra .bannerText{ padding-top: 29px; right: 22px; }
	#banners .banners.palestra .bannerText .img:first-child{ padding-top: 34px; }
	#banners .banners.palestra .bannerText .link{ margin: 12px 0 12px auto; }
	#banners .banners.palestra .bannerText img.name{ width: 220px; }
	#banners .banners.palestra .bannerText .link .text {
	    width: 144px;
	    margin: 1px auto 0;
	    font-size: 20px;
	}
}



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

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

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



/* Mobile ---------------------------------------- */

@media only screen and (max-width: 768px){

	header .bannerText .content {

	    font-size: 20px;

	    width: 290px;

	}

}



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

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

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

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

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

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

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



@media only screen and (max-width: 568px){

	.container{ width: 96%; }

	header{
		position: relative;
	    background: url(../img/top.jpg) no-repeat 70% 0;
	    height: 300px;
	    background-size: 810px;
	    margin-bottom: 40px;
	}

	header .slider{ display: none; }

	header .bannerText .content {
        font-size: 17px;
        width: 210px;
    }

    header .bannerText {
        width: 55%;
    	background-position-x: 77%;
   	}


	#banners .banners{ width: 350px; height: 144px; }

    #banners .banners .bannerText {
        top: 32px;
        width: 190px;
        left: 15px;
        font-size: 11px;
    }

    #banners .banners.online .bannerText{ top: 21px; }
    #banners .banners.ebook .bannerText{
        top: 18px;
        left: 18px;
        width: 180px;
    }


	#banners .banners .link {
		width: 190px;
		height: 38px;
		left: 13px;
		bottom: 20px;
	}

	#banners .banners .link .text{ background-size: 30px; padding-right: 38px; }
	#banners .banners.boss .link{ right: 14px; bottom: 12px; }
	#banners .banners.magia .link{ right: 14px; bottom: 12px; }

	#banners .banners.palestra .bannerText img:first-child{width: 156px;}
	#banners .banners.palestra .bannerText img.name{ width: 130px; }
	#banners .banners.palestra .bannerText{ padding-top: 18px; }
    #banners .banners.palestra .bannerText .link .text{ margin: -4px auto 0; }
}


@media only screen and (max-width: 540px){}
@media only screen and (max-width: 533px){}

@media only screen and (max-width: 480px){
	header .bannerText{ width: 67%; }
	footer .container{ font-size: 13px; }
}



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

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

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

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

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

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

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

/* end: Responsive ------------------------------------------ */