/*font-family: 'Montserrat', sans-serif;*/
img { max-width: 100%; }
p {text-align: left;}
strong {font-weight: 500;}

.row {max-width: 960px;}
.button {
    padding: 10px 15px;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
    background: #ad0000;
   	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
    cursor: pointer;

}
.button:hover,
.button:focus{background: #550d0d; text-decoration: none;color: #fff;}
.fb-download:focus{background: rgb(255, 255, 255, .6); text-decoration: none}

.button .icon{ 
    font-size: 37px;
    position: relative;
    top: 6px;
}
.button .text{  position: relative;}
.fb-button{	background: #475995; font-weight: 300;     padding: 15px 20px;	text-transform: none; text-decoration: none;}
.fb-button:hover{	background: #1b2c66;    color: #fff;    text-decoration: none;}
#download{display: none;}
#canvas{display: none;}
#base64-image-to-share{display: none;}

#home{
	position: relative;
	z-index: 2;
    overflow: hidden;
    margin-bottom: -100px;
}
/*hashtag element*/
#home .hashtag{ padding-top: 20px; font-size: 20px;color: #525252;  font-family: 'Montserrat', sans-serif;  font-weight: 700;}

#slider{
	background: #fff;
	width: 100%;
	height: 600px;
	position: relative;
    /*overflow: hidden;*/
    margin-bottom: 70px;
}
#slider .slide-element{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	margin: 10px auto auto;
	height: 100%;
	width: 100%;	
}
#slider  .controls {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*#slider  .controls .btn-next, .slider .controls .btn-prev {
    position: absolute;
    top: 60%;
    transform: translateX(-50%);
}
#slider  .controls .btn-next {
    right: -40px;
    margin-top: -46px;
}
#slider .controls .btn-prev {
    right: -32px;
}
#slider  .controls .btn-prev { margin-left: -8px;}
*/#slider  .controls .button {
    margin-bottom: 8px;
}
#slider .controls .button span {
    padding: 8px 10px;
    font-size: 18px;
}
#slider .controls .paginator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
       bottom: -70px;
    line-height: 10px;
}
#slider  .controls .paginator .dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ccc;
}
#slider  .controls .paginator .dot.active { background: #a70000; }
#slider .controls .paginator .dot:hover {
    border: 2px solid rgba(255, 255, 255, 0.4);
}



#slider .slide-element .el-one,
#slider .slide-element .el-two,
#slider .slide-element .blettering,
#slider .slide-element .el-three,
#slider .slide-element .bandaid
{ position: absolute; top: 0;left: 0;}


.lettering {
    position: absolute;
}
.lettering .letter {
    z-index: 1;
}
.lettering .bandaid { 
    z-index: 3;
}
#slider .slide-element.vida .lettering svg {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 25.3%;
    margin-left: -6px;
    margin-top: -18.6%;
    mix-blend-mode: overlay;

}
#slider .slide-element.vida .lettering svg path {
    opacity: .8;
    fill: none;
    stroke: #b20000;
    stroke-width: 75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 19000;
    stroke-dashoffset: 19000;

}
#slider .slide-element.vida  .lettering svg circle {
    opacity: 0;
    fill: none;
    stroke: #b20000;
    stroke-width: 50;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/*/futuro*/
#slider .slide-element.futuro .lettering svg {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 25.4%;
    margin-left: 49px;
    margin-top: -16.7%;
    mix-blend-mode: overlay;
}
#slider .slide-element.futuro .lettering svg path {
     opacity: .8;
    fill: none;
    stroke: #b20000;
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 6800;
}
/* esperanca */
#slider .slide-element.esperanca .lettering svg {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 21.6%;
    margin-left: 9px;
    margin-top: -18.3%;
    mix-blend-mode: overlay;
}
#slider .slide-element.esperanca .lettering svg path {
    opacity: .8;
    fill: none;
    stroke: #b20000;
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 6800;
    stroke-dashoffset: 6800;
}




.bg-campanha {
	position: relative;
    min-height: 950px;
	width: 100%;
	height: 100%;
    z-index: 2;
    background: url(../img/bg-campanha.png)  center center ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#campanha {
    padding-top: 390px;
}
#campanha .single { position: relative; margin-top: 50%; }
#campanha .single { width: 200px; height: 200px; }
#campanha .single .rounded-image { border-radius: 50%; }

#campanha .single a { position: relative; }
#campanha .single audio {display: none; }
#campanha .single i.fa-pause {display: none; }
#campanha .single .play-audio.playing i.fa-pause {display: block; }
#campanha .single .play-audio.playing i.fa-play {display: none; }



.single a img { transition: all .2s; }
.single a:hover .play-button { background: #b20000; }
.single a:hover .play-button i { color: #fff; }
.single a:hover img{ opacity: .6; }

#campanha .video { position: relative; margin-top: 50%;    }
#campanha .video { width: 200px; height: 200px;}
#campanha .video .rounded-image{ border-radius: 50%;}
#campanha .video a{position: relative;}
/**/
.video a img { transition: all .2s; }
.video a:hover .play-button { background: #b20000; }
.video a:hover .play-button i { color: #fff; }
.video a:hover img{ opacity: .6; }
.play-button{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    background: #fff;
    bottom: 0;
    text-align: center;
    transform: translate(-50%, -50%);

    transition: all .2s;
}
.play-button i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b20000;
    font-size: 28px;
    margin-left: 3px;
    transition: all .2s;
}
.play-button i.fa-pause{
    margin-left: 0;
}

#campanha .description{ padding-top: 40px; }
#campanha .description h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 40px;
	text-transform: uppercase;
	color: #fff;
}
#campanha .description p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color: #fff;
}
#campanha h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
}
#campanha h3 span {
	margin: 0 10px;
}
.margin-content{margin-top: 120px}
#mude-avatar {
    margin-top: 50px; 
    overflow: hidden;
	padding: 100px 0 20px 0;
}

#mude-avatar h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #9a0000;
	font-size: 30px;
    line-height: 20px;
}
#mude-avatar h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: 0px;
    color: #000;
    font-size: 58px;
    opacity: .9;
}
#mude-avatar p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color: #000;
    font-size: 18px;
    line-height: 25px;
    opacity: .8;
}
#mude-avatar .foto{	position: relative; width: 100%;/*min-width: 250px;*/}

#mude-avatar .foto img{	max-width: 250px;	border-radius: 50%;}

#mude-avatar .foto .selo-doacao{position: absolute;bottom: -30px;right: -30px;}
#mude-avatar .foto-mark{
        position: absolute;
    width: 175%;
    top: -70px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
   }
#mude-avatar .foto-mark img{width: 100%;}
#mude-avatar .compartilhe{margin-top: 100px; display: block; text-align: center;}
#mude-avatar .compartilhe .button{
    font-size: 24px;
    font-weight: 500;
    padding: 12px 40px;
    background: #ad0000;
}
#mude-avatar .compartilhe .button:hover{ background: #951b1b;   text-decoration: none;    color: #fff;}

#mude-avatar .vida-write{
       background: url(../img/vida-write.png) center center no-repeat;
    min-height: 300px;
    padding-top: 100px;
}
/*MARCO*/
#marco {padding-top: 215px;}
.bg-marco {
    position: relative;
    min-height: 1210px;
    width: 100%;
    height: 100%;
    background:  url(../img/bg-marco-two.png)  center center ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: -100px;
	/*background: #e1e1e1;*/
}
/*.bg-marco img.img-bg{position: absolute;     top: -80px; width: 100%; height: 130%; z-index: -1; object-fit: cover; }*/
#marco .description{
    margin-bottom: 60px;
	position: relative;
}
#marco img.marco-img{
	position: absolute;
    object-fit: cover;
    max-width: 110%;
}
#marco .description h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 40px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}
#marco .fb-gerar-marco{
    text-decoration: none;
	position: relative;
    font-size: 20px;
}
#marco .fb-gerar-marco:hover{background: rgb(61, 78, 135);color: #fff;}

#marco .fb-gerar-marco span{    padding-right: 20px;    padding-left: 10px; font-weight: 300}



#presskit{    padding: 100px 0 100px; background: #eaeaea;}
#presskit p {color: #444242;font-family: 'Montserrat', sans-serif; font-weight: 400;  font-size: 17px; line-height: 20px; margin-bottom: 20px;}
#presskit a.button {
    font-weight: 300;
    font-size: 21px;
    padding: 10px 45px;
    text-transform: initial; 
}
#presskit .box{position: relative;}
#presskit .social-media {position: absolute; bottom: -10px;}
#presskit .social-media a {color: #fff;font-size: 30px;}
#presskit .social-media a i{
    background: #ad0000;
    color: #fff;
    width: 50px;
    height: 50px;
    padding: 10px 15px;
	border-radius: 50%;
}
#presskit .social-media a:hover {color: #951b1b;}
#presskit .social-media a:hover i {background: #811818;}

#presskit .social-media a:last-child i{ padding: 10px 12px;}
#presskit .social-media a:nth-child(2) i{ padding-left: 12px;}
#presskit .social-media a:nth-child(3) i{ padding-left: 10px;}
.bg-presskit {background: #e2e2e2; height: 100%;}
#presskit .min-logo{position: absolute; bottom: -25px;}

.arrow-nav{ background: #eaeaea; padding-bottom:10px;}

.go-to-top { background: #eaeaea; margin-bottom:0;}
.arrow-nav.interna{ background: #fff;}
.arrow-nav.interna .go-to-top{ background: #fff;}
footer{
	background: #2240b1;
	height: 150px;
	padding: 30px 0;
}
#footer-brasil {
   background: none repeat scroll 0% 0% #0042b1;
   padding: 1em 0px;
   max-width: 100%;
}

/* MOBILE */
@media only screen and (min-width: 40.063em) { 
} 
@media screen and (max-width: 39.9375em) {
	
	#home{overflow: hidden;}
	h1 {font-size: 30px;}
	#slider {
	    width: 100%;
        height: 50vh;
	    position: relative;
	}
    #slider .slide-element.vida .lettering svg{margin-left: -3px;}
	#slider .slide-element.futuro .lettering svg{margin-left: 18px;}
    #slider .slide-element.esperanca .lettering svg{margin-left: 4px;}
    #campanha{
    	padding: 50px 0;
    }

    .bg-campanha{  overflow: hidden;  background: #8e0000;}
    #campanha .video {
        display: block;
        position: relative;
        margin-top: 0;
        margin: 0 auto;
        text-align: center;


    }
    #campanha .single{margin-top: 10px; display: block;margin: 0 auto;}
    #campanha .description h1 {font-size: 30px;}
    #campanha h3 {margin: 0 20px ; text-align: center;}

    #mude-avatar h3 {font-size: 20px;}
    #mude-avatar h1 {font-size: 22px;}
    #mude-avatar .foto .selo-doacao{ width: 50%; left: 0;right: auto; }
    #mude-avatar p{margin-top: 20px;}

    #marco{padding-left: 20px; padding-right: 20px;}
    #marco .description{margin-top: 0;}
    #marco img.marco-img{width: 70%;}
    #marco .description h1 {font-size: 20px;}
    #marco  .small-centered-text{ text-align: center; }
    #marco .fb-gerar-marco {
        position: relative;
        top: 20px;
        text-align: center;
        padding: 10px;
    }
    #presskit .box{
    	position: initial;
        margin:30px 0;
    }
    #presskit .box p{ text-align: center; }
    #presskit {
        text-align: center;
        /*padding: 50px;*/
        margin-top: 100px;
         /*background: #e1e1e1; */
    }
    #presskit .min-logo{
    	position: relative;
    }
    #presskit .social-media{position: relative; margin: 10px 0;}
    .bg-marco{overflow: hidden;    min-height: 120px;}
    .button .icon{ font-size: 2rem; top: 0; padding: 0;}
    #marco .fb-gerar-marco span{padding:2px;}
}