@font-face {
font-family: "Oduda";
src: url("/fonts/Oduda-Bold.otf");
src: 
url("/fonts/Oduda-Bold.otf") format("otf"),
}

@font-face {
font-family: "Ostrich";
src: url("/fonts/OstrichSans-Medium.otf");
src: 
url("/fonts/OstrichSans-Medium.otf") format("otf"),
}


@media only screen and (min-width: 768px){
	#slider-background{
		position: static;
	    right: 0;
	    bottom: 0;
	    left:0;
	    top:0;
	    margin:auto;
	    min-width: 100vw; 
	    min-height: auto;
	    width: 100vw;
	    max-width: 100vw;
	    display: flex;
	    flex-wrap: wrap;
	}
	#slider-thumbnail{
		display: none;
	}
}

@media only screen and (max-width:768px){
	#slider-thumbnail{
	position: static;
    top:0;
    margin:auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
	}
	#slider-background{
		display: none;
	}
	.logo{
		display: none;
	}
}


#header-container{
	background-image: url('/media/images/imagenPrincipal.jpg');
	background-attachment: fixed;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 70vh;
}

body{
	overflow-x: hidden;
}
@media only screen and (min-width:772px){
#logo-slider{
	position: absolute;
	top:24vh;
	bottom:auto; 
	right: 50vw;
	left: 10vw;
	margin: auto;
	width: 30%;
	height: auto;
	display: none;
}
#menu{
	position: absolute;
	top:24vh;
	bottom:auto; 
	right: 30vw;
	left: 30vw;
	margin: auto;
	width: 30%;
	height: auto;
	display: block;
}
}
}
@media only screen and (max-width: 772px){
	#logo-slider{
	position:absolute;
	top:5vh;
	bottom: auto;
	right: 35%;
	left: 35%;
	margin: auto;
	width:30%;
	height: auto;
	display: block;

}
}

header{
	padding: 0;
}

#cereal{
	margin: auto;
	width: auto;
	height: 350px;
}

.parallax { 
    /* The image used 
    background-image: url("/css/img_parallax.jpg");*/

    /* Set a specific height */
    height: 50%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

	.display-flex{
		display: flex;
		flex-wrap: wrap;
	}

	.quienes-somos{
		background-color:rgba(75,9,127,.6);
		background-image: url(/css/media/images/fondo.jpg) !important;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		border-radius: 12px;
		padding: 3%

	}

	.padding-center{
				padding-bottom: 5%;
		padding-top: 5%;
	}
.background-navbar{
	background-color:black;
	box-shadow: 8px 8px 15px rgba(0,0,0,.35)
}

h1, h2, h3, h4{
	font-family: 'Arial', sans-serif;
}
p{
	font-family: 'Arial', cursive;
}
h5, h6{
	font-family: 'Oswald', sans-serif;	
}
.footer-background{
	background-color: black !important;
}

.no-padding{
	padding: 0 !important;
	margin: auto;
}

.container-width{
	min-width: 100vw;
}
.img-width{
	width: 25%;
	height: 100%;
}
.headers-padding{
	padding-bottom: 2%;
}

.purple{
	color:#4b097f;
}

.blue{
	color:#306a8e;
}
.red{
	color:#c12b2b;
}
.green{
	color:#3ca80f;
}

.astronautas{
	background-color:#accfe5;
}
.icons{
	font-size: 2.5em;
	padding:15%;
	margin: auto;
	display: flex-wrap;
}
.center{
	position: relative;
	margin: auto;
}
.card-background{
	background-image: url(/css/media/images/textura-cereal-fondo-azul.jpg) !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	
}

.cereal-lover{
	background-color: #accfe5;
	border-radius: 40px;
	padding:5%;
}

.productos{
	margin: auto;
	text-align: center;
	padding:3%;
}

.img-productos{
	width: 80%;
	height: auto;
}

.header-productos{
	background-color: #41b1b0;
	color: white;
	padding: 1%;
}

.cereal-background{
	background-image: url(/css/media/images/cereal-background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}
h1{
	text-transform: uppercase;
}

.border-box{
	padding: 1%;
    border-color: white;
    border-style: solid;
    border-width: thin;
    background-color:#0000007a;

}
.menu-headers{
	padding-top: 3%;
}

.medios{
	max-width: 60%;
}

#medios{
	background-color: #f7f7f7;
}
/*Animacion menu-----------------------*/

.intro{
	padding: 10%;
}




/*MULTI-ITEM CAROUSEL------------------------*/
.MultiCarousel { float: left; overflow: hidden; padding: 0; width: 100%; position:relative; }
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:0; margin:10px;  color:#666;}
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
    .MultiCarousel .leftLst { left:0; }
    .MultiCarousel .rightLst { right:0; }
    
        .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }


@media screen and (max-width: 768px){
	.padding-boxes{
		padding: 7%;
	}
}

.sombra{
	  -webkit-box-shadow: 0 10px 15px -4px #b40037, 0 10px 8px -10px #b40037;
          box-shadow: 0 10px 15px -4px #b40037, 0 10px 8px -10px #b40037;
}

@media screen and (max-width: 768px){
	.mobile-margin{
		margin-top: 15% !important;
	}
}




@media screen and (min-width: 768px){
	.productos{
		background-image: url('/media/images/imagenproductos.jpg'); 
		background-size: 100% 100%; 
		-o-background-size: cover;  
		-moz-background-size: cover; 
		-webkit-background-size:cover;
		background-repeat: no-repeat; 
		background-attachment: fixed; 
		width: 100%; 
		height: 100%; 
		background-position: center right;
	}
	.principal{
		background-image: url('/media/images/imagenPrincipal.jpg');
		background-attachment: fixed;
		background-size: 100% 100%; 
		-o-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size:cover;
		background-repeat: no-repeat; 
		width: 100%; 
		height: 100vh; 
		background-position: center center;
		
	}
	.card-cereal{
		background-image: url('/media/images/cerealover_bg.jpg');
		background-attachment: fixed;
		background-size: 100% 100%; 
        -o-background-size: cover; 
        -moz-background-size: cover;    
        -webkit-background-size:cover;
        background-repeat: no-repeat; 
        width: 100%; 
        height: 100%; 
        background-position: center right;
        padding:5%; 
	}
	.favoritos{
		background-image: url('/media/images/favoritos_bg.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		-o-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size:cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		background-position: center right;
	}
	
}

@media screen and (max-width: 768px){
	.productos{
		background-image: url('/media/images/imagenproductos.jpg'); 
		background-size: 100% 100%; 
		-o-background-size: cover;  
		-moz-background-size: cover; 
		-webkit-background-size:cover;
		background-clip: border-box;
		background-attachment: scroll;
		background-repeat: no-repeat; 
		width: 100%; 
		height: 100%; 
		background-position: -1500px;
	}
	.principal{
		background-image: url('/media/images/imagenPrincipal.jpg');
		background-size: 100% 100%; 
		-o-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size:cover;
		background-clip: border-box;
		background-attachment: scroll;
		background-repeat: no-repeat; 
		width: 100%; 
		height: 100vh; 
		background-position: center;	
	}
	.card-cereal{
		background-image: url('/media/images/cerealover_bg.jpg');
		background-size: 100% 100%; 
        -o-background-size: cover; 
        -moz-background-size: cover;    
        -webkit-background-size:cover;
        background-clip: border-box;
        background-attachment: scroll;
        background-repeat: no-repeat; 
        width: 100%; 
        height: 100%; 
        background-position: center right;
        padding:5%; 
	}
	.favoritos{
		background-image: url('/media/images/favoritos_bg.jpg');
		background-size: 100% 100%;
		-o-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size:cover;
		background-clip: border-box;
		background-attachment: scroll;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		background-position: center right;
	}
}