@charset "utf-8";
/* CSS Document */
.slideshow
{
	opacity:1;
	position:absolute;
	vertical-align: middle;
	top:40%;
	left:0;
	/*width:85%;*/
	height:auto;
	margin-left:5%;
	margin-right:10%;
	text-align: left;
	transition:all 1s ease;
	
	animation: fadeText 6s ease infinite 0s;
}

.dot-holder
{
	position:absolute;
	top:70%;
	left: 95%;
}
.dot
{
	cursor: pointer;
	height: 16px;
	width: 16px;
	margin-bottom: 16px;
	background-color: #777777;
	border-radius: 50%;
	display: block;
	transition: background-color 0.5s ease;
}
.active, .dot:hover {
  background-color: #ffff;
}
.slideshow-img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	margin:0;
	padding:0;
	transition:all 1s ease;
	/*animation*/

	animation: slideShow 6s linear infinite 0s;

	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
.slideshow h2
{
	font-weight: 700;
}
.slideshow p
{
	text-align: left;
	font-size: 1.5vw;/*24px*/;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
	letter-spacing: 0;
}
.slideshow-btn
{
	/*background-color: #fff; */
	border: 4px solid #fff;
	color: #fff;
	padding: 16px 32px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	margin-top: 16px;
	transition-duration: 0.4s;
	cursor: pointer;
	font-family: "Unite", sans-serif;
	font-size: 18px;
}
.slideshow-btn:hover
{
  background-color: #fff;
  color: #000;
  transition-duration: 0.4s;
}

#pic-1
{
	background: url(../img/header/1.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
#pic-2
{
	background: url(../img/header/2.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#pic-3
{
	background: url(../img/header/3.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#pic-4
{
	background: url(../img/header/4.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#pic-5
{
	background: url(../img/header/5.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#pic-6
{
	background: url(../img/header/6.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#pic-7
{
	background: url(../img/header/7.jpg) no-repeat center center;
		background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#sk-text
{
	position:absolute;
	transform-origin: 0 0;
	transform: rotate(90deg);
	left:95%;
	width:240px;
	font-size: 16px;
	text-align: left;
	top:18%;
}
#sk-line
{
	position: absolute;
    width: 5%;
    height: 4px;
    margin-top: 14px;
    margin-bottom: 14px;
    background: #fff;
    text-align: left;
    top: 84.5%;
	transition: all 1s ease;
}
#sk-proyecto
{
	position:absolute;
	/*width:240px;*/
	height:48px;
	font-size: 20px;
	text-align: left;
	margin-left:5.5%;
	top:85%;
}

.animate-line
{
  animation: growLine 6s ease infinite 0s;
  -o-animation: growLine 6s ease infinite 0s;
  -moz-animation: growLine 6s ease infinite 0s;
  -webkit-animation: growLine 6s ease infinite 0s;	
}

.animate-text
{
  animation: moveLeft 6s ease infinite 0s;
  -o-animation: moveLeft 6s ease infinite 0s;
  -moz-animation: moveLeft 6s ease infinite 0s;
  -webkit-animation: moveLeft 6s ease infinite 0s;	
}
/*GROW LINE*/
@keyframes 
growLine
{  
	0% {width: 0;}
	10% {width: 5%;}
	90% {width: 5%;}
	100% {width: 0%;}
}

@-o-keyframes 
growLine
{  
	0% {width: 0;}
	10% {width: 5%;}
	90% {width: 5%;}
	100% {width: 0%;}
}

@-moz-keyframes 
growLine
{  
	0% {width: 0;}
	10% {width: 5%;}
	90% {width: 5%;}
	100% {width: 0%;}
}

@-webkit-keyframes 
growLine
{  
	0% {width: 0;}
	10% {width: 5%;}
	90% {width: 5%;}
	100% {width: 0%;}
}
/*MOVE FROM LEFT*/
@keyframes 
moveLeft
{  
	0% {opacity: 0;margin-left:0;}
	5% {opacity: 1;}
	10% {margin-left:5.5%;}
	90% {margin-left:5.5%;}
	95% {opacity: 1;}
	100% {opacity: 0;margin-left:0;}
}
/*FADE TEXT*/
@keyframes 
fadeText
{  
	0% {opacity: 0;}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes 
fadeText
{  
	0% {opacity: 0;}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes 
fadeText
{  
	0% {opacity: 0;}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes 
fadeText
{  
	0% {opacity: 0;}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

/*SLIDESHOW FADE*/

@keyframes 
slideShow
{ 
	0% {opacity: 0;-ms-transform:scale(1);transform:scale(1);}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;-ms-transformm:scale(1);transform:scale(1.1);}
}