@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/*
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
*/
/*VARAIBLES ESENCIALES PARA LA PAGINA WEB ALTER .COM.MX*/
:root{
  --color-fondo-pagina: #7ab1b1; /* #9fa8ac; */
  --color-fondo-menu: #023859; /* #9fa8ac; */
  --color-txt: #bd2020; /*#3a405f;*/
  --color-txt2: #ff8000;
  --color-txt-enfasis:#29b881;
  --color-enlace: #fff;
  --color-enlace2: #31d1c9;
  --color-txt-enlace-hover:#0f12b8;
  --color-btn-fondo: #29aba8;
  --color-btn-fondo2: #078b89;
  --color-btn-intermedio: #51cecc;
  --color-btn-fondo2-hover: #0c728b;
  --color-btn-fondo2-active:hsl(167, 80%, 43%);
  --color-btn-borde:#0c7ff3;
  --tamanio-titulo: 42px;
  --tamanio-subtitulo: 32px;
  --tamanio-subtitulo2: 24px;
  --tamanio-normal: 17px;
  --color-borde-izq:#f0e5e5;
  --tipo-fuente: 'Roboto','sans-serif','Raleway','Dancing Script';
}

@font-face {
  font-family:'Roboto','sans-serif';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
  padding: 0;
  margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	/*font-family: 'Raleway', 'sans-serif';*/
	font-family:'Roboto','sans-serif','Raleway','Dancing Script';/* 'Roboto', 'sans-serif';*/
  background: var(--color-fondo-pagina);
	/*background:#000;*/
	/*background-image: url(../img/fondoscreen/fonoO2.png);*/
	background-repeat: repeat;
	display: flex;
	align-items: center;
	justify-content: center;
  /***  PARA EVITAR QUE EL USUARIO SELECIONE TEXTO  ***/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-top: 100px;
  /*****/
}

.contenedor{
  width: 100%;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
 font-size:17px;
 color:var(--color-txt);
 margin:0 auto;
 overflow: hidden;
 box-sizing: border-box;
}

.img_wrap0{
  width:100%;
  height: 450px;
  display: flex;
  align-items:center;
  background:linear-gradient(to right,rgb(0 0 0 /.35),rgb(0 0 0 /.35)), url(../img/img0.jpg);
  background-size: cover;
  background-position: center;
}
.txt_wrap0{
  color:#00c3ff;
  text-align: left;
  width: 50%;
}

#cabecera h1  {
  margin: 0;
  line-height: 50px;
  text-align: center;
  /*font-family:'Roboto',cursive; /* 'Dancing Script';*/
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  box-sizing: border-box;
}
#cabecera .titulo_bar img  {
  width: 100px;
}

.video_inicio iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
    max-height: 330px;
    box-shadow: 0 0 0 3px white,
                0 0 0 7px #104480,
                0 5px 60px #D8DBE5;
}
.video_promocion{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 100%;
  max-width: 600px;
  height: auto;
  /*max-height: 330px;*/
  box-shadow: 0 0 0 3px white,
              0 0 0 7px #104480,
              0 5px 60px #D8DBE5;
}
/*.non-selectable {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}*/

.principal {
   width: 100%;
   max-width: 1200px;
   margin: 2px auto;
   padding: 6px;
   text-align: center;
   font-family:'Roboto','sans-serif','Raleway','Dancing Script';
   font-size:17px;
   color:var(--color-txt);
   box-sizing: border-box;
   /***  PARA EVITAR QUE EL USUARIO SELECIONE TEXTO  ***/
/*   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   /*****/

}
.principal ol{
  width: 100%;
  max-width: 350px;
  margin-left: 50px;
  font-family: 'waltograph42';
  font-size:17px;
}
.principal ol li{
  margin-left: 15px;
  text-align: left;
  font-size: 24px;
}
.principal ol li:hover{
  font-size: 30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 6px;
  background-color: rgb(10, 19, 93);
}

.img__principal{
  width: calc(95%-60px);
  max-width: 600px;
  /*height: auto;*/
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 3px white,
              0 0 0 7px #104480,
              0 9px 60px #f8f8f8;
}
.principal p{
  clear: both;
  margin-top: 5px;
  margin-bottom: 10px;
}
.cinta-img{
  width: 90%;
  margin: 0 auto;
  margin-top: 2px;
  padding: 6px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}
.cinta-img img{
  width: 100%;
  max-width: 130px;
  padding: 2px;
}

.cinta-img ul {
	list-style:none;
}

.cinta-img ul li {
	display:inline-block;
	position: absolute;
}

.cinta-img ul li a img:hover {
  width: 150px;
  padding: 3px;
	background:#ff8000;
}

/****/
.btn-contacto{
  text-decoration: none;
  color: var(--color-txt);
  width:200px;
  height:30px;
  padding: 3px;
  margin: 5px;  
  text-align: center;
  cursor:pointer;
  background:var(--color-btn-fondo);/*#c8e8cc;*/
  border:1px solid #35b8b3;/* var(--color-enlace);*/
  border-radius: 8px;
}
.btn-contacto:hover{
  border:2px solid #86c1bc ;/*#35b8b3;/* var(--color-enlace);*/
}

/**** Texto con animación movimineto ****/
.txt_banner{
  width: 100%;
  height: auto;
  background-color: rgba(12, 12, 11, 0.35);
  animation-delay: 1s;
  /*animation: entrada_desde_der 0.8s ease;*/
  border-radius: 20px;
  padding: 10px;
}

.txt_aedi{ animation: entrada_desde_izq 0.8s ease;}
.txt_aedd{ animation: entrada_desde_der 0.8s ease;}
.txt_aeda{ animation: entrada_desde_arriba 0.8s ease;}
.txt_aedb{ animation: entrada_desde_abajo 0.8s ease;}
.delays2{ animation-delay: 0.3s; animation-duration: 1.3s;}
.delays3{  animation-delay: 0.5s;}

@keyframes entrada_desde_izq{
  from{transform: translateX(-200%);}
  to{transform: translateX(0);}
}
@keyframes entrada_desde_der{
  from{transform: translateX(200%);}
  to{transform: translateX(0);}
}
@keyframes entrada_desde_arriba{
  from{transform: translateY(-200%);}
  to{transform: translateY(0);}
}
@keyframes entrada_desde_abajo{
  from{transform: translateY(200%);}
  to{transform: translateY(0);}
}

.txt_seccion_animado{
  /*display: block;*/
  width: 100%;
  height: 80px; 
  /*border: 3px solid #ff8000;*/
}
h1 > span{
  position: relative;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  top: 20px;
  /*color: white;*/
  color: var(--color-txt);
  display: inline-block;
  /*font-size: 2rem;*/
  text-shadow: 0 1px 0 #b7b7b7,
  0 2px 0 #b7b7b7,
  0 3px 0 #b7b7b7,
  0 4px 0 #b7b7b7,
  0 5px 0 #b7b7b7,
 /* 0 6px 0 #b7b7b7,
  0 7px 0 #b7b7b7,
  0 8px 0 #b7b7b7,
  0 9px 0 #b7b7b7,*/
  0 10px 10px rgba(0,0,0,0.5);
  /*border: 2px solid #d46204;*/
  animation: bounce 3.2s ease 3 alternate; /* infinite*/
}
h1 > span:nth-child(1){animation-delay: 0.1s;} 
h1 > span:nth-child(2){animation-delay: 0.2s;}
h1 > span:nth-child(3){animation-delay: 0.3s;}
h1 > span:nth-child(4){animation-delay: 0.4s;}
h1 > span:nth-child(5){animation-delay: 0.5s;}
h1 > span:nth-child(6){animation-delay: 0.6s;}
h1 > span:nth-child(7){animation-delay: 0.7s;}
h1 > span:nth-child(8){animation-delay: 0.8s;} 
h1 > span:nth-child(9){animation-delay: 0.9s;}
h1 > span:nth-child(10){animation-delay: 1.0s;}
h1 > span:nth-child(11){animation-delay: 1.1s;}
h1 > span:nth-child(12){animation-delay: 1.2s;}
h1 > span:nth-child(13){animation-delay: 1.3s;}
h1 > span:nth-child(14){animation-delay: 1.4s;}
h1 > span:nth-child(15){animation-delay: 1.5s;}
@keyframes bounce {
  100%{
    top: -20px;
    text-shadow: 0 1px 0 #ccc,
  0 2px 0 #ccc,
  0 3px 0 #ccc,
  0 4px 0 #ccc,
  0 5px 0 #ccc,
 /* 0 6px 0 #ccc,
  0 7px 0 #ccc,
  0 8px 0 #ccc,
  0 9px 0 #ccc,*/
  0 60px 30px rgba(0,0,0,0.3);
  }
}

h2.txt_ola_1r{font-size: 1rem;}
h2.txt_ola{font-size: 2rem;}
h2.txt_ola span {
  display:inline-block;
  animation:flotante .8s ease-in-out infinite;
}

h2.txt_ola:hover span {animation:rebote .6s ease infinite;}

h2.txt_ola span:nth-child(2){ animation-delay:.05s; }
h2.txt_ola span:nth-child(3){ animation-delay:.1s; }
h2.txt_ola span:nth-child(4){ animation-delay:.15s; }
h2.txt_ola span:nth-child(5){ animation-delay:.2s; }
h2.txt_ola span:nth-child(6){ animation-delay:.25s; }
h2.txt_ola span:nth-child(7){ animation-delay:.3s; }
h2.txt_ola span:nth-child(8){ animation-delay:.35s; }
h2.txt_ola span:nth-child(9){ animation-delay:.4s; }
h2.txt_ola span:nth-child(10){ animation-delay:.45s; }

@keyframes rebote {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

@keyframes flotante {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}

/**** Fin Texto con animación movimineto *********/

/**** Texto con fondo animado ****/
.txt-animado{
  /*font-size: 5rem;*/
  background: linear-gradient(
    to right,
    #004aad 15%,
    #38b6ff 30%,
    #fff 37.5%,
    #fff 62.5%,
    #38b6ff 70%,
    #004aad 85%
  );
  background-size: 200%;
  color: transparent;
  background-clip: text;
  animation: shine 6s linear infinite;
}

.txt-animado2{
  /*font-size: 5rem;*/
  background: linear-gradient(
    to right,
    #004aad 15%,
    #38b6ff 30%,
    #77c2ee 37.5%,
    #fff 45%,
    #fff 55%,
    #77c2ee 62.5%,
    #38b6ff 70%,
    #004aad 85%
  );
  background-size: 200%;
  color: transparent;
  background-clip: text;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  to {background-position: 200% center;}
}

/*******/
.myButton {
  color: var(--color-txt);
  /*font-size: 13px;*/
  width:200px;
  height: 2em;
  line-height: 16px;
  padding: 6px;
  margin: 5px; 
  border-radius: 11px;
 /* font-family: Georgia, serif; 
  font-weight: normal; */
  text-decoration: none; 
  font-style: normal; 
  font-variant: normal; 
  text-transform: none; 
  background-image: linear-gradient(to right,
      var(--color-btn-fondo2) 0%,
      var(--color-btn-intermedio) 50%,
      var(--color-btn-fondo2) 100%);
     /*rgb(28, 110, 164) 0%,
     rgb(35, 136, 203) 50%, 
     rgb(20, 78, 117) 100%); */
  box-shadow: rgba(3, 32, 6, 0.79) 10px 13px 12px 1px; 
  border: 2px solid rgba(28, 110, 164, 0.97); 
  display: inline-block;
  transition: background-image ease-in 3s;
}
.myButton:hover {
/*  background:var( --color-btn-fondo2-hover); /*#1C6EA4;*/
background-image: linear-gradient(to right,
      var(--color-btn-intermedio) 0%, 
      var(--color-btn-fondo2) 50%,
      var(--color-btn-intermedio) 100%);
      transition-duration: 2s;
}
.myButton:active {background:var( --color-btn-fondo2-active); /*#144E75;*/}
/*******/
.btn_conacto {
  text-decoration: none;
  color: var(--color-txt);
  width:200px;
  height:50px;
  padding: 10px;
  margin: 20px;
  text-align: center;
  cursor:pointer;
  background:var(--color-btn-fondo);/*#c8e8cc;*/
  border:1px solid #35b8b3;/* var(--color-enlace);*/
  border-radius: 8px;
}
.btn_conacto:hover{
border: 2px solid var(--color-txt-enlace-hover);
color: var(--color-txt-enlace-hover);
}


.btn_pie_txt {
  text-decoration: none;
  color: var(--color-txt);
  width:200px;
  height:50px;
  padding: 5px;
  margin: 5px;
  text-align: left;
  cursor:pointer;

  border-radius: 8px;
}
.btn_pie_txt:hover{
  width:200px;
  border: 2px solid var(--color-txt-enlace-hover);
  color: var(--color-txt-enlace-hover);
  border:1px solid var(--color-enlace);
  background:var(--color-btn-fondo);
}

/****  Columnas 4 Iguales***/
/*****************  GRID  **************************/
.contenedor_columnas4 {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 20px 0;
  /*** Flexbox ***/
 /* display: flex;	
  gap: 20px;*/

  /**** Grid ****/
  /*grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
  gap: 10px;*/
  
}

.titulo4 {
	font-size: 24px;
	padding: 20px 0;
}

.sector1a4{
  width: 100%;
  display: grid;
  grid-template:"img_se historia_se" minmax(300px,auto) / 1fr 3fr ;
  gap: 10px; 
}
.img_se02{
  grid-area: "img_se";
  background-image: url(../img/mujer_casco.webp);
  width: auto;
  /*background:linear-gradient(to right,rgb(0 0 0 /.25),rgb(0 0 0 /.25)), url(../img/mujer_casco.webp); */
  background-repeat : no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  border-radius: 20px;
  background-size: cover;
  /*border: 2px solid blue;*/
}
.txt_se{
  grid-area: "historia_se";
}

.fondo_img_historia{  
  background:linear-gradient(to right,rgb(0 0 0 /.6),rgb(0 0 0 /.6)), url(../img/historia01.jpg);
  border-radius: 20px;
}

.contenedor-servicios {
  
  /*** Flexbox ***/
	/*width: 70%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;*/

  /**** Grid ****/
  display: grid;
  /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
@media screen and (max-width:886px){
  .contenedor-servicios{
    //grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: 1fr 1fr;    
  }
  .sector1a4{    
    grid-template:"img_se" 220px
                  "historia_se" auto / 
                  100%;    
  }
  .img_se02{
    background-image: url(../img/img_se03.jpg);
    background-position-x: 0;
    background-position-y: 0; 
    /*background-size:contain;*/
    border-radius: 20px;
  }  
}
 

@media screen and (max-width:600px){
  .contenedor-servicios{
    //grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: 1fr 1fr;    
  }
  h1 > span{
    font-size: 1.5rem;
  }
}
@media screen and (max-width:500px){
  .contenedor-servicios{     
    grid-template-columns: 1fr;    
  }  
  .sector1a4{    
    grid-template:"img_se" 150px
                  "historia_se" auto / 
                  100%;    
  }
}

.card {
	border-radius: 10px;
	min-height: 500px;
	/*font-weight: bold;*/
	padding: 20px;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
  box-shadow: 3px 5px 2px 2px rgba(46, 45, 45, 0.4);
  border-radius: 10px;

  /*** Flexbox ***/
  /*width: calc(33% - 40px);*/
}

.card .textos {
	height: 100%;
    /**  Flexbox **/
  display: flex;
  flex-direction: column;
  justify-content: space-between;

   /** GRID **/
   /*display: grid;
   grid-template-rows: 1fr 1fr 1fr;*/
	
}

.banner {
	border-radius: 10px;
	text-align: center;
	padding: 20px;
	background-size: cover;
	background-position: center center;
  /**  Flexbox**/
  /*width: 30%;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between; */

  /** GRID **/
  /*display: flex;
  grid-template-rows: auto auto auto;
  align-items: center;*/
}

.banner ul {
	list-style: none;
}

.banner ul li {
	margin: 15px;
	font-weight: bold;
}

.banner .boton {
	background: #FFD600;
	display: block;
	width: 100%;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	padding: 10px;
	border: none;
	border-radius: 100px;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
}

.img-logo{
 /* width: 100%;
  height: 100px;
  background-size:contain;*/
  background:url("../logo/Logo_se.png")  no-repeat local 50% 50%;
}
/*
@media screen and (max-width: 1100px) {
  .contenedor_columnas4{grid-template-columns: 1fr 1fr 1fr;}
  .contenedor-servicios{grid-template-columns: repeat(3, 1fr);}
  .card{}  
}
@media screen and (max-width: 900px) {
  .contenedor_columnas4{grid-template-columns: 1fr 1fr 1fr;}
  .contenedor-servicios{grid-template-columns: repeat(3, 1fr);}
  .contenedor_columnas4 #cnr_oil{grid-column: 1 / 4;}
  .card{}
  .btn_conacto{width: 160px;}
}

@media screen and (max-width: 700px) {  
  .contenedor_columnas4{}
  .contenedor-servicios{grid-template-columns: repeat(2, 1fr)}
  .card{}
	
}

@media screen and (max-width: 600px) {
  .contenedor_columnas4{}
  .contenedor-servicios{grid-template-columns: 1fr 1fr}
  .card{}
}
/*******************************************/


.columnas4{
  display: flex;
  flex-flow: row wrap;
/*  flex-direction: row;  */
  justify-content: center;
  /*border: 2px solid #24ff36;*/
  padding: 3px;
  width: 100%;
  margin: 0 auto;
}
.columnas4 .columna {
  width: 23%;
  min-width: 250px;
  height: 450px;
  /*border: 1px solid #ff8000;*/
  flex: 1 1 1 auto;
  padding: 10px;
  margin: 5px;
  /**Para el fondo**/
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
/* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 3px 5px 2px 2px rgba(46, 45, 45, 0.4);
  border-radius: 10px;
}

/**Fondos para las Columnas de forma individual**/
.fondo_sustentabilidad{
  background:linear-gradient(to right,rgb(0 0 0 /.35),rgb(0 0 0 /.35)), url(../img/img0.jpg);
  background-size: cover;
}
.fondo_econrgy{
  background:linear-gradient(to right,rgb(0 0 0 /.35),rgb(0 0 0 /.35)), url(../img/econrgy.jpg);
  background-size: cover;
}
.fondo_greenplus{
  background:linear-gradient(to right,rgb(0 0 0 /.35),rgb(0 0 0 /.35)), url(../img/fondo_greenplus.png);
  background-size: cover;
}
.fondo_cnroil{
  background:linear-gradient(to right,rgb(0 0 0 /.35),rgb(0 0 0 /.35)), url(../img/cnroil.png);
  background-size: cover;
}

.fondo_sustentabilidad:hover{ background:linear-gradient(to right,rgb(0 0 0 /.6),rgb(0 0 0 /.6)), url(../img/img0.jpg);background-size: cover;}
.fondo_econrgy:hover{background:linear-gradient(to right,rgb(0 0 0 /.6),rgb(0 0 0 /.6)), url(../img/econrgy.jpg);background-size: cover;}
.fondo_greenplus:hover{background:linear-gradient(to right,rgb(0 0 0 /.6),rgb(0 0 0 /.6)), url(../img/fondo_greenplus.png);background-size: cover;}
.fondo_cnroil:hover{background:linear-gradient(to right,rgb(0 0 0 /.6),rgb(0 0 0 /.6)), url(../img/cnroil.png);background-size: cover;}

.espacios_p{
  margin: 10px;
  text-align: left;
}
.btn_card{
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: #1ebd73;
}

/*
.btn_conacto a:link {
    text-decoration: none;
  }

.btn_conacto a:visited {
    text-decoration: none;
  }


/****/

/*  codigo para hacer columnas de distinto ancho*/
.contenedor_descripcion{
  width: 90%;
  margin: auto;
  clear: both;
  align-items: center;
}
.texto1racolumna{
  padding: 25px;
  float: left;
  width: 50%;
  height: auto;
  justify-content: center;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  box-sizing: border-box;
}
.texto1racolumna ul li{
  text-align: left;
}

.texto2dacolumna{
  padding: 25px;
  float: right;
  width: 50%;
  height: auto;
justify-content: center;
font-family:'Roboto','sans-serif','Raleway','Dancing Script';
font-size:17px;
color: #fff;
  box-sizing: border-box;
}
.texto2dacolumna ul li{
  text-align: left;
}
#contenedor_tabla{
  width: 90%;
  margin: auto;
}
#contenedor_tabla p{
  padding: 10px;
}
.contenedortabla3c{
  width: 100%;
  max-width: 1200px;
  padding: 5px;
  margin: 5px;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  flex-direction: row;
}
.columna3{
  /*width: 30%;*/
  color: #fff;
  padding: 10px;
  margin: 0px;
  text-align: center;
}

.tm_size30{font-size: 30px;}
.tm_size25{font-size: 25px;}
.tm_ancho_pantalla_80{width: 80%;}

.txt_fz12{
  padding: 5px;
  margin: 0px;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size: 10px;
  /*font-size:var(--tamanio-normal);*/
  color:var(--color-txt);
  /*font-weight: bold;*/
}
.txt_fz10{
  font-size: 12px;
  padding: 5px;
  background-color:var(--color-fondo-menu);
}
.texto_central{
  width: 100%;
  color:var(--color-txt);
 /* align-items: auto;*/
  align:auto;
  padding: 2px;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items:center;
  /*align-items: center;*/
  /*flex-direction: column;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  /*border: 1 solid #ff8000;*/
  box-sizing: border-box;
}
.txt_columnas{
  width: 100%;
  margin: 15px;
  padding: 15px;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  flex-direction: column;
  /*border: 1px solid #77ff88;*/
  box-sizing: border-box;
}
.txt_justificado{
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  text-align: justify;
}
.txt_color_resaltado{  
  font-size:20px;
  color:var(--color-txt);  
  background-color: var(--color-btn-fondo);
  border-radius: 8px;  
}
.txt_lista{
  /*width: 33%;*/
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color: #fff;
  text-align: left;
  flex-grow: 1;
  padding: 5px 10px;
  margin:0 10px;
/*  border: 1px solid #258400; /*color verde*/
  box-sizing: border-box;
  /*font-size: 18px;*/
}

.sin_viñeta ul {
/*  text-decoration: none;*/
  list-style: none;
}
.espacioIzq{
  margin: 0 10PX 5px 20px;
}
.contenido_centrado{
  width: 100%;
  color:var(--color-txt);
  align:auto;
  padding: 0px;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
  /*justify-content: space-between;*/
  /*align-items: flex-start;*/
  /*align-items: center;*/
  /*flex-direction: column;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  /*border: 1 solid #ff8000;/* borde naranja*/
  box-sizing: border-box;
}
.txt_alineacionCentral{
  text-align: center;
}
.txt_alineacionDerecha{
  text-align: right;
}
.txt_alineacionIzq{
  text-align: left;
  margin-left: 20px;
}
.txt_alineacionJustificado{
text-align: justify;
}
.columna50{
  width:600px;/* 50%;*/
  padding: 2px 15px;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  margin: 0px;
  /*text-align: center;*/
  box-sizing: border-box;
/*  border: 1px solid #24ff36; /* color verde en borde*/
}
.columna50_en-linea{
  width:400px;
  display: flex;
  flex-direction: row;
  border: 2px solid #79fb00;
}
.img_se{
  background: url("../img/logo/logo_se02.png") no-repeat scroll 50% 50%;  
  background-size:  contain; /*300px auto;*/
  width: 300px;
  height: 80px; 
}
.img_econ{
  background: url("../img/logo/eco_nrgy.png") no-repeat scroll 50% 50%;
  background-size:  contain; /* 300px 100px */
  width: 300px;
  height: 80px;
  /*border: 2px solid salmon;*/
}
.img_greenplus{
  background: url("../img/logo/greenplus02.svg") no-repeat scroll 50% 50%;  
  background-size:  contain;
  width: 300px;
  height: 80px; 
}
.img_cnr{
  background: url("../img/logo/cnr_oil02.png") no-repeat scroll 50% 50%;  
  background-size:  contain; /*300px auto;*/
  width: 300px;
  height: 80px; 
}
.columna600{
  width: 600px;
  padding: 2px 15px;
  color: #fff;
  margin: 0px;
  /*text-align: center;*/
  box-sizing: border-box;
  border: 1px solid #24ff36;
}
.bordederecho{
  border-right: 1px solid #ff8000;
}
.borde-izq{
  margin-left: 7px;
  border-left: 5px solid var(--color-borde-izq);
}
.ancho150{
  width: 150px;
}
.tabla00{
  margin: auto;
  border-collapse: collapse;
}
.tabla00 td, .tabla00 th{
  border-collapse: collapse;
  font-size: 18px;
  border:none;
}

.img_promocion{
  width: auto;
  max-width: 350px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 0 3px white,
              0 0 0 7px #104480,
              0 9px 60px #f8f8f8;
}
/* Animacion para los valores*/
.efectodeslizante_v{
  display: flex;
  width: 400px;
  height: 40px;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size: 32px;
  color:var(--color-txt);
  line-height: 40px;
  /*position: absolute;
  /*top: 0;
  right: 0;
  left: 0;*/
  margin: auto;
  /*border: 1px solid #ff8000;*/
  overflow: hidden;  
}
.efectodeslizante_v ul{
  list-style: none;
  padding-left: 5px;
  animation: cambiar 16s infinite alternate;
}
@keyframes cambiar {
  /************************
  * Se calcula el porcentaje de acuerdo al numero de elementos
  * 5 elementos con 4% de transicion seria: 
  *  100% / 5 elementos = 20% - 4% = 16%
  *
  * Para 7 elementos con 4% de Transicion seria:
  *  100% / 7 elemntos = 14.2857 =>> 14.5 - 4% = 10.5
  *************************/
   0%{margin-top: 0;}
  16.8%{margin-top: 0;}

  20.8%{margin-top: -40px;}
  37.6%{margin-top: -40px;}

  41.6%{margin-top: -80px;}
  58.4%{margin-top: -80px;}

  62.4%{margin-top: -120px;}
  79.2%{margin-top: -120px;}

  83.2%{margin-top: -160px;}
  100%{margin-top: -160px;}
/*
  62.5%{margin-top: -200px;}
  80%{margin-top: -200px;}

  %{margin-top: -240px;}
  93%{margin-top: -240px;}

  96%{margin-top: -280px;}
  100%{margin-top: -280px;}*/
}
/* fin de animacion de Valores  */

.linea-division {
  clear: both;
  margin-top: 5px;
  margin-bottom: 7px;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

#img-izd {
  float: left;
  width: 25%;
  height: auto;
/*  padding: 5px;*/
  padding-top: 10px;
}
#img-izd img {
  width: 100%;
  height: auto;
}
#img-dcha {
  float:right;
  width: 25%;
  height: auto;
  padding: 0 15px;
  margin: 2px solid #ff8000;
  /*  padding-top: 10px;*/
}
#img-dcha img {
  width:100%;
  height: auto;
  padding-bottom: 10px;
}
.texto-izqT{
  padding: 2px;
  width: 100%;
  height: auto;
text-align: left;
font-family:'Roboto','sans-serif','Raleway','Dancing Script';
font-size:17px;
color:var(--color-txt);
font-size-adjust: auto;
  box-sizing: border-box;
}
.texto-izqT p{
  text-align: center;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size: 32px;
  color:var(--color-txt);
  padding: 10px;
}
.texto-izqT ul li{
  margin-left: 18px;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size: 32px;
  color:var(--color-txt);
  padding: 10px;
}
.texto-izqD{
  padding: 2px;
  width: 100%;
  height: auto;
  text-align: right;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  font-size-adjust: auto;
  box-sizing: border-box;
}
#texto-izd{
  padding: 25px;
  float: left;
  width: 73%;
  height: auto;
justify-content: center;
font-family:'Roboto','sans-serif','Raleway','Dancing Script';
font-size:17px;
color:var(--color-txt);
  box-sizing: border-box;
}
#texto-dcha{
  float:right;
  padding: 20px;
  width: 73%;
  height: auto;
justify-content: center;
font-family:'Roboto','sans-serif','Raleway','Dancing Script';
font-size:17px;
color:var(--color-txt);
  box-sizing: border-box;
}


#pie {
  clear: both;
  width: 95%;
  margin: 20px auto 0 auto;
  padding: 6px;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  border-radius: 40;
  box-sizing: border-box;
  background:var(--color-fondo-menu);
}

#pie p  {
   margin: 0;
   padding: 2px 5px;
   text-align: center;
   font-family:'Roboto','sans-serif','Raleway','Dancing Script';
   font-size:17px;
   color:var(--color-txt);
   /*line-height: 40px;*/
}

#pie a {
    color: #fff;
    text-decoration: none;
}
#pie img{
  height:31px;
  width:150px;
}

#p-nota p {
  margin: 0;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  text-align: center;
  line-height: 10px;
  box-sizing: border-box;
}
.botton__sociales{
  width: 100%;
  padding: 15px;
  height: 50px;
  align-items: center;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  margin-bottom: 15px;
  /*background: #44619d;*/
}
.botton__privacidad{
  clear: both;
  width: 100%;
  margin: 5px 0 5px 0;
  padding: 5px;
  height: 22px;
  align-items: center;
  font-family:'Roboto','sans-serif','Raleway','Dancing Script';
  font-size:17px;
  color:var(--color-txt);
  /*font-size: 18px;
  color:var(--color-txt)*/
  /*background: #023859;*/
  border-radius: 8px;
  cursor:pointer;
 /* border: 1px solid #fff;*/
  font-size-adjust: auto;
  font-weight: bold;
}
.botton__privacidad:hover{
  /*background: #5DADE2;*/
  /*padding: 10px 10px;*/
  border: 2px solid #1ebd73;/* #ff8000;*/
}


.btn_hr {
    width:150px;
    height:35px;
    border:1px solid #fff;
    margin-top:10px;
    cursor:pointer;
    background:#1f3b90;/*#c8e8cc;*/
    border-radius: 8px;
    color: #fff;
    padding: 5px;
    text-decoration: none;
}
.btn_hr:hover{
  border: 2px solid #ff8000;
  background: #021859;
  color: #fff;
}


#pie .icon-facebook{
  padding: 10px 10px;
    border-radius: 8px;
  background: #0866ff;/*#44619d;*/
}
#pie .icon-facebook:hover{
    padding: 10px 15px;
}
#pie .icon-youtube2, .icon-youtube{
  border-radius: 8px;
  padding: 10px 10px;
  background: #ff0033;/*#44619d;*/
}
#pie .icon-youtube2:hover, .icon-youtube:hover{
    padding: 10px 15px;
}
#pie .icon-mail{
  border-radius: 8px;
  padding: 10px 10px;
 /* background: #de9e15;/*#44619d;*/
}
#pie .icon-mail{
  border-radius: 8px;
  padding: 10px 10px;
  
}
.sin_fondo{background: none;}
.fondo_azul-mail{background: #00549F;}
/*
#pie .icon-youtube{
  border-radius: 8px;
  padding: 10px 10px;
  background: #ff0033;/*#44619d;*/
/*}
#pie .icon-youtube:hover{
    padding: 10px 15px;
}*/
#pie .icon-instagram{
  border-radius: 8px;
  padding: 10px 10px;
  background: #f44f3f;
}
#pie .icon-instagram:hover{
  padding: 10px 15px;
}
#pie .icon-whatsapp{
  border-radius: 8px;
  padding: 10px 10px;
  background: #00a884;
}
#pie .icon-whatsapp:hover{
  padding: 10px 15px;
}
#pie .fondo_azul-mail:hover{
  padding: 10px 15px;
}
#pie .icon-linkedin{
  border-radius: 8px;
  padding: 10px 10px;
  background: #0A66C2;
}
#pie .icon-linkedin:hover{
  padding: 10px 15px;
}
#pie .icon-linkedin2{
  border-radius: 8px;
  padding: 10px 10px;
  background: #0A66C2;
}
#pie .icon-linkedin2:hover{
  padding: 10px 15px;
}

.separacionvertical{
  margin-top: 10px;
  /*clear: both;*/
}

.social-linked{
  width: 15px;
  height: 15px;
  color: var(--color-txt2);
}

/*#25D366 - whatsaap*/

.ubicacion-mapaG iframe { /*iframe*/
  width: 95%;
  max-width: 800px;
  margin-top: 10px;
  box-sizing: border-box;
  /*height: auto;
  /*width="800" height="600"*/
}
/*.video_frame iframe{
  border: 2px solid #ff8000;
}*/
.titulo, .titulo2, .titulo3 {
    font-family:'Roboto','sans-serif','Raleway','Dancing Script';
    color:var(--color-txt);
    margin-bottom: 3px;
    box-sizing: border-box;
   }
   .titulo{ font-size: 42px;}
   .titulo2 { font-size: 32px;}
   .titulo3 {
     font-size: 24px;
     text-align: left;
   }

   .notas2 {
     width: 100%;
     text-align: left;
     font-size: 24px;
     font-family:'Roboto','sans-serif','Raleway','Dancing Script';
     margin-bottom: 10px;
     text-decoration-color: #66F;
     box-sizing: border-box;
   }
   .notas2 p {
     padding: 2px;
     margin-bottom: 10px;
   }
/************************************/
/*   CSS para el formulario*/
label {
    display:block;
    margin-top:5px;
    letter-spacing:1px;
    color: #fff;
    /*text-align: left;
    /*border: 1px solid #ff8000;*/
}
label a{
  color: #fff;
}
.formulario {
    display:block;
    margin:0 auto;
    width:100%;
    max-width: 500px;
    font-family:'Roboto','sans-serif','Raleway','Dancing Script'; /*font-family:"Arial";*/
    font-size:17px;
    color:var(--color-txt);
}
form {
    margin:0 auto;
    width:100%;
}

input, textarea {
    width:80%;
    height:27px;
    background:#c8e8cc; /*#*/
    border:2px solid #f6f6f6;
    padding:10px;
    margin-top:5px;
    font-size:15px;
    color:#061041; /*fff*/
}

textarea {
    height:150px;
    max-width: 80%;
    min-width: 80%;
    min-height: 100px;
    max-height: 300px;
}
#aceptoaviso{
  width: 5%; /*25px;*/
}

#submit2 {
    width:150px;
    height:35px;
    border:1px solid #fff;
    margin-top:10px;
    cursor:pointer;
    background:#8F9197;/*#c8e8cc;*/
    border-radius: 8px;
}
#submit2:hover{
  border: 2px solid #ff8000;
  background: #023859;
  color: #fff;
}

.img_pc{
  display: block;
  max-width: 80%;
  margin-top: 20px;
}
.img_movil{
  display: none;
}

/***********FIN DE FORMULARIO******************/

/*** Borde y/o fondo animado ****/

.borde_animado {
 position: relative;
 margin: 50px auto 0;
 width: 70%;
 /*height: 200px;*/
 border-radius:20px ;
 /*background: linear-gradient(90deg, #000, #323232);*/
}

.animate-bg:before, .animate-bg:after {
 content: '';
 position: absolute;
 left: -8px;
 top: -8px;
 border-radius:20px;
 border: 4px solid #ff8000;
 color:000;
 background: linear-gradient(120deg, #79fb00, #8d01a0, #031ba5,#ff004c,
 #e6036d, #fb0094,#ff6600, #04c2e4,#adad02, #00c3ff);
 /*colores originales*/
/*
background: linear-gradient(120deg, #33C2DB, #0D7D90, #2978D9, #1C4475,
  #3D65D5, #2448A9, #072782, #343BD0, #161B6D, #2816C8, #1F167A, #5231D8,
  #1B0B5A);

background: linear-gradient(120deg, #DD3428, #9E3512, #6F3C11,
  #826706, #999D14, #5C7C17, #23660E, #087819, #0C7D46, #0A6C69,
  #105B94, #0F2591, #2D1174, #2D0C4D, #6B1882, #620955, #5F0738,
  #5F0738, #BF0C21);

background: linear-gradient(120deg, #EA1414, #D15336, #C47538,#CA902A,
#E1D425, #E1D425, #2A8518, #0A6A17, #25804E, #2ACCB6, #378CB6, #378CB6,
#378CB6, #378CB6, #378CB6, #951FB0, #951FB0, #951FB0, #951FB0, #C6142D);

background: linear-gradient(120deg, #ffdab9, #fd4545, #607d8b,#ffe4e1,
 #ff5252, #d3d3d3,#fca7e9, #9ccc65,#a6a5f5, #a8f994);

 background: linear-gradient(120deg, #79fb00, #8d01a0, #031ba5,#ff004c,
 #e6036d, #fb0094,#ff6600, #04c2e4,#adad02, #00c3ff);

 */
 background-size: 300%;
 width: calc(100% + 16px);
 height: calc(100% + 16px);
 z-index: -1;
 animation: BGgradient 45s ease infinite;
}

@keyframes BGgradient {
 0% {
   background-position: 0% 200%;
 }
 50% {
   background-position: 200% 0%;
 }
 100% {
   background-position: 0% 330%;
 }
}

.animate-bg:after {
 filter: brightness(1.4);
 filter: drop-shadow(16px 16px 20px rgb(248, 220, 97));
 filter: blur(15px);
}
/***** Fnde borde Animado*****/

/*VENTANA MODAL DESPUES DE CARGAR PAGINA*/

.modal2{
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);

  position: absolute;
  top: 0;
  left: 0;
  animation: modal2k 2s 2s forwards;
  visibility: hidden;
  opacity: 0;
}
.contenido{
  margin: 90px 5% 0 5%;
  padding: 10px;
  width: 80%;
  /*height: 90%;*/
  /*height: auto;*/
  height:100%;
  max-height: 640px;
  background: rgba(17, 79, 152, 0.67);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.espacio_sup{
  padding-top: 20px;
}
.contenido_02{
margin: 10px 50px 10px 50px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}

#cerrar{
  display: none;
}
#cerrar + label {
  position: fixed;
  color: #fff;
  font-size: 35px;
  z-index: 999;
  background: darkred;
  height: 60px;
  width: 60px;
  line-height: 50px;
  border-radius: 50%;
  top: 120px;
  right: 20px;
  cursor: pointer;

  animation: modal2k 2s 2s forwards;
  visibility: hidden;
  opacity: 0;
}

#cerrar:checked + label, #cerrar:checked ~ .modal2{
  display: none;
}

.img_responcive{
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 640px;
  /*object-fit: cover;*/
  border-radius: 10px;
  box-shadow: 0 0 0 3px white,
              0 0 0 7px #104480,
              0 9px 60px #f8f8f8;
}

@keyframes modal2k {
  100%{
    visibility: visible;
    opacity: 1;
  }

}

.animate__animated a {
    text-decoration: none;
    color:#ffffff;
}
/**** FIN DE MODAL ****/

/***** inicio de codiGo para particulas ***/
canvas {
  display: inline-block;
  vertical-align: baseline
}

canvas {
      max-width: 100%
    }

#ucp-animated-background {
    background-color: #333;
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -99
}

  #ucp_template_footer_js{display:none}

  /***FIN DE PARTICULAS  ***/

@media print{
  .contenedor, .pie, .principal, .columna50, .columna3, .botton__sociales, .botton__privacidad,
  .txt_alineacionCentral, .contenido_centrado, .txt_lista, .txt_fz12, .txt_negrita, .tamaniotxt, .columnahora,
  .t-horario-escuelas .tabla_horario th, .t-horario-escuelas .tabla_horario td, .colordia, .fondonegro, .fondoth{
    font-family:'Roboto','sans-serif','Raleway','Dancing Script';
    font-size:17px;
    color:#000;
  }
  article, h1, table tr td{
    color:#000;
  }
}