/*--------------------------------------------------------------------------------------------------------MEDIA QUERIES---------------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------------------------------GRANDES MONITORES---------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 1680px){


/*--------------------------------------------------------------------------------general*/
  * {
  margin: 0px;
  padding: 0px;
  font-family:sans-serif;
  color:gray;
}

ul {
  list-style: none;
}

li a {  
  text-decoration: none;
}

#header, #footer{
    position:fixed;   
    display:block;     
    z-index:10;
    text-align:left;
    color: gray;  
    overflow:hidden; 
    height: 100%; 
}

#header{   
    background: lightgray; /*black;/*#d1d380  rojo*/
    left:0px;
    width: 22%;
}

#footer{   
  /*border:1px red solid;*/
    background: white;   
    right:0px;
    width: 15%;
}


/*---------------------------------------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid; */
  position:relative;  
  float:left; 
  width:63%;
  margin-left:22%;
  margin-top:5px;  
  background-color:white;
}

ul.menu li{   
  display:inline;  
  margin-top:1%;  
  margin-left:6.8%; 
  color: #cd2027;
  font:bold 2vh sans-serif ;  
  text-align:center;
}

ul.menu li a{   
   color:gray; /*color:#3f6496, que es azul; */  
   font:bold 1.5vh sans-serif ;   
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
 }

 ul.menu li a:hover{   
   color:#cd2027;
   font:bold 2vh sans-serif ;   
 }

/*--------------------------------------------------------------------------------cabecera - listado de trabajos*/
div.cabecera .logo{
  float:left;  
  width:100%;
  opacity:0.8;
  z-index:-8;
  margin-top:16%;

  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{   
  position:relative;  
  margin-top:30px;
  width:100%;
  height:600px;  
  float:left;  
  overflow:auto;
  
}

div.cabecera .listado ul.list{
  float:right; 
  margin-right:0px;
  margin-top:0px;
  text-align:right;
  padding-right:6%;
  line-height:90%;    
}

div.cabecera .listado ul.list li{
  color:black;  
  margin-top:4%; 
}

div.cabecera .listado ul.list li a{
  font-size:9px;
  color:gray; /* #3f6496 color azul */


    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover {
   color:#cd2027;
   font-size:11px; 
}/*font-weight:bolder;
  font-size:11px;*/
div.cabecera .listado ul.list li a:active{
  color:#cd2027;
  font-size:11px; 
  font-weight:bolder;
}
/*font-size:11px;*/
/*div.cabecera .listado ul.list li.datos{
  font:  14px sans-serif;
  margin-top:6%;
  color:green; 
}*/


/* ---------------------------------------------------------------------------------------------zona principal*/
.proyecto {
  /*border:1px blue solid;*/
  position: relative;   
  margin-left:22%;
  margin-top:4%;
  width: 63%;
  height:750px;/* ------------------700px------------zona principal*/ 
  float:left;
  overflow:hidden;
}

.proyecto img{ 

  position:absolute;
  height:auto;
  width:85%;  
  top:10%;
  left:7%; 
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{ 
  position:absolute;
  height:auto;
  width:85%;   
  top:10%;
  left:7%; 
 
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}


.proyecto .fondo {
  position:absolute;
  height:100%;
  width:85%;   
  top:10%;
  left:7%; 
  padding-right:2%;
z-index:-5;
background-color:white;
text-align:justify;
font: italic 16px sans-serif;
line-height:22px;
overflow:auto;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font-size:1.5vh;
}

#formulario{
  padding-left:17%;
  padding-top:2%;
}
#contactod{
  overflow:visible;
}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:3%;
  float:left;
  margin-left:25%;
  line-height:105px;
  width:55%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color: #c7c8ca;    /*  black */
  margin-top:3%;
  padding:1%; 
  padding-left:4%;

    -webkit-border-radius: 5px 25px;  /* Safari  */
  -moz-border-radius: 5px 25px;     /* Firefox */
      -o-border-radius: 5px 25px;
      -ms-border-radius: 5px 25px;
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{ 
 
 background-color:#cd2027;     /* #3f6496; */      
 font: 4vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:#cd2027;  /* #3f6496; */  
}
div.botonera li a:hover{
  color:white; 
}

div.botonera img{
  height:75px;
  float:right;
  margin-right:2%;  
}


/*------------------------------------------------------------------------------footer - miniaturas de imagenes*/

div.fotitos{
  /*border:1px green solid; */
  position:relative;
  width:90%;
  height:100%; 
  float:left;
  overflow:visible; 
}

div.fotitos div{
  /*border:1px yellow solid;*/
  width:100%;
  position:absolute; 
  top:10%;
  height:72.5%;
  z-index:1; 
  overflow:auto;
  color:white;
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}
div.fotitos div ul{   
  
  margin:auto;
  text-align:center;
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
}

div.fotitos div li{
 margin:0.2%; 
 color:gray;
 font-size:55px; 
}

div.fotitos div li a{
 margin:0.1%; 
 
 font-size:50px;
}

div.fotitos img { 

  height:100px;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}


/*-------------------------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 bottom:20px;
 left:22%;
 width:62%;
 font:italic 12px sans-serif; 
 text-align:center;
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3; 
}

}  

/*--------------------------------------------------------------------------------FIN GRANDES MONITORES-----------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------COMIENZO DESKTOPS Y LAPTOPS-------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



@media only screen and (min-width: 1281px) and (max-width: 1679px){


/*--------------------------------------general*/
  * {
  margin: 0px;
  padding: 0px;
  font-family:sans-serif;
  color:gray;
}

ul {
  list-style: none;
}

li a {  
  text-decoration: none;
}

#header, #footer{
    position:fixed;   
    display:block;     
    z-index:10;
    text-align:left;
    color: gray;  
    overflow:hidden; 
    height: 100%; 
}

#header{   
    background: lightgray;/*#d1d380  rojo*/
    left:0px;
    width: 22%;
}

#footer{   
  /*border:1px red solid;*/
    background: white;   
    right:0px;
    width: 15%;
}

/*----------------------------------------------------menu ppal*/

ul.menu{
  /*border:1px gray solid; */
  position:relative;  
  float:left; 
  width:63%;
  margin-left:22%;
  margin-top:5px; 
  backgroun-color:white; 
}

ul.menu li{   
  display:inline;  
  margin-top:1%;  
  margin-left:6.8%; 
  color: #cd2027;
  font:bold 2.2vh sans-serif ;  
  text-align:center;
}

ul.menu li a{   
   color:gray;   
   font:bold 1.8vh sans-serif ;   
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
 }

 ul.menu li a:hover{   
   color: #cd2027;
   font:bold 2.2vh sans-serif ;   
 }



/*------------------------------------------------cabecera - listado de trabajos*/
div.cabecera .logo{
  
  width:100%;
  opacity:0.8;
  z-index:-8;
  margin-top:8%;

  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{ 

  position:relative;  
  margin-top:8px;
  width:100%;
  height:600px;  
  float:left;  
  
  color:gray;
}


div.cabecera .listado ul.list{
  float:right;
  text-align:right;
  padding-right:6%;
  line-height:90%;
  overflow:auto;
}

div.cabecera .listado ul.list li{
  color:black;
  margin-top:2%; 
}

div.cabecera .listado ul.list li a{
  font-size:9px;
  color:gray; 

    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:#cd2027;
  /*font-weight:bolder;
  font-size:11px;*/
}
div.cabecera .listado ul.list li a:active{
  color:#cd2027;
  /*font-weight:bolder;
  font-size:11px;*/
}

div.cabecera .listado ul.list li.datos{
  font:  14px sans-serif;
  margin-top:6%;
  color:#3f6496;
}
#correo{
  font:  14px sans-serif;
  color:red;
}

/*----------------------------------------------------zona principal*/

.proyecto {  
  position: relative;
  margin-top:1%;
  margin-left:22%;
  width: 63%;
  height:550px;
  float:left;
  overflow:;
}

.proyecto img{ 
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  top: 0%;
  left: 7%; /*como el ancho es 85% dejamos 15% restante, 7% a cada lado */
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{ 
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  top: 0%;
  left: 7%;
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

.proyecto .fondo {
position:absolute;
height:90%;
width:85%;
top:0%;
left:7%;
padding-right:2%;
z-index:-5;
background-color:white;
text-align:justify;
font: italic 14px sans-serif;
line-height:20px;
overflow:auto;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}


.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font-size:2vh;
}

#contactod{
  overflow:visible;
}

#formulario{
  padding-left:17%;
  padding-top:2%;
}

div.botonera{
  margin-top:1%;
  float:left;
  margin-left:25%;
  line-height:125px;
  width:55%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color:#c7c8ca;
  margin-top:4%;
  padding:1%; 
  padding-left:4%;

    -webkit-border-radius: 5px 25px;  /* Safari  */
       -moz-border-radius: 5px 25px;     /* Firefox */
         -o-border-radius: 5px 25px;
        -ms-border-radius: 5px 25px;
            border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#cd2027;
 font: 4vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:#cd2027;
}
div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:48px;
  float:right;
  margin-right:2%;  
}

/*---------------------------------------------------footer - miniatura de imagenes*/
div.fotitos{
  /*border:1px red solid;*/  
  position:relative;
  width:90%;
  height:100%;
  margin-top:0px;
  float:left;
  overflow:visible;
}

div.fotitos div{
  width:100%;
  position:absolute; 
  top:40px;
  height:78.5%;
  z-index:1; 
  overflow:auto;  
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{ 
  margin:auto;
  text-align:center;
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
            column-count: 1;
}

div.fotitos div li{
 margin:0.2%; 
 color:gray;
 font-size:42px;
}

div.fotitos div li a{
 margin:0.1%;  
 font-size:50px;
}

div.fotitos img { 
  height:90px;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*-----------------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 bottom:30px;
 left:25%;
 width:55%;
 font:italic 12px sans-serif; 
 text-align:center;
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3; 
}
}

/*-------------------------------------FIN DESKTOPS Y LAPTOPS -------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------COMIENZO TABLETS PORTRAIT VERTICAL--------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 768px) and (max-width: 1280px) and (orientation:portrait){

/*-----------------------------------------------------general*/ 

* {
  margin: 0px;
  padding: 0px;
  font-family:sans-serif;
  color:gray;
}

ul {
  list-style: none;
}

li a {
  
  text-decoration: none;
}

#header, #footer{   
    float:left;   
    display:block;
    width: 100%;
    background: gray;/* #d1d380 cyan*/  
    z-index:10;
    text-align: center;
    color: gray;   
    overflow:auto;    
}

#header{  
background:lightgray; 
    position:relative;
    margin-top:7px;
    height: 400px; 
    overflow:hidden;
}

#footer{   
    position:fixed;
    height: 100px;
    bottom: 40px; 
    background:white;
    opacity:1;    
}

/*----------------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid; */ 
  position:relative;
  z-index:10;
  width:96%;
  left:2%;
  top:4px;
  text-align:center;
  background-color:white;
  
      -webkit-column-count: 6; /* Chrome, Safari, Opera */
         -moz-column-count: 6; /* Firefox */
              column-count: 6;
}

ul.menu li{   
  display:inline-block;  
  margin-top:5px;
  font:bold 18px sans-serif ;  
  color:#cd2027;
  text-align:center;
}

ul.menu li a{   
   color:gray;
   font:bold 15px sans-serif; 

  -webkit-transition: color 0.5s ease;
     -moz-transition: color 0.5s ease;
       -o-transition: color 0.5s ease;
      -ms-transition: color 0.5s ease;
          transition: color 0.5s ease;
 }

 ul.menu li a:hover{   
   color:#cd2027;
   font:bold 18px sans-serif ; 
 }

/*----------------------------------------------cabecera - listado de trabajos*/
div.cabecera .logo{
  float:left;  
  width:65%;
  margin-left:35%;
  opacity:0.8;
  z-index:-8;
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{
  /*border:1px white solid; */
  position:relative; 
  float:left;   
  margin-top:0px;
  width:99.5%;
  height:210px;   
  overflow:visible;
}

div.cabecera .listado ul.list{
  /*border:1px red solid; */
  width:99%;
  height:auto;
  float:left; 
  margin-left:0%;
  margin-top:0%;  
  text-align:left;
  padding-left:4%;
  line-height:22px; 
  overflow:auto; 

      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3;
       -webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
          -moz-column-gap: 2rem; /* Firefox */
               column-gap: 2rem;
}

div.cabecera .listado ul.list li{
  color:black;
  margin-top:1%; 
}

div.cabecera .listado ul.list li a{
  font-size:12px;
  color:gray; 
  -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:#cd2027;
  /*font-weight:bolder;
  font-size:11px;*/
}

div.cabecera .listado ul.list li.datos{
  /*border:1px blue solid;*/
  
  margin-top:10px;
  margin-left:20%; 
  width:100%;
  color:#3f6496;
      -webkit-column-count: 1 !important; /* Chrome, Safari, Opera */
         -moz-column-count: 1 !important; /* Firefox */
              column-count: 1 !important;
    
}

/*---------------------------------------------------------------zona principal*/
.proyecto {
  /*border:1px blue solid;*/
  position: relative;
  margin-top:5px;
  width: 100%;
  height:450px;
  float:left;  
}

.proyecto img{ 
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  margin-top: 20px;
  left: 7%; /*como el ancho es 85% dejamos 15% restante, 7% a cada lado */
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{ 
  visibility:hidden;
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  margin-top: 20px;
  left: 7%;
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

.proyecto .fondo {
height:450px;
overflow:auto;
position:absolute;
width:80%;
z-index:-5;
/*background-image:url("objetos/infografias/infoobra/info_fondocent.jpg");
background-attachment: inherit;*/
background-color:white;
margin-left:10%;
margin-top:20px;
font: italic 14px sans-serif;
text-align:justify;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font:bold italic 16px sans-serif;
}

#uam_formulario{
  position:absolute;
  top:90px;
  left:3%;
  height:950px;
}

#contactod{
  overflow:visible;
}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:0px;
  float:left;
  margin-left:10%;
  line-height:80px;
  width:75%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color:#c7c8ca;
  margin-top:3%;
  padding:1%; 
  padding-left:4%;

    -webkit-border-radius: 5px 25px;  /* Chrome, Safari, Android, iOs */
  -moz-border-radius: 5px 25px;       /* Firefox */
      -o-border-radius: 5px 25px;     /* Opera */
      -ms-border-radius: 5px 25px;    /* Explorer*/
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#cd2027;
 font: 4vh sans-serif;
 padding:2%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Chrome, Safari, Android, iOs */
       -moz-border-radius: 10px 40px;  /* Firefox */
         -o-border-radius: 10px 40px;  /* Opera */
        -ms-border-radius: 10px 40px;  /* Explorer*/
             border-radius:10px 40px;
}

div.botonera li a{
  color:#cd2027;
}

div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:78px;
  float:right;
  margin-right:3%;  
}

/*---------------------------------------------------------footer - miniatura de imagenes*/

div.fotitos{
  /*border:1px red solid;*/  
  position:relative;
  width:100%;
  height:150px;
  float:right;
  overflow:hidden;
  margin-top:5px;
}

div.fotitos div{
  width:100%;
  position:absolute; 
  margin-bottom:5px;
  overflow:auto;
   z-index:1;
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{   
  font-size:70px;
  margin:auto;
  text-align:center;
}

div.fotitos div li{
 margin:0.2%; 
 color:gray;
 display:inline;
 font-size:42px;
}

div.fotitos div li a{
 margin:0.1%; 
font-size:50px;
}

div.fotitos img { 
  height:60px;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*-----------------------------------------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 top:98%;
 color:black;
 left:10%;
 width:80%;
 font-size:12px;
 font-style:italic;
 text-align:center;
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3; 
}

span.correo{
  color:gray;  
}
}

/*------------------------------------- FIN TABLETS PORTRAIT VERTICAL------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------*/



/*-------------------------------------COMIENZO TABLETS LANDSCAPE APAISADO-------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 768px) and (max-width: 1280px) and (orientation:landscape){


/*---------------------------------------------------------------general*/
* {
  margin: 0px;
  padding: 0px;
  font-family:sans-serif;
  color:gray;
}

ul {
  list-style: none;
}

li a {  
  text-decoration: none;
}

#header, #footer{
    position:relative;
    margin-top:15px; 
    float:left;   
    display:block;   
    z-index:10;
    text-align:left;
    color: gray;  
    overflow:hidden; 
    height: 610px; 
}

#header{
    background: lightgray;       
    width: 30%;
}

#footer{
    background:white;     
    width: 10%;
    margin-left:0px;
    
}

/*-------------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid;  */
  position:relative;  
  width:100%;
  left:0%;
  top:4px;
  background-color:white;
  text-align:center;
      -webkit-column-count: 6; /* Chrome, Safari, Opera */
         -moz-column-count: 6; /* Firefox */
              column-count: 6;
}

ul.menu li{   
  display:block;  
  margin-top:1%;
  margin-left:4%;
  color: #cd2027;
  font:bold 18px sans-serif ;
  text-align:center; 
}

ul.menu li a{   
   color: gray;
   font:bold 15px sans-serif ;     
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
 }

 ul.menu li a:hover{   
   color: #cd2027;
   font:bold 18px sans-serif ;   
 }


/*--------------------------------------------------------------------------cabecera - listado de trabajos*/ 
div.cabecera .logo{
  float:left;  
  width:100%;
  opacity:0.8;
  z-index:-8;
  margin-top:1%;

  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{ 
  position:relative;  
  margin-top:34%;
  width:100%;
  height:auto; 
  overflow:auto; 
  color:gray;  
}

div.cabecera .listado ul.list{
  float:right; 
  text-align:right;
  padding-right:6%;    
  line-height:90%; 
  
  
}

div.cabecera .listado ul.list li{
  color:black;
  margin-top:2%;   
}

div.cabecera .listado ul.list li a{
  font-size:13px;
  color:gray; 
    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:#cd2027;
}

div.cabecera .listado ul.list li.datos{
  font:  14px sans-serif;
  margin-top:6%;
  color:#3f6496; 
}

/*----------------------------------------------------------------------------------------zona principal*/
.proyecto { 
  /*border:1px red solid;*/
  position: relative; 
  float:left;
  margin-left:0px;
  margin-top:15px;  
  width: 59%;
  height:610px;
  overflow:hidden;
}

.proyecto img{   
  position:absolute;
  height:auto;
  width:90%;
  top: 25px;
  left: 5%; 
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{   
  position:absolute;
  height:auto;
  width:90%;
  top: 60px;
  left: 5%;
  z-index:-1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

.proyecto .fondo {
position:absolute;
height:100%;
width:90%;
top: 25px;
left: 5%;
padding-right:2%;
z-index:-5;
background-color:white;
text-align:justify;
font: italic 16px sans-serif;
line-height:22px;
overflow:auto;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font:bold italic 17px sans-serif;
}

#formulario{
  
}
#contactod{

}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:3%;
  float:left;
  margin-left:5%;
  line-height:60px;
  width:46%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color:#c7c8ca;
  margin-top:3%;
  padding:1%; 
  padding-left:4%;

    -webkit-border-radius: 5px 25px;  /* Safari  */
  -moz-border-radius: 5px 25px;     /* Firefox */
      -o-border-radius: 5px 25px;
      -ms-border-radius: 5px 25px;
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#cd2027;
 font: 4vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:#cd2027;
}
div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:50px;
  float:right;
  margin-right:5%;  
}




/*--------------------------------------------------------------------------footer - miniaturas de imagenes*/
div.fotitos{
  /*border:1px green solid;  */
  position:relative;
  width:100%;
  height:100%;
  float:right;
  overflow:hidden;
  display:block;
}

div.fotitos div{
  width:96%;
  position:absolute; 
  margin-top:0%;
  height:90%;  
  overflow:auto;
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{   
  text-align:center;
}

div.fotitos div li{
 margin:0.2%;  
}

div.fotitos div li a{
 margin:0.1%;  
 }

div.fotitos img { 
  width:100%;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*---------------------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 top:500px;
 color:black;
 left:30%;
 width:57%;
 font-size:12px;
 font-style:italic;
 text-align:center;
 opacity:0;
      -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
 
}

}
/*-------------------------------------FIN TABLETS LANDSCAPE APAISADO------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/




/*-----------------------------COMIENZO SMARTPHONE LG APAISADO-------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 481px) and (max-width: 767px){


/*---------------------------------------------------------------general*/
* {
  margin: 0px;
  padding: 0px;
  font-family:sans-serif;
  color:gray;
}

ul {
  list-style: none;
}

li a {  
  text-decoration: none;
}

#header, #footer{
    position:relative;
    margin-top:15px; 
    float:left;   
    display:block;   
    z-index:10;
    text-align:left;
    color: gray; 
     overflow:auto;
    
    height: 260px; 
}

#header{
    background: black;       
    width: 30%;
}

#footer{
    background:white;     
    width: 10%;
    
}

/*-------------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid;  */
  position:relative;  
  width:100%;
  left:0%;
  top:4px;
  background-color:white;
  z-index:15;
    text-align:center;
      -webkit-column-count: 6; /* Chrome, Safari, Opera */
         -moz-column-count: 6; /* Firefox */
              column-count: 6;

}

ul.menu li{   
  display:block;  
  margin-top:1%;  
  color: black;
  font:bold 16px sans-serif ;
  
}

ul.menu li a{   
   color: #3f6496;
   font:bold 13px sans-serif ;     
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
 }

 ul.menu li a:hover{   
   color: gray;
   font:bold 16px sans-serif ;   
 }

/*--------------------------------------------------------------------------cabecera - listado de trabajos*/ 
div.cabecera .logo{
  float:left;  
  width:100%;
  opacity:0.8;
  z-index:-8;
  margin-top:1%;

  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{ 
  position:absolute;  
  margin-top:34%;
  width:100%;
  height:auto; 
  overflow:auto; 
  color:gray;  
}

div.cabecera .listado ul.list{
  float:right; 
  text-align:right;
  padding-right:6%;    
  line-height:90%;  
}

div.cabecera .listado ul.list li{
  margin-top:2%;   
}

div.cabecera .listado ul.list li a{
  font-size:9px;
    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:white;
}

div.cabecera .listado ul.list li.datos{
  font:  13px sans-serif;
  margin-top:6%;
  color:gray; 
}

/*----------------------------------------------------------------------------------------zona principal*/
.proyecto {  
  position: relative; 
  margin-top:15px;  
  width: 59%;
  height:260px;
  float:left;
  overflow:hidden;
}

.proyecto img{   
  position:absolute;
  height:auto;
  width:90%;
  top: 25px;
  left: 5%; 
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{   
  position:absolute;
  height:auto;
  width:90%;
  top: 60px;
  left: 5%;
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

.proyecto .fondo {
position:absolute;
height:100%;
width:90%;
top: 25px;
left: 5%;
padding-right:2%;
z-index:-5;
background-color:white;
text-align:justify;
font: italic 16px sans-serif;
line-height:22px;
overflow:auto;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font-size:5vh;
}

#formulario{
  
}
#contactod{

}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:3%;
  float:left;
  margin-left:5%;
  line-height:105px;
  width:46%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color:black;
  margin-top:3%;
  padding:1%; 
  padding-left:4%;

    -webkit-border-radius: 5px 25px;  /* Safari  */
  -moz-border-radius: 5px 25px;     /* Firefox */
      -o-border-radius: 5px 25px;
      -ms-border-radius: 5px 25px;
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#3f6496;
 font: 4vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:#3f6496;
}
div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:22px;
  float:right;
  margin-right:5%;  
}




/*--------------------------------------------------------------------------footer - miniaturas de imagenes*/
div.fotitos{
  /*border:1px red solid;*/  
  position:relative;
  width:100%;
  height:100%;
  float:right;
  overflow:hidden;
  display:block;
}

div.fotitos div{
  width:96%;
  position:absolute; 
  margin-top:0%;
  height:90%;  
  overflow:auto;
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{   
  text-align:center;
}

div.fotitos div li{
 margin:0.2%;  
}

div.fotitos div li a{
 margin:0.1%;  
 }

div.fotitos img { 
  width:100%;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*---------------------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 top:85%;
 color:black;
 left:30%;
 width:57%;
 font-size:12px;
 font-style:italic;
 text-align:center;
 opacity:0;


      -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
 
}

}


/*-----------------------------FIN SMARTPHONE LG APAISADO------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------COMIENZO SMARTPHONES LANDSCAPE APAISADO---------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/



@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation:landscape){

}

/*-------------------------------------FIN SMARTPHONES LANDSCAPE APAISADO--------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/




/*---------------------------------COMIENZO SMARTPHONES PORTRAIT VERTICAL--------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation:portrait){

/*---------------------------------------------general*/
  * {
  margin: 0px;
  padding: 0px;
  font-family:verdana;
  color:gray;
}

ul {
  list-style: none;
}

li a { 
  text-decoration: none;
}

#header, #footer{   
    float:left;   
    display:block;
    width: 100%;
    background: black;/* #d1d380 cyan*/  
    z-index:10;
    text-align: center;
    color: gray;   
    overflow:auto;    
}

#header{   
    position:relative;    
    height: 130px; 
    overflow:auto;
}

#footer{  
    /*border:1px blue solid;  */
    position:relative;
    height: 100px; 
    background-image: url("objetos/logo.png");  
    background-size: 10%; 
    background-repeat:repeat-x; 
}

/*-------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid; */
  position:relative;  
  width:100%;
  height:50px;
  padding-left:4%;    
  z-index:10;
  
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3;
}

ul.menu li{   
  display:inline-block;  
  margin-top:4px;
  color:black;
  font:bold 2.8vh sans-serif ;
  text-align:center;  
}

ul.menu li a{   
   color:#3f6496;
   font:bold 2.5vh sans-serif ;  

  -webkit-transition: color 0.5s ease;
     -moz-transition: color 0.5s ease;
       -o-transition: color 0.5s ease;
      -ms-transition: color 0.5s ease;
          transition: color 0.5s ease;
 }

 ul.menu li a:hover{   
   color:gray;
   font:bold 3vh sans-serif ;
 }

/*-------------------------------------------------cabecera - listado de trabajos*/
div.cabecera .logo{ 
  float:left;
  width:45%; 
  height:auto;   
  margin-top:20%;
  margin-left:2%;
 
  opacity:0.8;
  z-index:-8; 
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{  
  /*border:1px red solid;*/
  float:right; 
  margin-top:2%; 
  width:50%;
  height:auto;  
  color:#3f6496;
}


div.cabecera .listado ul.list{ 
  float:left;  
  text-align:left;  
  line-height:100%;  
}

div.cabecera .listado ul.list li{
  font-size:2.5vh;
  margin-top:0.4%; 
}

div.cabecera .listado ul.list li a{
  font-size:2.2vh;  
    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:white;
}

div.cabecera .listado ul.list li.datos{
  font:  11px sans-serif;
  margin-top:7%;
  color:gray; 
}


/*--------------------------------------zona principal*/
.proyecto {
  /*border:1px yellow solid;*/
  position: relative;  
  width: 100%;
  height:240px;
  float:left;  
  overflow:hidden;
}

.proyecto img{  
  position:absolute;   
  width:85%;
  padding-top: 2%;
  left: 7%; /*como el ancho es 85% dejamos 15% restante, 7% a cada lado */
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{   
  position:absolute;  
  width:85%;
  padding-top: 2%;
  left: 7%;
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

.proyecto .fondo {
/*border:1px green solid; */ 
position:absolute;
height:95%;
width:85%;
top: 0%;
left: 7%;
padding-top:2%;
padding-right:2%;
z-index:-5;
background-color:white;
text-align:justify;
font: italic 16px sans-serif;
overflow:auto;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

.proyecto .fondo h6{
  font-size:2.5vh;
}

#formulario{ 
}

#contactod{
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:0%;
  float:left;
  margin-left:3%;
  line-height:105px;
  width:91%;
}

div.botonera li{
  color:white;
  font: 4vh sans-serif;
  width:100%;
  background-color:black;
  margin-top:4%;
  padding:1%; 
  padding-left:4%;
  
 -webkit-border-radius: 5px 25px;  /* Safari  */
    -moz-border-radius: 5px 25px;     /* Firefox */
      -o-border-radius: 5px 25px;
     -ms-border-radius: 5px 25px;
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#3f6496;
 font: 3vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:gray;
}

div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:25px;
  float:right;
  margin-right:6%;  
}

/*--------------------------------------------footer - miniaturas de imagenes*/
div.fotitos{
  /*border:1px red solid;*/  
  position:relative;
  width:100%;
  height:100px;
  float:right;  
  overflow:auto; 
  
}

div.fotitos div{
  width:100%;
  position:absolute; 
  top:15px;
  bottom:3px;   
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{   
  font-size:30px;
  margin:auto;
  text-align:center;  
}

div.fotitos div li{
 margin:0.2%; 
 display:inline;
}

div.fotitos div li a{
 margin:0.1%;  
 font-size:25px;
}

div.fotitos img { 
  height:50px;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*--------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:relative;
 padding-top:1%;
 color:black;
 left:20%;
 width:57%;
 height:auto;
 font-size:12px;
 font-style:italic;
 text-align:center;



      -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
 
}
}
/*---------------------------------FIN SMARTPHONES PORTRAIT VERTICAL--------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------COMIENZO SMARTPHONES PEQUEÑOS-------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/


@media only screen and (max-width: 319px){

/*---------------------------------------------general*/
  * {
  margin: 0px;
  padding: 0px;
  font-family:verdana;
  color:gray;
}

ul {
  list-style: none;
}

li a {  
  text-decoration: none;
}

#header, #footer{   
    float:left;   
    display:block;
    width: 100%;
    background: black;/* #d1d380 cyan*/  
    z-index:10;
    text-align: center;
    color: gray;   
    overflow:auto;    
}

#header{   
    position:relative;
    margin-top:7px;
    height: 190px; 
    overflow:hidden;
}

#footer{   
    position:fixed;
    height: 100px;
    bottom: 40px; 
    background:white;
    opacity:1;    
}

/*-------------------------------------------------menu ppal*/
ul.menu{
  /*border:1px gray solid;  */
  position:relative;
  z-index:10;
  width:96%;
  left:2%;
  top:4px;
  text-align:center;
  
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
              column-count: 3;
}

ul.menu li{   
  display:block;  
  margin-top:5px;
}

ul.menu li a{   
   color:#3f6496;
   font-size:15px;
   font-style:bold;

  -webkit-transition: color 0.5s ease;
     -moz-transition: color 0.5s ease;
       -o-transition: color 0.5s ease;
      -ms-transition: color 0.5s ease;
          transition: color 0.5s ease;
 }

 ul.menu li a:hover{   
   color:white;
 }

/*-------------------------------------------------cabecera - listado de trabajos*/
div.cabecera .logo{
  float:left;
  height:100px;
  width:300%;
  margin-left:5%;
  opacity:0.8;
  z-index:-8;  

  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

div.cabecera .logo:hover{ 
  opacity:0.4; 
}

div.cabecera .listado{
  position:absolute; 
  float:left;   
  margin-top:100px;
  width:100%;
  height:95px;  
  overflow:scroll; 
}


div.cabecera .listado ul.list{ 
  float:left; 
  margin-left:7%;
  margin-top:0%;
  text-align:left;
  padding-left:2%;
  line-height:22px;  
}

div.cabecera .listado ul.list li{
  margin-top:1%; 
}

div.cabecera .listado ul.list li a{
  font-size:12px;
  color:white; 
    -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}

div.cabecera .listado ul.list li a:hover{
  color:black;
}

div.cabecera .listado ul.list li.datos{

}


/*--------------------------------------zona principal*/
.proyecto {
  /*border:1px blue solid;*/
  position: relative;
  margin-top:5px;
  width: 100%;
  height:600px;
  float:left;  
}

.proyecto img{ 
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  top: -300px;/*estaba a -80px*/
  left: 7%; /*como el ancho es 85% dejamos 15% restante, 7% a cada lado */
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto img:target {
  z-index: 1;
}

.proyecto img:not(:target) {
  opacity: 0;
}

.proyecto video{ 
  margin:0px;
  position:absolute;
  height:auto;
  width:85%;
  top: -80px;
  left: 2%;
  z-index: -1;  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}

.proyecto video:target {
  z-index: 1;
}

.proyecto video:not(:target) {
  opacity: 0;
}

img.diapositiva{ 
  padding-top:25%;/*estaba a 80px*/
}

.proyecto .fondo {
height:380px;
overflow:auto;
position:absolute;
width:80%;
z-index:-5;
/*background-image:url("objetos/infografias/infoobra/info_fondocent.jpg");
background-attachment: inherit;*/
background-color:white;
margin-left:10%;
margin-top:20px;
text-align:justify;
opacity:0.8;

  -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
       -o-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
          transition: opacity 2s ease;
}

.proyecto .fondo:target {
  z-index: 1;
}

.proyecto .fondo:not(:target) {
  opacity: 0;
}

#formulario{
  position:absolute;
  top:120px;
  left:3%;
  height:900px;
}

#contactod{
}

#consulta{
  width:auto;
}

div.botonera{
  margin-top:0%;
  float:left;
  margin-left:3%;
  line-height:105px;
  width:91%;
}

div.botonera li{
  color:white;
  font: 6vh sans-serif;
  width:100%;
  background-color:black;
  margin-top:3%;
  padding:1%; 
  padding-left:4%;
  
 -webkit-border-radius: 5px 25px;  /* Safari  */
    -moz-border-radius: 5px 25px;     /* Firefox */
      -o-border-radius: 5px 25px;
     -ms-border-radius: 5px 25px;
          border-radius:5px 25px;
  -webkit-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
     -moz-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
       -o-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
      -ms-transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
          transition: color 2s linear, background-color 1s ease, font 2s linear, border-radius 2s ease-in, opacity 2s linear 3s, padding 2s linear, font 2s ease-in;
}

div.botonera li:hover{  
 background-color:#3f6496;
 font: 4vh sans-serif;
 padding:3%;
 opacity:20%;
    -webkit-border-radius: 10px 40px;  /* Safari  */
       -moz-border-radius: 10px 40px;     /* Firefox */
         -o-border-radius: 10px 40px;
        -ms-border-radius: 10px 40px;
             border-radius:10px 40px;
}

div.botonera li a{
  color:gray;
}

div.botonera li a:hover{
  color:white;
}

div.botonera img{
  height:25px;
  float:right;
  margin-right:2%;  
}

/*--------------------------------------------footer - miniaturas de imagenes*/
div.fotitos{
  /*border:1px red solid;*/  
  position:relative;
  width:100%;
  height:65px;
  float:right;
  overflow:hidden;
  margin-top:5px;
}

div.fotitos div{
  width:100%;
  position:absolute; 
  margin-bottom:5px;
}

div.fotitos div:target {
  z-index: 1;  
}

div.fotitos div:not(:target) {
  opacity: 1;
}

div.fotitos div ul{   
  font-size:30px;
  margin:auto;
  text-align:center;
}

div.fotitos div li{
 margin:0.2%; 
 display:inline;
}

div.fotitos div li a{
 margin:0.1%;  
 font-size:25px;
}

div.fotitos img { 
  height:50px;
  z-index:-1;   
  -webkit-transition: opacity 1s ease;
     -moz-transition: opacity 1s ease;
       -o-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
          transition: opacity 1s ease;
}

/*--------------------------------------------pie con datos de contacto*/
ul.inferior{
 position:absolute;
 top:85%;
 color:black;
 left:20%;
 width:57%;
 font-size:12px;
 font-style:italic;
 text-align:center;

      -webkit-column-count: 1; /* Chrome, Safari, Opera */
         -moz-column-count: 1; /* Firefox */
              column-count: 1;
 
}  

}

/*------------------------------------------FIN SMARTPHONES PEQUEÑOS-------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------*/