Template:SCUT China/css

  • {

margin:0; padding:0; } .section{ padding:100px 0px; } html,body { height: 100%; margin: 0; } body{ font-family: 'Roboto', sans-serif; font-weight: 400; font-size:14px; color:#333; background:#F6F6F6; margin:0; padding:0; }

a,button{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; outline:none; } h1,h2,h3,h4,h5,h6{ margin:0; } p{ padding:0; margin:0; } ul, li{ list-style:none; padding:0; margin:0;

} a,button{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; outline:none; box-shadow:none; text-decoration:none; } a:hover{ text-decoration:none; } .button .btn{ font-weight:500; font-size:15px; height:45px; color:#888888; display:inline-block; line-height:45px; padding:0 45px 0 45px; } .btn { border:none; border-radius:0px; } .section-title{ text-align: center;

   margin-bottom: 40px;
   padding: 0 190px;

} .section-title h2{ font-size:32px; font-weight: 500; text-transform:uppercase; padding-bottom:10px; margin-bottom:15px; position:relative; } .section-title h2:before{ content:""; width:100px; height:1px; position:absolute; bottom:-1px; margin-left:-50px; left:50%; } .section-title h2::after { content: ""; width: 12px; height: 12px; position: absolute; bottom: -6px; margin-left: -3px; left: 50%; transform: rotate(45deg); } .section-title p{ font-size:15px; color:#888; } .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}


/*breadcrumb*/ .breadcrumb{ padding-top:290px; margin-top:30px; background:url('img/description.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative;

} .breadcrumb:before{ position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; opacity:0; content:"";

} .breadcrumb .breadcrumb-text{ text-align:center; } .breadcrumb .breadcrumb-text h2{ padding-bottom: 10px; color:#fff; text-transform:capitalize; } .breadcrumb .breadcrumb-text h2 span{ color:#ED1C24; text-shadow:0px 0px 2px #fff; } .breadcrumb .breadcrumb-text ul { background: #fff3; display: inline-block; padding: 15px; border-radius: 2px; } .breadcrumb .breadcrumb-text ul li{ display:inline-block; } .breadcrumb .breadcrumb-text ul li a{ color:#fff; font-size:15px; } .breadcrumb .breadcrumb-text ul li a:hover{ color:#edecec; } .breadcrumb .breadcrumb-text ul li i{ color:#fff; }

.slicknav_menu{ display:none; }


/* Preloader Animaion */ .color-plate { position: fixed; width: 200px; background: #fff; z-index: 9999; top: 50%; margin-top: --100px; box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.14); right: -200px; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; padding: 20px; } .color-plate.active{ right:0; } .color-plate .icon { position: absolute; left: -50px; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 20px; color: #fff; cursor: pointer; top: 0; } .color-plate h2 { text-transform: capitalize; color: #000000b3; border-bottom: 3px solid #3336; padding-bottom: 10px; font-size: 20px; } .color-plate .color-head { margin-left: -10px; } .color-plate span { width: 40px; height: 30px; display: inline-block; margin-top: 10px; margin-left: 10px; } .color-plate span:hover{ cursor:pointer; } .color-plate span.color1{ background:#ed5409; } .color-plate span.color2{ background:#ED1C24; } .color-plate span.color3{ background:#16A085; } .color-plate span.color4{ background:#FF9800; } .color-plate span.color5{ background:#FF6853; } .color-plate span.color6{ background:#82B440; } .color-plate span.color7{ background:#36BFC4; } .color-plate span.color8{ background:#4CAF50; } .color-plate span.color9{ background:#8e44ad; } .color-plate span.color10{ background:#1DABB8; }

/*============================ Header CSS ==============================*/ .header{

z-index:999999; } .header .header-inner.sticky{ z-index:99999;

} .header .navbar-collapse{ padding:0; }

.header .header-inner { z-index:999; height: 80px; background:#393939; -webkit-box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; box-shadow:0px 0px 5px #000;


} .header .logo { float: left; padding-top: 20px; } .header .navbar { background: none; box-shadow: none; border: none; margin: 0; height: 0px; min-height: 0px; float: right; } .header .nav li{ margin-right: 12px;

   float: left;

} .header .nav li:last-child{ margin: 0;

} .header .nav li a { color:#FFF;

   font-size: 14px;
   font-weight: 800;
   text-transform: uppercase;
   padding: 30px 10px;
   position: relative;
   display: inline-block;

} .header .nav li a i{ margin-left:5px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .header .nav li:hover a i{ transform:rotate(180deg); }


.header #nav li:hover a{ box-shadow:none; text-shadow:none; border:none; }


/* dropdown */

  1. header .nav li .dropdown{

background: #fff; top:80px;

   width: 220px;
   position: absolute;
   left: -15px;
   z-index: 99;

border-top:3px solid; opacity:0; visibility:hidden; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. header .nav li:hover .dropdown{

opacity:1; visibility:visible; left:0; }

  1. header .nav li .dropdown li{

float:none; margin:0;

}

  1. header .nav li .dropdown li a{

padding: 10px 15px;

   color: #333;
   display: block;

}

  1. header .nav li .dropdown li i{

float:right; }


  1. header .nav li .dropdown li a:before{

display:none; }


/* Sticky */ .header .sticky { position: fixed; width: 100%; top: 0; animation: fadeInDown 0.8s both 0s; }

/*=================== End Header CSS =====================*/


/*=================== Slider CSS =====================*/

  1. slider{

position: relative; background-color:#000;

}

  1. slider .single-slider{

height:630px; background-size:cover; background-position:center; }

  1. slider .single-slider:before{

position:absolute; content:""; left:0; top:0; height:100%; width:100%; background:#FFF; opacity:0.9; z-index:-1; }

  1. slider .single-slider .text{

text-align: center; z-index: 3; top: 0px; visibility: inherit; margin-top: -40px; outline-color: #FFF; }

  1. slider .single-slider h1{

color: #FFF; font-size: 60px; font-weight: 600; line-height: 75px; text-transform: capitalize;


}

  1. slider .single-slider p {

color: #FFF; margin: 0px 0px; font-weight: 300; font-size: 14px; padding: 0; }

  1. slider .button-head{

text-align:center; }

  1. slider .button{

margin-top: 20px; text-align: center; display: inline-block; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; }


  1. slider .button .btn::before {

position: absolute; content: ""; right: 0; bottom: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. slider .button:hover .btn::before{

width: 100%; }

  1. slider .button .btn:after{

position:absolute; content:""; right:0; bottom:0; height:30px; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

}

  1. slider .button:hover .btn::after{

height: 100%; }

  1. slider .button span::before {

position: absolute; content: ""; left: 0; top: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. slider .button:hover span::before{

width: 100%; }

  1. slider .button span::after {

position: absolute; content: ""; left: 0; top: 0; height: 30px; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. slider .button:hover span::after{

height: 100%; }

  1. slider .single-slider #particles-js{

position:absolute; left:0; top:0; width:100%; height:100%; } .hero-area.animate-text .cd-headline .cd-words-wrapper { padding: 0; font-weight: 400;

} .cd-words-wrapper{ top:-13px; } .cd-headline.clip .cd-words-wrapper::after { content: ; position: absolute; top:0px; right: 0; width: 2px; height: 100%; background-color:#FFF; }

/*========================= features CSS ===========================*/

  1. features{

}

  1. features .feature-left{}
  2. features .feature-left img {

height: 368px; width: 100%; margin-top: 30px; }

  1. features .feature-right{

}

  1. features .single-right{

position:relative; margin-top:30px; }

  1. features .single-right i{

font-size:26px; position:absolute; left:50px; top:0; height:64px; width:64px; line-height:64px; border:1px solid #ddd; border-radius:100%; text-align:center; transition:all 0.4s ease; }

  1. features .single-right:hover i{

transform:scale(1.1); border-color:transparent; }

  1. features .single-right .right-content{

margin-left:133px; }

  1. features .single-right .right-content h3{

font-size: 22px;

   color: #000;
   margin: 0;
   padding: 0;

}

  1. features .single-right .right-content p{

color:#989898; }

/*========================= End features CSS ===========================*/

/*========================= services CSS ===========================*/

  1. Services{

background:#fff;

}

  1. Services .single-service {

padding: 20px; background: #F6F6F6; margin-top: 30px; text-align: center; transition: all 0.6s ease; position: relative; box-shadow: 0px 0px 7px #0003;


}

  1. Services .single-service i {

font-size: 32px; color: #fff; height: 66px; width: 66px; line-height: 66px; border-radius: 100%; transition:all 0.4s ease;

}

  1. Services .single-service h3::before {

position: absolute; content: ""; left: 50%; top: 27px; border: 2px solid; height: 54px; width: 54px; border-radius: 100%; margin-left: -27px; transition:all 0.4s ease; }

  1. Services .single-service:hover h3::before{

top: 13px; height: 80px; width: 80px; margin-left: -40px; }


  1. Services .single-service h3{

margin:20px 0px; color:#5c5e5f; }

  1. Services .single-service p{

color:#9f9f9f; }


/*========================= End services CSS ===========================*/


/*=================== Latest Works CSS =====================*/ .latest-works{

} .latest-works .works-menu{ text-align:center; padding-top:10px; padding-bottom:80px; } .latest-works .works-menu ul{} .latest-works .works-menu ul li { font-size: 15px; color: #888; display: inline-block; margin-right: 35px; }

.latest-works .works-menu ul li:hover:before,.latest-works .works-menu ul li.active:before{ left:50%; opacity:1; visibility:visible; } .latest-works .works-menu ul li:hover,.latest-works .works-menu ul li.active{ cursor:pointer; } .latest-works .works-menu ul li:last-child{ margin:0; }

.latest-works .single-work{ position:relative; margin-bottom:30px; overflow:hidden; } .latest-works .single-work:before{ position:absolute; left:0; top:0; height:100%; width:100%; content:""; background:#000; opacity:0; visibility:hidden; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; z-index:99; } .latest-works .single-work:hover:before{ opacity:0.8; visibility:visible; } .latest-works .single-work img{ width:100%; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .latest-works .single-work:hover img{ transform:scale(1.1); z-index:-2; } .latest-works .single-work .works-hover{ text-align:center; position:absolute; top:-130px; left:0; width:100%; height:100%; padding:30px; opacity:0; visibility:hidden; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; z-index:999; } .latest-works .single-work:hover .works-hover{ top:50px; } .latest-works .single-work:hover .works-hover{ opacity:1; visibility:visible; } .latest-works .single-work .works-hover h4 { color: #fff; font-size: 18px; margin-bottom: 20px; }

.latest-works .single-work .works-hover a{ margin-right:10px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

.latest-works .single-work .works-hover a i{ color:#fff; font-size: 25px; border:1px solid #fff; padding: 5px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

.latest-works .button-head{ text-align:center; }

.latest-works .button{ margin-top:55px; text-align:center; display:inline-block; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .latest-works .button .btn{ color:#333333b3; }


.latest-works .button .btn::before { position: absolute; content: ""; right: 0; bottom: 0; background: #333333b3; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .latest-works .button:hover .btn::before{ width: 100%; } .latest-works .button .btn:after{ position:absolute; content:""; right:0; bottom:0; background:#333333b3; height:30px; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

} .latest-works .button:hover .btn::after{ height: 100%; } .latest-works .button span::before { position: absolute; content: ""; left: 0; top: 0; background: #333333b3; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .latest-works .button:hover span::before{ width: 100%; } .latest-works .button span::after { position: absolute; content: ""; left: 0; top: 0; background: #333333b3; height: 30px; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .latest-works .button:hover span::after{ height: 100%; }


/* single-pf*/


  1. single-pf{

background:#fff; }

  1. single-pf .news-head{

float:left; overflow:hidden; background:#F6F6F6; }

  1. single-pf .single-news{

background:#F6F6F6; border:1px solid #eeeeee; float:right; margin-bottom: 40px; }

  1. single-pf .single-news img {

-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; height: 400px; width: 500px;

}

  1. single-pf .single-news img:hover{

transform:scale(1.1); }

  1. single-pf .single-news .news-body {

padding: 30px; margin-top: 15px; position: relative; margin-left: 500px; background:#F6F6F6; }



  1. single-pf .single-news .news-body h2 {

font-size: 18px; margin-top: -20px; text-transform: capitalize; margin-bottom: 15px; }

  1. single-pf .single-news .news-body h2 a{

text-decoration:none; color:#333333e6; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. single-pf .single-news .news-body h5{

color:#555; text-transform:capitalize; }

  1. single-pf .single-news .news-body span{

display:block; color:#3339; margin:10px 0; text-transform:capitalize; }

  1. single-pf .single-news .news-body span i {

color:#333c; margin-right: 10px; font-size: 16px; }

  1. single-pf .single-news .news-body span a:hover{

color:#333c; }

  1. single-pf .single-news .news-body p{

color:#999; margin-bottom:25px; }

  1. single-pf .single-news .news-body .btn {

padding: 0; margin-top: 48px; font-size: 15px; text-transform: uppercase; }

  1. single-pf .single-news .news-body .btn:hover{

color:#999 }

  1. single-pf .single-news .news-body .btn i{

margin-left:5px; font-size:16px; }


  1. single-pf .owl-nav{

margin: 0;

   position: absolute;
   top: 0%;
   width: 100%;

margin-top:-50px; z-index:99999;

}

  1. single-pf .owl-nav button {

height: 40px; width: 100px; line-height: 40px; background: #333; color: #fff; font-size: 12px; position: absolute; margin: 0; font-weight:600; }


  1. single-pf .owl-nav button:hover{

color:#fff; }

  1. single-pf .owl-nav .owl-prev {

left:0; }

  1. single-pf .owl-nav .owl-next{

right:0; }


/*======================= End Latest Works CSS =========================*/


/*=================== Testimonials =====================*/

  1. testimonials{

background-image:url('img/testi-bg.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; }

  1. testimonials .bg:before{

position:absolute; content:""; left:0; top:0; height:100%; width:100%; background:#000; opacity:0.9; }

  1. testimonials .single-testimonial{

padding:0 185px; text-align:center; position:relative; }

  1. testimonials .single-testimonial img {

height: 65px; width: 65px; border-radius: 100%; border: 3px solid #fff; margin-bottom: 10px; position: absolute; left: 50%; top: -70px; margin-left: -34px; }

  1. testimonials .single-testimonial h2 {

color: #fff; font-size: 33px; margin-bottom: 10px; margin-top: 70px; font-weight: 400; }

  1. testimonials .single-testimonial p{

color:#c8c7c7; font-size:14px; text-transform:capitalize; position:relative; font-weight:300;

}

  1. testimonials .single-testimonial p i {

margin-right: 10px; font-size: 16px; }

  1. testimonials .single-testimonial p .fa {

margin:0px 10px; }

  1. testimonials .single-testimonial span{

margin-top:15px; color:#c8c7c7; font-size:14px; display:block; }

  1. testimonials .owl-dots {

z-index: 333; left: 50%; width: 100%; text-align: center; margin-top: 30px; }

  1. testimonials .owl-dots button{

width: 15px;

   height: 8px;
   background: #fff;
   margin-right: 5px;

border:1px solid transparent; }

  1. testimonials .owl-dots button.active{

background:transparent; border-color:#fff; }

  1. testimonials .owl-dots button span{

} /*=================== End Testimonials =====================*/

/*=================== Blog =====================*/

  1. blog{}
  2. blog .single-news{

background:#faf9f9; border:1px solid #eeeeee; }

  1. blog .single-news img{

width:100%; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .single-news{

position:relative; }

  1. blog .single-news .news-body {

padding: 30px; margin-top: 15px; }

  1. blog .single-news .news-body .date {

color: #fff; position: absolute; left: 0; top: 272px; padding: 8px 8px; font-size: 17px; }

  1. blog .single-news .news-body .date span {

display: block; color: #fff; text-transform: uppercase; padding: 0; margin: 0; }

  1. blog .single-news .news-body .title {

margin-left: 40px; margin-top: -13px; }

  1. blog .single-news .news-body .title span{

display:inline-block;

}

  1. blog .single-news .news-body .title .user{

font-size:14px; text-transform:capitalize; }

  1. blog .single-news .news-body .title .user i{

font-size:14px; margin-right:5px; }

  1. blog .single-news .news-body .title .comment{

font-size:14px; margin-left:10px; text-transform:capitalize; }

  1. blog .single-news .news-body .title .comment i{

margin-right:5px; }




  1. blog .single-news .news-body h2 {

font-size: 18px; margin-left: 40px; margin-top: -20px; text-transform:capitalize;

}

  1. blog .single-news .news-body h2 a{

text-decoration:none; color:#333333e6; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .single-news .news-body span{

display:block; color:#bbb; margin:20px 0; }

  1. blog .single-news .news-body p{

color:#999; margin-bottom:25px; }

  1. blog .single-news .news-body .btn{

padding:0; }

  1. blog .single-news .news-body .btn:hover{

color:#999 }

  1. blog .single-news .news-body .btn i{

margin-left:5px; }





  1. blog .button-head{

text-align:center; }

  1. blog .button{

margin-top:55px; text-align:center; display:inline-block; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .button .btn{

color:#333333b3; }


  1. blog .button .btn::before {

position: absolute; content: ""; right: 0; bottom: 0; background: #333333b3; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .button:hover .btn::before{

width: 100%; }

  1. blog .button .btn:after{

position:absolute; content:""; right:0; bottom:0; background:#333333b3; height:30px; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

}

  1. blog .button:hover .btn::after{

height: 100%; }

  1. blog .button span::before {

position: absolute; content: ""; left: 0; top: 0; background: #333333b3; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .button:hover span::before{

width: 100%; }

  1. blog .button span::after {

position: absolute; content: ""; left: 0; top: 0; background: #333333b3; height: 30px; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog .button:hover span::after{

height: 100%; }




/* Blog Single*/


  1. blog-single{}
  2. blog-single .single-news{

background:#faf9f9; border:1px solid #eeeeee;

margin-bottom: 40px; }

  1. blog-single .single-news img{

width:100%; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. blog-single .single-news .news-body {

padding: 30px; margin-top: 15px; position: relative; }

  1. blog-single .single-news .news-body .date {

color: #fff; position: absolute; left: 0; top:7px; padding: 8px 8px; font-size: 17px; }

  1. blog-single .single-news .news-body .date span {

display: block; color: #fff; text-transform: uppercase; padding: 0; margin: 0; }

  1. blog-single .single-news .news-body .title {

margin-left: 40px; margin-top: -13px; }

  1. blog-single .single-news .news-body .title span{

display:inline-block;

}

  1. blog-single .single-news .news-body .title .user{

font-size:14px; text-transform:capitalize; }

  1. blog-single .single-news .news-body .title .user i{

font-size:14px; margin-right:5px; }

  1. blog-single .single-news .news-body .title .comment{

font-size:14px; margin-left:10px; text-transform:capitalize; }

  1. blog-single .single-news .news-body .title .comment i{

margin-right:5px; }




  1. blog-single .single-news .news-body h2 {

font-size: 18px; margin-left: 40px; margin-top: -20px; text-transform:capitalize;

}

  1. blog-single .single-news .news-body h2 a{

text-decoration:none; color:#333333e6; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }


  1. blog-single .single-news .news-body span{

display:block; color:#bbb; margin:20px 0; }

  1. blog-single .single-news .news-body p{

color:#999; margin-bottom:25px; }

  1. blog-single .single-news .news-body .btn{

padding:0; }

  1. blog-single .single-news .news-body .btn:hover{

color:#999 }

  1. blog-single .single-news .news-body .btn i{

margin-left:5px; }

  1. blog-single .single-news .news-body .tags {

margin-top: 15px; font-size: 18px; text-transform: capitalize; color: #666; }

  1. blog-single .single-news .news-body .tags li{

display:inline-block; margin-left:5px; text-transform:capitalize; }

  1. blog-single .single-news .news-body .tags li a {

font-size: 15px; font-weight:300; }

  1. blog-single .single-news .news-body .tags li a:hover{

color:#999; }

  1. blog-single .pagination-head{

text-align:center; }

  1. blog-single .pagination{

text-align:center; }

  1. blog-single .pagination ul{

border:1px solid #666; }

  1. blog-single .pagination ul li{

display:inline-block; border-right:1px solid #666;


}

  1. blog-single .pagination ul li:last-child{

border:none; }

  1. blog-single .pagination ul li a{

color:#666; text-transform:capitalize; display:block; padding: 10px 20px; font-weight:600;

}

  1. blog-single .pagination ul li i{

margin:0px 5px; }


/*=================== Fun Facts CSS =====================*/ .fun-facts{ text-align:center; margin-top:30px; background-image:url('img/fun-bg.jpg'); position:relative; } .fun-facts .bf-color:before{ position:absolute; content:""; left:0; top:0; height:100%; width:100%; background:#000; opacity:0.9;

} /* single-fun */ .fun-facts .single-fun{ transition:all 0.4s ease; padding: 28px; background:#FFFFFF4D; text-align: center; }

.fun-facts .single-fun i { font-size: 52px; color: #fff; display: block; margin-bottom: 14px; line-height: 80px;

}

.fun-facts .single-fun span{ color:#fff; font-weight:600; font-size:30px;

} .fun-facts .single-fun p{ color:#fff; font-size:15px; }

/*=================== End Fun =====================*/


/*=================== Team =====================*/

  1. team{}

/* single-team */

  1. team .single-team {

margin-top: 30px; overflow: hidden; box-shadow: 0px 0px 10px #0000001a; padding: 10px; }

  1. team .team-head{

position:relative; }

  1. team .team-head:before{

position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0; visibility:hidden; content:""; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. team .single-team:hover .team-head:before{

opacity:0.8; visibility:visible; }

  1. team .team-head{

position:relative; overflow:hidden; }

  1. team .team-head img{

width:100%; }

  1. team .team-hover{

position:absolute; top:0; width:100%; height:100%; padding: 65px 15px; text-align:center; opacity:0; visibility:hidden; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }

  1. team .single-team:hover .team-hover{

opacity:1; visibility:visible; } /* single-team social */

  1. team .team-hover .social {

margin-top: -105px; }

  1. team .team-hover .social li {

margin-right: 8px; margin-left: -66px; transition: all 0.4s ease; display: inline-block; margin-top: 168px; }

  1. team .single-team:hover .social li{

margin-left: 0px; }

  1. team .team-hover .social li a{

color:#503723; background:#fff; width:30px; height:30px; line-height:30px; display:block; }

  1. team .team-hover .social li a:hover{

color:#fff; }

  1. team .t-name{

margin-top:25px; text-align:center; }

  1. team .t-name h4{

font-size:21px; text-transform:capitalize; }

  1. team .t-name h4 span{

display:block; font-weight:400; margin-top:10px; color:#888888; font-size:14px; } /*=================== End Team =====================*/


/*=======================

 P Table4 CSS

=========================*/

.p-table4{ background:#F0EDED; } .p-table4 .single-table{ text-align:center; box-shadow: 0px 0px 7px #0003; background:#FFFFFF; overflow:hidden; transition:all 0.4s ease; margin-top:85px;

} .p-table4 .table-head{} .p-table4 .table-head .title-head{


} .p-table4 .table-head h2.medium{

color:#000428; } .p-table4 .table-head h2 { background-color:#000428;

color:#fff; padding: 40px 0px; text-transform:uppercase;

} .p-table4 .table-head .price { background-color: #000428; top: 52px; padding-bottom:135px;

} .p-table4 .table-head .amount { color: #fff; font-size: 42px; font-weight: 600; border-radius: 100%; border: 1px solid ; height: 140px; width: 140px; line-height: 140px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; transition: all 2s ease; position: absolute; top: 173px; left: 50%; margin-left: -70px; } .p-table4 .single-table:hover .table-head .price .amount{ transform:scale(1.03); }

.p-table4 .table-head .price .amount span{ font-weight:300; } .p-table4 .single-table .table-list {

}

.p-table4 .single-table .table-list{} .p-table4 .single-table .table-list li{ padding:10px 0px; color:#727272; border-bottom:1px solid #ebebeb; }

.p-table4 .single-table .table-list i{ margin-right:5px; }

.p-table4 .button-head{ text-align:center; }

.p-table4 .button{ margin:20px 0px; text-align:center; display:inline-block; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .p-table4 .button .btn{ text-transform:capitalize; } .p-table4 .button .btn i{ margin-right:10px; }

.p-table4 .button .btn::before { position: absolute; content: ""; right: 0; bottom: 0; height: 2px; width: 0px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .p-table4 .button:hover .btn::before{ width: 100%; } .p-table4 .button .btn:after{ position:absolute; content:""; right:0; bottom:0; height: 100%; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

}

.p-table4 .button span::before { position: absolute; content: ""; left: 0; top: 0; height: 2px; width: 0px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .p-table4 .button:hover span::before{ width: 100%; } .p-table4 .button span::after { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }


/*=================== Error Page =====================*/ .error { background: #fff; } .error .error-inner { text-align: center; padding: 0 280px; position:relative; } .error .error-inner .wrong { position: absolute; left: 409px; top: 195px; height: 40px; width: 40px; } .error .error-left{ margin-top:50px; } .error .error-left p { color: #333; font-size: 21px; } .error .error-left p span{ font-weight: 700; font-size: 35px; margin-right:5px; } .error .error-left .p2{ color: #333; margin-top:20px; font-weight: 600; font-size:15px; } .error .error-left h2 { font-size: 125px; font-weight: 700; }

.error .error-left .button-head{

}

.error .error-left .button{ margin-top:40px; text-align:center; display:inline-block; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }


.error .error-left .button .btn::before { position: absolute; content: ""; right: 0; bottom: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .error .error-left .button:hover .btn::before{ width: 100%; } .error .error-left .button .btn:after{ position:absolute; content:""; right:0; bottom:0; height:30px; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

} .error .error-left .button:hover .btn::after{ height: 100%; } .error .error-left .button span::before { position: absolute; content: ""; left: 0; top: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .error .error-left .button:hover span::before{ width: 100%; } .error .error-left .button span::after { position: absolute; content: ""; left: 0; top: 0; height: 30px; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .error .error-left .button:hover span::after{ height: 100%; } .error .error-left .btn i{ margin-right:10px; } .error .error-right{} .error .error-right img{}


/*=================== End Error Page =====================*/


/*=================== mail success Page =====================*/ .mail-success{} .mail-success .mail-head{ text-align:center; } .mail-success .mail-head h2 { font-weight: 600; margin-top: 10px; } .mail-success .mail-head h2 span img { height: 50px; width: 50px; margin-right: 12px; margin-top: -8px; } .mail-success .mail-head img{ height: 150px; width: 150px; } .mail-success .mail-head .btn i{ margin-right:10px; } .mail-success .mail-head .button{ margin-top:40px; text-align:center; display:inline-block; position:relative; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; }


.mail-success .mail-head .button .btn::before { position: absolute; content: ""; right: 0; bottom: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .mail-success .mail-head .button:hover .btn::before{ width: 100%; } .mail-success .mail-head .button .btn:after{ position:absolute; content:""; right:0; bottom:0; height:30px; width:2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease;

} .mail-success .mail-head .button:hover .btn::after{ height: 100%; } .mail-success .mail-head .button span::before { position: absolute; content: ""; left: 0; top: 0; height: 2px; width: 40px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .mail-success .mail-head .button:hover span::before{ width: 100%; } .mail-success .mail-head .button span::after { position: absolute; content: ""; left: 0; top: 0; height: 30px; width: 2px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .mail-success .mail-head .button:hover span::after{ height: 100%; }

/*=================== End mail success Page =====================*/





  1. gmap{

background:#333; }

  1. gmap #map{

width: 100%;

   height: 400px;

}


/*=================== About US CSS =====================*/ .skill{} .skill h2 { font-size: 25px; margin-bottom: 20px; } .skill p { margin-bottom: 10px; } .skill .button .btn { color: #fff; } .skill .button .btn{ background:#ED1C24; } .skill .button .btn:hover{ background:#333; }

.skill .progress .progress-bar{ background:#ED1C24; }

.skill .skill-title h4 { font-size: 16px; margin-bottom: 15px; text-transform: capitalize; font-weight: 600; } .skill .progress { overflow: visible; border-radius: 0px 5px 5px 0px; box-shadow: none; background: #fff; height: 5px; } .skill .progress .progress-bar { position: relative; } .skill .progress .progress-bar span { position: absolute; right: 20px; top: -36px; color: #666; font-weight: 500; font-size: 14px; } .skill .progress .progress-bar span::before { position: absolute; bottom: -25px; left: 50%; content: ""; margin-left: -10px; border: 7px solid #ED1C24; border-radius: 100%; } /*=======================

 End About US CSS

=========================*/



/*=================== contact =====================*/

  1. contact{

position:relative; } /*contact-left*/

  1. contact .contact-left {

background: #fff; padding: 30px; position: relative; top: 52px; left: 90px; z-index: 99; box-shadow: -10px 10px 10px #0000004d; }

  1. contact .contact-left h3{

color:#333; border-bottom:1px solid;

}

  1. contact .contact-left p{

color:#9f9f9f; margin-top:10px; }

  1. contact .contact-left .p1 {

margin-top: 22px; margin-left: 10px; }

  1. contact .contact-left .p1::before {

position: absolute; content: ""; left: 31px; top: 82px; height: 75px; width: 2px; }

/*contact-right*/

  1. contact .contact-right {

padding:60px 30px 60px 90px; }

  1. contact .contact-right::before {

position: absolute; content: ""; right: 15px; top: 0; border: 22px solid #fffc; border-top: 22px solid transparent; border-right: 22px solid transparent; border-radius: 0px 0px 0px 4px; }

  1. contact .contact-right::after {

position: absolute; content: ""; right: 15px; top: 0; border: 24px solid #F6F6F6; border-left: 22px solid transparent; border-bottom: 22px solid transparent; } .contact .form{ margin-top:30px; } .contact .form .form-group{} .contact .form input { width: 100%; height: 46px; padding-left: 15px; text-transform: capitalize; background: none; border: none; color: #fff; border-bottom: 1px solid #fff; } .contact .form textarea { width: 100%; height: 200px; padding: 15px; text-transform: capitalize; resize: none; background: none; color: #fff; border: none; border: 1px solid #fff; } .contact .form .btn { color: #333; background: #fff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; margin-top: 10px;;

} .contact .form .btn:hover{ box-shadow: 2px 8px 8px #0000004d; transform:scale(1.05); } .contact .form .btn i{ margin-left:5px; }

/*=================== End contact =====================*/


/*=================== Clients CSS =====================*/ .clients{ background:#fff; } .clients .single-clients{ -webkit-transition:all .4s ease; -moz-transition:all .4s ease; transition:all .4s ease; margin:0; padding:0; padding:0; }

.clients .single-clients img{

} /*=================== End Clients CSS =====================*/


/*=================== Footer CSS =====================*/ .footer{ padding:0; background-color:#F6F6F6; } .footer .footer-top{ padding:50px 0px;

} .footer .logo{ margin-bottom:23px; }

.footer .logo img{}

.footer .single-footer{} .footer .single-footer .contact { margin-top: 15px; } .footer .single-footer .contact p{ margin-top:10px; } .footer .single-footer .contact i{ margin-right:10px; } .footer .single-footer .contact .location{ color:#868585; } .footer .single-footer .contact .mail-add{ color:#868585; } .footer .single-footer .contact .call{ color:#868585; }


.footer .single-footer span i{ margin-right:5px; } .footer .single-footer span{ display:block; color:#868585; margin: 12px 0px; text-transform:capitalize; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .footer .single-footer span:hover{ cursor:pointer; } .footer .single-footer h2{ color:#333; font-size:20px; font-weight:600; text-transform:capitalize; margin-bottom:20px; text-transform:uppercase; } .footer .single-footer h2 i{ margin-right:10px; padding-right:5px; border-right:2px solid; } .footer .single-footer p{ color:#333; } .footer .single-footer .mail{ margin-top:20px; } .footer .single-footer .mail input{ background: transparent; border: 1px solid #868585; height: 45px; line-height: 45px; width: 245px; margin-right: 15px; color: #868585; padding-left: 18px; display: inline-block; float: left; } .footer input::-webkit-input-placeholder {

   opacity: 1;
   color: #868585 !important;

}

.footer input::-moz-placeholder {

   opacity: 1;
   color: #868585 !important;

}

.footer input::-ms-input-placeholder {

   opacity: 1;
   color: #868585 !important;

} .footer input::input-placeholder {

   opacity: 1;
   color: #868585 !important;

} .footer .single-footer .button { height: 37px; width: 109px; box-shadow: none; text-shadow: none; border: none; margin-top: 10px; margin-left: 0; font-size: 15px; text-transform: capitalize; } .footer .single-footer .button a{ color:#fff; } .footer .single-footer .button:hover{ background:#555; color:#c8c8c8; } .footer .single-footer .mail i { position: absolute; left: 0; color: #333; top: 230px; } .footer .single-footer .mail p{ margin-top:10px; } .footer .copyright{ text-align:center; padding:20px 0;

} .footer .copyright .copyright-content{ float:left; }

.footer .copyright .copyright-content p{ color:#fff; }

.footer .copyright .social{ float:right; margin-right:15px;

} .footer .copyright .social{} .footer .copyright .social li{ display:inline-block; margin-right:5px; } .footer .copyright .social li a{ background:#fff; width:25px; height:25px; line-height:25px; display:block;

} .footer .copyright .social li a:hover{ color:#fff; background:#333; } .footer .copyright .social ul li a i{ font-size:15px;

}


/**--------------------MEMBERS----------------------------**/ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); /* ---------------------------------------------------------------------------- */ /* ------------------------------------Reset----------------------------------- */ /* ---------------------------------------------------------------------------- */ a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;} article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;} mark, rp, rt, ruby, summary, time {display:inline;} input, textarea {border:0; padding:0; margin:0; outline: 0;} iframe {border:0; margin:0; padding:0;} input, textarea, select {margin:0; padding:0px;}


/* ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- */

  • {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

/* ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: none;} .video embed,.video object,.video iframe { width: 100%;  height: auto;} img{max-width:100%; height: auto;width: auto\9; /* ie8 */}

a{color: #888;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} a:hover {color: #131313; text-decoration: none;} .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} h1, h2 {font-size: 25px;line-height: 30px;} h3, h4 {font-size: 20px;line-height: 20px;} h5, h6 {font-size: 16px;line-height: 16px;} h1,h2,h3,h4,h5,h6 {letter-spacing: 1px;line-height: 1.2;font-family: 'Roboto', sans-serif;}

p{margin: 10px 0;}


label {cursor:pointer;margin:5px 0;display:block;font-weight:bold;} input {display:block;width:100%;color:#222;border:1px solid #d1d1d1;padding:20px;margin: 5px 0 20px 0;font-size: 16px;} textarea {display:block;width:100%;height:250px;background-color:#fff; color:#222;border:1px solid #d1d1d1;padding:10px;margin: 5px 0 20px 0;}

input:not([type]), input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="search"], textarea, .form-control, select { border-radius: 0 0 0 0;

   box-shadow: none;
   display: block;
   font-weight: normal;
   line-height: 1.2;
   outline: medium none;
   transition: border-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
   width: 100%;

}

.t-center{text-align: center !important;} .t-left{text-align: left;} .t-right{text-align: right;} .f-right{float: right;} .f-left{float: left;}

.post{} .post:after, .post:before, article:after, article:before, section:after, section:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;} .post img{margin: 30px 0;}

.clear{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:after, .clearfix:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}

.list-inline li{display: inline-block;}

/* --Line-- */ hr.line { margin: 15px 0; padding: 0; max-width: 80px;border: 0; border-top: solid 1px #fff;}

/* ---------------------------------------------------------------------------- */ /* ------------------------------------Html-Body------------------------------- */ /* ---------------------------------------------------------------------------- */ html, body {width:100%; padding:0; margin:0;} body {font: 14px/25px Arial, Helvetica, sans-serif;font-family: 'Open Sans', sans-serif;background: #fff;color: #666;font-size: 15px;line-height: 1.6em;letter-spacing: .2px;} body .wrap-body{} body .wrap-body {background-image: url(../images/bg-2.jpg);background-position: center center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;color:#fff;position: relative;} body .wrap-body:before {content:"";display: block;height: 100%;position: absolute;top: 0;left: 0;width: 100%;visibility: visible;background-color: rgba(0, 0, 0, .6);}

.widget-title{position: relative;letter-spacing: 1px;font-weight: bold;text-transform: uppercase;line-height: 1.38;margin-bottom: 20px;font-size: 18px;color: #eee;padding-left: 13px;}

.widget-title:before {background-color: #098F8E;content: "";height: 1em;left: 0;margin-top: -0.5em;position: absolute;top: 50%;width: 3px;} /* ---------------------------------------------------------------------------- */ /* ---------------------------------Top-Site----------------------------------- */ /* ---------------------------------------------------------------------------- */

  1. top {padding: 20px 0; color: #fff;margin-bottom: 40px;}
  2. top .top-search{}
  3. top ul.top-link {margin-top: 10px;}

.link{} .link a{display:inline-block;text-decoration:none;letter-spacing:1px; color: #888888;} .link a:hover{color:#fff} .link li:after{content: "-";padding: 0 10px;} .link li:last-child:after{content:;padding:0px;display:none} ul.link li{padding: 0;margin: 0;}

@media (max-width: 767px){ #top ul.top-link, #top .top-search {text-align: center;} #top .top-search form{margin: 30px auto 0;} }

/* ---------------------------------------------------------------------------- */ /* -------------------------------------Search--------------------------------- */ /* ---------------------------------------------------------------------------- */

  1. searchtext input {border: 1px solid #ddd;color: #fff;display: block;padding: 10px;width: 100%;box-sizing: border-box;font-size: 15px;margin: 0;background-color: transparent;height: 42px;}
  2. form-container{max-width: 360px;text-align: center;margin: auto;}
  3. searchtext {overflow: hidden;}

a.search-submit-button {background: #fff;border-bottom: 1px solid #eeeeee;border-right: 1px solid #eeeeee;border-top: 1px solid #eeeeee;color: #131313;display: block;float: right;padding: 10px;font-size: 17px;text-align: center;width: 45px;box-sizing: border-box;height: 42px;}

@media (max-width: 767px){ #form-container{margin: 15px auto 0;} }

/* ---------------------------------------------------------------------------- */ /* -------------------------------------Header--------------------------------- */ /* ---------------------------------------------------------------------------- */ header{ margin-bottom:0px; }

a.site-branding {text-align: center;color: #888;margin-bottom: 10px;height: auto;padding: 0;display: inline-block;} .main-header h1.site-title, .main-header .site-title a {letter-spacing: 2px;color: #131313;margin: 0;text-transform: uppercase;font-size: 39px;font-weight: 300;line-height: 1;} p.site-description{margin: 0;font-size: 16px;}

/* ---------------------------------------------------------------------------- */ /* -------------------------------------Container------------------------------ */ /* ---------------------------------------------------------------------------- */

  1. container {}
  2. container .wrap-container{}

/* ---content-box--- */ .content-box {margin-bottom: 30px;} .content-box .wrap-box {padding: 20px auto; position: relative;}

.box-text{padding: 60px;} .box-image{background-position: center center;background-size: cover;display: block;height: 100%;width: 100%;opacity: 1;z-index: 1;}

.heading{margin: 20px 0 30px;} .heading h2{color: #fff;font-size: 36px;margin-bottom: 20px;text-transform: uppercase;} .heading .prefix {float: left;font-size: 72px;font-weight: 500;line-height: 65px;margin-right: 10px;font-family: 'Poppins', sans-serif;} .heading .intro {color: #777;font-size: 19px;font-style: italic;}

.content-box .content{margin-bottom: 20px;}

.content-box.box-image-1{background:#fff url(../images/young-man2.jpg) no-repeat 60% 30%; color: #333;min-height: 650px} .content-box.box-image-2{background: url('img/bg-5.jpg') 50% 50% no-repeat;color:#fff;position: relative;} .content-box.box-image-2:before {content:"";display: block;height: 100%;position: absolute;top: 0;left: 0;width: 100%;visibility: visible;background-color: rgba(0, 0, 0, .8);}

.content-box .bg-2{background:#098F8E;} .content-box .bg-3{background: rgba(0, 0, 0, .65);} .content-box .bg-4{background: rgba(255, 255, 255, .85);}


.content-box.box-1 {font-family: 'Roboto', sans-serif;} .content-box.box-1 .box-text{padding: 60px 60px 60px 140px} .content-box.box-1 h1{font-size: 67px;color: #222;line-height: 1.1;margin: 30px 0;font-weight: 500;} .content-box.box-1 span{font-size: 29px;font-weight: 300;color: #333;display: block;margin-bottom: 30px;} .content-box.box-1 img{margin: 10px 0;} .content-box.box-1 .lead {font-size: 19px;color: #444;}

@media (max-width: 767px){ .content-box.box-1 .box-text{padding: 60px; text-align: initial;} }

.content-box.box-2 .box-text{min-height: 470px;} .content-box.box-2 .heading{margin: 40px 0 20px;} .content-box.box-2 .heading h2{font-size: 28px;position: relative;padding-bottom: 20px;} .content-box.box-2 .heading h2:before{position: absolute; content: ""; border-bottom: 1px solid #fff; width: 80px;bottom: 0;} .content-box.box-2 .content{margin-bottom: 30px;}

.content-box.box-4{}

.content-box.box-5{color: #2b2d3f;text-align: center;} .content-box.box-5 .heading h2{color: #1a1c1e;} .content-box.box-5 .content{max-width: 600px;margin: 50px auto 20px;} .content-box.box-5 .box-text{}

/* ---MainContent-Article--- */

  1. main-content{}
  2. main-content .wrap-content{padding: 30px 0;}


/* ---Article--- */ .single-post{} .single-post .wrap-post, .comments-are, .contact-form {background: #f6f6f6;padding:30px; position: relative;;} article.single-post{border-bottom: none; padding-bottom: 0;} article.single-post .wrap-post, .comments-are {padding:30px 20px; position: relative;margin-top: 30px;} article{background: #ffffff; color: #3F3F3F; margin: 30px 0 40px;/*padding: 0 30px 50px;*/} article:last-child{border-bottom: none;} article:after, article:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;} article .heading h2{color: #1a1c1e;} article .post-thumbnail-wrap {text-align: center;width: 100%;margin-bottom: 10px;} article .post-thumbnail-wrap img {} article h2.entry-title{font-size: 53px;margin: 10px 0 0;font-weight: 300;letter-spacing: 2px;line-height: 1.1;} article h2.entry-title a{color: #131313;} article h2.entry-title a:hover{color: #555} article .l-tags{text-align: center; font-size: 11px;}

article .entry-header{margin-bottom: 30px;} article.single-post .entry-header{margin-bottom: 30px;text-align: center;} article.single-post .entry-header h1.entry-title{font-size: 40px;line-height: 30px;font-weight: 300;margin: 0;text-transform: uppercase;margin-bottom: 0;line-height: 1.1} article.single-post .entry-header h1.entry-title a {color: #575756;margin: 0;} article .entry-title-blog a:hover {color: #628d7c;}

article .entry-header .time {font-family: "Merriweather",Georgia,serif;color: #888;font-size: 17px;padding-bottom: 10px;display: block;} article .entry-header .cat-links {font-size: 17px;color: #7fcaad;text-transform: uppercase;letter-spacing: 1px;padding-top: 10px;display: block;}

article .entry-header .entry-meta{color: #888;font-size: 17px;} article .entry-header .entry-meta a {color: #888;} article .entry-header .entry-meta a:hover {color: #131313;}

article .entry-header .tags-links {display: block;} article .entry-header .tags-links a{padding: 3px 8px 1px;background: #131313;line-height: 20px;} article.single-post .entry-header .tags-links {margin-bottom: 70px;}


article .entry-content{text-align: left;} article.single-post .entry-content{ padding: 40px 120px;} @media (max-width: 540px){ article.single-post .entry-content{ padding: 30px;} } article .entry-content p{color: #686868;} article .entry-content blockquote {border-left: 3px solid #1c7791;margin: 0 50px;font-style: italic;color: #666;padding-left: 20px;} article .entry-content ol {float: left;text-align: justify;margin: 10px 50px;list-style-type: circle;font-size: 21px;}

.comments-are textarea {height:170px;}

.fix-right {float: right !important;} @media only screen and (max-width: 767px) {.fix-right {float: none;}}

/* ---------------------------------------------------------------------------- */ /* -------------------------------------Footer--------------------------------- */ /* ---------------------------------------------------------------------------- */ footer{margin-top: 30px;font-size: 14px;color: #ddd;} footer a{color:#ddd;} footer a:hover{color:#fff;} footer ul li {margin-bottom: 5px;border-bottom: 1px solid #555;padding: 10px 0 15px;} footer i.fa{font-size: 22px;margin-right: 8px;}


footer .wrap-footer{padding: 60px;background: #161616;} footer .wrap-footer ul li {margin-bottom: 5px;padding: 10px 0 15px;} footer .logo img{max-width: 170px;margin-top: 30px;} footer .col-footer-1 {}

footer .col-footer-2{} footer .col-footer-2 ul {padding: 0;} footer .col-footer-2 ul li {list-style: none;margin-bottom: 5px; border-bottom: 1px solid #444;padding-bottom: 10px;} footer .col-footer-2 ul li:last-child{border-bottom: none;} footer .col-footer-2 ul li a{color: #999;font-size: 12px;} footer .col-footer-2 ul li a:hover{color: #eee;}

footer .col-footer-3 a{color: #999; background: #202020; padding: 5px 10px;line-height: 2.3;font-size: 14px;text-transform: capitalize;margin-right: 1px;} footer .col-footer-3 a:hover{color: #fff;background: #000;}

footer .col-footer-4 img{margin-bottom: 20px;}

footer .bottom-social{margin-bottom: 20px;} footer .bottom-social i.fa{font-size: 24px;margin-right: 12px;}


footer .bottom-footer{text-align: center;padding: 40px 0;color: #fff;} footer .bottom-footer a{text-decoration: underline} .copyright{font-size: 17px;}

/* ---------------------------------------------------------------------------- */ /* -------------------------------------Contact-------------------------------- */ /* ---------------------------------------------------------------------------- */

  1. contact_form, #comment {padding:20px 30px 0;color: #222;}

.contact-form{margin-top: 0;} .contact-form h3{font-size: 43px; font-weight: 400; color: #222;}

/* ---------------------------------------------------------------------------- */ /* -----------------------------------Subscribe-------------------------------- */ /* ---------------------------------------------------------------------------- */ .subscribe-form{margin-top: 60px;} .subscribe-form input[type="text"]{background: transparent;border:none;border-bottom: 1px solid #2b2d3f; outline: medium none;box-shadow: none;} .subscribe-form input::-webkit-input-placeholder, .subscribe-form input::-webkit-input-placeholder{color: #333;} /* ---------------------------------------------------------------------------- */ /* -------------------------------------Button--------------------------------- */ /* ---------------------------------------------------------------------------- */ .button{cursor: pointer;font-size: 13px;border:1px solid #ffffff;display: inline-block;text-decoration: none;margin: 5px 0;color: #fff;padding: 10px 15px;-webkit-transition: all .35s;-moz-transition: all .35s;transition: all .35s;} .button:hover{ background-color:transparent; text-decoration: none; }

.button.bt1 {background-color:transparent;color: #ffffff;padding: 10px 30px;text-align: center;border:2px solid #ec495e;font-weight: bold; font-size: 15px;border-radius: 5px;} .button.bt1:hover{background: transparent;} .button-skin{background-color:transparent; color: #fff;font-weight: bold;border: none;width: auto;padding: 16px 35px;border-radius: 30px;font-size: 15px;} .button-skin:hover{background-color:transparent;}

.button-subscribe{width: 100%;font-size: 20px;}

/* -----------------------modal----------------------------------------------------- */ .modal-backdrop.in {

   filter: alpha(opacity=50);
   opacity: 1;

} opacity.less:4 .modal-backdrop.fade {

   filter: alpha(opacity=0);
   opacity: 0;

} .fade.in {

   opacity: 1;

}

.modal-backdrop {

 display:none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1040;
   background-color: #000;

} .title{

 position:left;
 padding-left: 20px;
 color:#474747;
 font-size:30px;

} .btn{

 width:240px;
 height:245px;
 opacity:0.6;
 border:0;
 background-color:transparent;
 

}

  1. menuhead{
 position: absolute;
 z-index: 10;
 left:10px;

} .contact {

 display:inline-block;
 padding:0px;
   width:100%;

}

  1. menuhead h5{
 position:absolute;
 left:-40px;
 top:-59px;
 z-index:10;

}

  1. menuhead img{
 position:absolute;
 width: 490%;
 left:-160px;
 top:-42px;  

}


.close {

 float: right;
 font-size: 21px;
 font-weight: bold;
 line-height: 1;
 color: #474747;
 text-shadow: 0 1px 0 #000;
 filter: alpha(opacity=20);
 opacity: .2;

} .close:hover, .close:focus {

 color: #000;
 text-decoration: none;
 cursor: pointer;
 filter: alpha(opacity=50);
 opacity: .5;

} button.close {

 -webkit-appearance: none;
 padding: 0;
 cursor: pointer;
 background:#000;
 border: 0;

} .modal-open {

 overflow: hidden;

} .modal {

 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1050;
 display: none;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 outline: 0;

} .modal.fade .modal-dialog {

 -webkit-transition: -webkit-transform .3s ease-out;
      -o-transition:      -o-transform .3s ease-out;
         transition:         transform .3s ease-out;
 -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
      -o-transform: translate(0, -25%);
         transform: translate(0, -25%);

} .modal.in .modal-dialog {

 -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
         transform: translate(0, 0);

} .modal-open .modal {

 overflow-x: hidden;
 overflow-y: auto;

} .modal-dialog {

 position: relative;
 width: auto;
 margin: 10px;

} .modal-content {

 position: relative;
 background-color: #000;
 -webkit-background-clip: padding-box;
         background-clip: padding-box;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, .2);
 border-radius: 6px;
 outline: 0;
 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
         box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

} .modal-backdrop {

 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1040;
 background-color: #000;

} .modal-backdrop.fade {

 filter: alpha(opacity=0);
 opacity: 0;

} .modal-backdrop.in {

 filter: alpha(opacity=50);
 opacity: .5;

} .modal-header {

 min-height: 16.42857143px;
 padding: 15px;
 border-bottom: 1px solid #e5e5e5;

} .modal-header .close {

 margin-top: -2px;

} .modal-title {

 margin: 0;
 line-height: 1.42857143;

} .modal-body {

 position: relative;
 padding: 15px;

} .modal-footer {

 padding: 15px;
 text-align: right;
 border-top: 1px solid #e5e5e5;

} .modal-footer .btn + .btn {

 margin-bottom: 0;
 margin-left: 5px;

} .modal-footer .btn-group .btn + .btn {

 margin-left: -1px;

} .modal-footer .btn-block + .btn-block {

 margin-left: 0;

} .modal-scrollbar-measure {

 position: absolute;
 top: -9999px;
 width: 50px;
 height: 50px;
 overflow: scroll;

} @media (min-width: 768px) {

 .modal-dialog {
   width: 600px;
   margin: 30px auto;
 }
 .modal-content {
   -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
           box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
 }
 .modal-sm {
   width: 300px;
 }

} @media (min-width: 992px) {

 .modal-lg {
   width: 900px;
 }

} /*----------------------------------------------------*/ /* ------------------------------Portfolio Box--------------------------------- */ /* ---------------------------------------------------------------------------- */ .portfolio-box { display:inline-block;

   padding:0px;
   width:;

padding-left:10px; position: relative; margin: auto; overflow: hidden; height: 250px; position:relative; border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.3);} .portfolio-box:first-child, .portfolio-box:nth-child(4n+1) {border-left: none;} .portfolio-box:nth-child(n+5) {border-bottom: none;} .portfolio-box .portfolio-image{ background-position: center center;background-size:cover;height: 100%;width: 100%;opacity: 0; -webkit-transition: all .35s ease-in-out;-moz-transition: all .35s ease-in-out;transition: all .35s ease-in-out;z-index: 1;}

.portfolio-box .portfolio-caption {display: block;width: 100%;height: 100%;color: rgba(255, 255, 255, 0.7);z-index: 3;}

.portfolio-box .portfolio-time, .portfolio-box .portfolio-details{position: absolute;left: 7%;}

.portfolio-box .portfolio-time{top: 5%;}

.portfolio-box .portfolio-day{font-size: 48px;margin-bottom:5px;line-height: 1;} .portfolio-box .portfolio-month, .portfolio-box .portfolio-year{font-size: 13px;text-transform: uppercase;line-height: 1.2;}

.portfolio-box .portfolio-details{bottom: 0%;width: 91%;}

.portfolio-box .portfolio-cat, .portfolio-box .portfolio-comments{font-size: 14px;opacity:0;-webkit-transition: all .35s ease-in-out;-moz-transition: all .35s ease-in-out;transition: all .35s ease-in-out;}

.portfolio-box .portfolio-title{font-size: 20px;} .portfolio-box .portfolio-cat{width: 87%;float: left;} .portfolio-box .portfolio-comments{width: 13%;float: left;} .portfolio-box .portfolio-comments i.fa{padding-right: 5px;line-height: 1.6}

.portfolio-box:hover .portfolio-image{backface-visibility: hidden;opacity: 1;} .portfolio-box:hover .portfolio-caption { color: rgba(222,219,215,1); } .portfolio-box:hover .portfolio-cat, .portfolio-box:hover .portfolio-comments{opacity:1;}


@media(min-width:768px) {

   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
       font-size: 15px;
   }
   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
       font-size: 19px;
   }

}


.flex-box .box-image {background-repeat: no-repeat;background-position: center center;background-size: cover;display: block;z-index: 1;width: 100%;height: 100%;} .flex-box .f-right{order: 2;}

@media(min-width:768px){ .flex-box { flex-direction: row; -webkit-flex-direction: row; display: flex; display: -webkit-flex; } .box-text.text-right{text-align: right;} .box-text.text-right .content:before, .box-text.text-right .content:after{right: 0;} } @media(max-width:767px){ .box-text{text-align: center;} .box-text .content:before, .box-text .content:after{right: 47%;} .flex-box .box-image {height: 430px;width: 100%;} } button.close {

 -webkit-appearance: none;
 padding: 0;
 cursor: pointer;
 background:   height:20px;;
 border: 0;

} .modal-open {

 overflow: hidden;

} .modal {

 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1050;
 display: none;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 outline: 0;

} .modal.fade .modal-dialog {

 -webkit-transition: -webkit-transform .3s ease-out;
      -o-transition:      -o-transform .3s ease-out;
         transition:         transform .3s ease-out;
 -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
      -o-transform: translate(0, -25%);
         transform: translate(0, -25%);

} .modal.in .modal-dialog {

 -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
         transform: translate(0, 0);

} .modal-open .modal {

 overflow-x: hidden;
 overflow-y: auto;

} .modal-dialog {

 position: relative;
 width: auto;
 margin: 10px;

} .modal-content {

 position: relative;
 background-color: #000;
 -webkit-background-clip: padding-box;
         background-clip: padding-box;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, .2);
 border-radius: 6px;
 outline: 0;
 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
         box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

} .modal-backdrop {

 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1040;
 background-color: #000;

} .modal-backdrop.fade {

 filter: alpha(opacity=0);
 opacity: 0;

} .modal-backdrop.in {

 filter: alpha(opacity=50);
 opacity: .5;

} .modal-header {

 min-height: 16.42857143px;
 padding: 15px;
 border-bottom: 1px solid #e5e5e5;

} .modal-header .close {

 margin-top: -2px;

} .modal-title {

 margin: 0;
 line-height: 1.42857143;

} .modal-body {

 position: relative;
 padding: 15px;

} .modal-footer {

 padding: 15px;
 text-align: right;
 border-top: 1px solid #e5e5e5;

} .modal-footer .btn + .btn {

 margin-bottom: 0;
 margin-left: 5px;

} .modal-footer .btn-group .btn + .btn {

 margin-left: -1px;

} .modal-footer .btn-block + .btn-block {

 margin-left: 0;

} .modal-scrollbar-measure {

 position: absolute;
 top: -9999px;
 width: 50px;
 height: 50px;
 overflow: scroll;

} @media (min-width: 768px) {

 .modal-dialog {
   width: 600px;
   margin: 30px auto;
 }
 .modal-content {
   -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
           box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
 }
 .modal-sm {
   width: 300px;
 }

} @media (min-width: 992px) {

 .modal-lg {
   width: 900px;
 }

}

/*=================== End Footer CSS =====================*/