*{
    margin: 0;
    padding: 0;}
body{ 
    margin: 0 auto;
    max-width: 2000px;}

/*Fuentes*/
@font-face {
    font-family: "opensans";
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: "opensanslight";
    src: url('../fonts/OpenSans-Light.eot');
    src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light.woff') format('woff'),
         url('../fonts/OpenSans-Light.ttf') format('truetype');}
@font-face {
    font-family: "opensansbold";
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold.woff') format('woff'),
         url('../fonts/OpenSans-Bold.ttf') format('truetype');}
@font-face {
    font-family: "opensansitalic";
    src: url('../fonts/OpenSans-Italic.eot');
    src: url('../fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic.woff') format('woff'),
         url('../fonts/OpenSans-Italic.ttf') format('truetype');}
@font-face {
    font-family: "Daniel-Regular";
    src: url('../fonts/Daniel-Regular.eot');
    src: url('../fonts/Daniel-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Daniel-Regular.woff') format('woff'),
         url('../fonts/Daniel-Regular.ttf') format('truetype');}

/*Boton arriba*/
.ir-arriba {
	display:none;
	width: 40px;
    border-radius: 20px;
	height: 40px;
    background-color: rgba(0,113,188,0.7);
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;}
.subir{
    width: 90%;
    margin: 5%;}

/*Botonera*/
nav{
    width: 100%;
    height: auto;
    z-index: 100;
    float: left;
    max-width: 2000px;
    position: fixed;}
.menu{
    width: 96%;
    float: left;
    font-family: opensansbold;
    letter-spacing: 2px;
    padding: 1% 2%;
    background-color: rgba(0,113,188,0.7);}
.menu a{
    text-decoration: none;
}
.logonav{
    height: 60px;
    margin: 5px;
    transition: .3s;
    float: left;}
.logonav:hover{
    opacity: .5;
}
.menu ul{
    width: auto;
    float: right;
    color: white;
    margin-top: 18px;
    display: flex;}
.menu ul a{ 
    color: white;
    margin: 0;}
.menu li{
    width: auto;
    float: right;
    text-align: center;
    display: block;
    color: white;
    transition: .3s;
    margin: 0px 14px;
    padding: 10px 1px;}
.menu li:hover{
    text-shadow: 2px 2px rgba(204,204,204,1.0);
}
#redesnav{
    float: right;
    height: 50px;
    width: auto;
    margin-top: 15px;}
.rednav{
    transition: .3s;
    height: 30px;
    margin: 7px 5px;
    float: left;}
.rednav:hover{
    opacity: .5;
}
#btn-menu{
    display: none;
    float: left;
    margin: 0;}
#iconomenu{    
    width:100%;
}
#iconomenu2{    
    width:100%;
}
.abrir{
    display:none;
    float: left;
    width:30px;
    height: 30px;
    padding: 10px;}
.cerrar{
    display:none;
    float: left;
    width:30px;
    height: 30px;
    padding: 10px;}
.abrir:hover{
    cursor:pointer;
    background: rgba(0,0,0,0.3);}
.logonavrespon{
    display: none;
}
#redesnavresponsive{
    display: none;
}

@media (max-width:850px){ 
    .logonavrespon{
        display: block;
        float: right;
        height: 40px;
        margin: 5px;}
    .logonav{
        display: none;}
    nav{
        height: 50px;
        background-color: rgba(0,113,188,0.7);
        transition: .3s;}
    nav .abrir{
        display: block;}
    .cerrar{
        display: none;}
    .menu{
        position: absolute;
        height: auto;
        width:80%;        
        background-color: rgba(0,113,188,0.7);
        margin-top: 50px;
        color: white;
        margin-left: -85%;
        transition: all .5s;}    
    .menu ul a{ 
        color: white;}
    .menu ul{
        width: 100%;
        flex-direction: column;}   
    .menu li{
        border-top: 1px solid white;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        border-right: 0px;}
    #btn-menu:checked ~ .menu{
        margin-left:0;} 
    #btn-menu:checked ~ .cerrar{
        display: block;} 
    #btn-menu:checked ~ .abrir{
        display: none;}    
    #redesnav{
        display: none;}
    #redesnavresponsive{
        display: block;
        width: 100%;
        float: left;
        text-align: center;}
    .rednavresp{
        width: 16%;}
}

/*header*/
header{    
    width: 100%;
    height: auto;
    float: left;
    background-image: url(../img/header.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
.logoheader{
    width: 50%;
    margin: 15% 25%;
}
@media (max-width:600px){
    .logoheader{
        width: 80%;
        margin: 35% 10%;}
    header{   
        background-position: left;}
}

/*Contenedores generales*/
.relleno{
    width: 100%;
    height: 160px;
    float: left;}
.conte{
    width: 100%;
    height: auto;
    float: left;}
@media (max-width:600px){ 
    .relleno{
        height: 70px;}
}

/*quienessomos*/
.quienessomos{
    width: 100%;
    margin-top: -10%;
    float: left;}
.quienessomos2{
    width: 60%;
    float: left;
    text-align: center;
    font-family: opensans;
    font-size: 14px;
    background: white;
    box-shadow: 2px 2px 0.4em grey;
    padding: 3% 5%;
    margin: -5% 15% 2%;
    z-index: 10;}
p.textoquienesomos{
    font-family: sans-serif;
}
h2{
    font-family: opensans;
    letter-spacing: 2px;
    color:rgba(0,113,188,1.0);
    text-shadow: 2px 2px grey;
    line-height: 80px;
    font-size: 28px;}
#redesquienessomos{
    width: 200px;
    height: auto;
    margin: 0 auto;
    margin-top: 20px;}
.redquienes{
    width: 40px;
    margin: 5px;
    padding: 5px;
    background: rgba(0,113,188,1.0);
    float: left;
    transition: .3s;}
.redquienes:hover{
    background: rgba(204,204,204,0.8);
    border-radius: 20px;
}

@media (max-width:1020px){
    .quienessomos2{
        margin: -10% 7% 2%;
        width: 76%;
    }
}
@media(max-width:768px){ 
    .quienessomos{
        margin-top: -15%;}
    .quienessomos2{
        width: 80%;
        font-size: 12px;
        padding: 3% 5%;
        margin: -10% 5% 5%;}
}
@media(max-width:600px){ 
    .quienessomos{
        margin-top: -20%;}
}

/*imagenfija*/
.imagenfija{
    width: 100%;
    height: 300px;
    float: left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;}
.foto1{
    background-image: url(../img/foto2.jpg);
}
.foto2{
    background-image: url(../img/foto2.jpg);
}

/*Embarcaciones*/
.embarcaciones2{
    width: 100%;
    max-width: 1500px;
    background: red;
    margin: 0 auto;
}
.titulo{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    height: auto;
    float: left;}
.lineatitulo{
    width: 29%;
    border: 1.5px solid rgba(0,113,188,1.0);
    margin-top: 10px;
    float: left;}
.textotitulo{
    width: 40%;
    float: left;
    font-family: Daniel-Regular;
    font-size: 40px;
    text-align: center;}

.imagenes{
    width: 40%;
    padding: 5%;}
.izquierda{
    float: left;
    text-align: left;}
.derecha{
    float: right;
    text-align: right;}
 
.fotogrande1{
    width: 100%;
    height: 300px;
    background: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;}
.fotogrande2{
    width: 100%;
    height: 300px;
    background: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;}

/*class con fotos de fondo*/
.producto1-foto1{ 
    background-image: url(../img/producto2-dalca/1.jpg);}
.producto1-foto2{ 
    background-image: url(../img/producto2-dalca/2.jpg);}
.producto1-foto3{ 
    background-image: url(../img/producto2-dalca/4.jpg);}
.producto2-foto4{ 
    background-image: url(../img/producto1-yakus/1.jpg);}
.producto2-foto5{ 
    background-image: url(../img/producto1-yakus/2.jpg);}
.producto2-foto6{ 
    background-image: url(../img/producto1-yakus/3.jpg);}
.opacidad{
    opacity: .6;}

.imgchicas{
    width: 100%;
    height: auto;
    margin-top: 1%;
    float: left;
    background-color: rgba(0,113,188,0.7);}
.producto{
    width: 30%;
    height: auto;
    float: left;
    cursor: pointer;
    margin: 3% 1.5%;}

.informacion{
    width: 42%;
    height: auto;
    padding: 5% 2.5%;}
.tituloproducto{
    width: 100%;
    height: 40px;
    line-height: 60px;
    font-size: 20px;
    margin-bottom: 2%;
    float: left;
    font-family: Daniel-Regular;}
.parrafoproducto{
    width: 100%;
    font-family: sans-serif;
    font-size: 13px;
    text-align: justify;}
h4{
    text-transform: uppercase;
    background: white;
    font-family: opensansbold;
    font-size: 16px;
}

.infodetalle{
    font-family: opensans;
    float: left;
    width: 100%;
    margin-top: 2%;
    padding: 2%;
    background: rgba(0,113,188,0.7);}
.listaderecha{
    list-style: none;
    text-align: right;
    float: right;
    width: 50%;}
.listaizquierda{
    list-style: none;
    float: left;
    width: 46%;}
.listaderecha li{
    height: 40px;
    line-height: 30px;}
.listaizquierda li{
    height: 30px;
    text-align: left;}
.ico{
    width: 30px;
}
.izqaa{
    margin-top: -10px;
    width: 20px;
}
.textosinico{
    width: 100%;
    float: right;
    font-size: 13px;
    font-family: opensansbold;
    margin-top: 2%;}
.pedirinfo{
    width: 100%;
    float: left;}
.pedirinfoboton{
    width: 100%;
    margin-top: 1%;
    height: 40px;
    text-align: center;
    color: black;
    background: grey;
    border: 0px;
    transition: .3s;
    letter-spacing: 2px;
    cursor: pointer;}
.pedirinfo:hover{
    opacity: 0.5;
    letter-spacing: 4px;
}

.imagenesresponsive{
    display: none;
}

.responsiveul{
    display: none;
}

@media(max-width:1100px){
    .listaderecha li{
        font-size: 13px;
    }
    .listaizquierda li{
        font-size: 13px;
    }
}

@media(max-width:880px){
    .textotitulo{
        font-size: 25px;
    }
    .imagenes{
        display: none;
    }
    .tituloproducto{ display: none;}
    .informacion{
        width: 90%;
        height: auto;
        margin: 0%;
        float: left;
        padding: 5%;}
    .infodetalle{
        width: 96%;
        margin:0%;
        margin-top: 2%;
        padding: 2%;}
    .imagenesresponsive{
        display: block;
        width: 90%;
        margin: 5%;
        float: left;
        margin-top: -2%;
        background: rgba(0,113,188,0.7);
    }
    .productoresponsive{
        width: 30%;
        float: left;
        margin: 1.5%;}
}


@media(max-width:600px){
    .tituloproducto{
        text-align: center;
        height: 60px;
        line-height: 80px;
        font-size: 30px;}
    .infodetalle{
        margin-top: 5%;}
    .textosinico{
        text-align: center;}
    .lineatitulo{
        display: none;}
    .textotitulo{
        width: 100%;
        text-align: center;}
}

@media(max-width:450px){
 
    .listaderecha{
        display: none;}
    .listaizquierda{
        display: none;}
    .responsiveul{
        display: block;
        width: 100%;
        list-style: none;
        text-align: center;}
    .responsiveul li{
        width: 100%;
        height: 30px;}
}



/*contacto*/
#datos{
    width: 100%;
    height: auto;
    font-family: opensans;
    float: left;}
#datosizquierda{
    width: 28%;
    float: left;
    margin-left: 20%;
    text-align: center;
    height: auto;}
#datosderecha{
    width: 28%;
    float: right;
    text-align: center;
    margin-right: 20%;
    height: auto;}
#datosderecha a{
    color: black;
    text-decoration: none;}
.iconodato{
    width: 40px;
}

#formulario{
    width: 80%;
    float: left;
    margin: 2% 10%;}
h3{
    text-align: center;
    font-family: opensanslight;
    font-size: 25px;
    letter-spacing: 2px;
    color:grey;
    line-height: 50px;}
.input1{
    width: 47.5%;
    margin: 1%;
    height: 50px;
    border: 1px solid grey;
    font-size: 16px;
    font-family: opensanslight;
    letter-spacing: 2px;
    float: left;}
.input2{
    width: 47.5%;
    margin: 1%;
    font-size: 16px;
    font-family: opensanslight;
    letter-spacing: 2px;    
    height: 50px;
    border: 1px solid grey;
    float: right;}
.input3{
    width: 98%;
    margin: 1%;
    height: 50px;
    font-size: 16px;
    font-family: opensanslight;
    letter-spacing: 2px;
    border: 1px solid grey;
    float: left;}
.input4{
    width: 98%;
    margin: 1%;
    height: 150px;
    border: 1px solid grey;
    float: left;
    font-size: 16px;
    font-family: opensanslight;
    letter-spacing: 2px;
    max-width: 98%;
    max-height: 150px;
    min-height: 150px;
    min-width: 98%;}
.input5{
    width: 30%;
    margin: 2% 35%;
    height: 40px;
    background: rgba(0,113,188,1.0);
    color: white;
    font-size: 16px;
    font-family: opensanslight;
    letter-spacing: 1px;
    transition: .3s;
    cursor: pointer;}
.input5:hover{
    letter-spacing: 4px;
}

@media(max-width:768px){ 
    #formulario{
        width: 90%;
        margin: 2% 5%;}
    .input1, .input2{
        width: 98%;
        float: left;}    
    .input5{
        width: 50%;
        margin: 2% 25%;}
    #datosizquierda{
        width: 40%;
        float: left;
        margin-left: 10%;
        text-align: center;
        height: auto;}
    #datosderecha{
        width: 40%;
        float: right;
        text-align: center;
        margin-right: 10%;
        height: auto;}
}

@media(max-width:450px){
    
#datosizquierda{
    width: 100%;
    margin-left: 0%;}
#datosderecha{
    width: 100%;
    margin-right: 0%;
    margin-top: 4%;}
}

/*mapa*/
#mapa{
    width: 100%;
    float: left;
    height: 200px;
    margin-top: 5%;}

/*footer*/
footer{
    width: 100%;
    height: 150px;
    float: left;
    text-align: center;
    background-color: rgba(0,113,188,1.0);}
.redesfooter{
    width: 100px;
    margin: 25px;
    height: auto;
    transition: .3s;}
.redesfooter:hover{
    opacity: .7;
}

@media (max-width:550px){
    .redesfooter{
        width: 20%;
        margin: 5%;}
}

/*-----------------mensaje enviado---------------------*/
#mensajeenviado{
    width: 100%;
    height: 300px;
    padding: 8% 0%;
    text-align: center;
    font-family: sans-serif;
    font-size: 30px;
    background-image: url(../img/mensaje.png);
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    color: white;}
#iconomensaje{
    width: 100%;
    float: left;
    text-align: center;}
.iconmensaje{
    animation-name: mensaje;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    width: 15%;}
@keyframes mensaje{
    0%{
        margin-left: -50px;
    }
    50%{
        margin-left: 100px;
    }
    100%{
        margin-left: -50px;
    }
}


.titulodalcaaa{
    width: 100%;
    height: 300px;
    overflow: hidden;
    float: left;}
.videotituloaaa{
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    z-index: -100;}
.textotituloaaa{
    font-family: Daniel-Regular;
    color: white;
    width: 100%;
    height: 100px;
    float: left;
    background: rgba(0,0,0,0.5);
    position: absolute;
    text-align: center;
    margin-top: 200px;
    font-size: 60px;
    z-index: 100;}
.titudelca{
    background-image: url(../img/delka.jpeg);
    background-attachment: fixed;
    background-position: center;}

.tituyakus{
    background-image: url(../img/yakus.jpeg);
    background-attachment: fixed;
    background-position: center;}

@media (max-width:768px){
    
    .titulodalcaaa{
        height: 200px;}
    .textotituloaaa{
        height: 80px;
        margin-top: 120px;
        font-size: 40px;}
    #mensajeenviado{
        padding: 0%;
        padding-top: 20%;
        font-size: 16px;}
}

@media (max-width:600px){
    .tituloproducto{
        display: none;}
}