/**************/
/* Styles.css */
/**************/

@import url('reset.css');

/************/
/* Navigate */
/************/

nav {
  background-color:  rgba(85, 173, 183, 0.84);
  padding: 28px 0;
  position: fixed;
    right: 0;
    left: 0;
    z-index:500;
}

nav h1 {
  float: left;
  font-family: CherrySwash;
  color:  #FFF;
  font-size: 40px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  padding-left:20px;
}

nav ul {
  float: right;
  padding-right:20px;
  display:none;
}

nav ul li {
  float: left;
}

nav ul li a {
  font-family: HelveticaLT;
  color: #dce3e4;
  font-size: 18px;
  line-height: 25px;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
}
nav ul li::after {
  color: #dce3e4;
  content: "/";
}
nav ul li:last-child::after {
  content: "";
}

/********************************************************/
/* Unstyled list - remove margin, padding and list type */
/********************************************************/

.footer__links, .unstyled-list{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/****************************/
/* Clearfix: contain floats */
/****************************/

.clearfix:before, .clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

@import url("normalize.css");

hr{
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

html,body{
  height: 100%;
  overflow-x: hidden;
}

.wrapper{
  max-width: 128rem;
  margin: 0 auto;
  padding: 2em;
  position: relative;
  min-height: 100%;
}

.content{
  max-width: 30em;
  position: relative;
  z-index: 10;
}
  @media (min-width: 62em){
    .content{
      margin-left: 50%;
    }
  }

.bg-picture{
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: .3;
  max-height: 100%;
}
  @media (min-width: 62em){
    .bg-picture{
      left: 0;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 0.9;
      max-width: 50%;
    }
  }

.main a{
  display: inline-block;
  vertical-align: baseline;
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 1px solid #334368;
  transition: padding-bottom 350ms ease-in, border-color 270ms ease-in;
}
  .main a:hover, .main a:focus{
    border-color: transparent;
  }

html{
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*************************************************/
/* FOR IE11 - Calculating font sizes wrong when  */
/* setting the bodys font size in relative units */
/*************************************************/

_:-ms-fullscreen, :root{
  font-size: calc(1em * .625);
}

body{
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 1.6em;
  color: #334368;
  line-height: 1.5;
  background-color: #edece8;
}

/*********/
/* Links */
/*********/

a{
  color: #334368;
}
  a:hover, a:focus{
    text-decoration: none;
  }

/**********/
/* Header */
/**********/

.header__logo{
  margin-bottom: 2em;
  max-width: 4em;
}
.header__title{
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: .975em;
  text-transform: uppercase;
  color: #9d9ea1;
  margin-bottom: 0;
  margin-top:7em;
}
.header__baseline{
  color: #2C374F;
  font-size: 1.3em;
  font-weight: normal;
  font-style: italic;
  line-height: 1.125;
  margin-top: 2px;
  position: relative;
}
  .header__baseline img{
    vertical-align: baseline;
    width: 1em;
  }
  .header__baseline span{
    white-space: nowrap;
  }
  .header__baseline:after{
    content: '';
    display: block;
    max-width: 34rem;
    height: .2rem;
    background-color: #2C374F;
    margin-top: .625em;
  }
@media (max-width:20em){
  body > nav > div > h1{
    margin-left:20%;
    line-height:35px;
    margin-top:-70px;
  }
}

@media (min-width: 48em){
  .header__logo{
    margin-top: 1.75em;
    margin-bottom: 3em;
    max-width: none; }
  .header__title{
    font-size: 1.8em;
  }
  .header__baseline{
    font-size: 1.6em;
  }
    .header__baseline img{
      width: auto;
    } 
	.header__baseline{
	    animation: barre 0.9s cubic-bezier(0.910, 1.650, 0.500, 0.775) 0.5s;
	}
}
@keyframes barre{
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

/**********/
/* Footer */
/**********/

.footer{
  font-size: 0.95em;
  color: #454545;
  margin-top: 5em;
}
  .footer__links{
    margin-top: .5rem;
  }
    .footer__links li{
      display: inline-block;
      vertical-align: top;
    }
      .footer__links li + li{
        margin-left: .75em;
      }
  .footer a{
    color: #707070;
    text-decoration: none;
    display: block;
    
    width:15px;
    padding-bottom: .8rem;
    border-bottom: 1px solid transparent;
    transition: padding-bottom 270ms ease-in, border-color 250ms ease-in, color 400ms ease-in;
  }
    .footer a:hover, .footer a:focus{
      padding-bottom: .2rem;
    }
    .footer a[href*="linkedin.com"]:hover, .footer a[href*="linkedin.com"]:focus{
      color: #0077b5;
      font-size:110%;
      border-color: #0077b5;
    }
  @media (min-width: 48em){
    .footer{
      margin-top: 7em;
    }
    nav div ul {
        display:block;
    }
  }


/*************/
/* Hamburger */
/*************/

.hamburger {
  display: none;
}

@media screen and (max-width: 767px) {
  .wrapper{
    margin-top:20%;
  }
  nav ul {
    display: none;
    position: absolute;
    width: 60%;
  }
  nav ul li {
    padding-left: 0;
  }
  nav ul li a {
    border-radius: 0;
    background-color: #BCEAF4;
  }
  nav ul li::after {
	content: "";
  }
  nav ul li a{
  	float:left;
  	display:block;
  	color:black;
  	margin:0 auto;
  	width:150px;
  	border-bottom: 1px dashed grey;
  	border-top: 1px dashed grey;
  }
  .hamburger {
    display: block;
  }
}

 nav ul li a:hover{
    color: #9d9ea1;
    text-decoration: none;
    font-size: 110%;
    transition: border-color 450ms ease-in, color 400ms ease-in;
  }

.container{
  width:96%;
  max-width:980px;
  margin:0 auto;
}