Template:SCUT China/css/style

{

margin:0; padding:0; }

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;}

.notebook{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/5/5b/T--SCUT_China--notebook.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative;

} .experiments{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/6/69/T--SCUT_China--experiments.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative;

}

.file-pdf{ text-align:center; height:800px; width:1000px; padding-top:20px; padding-bottom:20px;

} .content-ins-3{ margin-top:30px; text-align:center; text-align:justify; }

/************co-content*************/

.co-content{ padding-left:145px; color:#000; margin-top:50px; padding-right:145px; line-height:30px; font-size:10.5; text-align:justify;}

.col-comm-3{ margin:10px; width:319px; float:left } /*judging*/ .judging{ background-color:#ff860D; margin:80px; } .requirements{ margin:80px; } .picture{ background-color:#ff860D; height:200px; width:200px; margin:50px 80px; text-align:center; float:left; overflow:hidden;

} .requirement{ margin-top:50px; position: relative; margin-left: 400px; line-height:150%; } .requirement a:hover{ color: #fff; font-size:inherit; }

/*part*/ .overview{ background-color:#ff860D; margin:80px; } .partbutton{ width:1000px; height:150px; margin:50px 80px; background-color:#ff860D; font-size:36px; text-align:center; line-height:150px; } .partbutton a:hover{ color: #fff; font-weight: bold; }

.content-box.box-image-top{background: url('https://static.igem.org/mediawiki/2019/6/63/T--SCUT_China--leader.png') 50% 50% no-repeat;color:#fff;position: relative;}

.content-box.box-image-bottom{background:url('https://static.igem.org/mediawiki/2019/1/10/T--SCUT_China--members.png') 50% 50% no-repeat;color:#fff;position: relative; background-size:cover;}

.portfolio-box.box2{ display:inline-block;

   width:240px;

background-color:RGB(253，147，42); padding-left:15px; position:relative; margin: auto; overflow: hidden; opacity:1; top:-10px; height: 236px; position:relative; border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.3);

} .content-ins-3{ margin-top:30px; text-align:center; text-align:justify; } .content-ins-4{

   margin-left:-53px;

margin-right:-53px; margin-top:10px; text-align:center; text-align:justify; } .btn.btn-close{ color:#FFF; background-color:rgb(237,125,49); -webkit-appearance: none;

 	padding: 0;
 	cursor: pointer;

height:40px; width:60px; border-radius:1; padding:10px;

} .bt-mentors1{ width:232px; height:232px; background-image:url('https://static.igem.org/mediawiki/2019/8/84/T--SCUT_China--First_PI.jpg'); background-size:cover; border:0px; margin:7px; margin-left:20px;} .bt-mentors2{ width:232px; height:236px; background-image:url('https://static.igem.org/mediawiki/2019/f/ff/T--SCUT_China--Second_PI.jpg'); background-size:cover; border:0px; margin:7px; margin-left:20px;}

.bt-mentors3{ width:232px; height:236px; background-image:url('https://static.igem.org/mediawiki/2019/3/34/T--SCUT_China--Instructor.jpg'); background-size:cover; border:0px; margin:7px;}

.bt-mentors4{ width:230px; height:236px; background-image:url('https://static.igem.org/mediawiki/2019/9/9e/T--SCUT_China--Advisor.jpg'); background-size:cover; border:0px; margin:7px; margin-left:20px;}

/*breadcrumb*/ .breadcrumb.b1{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/b/ba/T--SCUT_China--description.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b2{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/9/9a/T--SCUT_China--design.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b3{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/8/89/T--SCUT_China--model.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b4{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/c/ce/T--SCUT_China--demonstrate.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b5{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/5/5b/T--SCUT_China--notebook.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b6{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/c/cd/T--SCUT_China--parts.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b7{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/9/9d/T--SCUT_China--basic_parts.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b8{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/1/19/T--SCUT_China--composite.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b9{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/4/4c/T--SCUT_China--part_collection.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b10{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/f/f0/T--SCUT_China--hp.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b11{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/7/73/T--SCUT_China--collaborations.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b12{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/3/35/T--SCUT_China--attribution.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b13{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/2/20/T--SCUT_China--judging.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b14{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/b/b6/T--SCUT_China--safety.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b15{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/1/18/T--SCUT_China--integrated_hp.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; } .breadcrumb.b16{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/d/de/T--SCUT_China--team-members.gif'); background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; }

.breadcrumb.b20{ width:100%; height:300px; padding-top:290px; margin-top:30px; background:url('https://static.igem.org/mediawiki/2019/5/5e/T--SCUT_China--Entrepreneurship.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; } .grid { padding: 20px 20px 100px 20px; max-width: 1200px; margin: 0 auto; list-style: none; text-align: center; }

.grid li { display: inline-block; width: 230px; margin: 0;

text-align: left; position: relative; }

.grid figure { margin: 0; position: relative; }

.grid figure img { max-width: 100%; display: block; position: relative; }

.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; }

.grid figcaption h3 { margin: 0; padding: 0; color: #fff; }

.grid figcaption span:before { content: 'by '; }

.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; } /* Individual Caption Styles */

/* Caption Style 3 */ .cs-style-3 figure { overflow: hidden; }

.cs-style-3 figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; }

.no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }

.cs-style-3 figcaption { height: 60px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; }

.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }

.cs-style-3 figcaption a { position: absolute; bottom: 20px; right: 20px; } @media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 100px 10px; } .grid li { width: 25%; min-width: 20px; } } /* 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;

       top:-5px;

} .header .header-inner.sticky{ z-index:999;

       top:10px;

} .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 */

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; }

header .nav li:hover .dropdown{

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

header .nav li .dropdown li{

float:none; margin:0;

}

header .nav li .dropdown li a{

padding: 10px 15px;

   color: #333;
   display: block;

}

header .nav li .dropdown li i{

float:right; }

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 =====================*/

slider{

position: relative; background-color:#000;

}

slider .single-slider{

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

slider .single-slider:before{

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

slider .single-slider .text{

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

slider .single-slider h1{

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

}

slider .single-slider p {

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

slider .button-head{

text-align:center; }

slider .button{

margin-top: 10px; 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; }

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; }

slider .button:hover .btn::before{

width: 100%; }

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;

}

slider .button:hover .btn::after{

height: 100%; }

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; }

slider .button:hover span::before{

width: 100%; }

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; }

slider .button:hover span::after{

height: 100%; }

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; } /*=================== Words CSS =====================*/ .word,.bottom{ width:100%; top:20px; text-align:center; position:relative;

} .plate{ width:100%; text-align:center; position:relative; z-index:5; top:220px; }

/*=================== 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%; }

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

/* single-pf*/

single-pf{

background:#FC6; }

single-pf .news-head{

float:left; overflow:hidden; background:#F6F6F6; max-height:410px; }

single-pf .single-news{

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

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;

}

single-pf .single-news img:hover{

transform:scale(1.1); }

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

padding: 30px; position: relative; margin-left: 500px; background:#F6F6F6; max-height:400px; }

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

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

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; }

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

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

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

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

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

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

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

color:#333c; }

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

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

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

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

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

color:#999 }

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

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

single-pf .owl-nav{

margin: 0;

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

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

}

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; }

single-pf .owl-nav button:hover{

color:#fff; }

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

left:0; }

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

right:0; }

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

testimonials{

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

testimonials .bg:before{

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

testimonials .single-testimonial{

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

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; }

testimonials .single-testimonial h2 {

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

testimonials .single-testimonial p{

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

}

testimonials .single-testimonial p i {

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

testimonials .single-testimonial p .fa {

margin:0px 10px; }

testimonials .single-testimonial span{

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

testimonials .owl-dots {

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

testimonials .owl-dots button{

width: 15px;

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

border:1px solid transparent; }

testimonials .owl-dots button.active{

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

testimonials .owl-dots button span{

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

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

blog{}
blog .single-news{

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

blog .single-news img{

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

blog .single-news{

position:relative; }

blog .single-news .news-body {

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

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

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

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

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

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

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

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

display:inline-block;

}

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

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

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

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

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

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

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

margin-right:5px; }

blog .single-news .news-body h2 {

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

}

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; }

blog .single-news .news-body span{

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

blog .single-news .news-body p{

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

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

padding:0; }

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

color:#999 }

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

margin-left:5px; }

blog .button-head{

text-align:center; }

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; }

blog .button .btn{

color:#333333b3; }

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; }

blog .button:hover .btn::before{

width: 100%; }

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;

}

blog .button:hover .btn::after{

height: 100%; }

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; }

blog .button:hover span::before{

width: 100%; }

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; }

blog .button:hover span::after{

height: 100%; }

/* Blog Single*/

blog-single{}

blog-single .single-news{

background-color:transparent; border:1px solid #eeeeee; padding:10px; margin-bottom: 20px; }

blog-single .single-news img{

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

blog-single .single-news img.img1{

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

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

padding: 0px; margin-top: 15px; position: relative; background-color: #FFFFFF; }

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

color: #fff; position: absolute; left: 0px; top: 24px; padding: 8px 8px; font-size: 17px; width: 84px; height: 90px; }

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

color: #fff; position: absolute; left: 0px; top: 15px; padding: 8px 8px; font-size: 17px; width: 59px; height: 58px; background-color: #ff860D; }

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

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

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

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

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

display:inline-block;

}

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

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

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

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

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

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

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

margin-right:5px; }

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

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

}

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; }

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

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

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

color:#999; margin-bottom:25px; text-align:justify }

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

padding:0; }

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

color:#999 }

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

margin-left:5px; }

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

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

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

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

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

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

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

color:#999; }

blog-single .pagination-head{

text-align:center; }

blog-single .pagination{

text-align:center; }

blog-single .pagination ul{

border:1px solid #666; }

blog-single .pagination ul li{

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

}

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

border:none; }

blog-single .pagination ul li a{

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

}

blog-single .pagination ul li i{

margin:0px 5px; }

/*=================== Fun Facts CSS（原有的） =====================*/ .fun-facts{ text-align:center; background-image:url('https://static.igem.org/mediawiki/2019/4/4c/T--SCUT_China--team.jpg'); background-size:cover; background-position:center; position:relative; height:400px;

} .fun-facts .bf-color:before{ position:absolute; content:""; left:0; top:0; height:100%; width:100%; background:#000; opacity:0.8;

} /* single-fun */ .fun-facts .single-fun{ transition:all 0.4s ease; padding-bottom: 300px; background-color:transparent; text-align: center; height:350px;

}

.fun-facts .single-fun i { margin-top:-40px; font-size: 52px; color: #fff; display: block; margin-bottom: 10px; 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 =====================*/ /*=================== INS_pic CSS（新加的） =====================*/ .ins-pic1{ position:relative; width:100%; text-align:center; top:60px; margin-bottom:60px;

}

contact-ins{

padding-left:200px; color:#000; margin-top:200px; padding-right:200px; line-height:30px; font-size:10.5; } .content-ins-1{ top:100px; width:380px; font-size:10.5; text-align:justify; float:left; }

.ins-pic2{ padding-top:15px; padding-right:10px; padding-left:20px; float:right; width:450px;}

.content-ins-2{ margin-top:450px; text-align:center; text-align:justify;

} .ins-table-1{ border:2px solid #000; padding-left:20px; text-align:center; margin-left:100px; margin-right:100px;

} .ins-pics{ top:200px; text-align:center; width:1200px; margin:0 auto; margin-bottom:-200px;

}

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

team{}

/* single-team */

team .single-team {

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

team .team-head{

position:relative; }

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; }

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

opacity:0.8; visibility:visible; }

team .team-head{

position:relative; overflow:hidden; }

team .team-head img{

width:100%; }

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; }

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

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

team .team-hover .social {

margin-top: -105px; }

team .team-hover .social li {

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

team .single-team:hover .social li{

margin-left: 0px; }

team .team-hover .social li a{

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

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

color:#fff; }

team .t-name{

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

team .t-name h4{

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

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 =====================*/

gmap{

background:#333; }

gmap #map{

width: 100%;

   height: 400px;

}

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

contact{

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

contact .contact-left {

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

contact .contact-left h3{

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

}

contact .contact-left p{

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

contact .contact-left .p1 {

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

contact .contact-left .p1::before {

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

/*contact-right*/

contact .contact-right {

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

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; }

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; width:100%;

       padding-top:-20px;

}

/**--------------------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; /* 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----------------------------------- */ /* ---------------------------------------------------------------------------- */

top {padding: 20px 0; color: #fff;margin-bottom: 40px;}
top .top-search{}
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--------------------------------- */ /* ---------------------------------------------------------------------------- */

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;}
form-container{max-width: 360px;text-align: center;margin: auto;}
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------------------------------ */ /* ---------------------------------------------------------------------------- */

container {}
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--- */

main-content{}
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;}}

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

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;

}

menuhead{

 position: absolute;
 z-index: 10;
 left:10px;

} .contact {

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

}

menuhead h5{

 position:absolute;
 left:-40px;
 top:-59px;
 z-index:10;

}

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 =====================*/