/**
* Based on Ladies Learning Code CSS Fundamentals content
*/

/**
* General
*/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

.clearfix:after { /* clearfix */
    content: "";
    display: table;
    clear: both;
}


/**
* Header
*/
header { 
 	  text-align: center;
 	  padding: 180px 0;
} 

.content-wrap {
	  max-width: 1000px;
	  width:90%;
	  margin: 0 auto;
	  padding: 60px 0;
}

.content-wrap-buttons {
    max-width: 1000px;
    width:90%;
    margin: 0 auto;
    padding: 25px 0;
}


/**
* Links
*/
.link-circles {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.link-circles ul li {
    display: inline-block;
    height: 60px;
    width: 180px;
    border-radius: 10%;
    border: 5px solid #3E87B4;
    line-height: 50px;
    padding: 0 10px;
    margin: 0 20px;
 /*   font-family: Raleway, sans-serif;
    font-size: 200%;
    font-weight: bold; */
    font-family: 'Satisfy', 'Pacifico', cursive;
    font-size: 200%;
}

.link-circles span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    text-align: center;
}

.link-circles a:hover {
    color: #FFFFFF;
}



/**
* Profile (Top Links & About)
*/ 
.profile {
    /* specifies rgb values + transparency of background only */
    background: rgba(256,256,256,0.6);
} 

.profile img {
    float: left;
    width: 35%;
    margin-right: 3%;
    border-radius: 10%;
    border: 2px solid #bbb;
    padding: 4px;
}

.profile h2 {
    border: none;
 	display: inline-block;
    padding: 10px 20px;
    border: 2px solid #bbb;
    margin-bottom: 10px;
    transition: all 0.5s ease;
    transform: rotate(-5deg);
}

.profile h2:hover {
    transform: rotate(5deg);
}

.summary {
    width: 62%;
    float: right;
}


/**
* Teaching & Research
*/

.teaching {
    background: rgba(256,256,256,0.8);
} 

.current-item {
    border-bottom: none;
} 

 /* Adds separator lines between each past course... */
.item {
    border-bottom: 1px solid #bbb;
}

 /* ... except the last one */
.item:last-child {
    border-bottom: none;
}

.teaching h3{
    text-transform: none;
}

.teaching h4 {
    text-transform: none;
}

.teaching-h2 { 
    text-transform: none;
    font-size: 24px;
}


/**
* Contact
*/
.contact {
    background: rgba(256,256,256,0.6);
}

.contact img {
    float: right;
    width: 25%;
    margin-right: 3%;
    border-radius: 10%;
    border: 2px solid #bbb;
    padding: 4px;
}

.contact-summary {
    width: 72%;
    float: left;
    padding: 0;
}


/**
* Fonts
*/
body {
    font-family: 'Open Sans', 'Cutive Mono', monospace;
    line-height: 1.5;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)), url(../images/high_level.jpg) no-repeat fixed 50%;
    background-size: cover;
}

h1, h2, h3, h4 {
    font-weight: 400;
    margin: 0;
}

h2, h3, h4 {
    font-family: 'Raleway', 'Merriweather', sans-serif;
    text-transform: uppercase;
}

h1 {
    font-family: 'Satisfy', 'Pacifico', cursive;
    font-size: 80px;
}

h2 {  
    font-size: 32px;
}

section h2 {
    border-bottom: 1px solid #ccc;
}


/**
* Hyperlinks
*/
a {
    color: #000000;
    transition: all 0.5s ease;
}

a:hover {
    color: #3E87B4;
}


/**
* Fixed upper corner links
*/
.download { 
    width: auto;
    height: 50px; 
    position: fixed;
    /*background: #2E8B57;*/
    background: #3E87B4;
    top: 0;
    right: 0;
    font-family: 'Raleway', sans-serif;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 10px;
}

.totop {
    width: auto;
    height: 50px; 
    position: fixed;
    background: #3E87B4;
    top: 0;
    /*left: 0;*/
    right: 0;
    font-family: 'Raleway', sans-serif;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 10px;  
}


/** 
* Alignment
*/
.alignleft {
    float: left;
}
.alignright {
    float: right;
}