* {
	margin:0;
	padding:0;
    box-sizing: border-box;
}

h1 {
	font-size: 24px;
	font-family: "Open Sans",sans-serif;
	font-weight: bolder;
	letter-spacing: 2px;
}

p {
	font-family: "Open Sans",sans-serif;
	font-weight: normal;
	letter-spacing: 2px;
}

/*video {
	display: block;
	padding-top: 64px;
	width: calc(100% - 64px) !important;
	height: auto !important;
	margin: 0 auto;
}*/

#wrapper {
	position: relative;
	z-index: 1;
	background-color: white;
	min-height: 100vh;
}

/*SLIDER*/
#slider-container {
    display: flex;
	overflow: hidden;
	height: calc(95vh - 80px);
	max-height: 600px;
	min-height: 478px;
}
#slider-container > div {
  	position: relative;
  	width: 100%;
	height: 100%;
	display: inline-block;
	outline: 2px solid white;
	outline-offset: -10px;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#slider-container > #slider-image:nth-child(1) {
	background-color: black;
}
#slider-container > #slider-image:nth-child(2) {
	background-image: url("../imgs/slider/enrollables.jpg");
}
#slider-container > #slider-image:nth-child(3) {
	background-image: url("../imgs/slider/sheer-elegance.jpg");
}
#slider-container > #slider-image:nth-child(4) {
	background-image: url("../imgs/slider/toldo-brazo-punto-recto.jpg");
}
#slider-container > #slider-image:nth-child(5) {
	background-image: url("../imgs/slider/rolling-shutter.jpg");
}
#slider-container > #slider-image:nth-child(6) {
	background-image: url("../imgs/slider/papel-tapiz.jpg");
}
#slider-container > #slider-image:nth-child(7) {
	background-image: url("../imgs/slider/motorizada.jpg");
}
#slider-container > #slider-image:nth-child(n+2) {	
	margin-left: -100%;
}
#slider-container > #slider-image > div {
	position: relative;
	text-align: center;
	left:50%;
	top:24px;
	transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	min-width: 232px;
	width: 100%;
	color: white;
	/*text-shadow: 0 2px black;*/
	/*background-color: rgba(229,50,45,0.5);*/
	padding: 16px 20px;
	opacity: 1;
}
#slider-container > #slider-image > div.loading-cover {
	position: absolute;
	top:50%;
	left:50%;
	min-width: 0;
	min-height: 0;
	width:64px;
	height:64px;
	border-radius: 50%;
	border:8px solid #545454;
	border-top-color: #E14E4E;
	animation:spin 1s linear infinite;
	-webkit-animation:spin 1s linear infinite;
	z-index: 10;
	transform: translate(-50%,-50%) rotate(0deg); 
}
#slider-container > #slider-image > .play-cover {
	position: absolute;
	top:50%;
	left:50%;
	min-width: 0;
	min-height: 0;
	width:64px;
	height:64px;
	z-index: 10;
	transform: translate(-50%,-50%) rotate(0deg); 
}
#intro-video-hor {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
 #intro-video-ver {
	position: relative;
	left: 50%;
	transform: translateY(-100%) translateX(-50%);
	-webkit-transform: translateY(-100%) translateX(-50%);
 }
#slider-control {
	position: relative;
	z-index: 1;
	margin-top: -36px;
	text-align: center;
}
#slider-control > #slider-arrow-left, #slider-arrow-right {
	position: relative;
	width: 10px;
	height: 10px;
	border-top: 2px solid white;
	border-right: 2px solid white;
	display: inline-block;
	top: -4px;
}
#slider-control > #slider-arrow-left:hover, #slider-arrow-right:hover {
	border-width: 4px;
	top: -4px;
	left: 0px;
	margin-left: 0px;
	cursor: pointer;
}
#slider-control > #slider-arrow-left {
	transform: rotate(225deg);	
	-webkit-transform: rotate(225deg);	
}
#slider-control > #slider-arrow-right {
	transform: rotate(45deg);	
	-webkit-transform: rotate(45deg);	
}
#slider-control > svg > .select-circle {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
#slider-control > svg > .select-circle.selected {
	opacity: 1;
}

.select-circle:hover {
	cursor: pointer;
}

/*CONTENIDO*/
#empresa-container {
	margin-top: 128px;
}
#empresa-container > #empresa-list {
	text-align: center;
	/*background: url("../imgs/texturas/textura-roja-seamless.jpg") repeat center;*/
	background-color: #e5322d;
	background-size: 128px;
}
#empresa-container > #empresa-list > li {
	list-style: none;
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 50%;
	height: 100%;
	min-width: 240px;
	padding: 32px 1%;
	padding-bottom: 96px;
	/*display: table-cell;*/
	vertical-align: top;
	color: white;
}
#empresa-container > #empresa-list > li > div {
	position: relative;
	margin-top:-56px;
	top:-26px;
	left:50%;
	transform: translateX(-50%) rotate(45deg);
	-webkit-transform: translateX(-50%) rotate(45deg);
	width: 100px;
	height: 100px;
	background-color: white;
	outline: 4px solid #e5322d;
	outline-offset: -8px;
	transition: all 0.5s ease-in-out;
}
#empresa-container > #empresa-list > li > img {
	position: relative;
	height: 48px;
	margin-top: -48px;
	top: -68px;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}
#empresa-container > #empresa-list > li > img:nth-child(3) {
	margin-left: -52px;
}
#empresa-container > #empresa-list > li:hover > img:nth-child(3) {
	opacity: 0;
}
#empresa-container > #empresa-list > li:hover > div {
	outline-color: white;
	background-color: #e5322d;
}
#empresa-container > #empresa-list > li:hover > h1 {
	border-color: rgba(255,255,255,1);
}
#empresa-container > #empresa-list > li.selected > img:nth-child(3) {
	opacity: 0;
}
#empresa-container > #empresa-list > li.selected > div {
	outline-color: white;
	background-color: #e5322d;
}
#empresa-container > #empresa-list > li.selected > h1 {
	border-color: rgba(255,255,255,1);
}
#empresa-container > #empresa-list > li > h1 {
	font-size: 22px;
	border-bottom: 2px solid rgba(255,255,255,0);;
	transition: all 0.5s ease-in-out;
	margin-bottom: 4px;
	margin-top: -16px;
}
#empresa-container > #empresa-list > li > p {
	font-weight: lighter;
	font-size: 14px;
}
#empresa-container > #empresa-list > li:nth-child(n+2) {
	border-top: 2px solid white;
}
#otros-container {
	text-align: center;
}
#atencion-container {
	margin-top: 32px;
	display: inline-block;
	width: 100%;
	max-width: 350px;
	text-align: center;
	vertical-align: top;
}
#atencion-container > img {	
	width: 90%;
	outline: 1px dotted #e5322d;
	outline-offset: 6px;
}
#calidad-container {
	margin-top: 32px;
	display: inline-block;
	width: 100%;
	max-width: 350px;
	text-align: center;
	vertical-align: top;
}
#calidad-container > img {	
	width: 90%;
	outline: 1px dotted #e5322d;
	outline-offset: 6px;
}
#motorizacion-container {
	display: inline-block;
	margin-top: 32px;
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 350px;
}
#motorizacion-container > img.house-img {
	position: relative;
	z-index: -1;
	width: 90%;
	outline: 1px dotted #e5322d;
	outline-offset: 6px;
}
#motorizacion-container > h1 {
	color: white;
	margin-top: -60px;
	margin-bottom: 16px;
	background-color: rgba(229,50,45,0.75);
	padding: 6px 0;
}
#motorizacion-container > ul {
	font-family: "Open Sans",sans-serif;
	font-size: 14px;
	list-style: none;

}
#motorizacion-container > ul > li {
	position: relative;
	padding: 6px 0;
	border-bottom:1px solid #e5322d;
	transition: color .25s ease-in-out;
}
#motorizacion-container > ul > li:hover {
	cursor: pointer;
	color: #e5322d;
}
#motorizacion-container > ul > li:first-child {
	border-top:1px solid #e5322d;
}

#goup-button {
	position: fixed;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	z-index: 100;
	right: 32px;
	bottom: 32px;
	width: 48px;
	height: 48px;
	transition: all 0.25s ease-in-out;
	filter: drop-shadow(0px 0px 5px black);
	-webkit-filter: drop-shadow(0px 0px 5px black);
}
#goup-button:hover {
	cursor: pointer;
	width: 52px;
	height: 52px;
	bottom: 30px;
	right: 30px;
}

@media screen and (min-width:740px) {
	h1 {
		font-size: 32px;
	}
	#empresa-container > #empresa-list {
		display:table-row;
	}
	#empresa-container > #empresa-list > li {
		display:table-cell;
		left: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		width: 30%;
		padding: 32px 1%;
	}
	#empresa-container > #empresa-list > li:nth-child(n+2) {
		border-left: 2px solid white;
		border-top: none;
	}
}

@keyframes jump {
	0% { top:0px; }
	50% { top:-8px; }
	100% { top:0px; }
}
@-webkit-keyframes jump {
	0% { top:0px; }
	50% { top:-8px; }
	100% { top:0px; }
}

@keyframes spin {
	from { 
		transform: translate(-50%,-50%) rotate(0deg); 
		-webkit-transform: translate(-50%,-50%) rotate(0deg); 
	}
	from { 
		transform: translate(-50%,-50%) rotate(360deg); 
		-webkit-transform: translate(-50%,-50%) rotate(360deg); 
	}
}

@-webkit-keyframes spin {
	from { 
		transform: translate(-50%,-50%) rotate(0deg); 
		-webkit-transform: translate(-50%,-50%) rotate(0deg); 
	}
	from { 
		transform: translate(-50%,-50%) rotate(360deg); 
		-webkit-transform: translate(-50%,-50%) rotate(360deg); 
	}
}