*{box-sizing: border-box;}
body{
	margin: 0;
	height: 100vh;
}
a{
	text-decoration: none;
}
.container-fluid{
	padding: 0;
}
/*Header......................................*/
header{
	height:75px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: rgb(91,17,36);
}
div.logo{
	margin-bottom: 20px;
}
header img{
	max-height: 70px;
}
nav.navbar.navbar-default{
	margin-top: 10px;
	display: block;
	background-color: rgb(91,17,36);
	border:none;    	
}
nav.navbar.navbar-default ul li a{
	font-family: 'Coiny', cursive;
	font-size: 1em;
	color: white;
	transition: color 1s;
}
nav.navbar.navbar-default ul li a:hover{
	color: rgb(255,133,164);
}
div.menu, .navbar-nav>li>.dropdown-menu{
	position: relative;
	z-index: 999999;
	background-color: rgb(91,17,36);
	border-radius: 5%; 
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	background-color: rgb(91,17,36);
	color: rgb(142,135,40);
}
.dropdown-menu>li>a:hover{
	background-color: rgb(91,17,36); 
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a{
	color: rgb(255,133,164);
}
.navbar-default .navbar-collapse{
	border: none;

}
/*Contenido.....................................................................*/
.flex{
	display: flex;
}
section.web, section.ilustracion, section.sobremi, section.contacto{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px;
}
h1{
	margin: 0;
	text-align: center;
	font-family: 'Coiny', cursive;
	color: rgb(255,133,164);
}
h2{
	margin: 50px 0;
	text-align: center;
	font-size:3em;
	font-family: 'Coiny', cursive;
	color: rgb(65,62,12);
}
h3{
	margin: 30px;
	text-align: center;
	font-size: 2em;
	font-family: 'Coiny', cursive;
	color: rgb(91,17,36);
	

}
section p{
	text-align: center;
	padding: 0 20px;
	margin: 0;
	font-size: 1.5em;
	font-family: 'Pacifico', cursive;
}
.fas{
	margin: 10px;
	font-size: 2em;
	color:rgb(91,17,36); 
}
.mas,input{
	margin: 15px;
	background-color: rgb(255,133,164); 
	border: none;
	border-radius: 5px;
	transition: background-color 1s;

}
input:hover{
	background-color: rgb(91,17,36);
}
.mas:hover{
	background-color: rgb(91,17,36); 
}
.mas a,input{
	padding:15px;
	color: rgb(91,17,36);
	font-family: 'Coiny', cursive;
	transition: color 1s;
}
.mas a:hover{
	color:rgb(255,133,164);

}
input:hover{
	color: rgb(255,133,164);
	text-decoration: none;
}
.web{
	position: absolute;
	left: 0;
	width: 50%;
	background-color: rgb(142,135,40);
}
.web .derecha_ilustracion{
	position: absolute;
	top: 300px;
	right:0%;
	transform: translateY(-50%);
    border-right: 75px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    cursor: pointer;
}

.ilustracion{
	position: absolute;
	left: 50%;
	width: 50%;
	z-index: 99999;
}
.ilustracion .izquierda_web{
	position: absolute;
	top: 300px;
	left: 0%;
	transform: translateY(-50%);
    border-left: 75px solid rgb(142,135,40);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
	cursor: pointer;
}
.ilustracion .derecha_sobremi{
	position: absolute;
	top: 300px;
	right: 0%;
	transform: translateY(-50%);
    border-right: 75px solid rgb(255,133,164);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
	cursor: pointer;
}
.sobremi{
	position:absolute;
	width: 100%;
	left:-200%;
	background-color: rgb(255,133,164);
}
p.mi{
	padding: 0 50px;
}
.sobremi .izquierda_ilustracion{
	position: absolute;
	top: 300px;
	left: 0%;
	transform: translateY(-50%);
    border-left: 75px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
	cursor: pointer;
}
.sobremi .derecha_contacto{
	position: absolute;
	top: 300px;
	right: 0%;
	transform: translateY(-50%);
    border-right: 75px solid rgb(142,135,40);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
	cursor: pointer;
}
.contacto{
	position: absolute;
	width: 100%;
	left: -400%;
	background-color: rgb(142,135,40);
	
}
.contacto .izquierda_sobremi{
	position: absolute;
	top: 300px;
	left: 0%;
	z-index: 999999;
	transform: translateY(-50%);
    border-left: 75px solid rgb(255,133,164);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
	cursor: pointer;
}
/*ilustracion...................................................*/
main.ilustration{
	flex-direction: column;
}
.ilustration.container-fluid{
	width: 100%;
	height: 100%;
}
.iinicio{
	width: 100%;
	display: flex;
	flex-direction: row;
}
.inav{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 20%;
	background-color:  rgb(142,135,40);
}
.inav ul{
	height: 50%;
	padding-left:0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.inav ul li{
	list-style: none;
	text-align: center;
}
.inav ul li a{
	border-bottom: none;
	font-family: 'Coiny', cursive;
	color: white;
	font-size: 1.5em;
	margin: 0 10px;
	transition: color 1s;
}
.inav ul li a:hover{
	color: rgb(255,133,164);
}
.slider{
	background-color: rgb(255,133,164);
}
.img{
	margin: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.abajo{
	padding: 20px;
	margin: 20px auto;
	width: 50%;
	background-color: rgb(65,62,12);
	color: rgb(142,135,40);
	font-family: 'Pacifico', cursive;
	font-size: 1.5em;
	text-align: center;
	border-radius: 5px;
}
.cuentos{
	padding: 20px;
	background-color: rgb(142,135,40);
}
.digital{
	padding: 20px;
	background-color: rgb(255,133,164);
}
.otros{
	padding: 20px;
	background-color: rgb(142,135,40);
}
.img img{
	padding: 10px;
}
.subir{
	display: none;
	height: 150px;
	position: fixed;
	top: 130px;
	right: 10px;
	z-index: 9999;

}
.subir img{
		height: 100%;
}
/*Diseño...Web.......................................................*/
.p_web section{
	width: 100%;
	background-color: rgb(142,135,40);
}
.p_web section div .foto .grandes{
	border: 1px solid black;
}
.p_web section p{
	margin-top: 15px;
}
.p_web .miniaturas{
			flex-wrap: wrap;
			margin-top: 20px;
}
/*Contacto...........................................................*/
main.p_web{
	justify-content: space-around;
}
.mapa{
	height: 300px;
}
.mapa iframe.img-responsive{
	height: 100%;

}
.contacto h3{
	margin-top: 10px;
}
form{
	display: flex;
	flex-direction: column;
	align-items: center;
}
input{
	width: 50%;
	font-size: 1.5em;
}
textarea{
	height:150px;
	width: 500px;
	 font-family: 'Pacifico', cursive;
}
/*slider.......................................................*/
.container{
	display: flex;
	flex-direction: column;
	border:1px solid red;
	max-width: 100%;
	max-height: 100%;			
}.fotoflechas{
	display: flex;
	justify-content: space-around;
}
.miniaturas{
	display: flex;
	flex-direction: row;
	justify-content:center;
	width: 100%;
	flex-wrap: nowrap;
	margin: 50px 0;
}
.foto{
	display: flex;
	flex-grow: 8;
	justify-content:space-around;
	align-items: center;
	width: 100%;
}
.foto .arrow{
	height:40px;
	box-shadow: none;
	cursor: pointer;

}
.foto img{
	margin: 0 auto;
}

.peques{
	height: 50px;
	margin:10px;
	filter:grayscale(100%);
	cursor: pointer;

}
.borde {
	border: 4px dotted rgb(91,17,36) ;
	filter: grayscale(0%);
	transition: 1s;
}
.foto img{
	max-width: 100%;
	height: auto;
}

/*mediaquery...........................................*/
	/* Extra small devices (portrait phones, less than 576px)*/
	@media (max-width: 575.98px) {
		h2{
			font-size: 2em;
		}
		h3{
			font-size:1.7em;
		}
		/*........................................................ilustracion*/
		.flex {
			display: flex;
			flex-direction: column;
		}
		.web, .ilustracion, .sobremi, .contacto{
			position: static;
			width: 100%;
		}
		.derecha_ilustracion, .izquierda_web, .derecha_sobremi, .izquierda_ilustracion, .derecha_contacto, .izquierda_sobremi{
			display: none;
		}
		p.mi{
			padding: 0 15px;
		}
		.ilustration .iinicio{
			flex-direction: column-reverse;
		}
		.subir{
			height:60px;
			top: 100px;
			right: 10px;
			
		}
		.slider h2{
			margin-top: 80px;
		}
		.cuentos,.digital,.otros{
			padding: 5px;
		}
		.ilustration.iinicio{
			flex-direction: column-reverse;
		}
		.miniaturas{
			flex-wrap: wrap;
		}
		.miniaturas img{
			margin:5px;
		}
		.foto .arrow{
			display: none;
		}
		.img img{
			padding: 10px 0;
			width: 75%;
			height: 75%;
		}
		.inav{
			width: 100%;
			flex-direction: row;
		}
		/*.............................................................Web*/
		.p_web section div .foto .grandes{
			width: 100%;
			margin: 10px;
		}
	}
@media (min-width: 768px){
	
}
	/* Small devices (landscape phones, 576px and up)*/
	@media (min-width: 576px) and (max-width: 767.98px) {
		/*........................................................ilustracion*/
		.flex {
			display: flex;
			flex-direction: column;
		}
		.web, .ilustracion, .sobremi, .contacto{
			position: static;
			width: 100%;
		}
		.derecha_ilustracion, .izquierda_web, .derecha_sobremi, .izquierda_ilustracion, .derecha_contacto, .izquierda_sobremi{
			display: none;
		}
		.ilustration .iinicio{
			flex-direction: column-reverse;
		}
		.inav{
			width: 100%;
			flex-direction: row;
		}
		.miniaturas{
			flex-wrap: wrap;
		}
		.miniaturas img{
			margin: 5px;
		}
		.foto .arrow{
			display: none;
		}
		.subir{
			top:150px;
			height: 100px;
		}
		/*.............................................................Web*/
		.p_web section div .foto .grandes{
			width: 80%;
			height: 80%;
		}
	}

	/* Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px)  {
		nav.navbar.navbar-default ul li a{
			font-size: 1em;
		}
		.foto .arrow{
			height: 35px;
		}
		.flex .subir img{
			display: none;
		}
	}
	/*Extra Large*/
	@media (min-width: 1200px){
		.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after{
	content: none;
}
	}