/*css*/
@import "../css/reset.css";
@import "../css/skeleton.css";



html, body {
	background: #343434 url(../images/bg-1.gif) 0 0 repeat-x;
	font: 14px/23px Arial, sans-serif;
	color: #cccccc;
	min-width:300px;
}

* {	-webkit-text-size-adjust: none;}

a { color: inherit; text-decoration: none;}
a:hover { text-decoration: none;}
a[href^="tel:"] {color: inherit;text-decoration:none;}
.a-hov { transition: all 0.4s ease;}
.a-hov:hover { color: #7ecefd;}

/*.bord-1 { background: url(../images/bord-1.gif) 0 0 repeat-x;}*/ /*LO QUITO PORQUE CREA UNA LINEA BLANCA EN INDEX.PHP*/

h2, h3, h4, h5, h6 {font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-weight: 300;}
h2 { font-size: 30px; line-height: 30px; color: #7ecefd; padding-top: 62px; padding-bottom: 21px;}
h3 { font-size: 20px; line-height: 30px; color: #3282F6; padding-bottom: 9px;  padding-top: 20px; }
h4 { font-size: 25px; line-height: 25px; color: #7ecefd; font-weight: 600; letter-spacing: -1px;}
h5 { font-size: 20px; line-height: 20px; color: #bababa;}
h6 { font-size: 14px; line-height: 16px; color: #bababa; padding-top: 72px; padding-bottom: 28px;}

.title-1 {display: block; font-family: 'Open Sans', sans-serif; font-size: 30px; line-height: 32px; color: #bababa; font-weight: 600; text-transform: uppercase;}
.title-2 {display: block; font-family: 'Open Sans', sans-serif; font-size: 30px; line-height: 32px; color: #cecece; font-weight: 300; text-transform: uppercase;}

.color-1 { color: #bababa;}
.color-1 { color: #000000;}
.color-3 { color: #7ecefd;}

h2 a { transition: all 0.4s ease;}
h2 a:hover {color: #2f2f2f;}
/*buttons*/
.btn {
	display: inline-block;
	background: #A63085;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	line-height: 12px;
	font-size: 12px;
	color: #ffffff;
	text-transform: uppercase;
	transition: all 0.4s ease;
	padding: 13px 15px 12px;
	margin-top: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
.btnm {
    display: inline-block;
	background: #C12F25;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	line-height: 12px;
	font-size: 12px;
	color: #ffffff;
	text-transform: uppercase;
	transition: all 0.4s ease;
	padding: 13px 15px 12px;
	margin-top: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
.btnp {
	display: inline-block;
	background: #1B4381;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	line-height: 12px;
	font-size: 12px;
	color: #ffffff;
	text-transform: uppercase;
	transition: all 0.4s ease;
	padding: 13px 15px 12px;
	margin-top: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
.btni {
	display: inline-block;
	background: #115C31;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	line-height: 12px;
	font-size: 12px;
	color: #ffffff;
	text-transform: uppercase;
	transition: all 0.4s ease;
	padding: 13px 15px 12px;
	margin-top: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
.btn:hover { background: #FF4ACC;}
.btnm:hover { background: #FF3E31;}
.btnp:hover {background:  #3580FF;}
.btni:hover {background:  #2FFF88;}

/*images*/
.img-bord { 
	padding: 6px;
	background: #cccccc;
	-webkit-box-shadow: 1px 2px 1px 0px #000000;
	-moz-box-shadow: 1px 2px 1px 0px #000000;
	box-shadow: 1px 2px 1px 0px #000000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.bord-2 { border-bottom: 1px solid #ededed; padding-bottom: 35px;}

/*lists*/

.list-1 li {display: block; margin-bottom: 19px;line-height: 16px;}
.list-1 li a:hover { background: url(../images/arrow-1-hov.png) 0px 2px no-repeat;	transition: all 0.4s ease;}
.list-1 li a {
	font: 14px/16px Arial, sans-serif; 
	color: #868686;
	transition: all 0.4s ease;
	padding-left: 26px; 
	background: url(../images/arrow-1.png) 0 2px no-repeat;
	display: inline-block;
}
.list-1 li a:hover {color: #7ecefd;}

.list-2 { margin-top: 9px;}
.list-2 li { padding-left: 27px; background: url(../images/arrow-2.png) 0 5px no-repeat;}
.list-2 li + li { margin-top: 7px;}
h2 + .list-2 { margin-top: -7px;}
.list-2 li a {transition: all 0.4s ease;}
.list-2 li a:hover {color: #7ecefd;} 

.dropcup {
	display: inline-block;
	float: left;
	margin-right: 19px;
	height: 41px;
	margin-top: 5px;
	line-height: 41px;
	vertical-align: middle;
	width: 41px;
	border-radius: 50%;
	background: #2081c3;
	text-align: center;
	font-family: 'Open Sans', sans-serif; 
	font-size: 25px;
	font-weight: 600;
	color: #000000;
}
/*auxiliary*/

.img-ind {float: left; margin-right: 19px; margin-top: 5px;}
.img-ind img { width: 100%;}
.img-ind-1 {
    width: 200px; /* Establece un ancho fijo */
    height: auto; /* Mantiene la proporción de aspecto */
    /* Alternativamente, usa max-width para un diseño responsivo */
    /* max-width: 100%; */
    /* height: auto; */
    /* Para imágenes cuadradas, puedes establecer tanto el ancho como la altura */
    /* width: 100px; */
    /* height: 100px; */
    /* Para asegurarte de que las imágenes se reduzcan pero no se estiren */
    /* max-width: 100px; */
    /* max-height: 100px; */
    /* Para que las imágenes llenen el contenedor pero mantengan la proporción de aspecto */
    /* object-fit: contain; */
}
.img-ind-2 {
    width: 250px; /* Establece un ancho fijo */
    height: auto; /* Mantiene la proporción de aspecto */
    /* Alternativamente, usa max-width para un diseño responsivo */
    /* max-width: 100%; */
    /* height: auto; */
    /* Para imágenes cuadradas, puedes establecer tanto el ancho como la altura */
    /* width: 100px; */
    /* height: 100px; */
    /* Para asegurarte de que las imágenes se reduzcan pero no se estiren */
    /* max-width: 100px; */
    /* max-height: 100px; */
    /* Para que las imágenes llenen el contenedor pero mantengan la proporción de aspecto */
    /* object-fit: contain; */
}
.wrapper img, .wrapper {width: 100%; position: relative;}
.extra-wrap {overflow:hidden;}
.grid_inside { margin: 0 -10px;}
.aligncenter {text-align: center !important;}
.alignleft {text-align: left !important;}
.it {font-style:italic; display: inline-block;}
.fleft {float: left;}
.fright {float: right;}
.h-underline:hover { text-decoration: underline;}
.underline {text-decoration: underline;}
.upp {text-transform: uppercase;}
.transition {transition: all 0.4s ease;}

.clearfix { *zoom: 1;}
.clearfix:before,.clearfix:after {display: table;content: "";line-height: 0;}
.clearfix:after { clear: both;}



p { padding-bottom: 23px;}
.p1 { padding-bottom: 43px; }
.p2 { padding-top: 42px;}
.p3 { padding-top: 0px; padding-bottom: 2px; margin-top: -9px;}
.p4 { padding-top: 0px; padding-bottom: 8px; margin-top: -6px;}
.p5 { padding-bottom: 41px;}
.p6 { padding-bottom: 12px;}
.p7 { padding-top: 84px;}

h2 + h3 { padding-top: 0px; margin-top: -11px;}


/************Header************/

	header { 
		background: #000 url(../images/bg-3.jpg) center 0 no-repeat; 
		background-size: 100% auto;
	}
	h1 { margin-top: 30px;}
	.header-top .fright { 
		font-size: 12px; 
		line-height: 14px; 
		font-family: 'Open Sans', sans-serif; 
		text-transform: uppercase;
		margin-top: 60px; 
		background: url(../images/icon-1.png) 0 1px no-repeat; 
		padding-left: 28px;
	}
	
/************Slider************/

.slider .camera_pag { position: absolute;top:auto; bottom: 22px; left: auto; right: 24px; text-align: center;}
.slider .camera_pag .inline { line-height: 0px;}
.slider .camera_wrap .camera_pag .camera_pag_ul { display: inline-block; line-height: 0px; font-size: 0px;}
.slider #camera_wrap_1 .camera_wrap .camera_pag .camera_pag_ul li {
	cursor: pointer;
	display: inline-block;
	float: left;
	margin: 0px;
	position: relative;
	text-align: center;
	text-indent: -9999px;
}
.slider .camera_wrap .camera_pag .camera_pag_ul li {
	height: 13px !important;
	width: 15px !important;
}
.slider .camera_wrap .camera_pag .camera_pag_ul li {margin: 0px 4px !important;}
.slider .camera_wrap .camera_pag .camera_pag_ul li > span {
	-webkit-border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	border-radius: 8px !important; 
	height: 16px !important;
	left: 0px !important;
	overflow: hidden;
	position: absolute;
	top: 0px !important;
	width: 16px !important;
	background: #2593cc;
	border: 4px solid #2593cc;
	transition: all 0.4s ease;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.slider .camera_wrap .camera_pag .camera_pag_ul li > span:hover,
.slider .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
	background: #ffffff;
	border: 4px solid #2593cc;
}
.slider .camera_wrap { border-bottom: 1px solid #000000; margin-bottom: 0!important; height: 404px;}
.slider .camera_caption {
	bottom: auto;
	top: 125px;
	left: 70px;
}
	.slider-text span {
		display: block;
		font-family: 'Open Sans', sans-serif; 
		font-weight: 300;
		color: #ffffff;
		font-size: 35px;
		line-height: 35px;
		text-transform: uppercase;
	}
	
	.slider-text span + span{
		font-family: 'Open Sans', sans-serif; font-weight: 600;
		font-size: 60px;
		line-height: 60px;
		margin-top: -3px;
	}

.slider .btn {
	display: inline-block;
	background: #A63085 !important;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	line-height: 14px;
	font-size: 14px;
	color: #ffffff;
	text-transform: uppercase;
	transition: all 0.4s ease;
	padding: 13px 15px 14px;
	margin-top: 28px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600 !important;
	/*letter-spacing: -1px;*/
}
	.slider .btn:hover { background: #FF4ACC !important;}
	
/*negro*/
.center {text-align: center; /* Centra el texto horizontalmente */}
/************Content***********/
.content { background: #000000 0 0 repeat-x; padding-top: 6px; padding-bottom: 71px;}
.main-bg { margin-top: -100px; padding-top: 100px;}
.box-1 {
	padding-left: 80px;
	background: url(../images/icon-3.png) 1px 6px no-repeat;
	margin-top: 46px;
}
.box-2 { margin-top: 43px;}
h4 + h5 { margin-top: 3px;}
.box-2 .clearfix { margin-bottom: 22px;}

/*about us*/

.gallery-1 h3 { padding-bottom: 0;}
.gallery-1 { margin-top: -2px;}
.testimonials > div:first-child { margin-top: -9px;}
.testimonials > div { padding-left: 40px; background: url(../images/bg-8.png) 0 6px no-repeat; margin-top: -6px;}
.testimonials h3 + h7 { padding-top: 8px; padding-bottom: 0px;}
.testimonials > div + div { margin-top: 24px;}

/*services*/
.b-dropcap {margin-top: -7px;}
.b-dropcap > div + div {margin-top: 17px;}

.block-1 {
    margin-top: -5px;
}
.box-3 h3 {padding-top: 0;margin-top: 0px;}
.box-3 { margin-top: 23px;}
.box-3:first-child { margin-top: 0;}

/*price list*/
.table-1 {width: 100%;margin-top: -6px;}
.table-1 tr { padding-top: 0px;}
.table-1 td { line-height: 14px; padding-top: 16px; }
	
.table-1 td:first-child { background: url(../images/bord-2.gif) 0 bottom repeat-x;}
.table-1 td:first-child div { 
	display: inline-block; 
	background: url(../images/arrow-2.png) 0 0px no-repeat;
	
	float: left;
	position: relative;
}
.table-1 td:first-child div.abs { position: absolute; background: url(../images/bg-9.gif) 0 bottom repeat-x; height: 1px; left: 0px; right: 0; top: auto; bottom: 0px;}
.table-1 td:first-child span { display: block; padding-left: 27px;}
.table-1 td + td { text-align: right;}

.box-4 { background: url(../images/icon-4.gif) 0 5px no-repeat; padding-left: 24px;}
.box-5 { background: url(../images/icon-5.gif) 0 5px no-repeat; padding-left: 24px; margin-top: 10px;}
.box-4 a, .box-5 a {text-decoration: underline;}
.box-4 a:hover, .box-5 a:hover { text-decoration: none;}

/*blog*/

.blog_post .img-bord {margin-right: 80px;}
.blog_info { margin-top: -4px; margin-bottom: 16px;}
.comments {margin-right: 80px; background: url(../images/icon-6.png) right 6px no-repeat;padding-right: 28px;}
.blog_post .img-bord { margin-bottom: 22px;}
.blog_post + .blog_post { margin-top: 52px;}

#search1 {position: relative;}
#search1 input {
	border: 1px solid #ebebeb; 
	height: 41px;
	color: #cccccc;
	font: 14px/20px Arial, sans-serif;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: -3px;
	padding: 10px 0 11px 16px;
}
.button1 {
	cursor: pointer;
	position: absolute;
	width: 34px;
	right: 0px;
	top: -4px;
	bottom: auto;
	background: url(../images/icon-7.gif) 3px center no-repeat;
	height: 41px;
}
.button1:hover {
	opacity: 0.6;
}
.box-6  { margin-top: -6px;}
.box-6 + .box-6 { margin-top: 30px;}
.box-6 h3 { padding-top: 0; margin-top: -3px;}

/************Footer************/

footer { padding-bottom: 40px;}
.list-services { margin-top: -7px; }
.list-services li {
	display: inline-block;
	margin-right: 3px;
	perspective: 500; 
	-webkit-perspective: 500;
}
	.list-services li > a { display: inline-block; width: 35px;}
	.list-services li > a > span {
		border-radius: 50%;
		text-decoration: none;
		display: block;
		height: 36px;
		width: 35px;
		background: url(../images/soc-icons.png) no-repeat;
	    position: absolute;
	    -webkit-backface-visibility:hidden; /* Chrome and Safari */
	    -moz-backface-visibility:hidden; /* Firefox */
	    -ms-backface-visibility:hidden; /* Internet Explorer */
	    backface-visibility:hidden;
	}

	.list-services-1 .sp-1 { background-position: 0px 0px; }
	.list-services-2 .sp-1 { background-position: -43px 0px; }
	.list-services-3 .sp-1 { background-position: -85px 0px; }
	.list-services-4 .sp-1 { background-position: -128px 0px; }
	.list-services-5 .sp-1 { background-position: -92px 0px; }

	.list-services-1 .sp-2 { background-position: 0px -38px; }
	.list-services-2 .sp-2 { background-position: -43px -39px; }
	.list-services-3 .sp-2 { background-position: -85px -38px; }
	.list-services-4 .sp-2 { background-position: -128px -38px; }
	.list-services-5 .sp-2 { background-position: -92px -20px; }

	.list-services li > a:hover .sp-1, .list-services li > a .sp-2 {
	    -webkit-transform:rotateY(180deg);
	    -moz-transform:rotateY(180deg);
	    transform:rotateY(180deg);
    	transition:all .6s ease-out;
    	visibility: hidden;
	}
	.list-services li > a:hover .sp-2, .list-services li > a .sp-1 {
	    -webkit-transform:rotateY(0deg);
	    -moz-transform:rotateY(0deg);
	    transform:rotateY(0deg);
    	transition:all .6s ease-out;
    	visibility: visible;
	}
footer h6 span { font-weight: 300; color: #bababa; font-size: 13px; }


/*toTop*/

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	cursor:pointer;
	overflow:hidden;
	width: 29px;
	height: 28px;
	border:none;
	text-indent:-999px;
	z-index:20;
	background: url(../images/ui.totop.png) 0 0 no-repeat;
	margin-right: -670px !important;
	right: 50%;
	bottom: 20px;
}

	#toTop:hover {
		display:block;
		overflow:hidden;
		float:left;
		background-position: -32px 0;
	}

	#toTop:active, #toTop:focus {outline:none;}
	
	
/****** TEXTO ******/

/* centrar */

.centrar {
    display: flex; /* Usamos flexbox para alinear horizontalmente */
    justify-content: center; /* Centramos el contenido horizontalmente */
    align-items: flex-start; /* Alineamos el contenido en la parte superior */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si es necesario */
    margin: 0 auto; /* Centra el contenedor de la fila */
    max-width: 1200px; /* Limita el ancho máximo para la fila */
    padding: 0; /* Quitamos el padding para que la imagen esté completamente arriba */

}

.grid_81, .grid_41 {
    padding: 10px;
}

.bord-21 {
    border: 2px solid #ddd; /* Añade un borde para visualizar el contenedor */
    padding: 20px;
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra para efecto */
}

.centrar-texto1 {
    text-align: center; /* Centra el texto horizontalmente */
}

.testimonials1 {
    display: flex; /* Usamos flexbox para centrar la imagen */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    height: 100%; /* Asegura que el contenedor se extienda completamente */
}

.centrar-imagen1 img {
    max-width: 100%; /* Asegura que la imagen no sobrepase el contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina el espacio debajo de la imagen en el contenedor */
}

h2.p2, h3 + h7 {
    margin-bottom: 20px; /* Espacio debajo de los títulos */
}

h3 + h7 a.a-hov {
    color: #007bff; /* Color del enlace */
    text-decoration: none; /* Elimina el subrayado */
}

h3 + h7 a.a-hov:hover {
    text-decoration: underline; /* Subraya el enlace al pasar el ratón */
}

/* izquierda */



.row2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    ew  align-items: stretch;
    gap: 20px;
}


.alinear-derecha {
    text-align: right;
}


/* justificar */



.texto-justificado {
    text-align: justify; /* Justifica el texto en ambos márgenes */
    
}


/*==================================RESPONSIVE LAYOUTS===============================================*/


@media only screen and (max-width: 995px) {
	.bord-2 h2 {font-size: 24px;}
	footer h6 span { display: block;}
	.slider .camera_wrap {height: 322px;}
	.box-6 .extra-wrap { overflow: visible;}
	.table-1 td:first-child { background: none;}
	.table-1 td:first-child div.abs {display: none;}
}
@media only screen and (max-width: 767px) {
	.slider .camera_wrap {height: 200px;}
	.slider .camera_caption {bottom: auto;	top: 10px;	left: 10px;	}
	.slider-text span {font-size: 20px;}
	.slider-text span + span {font-size: 25px;}
	.w1 { width: 45%!important; margin-right: 20px; float: left; margin-bottom: 10px;}
	.w1 + h3 { padding-top: 0;}
	.w2 { width: 45%!important; margin-left: 2%; margin-right: 2%;}
	.title-1 {font-size: 20px;line-height: 22px;}
	.title-2 {font-size: 20px;line-height: 22px;}
	h2 { padding-top: 40px;}

	.w3 { width: 48%!important; margin-left: 1%; margin-right: 1%; padding-bottom: 20px;}	
	.p4 { padding-top: 40px;}
	.p3 { padding-top: 40px;}
	.comments, .blog_post .img-bord { margin-right: 0;}
	.img-bord { -webkit-box-shadow: 1px 1px 2px 1px #000000;-moz-box-shadow: 1px 1px 2px 1px #000000;box-shadow: 1px 1px 2px 1px #000000;}
	.box-6 h3 + h7 { margin-top: 0;}
	.dropcup { border-radius: 20px;}
}
@media only screen and (max-width: 479px) {
	.slider .camera_wrap {height: 200px;}
	.header-top .fright { margin-top: 20px;}
	h1.fleft { float: none; text-align: center;}
	.w1 + h3 + h7 { padding-top: 20px;}
	.w1, .w2 { width: 100%!important; margin-left: 0; margin-right: 0; }
	.w3 { width: 94%!important; margin-left: 3%; margin-right: 3%;}
	.w4 { width: 100%;; margin-right: 0; margin-bottom: 20px; float: none;}
	
}
@media only screen and (max-width: 320px) {

}