Team:ZJU-China/css/homedocstyle

body{

 width: 100%;

}

.page-loader {

 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 99999;
 background: #FFF url() center center no-repeat;

}

.page-loader-txt{

 position: fixed;
 text-align: center;
 top: 50%;
 font-size: 30px;

}

.timelineHead{

 text-align: center;

}

.CuteButton {

 /*position: relative;*/
   color: rgba(255,255,255,1);
   text-decoration: none;
   background-color: rgba(29,176,184,1);
   font-family: 'Tempus Sans ITC','Comic Sans MS',Georgia !important;
   font-weight: 700;
   font-size: 2.2em;
   display: inline;
   padding: 5px 20px 5px 20px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: 0px 9px 0px rgba(0,52,63,1), 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow: 0px 9px 0px rgba(0,52,63,1), 0px 9px 25px rgba(0,0,0,.7);
   box-shadow: 0px 9px 0px rgba(0,52,63,1), 0px 9px 25px rgba(0,0,0,.7);
   margin-left: 10px;
 width: 160px;
 text-align: center;
 
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 -ms-transition: all .1s ease;
 -o-transition: all .1s ease;
 transition: all .1s ease;

}

.CuteButton:active {

   -webkit-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
   -moz-box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
   box-shadow: 0px 3px 0px rgba(0,52,63,1), 0px 3px 6px rgba(0,0,0,.9);
   position: relative;
   top: 6px;

}

.YellowCB {

   background-color: rgba(254,196,62,1);
   -webkit-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);
   box-shadow: 0px 9px 0px rgba(245,253,202,1), 0px 9px 25px rgba(0,0,0,.7);

}

.GreenCB {

   background-color: rgba(25,148,117,1);
   -webkit-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);
   box-shadow: 0px 9px 0px rgba(4,77,34,1), 0px 9px 25px rgba(0,0,0,.7);

}

.SmallCB {

   font-size: 1.5em;
   margin-left: 2px;
   padding: 2px 10px ;
   width: 100px;

}

.ArticleHead{

 font-family: 'Tempus Sans ITC','Comic Sans MS',Georgia !important;
 font-size: 40px;
 font-weight: 800;
 color: #56A36C;
 text-align: center;

}

.H2Head{

 font-family: 'Tempus Sans ITC','Comic Sans MS',Georgia !important;
 font-size: 30px;
 font-weight: 300;
 color: #56A36C;
 text-align: left;

}

.H3Head{

 font-family: 'Tempus Sans ITC','Comic Sans MS',Georgia !important;
 font-size: 20px;
 font-weight: 100;
 color: #56A36C;
 text-align: left;
 padding-left: 20px;

}

.PP {

   font-family: Tahoma, Geneva, sans-serif !important;
   font-size: 16px !important;
   font-weight: 100 !important;
   text-align: center !important;

}

10.31HOME.html:263 h2,

.Retract{

 padding-left: 50px;

}

.GreenAH{

 color: #56A36C;

}

.YellowAH{

 color: #FEC43E;

}

.contentLi{

   margin:0;
   font-size:17px;
   line-height: 27px;
   padding-bottom: 20px;
   color: #111111;

}

.blueTable {

 color: #1E90FF;

}

.yellowTable {

 color: #CD9B1D;

}

body a:hover{ text-decoration:none; } input[type="submit"],input[type="reset"],a{ -webkit-transition: 0.5s ease-in;

   -moz-transition: 0.5s ease-in;
   -ms-transition: 0.5s ease-in;
   -o-transition: 0.5s ease-in;
   transition:0.5s ease-in;

} img{ width:100%; } .textimg{

 width:80%;
 margin-top: 20px;
 padding-bottom: 20px;
 text-align: center;

}

/*-- header --*/ .navbar-brand { /* padding: 0 0 0 0 ;

   margin: 0 0 0 0; */

}

img.navbar-brand {

}

/*.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {

   margin-left: 0px;

}*/ nav.navbar.navbar-default.navbar-fixed-top {

   background:rgba(0, 0, 0, 0.35);
   background: rgba(0, 0, 0, 0.1);
   border: none;
   padding: .6em 10em;

-webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all; } .navbar-default .navbar-nav > li > a {

   color: #fff;
   font-size: 1em;
   font-weight: 200;
   letter-spacing: 1px;

}

.dropdown-menu{

 background:rgba(25, 25, 25, 0.8);

}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {

   color: #FFFFFF !important;
   text-align: center !important;

} .navbar-default .navbar-nav .open .dropdown .dropdown-menu > li > a:hover {

    color: #0a0a0a;
   text-decoration: none;
   background-color: #11B563;
   color: #FFFFFF;

} .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {

   color: #fff;
   background-color: #11B563;

} .dropdown-menu > li > a {

   display: block;
   padding: 3px 20px;
   clear: both;
   text-align: left;
   color: #FFF;
   font-weight: 200;
   line-height: 1.42857143;
   white-space: nowrap;
   font-size: 1.1em;
   letter-spacing: 1px;

} .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

   color: #11B563;
   text-decoration: none;
   background-color: rgba(17,181,99, 0.8);
   outline: 0;

} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

   color: #11B563;
   text-decoration: none;
   background-color: rgba(17,181,99, 0.8);

} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

   color: #fff;
   background-color: #11b563;

} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

   color: #FFF;
   background-color: #11b563;

} .navbar-default .navbar-nav > li>a:hover {

   color: #fff;
   background: #11b563;

} nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse {

   padding: 1em 4em;
   background: rgba(25, 25, 25, 0.8);

} .navbar-nav > li > a {

   padding: 10px;

} /*-- //header --*/

/*-- menu-navigation --*/ .shy-menu{

 -moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
 -webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
 -o-transition: all .4s cubic-bezier(.1,.7,.3,1);
 -ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
 transition: all .4s cubic-bezier(.1,.7,.3,1);

}

.shy-menu-panel ul { text-align: center; } .shy-menu-panel ul li{

   display: inline-block;

} .shy-menu-panel ul li a{ color: #fff;

   text-decoration: none;
   display: block;
   text-transform: uppercase;

}

.shy-menu { display: block; background-color: rgba(33,40,44,.1); color: #fff;

   position: absolute;
   right: 0;

} .shy-menu-hamburger,.shy-menu { height: 35px; width: 35px; } .shy-menu.is-open{

 background-color:#262626;

}

.shy-menu.is-open {

   width: 100%;

} .w3_agileits_banner_main_grid,.shy-menu.is-open { height: 75px; }

.shy-menu-panel { margin-left: 0px; display: none; } .is-open .shy-menu-panel { margin-left: 0; display: block; width: 95%; }

/*** Hamburger ***/ .shy-menu-hamburger { position: relative;

   display: block;
   overflow: hidden;
   cursor: pointer;
   float: right;
   margin-top: 1.2em;

}

.shy-menu-hamburger > .layer {

 background-color: #fff;
 border-radius: 1px;
 display: block;
 height: 2px;
 overflow: hidden;
 position: absolute;
   left: 5px;
 width: 25px;

}

.shy-menu-hamburger .layer.top { top: 8px; } .is-open .shy-menu-hamburger .layer.top { margin-top: .58em; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .shy-menu-hamburger .layer.mid { top: 17px; } .is-open .shy-menu-hamburger .layer.mid { opacity: 0; left: 0; } .shy-menu-hamburger .layer.btm { top: 26px; } .is-open .shy-menu-hamburger .layer.btm { margin-top: -.58em; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } /*-- nav-effect --*/ .link-effect-8 a { margin: 0.8em 2.5em 0;

 padding: 1em;

position: relative;

 -moz-transition: ease-out 0.3s 0.1s;
 -o-transition: ease-out 0.3s 0.1s;
 -webkit-transition: ease-out 0.3s;
 -webkit-transition-delay: 0.1s;
 transition: ease-out 0.3s 0.1s;

} .link-effect-8 a::before {

 height: 2px;
 width: 100%;
 background: #797878;
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 visibility: hidden;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -webkit-transition: 0.3s;
 transition: 0.3s;
 color: #00343F;

} .link-effect-8 a::after {

 height: 2px;
 width: 100%;
 background: #797878;
 content: "";
 position: absolute;
 left: 0;
 top: 100%;
 visibility: hidden;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -webkit-transition: 0.3s;
 transition: 0.3s;

} .link-effect-8 a:hover::before,.w3layouts_menu__list li.active a::before {

 visibility: visible;
 top: 100%;
 background-color: #11b563;

} .link-effect-8 a:hover::after,.w3layouts_menu__list li.active a::after {

 visibility: visible;
 top: 0;
 background: white;

} /*-- //nav-effect --*/ .shy-menu-panel ul li.active a,.link-effect-8 a:hover{ color:#a4dd25; } .w3_banner_info {

   margin: 13em 0 0em;
   width: 450px;
   padding: 10px;

} .w3_banner_info_grid h2 {

   font-size: 3em;
   color: #ffffff;
   line-height: 1.1em;
   text-transform: uppercase;
   font-weight: 900;
   text-shadow: 3px 3px #146eb4;

} .w3_banner_info_grid h5 {

   font-size: 20px;
   margin: 10px 0;
   letter-spacing: 1px;
   color: #000;

} .w3_banner_info_grid ul li{ display:inline-block; font-size:1em; } .w3_banner_info_grid ul li a{ padding:9px 30px; text-decoration:none; color:#212121; } .w3l_contact, .w3ls_more:hover {

   border: 2px solid #fff;
   color: #ffffff !important;
   background: none;

} .w3ls_more, .w3l_contact:hover {

   border: 2px solid #11b563;
   background: #11b563;
   color: #555555 !important;

} .w3ls_more:focus{ outline:none; } span.char3 {

   text-transform: initial;

} .w3_banner_info_grid p {

   margin: 1.5em 0 3em;
   color: #000;
   line-height: 28px;
   letter-spacing: 1px;
   font-size: 14px;

} /*-- button-effect --*/ .thim-click-to-bottom {

   position: absolute;
   bottom: 7%;
   left: 50%;
   width: 40px;
   height: 40px;
   font-size: 40px;
   line-height: 40px;
   -webkit-animation: bounce 2s infinite ease-in-out;

} .thim-click-to-bottom i {

   color: #fff;
   padding: 15px 12px;
   border: 2px solid #fff;
   border-radius: 10px;
   font-size: 16px;

} @-webkit-keyframes bounce { 0%, 20%, 60%, 100% { -ms-transform: translateY(0); } 0%, 20%, 60%, 100% { -o-transform: translateY(0); } 0%, 20%, 60%, 100% { -moz-transform: translateY(0); } 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); }

   40%  { -webkit-transform: translateY(-20px); }

80% { -webkit-transform: translateY(-10px); } }

/* Responsive design */ @media screen and (max-width: 1920px){ .education-agile-w3l-year { padding: 3.75em 2em; } i.fa.fa-hourglass-end { margin-top: 1.6em; } } @media screen and (max-width: 1366px){

   nav.navbar.navbar-default.navbar-fixed-top {
       padding: .6em 3em;
   }
   nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse {
       padding: 1em 4em;
   }

.banner,.agileinfo-dot { /*min-height: 650px;*/ } .w3_banner_info { margin: 11em 0 0em; } .about-left h3 { width: 20%; font-size: 40px; margin-bottom: 30px; } .education-agile-w3l-year { padding: 5.5em 1em; } .skills, .contact, .education, .portfolio { padding: 4em 0; }

 .about{
   padding: 0 0;
 }

}

@media screen and (max-width: 1080px){ nav.navbar.navbar-default.navbar-fixed-top { padding: .6em 2em; } nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse { padding: 1em 4em; } }

@media screen and (max-width: 900px){ nav.navbar.navbar-default.navbar-fixed-top { padding: .6em 2em; } nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse { padding: 1em 3em; } } @media screen and (max-width: 800px){ .navbar-default .navbar-nav > li > a { letter-spacing: 0px; } nav.navbar.navbar-default.navbar-fixed-top { padding: .6em 2em; } nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse { padding: 1em 3em; } .gallery-top figure.effect-bubba h4 { padding-top: 6%; font-size: 20px; }

} @media screen and (max-width: 768px){ nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse { padding: 1em 2em; } h1 a.navbar-brand { font-size: 32px; } .education-agile-w3l-year { padding: 4.65em 2em; } } @media screen and (max-width: 736px){ .navbar-default .navbar-nav > li > a { text-align: center; } .navbar-default .navbar-toggle { border-color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle { border-radius: 0px; background: #11b563; margin-right: 0; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000; } nav.navbar.navbar-default.navbar-fixed-top { padding: .3em 2em 0; } nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse { padding: .6em 2em; } }

@media screen and (max-width: 600px){ .education-agile-w3l-year { padding: 4.6em 1em; } .portfolio h4 { margin: 20px 0; } .w3_banner_info { margin: 6em 0 0em; } .banner, .agileinfo-dot { min-height: 510px; } }

@media screen and (max-width: 384px){ nav.navbar.navbar-default.navbar-fixed-top { padding: .3em 1em 0; } }