body {
  background: #fff;
    min-width: 900px;


}

    ::selection {
  background: #000; /* WebKit/Blink Browsers */

}
::-moz-selection {
  background: #000; /* Gecko Browsers */
  
}

a{
    text-decoration:none;
    color:#49ca3e;

}

.tb{
font-size:45px;
}

.cover{
  width:100%;
  height: 660px;
  background-image:url("../images/proto8.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: right top;
     background-attachment: fixed;
}

.cover2{
    width:100%;
  height: 500px;
  background-image:url("../images/proto10.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: right top;
     background-attachment: fixed;
}

.cover3{
    width:100%;
  height: 500px;
  background-image:url("../images/proto11.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: right top;
     background-attachment: fixed;
}
.wrapper {
  max-width: 1600px;

  margin: auto;
  text-align: center;

  overflow-x: hidden;
}
.menu{
width: 100%;
display: block;
position: fixed;
background-color:white;
z-index:999999;
height:50px;
  border-bottom: 1px solid #c2c2c2;
}
.menu .nav{
    margin: 0;

    position: absolute;

    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0) }
}
.temp{
  position:relative;
  top:80px;
  font-size: 12px;
}
.menu .nav a{
color: #000;
display: inline-block;
float: left;
position: relative;
text-transform: uppercase;
line-height: 50px;
padding: 0px 30px;
font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
letter-spacing: 2px;
}
.menu a:hover{
  color: #49ca3e;
      -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.menu p{
float: right;
line-height: 50px;
font-size: 12px;
margin-right: 5%;
}

.menu ul li {
  float:left;

}


.btn-square{
  display:block;
    border: 1px solid #525353;
    margin-top: 80px;
    width: 60px;
    height:60px;
    opacity:1;
        -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


.btn-square:hover{
  opacity: 0.7;
      -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


.btn-square svg{
margin: 5px 0px 0px 5px;
width: 50px;
height: 50px;
position: relative;
top: 0px;
left: 0px;
fill:#525353;
opacity:1;
    -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


.btn-square svg:hover{
opacity:0.7;
    -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}
.content-text{
display: block;
position: relative;
margin: 50px auto 50px;
width: 750px;
}
.content-text p{
color: #525353;
font-size: 16px;
text-align: left;
line-height: 30px;
font-style: normal;
}

.content-text .thi{
    font-style: italic;

  font-size:1em!important;
  line-height: 25px;

}
.content-text .intro{
position: absolute;
width: 530px;
text-align: left;
margin-top: 130px;
}

.content-text .explain{

}
.content-text .explain p{
margin-top: 0px;
margin-bottom: 50px;
text-transform: none;
letter-spacing: 0px;
}
.content-text .explain h4{
text-align: left;

}

.content-text .explain ul{
  position: relative;
  margin: 0 auto;
  width:500px;
}
.content-text .explain li{
  text-decoration: none;
  padding-bottom: 20px;
  text-align: left;
}
.content-text .explain li a{
  text-decoration: none;
  text-align: left;
  color:black;
  font-size: 14px;
  font-weight: bold;
text-transform: uppercase;
}
.content-text .explain li a:hover{
  color:#49ca3e;
  font-style: bold;
    -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.content-text .explain li:last-child{
padding-bottom: 100px;
}
.content-text .explain li:first-child{
padding-top: 30px;
}

.content-text .intro p {

line-height: 35px;
text-align: left;
font-size: 25px;
font-style: italic;
  }


.highlight{
  font-weight: 700;
}
.thingy {
  display: block;
  position: relative;
  text-align: center;
  margin: 0px auto;
  width: 480px;
}

.text{
display:block;
position: absolute;
background-color:green;
float: left;
margin: 50px auto;
  width: 750px;
}
.inner-circle {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 480px;
  width: 480px;
  border-radius: 1000px;
  border: 2px dashed #b9b9b9;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.inner-circle.inner-circle-2 {
  top: 32px;
  left: 32px;
  height: 416px;
  width: 416px;
}
.inner-circle.inner-circle-2 .arc {
  transform: rotate(105deg) skewX(10deg);
}
.inner-circle.inner-circle-2 .arc:before {
  transform: skewX(-10deg);
}
.inner-circle.inner-circle-3 {
  top: 64px;
  left: 64px;
  height: 352px;
  width: 352px;
}
.inner-circle.inner-circle-3 .arc {
  transform: rotate(90deg) skewX(10deg);
}
.inner-circle.inner-circle-3 .arc:before {
  transform: skewX(-10deg);
}
.inner-circle.inner-circle-selected {
  border: 2px solid #525353;
  z-index: 2;
}
.arc {
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: 50%;
  bottom: 50%;
  left: -3px;
  transform-origin: 100% 100%;
  transform: rotate(50deg) skewX(0deg);
  z-index: 10;
}
.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 5px #fff;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(0deg);
  content: '';
}
.arc-2 {
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: 50%;
  bottom: 50%;
  left: -3px;
  transform-origin: 100% 100%;
  transform: rotate(170deg) skewX(0deg);
  z-index: 10;
}
.arc-2:before {
  box-sizing: border-box;
  display: block;
  border: solid 5px #fff;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(0deg);
  content: '';
}
.steps {
  position: absolute;
  top: 96px;
  left: 96px;
  height: 288px;
  width: 288px;
  border-radius: 1000px;
  border: 2px solid #49ca3e;
}
svg {
  position: absolute;
  top: 152px;
  left: 152px;
  height: auto;
  width: 176px;
}
svg.overlay path {
  fill: #525353;
  stroke: #525353;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.hexagon {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
}
.hexagon polygon {
  fill: #fff;
  stroke: #49ca3e;
 -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}

.hexagon polygon.inner {
  opacity: 0;
}
.hexagon.hexagon-4 .inner {
  opacity: 1;
}

.step .step-num {
  position: absolute;
  color: #49ca3e;

}
.step {
  position: absolute;
  top: 171px;
  left: -16px;
  height: 48px;
  width: 48px;
  z-index: 10;
  cursor: pointer;
}
.step:hover .step-num {
  color: #fff;
}
.step:hover .hexagon polygon.outer {
  fill: #49ca3e;
}
.step.step-2 {
  top: 50px;
  left: -5px;
}
.step.step-3 {
  top: -22px;
  left: 120px;
}
.step.step-4 {
  top: 50px;
  left: 245px;
}
.step.step-5 {
  top: 269px;
  left: 356px;
}

/*.step.step-4:hover svg.hexagon polygon.outer {
  fill: #525353;
}
.step.step-4:hover svg.hexagon polygon.inner {
  fill: #49ca3e;
}
*/
.step-num {
  position: absolute;
  top: 17.6px;
  left: 16px;
  color: #49ca3e;
  font-size: 13px;
font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
  z-index: 2;
}
/* COPY */
.copy {
  position: relative;
  padding-top: 528px;
  width: 100%;
  margin-bottom: 380px;
}
.copy .copy-wrapper {
  position: absolute;
  display: block;
  float:left;
  margin: 10px auto;
  width: 550px;
  color: grey;
 -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}
.copy .copy-wrapper .copy-num {
  position: absolute;
  top: 11px;
  left: -168px;
}
.copy .copy-wrapper .copy-num svg.hexagon {
  width: 140px;
}
.copy .copy-wrapper .copy-num svg.hexagon polygon {
  stroke-width: 0.4px;
}
.copy .copy-wrapper .copy-num .step-num {
  top: 48px;
  left: 18px;
  width: 100px;
  color: #49ca3e;
  text-align: center;
  font-size: 43px;
font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
  -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
  z-index: 10;
}
.copy .copy-wrapper .copy-num .step-num .small-logo {
  position: absolute;
  top: 50px;
  left: 25px;
  width: 53px;

}
.copy .copy-wrapper .copy-num .step-num .small-logo path {
  fill: none;
  stroke: #49ca3e;
  stroke-width: 0.5px;
}
.copy .copy-wrapper .copy-content {
  width: 650px;
  margin-left:-100px;
  font-size: 14px;
  line-height: 1.16em;
  padding: 30px 30px 30px 80px;
  text-align: left;
  border: 1px solid #2f2f2f;
  -webkit-box-shadow: 8px 8px 0px 0px rgba(163,163,163,1);
-moz-box-shadow: 8px 8px 0px 0px rgba(163,163,163,1);
box-shadow: 8px 8px 0px 0px rgba(163,163,163,1);
}
.copy .copy-2 {
  margin-left: 100vw;
}
.copy .copy-3 {
  margin-left: 200vw;
}
.copy .copy-4 {
  margin-left: 300vw;
}
h6 {
  margin-bottom: 2px;
  font-size: 10px;
  color: #49ca3e;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "brandon-grotesque",sans-serif;
font-weight: 600;
}
h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.0em;
  margin-bottom: 16px;
font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
}
h2 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
}

p {
  font-family: 'Droid Serif', serif;
  font-style: italic;
  color:#525353;
  font-size:14px;
  line-height: 24px;
  letter-spacing:0.01em;
}

.about{
    width: 370px;
  font-size: 16px;
  line-height: 25px;
  color: black;
  margin-top: 280px;
  float: left;

  z-index: 999;
  position: absolute;
}


.content-text .abstract p:first-of-type{
  font-size: 14px;
  line-height: 26px;

 -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

.bot80{
  margin-bottom:80px;
}

.ab{
  margin-top: 170px;position: absolute;left: 370px;z-index: 0;
}

.footer p{
margin-top:380px;
  font-size:10px;
  width:700px;
  text-align:center;
  line-height: 15px;
}
/* STATES */
.thingy[step="1"] svg.overlay .u,
.thingy[step="1"] svg.overlay .dash {
  opacity: 0.9;
}
.thingy[step="1"] .inner-circle-selected {
  top: 64px;
  left: 64px;
  height: 352px;
  width: 352px;
}
.thingy[step="1"] .step-1 .step-num {
  color: #fff;
}
.thingy[step="1"] .step-1 .step-icon {
  top: -300px;
  left: 70px;
  opacity: 1;
  width: 410px;
  }
  .step-icon {
  position: absolute;
  opacity:0.0;
 -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  }
.thingy[step="1"] .hexagon-1 polygon.outer {
  fill: #49ca3e;
}
.thingy[step="1"] .copy .copy-1 {
  margin-left: 0;
}
.thingy[step="1"] .copy .copy-2 {
  margin-left: 100vw;
}
.thingy[step="1"] .copy .copy-3 {
  margin-left: 200vw;
}
.thingy[step="1"] .copy .copy-4 {
  margin-left: 300vw;
}
.thingy[step="1"] .copy .copy-5 {
  margin-left: 400vw;
}
.thingy[step="2"] svg.overlay .dot,
.thingy[step="2"] svg.overlay .dash {
  opacity: 0.9;
}
.thingy[step="2"] .inner-circle-selected {
  top: 32px;
  left: 32px;
  height: 416px;
  width: 416px;
}
.thingy[step="2"] .step-2 .step-num {
  color: #fff;
}
.thingy[step="2"] .step-2 .step-icon {
  top: -10px;
  left: 55px;
  opacity: 1;
  width: 180px;
  }
.thingy[step="2"] .hexagon-2 polygon.outer {
  fill: #49ca3e;
}
.thingy[step="2"] .copy .copy-1 {
  margin-left: -100vw;
}
.thingy[step="2"] .copy .copy-2 {
  margin-left: 0;
}
.thingy[step="2"] .copy .copy-3 {
  margin-left: 100vw;
}
.thingy[step="2"] .copy .copy-4 {
  margin-left: 200vw;
}
.thingy[step="2"] .copy .copy-5 {
  margin-left: 300vw;
}
.thingy[step="3"] svg.overlay .u {
  opacity: 0.9;
}
.thingy[step="3"] .inner-circle-selected {
  top: 0px;
  left: 0px;
  height: 480px;
  width: 480px;
}
.thingy[step="3"] .step-3 .step-num {
  color: #fff;

}
.thingy[step="3"] .step-3 .step-icon {
top: 42px;
  left: -100px;
  opacity: 1;
  width: 240px;
  }
.thingy[step="3"] .hexagon-3 polygon.outer {
  fill: #49ca3e;
}
.thingy[step="3"] .copy .copy-1 {
  margin-left: -200vw;
}
.thingy[step="3"] .copy .copy-2 {
  margin-left: -100vw;
}
.thingy[step="3"] .copy .copy-3 {
  margin-left: 0;
}
.thingy[step="3"] .copy .copy-4 {
  margin-left: 100vw;
}
.thingy[step="3"] .copy .copy-5 {
  margin-left: 200vw;
}
.thingy[step="4"] .inner-circle-selected {
  top: 0px;
  left: 0px;
  height: 480px;
  width: 480px;
}
.thingy[step="4"] .step-4 .step-num {
  color: #fff;
}
.thingy[step="4"] .step-4 .step-icon {
  top: 4px;
  left: -196px;
  opacity: 1;
  width: 200px;

  }
.thingy[step="4"] .hexagon-4 polygon.outer {
  fill: #49ca3e;
}
.thingy[step="4"] .copy .copy-1 {
  margin-left: -300vw;
}
.thingy[step="4"] .copy .copy-2 {
  margin-left: -200vw;
}
.thingy[step="4"] .copy .copy-3 {
  margin-left: -100vw;
}
.thingy[step="4"] .copy .copy-4 {
  margin-left: 0;
}
.thingy[step="4"] .copy .copy-5 {
  margin-left: 100vw;
}
.thingy[step="5"] .inner-circle-selected {
  top: 0px;
  left: 0px;
  height: 480px;
  width: 480px;
}
.thingy[step="5"] .step-5 .step-num {
  color: #fff;
}
.thingy[step="5"] .step-5 .step-icon {
  top: -119px;
  left: -212px;
  opacity: 1;
  width: 200px;
  }
.thingy[step="5"] .hexagon-5 polygon.outer {
  fill: #49ca3e;
}
.thingy[step="5"] .copy .copy-1 {
  margin-left: -400vw;
}
.thingy[step="5"] .copy .copy-2 {
  margin-left: -300vw;
}
.thingy[step="5"] .copy .copy-3 {
  margin-left: -200vw;
}
.thingy[step="5"] .copy .copy-4{
  margin-left: -100vw;
}
.thingy[step="5"] .copy .copy-5 {
  margin-left: 0;
}

/* type */
.bd-300{
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
}

.bd-600{
font-family: "brandon-grotesque",sans-serif;
font-weight: 600;
}

.bd-900{
font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
}

/* FAQ */

.faq{
  text-align:left;
}

.faq p{
   -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    margin-bottom: 50px;
}
.transition, p, ul li i:before, ul li i:after {
  transition: all 0.7s ease-in-out;

}

.flipIn, h1, ul li {
  animation: flipdown 0.7s ease both;
}


.no-select, h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* faq */
.post-title {
  padding: 20px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.post-title-text {
   padding-left: 10px;
   text-decoration: none;
   font-family: "brandon-grotesque",sans-serif;
font-weight: 900;
}

.post-title:hover {
   background-color: #f4f4f4;
   cursor: pointer;
}

.post-title.active {
    background-color: #f4f4f4;
}

.post-title.toggle-trigger:after {
    content: "";   
    margin-left: 10px;  
}

.post-title.active.toggle-trigger:after {
    content: "";
}


/* article */
.article{
  display:block;
  width:230px;
  height:170px;
  background-color:red;
  float:left;
}


/*responsive */



@media only screen and (min-width: 560px) and (max-device-width: 1136px) {

body{
    overflow-x: hidden;

}

.thingy{
display: none;

}

p{
  font-size:0.9em!important;
  line-height: 1.35em!important;
  letter-spacing:none;
}

.copy .copy-wrapper .copy-content {
  font-size:1.3em!important;
  line-height: 1.7em!important;
  color:black;
}
.content-text .abstract p:first-of-type{


 -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;

        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

}

.post-title {
  padding: 30px 20px;
  font-weight: 600;
  letter-spacing: 0.05em;

}



.content-text{
  width: 94%;
}



.content-text .intro {
  position: absolute;

  width: 100%;
  text-align: center;
  margin-top: 130px;
}

.content-text .intro p {

  letter-spacing: 1.5px;
  font-size:2.5em!important;
  line-height: 1.4em!important;
  text-align: center;
}


.post-title {
   font-weight: 600;
   letter-spacing:0.05em;
}

.about{
width: 100%;
  color: black;
  margin-top: 280px;
  z-index: 999;
  position: absolute;
}

.cover{
  opacity:0.5;
}

.faq p{
     -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
   margin-bottom: 50px;
}


.about{
  width: 100%;
  color: black;
  margin-top: 280px;
  float: left;
  z-index: 999;
  position: relative; 
}

.menu {
display: none;
}


.ab{
  margin-top: 170px;
  position: absolute;
  left: 370px;
  z-index: 0;
}

.tb{
font-size:6em;
}

.btn-square{
  display: none;
}


.footer{
  width: 100%;
  font-size: 1em;
}

.footer p{
  width: 100%;
  font-size: 1em;
}

}











/*ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 

body{
    overflow-x: hidden;

}

.thingy{
display: block;
margin-top: 100px;
margin-bottom:500px;
}

.scale{
  -ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Safari */
    transform: scale(1.1,1.1);
}

p{
  font-size:1.5em!important;
  line-height: 1.65em!important;
}

.content-text .abstract p:first-of-type{


 -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

}


.toggle-content p{

  line-height: 1.65em!important;

}

.post-title {
  padding: 30px 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size:1.4em!important;
}

.thingy p{
  font-size:4em!important;

line-height: 1.9em!important;
font-size: 150px!important;
}

.thi{

}

.content-text{
  width: 94%;
}



.content-text .intro {
  position: absolute;

  width: 100%;
  text-align: center;
  margin-top: 130px;
}

.content-text .intro p {

  letter-spacing: 1.5px;
  font-size:2.5em!important;
  line-height: 1.4em!important;
  text-align: center;
}


.post-title {
   font-weight: 600;
   letter-spacing:0.05em;
}

.about{
width: 100%;
  color: black;
  margin-top: 280px;
  z-index: 999;
  position: absolute;
}


.teaser{
  width: 100%;
  height:500px;
    margin-top: 150px;
}

.cover{
  width:100%;
  height: 660px;
  background-image:url("../images/proto8b.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
     background-attachment: local;
     opacity: 1;
}

.cover2{

     background-attachment: local;
     height:800px;

}

.cover3{
  margin-top: 200px;
     background-attachment: local;
     height:800px;
}

.faq p{
     -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
   margin-bottom: 50px;
}


.about{
  width: 100%;
  color: black;
  margin-top: 280px;
  float: left;
  z-index: 999;
  position: relative; 
}

.menu {
display: none;
}


.ab{


  position: relative;
  z-index: 0;

}


.about{
    width: 75%;
    margin: 0 auto;

}

.about p{
    text-align: center;
margin: 0 auto;

}


.ab{
  margin-top: 170px;
  position: relative;
  left:0;
  z-index: 0;
}

.tb{
font-size:6em;
}

.btn-square{
  display: none;
}


.footer{

  font-size: 1em;
}

.footer p{
width: 100%;
  text-align: center;
  font-size: 1em;
}
/*finpad*/
}