/*start our framwork*/
body{
font-family: 'Open Sans', sans-serif;
    height: 3000px;
}
.navbar{
    margin-left: 166px;
}
span.arrow {
  margin-left: 166px;
}
.container{
    width: 1200px;
    margin: auto;
    height: 100%;
    display: table;
}
.table{
        height: 100%;
        display: table;
}
.table-row{
     display: table-row;
}
.text-center {
    text-align: center;
}
.upper{
    text-transform: uppercase;
}
.main-color{
    color: #f7600e
}
.main-background{
    background:  color: #f7600e
}
.overley{
  background: rgba(49, 55, 61 ,.9);
    width:100%;
    height: 100%; 
}
::-webkit-input-placeholder{
   font-size:14px;
}
:-moz-input-placeholder{
   font-size:14px;
}
:-ms-input-placeholder{
   font-size:14px;
}
.hidden{
display: none;
}
/*end  our framwork*/
/*start header*/
.header{
    background: url(../imgs/art.jpg);
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    color:#fff;
}

    
.header  .navbar { 
   overflow: hidden;
    padding: 20px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%
 }
.header .navbar .links{
  float: right;
}
.header .navbar .links i {
    margin-left: 5px;
}
.header .intro h1 {
 margin: 0;
    font-size: 50px;
    font-weight: 800px;
}
.header .intro p{
 margin: 5px 0 40px;
    line-height: 1.9;
    font-size: 20px;
    color: #E2E2E2;
}
.header .buttons button{
    background: transparent;
    padding: 10px 0;
    width:180px;
    font-size:14px;
    border:1px solid #090909;
    margin:0 8px;
    border-radius: 10px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.header .buttons button:hover {
     background-color: #f7600e;
    border:1px solid #f7600e;
    color: #fff;
}
.header .arrow{
position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    text-align: center;
    padding: 40px 0;
}
.header .arrow i{
border: 2px solid #7B7B7B;
    border-radius: 50%;
    height: 33px;
    width: 33px;
    line-height: 33px;
    cursor: pointer;
}
/*end header */
/* Start Features */
.Features{
padding: 80px 0;
    overflow: hidden;
    
}
.box{
     width: 22%;
    float: left;
    margin-right:4%;
    margin-top:54px;
}
.box:last-child{
    margin-right: 0;
}
.box i {
        color: #f7600e;
    border: 1px solid #CCC;
    width: 100px;
    height: 100px;
    border-radius:50%;
    line-height: 100px;
    
}
.box h3{
text-transform: uppercase;
    font-weight: normal;
    color: #505050;
}
.box p{
line-height: 2;
    color#888;
}
/* End Features */
/*start subscrip*/
.subscribe{
 background: url('../imgs/subscribe.jpg');
     -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
   
    
}
.subscribe form{
  padding: 100px 0;
    width:500px;
    margin:auto;
    text-align: center;
}
.subscribe form input[type="email"]{
    padding: 5px;
    width:265px;
    font-size:20px;
    border-radius:10px;
    position:relative;
    top:2px;
    border: none;
    height: 37px;
    line-height: 37px;
}
.subscribe form button{
   padding:10px;
    width:200px;
    border:1px s;
    background-color:#F7600e;
    border:none;
    color:#fff;
    margin-left:20px;
        font-size:14px;
    border-radius: 10px;
    
}

/*end subscribe */

/* Start our work */
.our-work{
  padding: 20px;
}
.our-work h2{
  font-weight:500px;
    font-size:35px;
    margin-bottom:0px;
}
.our-work h2 ~ p{
       line-height: 2;
    margin: 10px 0 40px;
}
.our-work .show-more{
 background: transparent;
    border:1px solid #CCC;
    width:180px; 
    padding: 10px;
    border-radius: 10px;
    margin-top:20px;
    color:#555;
        -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.our-work .show-more:hover{
    background-color: #f7600e;
    border:1px solid #f7600e;
    color: #fff;
}
.our-work .items-box{
  overflow: hidden;
}
.our-work .items-box .item{
float: left;
    width: 30%;
    overflow: hidden;
    float: left;
    width: 36%;
    overflow: hidden;
    position: relative;
    left: 192px;
    border-radius: 88px;
    height: 369px;
}
.our-work .items-box .item:hover .over{
  display: block;
}
.our-work .items-box .item .over{
 position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    background-color: rgba(247, 96, 14, .8);
    color:#FFF;
               -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    display: none;
}
.our-work .item .over h4{
   font-size: 24px;
    margin-top: 50px;
    margin-bottom: 0px;
}
.our-work .item .over p{
 margin-top: 10px;
    margin-bottom: 40px;
    line-height: 2;
}
.our-work .item .over button{
  background-color: transparent;
    border: 1px solid #FFF;
    width:180px;
    padding: 10px;
    border-radius: 10px;
           -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.our-work .item .over button:hover{
 background-color: #FFF;
    border:1px solid #FFF;
    color: #f7600e;
}
/* End our work */

/*Start our team */

.our-team {

     background: url('../imgs/subscribe.jpg');
     -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.our-team h2{

    font-aize:25px;
    margin-bottom: 0;
    
}
.our-team main{

    margin: 10px 0 40px;
    line-height: 2;
    color: #888;
    font-size: 20px;
}
.our-team .the-team{

    overflow: hidden;
    
}
.our-team .the-team .person{

    float: left;
    width: 24%;
    margin-left: 1%;
    color: #888;
    
}
.our-team .the-team .person img{

     width: 113;
    height: 170px;
    filter: gray;
    filter: grayscale(1);
    -webkit-filter:grayscale(1);
}
.our-team .the-team .person p{
 font-size: 15px;
}
.our-team .the-team .social-icons i{

    background-color:#9da1a5;
    widrh:30px;
    height: 30px;
    line-height: 30px;
    color:#FFF;
    border-radius: 50%;
}
.our-team .the-team .person:hover{

    filter: none;
    -webkit-filter:grayscale(0);
    color: #555;
}
.our-team .the-team .person:hover .fa-facebook{

    background-color: #3b5998
}
.our-team .the-team .person:hover .fa-twitter{

    background-color: #55acee;
}
.our-team .the-team .person:hover .fa-google-plus{

    background-color: #dc4e41
}
/* End our team */
/* Start contact */
.contact{}
.contact .overlay{

    padding: 50px 0;
    color: #FFF;
}
.contact h2{

    font-size: 35px;
}
.contact form{

    width: 700px;
    text-align: center;
    margin: 50px auto;
    overflow: hidden;
    
}
.contact form input[type="text"],
.contact form input[type="email"]{

    width: 46%;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    border:1px solid #CCC;
    
}
.contact form input[type="email"]{

    float: right;
}
.contact form input[type="text"]{

    float: left;
}
.contact form textarea{

    margin-top: 20px;
    width: 100%;
           padding:10px;
    height: 140px;
    border-radius: 10px;
    border:1px solid #CCC;
        
}
.contact form .info{

    overflow: hidden;
    margin-top:10px; 
    
}
.contact form .info button{

    float: left;
       padding:10px;
    width:200px;
    border:1px s;
    background-color:#F7600e;
    border:none;
    color:#fff;
        font-size:14px;
    border-radius: 10px;
}
.contact form .info .form-icon{

    float: right;
    
}
.contact form .info .form-icon i{

     background-color:#9da1a5;
    widrh:30px;
    height: 30px;
    line-height: 30px;
    color:#FFF;
    border-radius: 50%;
}
.contact form .info .form-icon .fa-facebook{

    background-color: #3b5998
}
.contact form .info .form-icon .fa-twitter{

    background-color: #55acee;
}
.contact form .info .form-icon .fa-google-plus{

    background-color: #dc4e41
}
/* End contact */
/* Start footer */
.footer{

    background-color: #3b434c;
    color: #FFF;
    overflow: hidden;
    padding: 30px 0;
}
.footer .copyright{

    float: left;
}
.footer .desgin{

    float: right;
}
/* End footer*/