/* Runners'High CSS */

/* ------------------------------------------------
[Table of contents]

 0.Reset
 1.Global
 2.Layout

++.Breakpoints



/**
 * 0.RESET 
 */

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ul{}button,input,select,textarea{margin:0;}
html{box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}
img,embed,iframe,object,audio,video{display:block;height:auto;max-width:100%;}


/**
 * 1.GLOBAL
 */

body {
  background: #fafafa;
  color: #222; 
  font-weight: normal;
  line-height: 1.5;
  font-family: 'SourceSansProRegular', sans-serif;
}

@font-face {
  font-family: 'SourceSansProRegular';
  src: url('../fonts/SourceSansPro-Regular.woff') format('woff'),
       url('../fonts/SourceSansPro-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'SourceSansProBold';
  src: url('../fonts/SourceSansPro-Bold.woff') format('woff'),
       url('../fonts/SourceSansPro-Bold.woff2') format('woff2');
}

#site-name, h3, h4, h5, h6 {
  font-family: 'SourceSansProBold', sans-serif;
  font-style: normal;
  font-weight: bold;
}

#site-name {
  display: block;
}

p {
  font-style: normal;
}

.caption {
  color: #999;
  font-size: .875rem;
}

.centered {
  margin: 0 auto;
}

.hidden-mobile {
  display: none;
}

.inline-block {
  display: inline-block;
  }
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}


/**
 * 2.LAYOUT 
 */

.flex {
  display: flex;
}

header,
footer {
  
}

.button,
button {
  display: inline-block;
  border: none;
  color: #fff;
  background: #ff0000;
  border-radius: 20px;
  box-shadow: 4px 4px 0px rgba(34, 45, 125, 0.1);
  text-decoration: none;
}
  .button img {
    margin-left: 1rem;
    vertical-align: sub;
  }

.pre-footer {
  
}
.pre-footer img {
  padding: 0 1rem;
}

footer {
  min-height: 5rem;
}



/* SVG */

.svg-container { 
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle; 
  overflow: hidden; 
}
  #stravini-logo-container.svg-container {
    width: 250px;
    height: 53px;
    padding-bottom: 0;
  }

.svg-content { 
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes bounce {
    0% {
        /*bottom: calc(100% - 20px);*/
        transform: translate3d(0,-150px, 0);
    }
    10% {
        /*bottom: 0%;*/
        transform: translate3d(0, 0, 0);
    }
    20% {
        /*bottom: 20%;*/
        transform: translate3d(0,-30px, 0);
    }
    30% {
        /*bottom: 0%;*/
        transform: translate3d(0,-0, 0);
    }
    40% {
        /*bottom: 5%;*/
        transform: translate3d(0,-10px, 0);
    }
    50% {
        /*bottom: 0%;*/
        transform: translate3d(0,-0, 0);
    }
    100% {
        /*bottom: 0%;*/
        transform: translate3d(0,-0, 0);
    }
}

.svg-content text,
.svg-content .image {
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}
.svg-content.text-hidden text,
.svg-content.text-hidden .image {
  opacity: 0;
}
.svg-content.start text,
.svg-content.start .image {
  opacity: 1;
 }
 .svg-content.start g.image.bounce {
    animation: bounce 1s;
    animation-fill-mode: forwards;
  }
  

  /* Contact form */

  #contact-form {
    margin-top: 1rem;
  }

  #contact-form .svg-container {
    margin: .5rem 0;
  }
  #contact-form .svg-container.input-container {
    width: 70%;
  }
  #contact-form .svg-container label {
    visibility: hidden;
    position: absolute;
    left: -1000rem;
  }
  #contact-form .svg-container input,
  #contact-form .svg-container textarea {
    width: calc(100% - .5rem);
    background: transparent;
    font-family: 'SourceSansProRegular', sans-serif;
    font-size: 1rem;
    border: none;
  }
    #contact-form .svg-container input {
      height: 2rem;
      padding: 0 1rem;
      line-height: 2rem;
    }
    #contact-form .svg-container textarea {
      height: 12rem;
      padding: 1rem;
      line-height: 1.5rem;
    }
  #contact-form .svg-container .svg-content {
    padding-top: 2rem;
    z-index: -1;
  }
      #contact-form .svg-container .svg-content#textarea-line {
        padding-top: 0rem;
      }


/**
 * xx.Breakpoints
 *
 */


@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */

body {
  padding: 1rem;
}


#site-name {
  font-size: 1.75rem;
  visibility: hidden;
  position: absolute;
  left: -1000rem;
}

h1 {
  font-size: 1.25rem;
  margin: 1rem 0 .5rem 0;
}
h2 {
  font-size: 1.5rem;
  margin: 1rem 0 0 0;
}

  p {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: .5rem 0;
  }

  p a {  }

  .caption {
    margin-top: 1rem;
  }

  .button,
  button {
    margin: 1rem 1rem 1rem 0;
    padding: .5rem 1.25rem;
    font-size: 1.125rem;
  }
    button {
      padding: .7rem 1.25rem;
    }
  
  .button p {
    padding: .75rem 2rem 1rem 2rem;
  }


  .flex {
    flex-direction: column;
  }
  .svg-container {
    margin: 1rem 0;
  }
    .svg-container#ecf-samples {
      padding-bottom: 160%;
    }
    .svg-container#picture-4,
    .svg-container#picture-5 {
      padding-bottom: 0;
    }
    .svg-container#storyteller,
    .svg-container#labsforeurope {
      padding-bottom: 120%;
    }

  #contact-form .svg-container.input-container {
    padding-bottom: 1rem;
  }
  #contact-form .svg-container.textarea-container {
    padding-bottom: 0;
  }




}
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

#site-name {
  font-size: 2.25rem;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.5625rem;
  margin: 1rem 0 0 0;
}

  p {
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 1rem 0;
    max-width: 35rem;
  }

  ul {
    padding-left: 1rem;
  }
  ul li {
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 35rem;
  }

  .caption {
    margin-top: 2rem;
  }

  .button,
  button {
    font-size: 1.125rem;
  }

  .svg-container {
    max-width: 25rem;
    margin: 1rem 0;
  }

    .svg-container#circles {
      padding-bottom: 25rem;
    }
    .svg-container#objectives {
      padding-bottom: 26rem;
    }
    .svg-container#ecf-samples {
      padding-bottom: 40rem;
    }
    .svg-container#picture-4 {
      max-width: none;
    }
      .svg-container#chart {
        padding-bottom: 22rem;
      }
      .svg-container#logos {
        padding-bottom: 26rem;
      }
    .svg-container#picture-5 {
      max-width: none;
    }
      .svg-container#storyteller,
      .svg-container#labsforeurope {
        padding-bottom: 30rem;
        max-width: 20rem;
      }


}
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

  body {
    margin: 4rem auto;
    max-width: 65rem;
  }


  section {
    margin: 2rem 0;
  }

}
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */


  .hidden-mobile {
    display: block;
  }

  .hidden-desktop {
    display: none;
  }

  .flex {
    flex-direction: row;
  }
    .flex > div {
        order: 1;
    }
    .flex > div.svg-container {
      margin: -3rem 0 0 2rem;
    }
    .flex.even > div.svg-container {
      margin: -3rem 2rem 0 0;
      order: 0;
    }
      .flex > div.svg-container#objectives {
        order: 0;
      } 

    .flex > div.text-container {
      max-width: 30rem;
      margin-right: 3rem;
    }
    .flex.even > div.text-container {
      margin-right: 0;
      margin-left: 5rem;
    }

    .flex.centered {
      flex-direction: column;
    }
      .flex.centered > div.text-container {
        text-align: center;
        margin: 0 auto;
        max-width: 40rem;
      }

      .svg-container#ecf-samples {
        max-width: 28rem;
        padding-bottom: 45rem;
      }
      .svg-container#picture-4 {
          margin: 0 auto 4rem auto;
          max-width: 56rem;
        }
        .svg-container#picture-4 div.svg-container {
          margin-top: 0;
        }

      .svg-container#picture-5,
      .svg-container#picture-5 div.svg-container {
          margin: 0;
        }
        .svg-container#picture-5 {
          margin-top: 3rem;
        }
        .svg-container#picture-5 div.svg-container {
          margin-top: 0;
        }



}
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */
}
@media (min-width:80.063em) { /* hi-res laptops and desktops */

}