View source for Template:HKJS S/css/TeamPage

.extra_space{
 display:none;
}
body, html {
    height: 100%;
    margin: 0px;
}

div.thumbinner {
        border: 1px solid #cccccc;
        padding: 0px ;
        background-color: transparent;
        text-align: center;
        overflow: hidden
    }
.main_photo{
background-image: url("https://static.igem.org/mediawiki/2018/a/a9/T--HKJS_S--TeamGroupPhoto.png");
	background-repeat:no-repeat;
        height: 100vh;
        width: 80%;
       margin-left: 15%;
	background-position: center;
	background-size: contain;
        text-align: center;


}
/*body{
background-image: url("https://static.igem.org/mediawiki/2018/1/1f/T--HKJS_S--black.png");
	background-repeat:no-repeat;
	height: 100vh;
        width: 100%;
	background-position: center;
	background-size: cover;
        text-align: center;


}*/
#div_body{
        width: 100%;
         margin-left: 0px;
        margin-right: 0px;
        height:100vh;
        position: relative;
        color: transparent;
}
#content , #bodyContent, .igem_2018_team_content, .igem_2018_column_wrapper, #mw-content-text{
      height:100%
      background: none;
      background-color: transparent;
      width: 100%;
      margin: 0px;
      margin-left: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      padding: 0px 0px 0px 0px;
}
.top{
position: relative;
top: 10%;
width: 60%;
margin: auto;
}
.bottom{
position: relative;
top: 85vh;
width: 50%;
margin: auto;
}
.whole{
width:80%;
padding: 5px;
margin-left: 17%;
margin-right: 2px;
}
.wrap {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem
}
.img {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}
.wrap > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.wrap > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.wrap_text {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem
}
.text:last-child {
    margin-bottom: 0
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
}

.row .wrap {
    margin-bottom: 15px
}

@media (min-width:576px) {
    .row {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px
    }

    .row .wrap {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px
    }
}
.title{
margin-left: 5%;
margin-top: 20px;
margin-bottom: 20px;
}

.card-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.card-group > .card {
    margin-bottom: 15px
}

@media (min-width:576px) {
    .card-group {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

    .card-group > .card {
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        margin-bottom: 0
    }

    .card-group > .card + .card {
        margin-left: 0;
        border-left: 0
    }

    .card-group > .card:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top {
        border-top-right-radius: 0
    }

    .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom {
        border-bottom-right-radius: 0
    }

    .card-group > .card:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top {
        border-top-left-radius: 0
    }

    .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom {
        border-bottom-left-radius: 0
    }

    .card-group > .card:only-child {
        border-radius: .25rem
    }

    .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top {
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem
    }

    .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom {
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem
    }

    .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
        border-radius: 0
    }

    .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer,
    .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
    .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
    .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top {
        border-radius: 0
    }
}

.card-columns .wrap {
    margin-bottom: .75rem
}

@media (min-width:576px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1
    }

    .card-columns .wrap {
        display: inline-block;
        width: 100%
    }
}