/* Contents of this file:
 * |Basic Styles|
 * |Media Queries|
 * @media all and (min-width: 1228px) { }
 * @media all and (max-width:1227px) and (min-width: 1024px) { }
 * @media all and (max-width: 1023px) and (min-width: 768px) { }
 * @media all and (max-width: 767px) and (min-width: 569px) { }
 * @media all and (max-width: 568px) and (min-width: 420px) { }
 * @media all and (max-width: 419px) { }
 * |Color|
 */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900');
@import url('components/buttons.css');
@import url('components/images.css');
@import url('components/menus.css');
@import url('components/flexibox.css');



/* GENERAL SETTINGS 
********************/
html, body, h1, h2, h3, h4, a, p, nav, ul,
article, button, input, select, textarea, .pure-g [class *= "pure-u"] {
  border: 0;
  color: #fff;
  font: normal 62.5% 'Lato', helvetica, arial, sans-serif;
  margin: 0; 
}

.pure-g {
  height: auto;
  max-width: 1280px;
}

html {
  overflow-y: scroll;
}

/* The text-size-adjust property allows control over
the text inflation algorithm used on some mobile devices */
body {
  background-color: black;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

header, main, footer, .pure-g {
  border: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
}

header, footer {
  background: transparent url("../img/background_texture.jpg") repeat;
}

nav {
  display: inline;
}

footer {
  margin-top: 1rem;
  padding: 1rem 0 2rem 0;
}

a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

#header-title {
  background-color: transparent; 
  border: 0;
  color: white;
  display: inline-block;
  float: left;
  text-align: right;
  width: 100%;
}

.span-blue {
  display: inline-flex;
  margin-right: .5rem;
  text-align: center;
}

.blue {
  color: #06F;
}

h1, h2, h3 {
  display: inline-flex;
  margin-left: .5rem;
  text-align: center;
}

h1, h2 {
  line-height: 135%;
}

/*#generalAssembly {
  padding: 1rem 0;
}*/

[id*='projects-'],
[id*='employment-'],
[id*='education-'] {
  cursor: auto;
  height: auto;
  overflow: hidden;
  padding: 1rem;
  position: relative; 
}

[id*='contact-'] {
  height: auto;
  margin: 0 auto;
  width: auto;
}

.display-position {
  bottom: 0;
  position: absolute;
  right: 0;
  z-index: 1000;
}

.statement-text {
  font-style: italic;
  margin: 1rem 0;
  padding: 0 2rem;
  text-align: left;
}

.header-section, .header-contacts {
  border-bottom: 3px solid white;
  font: bold 2.5rem 'Lato', arial, sans-serif;
  font-variant: all-small-caps;
  letter-spacing: .2rem;
  padding: .5rem 1rem;
}

.header-contacts {  
  border-bottom: 0;
  font-size: 2.3rem;
  letter-spacing: .1rem;
  text-align: center;
}

.paragraph {
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: .05rem;
  text-align: left;
  text-indent: 1rem;
}

.paragraph-header-projects,
.paragraph-header-education,
.paragraph-header-employment {
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .1rem;
  margin-bottom: 1.5rem;
  padding: .5rem 1rem;
}

section {
  padding: 0.5rem 0;
  position: relative;
}

#projects .header-section
{
  background-color: #A61322;
}

#education .header-section
{
  background-color: #2034e5;
}

#employment .header-section
{  
  background-color: #22a613;
}

.paragraph-header-projects {
  border-bottom: 2px solid #A61322;
  padding-bottom: 1.5rem;
}

.paragraph-header-education {
  border-bottom: 2px solid #2034e5;
  padding-bottom: 1.5rem;
}

.paragraph-header-employment {
  border-bottom: 2px solid #22a613;
  padding-bottom: 1.5rem;
}

.link-contact {
  background-color: rgba(255,255,255,0);
  border: 1px white solid;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  padding: 1rem 0;
  text-align: center;
}

.link-contact:hover {
  background-color: rgba(255,255,255,1);
  color: black;
}

.link-visit {
  text-decoration: underline;
}

.link-visit:hover {
  text-decoration: none;
}

#education-3 ul {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .05rem;
  list-style: outside;
  padding: 0.5rem 0 0 3.5rem;
}

.margin-top-1rem {
  margin-top: 1rem;
}

.even {
  clear: left;
}

/***
* Styles for an overlay div to show a column with a CV element
*/

#overlay-div {
  background-color: black;
  border: 1px solid #fff;
  display: block;
  height: auto;
  margin: 0;
  overflow: none;
  position: fixed;
  top: 0;
  left: 20%;
  width: 60%;
  z-index: 5000;
}

#transparent-alpha-layer {
  background-color: rgba(0,0,0,.7);
  display: block;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4000;
}

.no-scroll {
  overflow: hidden;
}

@media all and (min-width: 1228px) {

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3, h4, .span-blue {
    font-size: 2rem;
  }

  .block {
    display: block;
    text-align: left;
  }

  #header-title {
    width: auto;
    height: auto;
    text-align: left;
    padding-top: 9%;
    margin-left: 6%;
  }

  .nav-link {
    font-size: 1.8rem;
  }

  .link-contact {
    font-size: 1.5rem;
  }

  .even {
    clear: none;
  }

}

@media all and (max-width:1227px) and (min-width: 1024px) {

  .pure-g {
    min-width: 1024px;
  }

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3, h4, .span-blue {
    font-size: 2rem;
  }

  .block {
    display: block;
    text-align: left;
  }

  #header-title {
    width: auto;
    height: auto;
    text-align: left;
    padding-top: 9%;
    margin-left: 6%;
  }

  .link-contact {
    font-size: 1.6rem;
  }

  .nav-link {
    font-size: 1.8rem;
  }
}

@media all and (max-width: 1023px) and (min-width: 768px) {

  .pure-g {
    max-width: 1023px;
  }

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3, h4, .span-blue {
    font-size: 1.9rem;
  }

  .block {
    display: block;
    text-align: left;
  }

  #header-title {
    width: auto;
    height: auto;
    min-height: 120px;
    text-align: left;
    padding-top: 8%;
    margin-left: 6%;
  }

  .nav-link, .link-contact {
    font-size: 1.6rem;
  }  
}

@media all and (max-width: 767px) and (min-width: 569px) {
  
  .pure-g {
    max-width: 767px;
  }

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3, h4, .span-blue {
    font-size: 1.8rem;
  }

  .block {
    display: block;
    text-align: left;
  }

  #header-title {
    display: block;
    float: left;
    width: auto;
    height: auto;
    min-height: 135px;
    text-align: left;
    padding-top: 10%;
    margin-left: 6%;
  }

  #sliding-menu-list {
    display: inline;
  }

  #overlay-div {
    left: 7%;
    width: 86%;
  }
  
}

@media all and (max-width: 568px) and (min-width: 420px) {
  
  .pure-g {
    max-width: 567px;
  }

  h1 {
    font-size: 2.7rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3, h4, .span-blue {
    font-size: 1.8rem;
    letter-spacing: .05rem;
  }

  header .col-12 {
    padding: 0rem .5rem;
  }

  #header-title {
    width: auto;
    height: auto;
    text-align: left;
    padding-top: 5%;
    margin-top: 0;
  }

  [id*='contact-'] {
    width: 75%;
  }

  #overlay-div {
    left: 2.5%;
    width: 95%;
  }
  
  .paragraph {
    padding: 0 0.7rem;
  }

  .even {
    clear: none;
  }
}

@media all and (max-width: 419px) {

  .pure-g {
    max-width: 418px;
  }

  header {
    padding-bottom: 2rem;
  }

  [id*='contact-'] {
    width: 75%;
  }

  h1 {
    font-size: 2.7rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3, h4, .span-blue {
    font-size: 1.8rem;
    letter-spacing: .05rem;
  }

  .link-contact {
    overflow: hidden;
  }

  #header-title {
    padding: 1rem;
    text-align: center;
    width: auto; 
  }

  #overlay-div {
    left: 2%;
    width: 95%;
  }

  .paragraph {   
    padding: 0 0.7rem;
  }

  .even {
    clear: none;
  }
}