/**********************
Website: bryanrbzdek.com
Author: Aleksandra Marsh
**********************/

/**********************
Contents of bzdek.css
0.Fonts and color Pallete
1.Universal Styling
2.Header and Footer Styling
3.Navigation Bar Styling
4.index.html Layout and Styling
5.research.html Layout and Styling
6.publications.html Layout and Styling
7.contact.html Layout and Styling
8.opportunites.html Layout and Styling
**********************/

/**********************
0.Fonts and color Pallete
Font Selection
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway" rel="stylesheet">
font-family: 'Montserrat', sans-serif; font-weight: 400 or 700
font-family: 'Raleway', sans-serif;

Color Pallete
#fffbf4 - light yellow (Background colour)
#f9db9d - pale yellow (active on navbar)
#FFC857 - medium yellow (jumbotron background)
#FFC857 - yellow (footer and popovers)
#7DBFDB - medium blue (links hover colour)
#022968 - dark blue (all fonts)
**********************/

/**********************
1. Universal Styling All html Body: font and heading styles
**********************/
html{
    background-color: #fffbf4;
}

body{
    font-family: Montserrat, verdana, san-serif;
    display: block;
    margin: 0px auto;
    width: 100%;
    background-color: #fffbf4;
}

.container {
    max-width: 90em;
}

/*All Heading Styles NOTE h1 reserved for nav bar*/

h2{
	margin: 0.5em;
    padding: 0.1em;
    font-size: 1.7em;
    font-weight: 700;
    border-bottom: 0.1em solid #0E4D8C;
    text-align: center;
    color:#022968;
    clear: both;
}

h3{
	margin: 0.5em;
    padding: 0.5em;
    border-bottom: 0.1em solid #022968;
	color:#022968;
    font-size: 1.4em;
    font-weight: 700;
}

h4{
    font-size: 1.3em;
    margin: 0.5em;
    padding: 0.5em;
    font-weight: 700;
    color: #022968;
}

h5{
	margin: 0.5em;
    padding: 0.1em;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    color:#022968;
    clear: both;
}

h6{
    font-size: 1.2em;
    text-align: center;
    color: #022968;
}

p{
    font-size: 1.1em;
    margin: 0.5em;
    padding: 0.5em;
    color: #022968;
    line-height: 1.5em
}


/**********************
2.Header and Footer Styling
**********************/

footer{
	margin-top: 1em;
    padding: 0.5em;
    text-align: center;
	clear:both;
	background-color: #022968;
    color: #022968;
    height: auto;
}

#uob-logo{
    width: 250px;
    padding: 3px;
    border:solid 5px #F7FDFF;
    background-color:#F7FDFF;
}

footer a{
    text-decoration: none;
	color: #022968;
    padding: 0.2em;
    padding-right: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5em
}

footer a.touch{
    border: solid 5px #F7FDFF;
    font-size: 1.2em;
    font-weight: 400;
    padding-left: 10px;
    color: #FFC857;
    text-decoration: none;
}

footer a:hover{
    background-color: #FFC857;
    color: #022968;
    border: solid 5px #F7FDFF;
    text-decoration: none;
    font-weight: 700;
}



.aleks{
    color: #FFC857;
    font-size: 1em;
}

a.aleks{
    text-decoration: none;
}

a.aleks:visited{
    color:#6d97db;
}

/*Link color and functionality all pages*/

li a{
    text-decoration: none;
	color: #022968;
    padding: 0.2em;
    padding-right: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5em
}

a.event:hover {
    text-decoration: underline;
}

a:visited {
    color: #022968;
}

/**********************
3.Navigation Bar Styling
**********************/
nav.navbar{
    background-color: #022968;
}

h1.navbar-brand{
    font-size: 1.7em;
    font-weight: 700;
    padding: 0em;
    margin: 0.1em;
}
a.nav-item{
    font-size: 1.2em;
    color:#F7FDFF!important;
}

a.nav-item:hover {
    color: #FFC857!important;
}

a.active {
    color: #f9db9d!important;
}

a.nav-item:visited {
    color: #F7FDFF;
}

/**********************
4.index.html Layout and Styling
**********************/

/*Intro Section*/

.jumbotron{
    background-color: #ffdb91;
}

p.welcome-text{
    font-size: 1.5em;
    text-align: center;
}

@media only screen and (max-width: 500px){

nav.navbar{
    background-color: #022968;
}

h1.navbar-brand{
    font-size: 1.3em;
    font-weight: 400;
    padding: 0em;
    margin: 0.1em
}

.nav-item{
    font-size: 1em;
}

p.welcome-text{
    font-size: 1.2em;
    text-align: center;
}

h2{
	margin: 0.5em;
    padding: 0.1em;
    font-size: 1.3em;
    font-weight: 700;
    border-bottom: 0.1em solid #0E4D8C;
    text-align: center;
    color:#022968;
    clear: both;
}

h3{
	margin: 0.5em;
    padding: 0.5em;
    border-bottom: 0.1em solid #022968;
	color:#022968;
    font-size: 1.2em;
    font-weight: 700;
}

h5{
	margin: 0.5em;
    padding: 0.1em;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    color:#022968;
    clear: both;
}

h6{
    font-size: 1em;
    text-align: center;
    color: #022968;
}

}

@media only screen and (max-width: 400px){

h1.navbar-brand{
    font-size: 1.1em;
    font-weight: 400;
    padding: 0em;
    margin: 0.1em
}
span.navbar-toggler-icon {
        height: 20px;
        width: 20px;
    }

}

@media only screen and (max-width: 320px){

h1.navbar-brand{
    font-size: 1em;
    font-weight: 400;
    padding: 0em;
    margin: 0.1em
}

}

/*index.html Group News Formatting*/

.date{
    font-size: 1.2em;
    text-align: center;
    font-weight: 700;
    font: #022968;
}

.news{
    line-height: 2em;
    font-family: Raleway, verdana;
    text-align: justify;
    font-size: 1.1em;
    color: #022968;
}

a.news-link{
    text-decoration: underline;
    color: #022968;
}

a.news-link:hover{
    color:#7DBFDB;
}


img#cover{
    width: 20%;
}

img.news-photo{
    width: 200px;
    border-radius: 50%
}

img.links_image_nerc_115{
    width: 115px;
}

img#gw4{
    width: 200px;
}

/* index.html Upcoming Events formatting*/
ul.upcoming{
    list-style-type: none;
    line-height: 2em;
    text-align: center;
    font-size: 1.3em;
    padding-right: 2em;
}

li.event{
    list-style-type: none;
    padding: 0.2em;
    margin: 0.1em;
    width:100%
}

a.event:hover{
    color: #022968;
}
/*index.html formatting of Useful Links*/

img#links_image_aerosol_society{
    width: 160px;
}

img#links_image_aar{
    width: 250px;
}

img#links_image_nerc{
    width: 200px;
}

/*index.html MEDIA QUERY*/

@media only screen and (max-width: 1449px){

.date{
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    color: #022968;
}

.news{
    line-height: 2em;
    font-family: Raleway, verdana;
    text-align: justify;
    font-size: 1em;
}

img#links_image_aerosol_society{
    width: 160px;
}

img#links_image_aar{
    width: 250px;
}

img#links_image_nerc{
    width: 200px;
}

ul.upcoming{
    list-style-type: none;
    line-height: 2em;
    text-align: center;
    font-size: 1em;
    padding-right: 2em;
}

li.event{
    list-style-type: none;
    padding: 0.2em;
    margin: 0.1em;
    width:100%
}
    }
@media only screen and (max-width: 500px){

    .display-3{
        font-size: 2em;
    }

    .jumbotron{
    background-color: #ffdb91;
}

    p.welcome-text{
    font-size: 1em;
    text-align: center;
}

    }

/**********************
5.research.html Layout and Styling
**********************/

p.research{
    font-size: 1.2em;
    list-style-type: none;
    color: #022968;
    text-align: center;
    line-height: 2em;
}

ul#recent-collaborators{
    list-style-type: none;
    line-height: 2em;
    text-align: center;
    font-size: 1.2em;
    font-family: Raleway, verdana, arial;
}

li.collaborators{
    display:inline-block;
    color: #022968;
    padding: 1%;
    margin: 1.5%;
    border: solid 3px #022968;
}

a.collaborators{
    text-decoration: none;
}

li.collaborators:hover{
    color: #FFC857;
    background-color: #022968;
}

img.research-1{
    padding: 2em;
    width: 55%;
}

img.research-2{
    padding: 2em;
    width: 70%;
}

a.collaborators:hover{
    color: #FFC857;
}



/*Responsive research.html */

@media only screen and (max-width: 1000px){

p.research{
    font-size: 1em;
    color: #022968;
    text-align: center;
    line-height: 2em;
}

ul#recent-collaborators{
    list-style-type: none;
    line-height: 2em;
    text-align: center;
    font-size: 1em;
    font-family: Raleway, verdana, arial;
   padding-left: 0em;
}
    
li.collaborators{
    display:inline-block;
    color: #022968;
    padding: 2%;
    margin: 1.5%;
    border: solid 3px #022968;
}

img.research-1{
    padding: 2em;
    width: 90%;
    }

img.research-2{
    padding: 2em;
    width: 100%
    }
}

/**********************
5.group_members.html Layout and Styling
**********************/

.descrip p{
    color: #022968;
    line-height: 2em;
    text-align: justify;
    font-size: 1.2em;
    font-family: Raleway, verdana;
}

img.group{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 5%;
}

/*Icon Styling*/

.fa-file-pdf{
     color:#022968;
}

.fa-graduation-cap{
     color:#022968;
}

.fa-file-pdf:visited{
    color:#022968;
}

.fa-graduation-cap:visited{
    color:#022968;
}

a.group-mem-link{
    text-decoration: underline;
     color: #022968;
}

a.group-mem-link:hover{
    color:#7DBFDB;
}

a.career-opportunities{
    text-decoration: underline;
    color:#022968;
}
a.career-opportunities:hover{
    color: #7DBFDB;
}

/* group_members.html - Responsive layout make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 1503px){

.descrip p{
    line-height: 2em;
    font-family: Raleway, verdana;
    text-align: justify;
    font-size: 1em;
}

.group-member-image{
    font-size: 1em;
    font-weight: 700;
    font: #0E4D8C;
}
}

/**********************
6.publications.html Layout and Styling
**********************/

ol.publications{
    font-family: Raleway, verdana;
    line-height:2em;
    margin-left: 3%;
    margin-right: 2%;
    padding-left: 3%;
    padding-right: 2%;
    color:#022968;
    font-size: 1.2em
}

li.reference{
    margin: 20px 0;
}

.fa-file-alt:hover{
    text-decoration: none;
}

.fa-chart-bar:hover{
    text-decoration: none;
}
.popover {
    font-family: Raleway, verdana;
    background-color: #FFC857;
    color:#022968;
}
#popover-arrow-outer-color{
   background-color: #FFC857;
}

/* publications.html - Responsive Design*/

@media only screen and (max-width: 1300px){

ol.publications{
    font-family: Raleway, verdana;
    line-height:2em;
    margin-left: 3%;
    margin-right: 2%;
    padding-left: 3%;
    padding-right: 2%;
    color:#0E4D8C;
    font-size: 1em
}

}

/**********************
7.contact.html Layout and Styling
**********************/

div.contact{
    display: block;
    text-align: center;
}

a.contact-email{
    text-decoration: underline;
    color:#022968;
}
a.contact-email:hover{
    color: #7DBFDB;
}

a#uob{
    text-decoration: underline;
    color:#022968;
}
a#uob:hover{
    color: #7DBFDB;
}
/**********************
8.opportunites.html Layout and Styling
**********************/