@charset "utf-8";
/* CSS Document 
Autor: Paul Segovia
Pagina Web: Coexflor.ec
Derechos Reservados*/
*{
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
body{
	font-family:Roboto;
	border: 3px solid #C36;
	}
body::-webkit-scrollbar{
	width: 2px;}
body::-webkit-scrollbar-thumb {
	background:#414141;
	border: 1px solid #000;
	opacity: 0.8;
	border-radius: 5px;
	}
header{
	 width: 99.6666%;
	background: linear-gradient(to right, #0C3, #900);
	 border: 2px solid #ae0d36;
	 position:fixed;
	 z-index:1;
	 border: 3px solid #900;
	 transition: .2s;
	 z-index: 2000; 
	 }

.menures{
	width: 95%;
	max-width:1100px;
	margin: auto;
	padding: .5em 0;
	display:flex;
	justify-content: space-between;
	align-items:center;
	
	}
.menures .container-menu .logo .logo-name img{
	height: 40px;
	}
.menures .container-menu .logo .logo-name a{
	font-family: 'Roboto', sans-serif;
	text-decoration:none;
	color: #fff;
	font-size: 30px;
	margin-left: 8px;
	font-weight:normal;

	}
.menures .container-menu .logo .logo-name{
	display:flex;
	align-items:center;}

.menures .container-menu .logo .btn-menu{
	display:none;
	text-decoration:none;
	color:#fff;
	font-size: 30px;}
.menures .menu-link ul{
	list-style:none;
	
	}

.menures .menu-link ul li{
	display:inline-block;}
.menures .menu-link ul li a{
	font-family: 'Roboto', sans-serif;
	text-decoration:none;
	color: #fff;
	font-weight: bold;
	margin-left: 15px;
	font-size: 1.2em;
	border-bottom: 2px solid transparent;
	transition: .2s;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	}

.menures .menu-link ul li a:hover{
	border-bottom: 2px solid #91fd9e;
	color: #91fd9e;
	}
.banner{
	position:relative;
	background: url('../Imagenes/flores1.jpg');
	background-position:center;
	border: 1px solid #000;
	-webkit-background-size:cover;
	background-size:cover;
	width: 100%;
	top:52px;
	margin: auto;
	height: 450px;
	color:#fff;
	-webkit-animation: primeraAnimacion 1s;
	 animation: primeraAnimacion 1s;}
@-webkit-keyframes primeraAnimacion{
from {
		margin-left: 100%;
		width: 300%;
		}

	to {
		margin-left: 0%;
		width: 100%;
		}}
.banner .bg-banner{
	position:absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #000, #ae0d36);
	opacity: .4;}
.banner .bg-details{
	font-family: 'Open Sans', sans-serif;
	position:relative;
	width:100%;
	height: 100%;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap:wrap;
	text-align:center;}
.banner .bg-details .details h1{
	font-family: 'Open Sans', sans-serif;
	font-size: 50px;
	font-weight: 600;
	margin-bottom: 20px;}
.banner .bg-details .details img{
	height: 120px;
	width: 50%;
	position:relative;
	margin-top: -120px;
	margin-bottom: 60px;
	}
.banner .bg-details .details a{
	font-family: 'Roboto', sans-serif;
	display:inline-block;
	text-decoration:none;
	color: #fff;
	font-size: 20px;
	border: 2px solid #fff;
	padding: 10px 25px;
	border-radius: 10px;
	transition:.3s}
.banner .bg-details .details a:hover{
	background: rgba(174,13,54,.8);}
	
/*Slider*/

.theme-slider .nivoSlider{
	position:relative;}
.theme-slider .nivoSlider a{
	border:0;
	display:block;}
.theme-slider .nivo-control{
	display:block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #545454;
	margin: 3px;
	text-indent: -9999px;
	z-index: 3;}
.theme-slider .nivo-control:hover{
	background: #000;}
.nivo-controlNav{
	display:flex;
	justify-content:center;}
.theme-slider .active{
	background: #000;
	}
/*Flechas slider*/
.nivo-directionNav a{
	display:block;
	width:30px;
	height: 30px;

	}
.nivo-directionNav .nivo-prevNav{
	background-image: url(../Imagenes/circle-left.png);
	background-size:cover;
	text-indent: -9999px;
	left:12px;
	}
.nivo-directionNav .nivo-nextNav{
	background-image: url(../Imagenes/circle-right.png);
	background-size:cover;
	text-indent: -9999px;
	right:12px;
	}
.nivoSlider img{
	border: 2px solid #000;
		}

	
	
/*Footer Contactos*/
.info-container{
	width: 100%;
	background: #f2f2f2;
	font-family: 'Roboto', sans-serif;}
.info-main{
	width: 100%;
	height: 200px;
	margin:auto;
	text-align: center;}
.info-main .telefono{
	margin-top: 0px;
	height: 30px;
	margin-right: 10px;
	}
.info-main h3{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	background: linear-gradient(to right, #0C3, #900);
	border: 2px solid #C03;
	font-size: 30px;
	text-align:center;
	width: 100%;
	margin-bottom: 20px;
}
.info-main p{
	text-align: justify;
	font-size:20px;
	font-family:roboto;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right:40px;
	padding: 12px 20px;
	
	
	}
.info-main a{
	font-family: 'Roboto', sans-serif;
	display:inline-block;
	font-size: 20px;
	background: #bf0026;
	color:#fff;
	text-decoration:none;
	padding: 12px 20px;
	transition: .3s;
	border-radius: 10px;
	}
.info-main a:hover{
	background: #C00;
	transition: .2s;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	}
.footer-container{
	width:100%;
	background: #272727;
	color: #fff;
	border: 2px solid #000;}
.footer-main{
	width:98%;
	max-width: 1100px;
	margin: auto;
	padding: 50px 0;
	display:flex;
	flex-wrap: wrap;
	
	}
.footer-columna{
	font-family: 'Roboto', sans-serif;
	width: calc(100% / 3);
	text-align:justify;}
.footer-main .footer-columna:nth-child(2){
	padding: 0 20px;}	
.footer-main .footer-columna h3{
	font-family: 'Roboto', sans-serif;
	font-size: 32px;
	color: #fff;
	margin-bottom: 30px;}
.footer-main .footer-columna p{
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
	}
.footer-main .footer-columna .botoncontacto{
	padding: 20px 30px;
	margin-top: 30px;
	text-decoration:none;
	width: 100%;
	height: 100px;
	align-content:Center;
	font-size: 20px;
	background: #903;
	border-radius: 10px;
	border: 2px solid #C03;
	text-align:center;
	color:#fff;
	transition: .3s;}
.footer-main .footer-columna .botoncontacto:hover{
	background: #900;
	transition: .3s;}
.footer-main .footer-columna span p{
	display: inline-block;
	margin-left: 5px;
	margin-bottom:15px;
	font-family: Roboto;}
.footer-copy-redes{
	font-family: 'Roboto', sans-serif;
	width: 100%;
	height: 100px;
	background: #272727;
	border-top: 30px solid #fff;}
.main-redes .redes-sociales{
	width: 70%;
	color: #fff;
	font-size: 25px;
	margin-left: 100px;
	margin-top: 20px;
	}
.main-redes .footer-redes{
	margin-left: 70%;
	margin-top: -40px;
	}
.main-redes .footer-redes a{
	display: inline-block;
	text-decoration:none;
	font-size: 20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	text-align:center;
	-webkit-transition: all 500ms  ease-in;
	-o-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
	}
.main-redes .footer-redes a:hover{
	font-size: 25px;
	}
/*Redes sociales iconos*/
.social{
	position:fixed;
	left:0;
	top:200px;
	z-index:1000;
	}

.social ul{
	list-style:none;}
.social ul li a{
	display:inline-block;
	color: #fff;
	background: #000;
	padding: 10px 15px;
	text-decoration:none;
	border-bottom: 2px solid transparent;
	transition: .2s;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;}
.social ul li .fa-skype{
	background: #06F;
	font-size: 25px;}
.social ul li .fa-google{
	background: #d95236;
	font-size: 25px;}
.social ul li .fa-envelope{
	background: #666666;
	font-size:22px;}
.social ul li a:hover{
	padding: 10px 30px;
	background:#000;
	}
/*Portafolio*/
.fondo-portafolio{
	background: linear-gradient(to right, #2c3e50, #CCC);
	border: 2px solid #000;
	}
.fondo-portafolio .portafolio h2{
	text-align:center;	
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 50px;
	font-weight: bold;}
.contenedor{
	max-width: 1000px;
	width: 90%;
	margin: auto;}
.galeria .contenedor{
	display:flex;
	flex-direction: wrap;
	justyfy-content: space-between;
	flex-wrap: wrap;
	}
.foto{
	width: 22%;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 30px;	
	border: 2px solid #000;
	outline: 5px solid rgba(0,0,0,0);
	-webkit-box-shadow: 4px 4px 6px rgba(0,0,0,.8);
	-moz-box-shadow: 4px 4px 6px rgba(0,0,0,.8);
	-ms-box-shadow: 4px 4px 6px rgba(0,0,0,.8);
	-o-box-shadow: 4px 4px 6px rgba(0,0,0,.8);
	box-shadow: 4px 4px 6px rgba(0,0,0,.8);
	-webkit-transition: all .5 ease;
	-o-transition: all .5 ease;
	transition: all .5 ease;
	border-right: 10px;
	}
.foto h2{
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	text-align:center;
	background: linear-gradient(to right, #FF3, #F93);
	color: #000;
	font-weight:bold;
	border: 1px solid #000;
	}
.foto img{
	width: 100%;
	height: 250px;
	vertical-align:top;
	cursor:pointer;
	border: 2px solid #C03;
	}
.foto img:hover{
	background: #CCC;
	opacity: 0.9;}
.foto:hover{
	outline: 5px solid #fff;
	
	}

/*Filtraje*/
.escondidas{
	display:none;
	
}
.subtitulo{
	max-width: 1400px;
	height: 250px;
	width: 95%;
	margin: auto;
	background: linear-gradient(to right, #000, #333);
	border: 2px solid #fff;
	box-shadow: 0px 3px 0px #373c3c;
	}
	.filtro{
	max-width: 1400px;
	height: 40px;
	width: 95%;
	margin: auto;
	background: #fff;
	border: 2px solid #000;
	box-shadow: 0px 3px 0px #373c3c;
	}
.filtro .titulofiltro{
	text-align:center;
	font-size: 30px;
	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	color: #000;
	margin-bottom: 20px;
	}
.subtitulo{
	display:flex;
	flex-direction: wrap;
	flex-wrap: wrap;
	font-family: 'Roboto', sans-serif;
	list-style:none;
	
	}
.subtitulo .fil{
	background: #7f8c8d;
	color: #fff;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	text-decoration:none;
	font-size: 1.25em;
	margin-left: 20px;
	margin-top:10px;
	margin-right: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	padding: 10px 0px;
	text-align: center;
	width: 170px;
	height:50px;
	box-shadow: 0px 3px 0px #373c3c;
	transition: .3s;
	}
.subtitulo .fil:hover{
	background: #F30;
	color: #fff;
	height: 55px;
	-webkit-transition: all 500ms  ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;}
.subtitulo .todos{
	background: #03F;
	color: #fff;
	box-shadow: 0px 3px 0px #006;
	}
.subtitulo .rojo{
	background: #C00;
	color: #fff;
	box-shadow: 0px 3px 0px #900;
	}
.subtitulo .bicolor{
	background: linear-gradient(to right, #600, #606);
	color: #fff;
	box-shadow: 0px 3px 0px #639;
	}
.subtitulo .verde{
	background: #0C0;
	color: #fff;
	box-shadow: 0px 3px 0px #063;
	}
.subtitulo .amarillo{
	background: #FF3;
	color: #000;
	box-shadow: 0px 3px 0px #FF0;
	}
.subtitulo .blanco{
	background: #FFf;
	color: #000;
	box-shadow: 0px 3px 0px #666;
	}
.subtitulo .otros{
	background: #F69;
	color: #000;
	box-shadow: 0px 3px 0px #F09;
	}



.subtitulo .opfiltro{
	margin-top: 40px;}

/*Fin de filtraje*/
.foto .informacion{

	font-family: 'Roboto', sans-serif;
	height: 260px;
	margin-bottom: 5px;
	color: #fff;
	font-weight:bold;
	text-align:center;
	font-size: 18px;}
.foto .informacion p{
	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	font-size:22px;}
.foto .informacion hr{
	height: 4px;
	margin-left: 4px;
	margin-right: 4px;
	border: 1px solid #414141;
	background: #000;}
.foto .informacion h1{

	font-family: 'Roboto', sans-serif;
	margin-bottom: 5px;
	color: #333;
	font-weight: bold;
	text-align:center;
	font-size: 20px;}
.foto .informacion .button{
	font-family: 'Open Sans', sans-serif;
	display:block;
	height: 60px;
	width: 120px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	font-size: 25px;
	background: #C03;
	box-shadow: 0px 3px 0px #373c3c;
	color: #fff;
	text-decoration:none;
	cursor:pointer;
	transition: all 0.3s linear;
	}
.foto .informacion .button:hover{
	background: #000;
	height: 70px;
	}
.foto .color1{
	background: linear-gradient(to right, #fff, #FF3);
	border: 2px solid #000;
	color: #000;
	}
.foto .color2{
	background: linear-gradient(to right, #fff, #C03);
	border: 2px solid #000;
	color: #000;
	}

.foto .color3{
	background: linear-gradient(to right, #fff, #F63);
	border: 2px solid #000;
	color: #000;
	}
.foto .color4{
	background: linear-gradient(to right, #fff, #F33);
	border: 2px solid #000;
	color: #000;
	}
.foto .color5{
	background: linear-gradient(to right, #fff, #F9F);
	border: 2px solid #000;
	color: #000;
	}
.foto .color6{
	background: linear-gradient(to right, #fff, #F00);
	border: 2px solid #000;
	color: #000;
	}
.foto .color7{
	background: linear-gradient(to right, #fff, #C36);
	border: 2px solid #000;
	color: #000;
	}
.foto .color8{
	background: linear-gradient(to right, #fff, #6F6);
	border: 2px solid #000;
	color: #000;
	}
.foto .color9{
	background: linear-gradient(to right, #fff, #F9C);
	border: 2px solid #000;
	color: #000;
	}
.foto .color10{
	background: linear-gradient(to right, #FF6, #F39);
	border: 2px solid #000;
	color: #000;
	}
.foto .color11{
	background: linear-gradient(to right, #FFF, rgba(246,246,246,1));
	border: 2px solid #000;
	color: #000;
	}
.foto .color12{
	background: linear-gradient(to right, #FFF, #FBFBFB);
	border: 2px solid #000;
	color: #000;
	}
.foto .informacion p{
	margin-left: 5px;
	margin-top: 5px;}
	
@media screen and (max-width: 800px){
	.galeria .contenedor{
		flex-direction:column;
		width: 90%;}
	.foto{
		width: 98%;}
	.foto img{
		width: 100%;
		height: 350px;
		margin: auto;
}}

@media screen and (max-width:1007px){
	.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 20px;
	margin-top:10px;
	width: 150px;
	margin-right: 10px;
	padding: 10px 0px;
	}
	.galeria .contenedor{
		width: 80%;}
	.foto{
		width: 45%;}
	.info-main {
		height: 250px;}
		.info-main p{
		margin-left:5px;
		margin-right:5px;}
	.menures .container-menu .logo .btn-menu {
		display:block;
		float:right;
		margin-top:-40px;
		cursor:pointer;}
		
		.menures .container-menu{
		width:100%;
		}
	.menu .container-menu .logo {
		display: flex;
		-ms-align-items:center;
		align-items:center;
		justify-content: space-between;
		}
	
	.menures .menu-link {
		position: absolute;
		background: rgba(0,0,0,.7);
		height: 1000vh;
		width: 100%;
		top: 52px;
		left:-100%;
		z-index:3000;
		transition: .3s}
	.menures .menu-link ul li{
		display: block;
		
		}
	.menures .menu-link ul li a{
		display:block;
		height: 50px;
		border-botttom: 2px solid #fff;
		padding:15px;
		text-align:center;
		font-size: 25px;
		margin:0;
		}
		.banner .bg-details .details img{
	height: 120px;
	width: 50%;
	margin-top: -0px;
	margin-bottom: 10px;
	}
	.banner{
	height: 340px;
	}
	}
@media screen and (max-width:500px){
	.menures .container-logo .logo .logo-name a{
		font-size: 25px;}
		.banner .bg-details details h1{
			font-size: 25px;}
			.banner .bg-details details a{
				font-size: 16px;
				padding: 8px 15px;}
	.banner .bg-details .details img{
	width: 80%;
	}
	
	.main-redes .redes-sociales{
	margin-left: 20px;
	font-size: 20px;
	}
	.main-redes .footer-redes{
	margin-top: -30px;
	margin-left: 80%;
	}
	.foto .informacion{

	font-family: 'Open Sans', sans-serif;
	font-size: 24px;}
.foto .informacion h1{

	font-family: 'Open Sans', sans-serif;
	font-size: 24px;}}
@media screen and (max-width: 1100px){
	.info-main p{
		margin-left:5px;
		margin-right:5px;}
		.info-main {
		height: 250px;}
	.foto{
		width: 45%;
		}
	}
@media screen and (max-width: 1150px){
	.foto{
		width: 45%;}}
	
@media screen and (max-width: 855px){
	.foto .informacion{

	font-family: 'Open Sans', sans-serif;
	font-size: 25px;}
.foto .informacion h1{

	font-family: 'Roboto', sans-serif;
	font-size: 25px;}
	.foto{
		width: 96%;}
	
	.footer-main .footer-columna{
		width: 100%;
		text-align:center;
		margin: 10px 0;
		margin-bottom: 20px;}
		.footer-main .footer-columna{
			margin-bottom: 5px;}
		.footer-main .footer-columna .botoncontacto{
			width:100%;	
			}
		.footer-main .footer-columna{
			margin-bottom: 30px;}
		.footer-main .footer-columna:nth-child(2){
			text-align:justify;
			margin-left: 5px;
			margin-right: 5px;}
		.footer-main .footer-columna:nth-child(3){
			text-align:justify;
			margin-left: 5px;
			margin-right: 5px;}
		.footer-main .footer-columna h3{
			text-align:center;}
			.footer-main .footer-columna span{
				display:block;}
		}
@media screen and (max-width: 560px){
	.info-main {
		height: 300px;}
		.foto img{
			height: 250px;}
	}
@media screen and (max-width: 400px){
	.info-main {
		height: 430px;}
	.foto img{
		height: 250px;}}
@media screen and (max-width: 320px){
	.menures .container-menu .logo .logo-name a{
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight:bold;
	}}

@media screen and (max-width: 770px){
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 20px;
	margin-top:10px;
	width: 140px;
	margin-right: 5px;
	padding: 10px 0px;
	}}
@media screen and (max-width: 720px){
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 10px;
	margin-top:10px;
	width: 130px;
	margin-right: 3px;
	padding: 10px 0px;
	}
	.foto .informacion{

	font-family: 'Roboto', sans-serif;
	font-size: 25px;
	height: 280px;}
.foto .informacion h1{

	font-family: 'Roboto', sans-serif;
	font-size: 25px;}}			
@media screen and (max-width: 620px){
	.subtitulo{
	max-width: 1500px;
	height: 340px;
	width: 98%;
	}
	.filtro{
	max-width: 1500px;
	height: 50px;
	width: 98%;
	margin: auto;
	}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 5px;
	margin-top:10px;
	width: 170px;
	margin-right: 2px;
	padding: 10px 0px;
	}}
@media screen and (max-width: 560px){
	.subtitulo{
	max-width: 1500px;
	height: 440px;
	width: 98%;
	}
	.banner{
	height: 420px;}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 35px;
	margin-top:10px;
	width: 190px;
	margin-right: 30px;
	padding: 10px 0px;
	}}
@media screen and (max-width: 532px){
	.subtitulo{
	max-width: 1500px;
	height: 440px;
	width: 98%;
	}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 15px;
	margin-top:10px;
	width: 120px;
	margin-right: 10px;
	padding: 5px 0px;
	}}
@media screen and (max-width: 460px){
	.subtitulo{
	max-width: 1500px;
	height: 440px;
	width: 100%;
	}
	.filtro{
	max-width: 1500px;
	height: 50px;
	width: 100%;
	}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 10px;
	margin-top:10px;
	width: 110px;
	margin-right: 5px;
	padding: 7px 0px;
	}}
@media screen and (max-width: 390px){
	.subtitulo{
	max-width: 1500px;
	height: 470px;
	width: 100%;
	}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 20px;
	margin-top:10px;
	width: 120px;
	margin-right: 15px;
	padding: 5px 0px;
	}}
@media screen and (max-width: 300px){
	.subtitulo{
	max-width: 1500px;
	height: 620px;
	width: 100%;
	}
		.subtitulo .fil{
	font-size: 1.25em;
	margin-left: 30px;
	margin-top:10px;
	width: 170px;
	margin-right: 5px;
	padding: 4px 0px;
	}}