body{overflow-x: hidden}

/*bases*/

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,.form-control:hover,.CONTACT-US .form-control:focus,.form-control,.CONTACT-US .form-control
{
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}



/*Start nav bar*/
.navbar{height:96px;background-color:#fff}
.navbar .navbar-brand{color:#171717;line-height:30px;font-size:30px}
.navbar .navbar-brand span {font-size:60px;font-weight: bold}
.nav>li{margin-left: 30px}
.nav>li{margin-left:5px }
.navbar .navbar-nav > li > a
{color:#171717;padding-top:42px;font-size:16px;
    font-family:"Montserrat", Helvetica, sans-serif;
    letter-spacing:2px;text-transform: uppercase}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand
{top: 19px;position: relative;}

.nav>li>a:focus, .nav>li>a:hover,.navbar .open > a:hover,.navbar .open > a:focus
{background: none}
.dropdown-menu > li > a
{
color:#171717;padding:6px 20px;
-webkit-transition:padding .5s ease;
-moz-transition:padding .5s ease;
-o-transition:padding .5s ease;
transition:padding .5s ease;
}

.navbar-toggle > .active {border-top: none}
.navbar-toggle a{color: #fff;padding-top:25px }
.navbar-toggle >li{margin-left: 30px}

/*End navbar*/

/*Start carousel*/
 .share-icon
{
display: inline-block;
float: left;margin: 4px;
width: 32px;height: 32px;
cursor: pointer;
vertical-align: middle;
background-image: url(share-icons.png);
}
.any
{
    position: absolute; display: block;
    top:16%; right: 16px; width: 280px;
    height: 40px; z-index: 10;
}
.share-facebook {background-position: 0px 0px}
.share-facebook:hover {background-position: 0px -40px}
.share-twitter{background-position: -40px 0px}
.share-twitter:hover{background-position: -40px -40px}
.share-pinterest {background-position: -80px 0px}
.share-pinterest:hover {background-position: -80px -40px}
.share-linkedin {background-position: -240px 0px}
.share-linkedin:hover {background-position: -240px -40px;}
.share-googleplus {background-position: -120px 0px}
.share-googleplus:hover {background-position: -120px -40px}
.share-stumbleupon {background-position: -360px 0px}
.share-stumbleupon:hover{background-position: -360px -40px}
.share-email {background-position: -320px 0px}
.share-email:hover {background-position: -320px -40px}
.op{
    position: absolute;
    width: 100%;
    min-height: 800px;
}
.carousel{height:650px;overflow: hidden}
.carousel-caption 
{bottom:34%}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img
{
    width:100%
}
.carousel-caption h2
{font-weight:bold;font-family:'Droid Serif',serif;font-size: 50px} 

.carousel-caption p{margin-bottom: 43px}
.carousel-caption hr {width: 20%}
.carousel-indicators {bottom: 11%;left: 52%}
.carousel-indicators li:hover,.carousel-indicators li:focus,
.carousel-indicators .active{border: 2px solid #fff;background-color:none}

.carousel-caption button
{
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    border-radius: 3px;
    background-color:#171717;
  width:170px;height: 40px;margin-left:32px;border:2px solid #171717   }

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next
{
  border: 3px solid #2b2a28;
    -webkit-border-radius:3PX;
    -moz-border-radius:3PX;
    -o-border-radius:3PX;
    border-radius:3PX;
    width: 42px;height:42px;
    padding:4px; 
    background-color: #2b2a28;
    font-size: 25px;
    top:68%
}

/*Ends carousel*/

/*Start toll Box*/
.option_box{position:fixed;top:100px;left:0;z-index:9999;opacity:0.8 }
.option_box .color-option
{
    float:left;background:#888;color:#FFF
    ;border-radius: 3px 30px 3px 30px; 
    padding:10px;width:139px;display:none
}

.option_box .color-option ul li 
{width:20px;height:20px;border-radius:50%;background-color:#E41B17;  
margin-right:5px;padding-top:5px; display:inline-block;cursor:pointer
}
.option_box .gear-cheak
{
    padding:14px;background:#888;border-radius:50%;font-weight:bold;
    font-size:30px;cursor:pointer;color: #fff
}
/*End toll Box*/  
/*Start Section Services*/
.Services{height:560px;overflow: hidden}
.SERVICES h2,.About_Us h2,.header-section h2,.Our-Skills h2,.Our-Works h2,.Our-Price h2,
.TESTIMONIALS h2, .LATEST-NEWS h2, .CONTACT-US h2
{font-weight:bold;margin-top:100px}
.SERVICES hr,.About_Us hr,.header-section  hr,.Our-Skills hr,.Our-Works hr,.Our-Price hr,
.TESTIMONIALS hr,.LATEST-NEWS hr
{width:10%;border-color:#171717;margin-top:20px;margin-bottom: 26px}
.SERVICES .services .ser .span
{
  background-color: #f0efef;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50px;
 text-align: center;
  margin-top: 42px;
  margin-bottom: 42px;
  border-radius:50%;
border: 6px solid #efefef;

}
.SERVICES .services  .span:hover
{cursor:pointer;
border: 6px solid #efefef;
color: #fff
}
.SERVICES .services .ser .span .fa{margin-top:30px;font-size:36px }
.SERVICES .services .ser h4{font-weight: bold;margin-bottom: 23px }
.SERVICES .services .ser p{font-size:16px;color:#888  }
.SERVICES .services strong{color:#171717;cursor: pointer}
.SERVICES p ,.Our-Works p , .header-section p
,.Our-Price p,.Our-Skills p,.LATEST-NEWS p,.CONTACT-US p
{font-size: 16px;color:#171717;line-height:25px;padding-right:20px;padding-left: 20px   }
/*End Section Services*/


/*Start Section About-Us*/
.About_Us{
background:url("../img/about-us.jpg") no-repeat center center fixed ;min-height:300px;
-webKit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover; 
overflow: hidden;
    margin-top: 120px
}
.About_Us .about{height:355px;
  width: 100%;
  margin-top: 4%;
  border-radius: 22px;
  background: rgba(51, 51, 51, 0.74);
}
.About_Us p{color:#888;line-height:25px;padding-right:20px;padding-left: 20px;padding-top:8%}
.About_Us  h2{margin-top: 70px}
.About_Us .img {position: relative}
.About_Us .img img{width: 100%;height: 100%;}
/*End Section About-Us*/


/**** Start team-list ****/
.team-list
{
  width: 100%;
  margin: 0;
  padding: 60px 0;
  position: relative;
  list-style: none
}
  .team-list:before
{
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
    background: #c9c9c9;
    border-radius: 3px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1)
  }
.team-list .team-member {
    padding-left: 40px;
    position: relative; }
.team-list .team-member:after {
      content: "";
      display: table;
      clear: both; }
.team-list .team-member:before {
      content: "";
      display: block;
      width: 25px;
      height: 25px;
      border: 5px solid #fff;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 0 0px #7E7E7E;
      position: absolute;
      top: 50%;
      margin-top: -12.5px;
      left: -12.5px;
      border-radius: 50%; }
.team-list .team-member .team-member-img {
      width: 150px;
      height: 150px;
      background: #dedede;
      border: 15px solid #efefef;
      border-radius: 50%;
      float: left;
      position: relative; }
.team-list .team-member .team-member-img:after
{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right-color: #efefef;
        top: 50%;
        left: -33px;
        margin-top: -10px;
        box-shadow: inset 0 0 0 0 #7E7E7E
}
.team-list .team-member .team-member-img img
{
        width: 100%;
        height: 100%;
        border-radius: 50%
}
.team-list .team-member3 .team-member-img img
{border-radius:0% !important}
.team-list .team-member .caption {padding: 0 0 0 170px}
.team-list .team-member h3
{
      font-family: "Montserrat", Helvetica, sans-serif;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 16px;
      color: #4e4e4e;
      padding-top: 10px;
      margin: 0;
}
.header-section p{padding-bottom: 4% }
.team-list .team-member p
{
      margin: 10px 0 0;
      line-height: 22px;
      max-width: 300px;
}
.team-list .team-member:hover:before
{box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 0 20px #7E7E7E; }

.team-list li
{
    padding-left: 50%;
    margin-bottom: 25px;
    display: block
}
.team-list li:nth-child(even)
{
      padding-left: 0;
      padding-right: 50%;
      text-align: right
}
.team-list li:nth-child(even) .team-member
{padding-left: 0;padding-right: 40px}
.team-list li:nth-child(even) .team-member:before
{left: auto;right: -12.5px}
.team-list li:nth-child(even) .team-member .team-member-img
{float: right}
.team-list li:nth-child(even) .team-member .team-member-img:after
{
    border-right-color: transparent !important;
    border-left-color: #efefef;
    left: auto;right: -34px
}

.team-list li:nth-child(even) .caption {padding: 0 170px 0 0}
.team-list li:nth-child(even) .caption p {margin: 10px 0 0 auto}
  @media (max-width: 990px)
  {
.team-list:before {display: none}
.team-list .team-member:before{display: none}
.team-list .team-member .team-member-img:after{display: none}
.team-list li {padding: 0 !important;}
  }
/**** end team-list ****/

/*Start SKills*/
#skills .fields , .About_Us .fields,.TESTIMONIALS .fields,.CONTACT-US .fields

{background:rgba(8,8,8,0.8);color:#DDD;min-height:300px;
padding-bottom:40px;padding-top:40px}
.Our-Skills
{
    background:url("../img/portfolio-banner.jpg") no-repeat center center fixed ;min-height:300px;
-webKit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover; 

}

.Our-Skills p{margin-bottom:4%;color: #888}

/* skill */
.skill{margin-bottom: 80px}
  .skill .chart
{
    width: 170px;height: 170px;
    position: relative;
    margin: 0 auto 20px
}
    .skill .chart span
{
      display: block;
      width: 60px;height: 60px;
      line-height: 60px;position: absolute;
      background: #4e4e4e;color: #fff;
      text-align: center;top: 50%;
      margin-top: -30px;left: 50%;
      margin-left: -30px;font-size: 16px;
      font-weight: bold;border-radius: 50%
}
.Our-Skills h3{padding-top: 8%;letter-spacing: 2px }

/*End SKills*/


/*Start our-Work*/
.Our-Works {overflow: hidden}
.Our-Works img{width: 100%}
.Our-Works p{font-size:16px;color: #171717;padding-bottom: 5%}
.Our-Works .img{position:relative;margin-top:14px }
.Our-Works .img .opacity
{background:rgba(8,8,8,0.8);height:100%;position:absolute;width:100%;opacity: 0}


.Our-Works .img:hover .opacity
{cursor: pointer;opacity: 1}

.Our-Works  .opacity span
{
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font-size: 23px;
  display: inline-block;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #fff;
margin-right: 10px;

}
.Our-Works  .opacity span:hover

{cursor:pointer;box-shadow:  inset 0 0 0 47px #fff}
.Our-Works  .icon{position: relative;top: 40%}
/*End our-Work*/

/*Start our-price*/
.Our-Price .row {padding-top:8% }
.Our-Price .price_box{margin-bottom:10% }
.Our-Price .price_box h2{margin-top:0;font-weight: normal;letter-spacing: 2px}
.Our-Price .price_box strong{font-size:36px;font-style: italic}
.Our-Price .price_box ul .date
{
color: rgb(78, 78, 78);
padding: 20px;
font-size: 16px;
line-height: 1
}
.Our-Price .price_box ul
{border: 1px solid rgb(239, 239, 239)}
.Our-Price .price_box ul  li
{
        padding: 15px;font-size: 16px;
    border-bottom: 1px solid rgb(239, 239, 239);
}
.Our-Price  .gol{position: relative;top: -40px}
.Our-Price  .gol ul  li{padding-top:7%}
.Our-Price  .gol ul .date{color: #fff }
.Our-Price .price_box button,.LATEST-NEWS .latest button,.CONTACT-US button

{
    padding: 15px;background-color: #fff;
    border-radius:5px;width: 60%;
    font-size: 20px;
    letter-spacing: 3px
}
.Our-Price .price_box button:hover,.LATEST-NEWS .latest button:hover,
.CONTACT-US button:hover
{color: #fff}
/*End our-price*/


/*Start TESTIMONIALS*/

.TESTIMONIALS 
{background:url("../img/web-hd.png") no-repeat center center fixed;
-webKit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover}
.TESTIMONIALS .tisti{padding-top:10%;padding-bottom:20%  }
.TESTIMONIALS .testimonials .img 
{text-align:left}
.TESTIMONIALS .testimonials .img img
{
    width: 100px;height: 100px;
    overflow: hidden;
    border-radius: 50%;
    
}
.TESTIMONIALS  .img-2
{
    width: 100px;height: 100px;
    overflow: hidden;border-radius: 50%;
    border: 3px solid #efefef;position: absolute
}
.TESTIMONIALS .testimonials .img:hover > .img-2
{box-shadow:inset 0 0 0 50px rgba(255, 253, 249, 0.6)}


.TESTIMONIALS .testimonials .img p
{
  background-color: rgb(239, 239, 239);
  padding: 10px;
  top: 20px;
  border-radius: 22px;
}
.TESTIMONIALS .testimonials .img p .name 
{margin: 10px;font-size: 20px;  font-family: cursive;letter-spacing: 2px

}
.TESTIMONIALS  .glyphicon {font-size: 25px}
.TESTIMONIALS .comment p{line-height: 1.6;  font-style: italic;margin: 10px;font-size:18px;color: #888 }
.TESTIMONIALS .comment .fa{margin-right: 10px}
.TESTIMONIALS  .comment
{
  margin-top: 50px;text-align:left;
  border-radius: 22px;
  overflow: hidden
}
/*end TESTIMONIALS*/

/*Start LATEST-NEWS*/
.LATEST-NEWS img{width:100%;height: 150px}
.LATEST-NEWS .latest {margin-top:6%;margin-bottom: 4%}
.LATEST-NEWS .latest .img .row
{
    height: 40px;text-align: center;background-color:rgba(192, 192, 192, 0.31);
    margin-left: 0px;width: 100%;
    padding-top: 10px
}
.LATEST-NEWS .latest .img .right{float: right;margin-right: 15px}
.LATEST-NEWS .latest h3,.LATEST-NEWS .latest .img .fa{margin-right:5px  }
.LATEST-NEWS .latest button
{height:48px;width: 125px;margin-top: 20px;padding: 0px;font-size: 16px}
.LATEST-NEWS .img-2{width: 100%;height: 150px;overflow: hidden;position: absolute}
 .LATEST-NEWS .img:hover >.img-2{box-shadow:inset 0 0 0 90px rgba(255, 253, 249, 0.6)}
/*end LATEST-NEWS*/

/*Start CONTACT*/
.CONTACT-US
{
    background:url("../img/contact-banner.jpg") no-repeat center center fixed  ;
-webKit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover; 
    
}
.contact{margin-top: 6%;margin-bottom: 10%}
.CONTACT-US  .form-control 
{
    border: none ; border-bottom: 1px solid rgb(128, 128, 128)
    ;border-radius: 2px;box-shadow: none;
    margin-top:20px
}

.CONTACT-US .form-group .name,.CONTACT-US .form-group .email
{height: 50px}
.CONTACT-US .map {height: 388px;margin-top: 4%}
.CONTACT-US button{width: 100%;font-size: 30px;font-weight: bold}
.CONTACT-US  .form-control ,.CONTACT-US button
{

    background: rgba(51, 51, 51, 0.74)
}
/*End CONTACT*/

/*Start Footer*/
.footer{background:rgba(23, 23, 23, 0.88);color:#808080;padding-top:50px}
.footer h3 {letter-spacing:1px;margin:30px 0 20px}
.footer .Three-colums {overflow: hidden}
.footer .Three-colums li{padding:6px 0}
.footer li a{color:#808080 }
.footer li a:hover{text-decoration: none;cursor: pointer}
.footer .fa{margin-right: 8px}
.footer .Social{margin:20px 0 10px;overflow:hidden}
.footer .Social li{float:left;margin-right:10px }
.footer .Social li  .fa{font-size:20px;opacity:.4 }
.footer .Social li .fa:hover
{cursor: pointer;opacity: 1}
.footer hr{border-color:#444}
.footer .tag{margin-top: 10%}
.footer .tag a
{
    margin: 0px 5px 10px 0px;
  padding: 5px 10px;
  text-transform: lowercase;
  display: inline-block;
  background-color: #fff;
  font-size: 16px;
    background: none repeat scroll 0% 0% rgb(128, 128, 128);
color: rgb(51, 51, 51);
}
.copy-right a{text-decoration: none;color: none}
.footer .tag a:hover{text-decoration: none;color: #fff}
 .copy-right{background:#171717;color:#6A6E71;padding:20px 0;
     font-size:18px;margin-top:30px}
/*End Footer*/


/*Bootstrqp*/
article, aside, details, figcaption, figure, footer, header,
hgroup, main, menu, section, summary
{overflow: hidden}
#Scroll-top
{
    width:60px;height:50px;background:rgba(255, 253, 249, 0.7)
    ;border-radius:10px;display:none;
    position: fixed;z-index:9999;bottom:10px;right:15px;text-align:center;
}
#Scroll-top:hover{cursor:pointer;color:#fff;border: 4px solid #fff }
/*loading page*/
.loading
{
    background:#00bcc3;
    position: fixed;left: 0;top: 0;
    width: 100%;height:100%;
    z-index: 9999
        
}


@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*mobile Screen*/

@media (max-width:400px)
{    .navbar{height:56px}
     .any{top: 37%}
    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev,
    .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next
    {display: none}
}

@media (max-width:767px)
{
    .carousel{height: 100%}
    .navbar{height:72px}
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand
    {top: 0}
    .navbar .navbar-nav > li > a {padding-top:10px;padding-bottom:10px}
    .navbar-nav{background-color:rgba(255, 255, 255, 0.75);float: right;width: 50% }
    .any{top:40%}
   .About_Us .about {height: 100%}
}

/*Small Screen*/
@media (min-width:768px) and (max-width:991px)
{
    .carousel{height: 100%}
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand
    {top: 0}
    .navbar .navbar-nav > li > a{font-size: 13px;letter-spacing: 0;padding-top:10px }
    .any{top:40%}
.About_Us .about  {height: 100%}
}

/*big Screen*/
@media (min-width:992px)and (max-width:1200px)
{.carousel-caption{bottom:28%}}
@media  (min-width:1700px)
{.carousel-caption{bottom:68%}}