/* @import url(https://fonts.googleapis.com/css?family=Dosis:600);

$fontMain: 'Dosis', sans-serif;*/



    /**{

      margin: 0;

      padding: 0;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      box-sizing: border-box;

    }                                 nuevo */



   body {

      background-color:#e6e4fb;

      font-family: /*gotham, Arial, Verdana, Helvetica, sans-serif,*/

       Segoe UI, Verdana, Helvetica neue, Candara, Arial, sans-serif; 

       letter-spacing: 0.2pt;

       word-spacing: 0.5pt;

       /* margin-bottom: 80px;

      display: flex;

      flex-direction: column;  para footer*/

      

  }



  header{

      margin: -0.5rem -0.8rem 0 -0.5rem; /*quitar si all*/

    

      background-color: #afaff0;

      border-bottom: 5px #636fad solid;

   }



   header a:hover{

      filter: drop-shadow(2px 2px 3px #3b3878 );

   }



   #logo{

      width: 97%;

      height: auto;    

      max-width: 500px;

      margin: 0.2rem  0.2rem 0 0.2rem;

   }



   .lang{

      position: absolute;

      width:6.5vw;

      height:3vw;

      min-width: 70px;

      min-height: 30px;

      display: inline-block;

      top:0;

      right:0;

      margin: 0.8vw;

   }



   .lang img {

     

     /* transition: opacity 0.s ease-in-out;*/

      width: 3vw;

      min-width: 30px;

      min-height: 30px;

   }



    h1{

      display: none;

   }



   nav{

      margin: 0;

   }



   .lista{

      list-style-type: none;

      margin-left: -2vw;   

   }



   .fila{

    display: inline;        /* Convierte lista vertical en fila */

    padding: 0 1vw 0.2vw 1vw;    /* Separa los elementos de la fila */ 

    font-size: calc(0.4em + 1vw); 

    font-family:Segoe UI; 

   }

   

  #menuA{                /*container del menu pequeño*/

      position: relative;

      margin: 3.5rem 0.5rem 0.5rem 0.5rem; 

      float: right; 

      width: 100%; 

      height: auto;

      z-index: 5;

    }



   nav li{

      list-style:none;     

      }



    nav ul li {

      position:relative;

      width: 100%;

      padding: 0.2em 0.8em;  

     } 



     .showme{                 /* Capa emergente del menuA */ 

    position: absolute; 

    margin: -1em 0 0 1.5em; 

    width: 12em; 

    background-color: #f2edfe; 

    display: none; 

    text-align: left; 

    line-height: 1em;

    border-radius: 5px;

    padding: 0.2em;

    box-shadow:0px 0px 9px gray;

   } 

    .indent{                /* para submenu en modo movil*/

      text-indent: 1.5rem;

    }

   .showhim:hover .showme{ 

    display: block; 

   }

    .showhim:focus .showme{

      display: block;

    }

  



   .menumov {              /* letras del menu*/

    position: absolute;

    text-align: center;

    margin: -2.5em 0 0 0.5em;

    padding: 0.2em 1em 0.2em 1em;

    text-decoration: none; 

    color: royalblue; 

    border-radius: 5px;

    background: #e6e4fb;

    font-family: Segoe UI;

    font-size: 1.4em;

    font-weight: bold;

 }







    nav li a {

        text-decoration:none; 

        color:royalblue; 

        font-size: calc(0.8em + 0.8vw);

        min-width: 110px;

        padding: 0.2rem;  

        white-space:nowrap;         

    }



    nav li a:hover, nav li a:focus {

        background-color:#fff;

        box-shadow: 0px 0px 3px gray;

        border-radius: 5px;

    }



    nav  ul ul li {

       float:none;

       z-index: 20;

       background-color:#e6e4fb;

       width: 9em;

       border-radius: 5px;

    }



    nav li ul{               /*Ocultar enlaces desplegables hasta que se necesiten*/

        display:none;

        position:absolute;

        margin: 0 0.2vw;

        top:100%;

        left:0;

        padding: 0;

        /*box-shadow: 0px 0px 3px gray;*/

        z-index: 10;

    }

            

    nav ul li:hover ul {

      display:block ;

    }   

     nav ul li:focus ul {

      display:block ;

    }  

    

     @media screen and (min-width: 1920px){  /*televisor*/

    #menuA{

        display:none;

    }

    #aboutme{

      margin: 1em 2em 2em 2em;

    }



    /*.fila{    

      font-size: 1.8rem;

      padding: 0rem 2rem 0.4rem 2rem;



    }*/

    #logo{

      max-width: 900px;

    }

    /*nav ul ul li {

       

       

       margin-left: 1.4rem;

    }

    nav li ul{

      width: 14rem;

    }*/

  }





 @media screen and (max-width: 1920px){  /*modo ordenador*/

    #menuA{

        display:none;

    }

    #aboutme{

      margin: 1em 2em 2em 2em;

    }



  }

 @media screen and (max-width: 1000px){  /*de 750 a 1000px*/

    #menuA{

      display:none;

    }

     #aboutme{

      margin: 1em 2em 2em 2em;

    }

  }

 @media screen and (max-width: 750px){  /*modo tablet*/



     .lang{

      position: relative;     

      margin-left: 80vw;

      margin-top: 0;

     }



     .lista {

        display:none;

     }  

     #menuA{

        display:block;

     }

     nav ul ul li {

        margin-top: -0.2rem;

        margin-left: 2.5rem;

        border-radius: 5px;

        z-index: 20;

     } 

     #contenido{

      margin-top: 1.5rem;

     }

     .galeria{

      width: 49.9%;

     }

      section{

      margin-top: 2.5em;

    }

   }



 @media screen and (max-width: 550px){  /*modo movil*/



     #menuA{

        display:block;

     }   

     .galeria{

      width: 90%;

     }

     h5{

      margin-bottom: 3em;

      color:blue;

     }

     #aboutme{

      width: 85%;

    }

   

   }





    #galeria {

  display: none;

}

#galeria:focus {

  display: block;

}

    

/*--------------------------------------------------------------hasta aqui navegador------*/

   main{                     

     position: absolute;

     width: 100%;

      height: auto;  

      margin: 0 auto;

    }



   /*  section{

      margin: -5vw 0 0.5vw 0;

     flex-grow: 1; para posicionar el footer con el body flex

     }*/



  .galeria{                      /*enlaces index*/

       position: relative;

       width: 25%;

       height: 30%;

       margin-top: 3vw;

       /*background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, 1) 0%, rgba(41, 62, 107, 1) 100%);

       background-color:#03023c;*/

       background-color:#3b3878 ;

       text-align:left; 

       box-shadow:0px 0px 9px gray;

       float:left;

       z-index: 1;

       min-width: 300px;

       line-height: 1.5em; 

       font-size: calc(0.6em + 0.6vw);

       } 



    .galeria img{      /*imagenes index*/

      width: 99.2%;

      height: auto;

      border: 1px solid #3b3878;    

       }



    .galeria a{

     

       text-decoration: none;

       color: #e6e4fb;

       

    }   



     .galeria:hover {

     /* transform: scale(1.05);

      transition: 300ms linear;*/

      box-shadow:0px 0px 30px white;

    }



    .galeria p{

      padding:0 1em 0 1em;

    }



    h3{

      position: relative;         /*nombre imagenes index*/

      background-color: #03023c;

      text-align: center;

      z-index: 50;

    }



    /* hasta aquí el index, ahora galerias

    --------------------------------------------------------------*/

    .gal{

      display: inline;

    }



    h2{                     /*titulo paginas*/

      font-family:Segoe UI;

      color: royalblue;

      font-size: calc(1em + 1vw);

      padding-top: 0.5em;

      margin: 0;

    }

    

   article{                      /*caja de las galerias*/

     float: left;

     margin: 4vw 4vw 5vw 1vw;

     min-width: 300px;

     min-height: 380px;

     font-family:Segoe UI;

     text-decoration: none;

     color: royalblue; 

    /* width:300px;

     height: 380px;*/

     width: 19vw;

     height: 24vw;

     background-color:#afaff0;

     text-align:center;

     box-shadow:0px 0px 10px grey;

     position: relative;

  } 

 



   article img:hover{

      box-shadow:0px 0px 30px white;

    } 



    h5{                        /*titulo de la galeria*/

      margin: 0.2em;

      font-size: calc(0.8em + 0.5vw);

    }



    .h5sexta{                /*titulo a partir de la sexta foto*/

      margin-top: -0.8em;

    }



     @supports(object-fit: contain){

    }

    .max {                 /*foto grande galeria*/

      /*height: 300px;

      width: 300px;*/

      width: 19vw;

      height: 19vw;

      min-width: 300px;

      min-height: 300px;

      object-fit: cover;    

      /*padding-bottom: 5px;*/

      padding-bottom: 0.3em;

    }

      

    .mini{                 /*fotos pequeñas de la galeria*/

     /* height: 70px;

      width: 70px;

      left: 3px;*/

      height: 4.4vw;

      width: 4.4vw;

      object-fit: cover; 

      z-index: 3;

      position: relative;

      left: 0.15vw;

      min-width: 70px;

      min-height: 70px;

    }  



    .sexta{               /*fotos que estan debajo de see more*/

     /* height: 70px;

      width: 70px;

      right: 3px;

      bottom: 4px;*/

      height: 4.4vw;

      width: 4.4vw;

      right: 0.25vw;

      bottom: 0.25vw;

      z-index: 2;

      position: absolute;

      opacity: 0;

      min-width: 70px;

      min-height: 70px;

    }

 



   article div {

     display: inline-block;

    }

    

   span.full {                  /*lightbox*/

      z-index: 999999;

      position: fixed;

      height: 100%;

      width: 100%;

      background-color: rgba(0,0,0,0.95);

      top: 0;

      left: 0;

      opacity: 0;

      pointer-events: none;

      cursor: default;

     /* -webkit-transition: opacity 0.2s linear;

      -moz-transition: opacity 0.2s linear;

      -o-transition: opacity 0.2s linear;

      transition: opacity 0.2s linear; */

    }



    span.full img {

      position: fixed;

      background-color: white;

      margin: 0;

      padding: 0;

      max-height: 90%;

      max-width: 90%;

      top: 50%;

      left: 50%;

      margin-right: -50%;

      transform: translate(-50%, -50%);

      box-shadow: 0 0 20px black;

    }

   span.full p{

    

    color: white;

    margin: 3vw 14vw 2vw 14vw;

    position: relative;

    font-size: 1em;

    filter: drop-shadow(1px 1px black);

    

    line-height: 1.5; 

    background-color: rgba(0,0,0,0.4);

   }



a.close,a.prev,a.next {        /*flechas y simbolo cerrar*/

  z-index: 999999;

  position: fixed;

  text-decoration: none;

  visibility: hidden;

  color: white;

  font-size: 40px;

  padding: 25px;

  filter: drop-shadow(1px 1px black);

}



a.close {

  top: 1%;

  right: 1%

}



a.close::after {

  content: '\00d7';

}



a.prev,a.next {

  top: 50%;

  transform: translate(0%, -50%);

}



a.prev {

  left: 5%;

}



a.next {

  right: 5%;

}



a:target ~ a.close,

a:target ~ a.prev,

a:target ~ a.next {

  visibility: visible;

}



a:target > img.thumb + span.full {

  visibility: visible;

  opacity: 1;

  pointer-events: initial;

}



.portraits{                   /*solo pagina portraits*/

       

       width:19vw;

       height: 19vw;

       min-width: 300px;

       min-height: 300px;

       object-fit: cover;

  }



.cuadro{                        /*solo pagina portraits*/

      width:19vw;

       height: 19vw;

       min-width: 300px;

       min-height: 300px;

      object-fit: cover;

      position: relative;

   }



 /*Hasta aqui las galerias, ahora  Contactos/ formulario

 ------------------------------------------------------------------*/

  



    #titulo{            /* titulo de cada página*/

      width: 65%;

      vertical-align: middle;

      display: flex;

      justify-content: center;     

      margin: 1.5em 1em 0 1em;

   /*   border: 1px solid #B8BFCB;

      border-radius: 5px;

      background-color: #f2edfe*/

    }



    #titulo img{

      height:30vw;

      max-height: 12em;

    }



    #titulo h2{

      font-family:Segoe UI;

      color: royalblue;

      font-size: calc(1em + 1vw);

      float: left;

      padding: 6vw 8vw 0 8vw;

    }



    form{

      border-radius:7px;

      background-color:#D4DAE4;

      border:1px solid #B8BFCB;

      padding:1em; 

      float:left;

      width: 85%;

      height: auto;

      text-align: center;

    }



    input{

      background-color:#f2edfe;

      border-radius:4px;

      color:royalblue;

      border: none;

      padding:0.5em;

    }

    input:hover{

      background-color: white;

    }

    textarea{

      width:15em;

      height:6em;

      margin-top:0.5em;

      border-radius:4px;

      color:royalblue;

      font-size:14px;

      padding:0.5em;

      border: none;

      background-color: #f2edfe;

    }

    textarea:hover{

      background-color:white ;

    }

    /*[required]{

      

      border: 1px solid grey;

    }*/

    [placeholder]{

      font-family: Segoe UI;

      color: royalblue;

    }

    #volver {

       background-color:#D4DAE4;

      border-radius:5px;

      border:1px solid #B8BFCB;

      padding:4vw 2vw 2vw 6vw;

      min-height: 3em;

      width: 85%;

    }



    #volver a {

      color:royalblue;

      text-decoration: none;

      font-family: Segoe UI;

      font-size: 1em;

      padding: 0.5em;

      background-color: #f2edfe;

      border-radius: 4px;



    }

    #volver a:hover{

      background-color: white;

    }



    /*} Hasta aqui formulario y ahora about me

    -----------------------------------------------------------*/

  #list{                     /* lista con anclas de about me*/

    color: royalblue;    

    list-style-type: none; 

    margin-left: -2em;

    position: relative;

    font-size: calc(0.6em + 0.5vw);

   }



  #list li{    

     float: left;

     margin:2em 0.8em 2em -0.4em; 

   }



  #list a{

    text-decoration: none;

    color: royalblue; 

  } 



    #list a:hover{

    color: gray; 

  }



  #aboutme{

      position: relative;

      min-width: 300px;

      margin: 4em 1em 1em 0;

      border: 2px solid royalblue;

      box-shadow:0px 0px 10px grey;

      padding: 0.5em;

      font-family: Segoe UI;

      font-size: calc(0.8em + 0.8vw);

     /* letter-spacing: 0.2pt;       para separar entre letras */

     /*word-spacing: 5pt;         para separacion entre palabras */  

     line-height: 1.5em;        /* para la separacion entre lineas */ 

     text-indent: 1.5em;  

     text-align: left;

     width: 85%;

     float: left;

     bottom: 5em;

     }



     #aboutme img{

      width: 45%;

      float: right;

      padding: 0.5em;

     }



     #pics{

      background-color:#f5f4fc;

      padding: 0.2em;

      width: 97%;

      height: auto;

      border-radius: 6px;

      float: left;

      margin:0 0.1em 0.6em 0.1em;

      min-width: 290px;

     }



     #pics img{

      float: left;

      width: 45%;

      min-width: 280px;

     }

     #pics video{

       min-width: 280px;

       width: 95%;

       

     }



     video{

      width: 80vw;

      margin: 1em;

      float: left;

     }

     

    aside{                  /* botones redes sociales*/

      width:3vw;

      min-width: 30px;

      min-height: 200px;

      position:fixed;

      top:40%;

      right:0;

      margin-right: 0.8vw;

      height:22vw;   

      margin-top:-100px;

      z-index: 300;

    }

    

   .contenedor {          /* caja de cada imagen*/

     position: relative;

     height:3vw;

     width:3vw;

     min-width: 30px;

     min-height: 30px;

     margin: 0.2vw 0.2vw 0.2vw 0;

    }



    .contenedor img {     /*imagenes redes sociales*/

      position: absolute;

      left: 0;

     /* transition: opacity 0.s ease-in-out;*/

      width: 3vw;

      min-width: 30px;

      min-height: 30px;

    }



   .contenedor img.top:hover {

     opacity: 0;

    }



    footer{

      font-size: calc(0.5em + 0.5vw);

     

      position: absolute;  

      text-align: center;  

      width: 100%;

      height: auto;

      background-color: #afaff0;

      border-top: 5px royalblue solid;

      margin: 2.5rem -0.5rem 0 -0.5rem;

      top: 99%;

    }

    footer p{

       padding: 0.6rem 1.5rem; 

       line-height: 1.5em;

    }

    iframe{

      padding-top: 1em;

    }