/*stylesheet*/

body{
  background-color: #333;
  margin: 0;
  color: #666;
  font-family: "Raleway", Arial;
}

a{
  text-decoration: none;
  color: #666;
  transition: color 0.2s;

}

a:hover{
  color: #ff523c;

}

h1,h2,h3,h4{

}

::-webkit-scrollbar{
  width: 10px;
  border-radius: 25px;
}

::-webkit-scrollbar-track{
  background-color: rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb{
 background-color: #ff523c;
}

::-webkit-scrollbar-thumb:hover{

}

/*TOP-BAR*/

.top-bar-container{
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 30px;
  padding: 15px 12%;
  z-index: 100;
}

.top-bar-container h1, h2, h3, h4{

}

.hamburger{
  display: none;
}

.top-left-content{
  float: left;
  position:absolute;
  width: 350px;
}

.top-right-content{
  display: block;
  float: right;
  /*width: 570px;*/
  position: relative;
  left: -22%;
  top: 5px;
}

.top-right-content ul{
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.top-right-content li{
  display: inline-block;
  margin: 0 7px;
}

.top-grunge-style{
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
}

.main-menu{
	display: inline-block;
}

.slide-container video{
	z-index: -1000;
}

.languages-container{
	position: relative;
	top: 5px;
}

.slideContainer{
  width: 100%;
  height: 800px;
  /*background-image: url("../img/bottomGrunge.png"), url("../img/slideBkg.png");*/
  background-image:  url("../img/bottomGrunge.png");
  /*background-size: contain, cover;*/
  background-size: contain;
  background-position:bottom, top;
  /*background-position:bottom;*/
  background-repeat: no-repeat;
  overflow: hidden;
}

.slide-text{
  margin: 0 auto;
  position: relative;
  top: 370px;
  text-align: center;
  color: #fff;
}

.slide-text h1{
	font-weight: 400;
	font-size: 50px;
}

.feature-image{
	right: 0;
	bottom: 74px;
	position: absolute;
	z-index: -8;
}

.works-section-container{
  width: 100%;
  /*height: 400px;*/
  background-color: #fff;
}

.content-container{
  margin: 0 auto;
  padding: 100px 0px;
  width: 50%;

}

 .video-background-overlay{
	width: inherit;
    height: inherit;
    /*background-color: rgba(105, 34, 25, 0.68);*/
    z-index: -9;
    position: absolute;
    top: -1;
 }

.content-container h2{

}

.content-container hr{
  border: none;
  border-bottom: solid 1px #aeaeae;
  width: 150px;
}

.title-container{
  margin: 0 auto;
  width: 100%;
}

.title-container img{
  display: block;
  margin: 0 auto;
  width: 70px;
}

.title-container h1{
  color: #444;
  margin: 3px;
  text-align: center;
}

.title-container h3{
  margin: 12px 0px;
  text-align: center;
  font-weight: 400;
}

.content-body{
  margin: 30px 0px;
  text-align: center;
}

.portfolio-section-container{
  width: 100%;
  /*height: 500px;*/
  background-image: url("../img/topGrunge.png"), url("../img/bottomGrunge.png"), url("../img/bkg-black.png");
  background-size: contain, contain, auto;
  background-position: top, bottom, left bottom;
  background-repeat: no-repeat;
}

.clients-section-container{
  width: 100%;
  /*height: 500px;*/
  background-color: #fff;
}

.contact-section-container{
  width: 100%;
  /*height: 500px;*/
  background-image: url("../img/topGrunge.png"), url("../img/bottomGrunge.png"), url("../img/bkg-black.png");
  background-size: contain, contain, auto;
  background-position: top, bottom, left bottom;
  background-repeat: no-repeat;
}

.footer-section-container{
  width: 100%;
/*  height: 150px;*/
  background-color: #fff;
}

/*works*/
.works-card-container{
  cursor: default;
  position: relative;
  display: inline-block;
  width: 25%;
  max-width: 220px;
  min-width: 170px;
  height: 250px;
  text-align: center;
  color: #666;
  border: solid 1px #ff5139;
  border-radius: 10px;
  padding: 15px;
  margin: 5px;
  overflow: hidden;
}

.works-card-text{
  position: relative;
}

.works-card-container h3{
  margin: 5px;
}

.works-card-container h4{
  font-weight: 400;
  margin: 5px;
}

.works-card-container hr{
  border: 0;
  border-bottom: solid 1px #eee;
}

/*portfolio cards*/
.portfolio-card-container{
  cursor: default;
  position: relative;
  display: inline-block;
  background-image: url("../img/cards/card1.png");
  background-size:322px;
  /*background-size: cover;*/
  background-position:center;
  width: 320px;
  height: 320px;
  text-align: center;
  color: #eee;
  transition: background-size 0.2s ease;
}

.portfolio-card-container:hover{
  background-size: 350px;
}

.portfolio-card-layer{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.portfolio-card-text{
  position: relative;
  top: 80px;
}

.portfolio-card-text a{
	color: #fff;
}

.portfolio-card-text li{
	list-style-type: none;
	position: relative;
    left: -20px;
}


.portfolio-card-container h2{
  margin: 5px;
}

.portfolio-card-container h4{
  font-weight: 400;
  margin: 5px;
}

.portfolio-card-container hr{
  border: 0;
  border-bottom: solid 1px #eee;
}

/*clients*/

.client-card{
  display: inline-block;
  margin: 0 25px;
}

.client-card img{
  width: 100px;
}

/*contact*/

.form-container{
	margin-right: 50px;
}

div.wpcf7{
  display: inline-block;
  width: 30%;

  
}

.contact-text-container{
  display: inline-block;
  width: 30%;
  text-align: left;
  padding-left: 30px;
  /*border-left: solid 1px #666;*/
  vertical-align: top;
}

.contact-form input, .wpcf7-textarea{
  background-color: #333;
  border: solid 1px #444;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  display: inline-block;
  margin: 10px 20px;
  font-family: inherit;
  color: #eee;
  width: 100%;
}

.contact-form .wpcf7-textarea{
    height: 150px;
    min-width: 100%;
    min-height: 100px;
    max-width: 100%;
}

.contact-form .button{
  width: 100%;
  padding: 10px;
  margin: 10px 20px;
  border-radius: 5px;
  background-color: #ff523c;
  border: none;
  color: #fff;
  font-size: 15px;
  transition: background-color 0.2s;
}

.contact-form .button:hover{
  background-color: #ff8d3c;
}

.contact-form .button:active{
  background-color: #ab5f28;
}

#contact-form-button {
  width: 100%;
  padding: 10px;
  margin: 10px 20px;
  border-radius: 5px;
  background-color: #ff523c;
  border: none;
  color: #fff;
  font-size: 15px;
  transition: background-color 0.2s;
}

#contact-form-button:hover{
  background-color: #ff8d3c;
}

#contact-form-button:active{
  background-color: #ab5f28;
}

#contact-message{

}

/*footer*/

.social-media{
  margin: 18px auto;
  text-align: center;
}

.social-media img{
  width: 35px;
  display: inline-block;
}

.logged-in .navbar-fixed-top {
top: 32px;
}