/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Base Styles
- Blocks
- Elements
- Misc


- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

p, li {
  font-size: 1.8rem;
}

span.leadin {
  font-size: 1.9rem;
}

blockquote.testimonial:before  {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  font-family: "Open Sans" Helvetica;
}

.container-full {
  width: 100%;
  margin: 0;
}

form, input {
  color: #000000;
}

.quote-author {
  float: right;
  text-align: center;
}

.quote-author img {
  max-width: 100px;
}

.quote-author p {
  font-size: 12px;
  font-style: italic;
}

/* Blocks & Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.block {
  padding: 40px 0;
  position: relative;
  border-bottom: 10px solid #333333;
}

.block p {
  text-align: justify;
}

.block h2 {
  text-align: center;
}

.blue-block {
  background-color: #00C7FF;
  background: #00C7FF url(../images/blue-bg-texture-experiment.jpg);
  background-size: cover;
}

.darkblue-block {
  color: #FFFFFF;
  background-color: #006885;
  background: #006885 url(../images/darkblue-bg-texture.jpg);
  background-size: cover;
}

.blue-block a, .blue-block a:visited, .blue-block a:active,
  .orange-block a, .orange-block a:visited, .orange-block a:active {
  color: #264B7F;
}

.orange-block {
  background-color: #D56C00;
  background: #D56C00 url(../images/orange-bg-texture-stars.jpg);
  background-size: cover;
}

.purple-block {
  background-color: #615c85;
  color: #FFFFFF;
  background: #615c85 url(../images/purple-bg-texture.jpg);
  background-size: cover;
}

.green-block {
  background-color: #3DC165;
  background: #3DC165 url(../images/green-bg-texture.jpg);
  background-size: cover;
}

.pink-block {
  background-color: #FF1961;
  background: #FF1961 url(../images/pink-bg-texture.jpg);
  background-size: cover;
}

.header-block {
  height: 60px;
}

.header-block h2 {
  margin-bottom: 0;
}

.header-block p {
  font-size: 1.8rem;
  line-height: 6.0rem;
}

.hero-block {
  background: url(../images/hero-stars.jpg);
  background-size: cover;
  min-height: 640px; /* 480 on smaller screens */
  color: #ffffff;
}

.hero-block-alt {
  background: url(../images/hero-bird.jpg);
  background-size: cover;
  color: #000000;
}

.hero-headline h1 {
  font-size: 3.8rem;
  line-height: 4.8rem;
  text-align: center;
  margin: 0 auto;
  padding: 80px 0;
  color: #ffffff;
}

.hero-headline h1 span {
  font-size: 4.2rem;
  font-weight: 800;
  display: block;
  margin-top: 20px;
}

.case-study-block {
  background: url(../images/faded-chart-blue-area.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom;
}

.testimonial-block {

}

.method-block {
  /*background: #D56C00;*/
}

.method-block h2 {
  text-align: center;
}

.method-block p {
  text-align: justify;
}

.success-block {

}

.experiment-block {
  /*background: #00C7FF url(../images/blue-bg-texture.jpg);
  background-size: cover;*/
}

.experiment-block h4 {
  text-align: center;
}

.experiment-block p {
  text-align: justify;
}

.automation-block {

  /*background: #3DC165 url(../images/hexagon-light-green.png);*/
  /*background: #00C7FF url(../images/green-bg-texture.jpg);
  background-size: cover;*/
  background-position: 150% 100%;
  background-repeat: no-repeat;
}

.join-block {
  
}

.footer-block {
  text-align: center;
  margin: 40px auto;
}

.footer-block a {
  color: #000000;
}

@media (max-width: 550px) {
  .header-block {
    height: auto;
  }
}

/* Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.circle {
  font-size: 10em;
  display: inline-block;
  width: 60px;
  height: 60px;
  border: 15px solid #ffffff;
  position: relative;
  border-radius: 50%;
  position: absolute;
  /*top: -45px;*/
  top: -30px;
  left: 50%;
  margin-left: -45px;
}

.blue-circle {
  /*border-bottom: 40px solid #00C7FF;*/
  border: 15px solid #38aac2;
}

.orange-circle {
  border: 15px solid #D56C00;
}

.purple-circle {
  border: 15px solid #615c85;
}

.green-circle {
  border: 15px solid #3DC165;
}

.pink-circle {
  border: 15px solid #FF1961;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid black;
  position: absolute;
  top: -39px;
  left: 50%;
  margin-left: -40px;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #333333;
  position: absolute;
  bottom: -40px;
  left: 50%;
  margin-left: -40px;
  z-index: 10;
}

.white-arrow {
  border-bottom: 40px solid #ffffff;
}

.blue-arrow {
  /*border-bottom: 40px solid #00C7FF;*/
  border-bottom: 40px solid #38aac2;
}

.orange-arrow {
  border-bottom: 40px solid #D56C00;
}

.purple-arrow {
  border-bottom: 40px solid #615c85;
}

.green-arrow {
  border-bottom: 40px solid #3DC165;
}

.pink-arrow {
  border-bottom: 40px solid #FF1961;
}

.hexagon-aside {
  margin-top: 200px;
  padding-right: 60px;
}

.hexagon-board {
  position: relative;
  padding-left: 60px;
  margin: 40px auto;
  min-height: 660px;
  width: 980px;
}

.hexagon {
  position: absolute;
  width: 300px; 
  height: 173.21px;
  background-color: #00C7FF;
  margin: 86.60px 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.hexagon h3 {
  text-align: center;
  margin-top: 20px;
}

.hexagon h3 a {
  color: #ffffff;
  text-decoration: none;
}

.orange-hexagon {
  background-color: #D56C00;
}

.purple-hexagon {
  background-color: #615c85;
}

.green-hexagon {
  background-color: #3DC165;
}

.pink-hexagon {
  background-color: #FF1961;
}

.hexagon-1 {
  
}

.hexagon-2 {
  top: 0px;
  left: 370px;
}

.hexagon-3 {
  top: 270px ;
  left: 215px;
}

.hexagon-4 {
  top: 270px;
  left: 525px;
}

.hexagon-5 {
  top: 0px;
  left: 680px;
}

@media (max-width: 550px) {
  .hexagon-board {
    margin-left: 0;
    min-height: 1620px;
    padding-left: 0;
    width: auto;
  }
  .hexagon-1, .hexagon-2, .hexagon-3, .hexagon-4, .hexagon-5 {
    position: relative;
    top: 0;
    left: 0;
    margin: 180px auto 80px auto;
  }
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 43.9340px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.hexagon:before {
  top: -106.0660px;
}

.hexagon:after {
  bottom: -106.0660px;
}

/*cover up extra shadows*/
.hexagon span {
  display: block;
  position: absolute;
  top:0px;
  left: 0;
  width:268px;
  height:141.2051px;
  z-index: 2;
  background: inherit;
  padding: 16px;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

.align-right {
  text-align: right;
}