/* Please ❤ this if you like it! */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');

/* #Primary
================================================== */

body{
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	/*line-height: 24px;*/
	font-weight: 400;
	/*color: #212112;*/
	/*background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 7%;*/
	background-color: #f4f4f4;
	overflow-x: hidden;
	transition: all 200ms linear;
	height: 120vh;
}
::selection {
	color: #fff;
	background-color: #8167a9;
}
::-moz-selection {
	color: #fff;
	background-color: #8167a9;
}

/* Prelaoder */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: rgb(242, 242, 242) url("../../img/spin-pre-load.svg") no-repeat center center;
  }
  
.container{
	max-width: 1200px;
	width: 90%;
}
/*Agregue este container
.container{
	max-width: 1200px;
}*/

/* #Navigation
================================================== */

.start-header {
	opacity: 1;
	transform: translateY(0);
	/* Tamaño del navbar*/
	padding: 12px 0;
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
	padding: 10px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img{
	height: 32px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar{
	padding: 0;
	font-size: .9rem;
}
.navbar-brand img{
	/*Tamaño de la imagen del navbar*/
	height: 40px;
	width: auto;
	display: block;
  	/*filter: brightness(10%);*/
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}
.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none;
	position: relative;
	border-bottom: 2px solid #000;
    transition: all 300ms linear;
}
/* Aqui se cambia el x del menu y le puse 2px ela ultima linea tiene que ser de 2px*/
.navbar-light .navbar-toggler-icon:after, 
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 2px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 7px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}
.nav-link{
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
.nav-item:hover .nav-link{
	color: #8167a9 !important;
}
.nav-item.active .nav-link{
	color: #777 !important;
}
/* aqui se cambia el espacio entre lineas del menu responsivo*/
.nav-link {
	position: relative;
	padding: 7px 2px !important;
	display: inline-block;

}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #8167a9;
	opacity: 0;
    transition: all 200ms linear;
}
.nav-item:hover:after{
	bottom: -5px;
	opacity: 1;
}
.nav-item.active:hover:after{
	opacity: 0;
	bottom: -5px;
}
.nav-item{
	position: relative;
    transition: all 200ms linear;
}

/* #Primary style
================================================== */

.bg-light {
	/*Cambio de color del navbar*/
	background-color: rgb(255, 255, 255) !important;
    transition: all 200ms linear;
}

/*PRIMERA SECCION NAVBAR*/
.section {
    position: relative;
	width: 100%;
	display: block;
}
.full-height {
    height: 100vh;
}
.over-hide {
    overflow: hidden;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
  	margin-top: 40px;
	transform: translateY(-50%);
	z-index: 20;
}

.nav-item .dropdown-menu {
	/*Aqui cambiamos el brinco del menu era 10px originalmente*/
    transform: translate3d(0, 25px, 0);
    visibility: hidden;
    opacity: 0;
	max-height: 0;
    display: block;
	padding: 0;
	margin: 0;
    transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
	/*agregue el top para que no chocara con el menu de al lado*/
	top: 50px;
	padding: 10px 5px !important;
	margin: 0;
	font-size: 14px;
	letter-spacing: 1px;
	color: #212121;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
    transition: all 20ms linear;
}
.dropdown-toggle::after {
	display: none;
}

.dropdown-item {
	/*Aqui cambiamos el top del submenu*/
	padding: 7px 15px;
	color: #212121;
	border-radius: 2px;
    transition: all 200ms linear;
}
.dropdown-item:hover, 
.dropdown-item:focus {
	color: #fff;
	background-color: rgba(129,103,169,.6);
}



/* #Media
================================================== */

@media (max-width: 767px) { 
	
	h1{
		font-size: 19px;
	}
	.nav-item:after{
		display: none;
	}
	.nav-item::before {
		position: absolute;
		display: block;
		top: 15px;
		left: 0;
		width: 11px;
		height: 1px;
		content: "";
		border: none;
		background-color: #000;
	}
	
	/*Agregue esta opcion para que no diera ese salto en la version movil*/
	.nav-item .dropdown-menu {
		/*Aqui cambiamos el brinco del menu era 10px originalmente*/
		transform: translate3d(0, -45px, 0);
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		display: block;
		padding: 0;
		margin: 0;
		transition: all 200ms linear;
	}

	.dropdown-toggle::after {
		position: absolute;
		display: block;
		top: 10px;
		left: -23px;
		width: 1px;
		height: 11px;
		content: "";
		border: none;
		background-color: #000;
	
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"]::after{
		transform: rotate(90deg);
		opacity: 0;
	}
	.dropdown-menu {
		padding: 0 !important;
		background-color: transparent;
		box-shadow: none;
		transition: all 200ms linear;
	}
	

	.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
		margin-top: 10px !important;
		margin-bottom: 20px !important;
	}
	
	body.dark .nav-item::before {
		background-color: #fff;
	}
	body.dark .dropdown-toggle::after {
		background-color: #fff;
	}
	body.dark .dropdown-menu {
		background-color: transparent;
		box-shadow: none;
	}
}

/* #Link to page
================================================== */

.logo {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	/*transition: all 250ms linear;*/
}
.logo img {
	height: 26px; /*50 ideal y minimo 45 hasta 35*/
	width: auto;
	display: block;
  /*filter: brightness(10%);
	transition: all 250ms linear;*/
}
/*
body.dark .logo img {
  filter: brightness(100%);
}*/


/*Animaciones*/

/* Despues de crear el circulo hay que crear la animacion 
del circulo*/

@keyframes spin_01{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes bounceTop_01{
	0%,100%{
		transform: translateY(-5px)
	}
	50%{
		transform: translateY(5px);
	}
}

@keyframes pulse_01{
	0%{
		transform: scale(0.94);
		box-shadow: 0 0 0 0 rgba(150, 4, 163, 0.7);
	}
	70%{
		transform: scale(1);
		box-shadow: 0 0 0 12px rgba(126, 2, 138, 0);;
	}
	100%{
		transform: scale(0.94);
		box-shadow: 0 0 0 0 rgba(136, 3, 136, 0);;
	}
}

.effect-wrap .effect{
	position: absolute;
	z-index: -1;
}

.effect-wrap .effect-1{
	left: 15%;
	top: 30%;
	font-size: 20px;
	color: rgba(244, 165, 96, 0.678);
	animation: spin_01 9s linear infinite;
	font-size: 3rem;
}
.effect-wrap .effect-2{
	right: 10%;
	top: 30%;
	font-size: 20px;
	color: rgba(244, 165, 96, 0.678);
	animation: spin_01 9s linear infinite;
	font-size: 7rem;
}
.effect-wrap .effect-3{
	left: 5%;
	top: 50%;
	font-size: 20px;
	color: rgba(244, 165, 96, 0.678);
	animation: spin_01 9s linear infinite;
	font-size: 7rem;
}


/* ----------- 
HOME SECTION
-------------*/

/* ----------- 
BANNER SECTION
-------------*/




/* SCROLL TOP TOP */

.scrollTopTop{
	position: fixed;
	display: none;
	background: #8167a9a4;
	color: #fff;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 30px;
	left: 4.5%;
	bottom: 5%;
	transition: background 0.5s;
	/* le tuve que poner z-index 1 por que la imagen en las tarjetas de contacto tenia 1*/
	z-index: 1;
  }
  
  
  @media (max-width: 1200px) {
	.scrollTopTop{
	 width: 40px;
	 height: 40px;
	 line-height: 40px;
	 bottom: 15px;
	}
  }
  
  .scrollTopTop:focus {
	background: #8167a9;
	color: #fff;
	outline: none;

  }
  
  .scrollTopTop:hover {
	/* aqui se cambia el boton para ir arriba*/
	background: linear-gradient(to right, #604a80);
	color: #fff;

  }

  
  .scrollTopTop-messenger:hover {
	/* aqui se cambia el boton para ir arriba*/
	background: linear-gradient(to right, #604a80);
	color: #fff;

  }

   
/*----------
FOOTER
----------*/

footer{
	background: #fff;
	padding: 27px 10%;
	border-radius: 0px 100px 0px 0;
}

.footer-container{
	max-width: 100%;
	margin: auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap-reverse;
}

.logo-footer{
	width: 150px;
}

.social-media-footer{
	color: #fff;
	margin-right: 0px;
	font-size: 2rem;
	text-decoration: none;
	transition: .3s linear;
}

.fa-facebook{
	color: #8167a9;
	transition: .5s linear;
}

.fa-facebook:hover{
	transition: .5s linear;
	color: #f3c300;
}

.fa-instagram{
	transition: .5s linear;
	color: #8167a9;
}

.fa-instagram:hover{
	transition: .5s linear;
	color: #f3c300;
}

.fa-youtube{
	transition: .5s linear;
	color: #8167a9;
}

.fa-youtube:hover{
	transition: .5s linear;
	color: #f3c300;
}

.fa-whatsapp{
	transition: .5s linear;
	color: #8167a9;
}

.fa-whatsapp:hover{
	transition: .5s linear;
	color: #f3c300;
}

.social-media-footer a:hover{
	color: #c89211;
}

.rights-text{
	color: #8167a9;
}

/*Right*/

.right-col h1{
	font-size: 1rem;
}

.border-footer{
	width: 100px;
	height: 5px;
	background: #8167a9;
	border-radius: 30px;
	margin-bottom: 7px;
}

.newsletter-form{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.txtb{
	flex: 1;
	padding: 9px 40px;
	font-size: 1rem;
	color: #fff;
	background-color: #fff;
	border: none;
	font-weight: 700;
	outline: none;
	border-radius: 30px;
	min-width: 260px;
}

.btn-footer{
	padding: 9px 40px;
	font-size: 19px;
	color: #fff;
	background: #3b1d6c;
	border: none;
	font-weight: 700;
	outline: none;
	border-radius: 30px;
}

@media screen and (max-width: 960px){
	.footer-container{
		max-width: 600px;
	}

	.border-footer{
		width: 200px;
		height: 5px;
		background: #8167a9;
		border-radius: 30px;
		margin: 7px auto ;
	}

	.right-col{
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
	}

	.left-col{
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 700px){
	.btn-footer{
		margin: 0;
		width: 100%;
	}
}