* {

	padding: 0;

	margin: 0;

}



@font-face {

    font-family: 'brandon_textblack_italic';

    src: url('blackitalic-webfont.woff2') format('woff2'),

         url('blackitalic-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'brandon_textbold_italic';

    src: url('bolditalic-webfont.woff2') format('woff2'),

         url('bolditalic-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'helsinkiregular';

    src: url('helsinki-webfont.woff2') format('woff2'),

         url('helsinki-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



body {

	font-family: 'brandon_textbold_italic';

	font-size: 16px;

	background-image: url(../images/fondo.jpg);

	background-position: center center;

	background-repeat: no-repeat;

	background-attachment: fixed;

	background-size: cover;

	background-color:#b3422f;

}



h1, h2, h3, h4, h5, h6 {



}



p {

	font-family: 'brandon_textbold_italic';

}

.banner-principal {

	position: relative;

	width: 100%;

	height: 100vh;

	overflow: hidden;

	background-image: url(../images/fondo.jpg);

	background-position: center center;

	background-repeat: no-repeat;

	background-attachment: fixed;

	background-size: cover;

	background-color:#b3422f;

	z-index: 20;

}



.banner-principal .nube1 {

	position: absolute;

	top: -20%;

	right: -10%;

	max-height: 500px;

	z-index: 5;

}



.banner-principal .nube2 {

	position: absolute;

	bottom: -20%;

	left: -10%;

	max-height: 500px;

	z-index: 5;

}



.banner-principal .codigo-barras {

	position: absolute;

	bottom: 100px;

	right: 20px;

	max-height: 200px;

}



.banner-principal .container-ciudad {



	position: absolute;

	top: 0;

	left: 0;

	display: inline-block;

	width: 50%;

	height: 100vh;

	z-index: 2;



}



.banner-principal .container-ciudad .ciudad {

	position: absolute;

	top: 15%;

	left: 0;

	width: 100%;

}



.banner-principal .container-ciudad .perro {

	position: absolute;

	bottom: 1.2%;

	right: -15%;

	z-index: 4;

	height: 75%;

}



.banner-principal .container-ciudad .gato {

	position: absolute;

	bottom: 2%;

	left: 2%;

	z-index: 4;

	height: 75%;

}





.banner-principal .container-logo {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 3;

	width: 100%;

	text-align: center;

}



.banner-principal .container-logo img {

	max-width: 500px; 

	margin: 0 auto;

}



.banner-principal .container-texto {



	position: absolute;

	top: 0;

	right: 0;

	display: inline-block;

	width: 50%;

	height: 100vh;

	z-index: 2;



}



.banner-principal .container-texto .texto {

	position: absolute;

	top: 50%; 

	left: 50%;

	transform: translate(-50%, -50%);

	width: 100%;

	text-align:center;

}



.banner-principal .container-texto .texto h1{

	text-align: center;

	font-family: 'helsinkiregular';

	font-size: 2em;

	color: #f4cf37;

	-webkit-text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

	-moz-text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

}



.banner-principal .container-texto .texto h2 {

	text-align: center;

	font-family: 'brandon_textblack_italic';

	font-size: 1.2em;

	width: 60%;

	color: #fff;

	margin: 20px auto;

	text-transform: uppercase;

}



.banner-principal .container-texto .omg {

	position: absolute;

	bottom: -10px;

	right: -10px;

	width: 150%;

}



header {

	background-image: url(../images/fondo-menu.png);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

	height: 80px;

	padding: 0;

	border-bottom: 3px solid #000;

	position: relative;

	

}



.fixed-top {

	z-index: 99999;

}



.navbar {

	font-family: 'brandon_textblack_italic';

	padding: 0;

}



.navbar .navbar-brand {

	width: 200px;

	height: 80px;

}



.navbar .navbar-brand img {

	height: 100%;

}



.navbar .navbar-toggler i {

	font-size: 2em;

	color: #000 !important;

}



.navbar .navbar-nav  .menu-right {



}

.navbar .navbar-nav .nav-item {	

	padding: .2em .5em;

	margin-right: 10px;

	border-right: 2px solid #000;

}



.navbar .navbar-nav .nav-item .nav-link {

	color: #000;

	display: inline-block;

}



.navbar .navbar-nav .nav-item .facebook,

.navbar .navbar-nav .nav-item .instagram  {

	margin: 0 auto;

	padding: .5em .8em;

	border-radius: 100px;

	background: #395196;

	color: #fff;

}



.navbar .navbar-nav .nav-item .instagram  {

	padding: .5em .7em;

	background: #f09433; 

	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 

	background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 

	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );

 

}





.indicador-section {

	height: 120px;

	width:100%;

}



.container-principal {

	width: 100%;

	padding-top: 100px;

}



.nube1 {

	position: fixed;

	top: -20%;

	right: -10%;

	max-height: 500px;

	z-index: -1;

}



.nube2 {

	position: fixed;

	bottom: -20%;

	left: -10%;

	max-height: 500px;

	z-index: -1;

}



.container-titulo {

	margin-bottom: 40px;

	position: relative;

	width: 100%;

}



.container-titulo h1 {

	position: relative;

	padding-top: 8px;

	z-index: 2;

	text-align: center;

	font-family: 'helsinkiregular';

	font-size: 2em;

}



.container-titulo .fondo-titulo {

	position: absolute;

	top: 0%; 

	left: 38%;

	z-index: 1;

	transform: translate(0%, -38%);

	width: 250px;

	height: 50px;

	background: #f4cf37;

	border:3px solid #000;

    transform: skewX(-15deg);

}

.container-nosotros {
	padding: 2em;
	background:#fff;
	transform: skewX(-15deg);
	border: 4px solid #000;

}

.text-nosotros {

	text-align: justify;
	color: #000;
	margin-top: 3em;
	transform: skewX(15deg);
}



.video {
	text-align: center;
	position: relative;
	transform: skewX(15deg);
}



.video video {

	width: 90%;
	margin: 0 auto;


}



.fondo-video {

	position: absolute;
	top: -40%;
	left: -10%;
	z-index: -1;
	width: 110%;
}

.container-frases {
	margin:5em auto;
}


.container-frases h5 {

	position: relative;
	z-index: 2;
	margin-top: 5px;
	text-align: center;
	font-size: 1em;
	text-transform: none;
	transform: skewX(15deg);

}



.container-frases .fondo-frases {

	position: relative;
	background: #f4cf37;
	border:3px solid #000;   
	transform: skewX(-15deg);

}





/******* CARRUSELES *********/



.carousel-inner {

	padding: 1em 1em 3em 1em;

}



.carousel-item {

	width: 80%;

	margin: 0 auto;

	background: #f2f2f2;

	border: 4px solid #000;

}



.servicios {

	height: 500px;

}



.mobile {

	display: none;

}



.carousel-item .container-img-servicio {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

}



.carousel-item .container-img-servicio img {



	width: 100%;

}



.carousel-item .container-textos {

	position: absolute;

	top: 28%;

	right: 0px;

	width: 60%;

	padding: 2em;

}



.carousel-item .container-textos h1 {

	width: 100%;

	text-align: center;

	font-size: 1.6em;

	font-family: 'brandon_textblack_italic';

	text-transform: uppercase;

	color: #1472a6;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

	margin-bottom: 1.5em;

}



.container-controles {

	position: absolute;

	bottom: -50px;

	width: 100%;

	height: 50px;

	z-index: 9999;

}



.container-controles .carousel-control-prev {

	position: absolute;

	top: 0;

	left: 38%;

	opacity: 1;

}



.container-controles .carousel-control-next {

	position: absolute;

	top: 0;

	right: 38%;

	opacity: 1;

}



.texto-botones {

	text-align: center;

	color: #fff;

	text-transform: uppercase;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

}



.fondo-botones {

	position: absolute;

	z-index: -1;

	width: 90px;

	height: 30px;

	background: #1472a6;

	box-shadow: 3px 2px 0px rgba(0, 0, 0, 1);

    transform: skewX(-15deg);

}



.container-form p {

	color: #fff;

	text-align:center;

	margin: 0 auto;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

}



.container-form form {

	margin-top: 20px;

	font-family: 'brandon_textblack_italic';



}



.btn-primary {

	border: none;

	border-radius: 0px;

	background: #1472a6;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

	box-shadow: 3px 2px 0px rgba(0, 0, 0, 1);

    transform: skewX(-15deg);

}



.pacientes {

	background: none;

	border: none;

}



.pacientes .paciente-img {

	border:4px solid #000;

}





.pacientes .container-nombre {

	position: absolute;

	bottom: -80px;

	left: -80px;

	width: 250px;

}



.pacientes .container-nombre h3 {

	font-family: 'brandon_textblack_italic';

	position: absolute;

	top: 50%; 

	left: 50%;

	transform: translate(-50%, -50%);

	color: #cd3132;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);



}	



.embed-responsive {

	min-height: 450px;

}



footer {

	margin-top: 10%;

	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

	letter-spacing:.05em;

	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */

	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */

	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}

.copyright {

	color: #fff;

	font-size: .6em;

}





@media only screen and (max-width: 1366px) {

	.banner-principal .nube1, .nube1 {

		top: -28%;

		right: -12%;

		max-height: 500px;

	}



	.banner-principal .nube2, .nube2 {

		bottom: -25%;

		left: -18%;

		max-height: 500px;

	}



	.banner-principal .codigo-barras {

		position: absolute;

		bottom: 100px;

		right: 20px;

		max-height: 200px;

	}



	.banner-principal .container-ciudad {



		position: absolute;

		top: 0;

		left: 0;

		display: inline-block;

		width: 50%;

		height: 100vh;

		z-index: 2;



	}



	.banner-principal .container-ciudad .ciudad {

		top: 20%;

		left: 0;

	}



	.banner-principal .container-ciudad .perro {

		bottom: 1%;

		right: -15%;

		height: 70%;

	}



	.banner-principal .container-ciudad .gato {

		bottom: 2%;

		left: -5%;

		height: 70%;

	}



	.banner-principal .container-logo img {

		max-width: 450px; 

		margin: 0 auto;

	}





	.banner-principal .container-texto .texto h1{

		font-size: 1.8em;

	}



	.banner-principal .container-texto .texto h2 {

		font-size: 1.2em;

		width: 70%;

	}



}



@media only screen and (max-width: 1280px) {

	.banner-principal .container-ciudad .ciudad {

		top: 27%;

	}

	.banner-principal .container-ciudad .perro {

		bottom: 1%;

		right: -18%;

	}

@media only screen and (max-width: 1200px) {



	.banner-principal .container-ciudad .ciudad {

		position: absolute;

		top: 25%;

		left: 0;

		width: 100%;

	}



	.banner-principal .container-ciudad .perro {

		bottom: 1%;

		right: -18%;

	}



	.banner-principal .container-ciudad .gato {

		bottom: 2%;

		left: -10%;

	}

}



@media only screen and (max-width: 1000px) {

	.banner-principal .nube1, .nube1 {

		top: -19%;

		right: -16%;

		max-height: 400px;

	}



	.banner-principal .nube2, .nube2 {

		bottom: -25%;

		left: -18%;

		max-height: 500px;

	}



	.banner-principal .container-logo {

		position: absolute;

		top: 0;

		left: 0;

		z-index: 3;

		width: 100%;

	}



	.banner-principal .container-logo img {

		width: 40%;

		max-width: auto; 

		margin: 0 auto;

	}



	.banner-principal .codigo-barras {

		position: absolute;

		z-index: 3;

		bottom:10px;

		right: 10px;

		max-height: 150px;

	}



	.banner-principal .container-ciudad {

		position: relative;

		height: 80vh;

		width: 100%;

	}

	.banner-principal .container-ciudad .ciudad {

		position: absolute;

		top: 0%;

		left: 0;

		width: 100%;

	}



	.banner-principal .container-ciudad .perro {

		height: 80%;

		bottom: -5%;

		right: 10%;

	}



	.banner-principal .container-ciudad .gato {

		height: 80%;

		bottom: -5%;

		left: 10%;

	}



	.banner-principal .container-texto {



		position: relative;

		top: 0;

		right: 0;

		display: block;

		width: 100%;

		height: 20vh;



	}



	.banner-principal .container-texto .texto {

		position: relative;

		top: 0; 

		left: 0;

		transform: translate(0%, 0%);

		width: 100%;

	}



	.banner-principal .container-texto .texto h2 {

		display: none;

	}



	.banner-principal .container-texto .omg {

		display: none;

	}



	.container-titulo .fondo-titulo {

		position: absolute;

		top: 0%; 

		left: 32%;

		z-index: 1;

		transform: translate(0%, -32%);

		width: 250px;

		height: 50px;

		background: #f4cf37;

		border:3px solid #000;

	    transform: skewX(-15deg);

	}



	.carousel-item {

		width: 100%;

	}



	.servicios {

		height: 550px;

	}



	.carousel-item .container-textos {

		position: absolute;

		top: auto;

		right: auto;

		bottom: 0px;

		left: 0px;

		width: 100%;

		padding: 1em;

		border: 1px solid blue;

		height: auto;

	}



	.carousel-item .container-textos h1 {

		width: 100%;

		text-align: center;

		font-size: 1.6em;

		font-family: 'brandon_textblack_italic';

		text-transform: uppercase;

		color: #1472a6;

		text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

		margin-bottom: 1.5em;

	}



	.container-controles .carousel-control-prev {

		left: 30%;

	}



	.container-controles .carousel-control-next {

		right: 30%;

	}

}



@media only screen and (max-width: 990px) {



	.navbar .navbar-nav  {

		background-image: url(../images/fondo-menu.png);

		background-position: center center;

		background-repeat: no-repeat;

		background-size: cover;

	}



	.navbar .navbar-nav .nav-item {	

		text-align: center;

		padding: .2em 1em;

		margin:0;

		border:0;

		border-bottom: 2px solid #000;

	}



	.video {

		margin-top: 50px;

	}



	.mobile {

		display: inline-block;

		height: 100%;

	}



	.no-mobile {

		display: none;

	}



}





@media only screen and (max-width: 800px) {

	.banner-principal .nube1, .nube1 {

		top: -19%;

		right: -18%;

		max-height: 370px;

	}



	.banner-principal .nube2, .nube2 {

		bottom: -19%;

		left: -18%;

		max-height: 370px;

	}



	.banner-principal .container-logo img {

		width: 50%;

	}



	.banner-principal .container-ciudad .ciudad {

		top: 10%;

	}

}



@media only screen and (max-width: 766px) {

	.container-titulo .fondo-titulo {

		top: 0%; 

		left: 26%;

		transform: translate(0%, -26%);

	    transform: skewX(-15deg);

	}



	.pacientes .container-nombre {

		bottom: -50px;

		left: 0px;

		width: 110px;

	}



	.pacientes .container-nombre h3 {

		font-size: 1.2em;

		font-family: 'brandon_textblack_italic';

		position: absolute;

		top: 50%; 

		left: 50%;

		transform: translate(-50%, -50%);

		color: #cd3132;

		text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);



	}

}



@media only screen and (max-width: 700px) {

	.banner-principal .container-logo img {

		width: 55%;

	}



	.banner-principal .container-ciudad .perro {

		height: 80%;

		bottom: -5%;

		right: 0%;

	}



	.banner-principal .container-ciudad .gato {

		height: 80%;

		bottom: -5%;

		left: 0%;

	}

}





@media only screen and (max-width: 550px) {

	.banner-principal .nube1, .nube1 {

		top: -18%;

		right: -22%;

		max-height: 340px;

	}



	.banner-principal .nube2, .nube2 {

		bottom: -18%;

		left: -22%;

		max-height: 340px;

	}



	.banner-principal .container-logo {

		top: 10px;

	}



	.banner-principal .container-logo img {

		width: 70%;

	}



	.banner-principal .container-ciudad .perro {

		height: 70%;

		bottom: 0%;

		right: 0%;

	}



	.banner-principal .container-ciudad .gato {

		height: 70%;

		bottom: 0%;

		left: 0%;

	}

}



@media only screen and (max-width: 500px) {

	.container-titulo .fondo-titulo {

		position: absolute;

		left: 5%;

		width: 90%;

		transform: translate(0%, 5%);	

		 transform: skewX(-15deg);

	}

}



@media only screen and (max-width: 470px) {

	.banner-principal .nube1, .nube1 {

		top: -16%;

		right: -26%;

		max-height: 320px;

	}



	.banner-principal .nube2, .nube2 {

		bottom: -16%;

		left: -26%;

		max-height: 320px;

	}



	.banner-principal .container-logo {

		top: 20px;

	}



	.banner-principal .container-logo img {

		width: 75%;

	}



	.banner-principal .codigo-barras {

		bottom:5px;

		right: 5px;

	}



	.banner-principal .container-ciudad .perro {

		height: 70%;

		bottom: 0%;

		right: -2%;

	}



	.banner-principal .container-ciudad .gato {

		height: 70%;

		bottom: 0%;

		left: -12%;

	}

}



@media only screen and (max-width: 400px) {



	.banner-principal .nube1, .nube1 {

		right: -30%;

		max-height: 290px;

	}



	.banner-principal .nube2, .nube2 {

		left: -30%;

		max-height: 290px;

	}



	.banner-principal .container-logo {

		top: 50px;

	}



	.banner-principal .container-logo img {

		width: 80%;

	}



	.banner-principal .container-ciudad .ciudad {

		top: 35%;

	}



	.banner-principal .container-ciudad .perro {

		height: 60%;

		bottom: 0%;

		right: -2%;

	}



	.banner-principal .container-ciudad .gato {

		height: 60%;

		bottom: 0%;

		left: -12%;

	}

	.container-controles .carousel-control-prev {

		left: 26%;

	}



	.container-controles .carousel-control-next {

		right: 26%;

	}

}



@media only screen and (max-width: 350px) {



	.banner-principal .nube1, .nube1 {

		right: -30%;

		max-height: 240px;

	}



	.banner-principal .nube2, .nube2 {

		left: -30%;

		max-height: 240px;

	}



	.banner-principal .container-logo img {

		width: 80%;

	}



	.banner-principal .container-ciudad .ciudad {

		top: 40%;

	}



	.banner-principal .codigo-barras {

		bottom:2px;

		right: 2px;

		max-height: 90px;

	}

}