Difference between revisions of "Template:Tsinghua-A/css/style"

 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
/*--
 
−
Author: W3layouts
 
−
Author URL: http://w3layouts.com
 
−
License: Creative Commons Attribution 3.0 Unported
 
−
License URL: http://creativecommons.org/licenses/by/3.0/
 
−
--*/
 
 
* ::selection {
 
* ::selection {
 
     background:#666;  
 
     background:#666;  
Line 28: Line 22:
 
     animation: animate 0.7s infinite;
 
     animation: animate 0.7s infinite;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
 +
}
 +
body.page-Team_Tsinghua-A{
 +
    background: #fff;
 
}
 
}
 
@keyframes animate{
 
@keyframes animate{
Line 63: Line 60:
 
width: 90%
 
width: 90%
 
}
 
}
 +
 
/*--- header-top ----*/
 
/*--- header-top ----*/
 
.header-logo{
 
.header-logo{
Line 70: Line 68:
 
.header-top
 
.header-top
 
{
 
{
−
background:url(../images/bg.jpg) no-repeat 0px 0px;
+
background:url(https://static.igem.org/mediawiki/2018/1/14/T--Tsinghua-A--BackgroundZ.jpg) no-repeat 0px 0px;
 +
    background-position:center;
 
background-size:cover;
 
background-size:cover;
 
-webkit-background-size:cover;
 
-webkit-background-size:cover;
Line 104: Line 103:
 
color:#FFFFFF;
 
color:#FFFFFF;
 
font-size: 60px;
 
font-size: 60px;
 +
}
 +
.header-sub-text h3{
 +
font-family: 'Lato', sans-serif;
 +
font-weight:300;
 +
color:#5bf2f9;
 +
font-size: 40px;
 
}
 
}
 
.header-sub-text p
 
.header-sub-text p
Line 131: Line 136:
 
text-align:center;
 
text-align:center;
 
}
 
}
−
/*--- header-bottom ----*/
+
 
−
.logo{
+
 
 +
/*--- sicky Nav---*/
 +
/*---- Fixed Navigation ----*/
 +
ul.dropdown-menu{
 +
    border-top-width:0;
 +
transition:        0.5s all;
 +
-webkit-transition: 0.5s all;
 +
-moz-transition:    0.5s all;
 +
-o-transition:      0.5s all;
 +
-ms-transition:    0.5s all;
 +
    opacity:0;
 +
    display:block;
 +
    visibility:hidden;
 +
}
 +
li.dropdown:hover > ul.dropdown-menu, .dropdown-menu:hover{
 +
    visibility:visible;
 +
    opacity:1;
 +
}
 +
ul.dropdown-menu li{
 +
    font-size:1.2em;
 +
    text-transform:uppercase;
 +
    text-align:left;
 +
}
 +
 
 +
div.top-nav .logo{
 
float:left;
 
float:left;
 
     margin-top: 13px;
 
     margin-top: 13px;
 
     margin-left: 40px;
 
     margin-left: 40px;
 
}
 
}
−
.logo img.nav-logo{
+
div.top-nav .logo img.nav-logo{
 
     height: 60px;
 
     height: 60px;
 
}
 
}
−
/*--- sicky Nav---*/
 
−
/*---- Fixed Navigation ----*/
 
 
div.top-nav{
 
div.top-nav{
 
     height: 84.42px;
 
     height: 84.42px;
Line 212: Line 239:
 
text-align: center;
 
text-align: center;
 
}
 
}
 +
 
/*------ about-nav -----*/
 
/*------ about-nav -----*/
−
.about-nav, .about-nav1, .about-nav2, .about-nav3, .about-nav4, .about-nav5, .about-nav6{
 
−
width:180px;
 
−
height:180px;
 
−
display:inline-block;
 
−
background:url(../images/bha.png) no-repeat 0px 0px;
 
−
    background-position: center;
 
−
}
 
−
.about-nav:hover, .about-nav1:hover, .about-nav2:hover, .about-nav3:hover, .about-nav4:hover, .about-nav5:hover, .about-nav6:hover{
 
−
background:url(../images/hoverbg.png) no-repeat 0px 0px;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.about-nav label, .about-nav1 label, .about-nav2 label, .about-nav3 label, .about-nav4 label, .about-nav5 label, .about-nav6 label{
 
−
color:#FFF;
 
−
display:block;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size:16px;
 
−
}
 
−
.about-nav a, .about-nav1 a, .about-nav2 a, .about-nav3 a, .about-nav4 a, .about-nav5 a, .about-nav6 a{
 
−
padding-top:3em;
 
−
display:inline-block;
 
−
}
 
−
.about-nav span.nav-icon{
 
−
background:url(../images/Hardwareicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav1 span.nav-icon1{
 
−
background:url(../images/Collaborationicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav2 span.nav-icon2{
 
−
background:url(../images/HumanPracticeicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav3 span.nav-icon3{
 
−
background:url(../images/Teamicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav4 span.nav-icon4{
 
−
background:url(../images/Experimenticon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav5 span.nav-icon5{
 
−
background:url(../images/Modelicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav6 span.nav-icon6{
 
−
background:url(../images/Attributionicon.png) no-repeat 0px 0px;
 
−
}
 
−
.about-nav span.nav-icon,
 
−
.about-nav1 span.nav-icon1,
 
−
.about-nav2 span.nav-icon2,
 
−
.about-nav3 span.nav-icon3,
 
−
.about-nav4 span.nav-icon4,
 
−
.about-nav5 span.nav-icon5,
 
−
.about-nav6 span.nav-icon6{
 
−
width:65px;
 
−
height:72px;
 
−
display:inline-block;
 
−
    background-size: contain;
 
−
}
 
 
.arrow-grid
 
.arrow-grid
 
{
 
{
Line 282: Line 252:
 
margin-bottom: 25%;
 
margin-bottom: 25%;
 
display:inline-block;
 
display:inline-block;
−
background:url(../images/arrow.png) no-repeat 0px 0px;
+
background:url(https://static.igem.org/mediawiki/2018/3/3d/T--Tsinghua-A--arrow.png) no-repeat 0px 0px;
 
}
 
}
 
.arrow a:hover
 
.arrow a:hover
 
{
 
{
−
background:url(../images/arrow1.png) no-repeat 0px 0px;
+
background:url(https://static.igem.org/mediawiki/2018/c/c6/T--Tsinghua-A--arrow1.png) no-repeat 0px 0px;
 
transition:0.5s;
 
transition:0.5s;
 
-webkit-transition:0.5s;
 
-webkit-transition:0.5s;
Line 294: Line 264:
 
}
 
}
  
−
/*--- content ----*/
 
−
.row
 
−
{
 
−
margin:10% 0;
 
−
position:relative;
 
−
}
 
−
.content-top-grid
 
−
{
 
−
text-align:center;
 
−
font-family: 'Lato', sans-serif;
 
−
color:#676767;
 
−
}
 
−
.content-top-grid sub
 
−
{
 
−
width:200px;
 
−
height:200px;
 
−
display:inline-block;
 
−
background:url(../images/1.png) no-repeat 0px 0px;
 
−
}
 
−
.content-top-grid:hover span
 
−
{
 
−
background:url(../images/2hr.png) no-repeat 0px 0px;
 
−
}
 
−
.content-top-grid span
 
−
{
 
−
background:url(../images/2.png) no-repeat 0px 0px;
 
−
width:200px;
 
−
height:200px;
 
−
display:inline-block;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.content-top-grid small
 
−
{
 
−
background:url(../images/3.png) no-repeat 0px 0px;
 
−
width:200px;
 
−
height:200px;
 
−
display:inline-block;
 
−
top:0%;
 
−
right:16%;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.content-top-grid:hover small
 
−
{
 
−
background:url(../images/3hr.png) no-repeat 0px 0px;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.content-top-grid big
 
−
{
 
−
background:url(../images/4.png) no-repeat 0px 0px;
 
−
width:200px;
 
−
height:200px;
 
−
display:inline-block;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.content-top-grid:hover big
 
−
{
 
−
background:url(../images/4hr.png) no-repeat 0px 0px;
 
−
}
 
−
.content-top-grid h3
 
−
{
 
−
margin-top: 10%;
 
−
}
 
−
.content-top-grid p
 
−
{
 
−
font-size:16px;
 
−
font-weight:400;
 
−
margin-top: 11%;
 
−
line-height: 28px;
 
−
}
 
−
/*--- content-about ----*/
 
−
.content-about-text
 
−
{
 
−
position:relative;
 
−
}
 
−
.content-about h2
 
−
{
 
−
text-align:center;
 
−
color:#676767;
 
−
font-family: 'Open Sans', sans-serif;
 
−
letter-spacing:2px;
 
−
font-size:45px;
 
−
margin: 10% 0;
 
−
}
 
−
.content-about small
 
−
{
 
−
color:#9F449B;
 
−
font-size:45px;
 
−
}
 
−
.content-about span
 
−
{
 
−
background:url(../images/aboutbg.png);
 
−
position:absolute;
 
−
width:297px;
 
−
height:114;
 
−
top: -67%;
 
−
right: 37%;
 
−
}
 
−
.content-about-grid-left img
 
−
{
 
−
width:100%;
 
−
}
 
−
.content-about-grid-right {
 
−
padding-left:31px;
 
−
}
 
−
.content-about-grid-right p
 
−
{
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 17px;
 
−
color: #8D8D8D;
 
−
line-height: 33px;
 
−
width: 92%;
 
−
padding-left:20px;
 
−
}
 
−
.learn
 
−
{
 
−
margin-top: 17%;
 
−
padding-left:20px;
 
−
}
 
−
.learn a
 
−
{
 
−
background: #A957A5;
 
−
border-bottom: solid 5px #6B2E68;
 
−
border-radius: 7px;
 
−
padding:1em 3em;
 
−
text-align: center;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 20px;
 
−
color:#FFFFFF;
 
−
}
 
−
.learn a:hover
 
−
{
 
−
color:#6B2E68;
 
−
text-decoration:none;
 
−
background: transparent;
 
−
border: solid 2px #6B2E68;
 
−
border-top: solid 5px #6B2E68;
 
−
border-radius: 10px;
 
−
padding:1em 3em;
 
−
}
 
−
.content-about-bottom
 
−
{
 
−
background:url(../images/quotebg.png) no-repeat 0px 0px;
 
−
background-size:cover;
 
−
}
 
−
.content-about-bottom-text
 
−
{
 
−
text-align:center;
 
−
padding: 8% 0;
 
−
}
 
−
.content-about-bottom-text p
 
−
{
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 44px;
 
−
color: #FFFFFF;
 
−
font-weight: 300;
 
−
margin:2% 0 0 0;
 
−
}
 
−
/*--- content-team ----*/
 
−
.content-team-text
 
−
{
 
−
position: relative;
 
−
}
 
−
.content-team-text h2
 
−
{
 
−
text-align: center;
 
−
color: #676767;
 
−
font-family: 'Open Sans', sans-serif;
 
−
letter-spacing: 2px;
 
−
font-size: 45px;
 
−
margin: 13% 0;
 
−
}
 
−
.content-team small
 
−
{
 
−
color: #9F449B;
 
−
font-size: 45px;
 
−
}
 
−
.content-team span
 
−
{
 
−
background: url(../images/aboutbg.png);
 
−
position: absolute;
 
−
width: 297px;
 
−
height: 114;
 
−
top: -67%;
 
−
right: 37%;
 
−
}
 
−
.owl-theme .owl-controls .owl-buttons div{
 
−
color: #FFF;
 
−
display: inline-block;
 
−
zoom: 1;
 
−
margin: 5px;
 
−
padding: 3px 10px;
 
−
font-size: 12px;
 
−
width: 72px;
 
−
height: 72px;
 
−
}
 
−
.owl-next{
 
−
background: url(../images/right.png) no-repeat 1px 0px;
 
−
position: absolute;
 
−
right: 46%;
 
−
top: -57%;
 
−
left:50%;
 
−
}
 
−
.owl-prev{
 
−
background: url(../images/left.png) no-repeat 3px 0px;
 
−
position: absolute;
 
−
right: 51%;
 
−
top: -57%;
 
−
}
 
−
.team-left-grid
 
−
{
 
−
text-align:center;
 
−
position:relative;
 
−
}
 
−
.team-left-grid img
 
−
{
 
−
border-radius:50%;
 
−
margin-bottom: 15%;
 
−
}
 
−
.team-left-grid h2
 
−
{
 
−
color:#484848;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 26px;
 
−
}
 
−
.team-left-grid p
 
−
{
 
−
color:#B6B6B6;
 
−
font-family: 'Lato', sans-serif;
 
−
font-weight:400;
 
−
font-size:18px;
 
−
margin-bottom: 7%;
 
−
}
 
−
/*--- team-icons ----*/
 
−
.team-icon-grid
 
−
{
 
−
text-align:center;
 
−
width: 34%;
 
−
margin: 0 auto;
 
−
}
 
−
.f-icon
 
−
{
 
−
text-align:center;
 
−
width:48px;
 
−
height:47px;
 
−
display:inline-block;
 
−
background:url(../images/f.png) no-repeat 0px 0px;
 
−
cursor:pointer;
 
−
}
 
−
.f-icon:hover
 
−
{
 
−
background:url(../images/fhr.png) no-repeat 0px 0px;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
.g-icon
 
−
{
 
−
text-align:center;
 
−
width:48px;
 
−
height:47px;
 
−
display:inline-block;
 
−
background:url(../images/g.png) no-repeat 0px 0px;
 
−
cursor:pointer;
 
−
}
 
−
.g-icon:hover
 
−
{
 
−
background:url(../images/ghr.png) no-repeat 0px 0px;
 
−
transition:0.5s;
 
−
-webkit-transition:0.5s;
 
−
-moz-transition:0.5s;
 
−
-o-transition:0.5s;
 
−
-ms-transition:0.5s;
 
−
}
 
−
/*--- team-icons ----*/
 
−
.team-left-grid span
 
−
{
 
−
width: 48px;
 
−
height: 47px;
 
−
background:url(../images/f.png) no-repeat 0px 0px;
 
−
position:absolute;
 
−
top: 107%;
 
−
right: 55%;
 
−
}
 
−
.team-left-grid span:hover
 
−
{
 
−
background:url(../images/fhr.png) no-repeat 0px 0px;
 
−
position:absolute;
 
−
transition:0.4s;
 
−
-webkit-transition:0.4s;
 
−
-moz-transition:0.4s;
 
−
-o-transition:0.4s;
 
−
-ms-transition:0.4s;
 
−
}
 
−
.team-left-grid small
 
−
{
 
−
width: 48px;
 
−
height: 47px;
 
−
background:url(../images/g.png) no-repeat 0px 0px;
 
−
position:absolute;
 
−
top: 107%;
 
−
right: 34%;
 
−
}
 
−
.team-left-grid small:hover
 
−
{
 
−
background:url(../images/ghr.png) no-repeat 0px 0px;
 
−
position:absolute;
 
−
transition:0.4s;
 
−
-webkit-transition:0.4s;
 
−
-moz-transition:0.4s;
 
−
-o-transition:0.4s;
 
−
-ms-transition:0.4s;
 
−
}
 
−
 
−
/*--- content-skills ----*/
 
−
.content-skills {
 
−
margin: 0% 0 8% 0;
 
−
}
 
−
.content-skills-text
 
−
{
 
−
position: relative;
 
−
margin-bottom: 10%;
 
−
}
 
−
.content-skills-text h2
 
−
{
 
−
text-align: center;
 
−
color: #676767;
 
−
font-family: 'Open Sans', sans-serif;
 
−
letter-spacing: 2px;
 
−
font-size: 45px;
 
−
}
 
−
.content-skills small
 
−
{
 
−
color: #9F449B;
 
−
font-size: 45px;
 
−
}
 
−
.content-skills span
 
−
{
 
−
background: url(../images/aboutbg.png);
 
−
position: absolute;
 
−
width: 297px;
 
−
height: 114;
 
−
top: -67%;
 
−
right: 37%;
 
−
}
 
−
.skills {
 
−
text-align: center;
 
−
padding: 0 6em;
 
−
}
 
−
.progressy1,.progressy2,.progressy3,.progressy4{
 
−
width: 95%;
 
−
background:#F0F0F0;
 
−
margin-bottom: 2em;
 
−
}
 
−
.progress-head h3{
 
−
float:left;
 
−
font-weight:600;
 
−
margin-bottom: 1em;
 
−
}
 
−
.progress-head  p.percent{
 
−
float:right;
 
−
margin: 1em 1em 0 0;
 
−
font-size: 22px;
 
−
font-weight: 400;
 
−
color: #B2B2B2;
 
−
}
 
−
.progressy1 p{
 
−
background:#9F449B;
 
−
width:85%;
 
−
height:20px;
 
−
}
 
−
.progressy2 p{
 
−
background:#9F449B;
 
−
width:75%;
 
−
height:20px;
 
−
}
 
−
.progressy3 p{
 
−
background:#9F449B;
 
−
width:67%;
 
−
height:20px;
 
−
}
 
−
.progressy4 p{
 
−
background:#9F449B;
 
−
width:80%;
 
−
height:20px;
 
−
}
 
−
.content-services-bottom-text
 
−
{
 
−
text-align: center;
 
−
padding: 8% 0;
 
−
}
 
−
.content-services-bottom-text p.bottom-text
 
−
{
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 44px;
 
−
color: #FFFFFF;
 
−
font-weight: 300;
 
−
padding-top: 1em;
 
−
width: 44%;
 
−
margin: 0 auto;
 
−
}
 
−
/*--- content-services ----*/
 
−
.content-services
 
−
{
 
−
background: #EEEEEE;
 
−
}
 
−
.services-grid
 
−
{
 
−
margin: 10% 0;
 
−
text-align: center;
 
−
}
 
−
.service-grid h2
 
−
{
 
−
font-weight:normal;
 
−
font-size:5em;
 
−
}
 
−
.services-grid p
 
−
{
 
−
font-weight: 400;
 
−
font-size:16px;
 
−
}
 
−
.image-grid
 
−
{
 
−
text-align:center;
 
−
}
 
−
.image-grid img
 
−
{
 
−
border-radius:50%;
 
−
margin: 0 auto;
 
−
}
 
−
.services-text
 
−
{
 
−
text-align:center;
 
−
margin:3% 0;
 
−
}
 
−
.services-text p
 
−
{
 
−
font-family: 'Monda', sans-serif;
 
−
font-weight: 400;
 
−
color:#4B4B4B;
 
−
font-size: 22px;
 
−
width: 65%;
 
−
margin: 0 auto;
 
−
}
 
−
.services-bottom-text
 
−
{
 
−
text-align:center;
 
−
margin-bottom: 4%;
 
−
}
 
−
.services-bottom-text p
 
−
{
 
−
color:#777777;
 
−
font-family: 'Monda', sans-serif;
 
−
font-weight: 700;
 
−
}
 
−
.services-bottom
 
−
{
 
−
background: #FFFFFF;
 
−
padding: 2%;
 
−
}
 
−
/*--- content-portfolio ----*/
 
−
* Strip
 
−
/*-----------------------------------------------------------------------------------*/
 
−
.b-link-stripe{
 
−
position:relative;
 
−
display:inline-block;
 
−
vertical-align:top;
 
−
font-family: 'Open Sans', sans-serif;
 
−
font-weight: 300;
 
−
overflow:hidden;
 
−
}
 
−
.b-link-stripe .b-wrapper{
 
−
position: absolute;
 
−
width: 100%;
 
−
height:100%;
 
−
top: 0;
 
−
left: 0;
 
−
text-align: center;
 
−
color: #ffffff;
 
−
}
 
−
.b-link-stripe .b-wrapper:hover {
 
−
background:rgba(50, 70, 81, 0.71);;
 
−
transition: all 0.5s linear;
 
−
-moz-transition: all 0.5s linear;
 
−
-ms-transition: all 0.5s linear;
 
−
-o-transition: all 0.5s linear;
 
−
-webkit-transition: all 0.5s linear;
 
−
}
 
−
/*-----------------------------------------------------------------------------------*/
 
−
/*--Animation effects---*/
 
−
b-animate-go{
 
−
text-decoration:none;
 
−
}
 
−
.b-animate{
 
−
transition: all 0.5s;
 
−
-moz-transition: all 0.5s;
 
−
-ms-transition: all 0.5s;
 
−
-o-transition: all 0.5s;
 
−
-webkit-transition: all 0.5s;
 
−
visibility: hidden;
 
−
font-size:1.1em;
 
−
font-weight:700;
 
−
}
 
−
.b-animate img{
 
−
margin-top:33%;
 
−
display: -webkit-inline-box;
 
−
}
 
−
/* lt-ie9 */
 
−
.b-animate-go:hover .b-animate{
 
−
visibility:visible;
 
−
}
 
−
.b-from-left{
 
−
position:relative;
 
−
left:-100%;
 
−
}
 
−
.b-animate-go:hover .b-from-left{
 
−
left:0;
 
−
}
 
−
span.m_4{
 
−
font-size:14px;
 
−
font-weight:400;
 
−
}
 
−
p.m_5 {
 
−
margin: 2% auto 5%;
 
−
width: 70%;
 
−
color: #283A47;
 
−
font-size: 1.1em;
 
−
font-weight: 600;
 
−
line-height: 1.5em;
 
−
text-align: center;
 
−
}
 
−
ul#filters {
 
−
padding: 0px;
 
−
text-align: center;
 
−
}
 
−
#filters {
 
−
margin: 3% 0;
 
−
padding: 0;
 
−
list-style: none;
 
−
text-align: left;
 
−
}
 
−
#filters li {
 
−
display:inline-block;
 
−
display: -webkit-inline-box;
 
−
display: -moz-inline-box;
 
−
display: -o-inline-box;
 
−
display: -ms-inline-box;
 
−
}
 
−
#filters li span.active,#filters li span {
 
−
color: #172F41;
 
−
text-decoration: none;
 
−
padding: 0.3em 1.3em;
 
−
display: block;
 
−
border: 1px solid #172F41;
 
−
font-size: 1.15em;
 
−
font-weight: 500;
 
−
cursor: pointer;
 
−
margin: 0 0.3em;
 
−
border-radius: 6px;
 
−
}
 
−
#filters li span.active{
 
−
color: #fff;
 
−
border: 1px solid #9F449B;
 
−
background: #9F449B;
 
−
border-radius: 6px;
 
−
}
 
−
#filters li span:hover{
 
−
border: 1px solid #9F449B;
 
−
}
 
−
#portfoliolist .portfolio {
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
-o-box-sizing: border-box;
 
−
width: 30%;
 
−
display: none;
 
−
float: left;
 
−
overflow: hidden;
 
−
margin: 3% 0 0% 1%;
 
−
padding:0;
 
−
}
 
−
div#portfoliolist {
 
−
padding: 0;
 
−
margin: 1% 0 0 0;
 
−
}
 
−
.portfolio-wrapper {
 
−
overflow:hidden;
 
−
position: relative !important;
 
−
cursor:pointer;
 
−
}
 
−
.portfolio-wrapper img{
 
−
width:100%;
 
−
}
 
−
.portfolio img {
 
−
max-width:100%;
 
−
/*--position: relative;--*/
 
−
transition: all 300ms!important;
 
−
-webkit-transition: all 300ms!important;
 
−
-moz-transition: all 300ms!important;
 
−
}
 
−
.portfolio .label {
 
−
position: absolute;
 
−
width: 100%;
 
−
height:40px;
 
−
bottom:-40px;
 
−
}
 
−
.portfolio .label-bg {
 
−
background: #22B4B8;
 
−
width: 100%;
 
−
height:100%;
 
−
position: absolute;
 
−
top:0;
 
−
left:0;
 
−
}
 
−
.portfolio .label-text {
 
−
color:#fff;
 
−
position: relative;
 
−
z-index:500;
 
−
padding:5px 8px;
 
−
}
 
−
.portfolio .text-category {
 
−
display:block;
 
−
font-size:9px;
 
−
font-size: 12px;
 
−
text-transform:uppercase;
 
−
}
 
 
/* Self Clearing Goodness */
 
/* Self Clearing Goodness */
 
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
 
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
Line 963: Line 291:
 
   height: 0;
 
   height: 0;
 
}
 
}
−
/*----- effects-comman-css------*/
 
−
.contenthover{
 
−
padding:1em;
 
−
}
 
−
.contenthover h3{
 
−
color:#FFF;
 
−
}
 
−
.contenthover p{
 
−
color:#FFF;
 
−
font-size:0.875em;
 
−
line-height:1.5em;
 
−
}
 
−
/*-----caption ------*/
 
−
.tour-caption {
 
−
display: none;
 
−
top: 0;
 
−
width: 100%;
 
−
position: absolute;
 
−
background: rgba(86, 93, 103, 0.48);
 
−
height: 87.17%;
 
−
text-align: center;
 
−
}
 
−
.tour-caption span{
 
−
background: url(../images/plus.png) no-repeat;
 
−
width: 100px;
 
−
height: 100px;
 
−
display: block;
 
−
text-align: center;
 
−
position: absolute;
 
−
top: 34%;
 
−
right: 36%;
 
−
background-size: 100%;
 
−
}
 
−
.portfolio-wrapper {
 
−
text-decoration: none;
 
−
text-align: center;
 
−
}
 
−
.portfolio-wrapper h3{
 
−
margin:0;
 
−
font-size: 17px;
 
−
color: #777777;
 
−
}
 
−
.portfolio-wrapper p{
 
−
color:#222222;
 
−
margin:0;
 
−
font-size:1.6em;
 
−
}
 
−
.portfolio-wrapper:hover div.tour-caption {
 
−
display: block;
 
−
transition: all 0.3s ease;
 
−
-webkit-transition: all 0.3s ease;
 
−
-moz-transition: all 0.3s ease;
 
−
-o-transition: all 0.3s ease;
 
−
}
 
−
.tour-caption p{
 
−
color:#fff;
 
−
font-size: 1.5em;
 
−
margin-top: 39%;
 
−
}
 
−
h6.b-animate.b-from-left.b-delay03
 
−
{
 
−
font-family: 'Open Sans', sans-serif;
 
−
font-weight: 400;
 
−
font-size: 14px;
 
−
color: #CCCCCC;
 
−
margin: 0;
 
−
text-align:center;
 
−
width:100%;
 
−
}
 
−
/*--/Animation effects---*/
 
−
/*--/top-tours--*/
 
  
−
/*--tour-guides--*/
 
−
.guide-caption {
 
−
display: none;
 
−
top: 0;
 
−
width: 95.3%;
 
−
position: absolute;
 
−
background: rgba(101, 178, 229, 0.93);
 
−
height: 86%;
 
−
text-align: center;
 
−
}
 
−
.guide-caption span{
 
−
background:url('../images/guide-icons2.png') no-repeat 0px 0px;
 
−
display:inline-block;
 
−
margin: 0 0.5em;
 
−
width:57%;
 
−
height: 52px;
 
−
display: block;
 
−
text-align: center;
 
−
position: absolute;
 
−
top: 42%;
 
−
right: 18%;
 
−
background-size: 100%;
 
−
}
 
−
.image-grid:hover div.guide-caption{
 
−
display: block;
 
−
transition: all 0.3s ease;
 
−
-webkit-transition: all 0.3s ease;
 
−
-moz-transition: all 0.3s ease;
 
−
-o-transition: all 0.3s ease;
 
−
}
 
−
.port-text
 
−
{
 
−
position: relative;
 
−
margin: 12% 0;
 
−
}
 
−
.port-text h2
 
−
{
 
−
text-align: center;
 
−
color: #676767;
 
−
font-family: 'Open Sans', sans-serif;
 
−
letter-spacing: 2px;
 
−
font-size: 45px;
 
−
}
 
−
.port-text small
 
−
{
 
−
color: #9F449B;
 
−
font-size: 45px;
 
−
}
 
−
.port-text span.folio
 
−
{
 
−
background: url(../images/portfoliobg.png);
 
−
position: absolute;
 
−
width: 369px;
 
−
height: 114;
 
−
top: -67%;
 
−
right: 34%;
 
−
}
 
−
.portfolio-buttons
 
−
{
 
−
text-align:center;
 
−
width:40%;
 
−
margin:0 auto;
 
−
}
 
−
.allactive
 
−
{
 
−
border: solid 1px #9F449B;
 
−
background: #9F449B;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 16px;
 
−
padding: 4%;
 
−
text-align: center;
 
−
border-radius: 6px;
 
−
}
 
−
.allactive a
 
−
{
 
−
color: white;
 
−
text-decoration:none;
 
−
}
 
−
.allactive a:hover
 
−
{
 
−
color: white;
 
−
text-decoration:none;
 
−
}
 
−
.all
 
−
{
 
−
background: #FFFFFF;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 16px;
 
−
padding: 4%;
 
−
text-align: center;
 
−
border-radius: 6px;
 
−
border: solid 1px #000000;
 
−
}
 
−
.all:hover a
 
−
{
 
−
color: #FFFFFF;
 
−
text-decoration:none;
 
−
}
 
−
.all:hover
 
−
{
 
−
 
−
border: solid 1px #9F449B;
 
−
background: #9F449B;
 
−
transition: 0.3s all;
 
−
-webkit-transition: 0.3s all;
 
−
-moz-transition: 0.3s all;
 
−
-o-transition: 0.3s all;
 
−
-ms-transition: 0.3s all;
 
−
}
 
−
.portfolio-images
 
−
{
 
−
margin: 6% 0;
 
−
}
 
−
.portfolio-images img
 
−
{
 
−
width:100%;
 
−
}
 
−
.portfolio-images h4
 
−
{
 
−
text-align:center;
 
−
color:#222222;
 
−
font-size:25px;
 
−
}
 
−
.portfolio-images p
 
−
{
 
−
text-align:center;
 
−
color:#777777;
 
−
font-size:16px;
 
−
}
 
−
.content-portfolio form
 
−
{
 
−
text-align:center;
 
−
}
 
−
.watch-more
 
−
{
 
−
margin: 0 auto;
 
−
width: 18%;
 
−
}
 
−
.watch
 
−
{
 
−
text-align: center;
 
−
}
 
−
.watch a
 
−
{
 
−
background: #A957A5;
 
−
border: solid 2px #FFFFFF;
 
−
border-radius: 10px;
 
−
padding: 7% 15%;
 
−
text-align: center;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 16px;
 
−
color:#FFFFFF;
 
−
}
 
−
.watch:hover a
 
−
{
 
−
color: #A957A5;
 
−
text-decoration:none;
 
−
}
 
−
.watch a:hover
 
−
{
 
−
border: solid 2px #9F449B;
 
−
background:#FFFFFF;
 
−
transition:0.3s all;
 
−
-webkit-transition:0.3s all;
 
−
-moz-transition:0.3s all;
 
−
-o-transition:0.3s all;
 
−
-ms-transition:0.3s all;
 
−
}
 
 
/*--- content--Get-in-touch ----*/
 
/*--- content--Get-in-touch ----*/
 
.Get-in-touch-text  
 
.Get-in-touch-text  
Line 1,216: Line 305:
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 
font-size: 45px;
 
font-size: 45px;
−
}
 
−
.watchmore{
 
−
text-align:center;
 
−
margin-top: 5em;
 
−
}
 
−
.watchmore a{
 
−
background: #A957A5;
 
−
border-bottom: solid 5px #6B2E68;
 
−
border-radius: 10px;
 
−
padding:1em 3em;
 
−
text-align: center;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 20px;
 
−
color: rgba(255, 255, 255, 1);
 
−
}
 
−
.watchmore a:hover{
 
−
color:#6B2E68;
 
−
text-decoration:none;
 
−
background: transparent;
 
−
border: solid 2px #6B2E68;
 
−
border-top: solid 5px #6B2E68;
 
−
border-radius: 10px;
 
−
padding:1em 3em;
 
 
}
 
}
 
.Get-in-touch{
 
.Get-in-touch{
Line 1,244: Line 310:
 
     width: 70%;
 
     width: 70%;
 
     margin: 0 auto 4%;
 
     margin: 0 auto 4%;
−
}
 
−
.email
 
−
{
 
−
margin-top:3em;
 
−
width:42%;
 
−
}
 
−
.email a
 
−
{
 
−
background: #A957A5;
 
−
border-bottom: solid 5px #6B2E68;
 
−
border-radius: 10px;
 
−
padding:1em 3em;
 
−
text-align: center;
 
−
font-family: 'Lato', sans-serif;
 
−
font-size: 20px;
 
−
color: rgba(255, 255, 255, 1);
 
−
}
 
−
 
−
.email:hover a
 
−
{
 
−
color:#6B2E68;
 
−
text-decoration:none;
 
−
background: transparent;
 
−
border: solid 2px #6B2E68;
 
−
border-top: solid 5px #6B2E68;
 
−
border-radius: 10px;
 
−
padding:1em 3em;
 
 
}
 
}
 
ul.contact-info{
 
ul.contact-info{
Line 1,303: Line 342:
 
.content-Get-in-touch span.portfolio
 
.content-Get-in-touch span.portfolio
 
{
 
{
−
background: url(../images/portfoliobg.png);
 
 
position: absolute;
 
position: absolute;
 
width: 369px;
 
width: 369px;
Line 1,339: Line 377:
 
font-family: 'Lato', sans-serif;
 
font-family: 'Lato', sans-serif;
 
font-weight: 700;
 
font-weight: 700;
−
}
 
−
.Get-in-touch-icons
 
−
{
 
−
margin-top: 21%;
 
−
}
 
−
.Get-in-touch-icons a span{
 
−
width:55px;
 
−
height:60px;
 
−
background:url('../images/get-icons.png') no-repeat 0px 0px;
 
−
display:inline-block;
 
−
}
 
−
.Get-in-touch-icons span.icon1{
 
−
background-position:-6px 0px;
 
−
}
 
−
.Get-in-touch-icons a span.icon1:hover{
 
−
background-position:-7px -60px;
 
−
}
 
−
.Get-in-touch-icons a span.icon2{
 
−
background-position:-79px 0px;
 
−
}
 
−
.Get-in-touch-icons a span.icon2:hover{
 
−
background-position: -80px -60px;
 
−
}
 
−
.Get-in-touch-icons a span.icon3{
 
−
background-position:-154px 0px
 
−
}
 
−
.Get-in-touch-icons a span.icon3:hover{
 
−
background-position: -155px -60px;
 
−
}
 
−
.Get-in-touch-icons  img
 
−
{
 
−
margin-right:6%;
 
−
}
 
−
.content-portfolio {
 
−
text-align: center;
 
−
padding-bottom: 8%;
 
−
}
 
−
.content-portfolio p{
 
−
font-size:1.1em;
 
−
margin-top:8%;
 
−
}
 
−
.content-portfolio p a{
 
−
color:#9F449B;
 
−
}
 
−
.content-portfolio p a:hover{
 
−
color:#646064;
 
 
}
 
}
 
/*----- footer ----*/
 
/*----- footer ----*/
Line 1,394: Line 386:
 
     margin: 40px 0 20px;
 
     margin: 40px 0 20px;
 
}
 
}
 +
 
/*----- to-top ----*/
 
/*----- to-top ----*/
 
#toTop {
 
#toTop {
Line 1,406: Line 399:
 
border: none;
 
border: none;
 
text-indent: 100%;
 
text-indent: 100%;
−
background: url("../images/to-top1.png") no-repeat 0px 0px;
+
background: url("https://static.igem.org/mediawiki/2018/f/f7/T--Tsinghua-A--to-top1.png") no-repeat 0px 0px;
 
}
 
}
 
#toTopHover {
 
#toTopHover {
Line 1,422: Line 415:
 
     text-align:left;
 
     text-align:left;
 
     margin-top:80;
 
     margin-top:80;
−
}
 
−
 
−
ul.dropdown-menu{
 
−
    border-top-width:0;
 
−
transition:        0.5s all;
 
−
-webkit-transition: 0.5s all;
 
−
-moz-transition:    0.5s all;
 
−
-o-transition:      0.5s all;
 
−
-ms-transition:    0.5s all;
 
−
    opacity:0;
 
−
    display:block;
 
−
    visibility:hidden;
 
−
}
 
−
 
−
li.dropdown:hover > ul.dropdown-menu, .dropdown-menu:hover{
 
−
    visibility:visible;
 
−
    opacity:1;
 
−
}
 
−
 
−
ul.dropdown-menu li{
 
−
    font-size:1.2em;
 
−
    text-transform:uppercase;
 
−
    text-align:left;
 
−
}
 
−
 
−
/*----- responsive-design ------*/
 
−
@media (max-width:1024px){
 
−
.arrow-grid {
 
−
width: 20%;
 
−
}
 
−
.header-top-grids {
 
−
margin-left: 38%;
 
−
}
 
−
.top-nav > nav > ul > li a {
 
−
padding: 0 0 0 1.5em;
 
−
font-size:1.1em;
 
−
}
 
−
.content-top-grid p {
 
−
margin-top: 6%;
 
−
line-height: 25px;
 
−
width: 98%;
 
−
overflow:hidden;
 
−
height:55px;
 
−
}
 
−
.content-about-grid-left img {
 
−
width: 85%;
 
−
}
 
−
.content-about h2 {
 
−
margin: 7% 0;
 
−
}
 
−
.row {
 
−
margin: 5% 0px;
 
−
}
 
−
.about-grid-right{
 
−
padding:0;
 
−
}
 
−
.content-about-grid-right p {
 
−
width: 80%;
 
−
padding-left: 0px;
 
−
line-height:26px;
 
−
font-size:15px;
 
−
}
 
−
.content-team-text h2 {
 
−
margin: 9% 0;
 
−
}
 
−
.owl-prev,.owl-next{
 
−
top: -34%;
 
−
}
 
−
.learn {
 
−
margin-top: 6%;
 
−
padding-left: 0px;
 
−
}
 
−
.learn a {
 
−
padding: 0.5em 1.5em;
 
−
}
 
−
.learn a:hover {
 
−
padding: 0.5em 1.5em;
 
−
}
 
−
.team-left-grid img,.team-left-grid p {
 
−
margin-bottom: 0%;
 
−
}
 
−
.team-icon-grid {
 
−
width: 13%;
 
−
padding-top:1em;
 
−
}
 
−
.skills-grids {
 
−
margin: 10% 0;
 
−
}
 
−
.skills-grid-first h3 {
 
−
font-size:19px;
 
−
padding: 2em 0 0 1.2em;
 
−
}
 
−
.content-services-bottom-text p.bottom-text {
 
−
font-size: 32px;
 
−
}
 
−
.services-grids h2 {
 
−
font-size: 4em;
 
−
}
 
−
.services-text p {
 
−
font-size: 17px;
 
−
}
 
−
.port-text {
 
−
margin: 9% 0;
 
−
}
 
−
.tour-caption {
 
−
height: 85.17%;
 
−
}
 
−
.Get-in-touch p {
 
−
line-height: 27px;
 
−
}
 
−
.Get-in-touch h4 {
 
−
margin: 8% 0;
 
−
line-height: 28px;
 
−
}
 
−
.Get-in-touch-icons {
 
−
margin-top: 7%;
 
−
}
 
−
.email {
 
−
width: 53%;
 
−
}
 
−
}
 
−
@media (max-width:768px){
 
−
.header-top-grids {
 
−
margin-left: 34%;
 
−
}
 
−
.header-bottom-grids {
 
−
width: 100%;
 
−
}
 
−
.about-nav5, .about-nav4 {
 
−
/*width: 76% !important;*/
 
−
}
 
−
.about-nav3, .about-nav2, .about-nav1, .about-nav {
 
−
/*width: 49% !important;*/
 
−
}
 
−
.about-nav1,.about-nav {
 
−
/*margin-left: 0%;*/
 
−
}
 
−
.header-bottom-grids div.left-grid,.header-bottom-grids div.right-grid {
 
−
width:50%;
 
−
padding-left:0;
 
−
padding-right:0;
 
−
}
 
−
.left-grid,.right-grid{
 
−
float:left;
 
−
}
 
−
.top-nav ul {
 
−
padding-left: 0%;
 
−
}
 
−
.top-nav > nav > ul > li a {
 
−
padding: 0 0 0 1em;
 
−
font-size: 1em;
 
−
}
 
−
.content-top-grid {
 
−
width: 50%;
 
−
float:left;
 
−
}
 
−
.content-top-grid h3,.content-top-grid p {
 
−
margin-top: 2%;
 
−
}
 
−
.content-about-grid-left {
 
−
text-align: center;
 
−
}
 
−
.content-about-grid-right p {
 
−
width: 93%;
 
−
margin: 1em 0 0 1em;
 
−
}
 
−
.learn {
 
−
text-align: center;
 
−
}
 
−
.content-about-bottom-text p {
 
−
font-size: 30px;
 
−
}
 
−
.content-team span {
 
−
right: 30%;
 
−
}
 
−
.owl-prev, .owl-next {
 
−
top: -12%;
 
−
}
 
−
.f-icon {
 
−
width: 80px;
 
−
}
 
−
.team-icon-grid {
 
−
width: 46%;
 
−
}
 
−
.team-left-grid span {
 
−
top: 112%;
 
−
}
 
−
.content-skills span {
 
−
right: 31%;
 
−
}
 
−
.progress-head h3 {
 
−
margin-top: 1.3em;
 
−
margin-bottom: 0em;
 
−
font-size:20px;
 
−
}
 
−
.progressy1, .progressy2, .progressy3, .progressy4 {
 
−
margin-bottom: 1em;
 
−
}
 
−
.progress-head p.percent {
 
−
margin: 1em 1em 0.5em 0;
 
−
}
 
−
.content-services-bottom-text {
 
−
padding: 5% 0;
 
−
}
 
−
.content-services-bottom-text p.bottom-text {
 
−
font-size: 27px;
 
−
width: 74%;
 
−
}
 
−
.services-grids {
 
−
margin: 4% 0;
 
−
text-align:left;
 
−
}
 
−
.service-grid{
 
−
float:left;
 
−
width:23%;
 
−
}
 
−
.service-grid h2 {
 
−
margin-left: 48px;
 
−
}
 
−
.service-grid p{
 
−
margin: 0px 0 0 50px;
 
−
}
 
−
.services-text p {
 
−
font-size: 14px;
 
−
width:100%;
 
−
}
 
−
.tour-caption {
 
−
height: 83.17%;
 
−
}
 
−
.tour-caption span {
 
−
top: 28%;
 
−
right: 22%;
 
−
}
 
−
.port-text span.folio {
 
−
right: 27%;
 
−
}
 
−
.portfolio-wrapper p {
 
−
font-size: 1.2em;
 
−
}
 
−
.Get-in-touch-text {
 
−
margin: 16% 0 9% 0;
 
−
}
 
−
.email {
 
−
width: 100%;
 
−
text-align: center;
 
−
margin-bottom: 7%;
 
−
}
 
−
.Get-in-touch {
 
−
margin-bottom: 6%;
 
−
}
 
−
.Get-in-touch h4 {
 
−
margin: 2% 0;
 
−
font-size: 19px;
 
−
}
 
−
.Get-in-touch-icons {
 
−
margin-top: 4%;
 
−
text-align: center;
 
−
}
 
−
}
 
−
@media (max-width:640px){
 
−
.header-logo img {
 
−
width: 50%;
 
−
}
 
−
.header-logo {
 
−
margin: 2em 0 0em 0;
 
−
}
 
−
.header-sub-text h2 {
 
−
font-size: 24px;
 
−
}
 
−
.header-sub-text p {
 
−
font-size: 18px;
 
−
}
 
−
.header-top-grids {
 
−
margin-left: 17%;
 
−
width: 65%;
 
−
}
 
−
.about-nav5, .about-nav4 {
 
−
width: 49% !important;
 
−
}
 
−
.about-nav4 a, .about-nav5 a {
 
−
/*margin-left: 3em;*/
 
−
}
 
−
.header-bottom-grids div.left-grid, .header-bottom-grids div.right-grid {
 
−
width: 66%;
 
−
margin-left: 17%;
 
−
}
 
−
.top-nav span.menu{
 
−
display:none;
 
−
}
 
−
.top-nav span.menu:before{
 
−
content:url("../images/icon.png") no-repeat 0px 0px;
 
−
cursor:pointer;
 
−
text-align: right;
 
−
width:100%;
 
−
}
 
−
.top-nav{
 
−
float:none;
 
−
}
 
−
.top-nav > nav > ul > li{
 
−
display:block;
 
−
float:none;
 
−
margin: 0em;
 
−
}
 
−
.top-nav > nav > ul > li a{
 
−
padding:0.5em;
 
−
border-bottom:1px solid #999;
 
−
color:#000;
 
−
background: rgba(159, 68, 155, 0.24);
 
−
text-align: center;
 
−
}
 
−
.top-nav ul{
 
−
display:none;
 
−
background:rgba(255, 255, 255, 0.44);
 
−
width:95%;
 
−
}
 
−
.top-nav span.menu{
 
−
display: block;
 
−
width:100%;
 
−
text-align: right;
 
−
position:relative;
 
−
padding:1em;
 
−
}
 
−
.fixed div.logo{
 
−
display:none;
 
−
}
 
−
.content-about span {
 
−
right: 26%;
 
−
}
 
−
.content-about h2 {
 
−
margin: 13% 0 16% 0;
 
−
}
 
−
.content-about-grid-left img {
 
−
width: 71%;
 
−
}
 
−
.content-about-grid-right p {
 
−
width: 98%;
 
−
overflow: hidden;
 
−
height: 45px;
 
−
}
 
−
.content-about-bottom-text p {
 
−
font-size: 24px;
 
−
}
 
−
.content-team span {
 
−
right: 23%;
 
−
}
 
−
.owl-prev, .owl-next {
 
−
top: -6%;
 
−
}
 
−
.content-skills {
 
−
margin: 6% 0 8% 0;
 
−
}
 
−
.content-skills span {
 
−
right: 22%;
 
−
}
 
−
.progressy1, .progressy2, .progressy3, .progressy4 {
 
−
margin-bottom: 0em;
 
−
}
 
−
.progress-head p.percent {
 
−
margin: 1em 1em 0em 0;
 
−
}
 
−
.content-services-bottom-text p.bottom-text {
 
−
font-size: 24px;
 
−
width: 79%;
 
−
}
 
−
.service-grid h2,.service-grid p  {
 
−
margin-left: 0px;
 
−
}
 
−
.service-grid p  {
 
−
font-size: 1.3em;
 
−
}
 
−
.service-grid {
 
−
width: 25%;
 
−
font-size: 12px;
 
−
}
 
−
.services-text p {
 
−
font-size: 13px;
 
−
}
 
−
.port-text span.folio {
 
−
right: 17%;
 
−
}
 
−
#filters {
 
−
margin: 15% 0 4% 0;
 
−
}
 
−
.tour-caption {
 
−
height: 82.17%;
 
−
}
 
−
.tour-caption span {
 
−
width: 56px;
 
−
top: 34%;
 
−
right: 36%;
 
−
}
 
−
.portfolio-wrapper p {
 
−
font-size: 1em;
 
−
}
 
−
.portfolio-wrapper h3 {
 
−
font-size: 14px;
 
−
}
 
−
.watchmore {
 
−
margin-top: 3em;
 
−
}
 
−
.watchmore a {
 
−
font-size: 15px;
 
−
}
 
−
.content-Get-in-touch span.portfolio {
 
−
right: 17%;
 
−
}
 
−
.email {
 
−
margin-top: 1em;
 
−
}
 
−
.email a {
 
−
font-size: 16px;
 
−
}
 
−
.Get-in-touch p {
 
−
line-height: 23px;
 
−
font-size: 17px;
 
−
overflow: hidden;
 
−
height: 49px;
 
−
}
 
−
}
 
−
@media (max-width:480px){
 
−
.header-logo img {
 
−
width: 76%;
 
−
}
 
−
.header-sub-text h2 {
 
−
font-size: 18px;
 
−
margin-top: 9px;
 
−
}
 
−
.header-sub-text p {
 
−
font-size: 16px;
 
−
overflow: hidden;
 
−
height: 20px;
 
−
}
 
−
.header-top-grids,.header-bottom-grids div.left-grid, .header-bottom-grids div.right-grid {
 
−
margin-left: 0%;
 
−
width: 100%;
 
−
}
 
−
.about-nav4,.about-nav5,.about-nav3,.about-nav2,.about-nav1,.about-nav{
 
−
height: 110px;
 
−
background-size:88%;
 
−
}
 
−
.about-nav4:hover,.about-nav3:hover,.about-nav2:hover,.about-nav1:hover,.about-nav:hover{
 
−
background-size: 90%;
 
−
}
 
−
.about-nav4 span.nav-icon4,.about-nav5 span.nav-icon5,.about-nav3 span.nav-icon3,.about-nav2 span.nav-icon2,.about-nav1 span.nav-icon1,.about-nav span.nav-icon {
 
−
width: 33px;
 
−
height: 30px;
 
−
background-size: 100%;
 
−
}
 
−
.about-nav span.nav-icon,.about-nav1 span.nav-icon1{
 
−
margin-left:2.5em;
 
−
}
 
−
.about-nav4 a,.about-nav5 a,.about-nav3 a,.about-nav2 a,.about-nav1 a ,.about-nav a{
 
−
margin-left: 0em;
 
−
padding-right: 1em;
 
−
padding-top: 2em;
 
−
}
 
−
.arrow-grid {
 
−
width: 28%;
 
−
}
 
−
.arrow a {
 
−
height: 70px;
 
−
background-size:50%;
 
−
margin-bottom:0;
 
−
}
 
−
.arrow a:hover{
 
−
background-size:50%;
 
−
}
 
−
.content-top-grid {
 
−
width: 49%;
 
−
float: left;
 
−
}
 
−
.content-top-grid sub {
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid h3{
 
−
margin-top: 3%;
 
−
font-size: 0.9em;
 
−
margin-bottom: 0;
 
−
}
 
−
.content-top-grid p {
 
−
font-size:0.8em;
 
−
margin-top:2%;
 
−
line-height: 16px;
 
−
overflow: hidden;
 
−
height: 33px;
 
−
}
 
−
.content-top-grid span {
 
−
background: url(../images/2.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid:hover span {
 
−
background: url(../images/2hr.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid small {
 
−
background: url(../images/3.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid:hover small {
 
−
background: url(../images/3hr.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid big {
 
−
background: url(../images/4.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-top-grid:hover big {
 
−
background: url(../images/4hr.png) no-repeat 0px 0px;
 
−
width: 100px;
 
−
height: 100px;
 
−
background-size: 100%;
 
−
}
 
−
.content-about span{
 
−
background: url(../images/edges.png);
 
−
position: absolute;
 
−
width: 200px;
 
−
height: 80;
 
−
top: -67%;
 
−
right: 11%;
 
−
}
 
−
.content-about-bottom-text img,.content-services-bottom-text img{
 
−
width: 33%;
 
−
}
 
−
.content-about h2,.content-about small{
 
−
font-size: 35px;
 
−
}
 
−
.content-about-grid-left img {
 
−
width: 100%;
 
−
}
 
−
.content-about-grid-right p {
 
−
width: 93%;
 
−
overflow: hidden;
 
−
height: 45px;
 
−
font-size: 1.1em;
 
−
line-height: 21px;
 
−
}
 
−
.learn {
 
−
margin: 9% 0;
 
−
}
 
−
.learn a {
 
−
font-size: 15px;
 
−
}
 
−
.content-about-bottom-text p {
 
−
font-size: 18px;
 
−
}
 
−
.content-team span {
 
−
background: url(../images/edges.png);
 
−
position: absolute;
 
−
width: 200px;
 
−
height: 80px;
 
−
top: -43%;
 
−
right: 8%;
 
−
}
 
−
.content-team-text h2 ,.content-team-text small{
 
−
font-size: 33px;
 
−
}
 
−
.team-left-grid img {
 
−
width: 100%;
 
−
}
 
−
.team-left-grid h2 {
 
−
font-size: 17px;
 
−
}
 
−
.team-left-grid p {
 
−
font-size: 14px;
 
−
}
 
−
.team-icon-grid {
 
−
width: 86%;
 
−
}
 
−
.content-skills span {
 
−
background: url(../images/edges.png);
 
−
position: absolute;
 
−
width: 200px;
 
−
height: 80px;
 
−
top: -67%;
 
−
right: 12%;
 
−
}
 
−
.content-skills-text h2,.content-skills-text small{
 
−
font-size: 33px;
 
−
}
 
−
.progress-head h3 {
 
−
margin-top: 1em;
 
−
font-size: 15px;
 
−
}
 
−
.progress-head p.percent {
 
−
margin: 0.5em 1em 0em 0;
 
−
font-size:18px;
 
−
}
 
−
.content-services-bottom-text p.bottom-text {
 
−
font-size: 18px;
 
−
width: 93%;
 
−
}
 
−
.content-team span {
 
−
display: none;
 
−
}
 
−
.service-grid {
 
−
width: 50%;
 
−
font-size: 9px;
 
−
}
 
−
.service-grid p {
 
−
font-size: 1.5em;
 
−
}
 
−
.services-text p {
 
−
font-size: 13px;
 
−
overflow: hidden;
 
−
height: 21px;
 
−
}
 
−
.services-bottom-text p {
 
−
font-size: 0.9em;
 
−
}
 
−
.port-text span.folio {
 
−
background: url(../images/edges.png);
 
−
position: absolute;
 
−
width: 200px;
 
−
height: 80px;
 
−
top: -65%;
 
−
right: 10%;
 
−
}
 
−
.port-text h2,.port-text small{
 
−
font-size: 30px;
 
−
}
 
−
#filters li span.active, #filters li span {
 
−
font-size: 0.7em;
 
−
}
 
−
.tour-caption {
 
−
height: 62.17%;
 
−
}
 
−
.tour-caption span {
 
−
width: 25px;
 
−
top: 29%;
 
−
right: 32%;
 
−
}
 
−
.portfolio-wrapper p {
 
−
font-size: 0.8em;
 
−
}
 
−
.portfolio-wrapper h3 {
 
−
font-size: 11px;
 
−
}
 
−
.watchmore a {
 
−
font-size: 11px;
 
−
}
 
−
.content-Get-in-touch span.portfolio {
 
−
background: url(../images/edges.png);
 
−
position: absolute;
 
−
width:200px;
 
−
height: 80px;
 
−
top: -51%;
 
−
right: 9%;
 
−
}
 
−
.Get-in-touch-text h2,.Get-in-touch-text small{
 
−
font-size: 27px;
 
−
margin-top:20%;
 
−
}
 
−
.email a {
 
−
font-size: 12px;
 
−
}
 
−
.Get-in-touch p {
 
−
font-size: 13px;
 
−
margin-top: 13%;
 
−
}
 
−
.Get-in-touch h4 {
 
−
line-height:20px;
 
−
font-size: 13px;
 
−
}
 
−
.Get-in-touch span,.Get-in-touch small {
 
−
font-size: 13px;
 
−
}
 
 
}
 
}

Latest revision as of 01:57, 18 October 2018

  •  ::selection {
   background:#666; 
   color:#DDD;

}

  •  ::-webkit-scrollbar {
   width: 8px;

}

  •  ::-webkit-scrollbar-thumb {
   background:rgba(10,10,10,0.4);

} img { 

   user-select:none;

}

body{ 

   min-width:1200px;

margin:0; padding:0; font-family: 'Open Sans', sans-serif; background:#fff; 

   animation: animate 0.7s infinite;
   overflow-x: hidden;

} body.page-Team_Tsinghua-A{ 

   background: #fff;

} @keyframes animate{ 

   0%    { cursor: url("T--Tsinghua-A--mouseDNA1.png") 2 2, auto; }
   12.5% { cursor: url("T--Tsinghua-A--mouseDNA2.png") 2 2, auto; }
   25%   { cursor: url("T--Tsinghua-A--mouseDNA3.png") 2 2, auto; }
   37.5% { cursor: url("T--Tsinghua-A--mouseDNA4.png") 2 2, auto; }
   50%   { cursor: url("T--Tsinghua-A--mouseDNA5.png") 2 2, auto; }
   62.5% { cursor: url("T--Tsinghua-A--mouseDNA6.png") 2 2, auto; }
   75%   { cursor: url("T--Tsinghua-A--mouseDNA7.png") 2 2, auto; }
   87.5% { cursor: url("T--Tsinghua-A--mouseDNA8.png") 2 2, auto; }
   100%  { cursor: url("T--Tsinghua-A--mouseDNA1.png") 2 2, auto; }

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } body a:hover{ text-decoration:none; color:0; } p{ margin:0; } ul{ margin:0; padding:0; } .container { padding:0; margin:0; width: 90% }

/*--- header-top ----*/ .header-logo{ text-align:center; margin: 5em 0 2.5em 0; } .header-top { background:url(T--Tsinghua-A--BackgroundZ.jpg) no-repeat 0px 0px; 

   background-position:center;

background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; } .header-text { text-align:center; margin-top: 3%; } .header-text h1 { color:#FFFFFF; font-family: 'Open Sans', sans-serif; letter-spacing:2px; font-size:60px; } .header-text span { color:#9F449B; font-size:60px; } .header-sub-text { text-align:center; margin-bottom: 7%; } .header-sub-text h2 { font-family: 'Lato', sans-serif; font-weight:300; color:#FFFFFF; font-size: 60px; } .header-sub-text h3{ font-family: 'Lato', sans-serif; font-weight:300; color:#5bf2f9; font-size: 40px; } .header-sub-text p { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 21px; color: rgba(255, 255, 255, 0.79); margin-top: 0.8em; } .header-sub-text small { display:block; } .header-top-grids { text-align:center; width: 48%; margin: 0 auto; } .grid-left { text-align:center; } .grid-right { text-align:center; }


/*--- sicky Nav---*/ /*---- Fixed Navigation ----*/ ul.dropdown-menu{ 

   border-top-width:0;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; 

   opacity:0;
   display:block;
   visibility:hidden;

} li.dropdown:hover > ul.dropdown-menu, .dropdown-menu:hover{ 

   visibility:visible;
   opacity:1;

} ul.dropdown-menu li{ 

   font-size:1.2em;
   text-transform:uppercase;
   text-align:left;

}

div.top-nav .logo{ float:left; 

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

} div.top-nav .logo img.nav-logo{ 

   height: 60px;

} div.top-nav{ 

   height: 84.42px;

} .top-nav nav{ 

   background-color:#fff;
   height:80px;

} .top-nav ul{ 

   /*height:80px;*/

margin:0; padding:0; text-align:center; 

   background-color:#fff;

} .top-nav > nav > ul > li{ display:inline-block; 

   line-height:80px;

} .top-nav > nav > ul > li > a{ padding:0 1.5em 0 0; display:block; text-decoration:none; color:#333; font-weight:400; font-size:18px; transition:0.5s ease; text-transform:uppercase; } .top-nav > nav > ul > li.active > a{ color:#9F449B; } .top-nav > nav > ul > li > a:hover, .dropdown-menu:hover + a { color:#9F449B; 

   text-decoration:underline;
   font-size: 24px;

transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .fixed{ position: fixed; top: 16px; width: 100%; margin: 0 auto; z-index: 1; } .fixed ul{ transition:.3s; 

   transition-property: box-shadow;
   box-shadow:
       0 4px 5px 0px rgba(0, 0, 0, 0.08),
       0 1px 10px 0px rgba(0, 0, 0, 0.04),
       0 2px 4px -1px rgba(0, 0, 0, 0.3);

} .fixed:hover ul{ 

   box-shadow:
       0 4px 5px 0 rgba(0, 0, 0, 0.14),
       0 1px 10px 0 rgba(0, 0, 0, 0.12),
       0 2px 4px -1px rgba(0, 0, 0, 0.4);

} .nav-palceholder{ margin:0 0 40px 0; } .about-nav, .about-nav1, .about-nav2, .about-nav3, .about-nav4, .about-nav5, .about-nav6, .about-nav label, .about-nav1 label, .about-nav2 label, .about-nav3 label, .about-nav4 label, .about-nav5 label, .about-nav6 label{ cursor:pointer; text-align: center; }

/*------ about-nav -----*/ .arrow-grid { width:10%; margin:0 auto; } .arrow a { width:120px; height:120px; margin-bottom: 25%; display:inline-block; background:url(T--Tsinghua-A--arrow.png) no-repeat 0px 0px; } .arrow a:hover { background:url(T--Tsinghua-A--arrow1.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; }

/* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { 

 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0; }

.row:after, .clearfix:after { 

 clear: both; }

.row, .clearfix { 

 zoom: 1; }

.clear { 

 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;

}

/*--- content--Get-in-touch ----*/ .Get-in-touch-text { position: relative; margin: 12% 0; } .Get-in-touch-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; } .Get-in-touch{ 

   text-align: center;
   width: 70%;
   margin: 0 auto 4%;

} ul.contact-info{ 

   color: #222222;
   font-family: 'Lato', sans-serif;
   margin: 8% 0;
   font-size: 21px;
   font-weight: 400;
   list-style-type: none;
   list-style-image: none;
   line-height: 1.6;

} ul.contact-info a#mailto{ 

   text-decoration: none;
   color: #3377aa;
   padding-right: 0;
   -ms-transition:     all 0.1s ease-out;
   -moz-transition:    all 0.1s ease-out;
   -webkit-transition: all 0.1s ease-out;
   -o-transition:      all 0.1s ease-out;
   transition:         all 0.1s ease-out;

} ul.contact-info a#mailto:hover{ 

   color: white;
   background-color: #3377aa;

} .content-Get-in-touch small { color: #9F449B; font-size: 45px; } .content-Get-in-touch span.portfolio { position: absolute; width: 369px; height: 114; top: -67%; right: 34%; } .Get-in-touch p { font-size:38px; 

   font-weight: 300;

color: #5D5D5D; font-family: 'Lato', sans-serif; } .Get-in-touch h4 { color: #222222; font-family: 'Lato', sans-serif; margin: 16% 0; font-size: 21px; font-weight: 700; } .Get-in-touch span { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; display: block; } .Get-in-touch small { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; } /*----- footer ----*/ .footer{ 

   text-align:center;
   padding: 60px 0 0;

} .footer img{ 

   margin: 40px 0 20px;

}

/*----- to-top ----*/

  1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 14px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("T--Tsinghua-A--to-top1.png") no-repeat 0px 0px; }

  1. toTopHover {

width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } p#abstract{ 

   font-size:1.7em;
   text-align:left;
   margin-top:80;

}