/* menu */
.divprincipalmenu{
    margin: auto;
    width: 95%;
    display: flex;
    }
   
    .nav{
        background-color: rgba(31, 6, 6, 0.385);
        font-family: "Avenir",serif;
        position: fixed;
        top: 0;
        margin: 0;
        height: 50px;
        left:1% ;
        width: 97%;
        padding-left: 1%;
        padding-top: 10px;
        z-index: 1;
    
    }
    
    .ul, ol{
        list-style: none;
        text-decoration: none;
        
    }
    .nav li a{
        /* filter:blur(2px);         */
        text-decoration: none;
        font-size: 22px;
        color: white;
        padding: 10px 15px;
        display: block; 
        
    }
    .nav li a:hover{
        background-color: #434343;
        list-style: none;
        color: wheat;
    }
    .nav > li {
        
    float: left;
    list-style: none;
    }
    .nav li ul{
        display: none;
        position: absolute;
        min-width: 140px;
        list-style: none;
    
    }
    .nav li:hover > ul{
     display: block
    }
    .imgmenu{
        
        width: 2%;
    }
    .btn1{
        position: relative;
        left: 85%;
    }
/* slider */
@import url(https://fonts.googleapis.com/css?family=Exo:100);
* {margin: 0; padding: 0; border: 0 none;}
html, body {height: 100%; width: 100%; font-size: 1rem; font-family: 'Exo', sans-serif; font-weight: 100;}
.cont-slider {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    width: auto;
    min-width: 100vw;
    margin: 0 auto;
    overflow: hidden;
}
.slider {
    animation: deslizante 25s ease-out 0s backwards infinite;
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 100%;
}
.slide {
    display: inline-block;
    position: relative;
    width: 20%;
    height: 100%;    
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
.slide span {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 5vh 5vh 0;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 40vh;
    font-size: 20vh;
    line-height: 20vh;
    border: 1px solid rgba(255,255,255,.45);
    border-left: 0 none;
}
.uno {
  background-image: url(https://www.newsapp.telemundo.com/sites/nbcutelemundo/files/images/article/cover/2019/02/18/frutas-y-otros-productos-frescos_0.jpg);}
.dos {
  background-image: url(https://s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2016/08/19155123/alimentos-organicos-1920-6.jpg);}
.tres {
  background-image: url(https://s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2018/08/23113825/iStock-620003040-1024x683.jpg);}
.cuatro {
  background-image: url(https://3.bp.blogspot.com/-_rxX9cZRkwQ/T6KNvCMQuVI/AAAAAAAAIi4/dEJZM0yqTfo/s1600/alimentos+org%C3%A1nicos.JPG);}
.cinco {
  background-image: url(https://www.wallpapertip.com/wmimgs/32-329295_organic-foods-logo-hd.jpg);}

@keyframes deslizante {
  0% {left: 0%; }
  15% {left: 0%; }
  20% {left: -100%; }
  35% {left: -100%; }
  40% {left: -200%; }  
  55% {left: -200%; }
  60% {left: -300%; }
  75% {left: -300%; }
  80% {left: -400%; }
  95% {left: -400%; }   
  100% {left: 0; }
}
        

.img{
    position: relative;
    left: 12%;
}
/* flaticon */
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	right: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
        
        display: inline-block;
		color:#fff;
	    padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:none;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background:none;}
	.social ul li .icon-googleplus {background:none;}
	
	 
	.social ul li a:hover {
		
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
    }
    .iconor{width: 2rem; height:2rem;border-radius: 10px;}