/*@import 'fonts.css';*/

@import 'colors.css';

@font-face {

    font-family: 'got';

    src: url('../fonts/Gotham-Medium.otf');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'got';

    src: url('../fonts/Gotham-Bold.otf');

    font-weight: bold;

    font-style: normal;

}



@font-face {

    font-family: 'got';

    src: url('../fonts/Gotham-BookItalic.otf');

    font-weight: normal;

    font-style: italic;

}









body{

	font-family: 'got';

}



/*terminan font faces*/



body{background-color: #fff;}

h1,h2,h3,h4,h5,h6{font-weight: bold;}

a,a:hover{text-decoration: none;}

input:active,input:focus{outline: none;}



.flex{display: flex;}

.wrap{flex-wrap: wrap;}

.a-center{align-items: center;}

.nopad{padding-left: 0;padding-right: 0;}

img{max-width: 100%;}

main{min-height: 90vh;}

.btn-vinna{text-align: center;padding: 7px 25px;font-size: 12px; max-width: 200px;}

.show-xs{display: none;}

.navbar-light .navbar-toggler{

	border:none!important;

	margin-left: auto;

	margin-right: auto;

}

/*------------

-sesion --

--------------*/

.sesion{

	position: absolute;

	right: 20px;

	top: 20px;

	z-index: 10;

}



/*------------

-menu lateral --

--------------*/

.menu-cont{

	border-right: 1px solid #b3b3b3;

}



.logo{

	text-align: center;

	padding-top: 40px;

	padding-bottom: 40px;

}



.navbar{

	padding: 0;

	width: 100%;

	margin-top: 30px;

}



.nav{

	width: 100%;

}



.nav-item{

	padding-top: 30px;

	padding-bottom: 30px;

	padding-left: 20px;

	font-weight: bold;

	width:100%;

}



.nav-link{

	color: #000;

}



.nav-item:hover{

	background-color: var(--color-azul-s);

}



.nav-item:hover .nav-link{

	color:#fff;

}



.nav-item.submenu{

	background-color: var(--color-azul-s);

}



.nav-item.submenu .nav-link{

	color: #fff;

}



.nav-item.submenu:hover .nav-link{

	color:var(--color-azul);

}





/*------------

-footer--

--------------*/

.logo-foot{

	padding-top: 10px;

	padding-bottom: 10px;

}



.logo-foot img{

	width: 90%;

}



.footer{

	padding-top: 10px;

	padding-bottom: 10px; 

}



.foot-text{

	font-weight:;

	font-size: 12px;

	margin-top: auto;

	margin-bottom: auto;

}



/*------------

-home--

--------------*/

.home-img img{

	width: 100%;

}



.slide-item{

	padding:0 70px;

	height: 100%;

	margin-top:auto;

	margin-bottom:auto;

}



.line-slide{

	width: 50px;

	height: 4px;

	border-radius: 10px;

	margin-top: 15px;

	margin-bottom: 15px;

}



.text-slide{

	font-size: 1.7rem;

	font-weight: bold;

	line-height: 2.2rem;

}



.carousel-indicators{

	position: relative;

	bottom: -60px;

	justify-content: flex-start;

}



.carousel-indicators li{

	border: 2px solid;

	border-color: var(--color-azul);

	border-radius: 100%;

	width: 20px;

	height: 20px; 

}



.carousel-indicators .active{

	background-color: var(--color-azul);

}



.btn-slide{

	margin-top: 60px;

	margin-bottom: 20px;

}





.vinna-cat{

	padding: 35px 30px;

	transition: background 2s ease;

	background: var(--color-azul);

	min-height: 235px;



}



.cat-title{

	justify-content: space-between;

	font-size: 18px;

	margin-bottom: 20px;

}



.cat-text{

	font-size: 13px;

}



.vinna-online:hover{

	background: url(../img/back-cat.png);

}



.vinna-editorial:hover{

	background: url(../img/back-cat.png);

}



.vinna-orquesta:hover{

	background: url(../img/back-cat.png);

}



/*------------

-conocenos ------

--------------*/

.glosario-s{

	padding-top: 50px;

	padding-bottom: 50px;

}



.col-about{

	padding: 30px 40px;

}



.icon-col{

	margin-top: 20px;

	margin-bottom: 20px;

}



.col-title{

	font-size: 24px;

	font-weight: bold;

	margin-bottom: 20px;

}



.text-lec{

	font-size: 13px;

}



.glosario-cont{

	padding-right: 40px;

	padding-left: 40px;

}

.glosario-cont p,p{

	line-height: 18px;

}



.title-l{

	font-size:36px;

	padding-left: 40px;

	padding-right: 40px;

	padding-top: 30px;

	line-height: 42px;

}



.col-glosario{

	border-right: 2px solid #fff;

}



.col-b-glosario{

	border-right: 2px solid;

	border-color: var(--color-azul);

}



.lema-s{

	font-size: 22px;

}

.lema{

	font-style: italic;

	font-size: 20px;

}



.b-top{

	border-top: 1px solid #b3b3b3;

}

/*------------

-contacto--

--------------*/

.form-s{

	padding-top: 50px;

	padding-bottom: 50px;

}



.form-box{

	position: relative;

	margin-bottom: 35px;

}



.form-box input,

.form-box textarea{

	width: 100%;

	padding: 7px 15px;

	color:var(--color-azul-s);

	background-color: white;

	outline: none;

	border:none;

}



.form-box label{

	position: absolute;

	top: 0;

	left: 0;

	padding: 7px 15px;

	color: var(--color-azul-s);

	pointer-events: none;

	transition: .5s;

	font-weight: bold;

	font-size: 13px;

}



.form-box input:focus ~ label,

.form-box input:valid ~ label,

.form-box textarea:focus ~ label,

.form-box textarea:valid ~ label{

	top:-30px;

	left: 0;

	padding-left: 0;

	font-size: 13px;

	color: white;	

}



.submit-esp button{
	position: relative;
	display: inline-block;
	padding: 10px 40px;
	color: var(--color-azul-s);
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	transition: .5s;
	font-weight: bold;
	background: transparent;
	border: none;
}



.submit-esp button:hover {

  background: var(--color-azul-s);

  color: #fff;

  border-radius: 5px;

}



.submit-esp button span {

  position: absolute;

  display: block;

}



.submit-esp button span:nth-child(1) {

  top: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--color-azul-s));

  animation: btn-anim1 1s linear infinite;

}



@keyframes btn-anim1 {

  0% {

    left: -100%;

  }

  50%,100% {

    left: 100%;

  }

}



.submit-esp button span:nth-child(2) {

  top: -100%;

  right: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(180deg, transparent, var(--color-azul-s));

  animation: btn-anim2 1s linear infinite;

  animation-delay: .25s

}



@keyframes btn-anim2 {

  0% {

    top: -100%;

  }

  50%,100% {

    top: 100%;

  }

}



.submit-esp button span:nth-child(3) {

  bottom: 0;

  right: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(270deg, transparent, var(--color-azul-s));

  animation: btn-anim3 1s linear infinite;

  animation-delay: .5s

}



@keyframes btn-anim3 {

  0% {

    right: -100%;

  }

  50%,100% {

    right: 100%;

  }

}



.submit-esp button span:nth-child(4) {

  bottom: -100%;

  left: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(360deg, transparent, var(--color-azul-s));

  animation: btn-anim4 1s linear infinite;

  animation-delay: .75s

}



@keyframes btn-anim4 {

  0% {

    bottom: -100%;

  }

  50%,100% {

    bottom: 100%;

  }

}

/*------------

--------------*/



.space-contact{

	height: 50px;

}



.datos-contacto{

	padding:30px 0;

}



.space-reverse{

	margin-top: -50px;

}



.datos-contacto div{

	flex: 0 0 50%;

	text-align: center;

	font-size: 20px;

}



.datos-contacto div:first-child{

	border-right: 1px solid white;

}



.direccion{

	font-size: 20px;

	margin-top: 40px;

	margin-bottom: 40px;

}



/*------------

-servicios--

--------------*/

.back-servicios{

	background-image: url(../img/back-servicios.png);

	background-repeat: no-repeat;

	background-position: top right;

}



.serv-rec{

	padding-top: 60px;

	padding-bottom: 60px; 	

}



.serv-mostrar{

	align-items: flex-end;

	height: 100%;

}



.serv-tl{

	font-size: 18px;

	margin-bottom: 20px;

	font-weight: bold;

}



.serv-ts{

	font-size: 12px;

}



.ts1{

	padding-right: 20px;

}



.img-espc{

	flex: 0 0 100%;

}



.profe-tit{

	font-weight: bold;

	font-size: 24px;

	margin-top: 30px;

	margin-bottom: 30px;

}



.equipo-prof1 .col-md-4{

	margin-bottom: 20px;	

}



.prof-foto{

	width: 130px;

	height: 130px;

	border:7px solid;

	border-color: var(--color-azul);

	border-radius: 100%;

	overflow:hidden;

	background-size: cover;

	background-repeat: no-repeat;

	margin-left: auto;

	margin-right: auto;

}



.prof-name{

	font-size: 18px;

	font-weight: bold;

	margin-top: 10px;

}



.prof-inst{

	font-size: 13px;

	margin-top: 15px;

	margin-bottom: 15px;

}



.prof-metodo{

	font-size: 13px;

}



.back-texto{

	font-size: 13px;

}



.back-texto p{

	line-height: 16px;

}



.border-l{

	border-left:1px solid #b3b3b3;

}



.met-tit{

	font-size: 30px;

	margin-top: 50px;

	margin-bottom: 30px;

	font-weight: bold;

}



.table-inst{

	font-size: 11px;

	font-weight: bold;

	margin-top: 30px;

	margin-bottom: 30px;

}



.table-inst td{

	padding: 3px 20px;

}



.table-inst td:first-child{

	border-right: 1px solid #b3b3b3;

}



.table-inst thead{

	border-bottom: 1px solid #b3b3b3;

}



.costos{

	font-size: 22px;

	font-weight: bold;

	margin-bottom: 15px;

	line-height: 22px;

}



.upp{

	text-transform: uppercase;

}



.costo-item span{

	font-size: 13px;

	line-height: 15px;

}



.costos-s{

	padding-bottom: 40px;

}



.b-gris{

	background-color: #f2f2f2;

	padding-top: 30px;

	padding-bottom: 30px;

}



.pol{

	font-size: 22px;

	padding: 30px;

}



.pol-es{

	text-align: right;

	border-right: 1px solid #b3b3b3;

}





/*------------

-tarjetas--

--------------*/

.card-s {

	position: relative;

	perspective: 30rem;

	height: 330px;

	border-bottom: 1px solid #b3b3b3;

}

.front, .back {

	position: absolute;

	transition: transform 1s;

	backface-visibility:hidden;

	left: 0;

	right: 0;

}

.front {

	background-color: #163253;

	padding: 0 35px;

	margin: 20px 0;

}

.back {

	padding: 20px;

	transform: rotateY(180deg);

	height: 100%;

}

.card-s:hover .front{ transform: rotateY(180deg); }

.card-s:hover .back { transform: rotateY(360deg); }





/*------------

-acordion-horizontal--

--------------*/



.pago-item{

	padding: 30px;

	flex: 0 0 180px;

	margin-right: 10px;

	transition: all 0.5s ease;

	height: 510px;

	overflow:hidden;

}



.pago-name{

	font-size: 24px;

	font-weight: bold;

	margin-bottom: 20px;

}



.pago-desc{

	width: 0;

	height: 0;

	overflow:hidden;

}



.pago-active{

	flex-grow: 2;

}



.pago-active .pago-desc{

	width: auto;

	height: auto;

	overflow:visible;

}

/*------------

-responsive--

--------------*/

@media (max-width: 1199px) {

	.text-slide{

		font-size: 1.3rem;

		line-height: 1.5rem;

	}



	.slide-item{

		padding: 0 50px;

	}



	.carousel-indicators{

		bottom: -20px;

	}



}



@media (max-width: 991px) {

	.title-l{

		padding-left: 0;

		padding-right: 0px;

		font-size: 32px;

	}



	.hide-900{

		display: none;

	}



	.datos-contacto div{

		flex: 0 0 100%;

	}



	.img-espc{

		flex: 2 0 50%;

	}



	.serv-rec{

		padding-top:77px;

		padding-bottom:77px; 

	}



	.serv-tl{

		margin-top: 10px;

	}



	.justify-sm{

		justify-content: center!important;

	}



	.col-metodos{

		margin-bottom: 50px;

	}



	.pago-item{

		flex: 0 0 100px;

		padding: 15px;

	}



	.pago-active{

		flex-grow: 3;

	}



	.pago-name{

		font-size: 18px;

		line-height: 20px;

	}

}



@media (max-width: 767px) {

	.hide-xs{

		display: none;

	}



	.show-xs{

		display: block;

	}



	.home-slide{

		height: 300px;

	}



	.navbar-collapse{

		

	}



	.nav-item{

		padding:15px 10px;

		font-size: 11px;

	}



	.vinna-cat{

		min-height: 320px;

	}



	.tit-section{

		padding: 30px 0;

	}



	.title-l{

		margin-bottom: 20px;

	}



	.serv-rec{

		padding: 40px 0;

	}



	.pago-desc{

		font-size: 10px;

	}



	

}



@media (max-width: 575px) {

	.foot-text{

		text-align: center;

		padding-top: 10px;

	}



	.logo-foot img{

		width: 150px;

	}



	.logo{

		padding-top: 10px;

		padding-bottom: 10px;

	}



	.vinna-cat{

		min-height: 1px;

	}



	.border-l{

		border:none;

	}



	.pago-item{

		flex: 0 0 100%;

		height: auto;

		margin-bottom: 10px;

	}

	.icon-col{
		text-align: center;
	}

	.pago-logo{
		text-align: center;
	}

}





/*------------

--testimonios--

--------------*/


.testimonios{
	padding-top: 15px;
	padding-bottom:15px;
}

.test-item .card img{
	width: 130px;
	margin: auto;
}

.test-item .card{
	border: none;
	background: transparent;
}

.test-item .card .card-text{
	max-width: 100%;
	width: 500px;
	margin: auto;
}

.cuentanos{
	padding-top: 40px;
	padding-bottom: 40px;
}

.cuenta{
	margin-right: auto;
	margin-left: auto;
	font-size: 15px;
}

/*------------

--login--

--------------*/

.login-s{
	padding-top: 60px;
}

.login-s .card{
	padding: 15px 20px;
	border: none;
}

.login-s .card input{
	border-bottom: 1px solid black;
}


/*------------

----cuenta----

--------------*/

.cuenta-s{
	padding-top: 50px;
}

.citas{
	padding-top: 30px;
}

.modal-body textarea{
	width: 100%;
	border-radius: 5px;
	padding: 10px;
}

.b-citas{
	margin-bottom: 20px;
}

.form-box-a input{
	border: none;
	border-bottom: 1px solid black;
	width: 100%;
	padding: 3px 7px;
	margin-bottom: 20px;
}


video{max-width: 100%;}

/*infografias*/

.img-info{
	margin-top: 20px;
	margin-bottom: 20px;
}

.col-metodos{
	margin-bottom: 20px;
}

/*semblanza*/

.back-scroll{
	overflow-y: scroll;
}



/*testimonios*/

.testimonios-back{
	height: 300px;
	background: url(../img/home_kokoro.png);
	background-size: 100%;
	background-position: left;
}