/*========================================================================
                         PLANTILLA CSS  FLEXBOX - WWW.GRANADA.ORG
                         COORDINADOR - Jorge Martin Puente
                         TECNICO - Trinidad Morales Valdivia
                         TECNICO - Manolo Molina Sánchez 
==========================================================================*/

/*======= CONTENIDO GENERICO ANTES DE LAS MEDIA QUERIES =========*/

/****************************************************************
*CODIGO PARA GENERAR CAJAS CON EFECTOS HOJA DE PAPEL
****************************************************************/
.wrap{
  /* margin-left:20px;*/
  margin:0 auto;
  /*border:1px solid black;*/

  
}
.box{
  width:95%;
  height:auto;
  float:left;
  background-color:white;
  margin:25px 15px;
  border-radius:5px;
  display: flex;/*APLICAMOS FLEXBOX*/
  flex-direction: column;
  align-items: stretch;/*APLICAMOS FLEXBOX*/

  /*border:1px solid black;*/
 
  
 
   
 
}
.box h3{
  font-family: 'Didact Gothic', sans-serif;
  font-weight:normal;
  text-align:center;
  padding-top:6px;
  color:#fff;
  
   
   
 
}
.box1{
  background-color: #ffd5ab;   
}
.box2{
  background-color: #EDE89A;
}
.box3{
  background-color: #9EEBA1;
}
.box4{
  background-color: #9EEBBF;
}
.box5{
  background-color: #9ED9EB;
}
.box6{
  background-color: #E2AE6C;
}
.box7{
  background-color: #DB9EEB;
}
.box8{
  background-color: #C49EEB;
}
.seccion {
    border:0px solid black;
    display: flex;/*APLICAMOS FLEXBOX*/
    align-items: stretch;/*APLICAMOS FLEXBOX*/
    }
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  position:relative;
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; 
}
/*****************************************************************dashed border
****************************************************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
  width:87%;
  height:auto;
  margin-left:6%;
  border:2px dashed #F7EEEE;
  border-radius:5px;

  
   
}
/****************************************************************
*styling shadows
****************************************************************/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-3;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before{
  position:absolute;
  content:"";
  width:80%;
  top:140px;bottom:15px;left:30px;
  background-color:#9F8641;
  z-index:-1;
  -webkit-box-shadow:0 23px 17px 0 #9F8641;
  -moz-box-shadow:0 23px 17px 0 #9F8641;
  box-shadow: 0 23px 17px 0 #9F8641;
  -webkit-transform:rotate(-4deg);
  -moz-transform:rotate(-4deg);
  transform:rotate(-4deg);
}
.shadow3:before, .shadow3:after{
  content:"";
  position:absolute;
  bottom:0;top:2px;left:15px;right:15px;
  z-index:-1;
  border-radius:100px/30px;
 -webkit-box-shadow:0 0 30px 2px #479F41;
  -moz-box-shadow:0 0 30px 2px #479F41;
  box-shadow: 0 0 30px 2px #479F41;
}
.shadow4:before, .shadow4:after{
  position:absolute;
  content:"";
  top:14px;bottom:14px;left:0;right:0;
  box-shadow:0 0 25px 3px #548E7F;
  border-radius:100px/10px;
  z-index:-1;
}
.shadow5:before, .shadow5:after{
  position:absolute;
  content:"";
  box-shadow:0 10px 25px 20px #518C96;
  top:40px;left:10px;bottom:50px;
  width:15%;
  z-index:-1;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.shadow5:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;left: auto;
}
.shadow6:before, .shadow6:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
.shadow7:before, .shadow7:after{
  position:absolute;
  content:"1";
  top:25px;left:20px;bottom:150px;
  width:80%;
  z-index:-1;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow7:before{
  box-shadow:10px -10px 30px 15px #984D8E;
}
.shadow7:after{
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  transform: rotate(7deg);
  bottom: 25px;top: auto;
  box-shadow:10px 10px 30px 15px #984D8E;
}
.shadow8{
  box-shadow:
 -6px -6px 8px -4px rgba(250,254,118,0.75),
  6px -6px 8px -4px rgba(254,159,50,0.75),
  6px 6px 8px -4px rgba(255,255,0,0.75),
  6px 6px 8px -4px rgba(0,0,255,2.75);
}

/****************************************************************
*CODIGO PARA CIRCULO IZQUIERDO CON ICONO REPRESENTATIVO SECCION
****************************************************************/
.circle { border-radius: 50%;}

.s_00 {border:5px solid #ffd5ab;} /* color INFORMACION*/
.s_01 {border:5px solid #E2AE6C;} /* color SERVICIOS*/

.outer {
           /* background-color:#ffd5ab;*/
            margin-left: -20px;
            margin-top: -20px;
            width:100px;
            height:100px;
            position:relative;
}

.o_00 {background-color:#ffd5ab;}/* color INFORMACION*/
.o_01 {background-color:#E2AE6C;}/* color SERVICIOS*/

.inner {
            background-color:white;
            top: 3%; left:3%;
            width:87%;
            height:87%;
            position: relative;
}

.img{ margin-left: 7px;
      margin-top:7px; }

/****************************************************************
*CODIGO PARA CAJA CONTENIDOS USAMOS FLEXBOX 
****************************************************************/
.contenido{padding: 20px;
          width: 95%;
          display: flex;/*APLICAMOS FLEXBOX*/
          align-items: stretch;/*APLICAMOS FLEXBOX*/}


/****************************************************************
*CODIGO PLACA NOMBRE CENTRO CIVICO
****************************************************************/
    .placa {
          position: relative;
          margin: 0 auto;
          border: 0px solid #ddd;
          width: 60%;
          height: 10px;
        }
    .pint {
            position: absolute; 
            margin-left:60px;
            left: 40px; 
            top: 62px;
          }
    .pcont {
            position: absolute;  
            margin-left:60px;          
            left: 85px; 
            top: 160px;}
      
/****************************************************************
*CODIGO FUENTES TIPOGRAFICAS
****************************************************************/
          
          .tcc {
                font-family: 'Lobster', serif;
                width:95%;
                 border: 0px solid #ddd;
                 padding:6px;
                font-size:25px;
                color:#333;
                margin:0 auto;
                text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
               }
            .alinea { text-align:center;
          }
/****************************************************************
*CODIGO CAJAS INTERIOR
****************************************************************/
.inti {padding: 10px;width:35%; }
.intd {padding: 10px;width:65%; }

/****************************************************************
*CODIGO INTERIOR CAMPO9 
****************************************************************/
.campos {
	background:white;
	display: block;
	width:100%;
	margin:0 auto;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	padding: 20px;
	-webkit-box-shadow: 1px 1px 1px 1px #050100;
	box-shadow: 1px 1px 1px 1px #050100;
}
/****************************************************************
*CODIGO  ANIMACIONES ICONOS 
****************************************************************/
.element-animation{
  animation: animationFrames linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {opacity:0;transform:  rotate(-200deg) ;}
  100% {opacity:1;transform:  rotate(0deg) ;
   }
}
@-moz-keyframes animationFrames{
  0% {opacity:0;-moz-transform:  rotate(-200deg) ;}
  100% {opacity:1;-moz-transform:  rotate(0deg) ;
  }
}
@-webkit-keyframes animationFrames {
  0% {opacity:0;-webkit-transform:  rotate(-200deg) ;
  }
  100% {opacity:1;-webkit-transform:  rotate(0deg) ;
  }
}
@-o-keyframes animationFrames {
  0% {opacity:0;-o-transform:  rotate(-200deg) ;
  }
  100% {opacity:1;-o-transform:  rotate(0deg) ;
  }
}
@-ms-keyframes animationFrames {
  0% {opacity:0;-ms-transform:  rotate(-200deg) ;}
  100% {opacity:1;-ms-transform:  rotate(0deg) ;
  }
}

/****************************************************************
*GRAN CONTENEDOR
****************************************************************/
.madre {  display: flex;/*APLICAMOS FLEXBOX*/
   flex-direction: column;z-index:-5;}

/****************************************************************
*CODIGO TABLAS HTML
****************************************************************/
#tabla_00 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tabla_00 td, #tabla_00 th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tabla_00 tr:nth-child(even){background-color: #f2f2f2;}
#tabla_00 tr:nth-child(odd){background-color: #FFF;}

#tabla_00 tr:hover {background-color: #ddd;}

#tabla_00 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

#tabla_01 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 80%;
}
#tabla_01 td, #tabla_01 th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tabla_01 tr:nth-child(even){background-color: #f2f2f2;}
#tabla_01 tr:nth-child(odd){background-color: #FFF;}

#tabla_01 tr:hover {background-color: #ddd;}

#tabla_01 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
/*======= ATENCION MEDIAS QUERIES =========*/


@media all and (max-width: 480px) {

.contenido{padding: 10px;
          width: 95%;
          display: flex;/*APLICAMOS FLEXBOX*/
          flex-direction:column;/*APLICAMOS PARA QUE DIV PASEN A VERTICAL*/
          align-items: stretch;/*APLICAMOS FLEXBOX*/}
          
/****************************************************************
*CODIGO INTERIOR CAMPO9 
****************************************************************/
.campos {
	background:white;
	display: block;
	width:60%;
	margin:0 auto;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	padding: 20px;
	-webkit-box-shadow: 1px 1px 1px 1px #050100;
	box-shadow: 1px 1px 1px 1px #050100;
}

  }