/* reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
  padding: 0;
  margin: 0;
}
/*a{text-decoration:none;}*/
table {border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {
  font-weight: normal;
  font-style: normal;
}
strong{font-weight: bold;}
ol,ul {
  /*list-style: none;*/
  margin:0;
  padding:0;
}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  font-size: 100%;
  margin:0;
  padding:0;
  color:#eee;
}
q:before,q:after {content:'';}
abbr,acronym {border: 0;}

/* custom CSS
 * --------------------------------------- */
/*@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {
} */
:root { font-size: 12px; }
@media (min-width: 320px) and (max-width: 960px){
  :root { 
    font-size: calc( 12px + (20 - 12) * ( (100vw - 320px) / ( 960 - 320) ));
  }
}
@media (min-width: 960px){
  :root { font-size: 20px;}
}

html, body {height: 100%; overflow-x: hidden;}
body{
  font-family: Calibri, sans-serif;
  color: #eee;
}
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2rem; margin-left: 0.5rem;}
p{font-size: 1.4rem;}
a{color: #eee;}
a:hover {text-decoration: none;}

footer {
  height: 1.2rem;
  color: #eee;
  position:fixed;
  bottom:0;
  right: 1rem;
  z-index:70;
  text-align:right;
  font-size:0.9rem;
  padding:0.5rem 0;
}

/* menu
 * --------------------------------------- */
#menu{
  position:fixed;
  top: 0.2rem;
  left: 0.2rem;
  height: 2rem;
  z-index: 70;
  width: 60vw;
  padding: 0;
  margin:0;
}
#menu li {
  display:inline-block;
  margin: 0.2rem;
  padding: 0.2rem 0.5rem;
  color: #fff;
  background: #631;
  border: 0.1rem #fff solid;
  border-radius: 0.5rem;
  cursor: pointer;
}
#menu li.active{background: rgba(0,0,0,0);}
#menu li:hover{background: rgba(255,255,255, 0.8);}

.bullets {
  position: absolute;
  bottom: 0.2rem;
  left: 0;
  width: 100%;
  z-index: 70;
  text-align: center;
}

.bullets li {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: 0 0.25rem;

  background: rgba( 255, 255, 255, 0.5 );
  box-shadow: 0 0 0.25rem rgba( 0, 0, 0, 0.2 );
  cursor: pointer;

  -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.bullets li:hover {
  background: rgba( 255, 255, 255, 0.8 );
}

.bullets li.active {
  cursor: default;
  background: #fff;
}

/* social
 * --------------------------------------- */
#social {
  position: fixed;
  top: 0.5rem;
  right: 2rem;
  font-size: 2rem;
  z-index: 99;
}

#social a {
  margin: 0 0.1rem;
  border: 0.25rem solid;
  padding: 0.2rem;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #fff;
}

/* http://designpieces.com/2012/12/social-media-colours-hex-and-rgb/ */
.no-touch #social a.fa-facebook {background-color: #3b5998; border-color: #3b5998;}
.no-touch #social a.fa-twitter {background-color: #00aced; border-color: #00aced;}
.no-touch #social a.fa-google-plus {background-color: #dd4b39; border-color: #dd4b39;}
.no-touch #social a.fa-linkedin {background-color: #007bb6; border-color: #007bb6;}
.no-touch #social a.fa-rss {background-color: #f90; border-color: #f90;}

.no-touch #social a:hover {
  background-color: rgba(0,0,0,0);
  transition: background-color 0.5s;
}

.center {text-align: center;}
.round {
  border-radius: 1rem;
  border: 0.2rem #fff solid;
}
.layer p {padding: 0 2rem 1rem;}
.clear {clear: both;}
.float_left {
  float: left;
  margin: 0 1rem 0.5rem 2rem;
}
.w25 {width: 25%;}
.w15 {width: 15%;}

/* sections
 * --------------------------------------- */
.layer {postion: absolute; top: 0; left: 0; height: 100vh;}
.scroll_container {
  margin: 5rem 0 2rem;
  padding: 0 1rem;
  height: calc(100vh - 7rem);
  overflow-y: scroll;
  box-sizing: border-box;
}

/* http://paletton.com/#uid=23O0u0kkBm8a2y2fjrrpUgQvjbq */
#home {background: #333 url("../img/background.jpg") center/cover no-repeat fixed;}
#product {background: linear-gradient(to bottom right, #569, #347, #08153d);}
#people {background: linear-gradient(to bottom right, #4e9677, #375, #013e24);}
#plans {background: linear-gradient(to bottom right, #444, #333, #111);}
/*background: linear-gradient(to bottom right, #db7, #a83, #5b3f02);*/

#home img {
  margin-top: 25vh;
  width: 75vw;
  max-width: 1080px;
}
#home h2 {font-size: 5vw;}
#tagline {
  position: absolute;
  bottom: 2rem;
  left: 0;
  padding: 0 1rem;
  width: 60vw;
  box-sizing: border-box;
  font-size: 1.3rem;
  text-shadow: 0.1rem 0.1rem 0.2rem #333;
  text-align: left;
}
@media (max-width: 600px){
  #tagline { width: 80vw;}
}
@media (max-width: 480px){
  #tagline { width: 100vw;}
}

.figure {
  width: 80%;
  min-width: 400px;
  max-width: 800px;
}

/* http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback */
/*#process {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 4rem;
}
#process li {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20%;
  float: left;
  font-size: 1.3rem;
  background: linear-gradient(to bottom, #a83, #952);
  box-sizing: border-box;
  margin: 0 2.4%;
  padding: 1rem;
}

@media only screen and (min-width: 1440px) {
}

#process li span {display: inline-block; width: 100%; float: none; margin-top: 0.5rem;}
*/