@import url('https://fonts.googleapis.com/css?family=Bree+Serif');
@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;

  background: #fff;
}

body, html{
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', Arial, sans-serif;

  --main-ver-pad: 2vh;
  --main-hor-pad: 2vw;
}

:root {
        --navy: #104C97;
}

h1{
  font-family: 'Bree Serif', serif;
  font-weight: bold;
  font-size: 2.6rem;
  line-height: 1;
  margin: 5px;
  letter-spacing: -1px;
}

h3{
  font-size: 0.8rem;
  margin: 2vh 5vh;
  color: #9104F9;

}

a {
  color: #fff;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0);

  transition: all 300ms ease-in;
}

a:hover{
  text-decoration: underline;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(255,255,255,0.5);
}

p{
  margin: 2rem 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

img:not([src]):not([srcset]) {
  visibility: hidden;
}

img{
  display: block;
  max-width: 100%;
  height: auto;

  transition: all 300ms ease-in;
}

.details{

  display: grid;
  grid-template-columns: 10% 1fr 10%;
  grid-row-gap: 5vh;

}

picture{
  grid-column: 1 / -1;
}

.centered{
  text-align: center;
  grid-column: 2;
}

.small{

}

@-webkit-keyframes slideIn { from { transform: translateY(-50px); } to {  transform: translateY(0vh); } }
@-moz-keyframes slideIn { from { transform: translateY(-50px); } to {  transform: translateY(0vh); } }
@keyframes slideIn { from { transform: translateY(-50px); } to {  transform: translateY(0vh); } }

header.main{
  position: fixed;
  z-index: 20;
  width: 100%; 

  display: flex;
  flex-direction: row;
  justify-content: space-between; 

  padding-top: var(--main-ver-pad); 

  padding-bottom: var(--main-ver-pad); 

  box-sizing: border-box;

 /* background: linear-gradient(to bottom, rgba(0,0,56,0.60) 0%, rgba(0,0,56,0.6) 5%, rgba(0,0,0,0) 100%);
*/

background: rgba(0, 0, 0,0.4);
  transform: translateY(-70px);

}

header.main.scrolled {
  -webkit-animation:slideIn ease-in 1;
  animation: slideIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:500ms;
  animation-duration:500ms;
}

.logo-elladesign {

  background: url(../img/elladesign-logo.svg) no-repeat center top;

  width: 100px;
  height: 20px;
  margin-left: var(--main-hor-pad);
  transition: all 600ms ease-in;
}

.logo-elladesign a{
  display: block;
  text-indent: -99999px;  
}
.logo-elladesign a:hover{
  border: none;
}

.details--opener{

  grid-column: 1 / -1;

  display: block;

}

.half header.main{
  background: none;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.details--header {

  grid-column: 2;
  align-items: center;
  text-align: center;
  opacity:0; 

  -webkit-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  animation-duration:1s;
}

.half .details--opener{
    opacity:0; 

  -webkit-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  animation-duration:1s;
}

.details--wrapper{
  text-align: center;
  grid-column: 2;
}

.details--wrapper header{
  text-align: center;
  margin-top: 3vh;
}

.details--link{
  display: inline-block;
  margin: 1rem 0;
  padding: 1rem 3rem;
  border-radius: 3px;
  background: #979797;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;
  border:none;
}

.details--link:hover{
  color: #fff;
  padding: 1rem 3rem;
  border: none;
  background: #ab47ff;
}

.vertical-bar{
  width: 1px;
  background: #ccc;
  height: 10rem;
  margin: 3rem auto;
}

small{
  display: block;
  font-size: 0.5rem;
  margin: 2rem 0 0 0;
}

footer {

  

border-top: 1px solid #dcdcdc ;
  color: #2000d0;

  font-size: 0.8rem;
  text-align: center;
  padding: 5vh;

  grid-column: 1 / -1;

}

footer a{
  color: #2000d0;
  margin: 0 1rem;
}

/* #### half layout overwrites #### */

.details.half{

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 0;

}

.half picture.details--opener{

      grid-column: 1 / 3;
}

.half .details--header{

      grid-column: 3 / -1;
      align-self: center;
      text-align: center;
      padding: 4vw;
}

.half .centered{
  grid-column: 2 / 4;
}


.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

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

  .logo-elladesign{
      margin-left: 3vh;
  }

  h1{
    font-size: 2.2rem;
  }

  h3{
    margin: 2vh 0;
  }

  .half picture.details--opener{

        grid-column: 1 / -1;
  }

  .half .details--header{

        grid-column: 1 / -1;
  }


  h1{
    letter-spacing: -2px;
  }

}