/* CSS para p01.html  */


/* ----------- fonts locales --------------------------------------------------------------*/
/* hind-300 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/hind-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/hind-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* hind-regular - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/hind-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/hind-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* hind-500 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('fonts/hind-v16-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/hind-v16-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* hind-600 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('fonts/hind-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/hind-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* hind-700 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/hind-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/hind-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
/* ----------- fin de web fonts locales -----------------------------------------*/

@font-face {				/* OJO : solo funcionan en Edge si va con ", con ' solo funcionan en Firefox !!!!  */ 
  font-family: "Luxi";
  aaa-font-style: normal;
  aaa-font-weight: 700;
  src: 
		url("fonts/LuxiMono.ttf") format("truetype");        
/*      url("fonts/ErikaOrmig.ttf") format("truetype");     */   
/*      url("fonts/comic.ttf") format("truetype");          */
 
/*      local("Comic Sans MS"), url("c:/windows/fonts/comic.ttf") format("truetype");         */
/*      local("Segoe UI Semibold"), url("c:/windows/fonts/seguisb.ttf") format("truetype");   */
/*      local("ErikaOrmig"), url("c:/windows/fonts/ErikaOrmig.ttf") format("truetype");    parece que no funciona en Edge   */     
  }
 
@font-face {				/* OJO : solo funcionan en Edge si va con ", con ' solo funcionan en Firefox !!!!  */ 
  font-family: "Ormig";
  aaa-font-style: normal;
  aaa-font-weight: 700;
  src: 
		url("fonts/ErikaOrmig.ttf") format("truetype");     
 
/*      local("Comic Sans MS"), url("c:/windows/fonts/comic.ttf") format("truetype");         */
/*      local("Segoe UI Semibold"), url("c:/windows/fonts/seguisb.ttf") format("truetype");   */
/*      local("ErikaOrmig"), url("c:/windows/fonts/ErikaOrmig.ttf") format("truetype");    parece que no funciona en Edge   */     
  }
    
@font-face {				/* OJO : solo funcionan en Edge si va con ", con ' solo funcionan en Firefox !!!!  */ 
  font-family: "Larabie";
  aaa-font-style: normal;
  aaa-font-weight: 700;
  src: 
        url("fonts/LarabiefontBold.ttf") format("truetype");          
 
/*      local("Comic Sans MS"), url("c:/windows/fonts/comic.ttf") format("truetype");         */
/*      local("Segoe UI Semibold"), url("c:/windows/fonts/seguisb.ttf") format("truetype");   */
/*      local("ErikaOrmig"), url("c:/windows/fonts/ErikaOrmig.ttf") format("truetype");    parece que no funciona en Edge   */     
  } 
  
@font-face {				/* OJO : solo funcionan en Edge si va con ", con ' solo funcionan en Firefox !!!!  */ 
  font-family: "comic";
  aaa-font-style: normal;
  aaa-font-weight: 700;
  src: 
        url("fonts/comic.ttf") format("truetype");          
 
/*      local("Comic Sans MS"), url("c:/windows/fonts/comic.ttf") format("truetype");         */
/*      local("Segoe UI Semibold"), url("c:/windows/fonts/seguisb.ttf") format("truetype");   */
/*      local("ErikaOrmig"), url("c:/windows/fonts/ErikaOrmig.ttf") format("truetype");    parece que no funciona en Edge   */     
  } 
    
@font-face {				/* OJO : solo funcionan en Edge si va con ", con ' solo funcionan en Firefox !!!!  */ 
  font-family: "Ocr";
  aaa-font-style: normal;
  aaa-font-weight: 700;
  src: 
        url("fonts/OCRAEXT.TTF") format("truetype");          
 
/*      local("Comic Sans MS"), url("c:/windows/fonts/comic.ttf") format("truetype");         */
/*      local("Segoe UI Semibold"), url("c:/windows/fonts/seguisb.ttf") format("truetype");   */
/*      local("ErikaOrmig"), url("c:/windows/fonts/ErikaOrmig.ttf") format("truetype");    parece que no funciona en Edge   */     
  } 
  
/* ----------- fin de fonts realmente locales -----------------------------------------*/ 


* {padding: 0;  margin: 0; border: 0; box-sizing: border-box } 

html {height: 100%;  overflow-x: hidden;
/*  scroll-behavior: smooth;   */
	}     
	
html, html a, body {
  -webkit-font-smoothing: antialiased;
}

body {font-family: Ormig, Hind, sans-serif;          /*   Luxi, Ormig, comic  */
	background-color: white;
	}	

/* -------------- ajustes standard --------------------------------------  */  
p {font-size: 1em;                 /*   calc(1em * 0.875)     */
  aa-font-size: 16px;
  font-weight: 400;				/* 400  */
  font-style: normal;
  font-family: aa-Yu Gothic UI Semibold, aa-Luxi, aa-system-ui, Hind, sans-serif;
  color: #222;	  /* a6a7aa  */
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;		/* justify,  left*/
  }
  
em, li, li a {
  font-size: 16px;
  font-weight: 500;
  font-family: Hind, sans-serif;
  color: #555;
  }

a {font-family: Hind, sans-serif;
  color: #333;				/*  #888  */
  outline: 0;
  text-decoration: none;
  }
   
a:focus, a:hover, a:active {
  outline: 0;
  color: blue;   
  text-decoration: none;
}

span {
  font-weight: 400;
  font-family: Hind, sans-serif;
  color: #222; 		/* bfc1c7  */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-family: Hind, sans-serif;
  color: #555;
  line-height: 1.4;
  margin: 0 0 15px;
}

h1 {font-size: 40px;}

h2 {font-size: 30px;}

h3 {font-size: 22px;}

h4 {font-size: 22px;}

button {
  padding: 2px 5px;
  margin: 2px 2px;
  aaa-font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: black;
  border: 1px solid purple;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 0px maroon;
  } 
 
button:active {
  background-color: #ccc;
  box-shadow: 1px 1px 2px 0px maroon;
  transform: translateY(1px);
  }
  
table {
  aaa-border-radius: 5px;
  box-shadow: 3px 3px 10px 0px maroon;
  }

table, th, tr, td { 
  font-size: 90%                                             ;
  text-align: left;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #202122;
  margin: 1em 3em;
  padding: .2em .4em;
  border: 1px solid #3e6002;
  border-collapse: collapse;
  }
  
th a, td a {text-decoration:none;}
th a:hover, td a:hover {background-color: coral;}
  
tr:hover {background-color: coral;} 

:root::target-text { color: blue; background-color: red; }    /*  ¿text-fragments?  */

mark {color: black;  background-color: #fdd; } 

/* -------------- Fin ajustes standard -----------------------------------  */  

img { width: 100%; height: auto; display: block; }  
img[title] {border: 2px solid #F0F;}

.hrclas1 {border: 1px solid purple; width:100%;}
.hrclas2 {border-top: 1px solid blue; height: 2px; width: 100%; padding:0; margin: 1px 0;}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('img/pag/03-ini.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
	width: 100%; 
    height: auto;         /* 650 px */
	}

.pie {margin-top:auto;        /* margin-top funciona OK por el display:flex del footer */
      border: solid 1px #f80;
	  } 
.pie img {float:left; margin:2% 0 0 1%; width: 100px; height: auto;}
.pie p {text-align:center; border:dotted 2px blue; margin-top:2%; color:white;}
.pie a {color:#08F; font-size:16px; font-weight:700;}

.pad-top-1 {
  padding-top: 74px;
  }  


/* -------------- Añadidos ----------------------------------------------------*/
#menu {
/*	   border: groove 10px blue; margin: 10px 0px;
	   border-radius:40px/30px;       */
	   padding: 0px 0px 10px 0px; 
	   background: #fff;
	   width: 100%;
	   position: fixed;
	   z-index: 10;
	   }
	   
@media screen and (max-width: 768px) {
#menu {padding: 0px 0px 10px 0px;}
   }
	   
#wrapper {
	padding-top: 60px;
}

.div1 {
  width: 100%; 
  overflow:hidden;
  background-color:#fafafa;
  max-width: 1000px; 
  margin: 1% 1%;
  padding-right: 2%;  
  border: 1px solid violet;
  }

.divpre {		
  font-family: LuxiMono, monospace;
  font-size: 13px;
  background-color: cornsilk;
  overflow-x: auto;
  }


/* -------------- Tabla de contenidos ----------------------------------------------------*/
.ez-toc-container {
  background: #f9f9f9;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  display: table;
  margin: 1em 3em;
  padding: 10px;
  position: relative;
  width: auto;
  list-style: none none;
  text-decoration: none;
}

.ez-toc-list {
  display: table;
  line-height:1.6;
  padding: 10px;
  position: relative;
  width: auto;
  list-style: none none;
  text-decoration: none;
}
    
 .btn-toc1 {
  padding: 3px 5px;
  margin: 2px 2px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: black;
  border: 1px solid purple;
  border-radius: 6px;
  box-shadow: 3px 3px 6px 0px maroon;
  } 
  
 /* -------------- Miniaturas  ----------------------------------------------------*/ 
.thumb {
  width: 200px;		/* 200px  */
  height: auto;
  background-color: #f1f9fa;
  margin: 5px;
  padding:5px;
  border: 1px solid blue;
  } 

.tright {
  clear: right;
  float: right;
  margin: 0.5em 1% 1.3em 1.4em;
  }
  
.thumbimage {
  background-color: #ffffff;
/*  background-color: transparent;  */
  border: 1px solid #c8ccd1;
  margin:0px;
} 

.thumbcaption {
  text-align: left;
  line-height: 1.4em;
  font-size: 90%;
  padding: 3px;
  aaa-border: 1px dotted black;
  }


/*--------  Hover y Overlay ----------------------------------*/
.ovlay {	
  position: absolute;   
  bottom: 0; 
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  color: white;
  width: 90%;
  height: auto;
  transition: .5s ease;
  opacity:0;
  font-size: 15px;
  padding: 50px 20px;
  text-align: center;
  border-radius: 18px;
  margin-bottom: 10px;
  margin-left: 10px;
  }

.img-container {
  position: relative;
  margin: 0px 0px;     /*  10px 0px;  */
  width: 100%;  
  max-width: 800px; 
  }

.img-container:hover .ovlay {
  opacity: .9;
  }

/* [1] The container */
.img-zoom {
  height: 330px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }
  
.img-zoom-auto {
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }

/* [2] Transition property for smooth transformation of images */
.img-zoom img, .img-zoom-auto img {
  transition: transform .5s ease;
  }

/* [3] Finally, transforming the image when container gets hovered */
.img-zoom:hover img, .img-zoom-auto:hover img, .txt-zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  }

.txt-zoom {
  padding: 5%  5%;
  transition: transform .2s;
  width: 90%;
  height: 400px;         /* 330px por defecto, se puede cambiar con style=  */
  margin: 5% 5%;
  overflow: auto;
  }

.txt-style-1 {
  border: 2px solid purple;
  border-radius: 8px;
  }
  
/*--------------- Texto en Imagen , escribir en Imagen----------------*/
/* dentro del contenedor .pant-br  se escribe con la clase .txt-br  completada con un style de posic:
  bottom-left :     top-left:        top-right:      bottom-right:       center:
    bottom: 8px       top :  8px;       top : 8px;     bottom: 8px;        top: 50%;
	left  :16px		  left: 16px;      right: 16px;    right:  16px;       left: 50%;   */

.pant-br {
  position: relative;
  text-align: center;
  color: white;
  }
   
.txt-br { 
  position: absolute;
  top:35%; left:40%;	   /* por defecto, se puede cambiar con style=  */ 
  } 
    
.txt-br-ini {				/* parallax */
  position: absolute;
  top:35%; left:40%;	   /* por defecto, se puede cambiar con style=  */ 
  transform: translate(-50%, -50%);
  }
  
.txt-br-ini h1 {height: 40px; width: 90%; margin: 10px; padding: 40px 30px; border: solid 4px purple; 
	border-radius:40px/30px;
	box-shadow:15px 15px 20px maroon;
	color:white; font-size: 40px;
	}

.txt-br-ini p {color: mediumslateblue; font-size: 24px;}
 
 
/* ---------  custom alert, custom confirm, custom propmt  --------------------------------
*/ 
.overlay2 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20;
  overflow: auto;
  }

.confirm-box2 {
  position: absolute;
  a-max-width: 360px;
  padding: 10px 20px;
  a-width: 50%;
  max-height: 80%;
  top: 20%;
  left: 25%;
  font-size: 13px;
  text-align: center;    /* center  */
  background: white;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  overflow: auto;
  }

.confirm-box2 p {
  line-height: 1.3;
  }

.confirm-box2 button {
  margin: 0 5px;
  padding: 4px 14px; 
  font-size: 15px;
  border-radius: 20px;
  border: 1px solid #000;
  cursor: pointer;
  transition: all 0.4s;
  }	

.close2 {
  text-align: right;
  cursor: pointer;
  } 

.close2:hover {
  color: #1e6;
  }
  
  
/*----------- Formulario e-mail-1 -----------------------------------------------*/
.form-1 {
  width: 100%;           /* para pantallas pequeñas   */
  max-width: 600px;      /* para no ocupar mucho en las grandes */
  margin: 0 auto;        /* en grandes esta centrado, en peq.ocupa todo */
  justify-content: left;
  align-items: left;
  padding: .4em;
  font-size: 16px;
  }
     
.form-1 label {
  cursor: pointer;
  display: inline-block;  
  padding: 6px 12px;
  text-align: right;
  vertical-align: top; 
  color: white;
  }

.form-1 input, textarea {
  padding: 6px 10px;
  margin: 5px 0px; 
  }

.form-1  button {
	padding: 0.5em  1em;
  margin: 2px 2px;
  border: 2px solid purple;
  border-radius: 8px;
  aaa-width: 25%;
/*  background: #aaa;  */   /* si se activa no cambia en hover */
  }	
   
.form-1  h2 {
  padding: 0px 0px 0px 0px;
  margin-left: 0px;  
  font-size: 28px;	
  color: white;
  }   
	   
.span2 {width:70px; display:inline-block; color:white; } 

.span3 {width:260px; display:inline-block; color:white; } 

/*--------------- Descargar Manuales Cita Soft --------------------------------*/
.div2 {width: 200px; max-width: 1200px;
       border: 1px dotted blue; 
	   margin: 0 2px;
	   float:left;
	   }
	   
.span1 {width:140px; display:inline-block; 
       background-color:dodgerblue; color:white;}

 
/*--------------- Menu Responsive -----------------------------------------------*/ 
/* */
.topnav{ 
  aaa-overflow: hidden; 
  float: right;
  padding: 3px 0px;        /*   3px   */
  font: bold 16px Verdana, sans-serif;
  border: 2px dashed purple;
  border-bottom: 1px solid #778;
  } 
  
.topnav a { 
  list-style: none; 
  margin: 0px 5px; 
  display: inline;
  text-shadow: 2px 2px 4px red;
  box-shadow:15px 15px 20px maroon;  
  padding: 3px 1em;                    /*  3px   */
  border: 3px solid #778; 
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
  }

.topnav a:link { color: #448; }
.topnav a:hover, .drdown:hover .drbutton {color: #000; background: #AAE; border-color: #227; }
.topnav a#actual { background: #AAE; }
.topnav .icon {display: none;    /* none , inline-block - Esconde el bocadillo */
             }      

.topnav .drdown-content {color: #000; background: #AA0; border-color: #227; }

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). 
    Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .topnav a, .drdown {
	display: none;
  	margin-top: 0px;       /*   ¿ 10px ?  espacio entre los menus verticales  */
	top: 20px;          /* no hace nada ? */
  }
  .topnav a.icon {
    float: right;
    display: block;
	margin-top: 0px;	/* cuando NO se pulsa el bocadillo lo pone eso más abajo [ 10px ? ] */
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
   This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0px;     /* cuando SI se pulsa el bocadillo lo pone eso más abajo */
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	top: 10px;
  }
} 

/*--------------- Menu Responsive, submenus ------------------------------------------*/ 
/* The drdown container */
.drdown {
/*  float: right;         /* orig:  left  */
  overflow: hidden;

  display: inline-block;    /* mio desde aqui  inline alinea el menu, pero displaya submenu a la izq  */
					  /* lo mejor dejar inline-block      		*/
/*  margin:0px;
  padding: 3px 0px;
  border-bottom: 1px solid #778;    
  font: bold 16px Verdana, sans-serif;  */
  }

/* Drdown button */
.drdown .drbutton {
  a-outline: none;	
  color: green;
  
  text-shadow: 2px 2px 4px red;           /* mio desde aqui  */
  box-shadow:15px 15px 20px maroon;
  margin: 0px 5px 0px 5px;      
  padding: 3px 1em;       
  border: 3px solid #778; 
/*  border-bottom: none;   */
  background: #DDE; 
  font: bold 15px Verdana, sans-serif;   
  }

/* Drdown content (hidden by default) */
.drdown-content {
  display: none;
  position: absolute;       /*  orig:  absolute   */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the drdown */
.drdown-content a {
  float: none;
  color: black;
  padding: 6px 1em;       /* orig:  12px 16px  */
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to drdown links on hover */
.drdown-content a:hover {
  background-color: #AAE;
}

/* Show the drdown menu on hover */
.drdown:hover .drdown-content {
  display: block;
}

/*--------------- Menu Drdown ----------------------------------------------------------*/ 
/* */
.dropbtn {
/*  background-color: #4CAF50;   */
  background-color: transparent; 
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  box-shadow: none;
  }

.dropmenu {
  position: relative;
  display: inline-block;
  position: fixed;      /* estas dos lo dejan fijo  */
  top: 0;
  }

.dropmenu-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
/*  right: 0;				/* si se activa pone el menu a la der. */
}

.dropmenu-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropmenu-content a:hover {background-color: #f1f1f1}
/* .dropmenu-content a:hover, .drdown:hover .drbutton {color: #000; background: #AAE; border-color: #227; }  */
.dropmenu-content a:hover, .drdown:hover .drbutton {color: #000; background: #AAE; border-color: #227; }

.dropmenu-content .drdown-content {color: #000; background: #AA0; border-color: #227; } 

.dropmenu:hover .dropmenu-content {
  display: block;
}

.dropmenu:hover .dropbtn {
  background-color: #3e8e41;
}

/*--------------- Top Button ---------------------------------------------------*/ 
/* */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(200,0,0,.5);   /* red  */
  color: white;
  cursor: pointer;    /* Add a mouse pointer on hover */ 
  padding: 15px;
  border-radius: 12px;      /* 8px, 12 px, 50% .. */
}

#topBtn:hover {
  background-color: rgba(255,0,0,.8);   /* #555 dark-gray */
 }

  	
/* ======================== FLEXBOX MAIN CONTENT CONTAINERS =============================== */
/* */
@media (min-width:768px) { .container-block { padding: 2% 1% } }   /* Desktop    4  8  */
@media (max-width:767px) { .container-block { padding: 2% 1% } }    /* Moviles  11  8  */

 /* ========== FLEXBOX PARENT AND CHILD COLUMN ELEMENTS ========= */
.container-flexbox {
   display: flex; 
   justify-content: space-between; 
   flex-wrap: wrap; 
	}

/* Desktops: flexbox child columns */
@media (min-width: 768px) {
  .col-2 { width: 49% }
  .col-3 { width: 32% }
  .col-4 { width: 24% }
  }

/* Mobiles: flexbox child columns */
@media (max-width: 767px) {
  .col-2 { width: 100% }         
  .col-2:first-child { margin-bottom: 32px }    /* Vertical spacing under first child column  (2px)*/   
  .col-2:last-child  { margin-bottom: 0 }       /* No vertical spacing under last child column */
  .col-3 { width: 100% }					     /* Vertical spacing under child columns */
  .col-3 { margin-bottom: 16px }                /* No vertical spacing under last child column */
  .col-3:last-child  { margin-bottom: 0 }  
  .col-4 { width: 100% }					     /* Vertical spacing under child columns */
  .col-4 { margin-bottom: 16px }                /* No vertical spacing under last child column */
  .col-4:last-child  { margin-bottom: 0 } 
  } 

/* Desktops: inner padding for child columns */
@media (min-width: 768px) {
/*  .col-2.col-padding { padding: 1.8% 2% 2.2% 2% }     */
	[class*="col-"].col-padding { padding: 0% 0% 0% 0% }   /* se aplica a col-2, 3, etc */
  }

/* Mobiles: inner padding for child columns  */
@media (max-width: 767px) {
/*  .col-3.col-padding { padding: 6.5% 7% 7% 7% }     */
    [class*="item-col-"].col-padding { padding: 0% 0% 0% 0% }   /* se aplica a col-2, 3, etc */
  }

/* No vertical spacing under final item inside child columns */
.col-2 *:last-child { margin-bottom: 16px }
.col-3 *:last-child { margin-bottom: 16px }
.col-4 *:last-child { margin-bottom: 16px }

/* Images inside child columns */
.col-2 img { margin-bottom: 0px }
.col-3 img { margin-bottom: 0px }
.col-4 img { margin-bottom: 0px }

/* ========= COLOURED BACKGROUNDS =========== */
.bg-light { background-color: #d8f0f5 }
.bg-dark { background-image: linear-gradient(90deg, #FFb3ba,  #ff69b4		) }    /* ff0099  493240   */

/* Colours for sub-headings and paragraphs */
.container-flexbox.bg-dark .col-2 * { color: #000 }      /* fff   */
.container-flexbox .col-2.bg-dark * { color: #000 }

.container-flexbox.bg-dark .col-3 * { color: #000 }
.container-flexbox .col-3.bg-dark * { color: #000 }

.container-flexbox.bg-dark .col-4 * { color: #000 }
.container-flexbox .col-4.bg-dark * { color: #000 }

/* Visual layout guides - remove when finished */
.container-flexbox { border: 1px solid red }
.container-flexbox .col-2 .col-3 .col-4 { border: 1px solid blue }

/* ================================== HERO BLOCK ====================================== */
/* */
.bg-hero {
    display: flex;        
    flex-direction: column;  
    justify-content: center;
    background-image: url('img/pag/01-ini-01.jpg');
    background-position: center center;     /*  left(right)  top(bottom) ó  center center  */
    background-size: cover;
    background-repeat: no-repeat;   
    height: 570px;			/*  510px  */
	max-width: 100%;
	object-fit: contain;
	object-position: bottom;
	
/*	display:block;
	max-width: 100%;
	height: auto;      */
	}

.bg-hero h1, .bg-hero h2 {
    letter-spacing: -2px;
    color: white;
    font-weight: bold;
    text-shadow: 3px 3px #222 
	}

.bg-hero h1 {
    font-size: calc(80px + (100 - 80) * ((100vw - 320px) /(1600 - 320)));
	}

.bg-hero h2 {
    font-size: calc(36px + (56 - 36) * ((100vw - 320px) /(1600 - 320)));
	}

/* Desktop */
@media all and (min-width:768px) { 
	.bg-hero h1 { margin-bottom: 1% } 
	.bg-hero h1, .bg-hero h2 { text-align: center }
	}

/* Mobiles */
@media  (max-width:767px) { 
    .bg-hero { background-position: right center; height: 420px }
    .bg-hero h1, .bg-hero h2 { text-align: center }
    .bg-hero h1 { margin-bottom: 10% }
	}

/*  ---------------------  media queries ------------------------------------ */
/* */
.screen-size {
	width: 100%;
	padding: 50px;
	color: white;
	border: 3px solid black;
	border-radius: 12px;
	}
	
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.screen-size {background: red;}
	}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.screen-size {background: green;}
	}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.screen-size {background: blue;}
	} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.screen-size {background: orange;}
	} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.screen-size {background: pink;}
	}
	
/*  ---------  Acordeon ------------------------------------------------- */
/* Style the buttons that are used to open and close the acordeon panel */
.acordeon, .acordeon0 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  
  margin: 0px;					/* esto todo es para efecto borde */
  border: 1px solid purple;
  border-radius: 10px;
  aa-box-shadow: 2px 9px #999;     /* efecto tecla  */
  aaa-box-shadow:9px 9px 10px maroon;  
  }

/* Add a background color to the button if it is clicked on (add the .active class with JS), 
 and when you move the mouse over it (hover) */
.active, .acordeon:hover, .acordeon0:hover {
  background-color: #ccc;
  }

/* Style the acordeon panel. Note: hidden by default */
.panel {
  padding: 0 5px;
  background-color: #fafafa;
/*  display: none;           /*  este es para no animacion */
  max-height: 0;							/* estos tres son para efecto animacion */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  }
  
.acordeon:after, .acordeon0:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

	
/*  ---  Acordeon2, acordeon nivel 2 ------------------------------------------- */
/* Style the buttons that are used to open and close the acordeon panel */
.acordeon2 {
  background-color: #bbb;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 80%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  
  margin: 0px;					/* esto todo es para efecto borde */
  border: 1px solid purple;
  border-radius: 10px;
  aa-box-shadow: 2px 9px #999;     /* efecto tecla  */
  aaa-box-shadow:9px 9px 10px maroon;  
  }

/* Add a background color to the button if it is clicked on (add the .active2 class with JS), 
 and when you move the mouse over it (hover) */
.active2, .acordeon2:hover {
  background-color: #ccc;
  }

/* Style the acordeon panel. Note: hidden by default */
.panel2 {
  padding: 0 18px;
  background-color: bisque;     /* pink, bisque, cornsilk  */
/*  display: none;           /*  este es para no animacion */
  max-height: 0;							/* estos tres son para efecto animacion */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 16px;
  line-height: 1.4;
  
  margin: 0px;					/* esto todo es para efecto borde */
  aaa-border: 1px solid purple;
  border-radius: 10px;
  aaa-box-shadow: 2px 9px #999;     /* efecto tecla  */
  aaa-box-shadow:9px 9px 5px maroon;
  }
  
.acordeon2:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active2:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


/*  ----------------  Modal minimo ------------------------------------------ */
/*  referencia:    https://codepen.io/r3dg3cko/pen/ZLryQG     */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 70px; /* Location of the box   orig 80  */
  padding-left: 0px; /* Location of the box   orig 20  */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

.modal-content{
  margin: auto;
  display: block;
  position: absolute;
  top: 50%;            /* orig:  50%  */
  left: 50%;
  width: 90%;          /*orig: 80%  */
  max-width: 1200px;
  transform: translate(-50%, -50%);
  }

.modal-hover-opacity {
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-backface-visibility:hidden
  }

.modal-hover-opacity:hover {
  opacity:0.60;
  filter:alpha(opacity=60);
  -webkit-backface-visibility:hidden
  }

.close {
  text-decoration:none;float:right;
  font-size:40px;font-weight:bold;color:#f1f1f1;
  transition: 0.3s;
  }
  
.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.modal-content, #caption {   
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  }

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
  }

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
  }
  
/*  ---------------  ToolTips ---------------------------------------------- */
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 3px;
  border-radius: 6px;
    /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 105%;
  right: auto;
  left: 50%;
  margin-left: -60px;
    /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  }

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  } 
  
/* Tooltip img */
.tooltip .tooltipimg {
  visibility: hidden;
  width: 250px;
  background-color: #fff;   
  color: #222;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid gray;
    /* Position the tooltip img */
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 140%;
  left: 20%;
  margin-left: -20px;   /* -(width/2) */
    /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  }
  
.tooltip:hover .tooltipimg {
  visibility: visible;
  opacity: 1;
  } 
  
  
/*  ------------  PopUp Box w/o js. ----------------------------------------------------- */
/*   https://codepen.io/imprakash/pen/GgNMXO      */

.box-ov {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;

  aaa-background: rgba(0, 0, 0, 0.7);  /* activar estas 2 para opacidad */
  aaa-transition: opacity 500ms;
  }
  
.box-ov:target {
  visibility: visible;
  opacity: 1;
  }

.popup {
  margin: 90px auto 10px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 45%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 1000;
   
  border: 1px solid purple;			/* efecto borde */
  border-radius: 10px;
  box-shadow: 2px 9px 20px  #444;     /* efecto sombra  */
  } 
   
.popup .close {
  position: absolute;
  top: 20px;		/* 20px  */
  right: 20px;		/* 30px  */
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  }

.popup .close:hover {
  color: #06D85F;
  }
  
.popup .content {
  max-height: 30%;
  overflow: auto;
  }

@media screen and (max-width: 700px){
 .popup {width: 70%;}
 }
  
 
/*  ----------------  Tecla Boton (acceso a BOSS y CITA)  ------------------------ */
/* */
.tecbtn {
  padding: 15px 15px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 20px;
  box-shadow: 0 9px #999;
  }

.tecbtn:hover {background-color: #3e8e41}

.tecbtn:active {
  background-color: #3e8e41;
  box-shadow: 0 6px #666;
  transform: translateY(4px);
  }
  
/*--------- Image Flip ----------- */
.imgFlip:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  perspective: 1000px;
/*  transition: 1.3s;   */  
  } 
  
/* ------------ Read more -------------------- */
  [id*="more-"] {display: none;}  

 
/* ----- Cubo ---------------------------- */
#cubo-wrap {position: relative; left: 10%; perspective: 750px;         /* absol. 50%  1500  */
  border: 5px solid blue;
  float:left; }

.cubo-area {position: relative;			/*  relative   */
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 20s;                    /*  10s  */
  animation-timing-function: linear;
  animation-iteration-count: infinite; 			/*  infinite  */	
  transform: rotateX(90deg) rotateY(90deg); }   /*  esta estaba separada al final */

@keyframes rotate {0% {transform: rotate3d(0, 0, 0, 0);  }
				 100% {transform: rotate3d(0, 1, 0, 360deg);  }  }

.cubo {position: absolute; width: 100px; height: 100px;  border: 2px solid #ff0000; }        /* absol.  200    */

#cubo-front {transform: translateX(-50px) translateY(-50px) translateZ(50px);              /*  100  */
  background: #ff481077;
  background-image:url(portada.png); }

#cubo-back {transform: translateX(-50px) translateY(-50px) translateZ(-50px);              /*  100  */
  background: #01fbea7a;  background-image:url(portada.png); }

#cubo-right {transform: translateY(-50px) rotateY(90deg);                 /*  100  */
  background: #04ff7562;
  background-image:url(img/app/logoct96.png); }

#cubo-left {transform: translateY(-50px) translateX(-100px) rotateY(90deg);	            /*  -100  -200  */
  background: #d9ff0075;
  background-image:url(img/app/logoct96.png); }

#cubo-top {transform: translateX(-50px) translateY(-100px) rotateX(90deg);	          	/*  -100  -200  */
  background: #0004f65b; }

#cubo-bottom {transform: translateX(-50px) rotateX(90deg);                 /*  100  */
  background: #fd14de7e; }
	
/* ----- Portada slide ---------------------------- */
.container-slide{ position: relative; width: 100%; height: 400px; background-size: 200%;
    background-image: url(slide1.jpg);
    animation: movimiento 20s infinite linear alternate; }

@keyframes movimiento{ from{ background-position: bottom left;}
						 to{ background-position: top right; } }

.capa-gradient{position: absolute; width: 100%; height: 100%;
    background: -webkit-linear-gradient(left, black, #0672d0);
    opacity: 0.5; }

.slider-details{ position: relative; width: 100%; max-width: 1200px; margin: auto; }

.details{ position: relative; width: 100%; max-width: 500px; top: 20px; color: white;
  border:2px solid pink; }

.details h1{font-size: 40px; font-weight: 100; margin-left: 10px; }

.details p{margin-top: 10px; font-size: 20px; font-weight: 100; margin-left: 10px; }

.details button{
    padding: 10px 20px;
    font-size: 16px;
    background: none;
    border-style: none;
    border: 1px solid white;
    color: white;
    margin-top: 20px;
    transition: background 300ms;
    cursor: pointer;
    margin-left: 10px; }

.details button:hover{ background: white; color: black; }