/*Reset*/

*{
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

/*Fin Reset*/

/*Comunes*/
html{
    min-height: 100%;
    padding-bottom: 180px;
    position: relative;
}

body{
    overflow-x: hidden;
    min-height: 100%;
    
}

#primera{
    padding:30px 0px;
}

p{
    margin-bottom: 15px;
}

h3{
    margin-top: 15px;
    margin-bottom: 15px;
}

    /*Botones*/

    #botonRetorno{
        font-size: 40px;
        color: dodgerblue;
        bottom: 10px;
        right: 10px;
        text-shadow: 0 0 2px #000;
    }

    #botonMenu{
        height: 60px;
    }

    #whatsapp-btn{
        margin-top: 10px;
        padding: 10px 20px;
        color: #FFF;
        background-color: limegreen;
        border-radius: 15px;
    }

    #whatsapp-btn i{
        font-size: 40px;
        color: #FFF;
    }

    #whatsapp-btn p,#whatsapp-btn span{
        margin: 2px 0;
        text-align: center;
    }

    #whatsapp-btn span{
        font-size: 22px;
    }

    /*Fin Botones*/

    /*Formato Textos*/

	.titulo,.subtitulo{
		text-transform: uppercase;
	}

    .titulo{
        font-size: 24px;
        color: dodgerblue;
        padding: 5px 0;
    }

    .subtitulo{
        font-size: 18px;
        font-weight: 400;
        color: dodgerblue;
        padding: 5px 0;
    }

    .parrafo{
        font-size: 16px;
        color: #212121;
        line-height: 30px;
        margin: 5px auto;
    }

    .centro{
        text-align: center;
    }

    .izquierda{
        text-align: left;
    }

    .derecha{
        text-align: right;
    }

    .justificado{
        text-align: justify;
    }

    /*Fin Formato Textos*/

    /*Cabecera*/
    
    header{
        height: 60px;
        background-color: dodgerblue;
        box-shadow: 0 0 2px #000;
		position: relative;
    }

    #logo{
        height: 60px;
    }

    #logo img{
        height: 50px;
        margin: 5px auto;
    }

    /* Fin Cabecera*/

    /*Contenido*/

        /*Index*/

        #quienes .enlace{
            color: #FF6633;
        }

        #quienes .caption{
            margin: 10px 0;
        }

        .icono{
            width: 30%;
            margin: 10px auto;
            text-align: center;
        }

        .precio{
            font-size: 40px;
            padding: 5px 10px;
            margin: 5px auto;
            color: #FFF;
            background-color: #FF6633;
            border-radius: 3px;
        }

        /*Fin Index*/

        /*Listado*/

        #banner{
            height: 450px;
            height: 36vw;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        #banner .caption{
            height: 350px;
            padding: 10% 0px;
        }

        /*Fin Listado*/

        /*Detalles*/

        #detalles{
             margin-top: 20px;
        }

        #galeria{
            padding: 20px 0px;
        }

        #galeria p,#galeria span,#galeria strong,#galeria pre{
            font-family: Verdana;
            font-size: 17px;
        }
        
        #galeria p{
            margin: 10px 0px;
        }

        #galeria .imagen{
            margin: 10px auto;
        }

        /*Detalles*/

    /*Sobre Nosotros*/

    #nosotros{
        padding: 100px 0;
    }

    #nosotros .contenido{
        margin: 15px 0;
    }

    #nosotros h1{
        text-transform: uppercase;
    }

	#productos article .btn{
		width: 80%;
		height: 40px;
		margin: 15px 10%;
		color: #FFF;
		background-color: dodgerblue;
		text-transform: uppercase;
		display: block;
		border-radius: 25px;
		text-align: center;
		line-height: 40px;
		float: left;
	}

    /*Fin Sobre Nosotros*/

    /*Fin Contenido*/

    /*Pie Página*/

    footer{
        width: 100%;
        float: left;
        position: absolute;
        bottom: 0;
    }

	#info,#legal{
		width: 100%;
		padding: 10px 0;
		float: left;
	}

	#info{
		background-color: dodgerblue;
	}

	#legal{
		background-color: #0B86FF;
	}

    footer h3{
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
    }

    footer .parrafo, footer a{
        width: 100%;
        color: #FFF;
        text-align: center;
    }

    footer span{
        color: #FFF;
    }

    /*Fin Pie Página*/

/*Fin Comunes*/

.foto_principal{
    float:left;
    width:100%;
    height: 300px;
    margin: 10px 20px 10px 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.foto_mini{
    width: 49%;
    height: 20vw;
    float:left;
    margin:0.5%;
}

.foto_mini_portada{
    width: 100%;
    height: 62vw;
    float:left;    
}

.producto_imagen{
    height: 140px;
    overflow: hidden;
    width: 100%;
}

#rrss i{
    font-size: 40px;
    margin: 5px 10px;
    color: dodgerblue;
    transition: all .5s ease-in-out;
}

#rrss i:hover{
    color: dodgerblue;
}

#informacion{
    margin: 20px 0;
}

#informacion p{
    font-size: 15px;
    margin: 10px auto;
    display: flex;
}

#informacion p i{
    width: 25px;
    font-size: 20px;
    margin-right: 5px;
    color: dodgerblue;
    text-align: center;
}

#proteccionDatos{
    margin: 10px auto;
    text-align: justify;
    line-height: 24px;
}

#proteccionDatos h3{
    font-size: 18px;
    font-weight: 200;
    color: dodgerblue;
    text-transform: uppercase;
    text-align: center;
}

#proteccionDatos p{
    font-size: 14px;
    margin: 5px auto
}

#contact{
    padding: 100px 0;
}

#contact form{
    margin: 20px 0;
}

#contact form input,#contact form textarea{
    padding: 5px 10px;
    margin: 5px 0;
    font-size: 18px;
}

#contact form input[type=text]{
    height: 40px;
}

#contact form textarea{
    height: 200px;
}

#contact form input[type=submit]{
    padding: 10px;
    border: none;
    font-size: 18px;
    color: #FFF;
    background-color: #FF6633;
    border-radius: 3px;
    text-transform: uppercase;
}

#mapa{
    width: 100%;
    height: 300px;
    margin: 0;
}

#aviso_legal .titulo,#privacidad .titulo,#cookies .titulo{
	margin-bottom: 10px;
}

#aviso_legal p,#privacidad p,#cookies p{
	font-size: 16px;
	line-height: 24px;
	margin: 5px 0;
}

#aviso_legal ol,#aviso_legal ul,#privacidad ol,#privacidad ul,#cookies ol,#cookies ul{
	margin: 15px 0;
	padding: 0 20px;
}

#aviso_legal ol li,#privacidad ol li,#cookies ol li{
	list-style: decimal;
}

#aviso_legal ul li,#privacidad ul li,#cookies ul li{
	list-style: disc;
}

#aviso_legal li,#privacidad li,#cookies li{
	margin: 10px 0;
}

#info .centrado{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Media Queries*/

@media only screen and (min-width: 768px){
    
    #mapa{
        height: 400px;
    }

    #info .centrado{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
}

@media only screen and (min-width: 1024px){
    
    /*Botones*/
    
    #botonMenu{
        display: none;
    }
    
    /*Fin Botones*/
    
    /*Cabecera*/
    
    header{
        height: 60px;
        background-color: dodgerblue;
        position: fixed;
        z-index: 20;
        box-shadow: 0 0 5px #000;
    }
    
    header .contenedor{
        height: 60px;
    }
    
    #logo{
        height: 60px;
        display: table;
    }

    #logo img{
        height: 50px;
        margin: 5px auto;
        display: table-cell;
        vertical-align: middle;
    }

    /* Fin Cabecera*/
    
    /*Listado*/

    #banner{
            height: 450px;
        margin-top:60px;
        }
    
    #banner .caption{
        padding: 14% 0px;
    }
    
    .foto_principal{
        float:left;
        width:50%;
        height: 300px;
    }

    .foto_mini_portada{
        width: 100%;
        height: 6vw;
        float:left;    
    }
    
    
    /*Fin Listado*/
    
    #mapa{
        height: 500px;
    }

    .categoria:nth-of-type(odd){

    }

    .categoria:nth-of-type(even){
        flex-direction: row-reverse;
        display: flex;
    }
	
	#legal .parrafo{
		width: 50%;
	}
	
	#legal .parrafo:first-child{
		float: left;
		text-align: left;
	}
	
	#legal .parrafo:last-child{
		float: right;
		text-align: right;
	}
    
}

/*Fin Media Queries*/