@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    margin:0;
    padding:0;
	font-family: 'Roboto', sans-serif;
	color: rgba(0,0,0,.7);
	border: 0;
	outline: 0;
}

*::-moz-selection { background: #1FB3F5; }
*::selection { background: #1FB3F5; }

html, body{
	height: 100%;
	vertical-align:baseline;
	margin-top: 22px;
}
	
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

header:before, header:after, section:before, section:after{
   content: " ";
   display: table;
}
 
header, section{
   clear: both;
}
.lightbox .flex{
	display: flex;
}
section {
   *zoom: 1;
   overflow: auto;
}

img {max-width: 100%;}

a, button{
	text-decoration: none;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1 {
    font-weight: 500;
    color: #ffffff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3.9rem;
    max-width: 960px;
    margin: 2% auto;
    letter-spacing: -1px;
}

h2, h3, p.title, h4{font-family: 'Roboto Condensed', sans-serif;}

h2{
	font-size: 1.2rem;
	padding: 5px 15px;
	font-weight: 500;
	color: #1B415E;
	text-align: center;
}


h3, p.title{
	color: rgba(0, 0, 0, .55);
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 140%;
	text-align: center;
}

h4{
	font-weight: 400;
	background-color: #0277BD;
	font-size: 1.6rem;
	text-align: center;
	padding: 15px 0;
	margin-top: -30px;
	color: rgba(255,255,255,.95);
}

p{
	line-height: 160%;
	margin: 6px 0;
	font-size: 0.95rem;
}

p strong{
	font-size: 1.05rem;
	color: #368;
}

.text-center{text-align:center;}
.text-right{text-align:right;}

.left{float: left; padding: 15px 15px 10px 15px;}
.right{float: right; padding: 15px 15px 10px 15px;}
.center{margin: 0 auto;}


.clearfix:before, .clearfix:after, header:before, header:after, section:before, section:after{
   content: " ";
   display: table;
}
 
.clearfix:after, header:after, section:after {
   clear: both;
}

.container{
	min-width: 960px;
	max-width: 1200px;
	margin: 0 auto;
	/* display: flex; */
	/* flex-wrap: wrap; */
}


/* ==== HEADER ==== */

header.topbar{
    display: block;
    background: #000;
    color: #fff !important;
    text-align: center;
    position: -webkit-sticky; /* Safari */
    position: fixed;
    top: 0;
    margin-bottom: 100px;
    z-index: 1000;
    width: 100%;
    font-family: 'Roboto Condensed';
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.2);
}
header p{
    color: #fff !important;
    font-size: 20px;
    font-family: 'Roboto Condensed';
    font-weight: 400;
}
.grafico{margin:0 0 30px 0;}

.texto{
	width: 53%;
	float: left;
	padding: 30px 0 0 30px;
}

.cta{
	width: 100%;
	text-align: center;
	margin: 80px auto 0 auto;
}

/* ====== FORM CONTATO ====== */


form{
	width: 100% !important;
	text-align: center;
	margin: 0 0 70px;
}


/* ====== MAIN ====== */
.logo {
    height: 80px;
    display: block;
    background: url(tpl/img/logo-DDNS.svg) center no-repeat;
    background-size: 170px;
    /* border-bottom: 1px solid #ccc; */
}
.ddns-usos{
    width: 100%;
    height: 350px;
    /* position: absolute; */
    padding: 20px;
    z-index: 1;
    margin-top: -70px;
    /* margin-bottom: 500px; */
    background: #F4F4F4;
    max-width: 1200px;
    border-radius: 50px;
    box-shadow: black;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.alguns-clientes{
	padding: 0 0 60px 0;
}
.ddns-usos h2, .como-funciona h2, .alguns-clientes h2, .bg-gray2 h2{
    font-size: 2.3rem;
    margin: 0 0 15px 0;
}
.como-funciona h2{
	color:#0277BD;
}
.como-funciona p{
	font-size: 1.2rem;
	line-height: 140%;
}
.como-funciona a{
	color:#0277BD;
	text-decoration: underline;
}
.como-funciona a:hover{
	color:#29B0E5;
	text-decoration: underline;
}
.alguns-clientes h2 {
	color: rgba(255,255,255,.95);
	position: relative;
	margin: 0 0 50px 0;
}

.alguns-clientes h2 > span {
	background: #1B415E;
    padding: 20px 80px;
    border-radius: 50px;
    color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
}
.alguns-clientes h2 span::after {
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	background: #1B415E;
	left: 0;
	top: 24px;
	z-index: -999;
	position: absolute;
}
.bg-gray2 h2 {
	color: #fff;
}
.bg-gray2 > p {
    font-size: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    color: #FFF;
	text-align: center;
    font-family: 'Roboto';
}
.bg-gray2 form {
    margin: 0px !important;
}
section{
	width: 100%; 
	padding: 50px 30px 30px 30px;
	position: relative;
	font-weight: 400;
}
.arrow-container {
    position: relative;
}
.arrow {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(360deg);
    cursor: pointer;
	margin-left:5px;
    margin-bottom: 20px;
}

.arrow span {
    display: block;
	width: 20px;
	height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(360deg);
    margin: -15px;
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}
/* section.main {
    background: url(tpl/img/main-header.png) center bottom fixed;
    background-size: cover;
	background-color: #3dbfcf;
	padding: 0px 30px 30px 30px;
} */
section.main {
    background: url(tpl/img/mainheader.png) right bottom fixed;
    background-size: cover;
	background-color: #1e1f2c;
	padding: 0px 30px 30px 30px;
}

section.main > h2{
	font-size: 1.8rem;
	padding: 10px 0 30px 0;
	color: rgb(15, 120, 158);
}

section.main > p.text-center{
	background: #29B0E5;
	margin: 0 -30px;
	padding: 10px 30px;
	color: rgba(255,255,255,.7);
	font-size: 1.2rem;
}

.ip-user{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 600;
	color: #F00;
	line-height: 110%;
}

.maintitle{
	font-size: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
	color: rgb(255 255 255);
	font-family: 'Roboto';
}

.registrar {
	font-size: 1.48rem;
	font-family: 'Roboto Condensed', sans-serif !important;
	color: #fff;
	background-color:#FFB03A;
	background: #EF6C00;
	padding:8px 30px;
	margin: 10px auto 20px auto;
	border: 1px solid #EF6C00;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
					
.registrar:hover {
background: linear-gradient(#fff, #fff);
	color: #EF6C00	;
	cursor: pointer;
}

.bg-gray1{
	background-color: #fafafa;
	padding: 20px 0 80px 0;
	color: #fff;
}

.bg-gray2{
	background-color: #005A93;
	padding: 40px 0 20px 0;
	border-bottom: 1px solid rgba(0,0,0,.05);
}

.flex-container, .flex-container-clientes{
	min-width: 960px;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	height: auto;
	flex-flow: row wrap;
	justify-content: space-around;
	/* height: auto; */
}

.logos-clientes{
	width: 200px;  /* Or whatever */
	height: 60px; /* Or whatever */
	margin: 40px auto 0 auto;  /* Magic! */
}

.card{
	width: 33.33%;  /* Or whatever */
	height: auto; /* Or whatever */
	/* margin: 10px auto; */  /* Magic! */
	padding: 20px 0;
	/* background-color: rgba(255,255,255,.85); */
	border-right: 0px solid rgba(0,0,0,0.05);
	/* -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3); */
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
	/* box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3); */
}

.card p{
	font-size: .95rem;
	line-height: 140%;
	margin: 5px 0;
	padding: 0 20px !important;
	text-align: center;
	color: rgba(0,0,0,.8);
}

.icon {
    width: 100%;
    height: 40px;
    margin: 0 auto 10px auto;
    text-align: center;
}

.bg-webcam{
	background:url(tpl/img/icon-webcam.svg) center no-repeat;
	background-size:contain;
}

.bg-suporte{
	background:url(tpl/img/icon-support.svg) center no-repeat;
	background-size:contain;
}

.bg-dinheiro{
	background:url(tpl/img/icon-money.svg) center no-repeat;
	background-size:contain;
}

.bg-seguranca{
	background:url(tpl/img/icon-lock.svg) center no-repeat;
	background-size:contain;
}

.bg-assistencia{
	background:url(tpl/img/icon-assistencia.svg) center no-repeat;
	background-size:contain;
}

.bg-ipv6{
	background:url(tpl/img/icon-ipv6.svg) center no-repeat;
	background-size:contain;
}

.divisao{
	width: 100%;
	height: 2px;
	background-color: rgba(0,0,0,.15);
	clear: both;
}

/*
======
CHAMADA BLOG
======


section.blog{
	padding: 15px 0 40px 0; 
	text-align: center;
	background:  url(tpl/img/banner-blog.jpg) center no-repeat;
	background-size: cover;
}

section.blog h2{
	width: auto;
	color: rgba(255, 255, 255, .9);
	font-size: 3.5rem
}

section.blog p{
	max-width: 800px;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, .9);
	text-align:center;
	padding: 10px 30px 20px 30px;
	margin: 0 auto;
}

a.btt-blog {
	position: relative;    
	display: inline-block;
	font-size: 1.3rem;
	font-weight: normal;
	color: #fff;
	background: linear-gradient(#00C853, #01a143);
	border: 1px solid #01a143;
	padding: 12px 30px;
	margin: 20px 0 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a.btt-blog:hover  {
	background: linear-gradient(#01a143, #01a143);
	color: #fff;
	cursor: pointer;
}

/CHAMADA BLOG */


/* ====== FOOTER ====== */
footer{
width: 100%;
padding: 18px 0 18px 0;
background-color: #000;
margin:0 0 0 0;
}

footer p{
font-size: .95rem;
margin: 0;
color: #fff	;
}

footer p a{
color: #fff;
font-size: .95rem;
}

footer p a:hover{
}

/* ====== Exit Intent ====== */

.lightbox {
    /** Hide the lightbox */
    display: none;

    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color:#333333;
    background:rgba(38, 50, 56, .85);
}
.lightbox:after {
    content: '';
    display: table;
    clear: both;
}

.lightbox .box {
    max-width:800px;
    margin: 2% auto;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #000;
    position: relative;
    border-radius: 10px;
    }

.lightbox .box > header{
    width: 100%;
    height: auto;
    margin:0;
    background: none;
	border:0;
}
.lightbox .box > header h2{
	font-size: 2.3rem;
	margin: 0 0 15px 0;
	color: #0277BD;
}
.lightbox .close {
        float:right;
        display:block;
        text-decoration:none;
        font-size:1.8rem;
		color: #465156;
        border-radius: 50%;
        background: hsl(0,0%,80%);
        width: 30px;
        height: 30px;
        text-align: center;
        margin: 8px 8px 0 0;
    }

    .lightbox .close:hover {
        background: #333;
    }

.lightbox .box > header p{
	width: 90%;
    line-height: 140%;
    font-size: 1.9rem;
    padding: 0 30px;
	margin-top:0;
    color: rgba(255,255,255,.9);
    font-weight: 400;
    font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 1px;
}

.lightbox .open {
    /** Show lightbox when mouse leaves the browser window */
    display: block;
    outline: none;
}
.lightbox .content {
padding: 15px 20px 30px;
  }	
  .lightbox .card {
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.2);
	max-width: 31%;
	margin: auto;
	text-align: center;
	font-family: arial;
	border-radius: 10px;
	padding: 0px !important;
	border: 1px solid #e6e6e6;
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	height: 100%;
  }
  .lightbox .card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  .lightbox .card  p.title{
	line-height: 140%;
	font-size: 1.2rem;
	padding: 0 20px;
	color: hsl(200, 19%, 18%);

}
  .lightbox .card  i{
	display: block;
	font-style: italic;
	font-size: 1.1em;
    font-family: 'Roboto Condensed', sans-serif;
	font-weight: 500;
	color: #0277BD;
}
  .lightbox .card  p.description{
	line-height: 116%;
	font-size: 0.80rem;
	padding: 0 20px;
	color: hsl(0, 0%, 39.2%);
	flex: 1 1 auto;
	margin-bottom: 20px;
}
.lightbox .card  .logos{
	width: 190px;
	height: auto;
	display: block;
	margin: 0 auto;
	background-size: contain;
}
.lightbox .card  .logo-wtm{
	width: 210px;
}
.lightbox .card  .logo-cloudvpn{
	width: 150px;
	margin-bottom: 12px;
}
.lightbox .price {
	color: grey;
	font-size: 1.2rem;
  }
  
.lightbox .card a {
	font-size: 1.3rem;
	font-family: 'Roboto Condensed', sans-serif !important;
	color: #fff;
	background-color: #FFB03A;
	background: #01a143;
	padding: 8px 30px;
	width:100%;
	cursor: pointer;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.card_image {
    width: 100%;
    max-width: 100px;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 50%;
    display: block;
    margin: 10px auto;
}
.lightbox .card a:hover {
	/*! opacity: 0.7; */
	background: #006027;
	color: #fff;
  }

.content{
	padding: 0 30px;
}

.content p{
	line-height: 160%;
	font-size: 1.3rem;
	padding: 0 20px;
	color: hsl(200, 19%, 18%);

}

a.btt-cloudvpn {
	width: 270px;
	text-align: center;
	display: block;
	font-size: 1.3rem;
	font-weight: normal;
	color: #fff;
	background-color:#FFB03A;
	background: linear-gradient(#FFB03A, #EF6C00);
	border: 1px solid #EF6C00;
	padding: 12px 30px;
	margin: 0 auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a.btt-cloudvpn:hover  {
	background: linear-gradient(#01a143, #01a143);
	color: #fff;
	cursor: pointer;
}


/* ====== MEDIA QUERIES ====== */

/*  1200px  */
@media (max-width: 1199.98px) {
	.ddns-usos {
		width: 100%;
		margin: -70px 30px 30px;
	}
}
/*  992px */
@media (max-width: 991.98px) {
	section{padding:20px !important;}
	.container, .flex-container, .flex-container-clientes {min-width: 100%;	max-width: 100%;}
	
	footer p{text-align: center; margin:0; float: none;}
	.card{width: 33.3%;}
	.card h3{font-size: 1.4rem;}
	.card p{font-size: 0.9rem;; padding:0;}
	.ddns-usos {
		width: 100%;
		height: auto;
		margin: -70px 30px 30px;
	}
	.alguns-clientes h2 > span {
		padding: 10px 15px;
	}
}

/*  768px */
@media only screen and (max-width:767.98px) {
	.card{width: 100%; height: auto; padding: 20px 10px;}
	.card h3{font-size: 1.4rem;}
	.card p{font-size: 0.9rem;; padding:0;}
	form {width: 90%;}
	.flex-container-clientes {min-width: 100%;	max-width: 100%;}
	.ddns-usos {
		width: 100%;
		height: auto;
		margin: -70px 30px 30px;
	}
	.maintitle {
		font-size: 1.1rem;
		max-width: 900px;
		margin: 0 auto;
		color: rgb(255 255 255);
		font-family: 'Roboto';
	  }
	  h1 {
		font-weight: 500;
		color: #ffffff;
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 2.9rem;
		max-width: 960px;
		margin: 2% auto;
		letter-spacing: -1px;
	  }
	.alguns-clientes h2{
		background: #1B415E;
	}
	.alguns-clientes h2 > span {
		background: #1B415E;
		padding: 0;
		color: #fff;
		font-family: 'Roboto Condensed', sans-serif;
	}

	section{
		padding: 30px;
	}
}

/* ====== CARAOUSEL STYLES ====== */
.carousel {
    position: relative;
}
.row{
		display: flex;
		margin: 0 auto;
		flex-wrap: wrap;
}
.cindicators{
	position:relative;
	z-index: 1;
	top:40%;
}
.i-left{
    left: -46px;
    position: absolute;
    background-color: #B7B7B7;
    padding: 3px 3px 0;
    border-radius: 50px;
}
.i-right{
    right: -46px;
    position: absolute;
    background-color: #B7B7B7;
    padding: 3px 3px 0;
    border-radius: 50px;
}
.carousel.pointer-event {
    touch-action: pan-y;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-inner::after {
    display: block;
    clear: both;
    content: ""}
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}
@media (prefers-reduced-motion:reduce) {
    .carousel-item {
    transition: none;
}
}.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block;
}
.active.carousel-item-right, .carousel-item-next:not(.carousel-item-left) {
    transform: translateX(100%);
}
.active.carousel-item-left, .carousel-item-prev:not(.carousel-item-right) {
    transform: translateX(-100%);
}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}
.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
    z-index: 1;
    opacity: 1;
}
.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s .6s;
}
@media (prefers-reduced-motion:reduce) {
    .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
    transition: none;
}
}.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
}
@media (prefers-reduced-motion:reduce) {
    .carousel-control-next, .carousel-control-prev {
    transition: none;
}
}.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}
.carousel-control-prev {
    left: 0;
}
.carousel-control-next {
    right: 0;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}
.carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}
@media (prefers-reduced-motion:reduce) {
    .carousel-indicators li {
    transition: none;
}
}.carousel-indicators .active {
    opacity: 1;
}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}
	@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}