* {
	font-family: 'Montserrat', sans-serif;
	margin: 0px;
}

body, html {
	height: 100%;
	width: 100%;
}

body {
	overflow: hidden;
	background: #000;
	transition: background 2s;
}

.entrada-sup {
	display: block;
	position: absolute;
	width: 100%;
	height: 50%;
	background: #000;
	color: #fff;
	bottom: 50%;
	-webkit-animation: slide 2s forwards;
	-webkit-animation-delay: 2s;
	animation: slide 2s forwards;
	animation-delay: 2s;
}

@-webkit-keyframes slide {
	100% { bottom: -100%; }

}

@keyframes slide {
	100% { bottom: -100%; }
}

.h1sup {
	position: absolute;
	width: 100%;
	bottom: 55%;
	text-align: center;
	
}

.entrada-inf {
	display: block;
	position: absolute;
	width: 100%;
	height: 50%;
	background: #ff9504;
	color: #000;
	bottom: 0px;
	-webkit-animation: slide 2s forwards;
	-webkit-animation-delay: 2s;
	animation: slide 2s forwards;
	animation-delay: 2s;
}

@-webkit-keyframes slide {
	100% { bottom: -100%; }
}

@keyframes slide {
	100% { bottom: -100%; }
}

.h1inf {
	position: absolute;
	width: 100%;
	top: 55%;
	text-align: center;
}

.tit-pral {
	display: none;
	background: #495C83;
	text-align: center;
	width: 100%;
	height: 25%;
	transition: background 2s;
}

.titulo {
	color: #fff;
	padding-top: 2%;
	transition: color 2s;
}

.election {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 30%;
}

.izquierda {
	width: 25%;
	background: #B2BBCF;
	color: #000;
	transition: width 2s, border-radius 2s;
	text-align: center;
}

.derecha {
	width: 25%;
	background: #000;
	color: #ff9504;
	transition: width 2s, border-radius 2s;
	text-align: center;
}

.texto {
	font-weight: bold;
	padding: 5% 5%;
	text-align: center;
}

.boton_izquierda {
	border: 2px solid #fff;
	width: 10%;
	margin: 0% 40%;	
}

.boton_derecha {
	border: 2px solid #ff9504;
	width: 10%;
	margin: 0% 40%;
}

#no, #thumbs {
	border-radius: 50px;
	margin-top: 0px;
}


/* -------------------------------------------- CONTACTO ---------------------------------------------------------------- */

#more-arrows {
	width: 75px;
	margin-top: 2%;
}
#contacto:hover polygon {
	fill: #fff;
	transition: all 0.2s ease-out, fill 2s;
}
polygon.arrow-bottom {
	transform: translateY(-18px);
}
#contacto:hover polygon.arrow-bottom {
	transform: translateY(2%);
}
polygon.arrow-top {
	transform: translateY(18px);
}
#contacto:hover polygon.arrow-top {
	transform: translateY(-2%);
}
polygon {
	fill: #fff;
	transition: all 0.2s ease-out, fill 2s;
}
polygon.arrow-middle {
	opacity: 0.75;
}
polygon.arrow-top {
	opacity: 0.5;
}

.contacto-container {
	text-align: center;
	display: inline-block;
	width: 100%;
	height: 45%;
	background: #495C83;
	transition: background 2s;
}

.contact-tit {
	margin-top: 2%;
	color: #fff;
	transition: color 2s;
}

input, textarea {
	margin: 1% 0px;
	width: 75%;
	border: 3px solid #fff;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 16px;
	background-color: transparent;
	transition: all 2s;
	color: #fff;
}

textarea {
	height: 50px;
	padding: 10px;
	resize: none;
}

input[type="submit" i] {
	width: 25%;
}

/* -------------------------------------------- PLACEHOLDER ---------------------------------------------------------------- */

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #fff;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #FFF;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #FFF;
}




/*-------------------------------------------- hide scrollbar but allow scrolling ----------------------------------------------------------------*/
body {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll; 
}

body::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}


/* -------------------------------------------- MAX-WIDTH 800px ---------------------------------------------------------------- */


@media only screen and (max-width: 800px) {
	body {
		background: #495C83;
	}
	.tit-pral {
		height: 20%;
	}
	.election {
		display: block;
		width: 100%;
		height: 50%;
	}
	.izquierda, .derecha{
		width: 100% !important;
		height: 50%;
	}
	img {
		display: inline-block !important;
	}
	.contacto-container {
		height: 30%;
	}

}