body{
    line-height: 2;
    background-image:url("https://static.igem.wiki/teams/4195/wiki/background/sub-background.png")!important;
    background-color: #d2f2ef !important;
    font-weight: 540 !important;
    word-spacing:5px;
}
.h4{
    font-family:'Times New Roman','cursive';
    margin:70px 0 !important;
    font-weight:bold !important;
}
.widget-box {
    font-family:'Harding','cursive';
    line-height: 1.75;
    text-align:justify!important;
    display: block;
    padding: 40px;
    margin-top:0px;
    margin-bottom: 0px;
    border-radius: 6px;
}
#special-box{
    margin-top: 20%;
    margin-bottom: 35%;
}
@media (max-width: 768px){
    #special-box{
        margin-top: 65%;
        margin-bottom: 100%;
    }
}

.search-widget .form-control {
    margin-bottom: 8px;
    background-color: #F6F5FC;
    border-color: transparent;
    box-shadow: none !important;
}

.search-widget .form-control:focus {
    border-color: #dee1e6;
}

.search-widget .btn {
    text-transform: uppercase;
}

.categories {
    position: relative;
    list-style: none;
    padding: 12px;
    margin:30px 0 !important;
    font-size:21px;

}

.categories li a {
    display: block;
    padding: 6px;
    color: #a4a1c8;
    transition: all .2s ease;
}

.categories li a:hover {
    color: #6C55F9;
    text-decoration: none;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(107, 85, 249, 0.5);
}

.magic-box li{
    border-bottom:2px solid #523434;
    padding-top:2px;
    padding-bottom: 2px;
}

.widget-title {
    font-family: 'Optima';
    color: #ed6335;
    font-size: 2.4rem;
    margin-top: 40px;
}
@media(max-width: 500px) {
    .widget-title{
        font-size: 2rem;
    }
}

.divider {
    background-color: #ed6335;
    height: 0.12rem;
    width: auto;
    margin-top: 15px;
}

.nav-tabs{
    font-family: 'Optima-Medium', cursive!important;
    font-size: 22px;
}

#myScrollspy{
    margin-left: 10%;
    top:0 !important;
    right: 290px;
    position:fixed !important;
    z-index:10;
}

#mytitle{
    margin-top: 88px;
    background-image:url("https://static.igem.wiki/teams/4195/wiki/background/buttom.png")!important;
    border: 4px solid #523434;
}

a{
    color: brown;
}

.dropdown-wrapper .dropdown-menu ul li a:hover{
    color:  #92B1C3;
    text-decoration: none !important;
}

.magic-box li a:hover{
    color:  floralwhite !important;
}


#bigtitle{
    top: 0px!important;
    width: 170px;
    height: 470px;
    background-image:url("https://static.igem.wiki/teams/4195/wiki/background/magic-bar.png")!important;
    background-size:100% 100%;
    background-repeat:no-repeat;
    margin-left:70px;
    margin-top: 0!important;
    box-shadow:none;
    padding:88px 12px 0px 20px;
    position:absolute !important;
    opacity: 0;
    text-align: center;
}

.un-show{
    opacity: 0 !important;
    pointer-events: none;
}

.magic-box {
    display: block;
    padding: 20px 20px 20px 10px;
    margin-bottom: 32px;
    border-radius: 6px;
    border: 1px solid #EDECF5;
    box-shadow: 0 3px 9px rgba(100, 95, 136, 0.15);
}

/*navbar-color*/

.navbar-float {
    position: absolute;
    top: 16px;
    left: 0;
    width: 100%;
    background-color:white;
    box-shadow: 0 2px 6px rgba(100, 95, 136, 0.15);
    z-index: 1070;
}

.bar-container .dropdown-wrapper button:hover{
    color:#92B1C3;
}

.dropdown-wrapper button.active {
    color: #92B1C3;
}
.icon-color{
    color:#92B1C3 !important;
}

.dropdown-wrapper .dropdown-menu ul li a:hover {
    background:  #ECF6FA;
    border-radius: 15px;
}


.dropdown-wrapper .dropdown-menu.one:before, .dropdown-wrapper .dropdown-menu.one:after {
    left: 32.5%;
}
.dropdown-wrapper .dropdown-menu.two:before, .dropdown-wrapper .dropdown-menu.two:after {
    left: 43.5%;
}
.dropdown-wrapper .dropdown-menu.twoplus:before, .dropdown-wrapper .dropdown-menu.twoplus:after {
    left: 63%;
}
.dropdown-wrapper .dropdown-menu.three:before, .dropdown-wrapper .dropdown-menu.three:after {
    left: 46%;
}
.dropdown-wrapper .dropdown-menu.four:before, .dropdown-wrapper .dropdown-menu.four:after {
    left: 61%;
}
.dropdown-wrapper .dropdown-menu.five:before, .dropdown-wrapper .dropdown-menu.five:after {
    left: 80.5%;
}


/*子页第一面*/

#sub-titile{
    z-index: 10;
    text-shadow: 0 0 0.5em lightgrey, 0 0 0.2em #5c5c5c;
}

/*footer*/
.container-fluid img{
    max-width: 100px;
    max-height: 100px;
}
.item.wow.zoomIn{
    max-width: 150px;
}

/*配图*/
.illustration img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    max-width: 500px;
    width: 100%;
    width: -moz-available;
}

.illustration .pic-description{
    font-size:large;
    text-align:center;
    margin-top: 20px;
    margin-right: 80px;
    margin-left: 80px;
    line-height: 1.5;
}
.illustration .pic-description p{
    font-size:large;
    text-align:center;
    margin-top: 10px;
    line-height: 1.5;
    margin-bottom: 0!important;
}
.p{
    color: black !important;
}
::selection {
    background-color: #5EB9B6;
    color: white;
}

/* scrollbar design */
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:8px;
    height:100%;
    background-color:#F5F5F5;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    background-color:#F5F5F5;
}
/*定义滑块*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-image:-webkit-gradient(linear,
    40% 0%,
    75% 84%,
    from(#E9FDFC),
    to(#BDF1EF),
    color-stop(.8,#BDF1EF));
}

@media(max-width: 500px) {
    .widget-box{
        padding: 10px !important;
    }
    .categories , .reference{
        font-size: 18px !important;
    }
}
@media(min-width: 1000px) {
    .headline--sail{
        font-size: 120px;
    }
}

@media(max-width: 1100px) {
    #bigtitle{
        display: none;
    }
}
.home-banner{
    margin-bottom: 22px;
    background-attachment:fixed;
    background-size:auto 120%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    background-position: center;
}
.home-banner .container .row .col-lg-12{
    margin-top: 100px;
}

.page-banner {
    position: relative;
    margin-bottom: 16px;
    height: 320px;
    color: black;
    border-radius: 30px;
}

.page-banner.home-banner {
    border-radius: 0;
}

@media (min-width: 768px) {
    .page-banner.home-banner {
        /*margin-top: 0;*/
    }
    .wrapper{
        height: 100% !important;
    }
}

@media(max-width: 1367px) {
    .home-banner{
        height: 90vh;
        background-size: auto 100%;
    }
    .home-banner .container .row .col-lg-12{
        /*margin-top: 300px;*/
        zoom: 0.9;
    }
}
@media(max-width: 1000px) {
    .home-banner{
        height: 90vh;
        background-size: auto 100%;
    }
    .home-banner .container .row .col-lg-12{
        /*margin-top: 100px;*/
        zoom: 0.8;
    }
}

.split-word{
    padding-top:25px;
    padding-bottom:25px;
    line-height:1.5;
}

.dropdown-wrapper button{
    background: transparent;
}


.nav-btn button {
    height: 50px;
    width: 90px;
    background-repeat: no-repeat !important;
    background-size: 50px 50px !important;
    background-position-x:center !important;
    margin-top: 20px;
}

.team-btn button {
    padding: 58px 20px 20px 20px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/team.png");
}
.project-btn button {
    padding: 58px 20px 20px 16px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/project.png");
}
.hardware-btn button {
    padding: 58px 20px 20px 5px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/hardware.png");
}
.parts-btn button {
    padding: 58px 20px 20px 16px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/parts.png");
}
.hp-btn button {
    padding: 58px 20px 20px 16px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/hp.png");
}
.awards-btn button {
    padding: 58px 20px 20px 16px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/mother-blue/awards.png");
}

/*首页的插图*/
.home-banner img {
    max-width: 100%;
    min-width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    z-index: -1;
    object-fit: cover;
}

.home-banner .container {
    min-width:100%;
    position:absolute;
    top:0;
    text-align: center;
    display: block;
}

@media(max-width:1400px) and (min-width:1300px) {
    .page-banner .container .row .col-lg-12 {
        position: absolute;
        top: 50%;
    }
    .home-banner .container .row .col-lg-12{
        margin-top: 0;
    }
}

.reference {
    color: #9B3811;
    font-size:20px;
    padding-left: 0px;
}

.widget:first-child{
    margin-top: 10vh !important;
}

.after-active{
    background: url("https://static.igem.wiki/teams/4195/wiki/background/mark.png");
    background-size: 100% 100%;
    width: 50px;
    height:40px;
}

.a-people{
    color: lightcoral;
    margin-right: 10px;
}

.a-people:before {
    margin-right:15px;
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/sub-coral/chat-right-text.svg");
    background-size: 100% 100%;
}


.a-result:before {
    margin-right:15px;
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    background: url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/sub-organe/pencil-square.svg");
    background-size: 100% 100%;
}


.page-banner {
    max-height: 100vh;
}

/*好多级标题啊！*/
/*第五级*/
.title-fourth{
    margin-top: 30px;
    color: #026c80;
    font-size: 25px;
}
.five-title{
    margin-top: 30px;
    font-size: 21px;
    color: #064c72;
}
.five-title:before{
    content: "";
    background:url("https://static.igem.wiki/teams/4195/wiki/navbar-icon/sub-coral/bookmark.svg");
    margin-right:15px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
}

/*书签响应式*/

@media(max-width: 1300px) and (min-width: 1200px) {
        #bigtitle{
            transform: scale(0.75);
        }
}