/*---------------------------------------
Thanks to for Ladies Learning Code http://ladieslearningcode.com  and http://christinatruong.com
-----------------------------------------*/


/* GLOBAL STYLES
-----------------*/
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family:  arial;
  line-height: 1.5;
  background-size: cover;
  padding: 0;
  margin: 0;
}

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

section h1, 
header h2 {
  text-transform: uppercase;
}
header h1 {
  font-family: arial;
  font-size: 80px;
}

header{
	background: url(../images/sunset.jpg) no-repeat fixed 50%;
}
header h2, 
section h1 {
  font-size: 32px;
}

section h1 {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}


/* every other section element, 
starting with the second section */
section:nth-child(2n+1) { 
  background: #fefefe;
  
  
}
/*section:nth-child(2n+2) {
 color: #fff;
 #background: rgba(0, 0, 0, 0.8);
 background:#20B2AA;
}*/
section:nth-child(2n+2) {
 color: #fff;
 #background: rgba(0, 0, 0, 0.8);
 background:#A8AFB4;
}



/*a {
 color: #133e44;
  
}*/

a {
 color: black;
  
}
a:hover {
  /*color: blue;*/
  color:#2C808C;
  text-decoration: none;
}
ul {
  padding-left: 20px;
}
ul li {
  margin-bottom: 5px;
}

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

.mybold{
	color: #2C808C;
}

/* HEADER
----------*/
header {
  text-align: center;
  padding: 200px 50px;
}


/* ABOUT ME / PROFILE
----------------------*/
.about h1 {
  
  display: inline-block;
  padding: 10px 20px;
  transform: rotate(-4deg);
  margin-bottom: 10px;
  border: none;
  font-size: 20px;
}
.about .summary {
  float: left;
  width: 70%;
}
.about-image {
  float: left;
  width: 27%;
  margin-right: 3%;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 50%;
}


/*  EDUCATION, EXPERIENCE and PUBLICATIONS
-------------------------------*/
/* publications & education entries */
.item {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 20px 0;
}
.item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}


/* education
-------------------*/
.education.date {
  margin: 5px 0 20px 0;
  font-size: 12px;
}
.education h3 {
  line-height: 1.25;
  font-size: 16px;
}
.education a:hover {
  color: black;
}
.education .details {
  float: left;
  width: 30%;
  padding-right: 5px;
}
.education .description {
  font-size: 14px;
  width: 70%;
  float: right;
  margin-top: 5px;
}
.education .description p:first-child {
  margin-top: 3px;
}

.university {
  
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #2C808C;
}

/* Experience
-------------*/
.experience h2 {
  /*text-transform: uppercase;*/
  color: #2C808C;
  font-size: 20px;
}
.experience h3 {
  color: #2C808C;
}


/* PUBLICATIOBNS
-------------*/
/*.publications h2 {
  text-transform: uppercase;
}*/
.publications h3 {
  color: #2C808C;
}


/* Awards
-------------*/
/*.awards h2 {
  text-transform: uppercase;
}*/
.awards h3 {
  color: #2C808C;
}

/* CONTACT & FOOTER 
--------------------*/
.contact {
  background: #111;
}
.contact p {
  margin: 0;
 }
/*.contact p:first-of-type {
  margin-top: 35px;
 }*/
.contact .social {
  width: 50%;
  float: right;
  text-align: right;
  font-size: 30px;
}
.contact .social a {
  margin: 0 8px;
}

footer {
  clear: both;
  font-size: 12px;
  margin-top: 50px;
}



/* MEDIA QUERIES
--------------------*/
@media (max-width: 800px) {
  
  /* About section */
  .about-image {
    width: 48%;
    float: right;
    margin: 0 0 15px 2%;
  }
  .about .summary {
    width: auto; /* resets the width setting */
    /* or could also use width: 50% - if you don't want the text to wrap */
    float: none; /* removes the float */
  }
  
  .education .details {
    float: none; /* removed float */
    width: 100%; /* auto will work as well */
    padding-right: 0px; /* don't need padding anymore now that it spans across the page */
  }
  .education .description {
    width: 100%;
    float: none; /* removed float */
  }
  .experience .details {
    float: none; /* removed float */
    width: 100%; /* auto will work as well */
    padding-right: 0px; /* don't need padding anymore now that it spans across the page */
  }
  .experience .description {
    width: 100%;
    float: none; /* removed float */
  }
}

@media (max-width: 600px) {
  header {
    padding: 75px 40px;
  } 
  header h1 {
    font-size: 45px;
  }
  header h2,
  section h1 {
    font-size: 24px;
  }
  .education h2 {
    font-size: 18px;
  }
  .contact .social {
    width: 100%; 
    float: left; 
    text-align: left; 
    margin-bottom: 20px;
  }
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
	margin-top: 50px;
    padding: 0;
    overflow: hidden;
   
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 20px;
	
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 600 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:600px) {
  /*ul.topnav li:not(:first-child) {display: none;}*/
  
  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: right;
    /*display: inline-block;*/
	display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:600px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
	float: none;
    display: block;
    text-align: left;
  }
}
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
/*function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}*/