/* -----------------------------------
basic layout
----------------------------------- */

.row
{
   clear: left;
   overflow: hidden;
   zoom: 1;
   _overflow: visible;
}

.w-3col, .w-2col, .w-1col, .m-3col, .m-2col,
.m-1col, .n-3col, .n-2col, .n-1col
{
   padding: 0;
   background: transparent;
}

/* -----------------------------------
wide
----------------------------------- */

@media (min-width: 960px)
{
   
   body{
   background-color: transparent;
   background-image: url(../img/fullBackground.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   font-family: Raleway, Optima, "Segoe UI", Arial, sans-serif;
   font-size: 85%;
   }
   
   .container
   {
   max-width: 960px;
   margin: 0 auto;
   background-color: #fff;
   }
   
  .w-3col, .w-2col, .w-1col
   {
   float: left;
   }
   
   .w-3col { width: 100%;}
   .w-2col { width: 66.6666%;}
   .w-1col { width: 33.3333%;}
   
   .socialM{
   max-width: 100%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   ul.social {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.social li, ul.correos li{
   float: left;
   margin-bottom: 0;
   }

   ul.social a{
   margin: 20px 5px 20px 20px;
   display: block;
   width: 60px;
   }
   
   ul.correos, ul.telefono{
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.correos a{
   margin: 0 -30px 15px 20px;
   display: block;
   width: 120px;
   }
   
   ul.telefono li {
   margin-left: 20px;
   }
   
   ul.compromisos, ul.ubicacion{
   list-style: square;
   }

   ul.compromisos li, ul.ubicacion li{
   margin: 0 5% 8px 5%;
   }

   img.lab, img.introImg, img.feeding{
   max-width: 100%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
  img.feeding{
   float: left;
   margin: 8px 1.875% 0 5.208333%;
   }
   
   img.lab{
   float: left;
   margin: 25px 1.875% 0 5.208333%;
   }
   
   img.introImg{
   float: left;
   margin: 25px 1.875% 0 5.208333%;   
   }
   
   p{
   margin: 25px 8% 20px 5.2083333%;
   }
   
   p.presentacion, .solucion{
   margin: 20px 3% 40px 5.2083333%;   
   }
   
   .footerRow{
   background-color: #423c33;
   border-top: solid 2px #000;
   margin-top: 25px;
   }
     
}

/* -----------------------------------
medium
----------------------------------- */
@media (min-width: 575px) and (max-width:959px)
{
   body{
   font-size: 90%;
   }
   
   .m-3col, .m-2col, .m-1col
   {
   float: left;
   }
  
   .m-3col { width: 100%;}
   .m-2col { width: 66.6666%;}
   .m-1col { width: 33.3333%;}
   
   .socialM{
   max-width:100%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   ul.social {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.social li, ul.correos li {
   float: left;
   margin-bottom: 0px;
   }

   ul.social a{
   display: block;
   width: 60px;
   margin: 30px 0 15px 20px;
   }
   
   ul.correos, ul.telefono{
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.correos a{
   margin: 0 0 15px 20px;
   display: block;
   width: 60px;
   }
 
   ul.telefono li {
   margin-left: 20px;
   }
   
   ul.compromisos, ul.ubicacion{
   list-style: square;
   }

   ul.compromisos li, ul.ubicacion li{
   margin: 0 5% 8px 5%;
   }  
   
   img.lab, img.introImg{
   max-width: 60%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   img.lab, img.feeding{
   float: left;
   margin: 8px 1.875% 0 5.208333%;
   }
   
   img.introImg{
   float: left;
   margin: 10px 2.5% 0 5.208333%;
   }
   
   img.feeding{
   max-width: 50%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
    
   p{
   margin: 25px 8% 20px 5.2083333%;
   }
   
   p.presentacion, .solucion{
   margin: 4px 3% 20px 5.2083333%;   
   }
   
   form.formular {
   font-size: .9em;
   padding: 0px;	
   width: 90% !important;
   margin: 30px 5% 0 5%;
   background-color: #eeecc3;
   border: solid 1px rgba(0,0,0,.8);
   opacity: .8;
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   color: #000;
   }
   
   .footerRow{
   background-color: #423c33;
   border-top: solid 2px #000;
   margin-top: 25px;
   }
  
}

/* -----------------------------------
intermedio
----------------------------------- */
@media (min-width: 494px) and (max-width:574px)
{
   body{
   font-size: 95%;
   }
   
   .m-3col, .m-2col, .m-1col
   {
   float: left;
   }
  
   .m-3col { width: 100%;}
   .m-2col { width: 66.6666%;}
   .m-1col { width: 33.3333%;}
   
   .socialM{
   max-width:100%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   ul.social, ul.correos, ul.telefono{
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.social li, ul.correos li{
   float: left;
   margin-bottom: 0px;
   }

   ul.social a{
   display: block;
   width: 50px;
   margin: 30px 0 15px 20px;
   }
 
   ul.correos a{
   margin: 0 0 15px 20px;
   display: block;
   width: 60px;
   }
 
   ul.telefono li {
   margin-left: 20px;
   }
   
   ul.compromisos{
   list-style: square;
   }

   ul.compromisos li{
   margin: 0 5% 8px 5%;
   }  
    
   img.lab, img.feeding{
   float: left;
   margin: 8px 1.875% 0 5.208333%;
   }
   
   img.introImg{
   float: left;
   margin: 10px 2.5% 0 5.208333%;
   }
   
   img.lab, img.introImg, img.feeding{
   max-width: 50%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
     
   p{
   margin: 25px 8% 20px 5.2083333%;
   }
       
   form.formular {
   font-size: .9em;
   padding: 0px;	
   width: 90% !important;
   margin: 30px 5% 0 5%;
   background-color: #eeecc3;
   border: solid 1px rgba(0,0,0,.8);
   opacity: .8;
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   color: #000;
   }
   
   p.presentacion, .solucion{
   margin: 4px 3% 20px 5.2083333% !important;   
   }
   
   .footerRow{
   background-color: #423c33;
   border-top: solid 2px #000;
   margin-top: 25px;
   }
  
}

/* -----------------------------------
narrow
----------------------------------- */

@media (min-width: 300px) and (max-width:493px)
{
   body{
   font-size: 100%;
   }
   
   .n-3col, .n-2col, .n-1col
   {
   float: left;
   }
   
   .n-3col { width: 100%;}
   .n-2col { width: 66.6666%;}
   .n-1col { width: 33.3333%;}
   
   .socialM{
   max-width: 80%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   ul.social {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   ul.social li {
   float: left;
   }

   ul.social a{
   display: block;
   width: 35px;
   margin: 8px 0 10px 8px;
   }
   
   ul.ubicacion, ul.compromisos{
   list-style-type: square; 
   }
   
   ul.ubicacion li, ul.compromisos li{
   margin: 0 5% 8px 1%;
   }
     
   .correos, .telefono, .news{
   display: none;
   }
     
   img.lab, img.feeding, img.introImg{
   max-width: 50%;
   height: auto;   
   width: auto\9; /* ie8 */
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   }
   
   img.lab, img.feeding, img.introImg{
   float: left;
   margin: 25px 1.875% 0 5.208333%;
   }
     
   p{
   margin: 20px 3% 20px 5.2083333%;
   }
   
   p.presentacion, .solucion{
   margin: 4px 3% 20px 5.2083333% !;   
   }
   
   h2{
   font-size: 120%;
   margin-left: 5%;
   }
    
   h2.mision{
   background-color: red;
   border-radius: 2px;
   display: inline-block;
   padding: 0px 3px;
   color: #fff;
   margin-left: 5% !important;
   }
   
   form.formular {
   font-size: .9em;
   padding: 0px;	
   width: 90% !important;
   margin: 30px 5% 0 5%;
   background-color: #eeecc3;
   border: solid 1px rgba(0,0,0,.8);
   opacity: .8;
   -webkit-box-shadow: 7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   -moz-box-shadow:    7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   box-shadow:         7px 7px 5px 0px rgba(119, 119, 119, 0.75);
   color: #000;
   }
   
   .footerRow{
   background-color: #423c33;
   border-top: solid 2px #000;
   margin-top: 25px;
   }
     
}