<? header ("Content-type: text/css;  charset: UTF-8"); 

session_start();
  
  $sesion=session_id();
  $serv=$_SERVER['DOCUMENT_ROOT'] . "/" ;

?>
<? $color1=file_get_contents( $serv."color1.txt"); ?>
<? $color2=file_get_contents( $serv."color2.txt"); ?>
<? $color3=file_get_contents( $serv."color3.txt"); ?>
<? $color4=file_get_contents( $serv."color4.txt"); ?>
<? $foreground=$color2; 
   list($r, $g, $b)=split(',',$foreground);
   
  
   $x1=round((0.5*$r)+(0.5*255)); $x2=round((0.5*$g)+(0.5*255)); $x3=round((0.5*$b)+(0.5*255));
   $colorx="rgba(".$x1.",".$x2.",".$x3.",255)"; ?>
  
  
html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    font-weight:300;
}

hr {
    max-width: 50px;
    border-color: <? echo $color4; ?>;
    border-width: 3px;
}

hr.light {
    border-color: <? echo $color2; ?>;
}

a {
    
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    
}
a:active{
font-weight:900;
text-decoration: underline;
}

h1{
font-weight:800;
}

h2{
font-weight:600;
text-transform:uppercase;
}

h6{
font-weight:600;
font-size:36px;
padding:12px;
}

p {
	
    margin-bottom: 20px;
    margin-top:55px;
    font-size: 16px;
    line-height: 2.0;
    font-weight:700;
    color:<? echo $color4; ?>;
}

canvas {
  margin-top:80px;
  height: 120px;
  width: 100%;
  border:1px solid #000000;
}

ombre {
box-shadow: 0 6px 20px rgba(0,0,0,0.2);

}


.img-logo{
	padding:2px 0;
	margin:10px 0;

}
.navbar{
border-color: transparent;
	background-color: #006da0;
	

}

.navbar-default {
    border-color: transparent;
	background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    <!-- box-shadow: -5px -1px 10px rgba(0,0,0,0.2) inset; -->
     box-shadow: -5px -1px 10px rgba(0,0,0,0.2); 
}

.navbar-default .navbar-header .navbar-brand {
    text-transform: uppercase;
   font-weight: 700;
   color: <? echo $color2; ?>;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: <? echo $colorx; ?>;
    background-color: transparent;
    text-decoration: underline overline dotted;
}

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    color: <? echo $color2; ?>;
    background-color: transparent;
    
}

.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: <? echo $colorx; ?>;
    background-color: transparent;
    text-decoration: underline dotted;
    
}

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
     color: <? echo $colorx; ?> !important; 
    background-color: transparent;
    font-weight:900;
    text-decoration: underline;
}


.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
text-decoration: underline;
background-color: transparent;
}

@media(min-width:768px) {
    .navbar-default {
   
	background-color: <? echo $color1; ?>;
    }

    .navbar-default .navbar-header .navbar-brand {
        color: <? echo $color2; ?>;
    }

    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: <? echo $colorx; ?>;
        background-color: transparent;
        text-decoration: underline dotted;
    }

    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: <? echo $color2; ?>;
        background-color: transparent;
    }
    
  
    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: <? echo $colorx; ?>;
        background-color: transparent;
    }
    .navbar-default .nav > li.active>a:hover,
    .navbar-default .nav>li.active>a:focus:hover {
        color: <? echo $colorx; ?>;
        background-color: transparent;
        text-decoration:  underline overline dotted;
    }

    .navbar-default.affix {
       <!--  border-color: <? echo $color2; ?>; -->
       
    }

    .navbar-default.affix .navbar-header .navbar-brand {
        font-size: 14px;
        color: <? echo $color2; ?>;
    }

    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: <? echo $colorx; ?>;
    }

    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        color: <? echo $colorx; ?>;
    }

    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        color: <? echo $colorx; ?>;
    }
}

.navbar-default .navbar-toggle .icon-bar{
background-color: <? echo $color2; ?>;

}
.navbar-default .navbar-toggle .icon-bar:hover{
background-color: <? echo $color2; ?>;

}
.navbar-default .navbar-toggle .icon-bar:focus{
background-color: <? echo $color2; ?>;

}


.navbar-default .navbar-toggle{
<!-- border-color:<? echo $color2; ?>; -->
}

.navbar-default .navbar-toggle:hover{
border-color:<? echo $colorx; ?>;
background-color:transparent;
}

.navbar-default .navbar-toggle:focus{
border-color:<? echo $colorx; ?>;
background-color:transparent;
}


/* PALABRA TEL */
.texto{
	size:16px;
	font-size:22px;
	float:left;
	top:4px;
	left:10px;
	z-index:999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	color:<? echo $color2; ?>;
	line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));
	/* font-size: calc(2.5vw + .65vh); */
}


/* PRIMER TELEFONO */
.texto1{
	size:18px;
	font-size:13px;
    float:left;
	top:0px;
	left:35px;
	z-index:999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	color:<? echo $color2; ?>;
	<!-- line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); -->
	/* font-size: calc(2.5vw + .65vh); */
	font-stretch: ultra-condensed;
}
/* 2do TELEFONO */
.texto2{
	size:16px;
	font-size:13px;
    float:left;
	top:15px;
	left:35px;
	z-index:999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	color:<? echo $color2; ?>;
	<!-- line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); -->
	/* font-size: calc(2.5vw + .65vh); */
	font-stretch: ultra-condensed;
}
/* Mail */
.texto3{
	size:16px;
	font-size:12px;
    float:left;
	top:30px;
	left:35px;
	z-index:999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	color:<? echo $color2; ?>;
	<!-- line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); -->
	/* font-size: calc(2.5vw + .65vh); */
	
}

/* iconito de mail */
.texto4{
	size:16px;
	font-size:14px;
    float:left;
	top:28px;
	left:10px;
	z-index:999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	color:<? echo $color2; ?>;
	line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));
	/* font-size: calc(2.5vw + .65vh); */
}

/* 1ER TELEFONO LINKS */
/* unvisited link */
.texto1  a:link {
  color: <? echo $color2; ?>;
}

/* visited link */
.texto1  a:visited {
  color: <? echo $color2; ?>;
}

/* mouse over link */
.texto1  a:hover {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}

/* selected link */
.texto1  a:active {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}

/* 2do TELEFONO LINKS */
/* unvisited link */
.texto2  a:link {
  color: <? echo $color2; ?>;
}

/* visited link */
.texto2  a:visited {
  color: <? echo $color2; ?>;
}

/* mouse over link */
.texto2  a:hover {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}

/* selected link */
.texto2  a:active {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}
/* 3ER TELEFONO LINKS */
/* unvisited link */
.texto3  a:link {
  color: <? echo $color2; ?>;
}

/* visited link */
.texto3  a:visited {
  color: <? echo $color2; ?>;
}

/* mouse over link */
.texto3  a:hover {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}

/* selected link */
.texto3  a:active {
  color: <? echo $colorx; ?>;
  text-decoration: dotted underline;
}
.separotxt{
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
size:12px;
padding: 0px 1px 5px 1px;
}
.separotxt2{
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
size:12px;
padding: 0px 70px 5px 10px;
}
.norma_s{
size:18px;
font-weight:900;
font-stretch: extra-expanded;
top:125px;
text-align:center;
z-index:999999;
cursor:pointer;
color:<? echo $color1; ?>;
/* line-height: calc(1.1em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));  */
font-size: calc(2.90vw + 1vh);  	
}
.norma_s2{
size:12px;
padding: 1px 0px 0px 0; 
font-family: "Arial", Arial, sans-serif;
font-stretch: extra-expanded;
top:145px;
text-align:center;
z-index:999999;
cursor:pointer;
color:<? echo $color1; ?>;
 /* line-height: calc(1.1em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));  */
font-size: calc(1.05vw + 1vh); 
font-weight:700; 
}
.norma_t{
font-family: "Arial Narrow", Arial, sans-serif;
size:12px;
font-variant: small-caps;
font-stretch: ultra-condensed;
padding: 10px 10px 5px 15px;
font-stretch: ultra-condensed;
float:right;
top:88px;
left:95px;
z-index:999999;
cursor:pointer;
position:fixed;
display:flex;
color:#000000;
line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); 
/* line-height: calc(1.1em + (1.5 - 1.3) * ((100vw - 20em)/(35 - 21)));  */
font-size: calc(1.90vw + 1vh);
/* font-size: calc(1.1vw + .85vh);  */
}
.seccion {
    float:left;
	top:50px;
	left:0px;
	z-index:999;
	cursor:pointer;
	position:fixed;	
	background:<? echo $color3; ?>;
	width:100%;
	text-align:center;	
}
header {
	padding: 205px 0 0 0;
    position: relative;
    width: 100%;
    min-height: 100%;
    text-align: center;
<!-- 
    color: #FFBD02;
    background-image: url(../img/prueba2.jpg);
 -->
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 180px 15px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    /* margin-top: 350; */
    margin-bottom: 0;
	color: <? echo $color2; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color1; ?>, 0 2px <? echo $color1; ?>, 2px 0 <? echo $color1; ?>, 0 -2px <? echo $color1; ?>;
	font-weight:800;


}

header .header-content .header-content-inner hr {
    margin: 30px auto;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
}

header .header-content .header-content-inner button{
	background: <? echo $color1; ?>;
	color: <? echo $color2; ?>;

}


@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
       /*  padding: 180px 150px; */
        -webkit-transform: translateY(-38%);
        -ms-transform: translateY(-38%);
        transform: translateY(-38%);

    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
    
    header .header-content .header-content-inner button{

	background: <? echo $color1; ?>;

	}
    
}


.section-heading {
    margin-top: 20px;
    color: <? echo $color2; ?>;
    background: <? echo $color1; ?>;
    text-transform:uppercase;
    
}
.bg-dark {
    color: <? echo $color1; ?>;
    background-color: <? echo $color2; ?>;
}
.bg-dark h2{
	color:<? echo $color1; ?>;
}
.bg-dark h6{

	color:<? echo $color1; ?>;
}

.container{
	color:<? echo $color2; ?>;
	
}

.container h2{
	background: <? echo $color2; ?>;
	color: <? echo $color1; ?>;
	 -webkit-margin-before:0px; 
-webkit-margin-after:0px;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
padding:15px;
}

.container a{

color: <? echo $colorx; ?>;

}

.container hr{
border-color: <? echo $color1; ?>;
}
.container i{
	color:<? echo $color1; ?>;
}

.containernosotros{
background: <? echo $color1; ?>;
color: <? echo $color3; ?>;


}

.containernosotros h2{
background:<? echo $color2; ?>;
color: <? echo $color1; ?>;
/* -webkit-margin-before:0px; */
-webkit-margin-after:0px;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
padding:15px;
margin-left:10px;
}

.containernosotros p{

padding:15px;

}

.containercalidad{
background: <? echo $color2; ?>;
color: <? echo $color1; ?>;
}
.containercalidad h2{
color: <? echo $color1; ?>;
}

.containercalidad a{
color: <? echo $color2; ?>;
}

.call-to-action{


}

.call-to-action h2 {
    margin: 0 auto 20px;
    color: <? echo $color2; ?>;
    background: <? echo $color1; ?>;
    text-transform:uppercase;
    
}

.call-to-action p{
	 color: <? echo $color1; ?>;

}

.call-to-action .btn{
	color: <? echo $color2; ?>;
    background: <? echo $color1; ?>;
}
.call-to-action .btn-xl{
	color: <? echo $color2; ?>;
    background: <? echo $color1; ?>;

}
.call-to-action .btn-default{
	color: <? echo $color2; ?>;
    background: <? echo $color1; ?>;

}


.text-muted{
color: <? echo $color4; ?>;
}
.text-primary {
    color: <? echo $color1; ?>;
}

.service-box {
    margin: 50px auto 0;
    max-width: 400px;
}
.sevice-box i{
color: <? echo $color1; ?>;
} 
.service-box h3{
color: <? echo $color1; ?>;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-weight:700;
}

@media(min-width:992px) {
    .service-box {
        margin: 20px auto 0;
    }
}

.service-box p {
    margin-bottom: 0;
}


.formulario {
    background-color: <? echo $color1; ?>;
       position: relative;
        margin-top:215px;
        height:800px;
        color:<? echo $color2; ?>;
}

legend{

color:<? echo $color2; ?>;
border-bottom:1px solid <? echo $color2; ?>;

}
fieldset{
border:1px solid <? echo $color2; ?>;

}

.btn-primary2 {
    border-color: <? echo $color2; ?>;
    color: <? echo $color1; ?>;
    background-color: <? echo $color2; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.text-faded {
    color: rgba(255,255,255,.7);
}

section {
    padding: 50px 10px 16px 0;
}


.textocalidad{
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
size:16px;
padding: 10px 10px 15px 15px;
	color:<? echo $color1; ?>;
	/* line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); */
	line-height: 1.8;
	/* font-size: calc(2.5vw + .65vh); */
	
}

.btn-default {
    
    color: <? echo $color2; ?>;
    background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color:<? echo $color1; ?>;
    color:<? echo $colorx; ?>;
    background-color:<? echo $color1; ?>;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: <? echo $color1; ?>;
    background-color:<? echo $color1; ?>;
}

.btn-default .badge {
    color: <? echo $color1; ?>;
    background-color: <? echo $color1; ?>;
}

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */


@media screen and (max-width:400px) and (min-width:0px) {
.slideshow-container {
   position: relative;
   margin-top: 200px;
   width: 100%;
   height: 240px; 
   text-align: center;
}
.slideshow-container img{
	width:100%;
	
}
head1 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:242px;
}
head2 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:272px;
}
head3 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:302px;
}


.btn-primary { 
    color: <? echo $color2; ?>;
    background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    position:absolute;
    text-align:center;
    top:380px;
    left: 10px;
	right: 10px;
	margin: auto
}
.bg-primary {
    background-color: <? echo $color1; ?>;
    color: <? echo $color2; ?>;
    position:relative;
    width:100%;
    padding-bottom:70px;
    
}
}
@media screen and (max-width:600px) and (min-width:400px) {
.slideshow-container {
   position: relative;
   margin-top: 222px;
   width: 100%;
   height: 300px; 
   text-align: center;
}
.slideshow-container img{
	width:100%;
	height:100%;
}
head1 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:252px;
}
head2 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:302px;
}
head3 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:352px;
}
.btn-primary { 
    color: <? echo $color2; ?>;
    background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    position:absolute;
    text-align:center;
    top:450px;
    left: 40px;
	right: 40px;
	margin: auto
}
.bg-primary {
    background-color: <? echo $color1; ?>;
    color: <? echo $color2; ?>;
    position:relative;
    width:100%;
    padding-bottom:70px;
    margin-top:-65px;
}
}
@media screen and (max-width:900px) and (min-width:600px) {
.slideshow-container {
   position: relative;
   margin-top: 222px;
   width: 100%;
   height: 500px; 
   text-align: center;
}
.slideshow-container img{
	width:100%;
	height:100%;
}
head1 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:300px;
}
head2 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:360px;
}
head3 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:420px;
}
.btn-primary { 
    color: <? echo $color2; ?>;
    background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    position:absolute;
    text-align:center;
    top:550px;
    left: 140px;
	right: 140px;
	margin: auto;
	font-weight:800;	
	font-size:22px;
}
.bg-primary {
    background-color: <? echo $color1; ?>;
    color: <? echo $color2; ?>;
    position:relative;
    width:100%;
    padding-bottom:70px;
}
}
@media screen and (min-width:901px)  {
.slideshow-container {
   position: relative;
   margin-top: 200px;
   width: 100%;
   height: 1000px; 
   text-align: center;
}
.slideshow-container img{
	width:100%;
	height:100%;
}
head1 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:900;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:290px;
    padding-top:10px;
}
head2 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:407px;
    padding-top:10px;
}
head3 {
    float:none;
    position:absolute;
    text-align:center;
	color: <? echo $color1; ?>;
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	text-shadow: -2px 0 <? echo $color2; ?>, 0 2px <? echo $color2; ?>, 2px 0 <? echo $color2; ?>, 0 -2px <? echo $color2; ?>;
	font-weight:800;	
    left: 40px;
    right: 40px;
    margin: auto;
    top:532px;
    padding-top:10px;
}
.btn-primary { 
    color: <? echo $color2; ?>;
    background-color: <? echo $color1; ?>;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    position:absolute;
    text-align:center;
    top:722px;
    left: 340px;
	right: 340px;
	margin: auto;
	padding-top:30px;
	font-weight:800;
	font-size:32px;

}
.bg-primary {
    background-color: <? echo $color1; ?>;
    color: <? echo $color2; ?>;
    position:relative;
    width:100%;
    padding-bottom:70px;
}
}


.contact a{
color:<? echo $color2; ?>;
}
.contact a:visited{
color:<? echo $color2; ?>;
}
.contact a:hover{
color:<? echo $colorx; ?>;
}
.contact a:active{
color:<? echo $colorx; ?>;
}

@media screen and (max-width:900px) and (min-width:600px), (min-width:1100px){

}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: #FFBD02;
    color: #FFBD02;
    background-color: #000000;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: #FFBD02;
    background-color: #000000;
}

.btn-primary .badge {
    color: #FFBD02;
    background-color: #000000;
}

.btn {
    border: 0;
    border-radius: 300px;
    text-transform: uppercase;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    font-weight: 700;
}


.btn-xl {
    padding: 15px 30px;
}
/* The dots/bullets/indicators */
.dot {
float:none;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
 
}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.active {
  background-color: transparent;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


aside {
    padding: 50px 0;
}

.no-padding {
    padding: 0;
}


.portfolio-box {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 650px;
}

.portfolio-box .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 0;
    background: rgba(240,95,64,.9);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    padding: 0 15px;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}

@media(min-width:768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px;
    }

    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 22px;
    }
}


.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}


::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

::selection {
    text-shadow: none;
    color: #fff1cc;
    background: #000000;
}

img::selection {
    color: #fff1cc;
    background: 0 0;
}

img::-moz-selection {
    color: #fff1cc;
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #222;
}


.encabezado{
color: <? echo $color1; ?>;
background-color: <? echo $color3; ?>;
margin-top: 0px;

}

.fab-container-whats{
	float:left;
	top:140px;
	left:95px;
	width:30px;
	height:30px;
	z-index:999;
	cursor:pointer;
	position:fixed;
	display:flex;
}
.fab-icon-holder-whats{
	width:30px;
	height:30px;
	border-radius:100%;
	background:#00cc66;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-whats:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-whats i{
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-style:15px;
color:#f7f7f7;
}
.fab-container-tfno{
	float:left;
	top:140px;
	left:295px;
	z-index:999;
	cursor:pointer;
	position:fixed;
	display:flex;
}
.fab-icon-holder-tfno{
	width:30px;
	height:30px;
	border-radius:100%;
	background:#ff9966;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-tfno:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-tfno i{
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-style:15px;
color:#f7f7f7;
}


.fab-container-llamame{
	float:left;
	bottom:160px;
	left:-25px;
	z-index:99999999;
	cursor:pointer;
	position:fixed;
	display:flex;
	
}
.fab-icon-holder-llamame{
	width:50px;
	height:50px;
	border-radius:100%;
	background:#156AB7;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-llamame:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-llamame i{
display:flex;
align-items:center;
justify-content:flex-end;
padding:10px;
height:100%;
font-style:25px;
color:#FFBD02;
}

.fab-container-carrito{
	float:left;
	bottom:15px;
	right:20px;
	z-index:999;
	cursor:pointer;
	position:fixed;
	display:flex;
}
.fab-icon-holder-carrito{
	width:50px;
	height:50px;
	border-radius:100%;
	background:#00cc66;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-carrito:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-carrito i{
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-size:40px;
color:#fff;
}
.fab-container-carrito_c{
	float:left;
	bottom:125px;
	right: 20px;
	z-index:999;
	cursor:pointer;
	position:fixed;
	display:flex;

    
}
.fab-icon-holder-carrito_c{
	width:50px;
	height:50px;
	border-radius:100%;
	background:<? echo $color1; ?>;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-carrito_c:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-carrito_c i{
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-size:30px;
color:<? echo $color2; ?>;
}

.fab-container-carrito_i{
	float:left;
	bottom:70px;
	right:20px;
	z-index:999;
	cursor:pointer;
	position:fixed;
	display:flex;
}
.fab-icon-holder-carrito_i{
	width:50px;
	height:50px;
	border-radius:100%;
	background:<? echo $color2; ?>;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);	
	}	
.fab-icon-holder-carrito_i:hover{
	opacity:0.8;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);	
}
.fab-icon-holder-carrito_i i{
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-size:30px;
color:<? echo $color1; ?>;
}

.datoscatalogo{
padding-right:5px;
padding-left:5px;


background:#185B6C;
color:white;
font-stretch: ultra-condensed;
size:9px;
bottom:0px;
	left:0px;
	height:32px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-0-font-smoothing: antialiased;
}


/* unvisited link */
.datoscatalogo a:link {
  color: white;
  text-decoration: underline;
}

/* visited link */
.datoscatalogo a:visited {
  color: white;
  text-decoration: underline;
}

/* mouse over link */
.datoscatalogo a:hover {
  color: black;
  text-decoration: underline overline;
  text-decoration-style: wavy;
}

/* selected link */
.datoscatalogo a:active {
  color: blue;
}
h1 {
  font-size: 6.9vw;
}

.botones_colores {
  display: inline-block;
  border-radius: 4px;
  background-color: #0AC8FC;
  
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  padding: 2px;
  width: 130px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
  
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


.botones_colores span {
  cursor: pointer;
  display: inline-block;
  position: relative; 
  transition: 0.5s;
}

.botones_colores span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.botones_colores:hover span {
  padding-right: 25px;
}

.botones_colores:hover span:after {
  opacity: 1;
  right: 0;
}
.little{


}

.timeoferta_close{
float:left;
 top:55px;
 left:114px;
 z-index:3001;
 position:fixed;
 display:flex;
 cursor:pointer;
 width:25px;
 height:25px;
 border-radius:100%;
 background:<? echo $color2; ?>;
 color:<? echo $color1; ?>;
 justify-content:center;


 text-align:center;
 

}

.timeoferta_container{
 float:left;
 top:50px;
 left:10px;
 z-index:3000;
 position:fixed;
 display:flex;
 cursor:pointer;
 width:145px;
 height:145px;
 border-radius:100%;
 background:<? echo $color1; ?>;
 color:<? echo $color2; ?>;
 justify-content:center;
 align-items:center;
 padding:10px 12px;
 text-align:center;
 border-style:solid;
 border-color: <? echo $color2; ?>;
 }
 
 .timeoferta_span{
 box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.12);
 border-radius: 100%;
 opacity: 0.7;
 }
 
 
.counterdown{
 float:left;
 top:196px;
 left:20px;
 z-index:3002;
 position:fixed;
 display:flex;
 cursor:pointer;

 color:<? echo $color2; ?>;
 justify-content:center;
 align-items:center;
 padding:10px 12px;
 text-align:center;
 
 display:grid;
 font-size: calc(0.50vw + .9vh); 
 
 }

  
 .timeoferta_holder{
 width:2px;
 height:2px;
 border-radius:100%;
 background:<? echo $color1; ?>;
 color:<? echo $color2; ?>;
 top:206px;
 left:20px;
 } 
 
 
 .dominio1{
 float:left;
 top:192px;
 left:10px;
 z-index:3000;
 position:fixed;
 display:flex;
 cursor:pointer;
 background:rgba(235,235,235,0.7);
 color:<? echo $color2; ?>;
 justify-content:center;
 align-items:center;
 padding:10px 12px;
 text-align:center;
 border-style:solid;
 border-color: <? echo $color2; ?>;
 display:grid;
 font-size: calc(0.50vw + .9vh); 
 border-radius:3%; 
 }
 
 .caracter_invalido(){
 
 
 }
 
.fab-container-llamame-cuadro-chat{
	float:left;
	bottom:-6px;
	left:15px;
	z-index:9999;
	cursor:pointer;
	position:fixed;
	display:flex;
	font-style:normal;
	font-size: 10px; 
	
	
}
.fab-icon-holder-llamame-cuadro-chat{
	width:200px;
	height:330px;
	border-radius:2%;
	background-image:linear-gradient(<? echo $color1; ?>,white);
	font-style:normal;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	opacity:0.7;	
	}	
.fab-icon-holder-llamame-cuadro-chat:hover{
	opacity:1;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);
	font-style:normal;	
}
.fab-icon-holder-llamame-cuadro-chat i{
display:flex;
align-items:center;
justify-content:center;
padding:10px;
<!-- height:100%; -->

color:<? echo $color2; ?>;
font-style:normal;
}
.fab-icon-holder-llamame-cuadro-chat textarea{
color:#000000;
border-radius:2%;
border-color:<? echo $color1; ?>;
font-style:normal;
resize:none;
font-weight:300;

}
.fab-icon-holder-llamame-cuadro-chat-textarea{
color:#000000;
border-radius:2%;
border-color:<? echo $color1; ?>;
background:#ffffff;
font-style:normal;
resize:none;
font-weight:300;
margin:0px 0px 1px 0px;
width:180px;
	height:222px;
}

.fab-icon-holder-llamame-cuadro-chat input{
color:#000000;
width:100%;
font-style:normal;
font-weight:300;
border: 1px solid <? echo $color1; ?>;
border-radius:2%;
box-sizing:border-box;
padding:5px 1px;
margin:3px 0px 1px 0px;

}
.fab-icon-holder-llamame-cuadro-chat input[type=submit]{
color:<? echo $color2; ?>;
background:<? echo $color1; ?>;
width:100%;
font-weight600;
font-style:normal;
border-radius:4%;
border-color:<? echo $color2; ?>;
<!-- text-shadow: 1px 1px 2px black, 0 0 25px <? echo $color1; ?>, 0 0 5px black;  -->
}
.fab-icon-holder-llamame-cuadro-chat-powered{
color:<? echo $color2; ?>;
font-style:normal;
font-weight:300;
font-size: 9px; 

<!-- line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21))); -->
	 
}

.fab-icon-holder-llamame-cuadro-chat-close{
color:#000000;

border-color:<? echo $color1; ?>;
background:#ffffff;
font-style:normal;
resize:none;
font-weight:300;
margin:3px 0px 1px 100px;
width:25px;
	height:25px;

 border-radius:100%;
 background:<? echo $color2; ?>;
 color:<? echo $color1; ?>;
 justify-content:center;
 text-align:center;
	 
}
#table-wrapper{
position:relative;
}
#table-scroll{
height:182px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table{
width:100%;
}
#fotochat{
border-bottom-color:rgba(0,0,0,0.9);
border-bottom-style:solid;
border-bottom-width:thin;
border-right-color:rgba(0,0,0,0.9);
border-right-style:solid;
border-right-width:thin;
border-left-color:<? echo $color1; ?>;
border-left-style:solid;
border-left-width:thin;
border-top-color:<? echo $color1; ?>;
border-top-style:solid;
border-top-width:thin;
border-radius:100%;
width:75px;
height:80px;
float:left;
	bottom:256px;
	left:4px;
	z-index:10000;
	cursor:pointer;
	position:fixed;
	display:flex;
	box-shadow: 7px 1px 16px rgba(0,0,0,0.9);
}
.rectangle{
background-color: rgba(255,255,255,0.5);
height: 100%;
}
.fixpoint{
	
	top:92px;
	
	z-index:9999;
	cursor:pointer;
	position:fixed;
	display:flex;
	font-style:normal;
	font-size: 12px; 
	
	color:<? echo $color2; ?>;
	left:10%;
	background:<? echo $color1; ?>;
	border-radius:100%;
	padding: 120px 50px;
	opacity: 0.8;
	display:grid;
}
.fixpoint i{

box-shadow: 0 100px 100px rgba(0,0,0,0.1);
margin:1%;
padding:140px;
background:transparent;


}