@charset "utf-8";
/* CSS Document */

#moving {
  display: table;
  width: 100%;
  height: 100vh;
  background: url(../img/moving.jpg) top center;
  background-size: cover;
  overflow:hidden;

}
#moving .moving-logo {
  margin: 20px 30px;
  text-align:left;
  padding-top:20px;
}

#moving .moving-logo img {
	height:50px;
}

#moving .moving-container {
  /*background: rgba(0, 0, 0, 0.8);*/
  position:relative;
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  
}
#moving #moving-title{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 5em;
  padding: 15px 35px;
  position: relative;
  color:#fff;
  font-weight:bold;
  padding-top:30vh;
}
@media (max-width: 1200px) {
	#moving #moving-title{
		font-size: 4em;
	}
}
#moving #moving-text{
	margin:0 auto;
	width:40%;
	margin-top:-10px;
	letter-spacing: 1px;
	font-size:1.5em;
	line-height:200%;
	padding:10px;
	text-align:center;
}
#moving #moving-text:hover{

  cursor:pointer;
}


#moving-content{
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	margin-right:0;
}

#moving-info{
	position:absolute;
	z-index:11;
	width:50%;
	right:-50%;
	top:0;
	background-color: #d2d2d2;
	height:100%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	overflow:hidden;
}
#moving-info #DLT{
	color:#E9E9E9;
	text-align:justify;
	max-width:80%;
	margin:0 auto;
	margin-top:15vh;
	margin-bottom::10vh;
}

#moving-info #CLB{
	position:absolute;
	top:0px;
	left:12px;
	color:#ac801d;
	font-size:3em;
	cursor:pointer;
}
.section-description{
	color:#333;
} 
.section-description h4{
	margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 100%;
    text-decoration: underline;
    font-style: italic;
}

.moving-info-active{
	right:0% !important;
}
.moving-content-active{
	margin-right:50% !important;
}

@-webkit-keyframes bounce {
	 0%, 20%, 50%, 80%, 100% {
		 -webkit-transform: translateX(0);
		 -moz-transform: translateX(0);
		 -ms-transform: translateX(0);
		 transform: translateX(0);
	}
	 40% {
		 -webkit-transform: translateX(-20px);
		 -moz-transform: translateX(-20px);
		 -ms-transform: translateX(-20px);
		 transform: translateX(-20px);
	}
	 60% {
		 -webkit-transform: translateX(-10px);
		 -moz-transform: translateX(-10px);
		 -ms-transform: translateX(-10px);
		 transform: translateX(-10px);
	}
}
 @-moz-keyframes bounce {
	 0%, 20%, 50%, 80%, 100% {
		 -webkit-transform: translateX(0);
		 -moz-transform: translateX(0);
		 -ms-transform: translateX(0);
		 transform: translateX(0);
	}
	 40% {
		 -webkit-transform: translateX(-20px);
		 -moz-transform: translateX(-20px);
		 -ms-transform: translateX(-20px);
		 transform: translateX(-20px);
	}
	 60% {
		 -webkit-transform: translateX(-10px);
		 -moz-transform: translateX(-10px);
		 -ms-transform: translateX(-10px);
		 transform: translateX(-10px);
	}
}
 @-ms-keyframes bounce {
	 0%, 20%, 50%, 80%, 100% {
		 -webkit-transform: translateX(0);
		 -moz-transform: translateX(0);
		 -ms-transform: translateX(0);
		 transform: translateX(0);
	}
	 40% {
		 -webkit-transform: translateX(-20px);
		 -moz-transform: translateX(-20px);
		 -ms-transform: translateX(-20px);
		 transform: translateX(-20px);
	}
	 60% {
		 -webkit-transform: translateX(-10px);
		 -moz-transform: translateX(-10px);
		 -ms-transform: translateX(-10px);
		 transform: translateX(-10px);
	}
}
 @keyframes bounce {
	 0%, 20%, 50%, 80%, 100% {
		 -webkit-transform: translateX(0);
		 -moz-transform: translateX(0);
		 -ms-transform: translateX(0);
		 transform: translateX(0);
	}
	 40% {
		 -webkit-transform: translateX(-20px);
		 -moz-transform: translateX(-20px);
		 -ms-transform: translateX(-20px);
		 transform: translateX(-20px);
	}
	 60% {
		 -webkit-transform: translateX(-10px);
		 -moz-transform: translateX(-10px);
		 -ms-transform: translateX(-10px);
		 transform: translateX(-10px);
	}
}

 .encircle {
	 width: 45px;
	 height: 45px;
	 border-radius: 50px;
	 border: solid 1px rgb(200,200,200,0.5);
	 background-color: #c8a33e;
	 margin:0 auto;
} 
.encircle:hover {
	 background-color: #f1ca61;
}
 .arrow {
	 margin: 0 auto;

	 margin-left:-5px;
	 margin-top: 15px;
	 width: 15px;
	 height: 15px;
	 border: solid white;
	 border-width: 0 3px 3px 0;
	 display: inline-block;
	 padding: 3px;
}
 .right {
	 transform: rotate(-45deg);
	 -webkit-transform: rotate(-45deg);
}
 .bounce {
	 -webkit-animation: bounce 2s infinite;
	 -moz-animation: bounce 2s infinite;
	 -ms-animation: bounce 2s infinite;
	 animation: bounce 2s infinite;
}
 

@media (max-width: 1000px) {
  .moving-content-active {
    margin-right:0 !important;
  }
  .moving-info-active{
	  right:0% !important;
	  width:100% !important;
  }
  .moving-title-active, .moving-text-active, .moving-sep-active{
    visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.5s, opacity 0.5s linear;  
  }
}