@charset "utf-8";
@import url(../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
/* H1 EFFECT */
.effect {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
  font-weight: 700;
  display: inline-block;
  position: relative;
 -webkit-background-clip: text;
  background-clip: text;
  background: -webkit-linear-gradient(0deg, #222 50%, transparent 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
  background-size:200% 100%;
  transition: 0.6s all cubic-bezier(0.860, 0.000, 0.070, 1.000) 0.8s;
}

.effect:before{
  content: "";
  height: 100%;
  width: 100%;
  background: #eaeaea;
  z-index: 2;
  display: block;
  position: absolute;
  top: 0;left: 0;
  transform-origin: left;
  transform: scaleX(0);
}
.effect:after{
  content: "";
  height: 100%;
  width: 100%;
  background: #222;
  z-index: 2;
  display: block;
  position: absolute;
  top: 0;left: 0;
  transform-origin: left;
  transform: scaleX(0);
}
.effect.active {
  background-position: 0 0;
}

.effect.active:before {
    animation: anime 1.2s cubic-bezier(0.860, 0.000, 0.070, 1.000) forwards;
}
.effect.active:after {
    animation: anime 1.2s 0.5s cubic-bezier(0.860, 0.000, 0.070, 1.000) forwards;
}
@keyframes anime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  51%{
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}



/* CTA EFFECT */

.cta {
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  line-height: 2em;
  padding: 2px 10px;
  background: #222;
  margin-top: 20px;
  transition: 0.2s all ease-out;
  -webkit-transition: 0.2s all ease-out;
  -moz-transition: 0.2s all ease-out;
  color: #fff;
  transition: 0.3s all ease-out;
  -webkit-transition: 0.3s all ease-out;
  -moz-transition: 0.3s all ease-out;
  letter-spacing: 1px;
}

a.cta.outline {
  position: relative;
  background: transparent;
  border: 1px solid #222;
  overflow: hidden;
}

.cta.outline:before {
  content: "";
  height: 100%;
  z-index: -1;
  width: 100%;
  background: #222;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  transition: 0.6s transform cubic-bezier(1.000, 0.610, 0.165, 1.000);
  -webkit-transition: 0.6s transform cubic-bezier(1.000, 0.610, 0.165, 1.000);
  -moz-transition: 0.6s transform cubic-bezier(1.000, 0.610, 0.165, 1.000);
  transform-origin:right;
  -webkit-transform-origin:right;
}
.cta.outline span {
  position: relative;
  z-index: 3;
   -webkit-background-clip: text;
  background-clip: text;
  background: -webkit-linear-gradient(0deg, #FFF 50%, #222 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
  background-size:200% 100%;
  color: transparent;
  transition: 0.6s all cubic-bezier(1.000, 0.610, 0.165, 1.000) 0.2s;
  -webkit-transition: 0.6s all cubic-bezier(1.000, 0.610, 0.165, 1.000) 0.2s;
  -moz-transition: 0.6s all cubic-bezier(1.000, 0.610, 0.165, 1.000) 0.2s;
}
.cta.outline:hover:before {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  transform-origin:left;
  -webkit-transform-origin:left;
}
.cta.outline:hover{
  box-shadow: none;
}
.cta.outline:hover span{
  background-position: 0 0;
}

.fade {
  opacity: 0;
  transform: translateY(-50px);
  transition: 0.6s all ease-out 2s;
}

a.fade {
  transition: 0.6s all ease-out 2.6s;
}
.fade.active {
  transform: translateY(0);
  opacity: 1;
}


.social-icon {
    color: #322f30;
}
ul.social-icons {
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 25px;
}
.social-icons a {
    color: #322f30;
    text-decoration: none;
}
.fa-facebook {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}
.fa-facebook:hover {
    background-color: #3d5b99;
	color:#fff;
}

.fa-instagram {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}
.fa-instagram:hover {
    background-color: #7E6146;
	color:#fff;
}


.fa-twitter {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}
.fa-twitter:hover {
    background-color: #00aced;
	color:#fff;
}
.fa-rss {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-rss:hover {
    background-color: #eb8231;
	color:#fff;
}
.fa-youtube {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}
.fa-youtube:hover {
    background-color: #e64a41;
	color:#fff;
}
.fa-linkedin {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
	color:#fff;
}
.fa-google-plus {
    padding:5px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}
.fa-google-plus:hover {
    background-color: #e25714;
	color:#fff;
}


.contact {padding: 80px 0px 40px;}
.contact-form {
	width:60%;
	margin-left:20%;
}
.contact-form input, textarea, select {
	width: 90%;
	height: 45px;
	border: 1px solid #999;
	padding: 0px 15px;
	font-size: 14px;
	margin-bottom: 15px;
	text-transform: none;
	color: #CCC;
}
.contact-form form {padding-top: 10px;}
.contact-form textarea {height: 120px; padding-top: 10px;}
.contact-form input[type="submit"] {
	width: 120px;
	color: #fff;
	text-align: center;
	border: 0px none;
	background-color: #575756;
}

.contact-form input[type="submit"]:hover {background: #999;}