* {
   margin: 0px;
   padding: 0px;
   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
    list-style:none;
   }


h1 {
    font: bold 24px Century, times new roman, sans-serif;
    }
h2 {
   font:bold 18px Century , times new roman, sans-serif;
   
   }
h3{
   font: bold 12px Century, times new roman, sans-serif;
}
@font-face {
font-family:"Century";
src: url("Century.TTF");
}
.tituloedelweiss {
margin:auto;
margin-top:4%;
margin-bottom:4%;
padding: 5px;
color: #8a7348;
background:rgb(230,227,223);
text-shadow: 2px 3px 2px #C0C0C0;
border:1px solid #8a7348;
box-shadow:#C0C0C0 5px 5px 10px;
border-radius:10px;
width:25%;
font: bold 24px Century, times new roman, sans-serif;    
}

.tituloedelweiss:hover{
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transition:-moz-transform 3s;
-webkit-transition:-webkit-transform 3s;
}

h2.pesh2{
font: bold 16px Century, times new roman, sans-serif;
}
h4.subpesh4 {
font: bold 14px Century, times new roman, sans-serif;
list-style:none;    
}
.titulo2{
    text-align: left;
}
header, section, footer, aside , nav , article , figure, figcaption, hgroup{
 display: block;
}
header{
width:90%;
margin:auto;
text-align:center;
}

body {
  text-align: center;
  background-color:rgb(237,240,215);
  background-size:100% 100%;
  background-attachment:fixed;
 }
.contenedor{
text-align: center;
}
.parrafo{
    font: 14px Century, times new roman, sans-serif;
    text-align:justify;
    color: #8a7348;
    width:80%;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 10%;
    margin-right: 10%;
   
}

/*--------------------------------------MENU HORIZONTAL-----------------------------------------------------------------------*/
/*GENERAL*/


nav.navegacion>ul.menu>li>ul.submenu{
   list-style-type: none;  
}
/*ESTILOS PARA PRIMER NIVEL DEL MENU*/
/* En navegacion hacemos un rotulo blanco de 30 px arriba y abajo y auto significa que se queda centrado y fondo blanco,pero quite fondo, arrastra a todo el menu arriba y abajo*/
/*1 nav.navegacion*/
nav.navegacion{
margin: auto;
text-align:center;
width:90%;
margin-top:0%;
margin-bottom:2%;

}

/*2 ul.menu*/

/*list-style-type:none; ul que tiene de identificador a menu*/
nav.navegacion>ul.menu{
list-style:none;
}

/*3 ul.menu li*/
/*Relative para que no se vaya a otro lugar, tienen que estar pegados los signos para funcionar*/
/*Pongo el ancho de la pestaņa y el color de esta*/ 
nav.navegacion>ul.menu>li {
position:relative;
display: inline-block;
background:rgb(237,240,215);
padding:5px;
text-align:center;
text-shadow: 2px 3px 2px #C0C0C0;
border:1px solid #8a7348;
border-radius:8px;
}
nav.navegacion>ul.menu>li:hover{

background: rgb(230,227,223);
box-shadow:2px 2px 2px rgb(138,115,72);
}
/*4 ul.menu li a*/
/*sin decoracion de texto, con color de texto*/

nav.navegacion>ul.menu>li>a{
display:block;
color:rgb(0,0,0);
font-family:"Century";
text-decoration:none;

}

nav.navegacion>ul.menu>li>a:hover{
color:#8a7348;
}


/*ESTILOS PARA SEGUNDO NIVEL DEL MENU*/
/*1 ul.submenu*/
/*Al decir absolute se coloca debajo y el background es lo de las pestaņas delsubmenu y le damos ancho a la pestaņa del submenu de 120% para que sea mas grande que la de arriba*/


nav.navegacion>ul.menu>li>ul.submenu {
position:absolute;
display:none;
border-radius:8px;
list-style-type:none;     
z-index:1;
}

/*2 ul.submenu li*/
nav.navegacion>ul.menu>li>ul.submenu>li{
background:rgb(230,227,223);
border-radius:8px;
box-shadow:2px 2px 2px rgb(138,115,72);
border:1px solid #8a7348;
padding:5px;
}

ul.submenu li:hover {
transform:  translateX(15%);
transition: all 1s;
}


nav.navegacion ul.menu li:hover ul.submenu{
list-style:none;
display:block;

}

/*3 ul.submenu li a*/

/*Le damos forma a las pestaņas del submenu*/
nav.navegacion>ul.menu>li>ul.submenu>li>a{
color: black;
font-family:"Century";
text-decoration:none;
text-align:left;
   }
/*Ahora llamo a las palabras textos del submenu*/
nav.navegacion>ul.menu>li>ul.submenu>li>a:hover{
color:#8a7348;
transition: all .3s;

}


 



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

#cabecera {
 margin-top:0px;
 width:80%;
}
.banneredelweiss{
margin-top:3%;
width:100%;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagen{
margin:auto;
text-align:center;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}

#imagenuno{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagendos{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagentres{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagencuatro{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagencinco{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagenseis{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagensiete{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagenocho{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagennueve{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
#imagendiez{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;  
}
#imagenonce{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;     
}
#imagendoce{
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:100%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;      
}





/*lista de servicios diseņo web*/
.listaservicios {
margin:auto;
clear:both;
width:80%;
margin-top:5%;
margin-bottom:3%;
text-align:justify;
text-decoration:none;
list-style:none;
padding:5% 5%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
background:rgb(230,227,223);
border-radius:10px;
}




.listaservicios:hover{
-moz-transform: translateY(2%);
-webkit-transform: translateY(2%);
-moz-transition:-moz-transform 1s;
-webkit-transition:-webkit-transform 1s;
}

/*lista de fotos que enlazan a videos*/
.listadefotosavideos {
margin:auto;
clear:both;
width:80%;
margin-top:5%;
margin-bottom:3%;
text-align:center;
text-decoration:none;
list-style:none;
padding:5% 5%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
background:rgb(230,227,223);
border-radius:10px;
}


.quehacemos{
font: 16px Century , times new roman, sans-serif;
text-shadow: 2px 3px 4px #C0C0C0;
padding:2%;
color: #8a7348;
text-decoration:none;
list-style:none;
}
.quehacemos:hover{
color:#b37f1e;
}
/*-----------------------------------------footer-----------------------------------------------------*/



/*empresaimagen la imagen en la pagina de empresa*/


.pie {
clear:both;
background:rgb(230,227,223);
box-shadow:rgb(150,150,150)5px 5px 10px;
text-align:left;
padding:1%;
margin:auto;
margin-top:3%;
margin-bottom:0%;
width:80%;
height:30%;
border:1px solid #8a7348;
border-radius:10px;
position:relative;
}

.empresaimagen {
margin:auto;
text-align:left;
margin-top:1%;
margin-bottom:1%;
width:20%;
border:1px solid #8a7348;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:10px;
}
.empresaimagen:hover{
-moz-transform: translateY(2%);
-webkit-transform: translateY(2%);
-moz-transition:-moz-transform 1s;
-webkit-transition:-webkit-transform 1s;

}
.cajalistatelf{
list-style:none;   
}

.abajo{
font: 14px Century , times new roman, sans-serif;
position:relative;
display: inline-block;
text-shadow: 2px 3px 4px #C0C0C0;
color: #8a7348;
text-decoration:none;
text-align:center;
}

.abajo:hover{
color:#b37f1e;
}

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

figcaption {
font: italic 14px Century;
}

#direcciontelf {
margin:auto;
margin-top:2%;
margin-bottom:2%;
width:80%;
padding: 1%;
border:2px solid black;
text-align:left;
text-decoration:none;
}

#videoentrada {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}

#videoosa {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}


#videoatlanta {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videoroma {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videolondon {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videovalenciac {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videovalencias {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videovienna {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videocalifornia {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videoisland {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
#videomiami {
margin:auto;
margin-top:5%;
margin-bottom:1%;
width:80%;
border:1px solid grey;
box-shadow:rgb(150,150,150)5px 5px 10px;
border-radius:8px;
}
legend{
font-size:14px;
   }
#datos_personales{
border-radius:8px;    
}
#formulario1{
width:80%;
margin:auto;
background:#e6e3df;
padding:1% 2%; 
box-sizing: border-box;
margin-top:2%;
border-radius:8px;
box-shadow:rgb(150,150,150)5px 5px 10px;
border:1px solid #8a7348;
text-align: left; 
    
}
label{
font-size:14px;
   }
#nombre{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
    }
#apellidos{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
}
#email{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
}
#telefono{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
}
#asunto{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
}

#mensaje{
width:60%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
min-height:100px;
max-height:200px;
max-width:100%;
}


#enviar{
width:15%;
margin-bottom:2%;
padding:1%;
box-sizing:border-box;
font-size:14px;
margin-left:20%;    
    }

#enviar:hover{
cursor:pointer;
}
#nombre,#apellidos,#email,#telefono,#asunto,#mensaje,label{
margin-left:20%;
}
#form1{
text-align:center;
}
#table1, tr, td{
margin:auto;
width:40%;
border:1px solid #000000;
border-spacing: 2px;
}

@media screen and (min-width:960px) and (max-width:1200px){
  
.tituloedelweiss {
font:bold 20px Century , times new roman, sans-serif;       
    }  

.quehacemos{
font: 14px Century , times new roman, sans-serif;
    }
    
.abajo{
font: 12px Century , times new roman, sans-serif;
    }
legend{
font-size:14px;    
}
#nombre,#apellidos,#email,#telefono,#asunto,#mensaje{
font: 14px Century , times new roman, sans-serif;    
    }    
label{
font-size:14px;       
    }

#enviar{
font: 14px Century , times new roman, sans-serif;        
    }
}


@media screen and (min-width:700px) and (max-width:960px){

.tituloedelweiss {
font:bold 16px Century , times new roman, sans-serif;       
    }
.quehacemos{
font: 12px Century , times new roman, sans-serif;
    } 
.abajo{
font: 12px Century , times new roman, sans-serif;
    }    
    
ul.menu li{
font: bold 12px Century;
  
}
ul.submenu li {
font: bold 12px Century;

}


legend{
font-size:12px;    
} 
#nombre,#apellidos,#email,#telefono,#asunto,#mensaje{
font: 12px Century , times new roman, sans-serif;    
    }
label{
font-size:12px;       
    }

#enviar{
font: 12px Century , times new roman, sans-serif;               
    }    
    
}   

@media screen and (min-width:480px) and (max-width:700px){

h2{
      font: 16px Century , times new roman, sans-serif;
    }
.parrafo{
       font: 12px Century , times new roman, sans-serif; 
    }
.tituloedelweiss {
font:bold 14px Century , times new roman, sans-serif;       
    }
.quehacemos{
font: 12px Century , times new roman, sans-serif;
    }    
.abajo{
font: 10px Century , times new roman, sans-serif;
    }
ul.menu li{
font: bold 12px Century;

}
ul.submenu li {
font: bold 12px Century;
  
}

legend{
font-size:12px;    
}    
#nombre,#apellidos,#email,#telefono,#asunto,#mensaje{
font: 12px Century , times new roman, sans-serif;    
    }
label{
font-size:12px;       
    }

#enviar{
font: 12px Century , times new roman, sans-serif;         
    }    
    
}


@media screen  and (max-width:480px){
h2{
      font: 14px Century , times new roman, sans-serif;
    }
.parrafo{
       font: 12px Century , times new roman, sans-serif; 
    }
.tituloedelweiss {
font:bold 12px Century , times new roman, sans-serif;       
    }
.quehacemos{
font: 12px Century , times new roman, sans-serif;
    }    
.abajo{
font: 10px Century , times new roman, sans-serif;
    }
ul.menu li{
font: bold 12px Century;

}
ul.submenu li {
font: bold 12px Century;
   
}

#direcciontelf {
font:12px Century;
}
#textoempresa  {
font:12px Century;
}
legend{
font-size:12px;    
} 
#nombre,#apellidos,#email,#telefono,#asunto,#mensaje{
font: 12px Century , times new roman, sans-serif;    
    }
label{
 font-size:12px;       
    }
#enviar{
font: 12px Century , times new roman, sans-serif;         
    }    
}

/*Miriam Sinisterra Perez*/