/*####################################################
##													##
## ILARQ											##
## 													##
## GLOBAL.CSS										##
## 													##
## 													##
## Estilo global para todo el sitio					##
## 													##
## 													##
##													##
####################################################*/

@charset "utf-8";

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, form, label, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { /* HTML5 en navegadores viejos */
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* ESTILOS GLOBALES */

html, body {
	height: 100%;
}

a {
	text-decoration: none;
}

.txt-right {
	text-align: right;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

body {
	background: #666;
	font-family: Verdana, Geneva, sans-serif;
}

	#home {
		background-image: url('imgs/background_001.jpg');
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: none;
	}
	
	#global {
		margin: auto;
		width: 100%;
		height: 100vh;
		position: relative;
	}

		#content {
			width: 1280px;
			height: 100vh;
			position: absolute; top: 0; left: 0;
			z-index: 100;
		}

			#sidebar {
				width: 300px;
				height: 100%;
				background: url('imgs/sidebar-bg.png') repeat;
				float: left;
				overflow: hidden;
				position: fixed;
			}
			
				#logo {
					width: 278px;
					height: 172px;
					background: url('imgs/ilarq-logo.png') no-repeat center left;
					display: block;
					position: relative; top: 20px; left: 15px;
				}
				
				#menu {
					width: 231px;
					height: 115px;
					background: url('imgs/menu-lines-bg.png') no-repeat center left;
					position: relative; top: 50px; left: 50px;
				}
				
					#menu ul {
						position: relative; top: 7px; left: 48px;
					}
				
						#menu ul li {
							margin: 14px;
						}
					
							#menu ul li a {
								width: 120px;
								font-size: 12px;
								font-weight: bold;
								color: #333;
								text-transform: uppercase;
								text-align: right;
								display: block;
								line-height: 15px;
							}
				
					.menu-item {
						height: 16px;
						padding-left: 30px;
						background: url('imgs/menu-item.png') no-repeat left top;
					}
					
						.menu-item:hover,
						.menu-item-active {
							background: url('imgs/menu-item.png') no-repeat 0px -16px;
						}
				
				#bottom {
					width: 280px;
					position: absolute; bottom: 0; left: 10px;
				}
				
					#bottom-text-top {
						width: 279px;
						height: 84px;
						background: url('imgs/bottom-lines-bg.png') no-repeat center left;
					}
					
						#bottom-text-top p {
							font-size: 13px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 5px;
							color: #fff;
							position: relative; top: 22px; left: 21px;
						}
						
					#bottom-text-bottom {
						margin-bottom: 10px;
						width: 244px;
						height: 34px;
						background: url('imgs/bottom-bars-bg.png') no-repeat center left;
						position: relative; left: 15px;
					}
					
						#bottom-text-bottom p {
							font-size: 12px;
							font-weight: 100;
							letter-spacing: 3px;
							color: #fff;
							position: relative; top: 3px; left: 19px;
						}
						
							#txt-btm {
								margin-bottom: 4px;
								letter-spacing: 4px !important;
							}
							
			#content-right {
				margin: auto;
				width: 800px;
				padding-top: 50px;
				position: relative; left: 100px;
			}
			
				.sections {
					left: 230px !important;
				}
			
				#photos {
					margin-bottom: 20px;
					width: 476px;
					height: 222px;
					background: url('imgs/photos.png') no-repeat center left;
					position: relative; left: 150px;
				}
				
				#text {
					width: 510px;
					font-size: 14px;
					color: #fff;
					text-align: justify;
					font-family: Verdana, Geneva, sans-serif !important;
					position: relative; left: 180px;
				}
				
					#text p {
						margin-bottom: 10px;
						line-height: 17px;
						position: relative; left: -50px;
					}
					
					#text p#text-color {
						color: #F90;
						font-weight: bold;
					}
			
				#contact-box1 {
					margin-bottom: 14px;
					width: 676px;
					height: 322px;
					background: url('imgs/contact-box1.png') no-repeat center left;
				}
				
				#contact-box2 {
					margin-right: 14px;
					width: 331px;
					height: 331px;
					background: url('imgs/contact-box2.png') no-repeat center left;
				}
				
				#contact-box3 {
					width: 331px;
					height: 331px;
					background: url('imgs/contact-box3.png') no-repeat center left;
				}
				
					#contact-email {
						width: 331px;
						height: 90px;
						position: relative; top: 239px;
						display: block;
					}
			
			#house {
				margin-bottom: 10px;
				width: 620px;
				height: 450px;
				overflow: hidden;
				position: relative;
			}
			
				#house img {
					position: absolute; top: 0; left: 0;
				}
				
				#house img:first-child {
					z-index: 10;
				}
			
			#house-info {
				width: 240px;
				height: 55px;
				padding: 10px;
				font-size: 11px;
				line-height: 13px;
			}
			
				#house-info span.line:last-of-type {
					font-style: italic;
					font-weight: bold;
				}
			
				#line_1 {
					color: #fff;
					font-size: 12px !important;
					font-weight: bold;
				}
			
			#thumbs {
				margin-bottom: 10px;
				width: 620px;
				height: 75px;
				background: #F93;
				overflow: hidden;
			}
			
				#thumbs img {
					border: 3px solid #F93;
					position: relative; top: 12px; right: 13px;
				}
			
			#navigation {
				width: 630px;
				overflow: hidden;
			}
			
				#navigation img {
					margin-right: 2px;
					margin-bottom: 4px;
					border: 1px solid transparent;
				}
				
			#not-found {
				margin-top: 100px;
				margin-bottom: 100px;
				color: #ddd;
			}
			
/* BACKGROUND RANDOM */
#img-random {
	width: 100%;
    height: 100%;
    position: fixed; top: 0px; left: 0px;
    z-index: 0; 
}

	#img-random li span { 
		width: 100%;
		height: 100%;
		position: absolute; top: 0px; left: 0px;
		color: transparent;
		background-image: url('imgs/background_001.jpg');
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: none;
		opacity: 0.2;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  		filter: alpha(opacity=20);
		z-index: 0;
	}
	
	#img-random li div { 
		z-index: 1000;
		position: absolute; bottom: 30px; left: 0px; width: 100%;
		text-align: center;
		opacity: 0;
		color: #fff;
	}
			
/* BACKGROUND SLIDESHOW */

.cb-slideshow,
.cb-slideshow:after {
	width: 100%;
    height: 100%;
    position: fixed; top: 0px; left: 0px;
    z-index: 0; 
}

.cb-slideshow:after { 
    content: '';
    /*background: transparent url('imgs/pattern.png') repeat top left;*/
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute; top: 0px; left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute; bottom: 30px; left: 0px; width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url('imgs/background_001.jpg');
}

.cb-slideshow li:nth-child(2) span { 
    background-image: url('imgs/background_002.jpg');
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

.cb-slideshow li:nth-child(3) span { 
    background-image: url('imgs/background_003.jpg');
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) span { 
    background-image: url('imgs/background_004.jpg');
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) span { 
    background-image: url('imgs/background_005.jpg');
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.cb-slideshow li:nth-child(6) span { 
    background-image: url('imgs/background_006.jpg');
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}