html, body {
    height: 100%;
    font-family:"Open Sans", sans-serif;
    line-height:23px;
    color: #fff;
    background: hsla(137, 60%, 29%, 1);
}

.col-md-6 a{
    color:#fff;
    border-bottom:1px dotted;
    text-decoration:none !important;
}
.col-md-6 a:hover{
    border-bottom:1px solid;
    color:#fff;
}

.logo{
    position:fixed;
    top:0;
    padding-top: 20px;
    width:100%;
}
.logo img{
    display:block;
    width: 230px;
}

h2{
    font-weight:600;
    line-height:37px;
}
h3{
    font-size:18px;
    line-height:30px;
    margin-bottom: 20px;
    font-weight:600;    
}
h3 span{
	background:#ffb000;
	padding:2px 5px;
}

.block{
    height:100%;
    display:table;
    width:100%;
}

.block-in-wrapper{
    display:table-cell;
    vertical-align: middle;
}
.pgn {
	position:fixed;
	right:20px;
	top: 50%;
	transform: translateY(-50%);
	font-size:1.4em;
	z-index: 10;
	list-style-type: none;
}
.pgn a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}
.pgn a.active:after {
	box-shadow:inset 0 0 0 5px;
}
.pgn a .hover-text {
	position:absolute;
	right:15px;
	top: -3px;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
	font-size: 12px;
}
.pgn a:hover .hover-text {
	opacity: 1;
}
.pgn a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:4px;
	bottom:0;
}


.animateface{
    text-align: center
}
.animateface img{
    width: 170px;
    display:inline-block;
    opacity:0;
    transform:scale(0.8);
    transition:all 300ms ease-in;
}
.animateface p{
    font-weight:400;
    font-size:30px;
    margin: 10px 0 0 0;
    opacity:0;
    transform:scale(0.8);
    transition:all 300ms ease-in;
}
.animateface.animating img,
.animateface.animating p{
   
    opacity:1;
    transform:scale(1)
}

.expandir .animateface img,
.desempenho .animateface img,
.partilhe .animateface img{
    top: 50%;
    position: relative;
    width: auto;
    height: 250px;
    margin-top: -125px;
}

.animateface p span{
	font-weight:800
}

.sabia-que-1{
    background: #908914;
    color: #fff;
}
.sabia-que-1 h3 span{
    color: #908914;
    background: #fff;
}
.sabia-que-2{
    background: #77275c;
    color: #fff;
}
.sabia-que-2 h3 span{
    color: #77275c;
    background: #fff;
}
.sabia-que-3{
    background: #8c2222;
    color: #fff;
}
.sabia-que-3 h3 span{
    color: #8c2222;
    background: #fff;
}
.sabia-que-4{
    background: #77a531;
    color: #fff;
}
.sabia-que-4 h3 span{
    color: #77a531;
    background: #fff;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
    .expandir .animateface img, .desempenho .animateface img, .partilhe .animateface img{
        height: auto;
        position: static;
        margin-top: 30px;
        width: 50%;
        /* margin-bottom: 40px; */
    }
    h2{
        font-size:20px;
        line-height: 25px;
    }
    h3{
        font-size: 15px;
            line-height: 19px;
    }
    p{
        font-size: 13px;
        line-height: 18px;
    }
    .pgn{
        right:0;
    }
}