// VARIABLES

@import 'reset';

$color-primario: #39CCCC;
$color-secundario: #001F3F;
$color-btn: #157169;
$color-fondo: #F0F6BE;
//$color-fondo: #F1EEDB;



html,
body {
  background: $color-fondo;
}

.icons {
	width: 100%;
	text-align: center;
}

nav {
	width: 100%;
	margin: 15px 0;
	text-align: center;
	a {
		border: 1px solid $color-btn;
		padding: 10px 20px;
		margin-right: 10px;
		text-decoration: none;
		color: #000;
		border-radius: 5px;
		font-family: "proxima-nova",sans-serif;
		&:hover {
			background:rgba(255,255,255,0.65);
			color:#000;
		}
	}
}

.section-left {
	width: 100%;
	padding-top: 5px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	.section-left-example {
		width: 50%;
		display: inline-block;
		float: left;
		picture {
			box-sizing: border-box;
			width: 100%;
			img {
				width: 70%;
				display: block;
				margin: 0 auto;
				border: 5px solid salmon;
			}
		}
	}

	.section-left-drag {
		width: 50%;
		display: inline-block;
		float: left;
		#holder {
		    border: 5px solid salmon;
		    width: 70%;
		    height: 100%;
		    display: block;
		    margin: 0 auto;
		    padding: 20px;
		    box-sizing: border-box;
		    img {
				display: block;
				width: 100%;
		    }
		 }

		#holder.hover {
		    border: 5px solid #AAA1CF;
		}
	}
}

button {
	box-sizing: border-box;
	width: 100/10 * 1%;
  	padding: 15px 10px;
  	margin: 5px 2.5%;
	-webkit-appearance: none;
	background: none;
	border-radius: 3px;
	border: 1px solid $color-btn;
	font-family: "proxima-nova",sans-serif;
	text-transform: uppercase;
	transition: all 0.3s ease-in;
	&:hover {
		background:rgba(255,255,255,0.65);
		color:#000;
	}
}

.section-buttons {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
  	border-bottom: 1px solid lightblue;
}

.texto-principal {
	color: $color-secundario;
	font-size: 64px;
	text-align: center;
	font-family: "proxima-nova",sans-serif;
	margin: 5px 0 0;
	font-weight: 800;
	width: 100%;
	letter-spacing: 1px;
}

.texto-secundario {
	font-family: "proxima-nova",sans-serif;
	font-size: 18px;
	margin: 15px 0;
	color: $color-secundario;
	text-align: center;
}

.btn-filters {
	background: $color-btn;
}

.center-svg {
	display: block;
	margin: 0 auto;
}

.filters-code-even,
.filters-code-odd {
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid lightblue;
	h3 {
		text-align: center;
		font-size: 20px;
		font-family: "proxima-nova",sans-serif;
	}
	code {
		padding-top: 20px;
		width: 50%;
		margin: 0 auto;
		.line-pre {
			text-align: left;
		}
	}
}

.filters-code-even {
	background: #FCFCF6;

}

.filters-code-odd {
	background: white;
}

//FILTERS CLASS

.saturate {
	-webkit-filter: url('#saturate');
	        filter: url('../filters.svg#saturate');
}

.saturotate {
	-webkit-filter: url('#saturotate');
	        filter: url('../filters.svg#saturotate');
}

.rotamatrix {
	-webkit-filter: url('#rotamatrix');
	        filter: url('../filters.svg#rotamatrix');
}

.multitable {
	-webkit-filter: url('#multitable');
	        filter: url('../filters.svg#multitable');
}

.tablen {
	-webkit-filter: url('#tablen');
	        filter: url('../filters.svg#tablen');
}

.dishue {
	-webkit-filter: url('#dishue');
	        filter: url('../filters.svg#dishue');
}

.matrix {
	-webkit-filter: url('#matrix');
	        filter: url('../filters.svg#matrix');
}

.matrix-dos {
	-webkit-filter: url('#matrixDos');
	        filter: url('../filters.svg#matrixDos');
}

.huerotate {
	-webkit-filter: url('#hueRotate');
	        filter: url('../filters.svg#hueRotate');
}

.luminance {
	-webkit-filter: url('#luminanceToAlpha');
	        filter: url('../filters.svg#luminanceToAlpha');
}

.discrete {
	-webkit-filter: url('#discrete');
	        filter: url('../filters.svg#discrete');
}

.discrete-dos {
	-webkit-filter: url('#discrete-dos');
	        filter: url('../filters.svg#discrete-dos');
}


.table {
	-webkit-filter: url('#table');
	        filter: url('../filters.svg#table');
}

.table-dos {
	-webkit-filter: url('#tableDos');
	        filter: url('../filters.svg#tableDos');
}

.identity {
	-webkit-filter: url('#identity');
	        filter: url('../filters.svg#identity');
}

.linear {
	-webkit-filter: url('#linear');
	        filter: url('../filters.svg#linear');
}

.gamma {
	-webkit-filter: url('#gamma');
	        filter: url('../filters.svg#gamma');
}

.turbulence {
	-webkit-filter: url('#turbulence');
	        filter: url('../filters.svg#turbulence');
}

.sepia {
	-webkit-filter: url('#sepiatone');
	        filter: url('../filters.svg#sepiatone');
}

.fematrix-uno {
	-webkit-filter: url('#fematrixUno');
	        filter: url('../filters.svg#fematrixUno');
}

.fematrix-dos {
	-webkit-filter: url('#fematrixDos');
	        filter: url('../filters.svg#fematrixDos');
}

.turbu-map {
	-webkit-filter: url('#turbuMap');
	        filter: url('../filters.svg#turbuMap');
}

.map-uno {
	-webkit-filter: url('#mapUno');
	        filter: url('../filters.svg#mapUno');
}

.map-dos {
	-webkit-filter: url('#mapDos');
	        filter: url('../filters.svg#mapDos');
}

.blur-uno {
	-webkit-filter: url('#blurUno');
	        filter: url('../filters.svg#blurUno');
}

.blur-dos {
	-webkit-filter: url('#blurDos');
	        filter: url('../filters.svg#blurDos');
}

.blur-tres {
	-webkit-filter: url('#blurTres');
	        filter: url('../filters.svg#blurTres');
}

.morpho-uno {
	-webkit-filter: url('#morphoUno');
	        filter: url('../filters.svg#morphoUno');
}

.morpho-dos {
	-webkit-filter: url('#morphoDos');
	        filter: url('../filters.svg#morphoDos');
}

.morpho-tres {
	-webkit-filter: url('#morphoTres');
	        filter: url('../filters.svg#morphoTres');
}

.morpho-cuatro {
	-webkit-filter: url('#morphoCuatro');
	        filter: url('../filters.svg#morphoCuatro');
}



//DRAG&DROP styles


// progress {
//     width: 80%;
//     background: #f3f3f3;
//     border: 0;
//     height: 25px;
//     border-radius: 5px;
// }

// progress::-webkit-progress-bar {
// 	background: #54BCBC;
// 	border-radius: 5px;
// }
// progress::-webkit-progress-value {
// 	background: #54BCBC;
// 	border-radius: 5px;
// }
// progress::-moz-progress-bar {
// 	background: #54BCBC;
// 	border-radius: 5px;
// }

// progress:after {
//     content: '%';
// }

.fail {
    background: #c00;
    padding: 2px;
    color: #fff;
}

.hidden {
    display: none !important;
}