/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2/12/2018, 05:06:42 PM
    Author     :  MYSTERIOUS WEB DEVELOPER
*/

/*++++++++++++----------        DISPOSIIVOS MOVILES     ---------++++++++++++++++++++++++*/
@media only screen and (max-width: 900px) {
 
 /********    BANNER      *******/
 #banner{
     width: 100%;
     height: 200px;
     float:left;
     background-color: #f2f2f2;
     display: none;
 }
 
  /********   SECCION RÁPIDA   *******/
 
  #seccion-rapida{
      float:left;
      width: 90%;
      height: 910px;
      padding-left: 5%;
      padding-right: 5%;
      border-bottom: 1px solid #f2f2f2;
      
  }
  .bloque-rapido{
     width: 100%;
     height: 220px;
     float:left;
     background-color: white;
  }
  .titulo{
      padding-top: 5px;
      padding-bottom: 5px;
      height: 20px;
      width: 100%;
      float:left;
      text-align: center;
      background-color: #60b232;
      color:white;
  }
  .contenido-visible{
      height: 220px;
      width: 100%; 
      float:left;
      text-align: center;
      line-height: 230px;
      cursor:pointer;
/*EFECTO RETARDADO DE TIEMPO*/
	-webkit-transition: 0.4s linear all;
	-moz-transition: 0.4s linear all;
	-o-transition: 0.4s linear all;
	transition: 0.4s linear all;        
  }
  .contenido-visible:hover{
  opacity: 0.7;
  }
  
  .contenido-visible img{
      height: 220px;
      width: 100%;
      cursor:pointer;
  }
  
  .contenido-oculto{

      float:left;
      height: 220px;
      width: 90%; 
      padding-left: 5%;
      padding-right: 5%;
/*      padding-left: 5%;
      padding-right: 5%;*/
      padding-top: 10px;
      padding-bottom:10px;
      text-align: justify;
      font-size: 85%;
      cursor:pointer;
      background-color: #f2f2f2;
  }
  .contenido-oculto:hover{
      background-color: white;
      opacity:0.7;
  }
  
  .contenido-oculto a{
      color:#008D3D;
      text-decoration: none;
  }
 .contenido-oculto a:hover{
      color:#666666;
      text-decoration:underline;
  } 
  
  /********   SECCION RÁPIDA 2   *******/
 
  #seccion-rapida-2{
      float:left;
      width: 90%;
      padding-left: 5%;
      padding-right: 5%;
      background-color: white; 
  }
  #contenido-izquierdo{
      float:left;
      width: 100%;
      padding-top: 0.5em;
      text-align: justify;
  }
    #contenido-derecho{
      float:left;
      width: 100%;
      padding-bottom:2em;
      text-align: center;
  }
   
  #contenido-derecho img{
     width: 75%;
  }   
}

/*++++++++++++----------      ESCRITORIO   ---------++++++++++++++++++++++++*/
@media only screen and (min-width: 901px){


 /********    BANNER      *******/
 #banner{
     width: 100%;
     height: 300px;
     float:left;
     background-color: #f2f2f2;
 }
 
  /********   SECCION RÁPIDA   *******/
 
  #seccion-rapida{
      float:left;
      width: 80%;
      height: 250px;
      padding-left: 10%;
      padding-right: 10%;
      border-bottom: 1px solid #f2f2f2;
      
  }
  .bloque-rapido{
     width: 25%;
     height: 100%;
     float:left;
     background-color: white;
  }
  .titulo{
      padding-top: 5px;
      padding-bottom: 5px;
      height: 20px;
      width: 100%;
      float:left;
      text-align: center;
      background-color: #60b232;
      color:white;
  }
  .contenido-visible{
      height: 220px;
      width: 100%;   
      float:left;
      text-align: center;
      line-height: 230px;
      cursor:pointer;
/*EFECTO RETARDADO DE TIEMPO*/
	-webkit-transition: 0.4s linear all;
	-moz-transition: 0.4s linear all;
	-o-transition: 0.4s linear all;
	transition: 0.4s linear all;        
  }
  .contenido-visible:hover{
  opacity: 0.7;
  }
  
  .contenido-visible img{
      height: 220px;
      width: 100%;
      cursor:pointer;
  }
  
  .contenido-oculto{
      /*display: none;*/
      float:left;
      height: 200px;
      width:90%;
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 10px;
      padding-bottom:10px;
      text-align: justify;
      font-size: 85%;
      cursor:pointer;
      background-color: #f2f2f2;
  }
  .contenido-oculto:hover{
      background-color: white;
      opacity:0.7;
  }
  
  .contenido-oculto a{
      color:#008D3D;
      text-decoration: none;
  }
 .contenido-oculto a:hover{
      color:#666666;
      text-decoration:underline;
  } 
  
  /********   SECCION RÁPIDA   *******/
 
  #seccion-rapida-2{
      float:left;
      width: 80%;
      padding-left: 10%;
      padding-right: 10%;
      background-color: white; 
  }
  #contenido-izquierdo{
      float:left;
      width: 50%;
      padding-bottom:2em;
      padding-top: 2em;
      text-align: justify;
  }
    #contenido-derecho{
      float:left;
      width: 50%;
      padding-bottom:2em;
      padding-top: 2em;
      text-align: center;
  }
   
  #contenido-derecho img{
     width: 75%;
  }
}