@charset 'UTF-8';

:root{

	--violeta-tec: #844398;

	--violeta-secundario: #9411C8;

	--violeta-oscuro: #50295E;

	--fucsia-tec: #EC1163;

	--verde-tec: #CFDC27;

	--main-font: 'Montserrat', sans-serif;

	--font-regular: 400;

	--font-bold: 600;

}

main{
	background: var(--violeta-tec);
	background-image: linear-gradient(180deg, var(--violeta-tec) 0%, var(--violeta-secundario) 100%), url('../img/bg-grid.png');
	background-blend-mode: overlay;
	background-image: -moz-linear-gradient(180deg, var(--violeta-tec) 0%, var(--violeta-secundario) 100%), url('../img/bg-grid.png');;
	background: -webkit-linear-gradient(180deg, var(--violeta-tec) 0%, var(--violeta-secundario) 100%), url('../img/bg-grid.png');;
	/*background: linear-gradient(180deg, var(--violeta-tec) 0%, var(--violeta-secundario) 100%);*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#844398",endColorstr="#9411c8",GradientType=1);
	background-size: contain;
	background-repeat: repeat-y;
	background-position: top center;
}


*{
	font-family: var(--main-font);
	font-weight: 400;
}

/*Text*/

b{
	font-weight: var(--font-bold);
}

h1{
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: var(--font-bold);
}

h2{
	text-transform: uppercase;
	font-size: 1.5em;
}


/*Buttons*/

.btn{
	line-height: .7em;
}

.btn-primary{
	background-color: var(--fucsia-tec);
	border: none;
	font-weight: var(--font-bold);
	text-transform: uppercase;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:focus-visible, .btn-primary:active{
	background: black!important;
}

.btn-secondary{
	background-color: transparent;
	border: solid 1px var(--fucsia-tec);
	color: var(--fucsia-tec);
	text-transform: uppercase;
	font-weight: var(--font-bold);
}

.btn-secondary:hover{
	background-color: var(--fucsia-tec);
	border: solid 1px var(--fucsia-tec);
}

.btn span{
	font-size: .7em;
}

.social{
	font-size: 1.4em;
}

a{
	color: white;
	transition-duration: .2s;
}

a:hover{
	color: black;
}

/*Sections*/

section{
	z-index: 1!important;
	position: relative;
}

#header{
	height: 100vh;
}

/*Planes*/

.card{
	border: none;
	border-radius: 26px;
}
.card-header{
	background-color: var(--fucsia-tec);
	border: none;
	border-top-left-radius: 25px!important;
	border-top-right-radius: 25px!important;
}

li{
	list-style-type: '■';
	color: black;
}

/*Layers*/

#layer1, #layer2, #layer3, #layer4{
	background-size: auto;
	background-repeat: repeat-y;
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0%;
	z-index: 0;
}

#layer1{
	background-image: url('../img/layer1.png');
}

#layer2{
	background-image: url('../img/layer2.png');
}

#layer3{
	background-image: url('../img/layer3.png');
}

#layer4{
	background-image: url('../img/layer4.png');
	opacity: .2;
	filter: blur(5px);
	background-position: left;
	mix-blend-mode: color-dodge;
}


/*WPP*/

.wpp{
  position:fixed;
  width:50px;
  height:50px;
  background-color:#25D366;
  color: #fff;
  border-radius:50px;
  text-align:center;
  font-size: 1.5em;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  z-index:10000;
  transition-duration: .2s;
  padding-top: 7px;
  bottom:20px;
  right:20px;
}

.wpp:hover{
	background-color: black;
	color: white;
}


/*Animations*/

#layer1.blink{
	animation-duration: 5s;
}

.blink{
	animation-name: blink;
	-webkit-animation-name: blink;	

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;		

	visibility: visible !important;	
}

@keyframes blink {
	0% {
		opacity: 0.0;		
	}
	50% {
		opacity: 1;	
	}
	100% {
		opacity: 0;
	}		
}

@-webkit-keyframes blink {
	0% {
		opacity: 0.0;		
	}	
	50% {
		opacity: 1;	
	}
	100% {
		opacity: 0;
	}		
}


/*
==============================================
slideUp
==============================================
*/


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}	
	100% {
		transform: translateY(0%);
		opacity: 1;
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
		opacity: 0;
	}			
	100% {
		-webkit-transform: translateY(0%);
		opacity: 1;
	}	
}


/*Trigger classes*/
.animateUp{
	visibility: hidden;
}

@media (min-width: 768px){
	main{
		background-size: cover;
	}

	#layer1, #layer2, #layer3, #layer4{
		background-size: 100%;
	}

	/*Delayed objects*/
.delay-2{
	animation-delay: .2s;
	transition-delay: .2s;
}

.delay-4{
	animation-delay: .4s;
	transition-delay: .4s;
}
}