@import url('https://fonts.googleapis.com/css?family=DM+Sans|Lexend+Exa|Quattrocento+Sans|Montserrat|Quicksand|Lato|Varela+Round&display=swap');

body {
    font-family: "Quicksand", sans-serif;
}

/*** GENERAL STYLES ***/

.container {
    margin-bottom: 3em;
}


.parallax-container {
    margin-top: 3em;
}

.navbar-brand,
.navbar-nav a {
    color: #186ded;
    font-size: large;
    font-family: "Lexend Exa", sans-serif;
}



.anchor::before {
    display: block;
    content: " ";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
    pointer-events: none;
}



/*** NEW BANNER ***/

.parallax {
    background-image: url("../images/banner.jpg"); /* image src */
    min-height: 200px;
    background-attachment: scroll;
    
}

.parallax-crop {
    background-image: url("../images/banner.jpg"); /* image src */
    min-height: 300px; /* set height */
    background-attachment: fixed; /* create parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

.parallax-thin {
    background-image: url("../images/banner.jpg"); /* image src */
    min-height: 100px; /* set height */
    background-attachment: fixed; /* create parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

.parallax-photosbanner {
    background-image: url("../images/photos-banner.png");
    min-height: 400px;
    background-attachment: fixed; /* create parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0;
    width: 100%;
}


#banner {
    width: 100%; }


    .banner__text {
        font-size: 0.5em;
        font-family: "Lexend Exa", sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: left;
        color: rgb(255, 255, 255);
      

    }

    .banner__text__heading {
        
        color: #76fefe;
        font-size: 3em;
       
    }
    
    .banner__text p {
        margin: 0; }
    
        .btn {
            display: inline-block;
            font-family: "Quicksand", sans-serif; 
        }
        
    

/*** NAVBAR ***/

.navbar .nav a {
    font-size: 1.8em;
}

/*** TEXT FORMATTING ***/

h1 {
    color: #000;
    font-weight: bold;
    padding-top: 1em;
    padding-bottom: 1em;
}

h2 {
    color: #1db6f2;
    font-size:  xx-large;
    text-align: left;
    padding-top: 2em;
    padding-bottom: 1em;
    font-family: "Lexend Exa", sans-serif;
}

h3 {
    color: #08348c;
    font-weight: bold;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Lexend Exa", serif;
}

h4 {
    color: #147dd9;
    font-weight: bold;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 15px;
    font-family: "Lexend Exa", serif;
}
h5 {
    color: #261754;
    font-size: medium;
    font-weight: normal;
    text-align: left;
    font-family: "Lexend Exa", serif;
}

.h-space {
    padding-top: 2em;
}

.centred {
    text-align: center
}




/*** INDEX PAGE ***/

div.twitter-scroll {
    height: 20em;
    overflow: scroll;
    padding-bottom: 10em;
}

.btn-apply {
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background-color: #e71bac;
    font-size: 16px;
    padding: 10px 20px;
    margin: 4px 2px;
    text-align: center;
    display: inline-block;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

}
.container .btn_apply:hover {background-color: #e71bac;}
.btn_apply:hover {background: #e71bac;}

.eventsbanner {
    background-color: #daf7f9;
    width: 100%;
    padding-bottom: 3em;
}

/*** SLIDESHOW ***/

.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}


.w3-bar .w3-button{white-space:normal}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}





/*** FOOTER ***/

footer {
    background-color: #08348c;
    text-align: center;
    width: 100%;
}

.footer-heading {
    color: white;
    font-size: large;
    text-transform: uppercase;
    text-align: center;
    font-family: "Lexend Exa", serif;
}

.footer-text {
    color: #cccccc;
    font-size: small;
    text-align: center;
}

.footer-links a {
    color: #27def2;
    font-size: small;
    text-align: center;
}

.affiliate_link {
    color: #76fefe;
}



.footer-copyright {
    color: #cccccc;
    background-color: #1db6f2;
    padding: 10px;
}

.fa {
    padding: 15px;
    font-size: 30px;
    width: 60px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-youtube-play {
    background: #69abee;
    color: white;
}


/*** FACULTY/PEOPLE PAGES ***/

.group_avatar {
    padding: 10px;
}

.group_desc {
    padding: 10px;
}

.button-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.button-container img {
    width: 100%;
    height: auto;
}

.member-cards-center {
    text-align: center;
    padding: 20px;
}

.member-cards-left {
    padding: 10px;
    text-align: center;
}

.faculty-name {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.university-name {
    margin-bottom: 0;
    font-style: italic;
}

.professorship {

}

.trainee-name {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.trainee-info {
    margin-bottom: 0.2em;
}

.trainee-group {
    margin-bottom: 0.2em;
    font-style: italic;
}

.trainee-contact {

}

.wis-name {
    font-weight: bold;
    margin-bottom: 0.5em;
}



.wis-bio {
    padding: 20px;
}

.member-cards-line {
    width: 65%;
    align: center;
    size: 2px;
    color: darkcyan;
}

.portrait {
    display: block;
    width: 12em;
    height: auto;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid #147dd9;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.portrait {
    display: block;
    width: 12em;
    height: auto;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}




/*** PROGRAM ***/

.overview_image {
    padding-bottom: 2em;
}

#overview_image {
    width: 80%;
    display: block;
    margin: auto;
}


/*** @MEDIA QUERIES ***/

@media screen and (min-width: 768px) {

    .parallax {
        min-height: 850px; /* set height */
        background-attachment: fixed; /* create parallax effect */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
 
        margin: 0;
    }

    .banner__text {
        padding: 8em 8em;
        font-size: 2.5em;
        font-family: "Lexend Exa", sans-serif;
        text-transform: uppercase;
        text-align: left;
        letter-spacing: 0.05em;
        color: white;
        margin: 0 auto 1em;
        
    
    }

    .member-cards-left {
        text-align: left;
        padding: 10px;
    }
}