html, body{
  height: 100%;
}

body{

	margin: 0px auto;
	background-color: #ddd;
	height: auto;
}
.section-title{
  margin-top: 4em;
  text-transform: uppercase;
  margin-bottom: 4em;
}
.section-title span{
  color: #333;
}
.section-title h2{
  color: #555;
  font-size: 4em;
  margin-bottom: -1%;
}
.section-title h3{
  color: #555;
  letter-spacing: 3px;

}
/*---------------------------------------------- header------------------------------------------*/
header{
  padding: 1.5% 0;
position: relative;

}

.overlay:after{
	background: rgba(1,1,1,.5) 50% 0 ;
  content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
  width: 100%;
	height: 100%;
}
#header-title{
  color: #fff;
  text-align: center;
padding-top: 13em;
}
#header-title h1{
  letter-spacing: 0px;
  font-size: 60px;
  text-transform: uppercase;
  font-weight: 400;
  
}
#header-title h2{
  letter-spacing: 5px;
  font-size: 20px;
  text-transform: uppercase;

}
/*---------------------------------------------- end header------------------------------------------*/

/*---------------------------------------------- intro-----------------------------------------------*/
#intro{
  background: #F9690E;
  background-position: fixed;
  color: #000;
  position: relative;
  margin-top: 13%;
  padding-top: 10px;
  padding-bottom: 15px;
  
}
#intro a button{
  height: 60px;
  font-size: 1.5em;
  margin-top: 15%;
   text-transform: uppercase;
  
}
#intro a{
  text-decoration: none;
}
#intro h2{
  color: #000;
}
/*---------------=======================----end intro----------====================-----------------*/


/*-------------------------------------------NavBar-------------------------------------------------*/
.navbar-inverse {
  
   background: #22313F;
  /*box-shadow:0px 0px 30px #000;*/
  font-size: 18px;
  font-family: 'verdana', sans-serif;
  width: 100%;
  border: 0px;
  border-radius: 0px;
}


.navbar-inverse .navbar-brand {
  color: #F22613;
  line-height: 20px;
  font-weight: 700;

}
.navbar-inverse .navbar-brand span{
  color: #fff;
}

.nav>li>a {
display: block;

text-align: center;
text-transform: uppercase;
}
.navbar-inverse>a:hover{
  color: #000;
}
.navbar:before{
  left: 0;
top: 100%;
content: '';
width: 100%;
height: 26px;
z-index: 6998;
position: absolute;
background: url(images/shadow1.png) no-repeat center top;
}

.btn-social{
  padding: 10px;
  background:rgba(0,0,0,0.5);
  border: 1px solid #555;
  border-radius: 0px;
  font-size: 20px;
  border-bottom: 0px;
  border-top: 0px;
}
.btn-social:hover{
  background:rgba(0,0,0,1);
}

/*-------------------------------------------end NavBar-------------------------------------------------*/

/*-------------------------------------------services-------------------------------------------------*/
#services{
  background-color: #fff;
  padding-bottom: 10%;
  border-bottom: 2px solid #333;
}

.boxy{  
  background-color: #fff;
  margin-right: 20px;
  min-width: 30%;
}

.box-cont{
  font-size: 18px;
}

.boxy .fa{
  margin: 0px auto;
  margin-top: 5%;
  color: #000;
}


/*-------------------------flexslide---------------------------*/
.flex-control-paging{
  display: none;
}
/*-------------------------end flexslide---------------------------*/
/*.slider:before{
  left: 10px;
top: 84.7%;
content: '';
width: 98%;
height: 50px;
z-index: 6998;
position: absolute;
background: url(images/shadow4.png) no-repeat center top;
}
*/
/*-------------------------slice---------------------------*/
#slice{
  background: url(../images/pic6.jpg)top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height:100%;
padding-top: 5%;
padding-bottom: 3%;
}
#blockquote p{
  font-size: 40px;
  color: #fff;
  line-height: 40px;
  font-weight: 200;
  padding-left: 10%;
}
#blockquote footer{
  font-size: 20px;
  color: #fff;
}
/*-------------------------ebd slice---------------------------*/

/*-------------------------about---------------------------*/
#about{
  background-color: #fff;
  padding-bottom: 5%;
  border-bottom: 10px solid #333;
  border-top: 2px solid #333;
}
#about img{
  width: 75%;
}
#team{
  margin-top: 7%;
}
#team h2{
    color: #555;
  font-size: 3em;
 
}
#team h4{
   letter-spacing: 3px; 
}
.monalisa{
  margin-top: 3em;
  border-right: 1px solid #999;
  padding: 10px;
  cursor: pointer;
}
.monalisa img{
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  -webkit-transform: perspective(600);
  transform: perspective(600);
  transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */
}
.monalisa img:hover{
  transform:rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Opera, Chrome, and Safari */

}
.monalisa-last{
  margin-top: 3em;
  padding: 10px;
  cursor: pointer;
}
.monalisa-last img{
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  -webkit-transform: perspective(600);
  transform: perspective(600);
  transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */
}
.monalisa-last img:hover{
  transform:rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Opera, Chrome, and Safari */

}

/*-------------------------end about---------------------------*/
/*-------------------------testimonials---------------------------*/
#testimonials{
  background: #111;
  border-bottom: 10px solid #333;
}
.testimonials-slide{
  border: 0px;
  background: #111;
  color: #999;
  box-shadow: none;
}
#testimonials p{
  font-size: 1.5em;
}

.fa-star{
  color: #F39C12;

}

/*-------------------------end testimonials---------------------------*/

/*-------------------------works---------------------------*/

#works{
  background-color: #fff;
  padding-bottom: 10%;
  overflow: hidden;
  position:relative;
  border-bottom: 10px solid #333;
}

#works img{
  margin-top: 0em;
  cursor: pointer;
   position:relative;
overflow: hidden;
}
.img-effect{
  top: 0;
  margin: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: rgba(0,0,0,0.8);
  position: absolute;
  color: #fff;
  font-size: 70px;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  cursor: pointer;
}
.img-effect p{
   margin-top: 20%;
}
.img-effect:hover{
  opacity: 1;
}

figure{
  border: 1px solid #2c3f52;
  background:#000;
  margin-top: 2em;
  position:relative;
}
figure a{
  width: 100%;
}
figcaption{
  margin-top: 0%;
  padding: 10px;
  background:#fff;
  color: #000;
  overflow: hidden;
  position:relative
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
figcaption:hover{
  background:#2c3f52;
  color: #ddd;
}
.img-hover{
  position: absolute;
  width: 100%;
  text-align: center;
  height: 100%;
}

/*-------------------------end works---------------------------*/

/*-------------------------clients---------------------------*/
#clients{
  background-color: #111;
  padding-bottom: 10%;
  overflow: hidden;
  position:relative;
  border-bottom: 10px solid #333;
}
#clients .col-md-2{
  border: 5px solid #333;
  background: #fff;
}

#clients .col-md-2:hover{
  background: #333;
}



/*-------------------------end clients---------------------------*/


/*-------------------------modal-1---------------------------*/

.videoWrapper {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0;
}
.modal-title{
  margin-bottom: 4%;
}
#modal-1{
  padding-right: 2%;
}
.modal-title{
  padding: 0px;
}
.modal-body{
  padding-top: 0px;
}
/*-------------------------end modal-1---------------------------*/

/*-------------------------contact--------------------------------------------------*/
#contact{
  background-color: #fff;
  padding-bottom: 3%;
  border-top: 2px solid #333;
}
 
   .interacted:invalid {
    border: 2px solid red;

}
.interacted:valid {
    border: 2px solid green;
  
}
fieldset{
  border: 7px solid #333;
  border-radius: 20px;
  padding: 4%;
}

#tryitForm label{
  font-size: 1.5em;
}

sup{
  color: red;
}
.media{
    border: 7px solid #333;
    border-radius: 20px;
  font-size: 17px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
line-height: 40px;
margin-top: -0.5%;
}
.media h5{
  border-bottom: 1px dashed #333;
  font-size: 25px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 1em;
}
.media p span{
  margin-right: 1em;
}
/*-------------social footer-------------------*/

.social-log{
  display: block;
    margin-top: 7em;
  color: #252527;
}

.social-log .para-email .fa-facebook {
  width: 50px;
  height: 50px;
  color: #000;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 0%;
  -webkit-border-radius: 0%;
  font-size: 30px !important;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  margin-right: 0.5em;
}
.para-email .fa-facebook:hover{
  background-color: #233678;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #fff;
  border: 0px;
}

.social-log .para-email .fa-twitter {
  width: 50px;
  height: 50px;
  color: #000;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 0%;
  -webkit-border-radius: 0%;
  font-size: 30px !important;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  margin-right: 0.5em;
}
.para-email .fa-twitter:hover{
  background-color: #54AEE1;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #fff;
  border: 0px;
}

.social-log .para-email .fa-google-plus {
  width: 50px;
  height: 50px;
  color: #000;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 0%;
  -webkit-border-radius: 0%;
  font-size: 30px !important;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  margin-right: 0.5em;
}
.para-email .fa-google-plus:hover{
  background-color: #e10707;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #fff;
  border: 0px;
}

.social-log .para-email .fa-linkedin {
  width: 50px;
  height: 50px;
  color: #000;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 0%;
  -webkit-border-radius: 0%;
  font-size: 30px !important;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
.para-email .fa-linkedin:hover{
  background-color: #54AEE1;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #fff;
  border: 0px;
}
.map{
  margin-bottom: 2.5em;
-webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
.map:hover{
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
  filter: grayscale(0);

}
/*-------------end social footer-------------------*/
/*-------------------------end contact----------------------------------------------------*/
#layerG{
  background-color: #fff;
}

.social-media-modal-bootstrap{
  margin-top: -15%;
  margin-left: 25%;
}

/*-------------------------end lg view----------------------------------------------------*/



@media (max-width: 992px) { 

header{
  padding: 5% 0;
position: relative;

}  

#header-title{
  color: #fff;
  text-align: center;
padding-top: 5em;

}  

.media{
  margin-top: 2em;
}

.monalisa{
  border-right: 0px;
  border-bottom: 1px solid #999;
}
fieldset{
  border: 0px;
}
#tryitForm{
  border: 7px solid #333;
  border-radius: 20px;
  padding: 0%;
}




 }

 @media (max-width: 480px) {
  header{
  padding: 10% 0;
position: relative;

}

  #header-title h1{
  letter-spacing: 0px;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 400;
  
}

  .dark-small{
  margin-top: 4em;
  text-transform: uppercase;
  margin-bottom: 4em;
}
.dark-small span{
  color: #333;
}
.dark-small h2{
  color: #555;
  font-size: 2em;
  margin-bottom: -1%;
}
.dark-small h3{
  color: #555;
  letter-spacing: 3px;

}
.social-log .para-email .fa-facebook {
  width: 30px;
  height: 30px;
  color: #000;
  line-height: 30px;
  font-size: 20px !important;
  margin-right: 0.5em;
}
.social-log .para-email .fa-twitter {
  width: 30px;
  height: 30px;
  color: #000;
  line-height: 30px;
  font-size: 20px !important;
  margin-right: 0.5em;
}
.social-log .para-email .fa-google-plus {
  width: 30px;
  height: 30px;
  color: #000;
  line-height: 30px;
  font-size: 20px !important;
  margin-right: 0.5em;
}
.social-log .para-email .fa-linkedin {
  width: 30px;
  height: 30px;
  color: #000;
  line-height: 30px;
  font-size: 20px !important;
  margin-right: 0.5em;
}

  
}