@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Work+Sans:wght@900&display=swap');


html {
	scroll-behavior: smooth;
}

h1 {
	font-family: 'Work Sans', sans-serif;
	text-transform: uppercase;
}

body {
	background: linear-gradient(-45deg, #101438, #621777, #0b0d42, #0a5c49);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
    font-family: 'DM Mono', monospace;
}
.dividerone{
	width: 100%;
	height: 32px;
    background-image: url(../img/def-01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
	margin-top: -2px;
}
.dividertwo{
	width: 100%;
	height: 32px;
	background-color: #121538;
    background-image: url(../img/def-02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
	margin-top: -2px;
}

.navbar-ti{
	background-color: rgba(0, 0, 0, 0.85);
	font-family: 'Work Sans', sans-serif;
	text-transform: uppercase;
	font-size: 1.2em;
}

.dividerfooter{
	width: 100%;
	height: 32px;
	margin-top: -30px;
    background-image: url(../img/def-03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.programacao {
	background-color: #121538;
	min-height: 70vh;
	color: #ffffff;
}

.programacao h4 {
	font-size: 1.3em;
	font-weight: 700;

}
.container-video {
	background: rgb(4,211,97);
	background: linear-gradient(90deg, rgba(4,211,97,0) 0%, rgba(4,211,97,0) 20%, rgba(4,211,97,1) 20%, rgba(4,211,97,1) 80%, rgba(4,211,97,0) 80%, rgba(4,211,97,0) 100%);

}
.fizemos {
	background-color: rgb(102, 51, 51);
    min-height: 70vh;
    background-image: linear-gradient(rgba(4, 211, 97, 0.7), rgba(5, 255, 117, 0.8)), url(../img/fotos/big/big-foto-94.jpg);
    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
.fizemos h2{
	color: #121538;
}
footer {
	background-color: #000;
}

h2 {
	color: #04d361;
	font-weight: 700;
}
p {
	font-size: 1.2em;
}

.nav-link {
    color: #0eff7a;
	font-weight: 700;
	font-size: 1.2em;
	padding: .5rem 2rem!important;
}
.nav-link:focus, .nav-link:hover {
    color: #fff;
}
.timer {
	color: rgb(255,255,255);
}

.sobre {
	min-height: 80vh;
}

.timer h5{
	opacity: .5;
}
h3 {
	font-weight: 700;
	font-size: 2.5em;
}

.banner {
    min-height: 80vh;
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.banner .image {
    height: 420px;
	width: 100%;
    background-image: url(../img/imgeprincipal.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.max {
	max-height: 420px;
}



.btn-grad {
	border: rgb(9, 13, 44) 2px solid;
	background-color: #121538;
}
.grad {
	border: rgb(9, 13, 44) 2px solid;
	background-color: #1b2055;
	border-radius: 10px;
	min-height: 525px;
	
}

.btn-grad h4{
	font-weight: 700;
	color: #fff;
	margin-bottom: 0;
	font-size: 1.3em;
}

.btn-grad.active {
	border: #04d361 2px solid;
	background-image: linear-gradient(to right, #AA076B 0%, #61045F  51%, #AA076B  100%)}
.btn-grad {
   margin: 2px;
   padding: 5px 20px;
   text-align: left;
   transition: 0.5s;
   background-size: 200% auto;
   color: #04d361;
   border-radius: 10px;
   display: block;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }



.banner .rotates {
    height: 192px;
	width: 192px;
	position: relative;
	top: -100%;
	left: 10%;
    background-image: url(../img/imgeprincipa-rotatel.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
	-webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}

.slick-slide{
	opacity: .8;
	transition: all 300ms ease;
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
	transform: scale(.8);
}


.slick-slide.slick-current {
	transform: scale(1);
	opacity: 1!important;
	-webkit-filter: blur(0px)!important;
	-moz-filter: blur(0px)!important;
	-o-filter: blur(0px)!important;
	-ms-filter: blur(0px)!important;
	filter: blur(0px)!important;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media screen and (max-width: 600px) {
	.banner {
	  padding-top: 80px;
	}
	.timer h3 {
		font-size: 2.5em;
	}
	.timer h5 {
		font-size: .9em;
	}
	.btn-grad {
		margin: 5px;
		padding: 5px 15px;
	}
	.nav-link {
		font-size: 1.6em;
		margin-bottom: 1em;
	}

  }