/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  background: url("../svgs/bgd.svg");
  background-size: 10px 10px;
  margin: 0;
  overflow-x: hidden;
}

form {
    padding-left: 20px;
    padding-right: 20px;
	width:280px;
	height:auto;
	overflow:hidden;
}

textarea {
  overflow: auto;
  vertical-align: top;
    height: 50px;
}

input, textarea {
  border: 1px solid #bbb;
  background: #fff;
  padding: 0.7em;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

  input.code, textarea.code {
    font-family: "source-code-pro", monospace;
}

  input:focus, textarea:focus {
    border-color: #2BDE73;
    outline: none;
}

form input, form textarea {
  margin-bottom: 0.5em;
}

button, a.button {
  font-size: 12px;
  text-transform: uppercase;
  background:#2BDE73;
	border:none;
	color:white;
	cursor:pointer;
	display:inline-block;
	float:right;
	clear:right;
  transition: all 0.3s ease-in-out;
}


  button:hover, a.button:hover {
    background:#2A735B;
}

  button:hover.emphasis, a.button:hover.emphasis {
    color: white;
    background-color: #2A735B;
}

  button[disabled], button[disabled]:hover, a.button[disabled], a.button[disabled]:hover {
    color: #b0e2d2;
    border-color: #b0e2d2;
}


.footer-container {
    width: 95%;
    padding-left: 20px;
    font-weight: 300;
    font-size: 11px;
    font-style: italic;
    line-height: 18px;
    text-align: center;
}

.banner {
  position: fixed;
  width: 100%;
  height: 200px;
  top: 0px;
  left: 0px;
  background: -moz-linear-gradient(top, rgba(0,0,2,1) 0%, rgba(0,0,2,1) 24%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,2,1) 0%,rgba(0,0,2,1) 24%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,2,1) 0%,rgba(0,0,2,1) 24%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000002', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  z-index: 389;
}

#ks-flash {
   position: absolute;
   opacity: 1;
   width: 220px;
   left: 0px;
   top: 0px;
   z-index: 99;
}

#logo{
 position: fixed;
 width: 200px;
 padding-top: 40px;
 margin-left: -100px;
 left: 50%;   
}

#intro{
  background: no-repeat center center;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background-image: url(../img/main-pic-02.jpg);
  background-size: cover;   
}

.cross-bar {
    background-color: rgba(225, 220, 165, 0.01);
}

#cross-bar-01 {
   height: 500px;
}

#cross-bar-02 {
   height: 700px;
}

#cross-bar-03 {
   height: 600px;
   padding-top: 100px;
}

#cross-bar-04 {
   height: 600px;
}

#cross-bar-05 {
   height: 650px;
   padding-top: 50px;
}

#cross-bar-06 {
   height: 700px;
   padding-top: 0px;
}

.screen {
    height: 570px;
    padding-top: 200px;
    
}

#screen-03 {
    padding-top: 400px;
}

#screen-04 {
    padding-top: 400px;
    height: 270px;
}

#screen-05 {
    padding-top: -200px;
    height: 870px;
}


.pic-holder {
        position: relative;
        z-index: 69;
        width: 710px;
        top: 0px;
        left: 40%;
        margin-left: -2px;
}

.image00 {
    width: 100%;
        
        
}

#vid-btn {
        position: relative;
        z-index: 70;
        bottom: 40px;
        left: -590px;
    
}

.image04 {
        position: relative;
        z-index: 69;
        width: 520px;
        top: -175px;
        left: 630px;
        margin-left: -100px;
}

.image05 {
        position: relative;
        z-index: 69;
        width: 425px;
        top: 190px;
        left: 20%;
        margin-left: 50px;
}

.image06 {
        position: relative;
        z-index: 69;
        width: 425px;
        top: 10px;
        left: 50%;
        margin-left: -212px;
}

.image07 {
        position: relative;
        z-index: 69;
        width: 625px;
        top: 0px;
        left: 50%;
        margin-left: -100px;
}

.img-pg {
        position: relative;
        z-index: 69;
        top: 123px;
        left: 50%;
        margin-left: -100px;
        width: 200px;
}

#clavicle {    
       position: relative;
       opacity: .01;
       top: 290px;
       width: 200px;
        left: 50%;

       z-index: 100;
}

.phone-wrapper {
    position: relative;
            left: 30%;
            margin-left: 50px;
            top: 50px;

}

.img-hor {
        position: absolute;
        z-index: 69;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.img-insert {
        position: absolute;
        z-index: 99;
        top: 50px;
    left: 55px;
}

/*left text*/

.l-text-config {
    position: absolute;
    width: 320px;
    height: 600px;
    margin-left: 150px;
}

.l-heading-bullet {
    position: absolute;
    right: 0px;
    text-align: center;
    vertical-align: middle;
    width: 25px;
    height: 20px;
    color: #fff;
    background-color: #000;
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    line-height: .95;
    padding-top: 7px;
}

.l-heading {
    font-weight: 700;
    text-align: right;
    padding-top: 40px;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.25;
    text-transform: uppercase;
}

.l-heading p {
    font-weight: 300;
    padding-top: 30px;
    font-size: 14px;
    line-height: 24px;
    text-transform: none;
}

.l-heading hr {
    position: absolute;
    right: 0px;
    height: 6px;
    background-color:#333;
    width: 50px;
}

/*centre text*/

.c-text-config {
    position: absolute;
    left: 50%;
    margin-left: -275px;
    width: 550px;
    height: 600px;
}

.c-heading {
    text-align: center;
    padding-top: 20px;
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
}

.c-heading p {
    font-weight: 300;
    padding-top: 30px;
    font-size: 14px;
    line-height: 24px;
    text-transform: none;
}

.c-heading hr {
    position: absolute;
    left: 50%;
    margin-left: -25px;
    right: 0px;
    height: 6px;
    background-color:#333;
    width: 50px;
}

#image01 {
        position: absolute;
        z-index: 69;
        width: 175px;
        top: 295px;
        left: 50%;
        margin-left: -255px;
}

#image02 {
        position: absolute;
        z-index: 99;
        width: 245px;
        top: 245px;
        left: 50%;
        margin-left: -122px;
}

#image03 {
        position: absolute;
        z-index: 69;
        width: 175px;
        top: 295px;
        left: 50%;
        margin-left: 80px;
}

/*right text*/

.r-text-config {
    position: absolute;
    width: 320px;
    height: 600px;
    right: 150px;
}

.r-heading-bullet {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 25px;
    height: 20px;
    color: #fff;
    background-color: #000;
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    line-height: .95;
    padding-top: 7px;
}

.r-heading {
    text-align: left;
    padding-top: 40px;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.25;
    text-transform: uppercase;
}

.r-heading p {
    font-weight: 300;
    padding-top: 30px;
    font-size: 14px;
    line-height: 24px;
    text-transform: none;
}

.r-heading hr {
    position: absolute;
    height: 6px;
    background-color:#333;
    width: 50px;
}










svg {
  vertical-align: middle;
}
.scroll-down {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  bottom: 35px;
  padding-left: 7px;
  cursor: pointer;
  z-index: 2;
  color: #c7c4b8;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.scroll-down.svg svg {
  width: 25px;
  opacity: 1;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
.scroll-down.svg .stroke {
  stroke: #ffffff ;
}
.scroll-down.svg .scroller {
  fill: #ffffff;
  -webkit-animation: updown 1s infinite;
  -moz-animation: updown 1s infinite;
  -o-animation: updown 1s infinite;
  animation: updown 1s infinite;
}

@-webkit-keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-moz-keyframes updown {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -moz-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-o-keyframes updown {
    0% {
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -o-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes updown {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.character {
  background: url(../svgs/cycle-sheet.svg);
  position: absolute;
  width: 200px;
  height:155px;
  top: 270px;
  left: 50%;
  margin-left: -100px;
}

.character2 {
  background: url(../svgs/runner-sheet.svg);
  background-size: 100px 2364px;
  opacity: .5;
  position: absolute;
  width: 100px;
  height:118px;
  margin-left: -75px;
}

.character3 {
  background: url(../svgs/skier-sheet.svg);
  background-size: 155px 1403px;
  opacity: .5;
  position: absolute;
  width: 155px;
  height:140px;
  margin-left: -100px;
}



#disc {    
   position: absolute;
   opacity: .5;
   height: 460px;
   width: 460px;
   left: 50%;
   margin-left: -230px;
    top: 110px;
    z-index: -10;

}

.mountains{
    background-image: url('../svgs/mountains.svg');
    background-repeat:repeat-x;
    position: absolute;
    top: 150px;
    left: 50%;
   margin-left: -170px;
    width:340px;
    height:220px;
    z-index: -11;
}

#container {    
   position: absolute;
   top: 175px;
   left: 50%;
}

#sm-runner {    
   position: absolute;
   opacity: .85;
   width: 70px;
    top: 425px;
    z-index: -10;
}

#sm-skier {    
   position: absolute;
   opacity: .85;
   width: 90px;
   right: 0%;
   margin-right: -130px;
    top: 425px;
    z-index: -10;
}

#bike-icon {    
   position: relative;
   width: 60px;
   left: 5%;
   margin-left: -700px;
   top: 410px;
   z-index: 100;
}


#checkout-icon {    
   position: absolute;
   width: 45px;
   right: 5%;
   margin-right: 1000px;
   top: 410px;
   z-index: 100;
}


#approved-badge {    
   position: absolute;
    opacity: .01;
    padding-top: 40px;
   width: 20px;
   right: 32%;
   margin-left: 5px;
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
    z-index: 180;
}

#strava-logo {    
   position: relative;
   opacity: .1;
   width: 100px;
   left: 32%;
   margin-left: -690px;
   top: 175px;
   z-index: 100;
}

#garmin-logo {    
   position: relative;
   opacity: .1;
   width: 100px;
   left: 50%;
   margin-left: -950px;
   top: 275px;
   z-index: 100;
}

#badge-container {    
   position: relative;
   width: 100%;
   height: 150px;
   top: 250px;
}

#solepace-badge {    
   position: absolute;
   opacity: .02;
   width: 90px;
   left: 39%;
   margin-left: -1000px;
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
}

#sprocket-badge {    
   position: absolute;
   width: 130px;
   left: 50%;
   margin-left: -75px;
    z-index: 200;
}

#slopemax-badge {    
   position: absolute;
   opacity: .02;
   width: 90px;
   right: 39%;
   margin-right: -1000px;
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg); /* Standard syntax */
}

#segment-graphic {    
   position: absolute;
   opacity: .02;
   width: 200px;
   padding-top: 100px;
   left: 20%;
   margin-left: -75px;
   z-index: 200;
}

#outer-disc {    
   position: absolute;
   opacity: .02;
   width: 220px;
   padding-top: 100px;
   right: 16%;
   margin-right: -65px;
   z-index: 200;
}

#renders {    
   position: absolute;
   padding-top: 320px;
   left: 50%;
   margin-left: -150px;
   z-index: 200;
}


.gallery {
  position: relative;
  top: 200px;
  margin-left: 50%;
  left: -320px;
  width: 640px;
  padding: 15px;
  z-index: 290;
}

#gallery_01 {
  padding-top: 225px;
}

#gallery_02 {
  padding-top: 80px;
}

#gallery_03 {
  padding-top: 5px;
}

.gallery > div {
  position: relative;
  float: left;
  padding: 5px;
}

.gallery > div > img {
  display: block;
  box-shadow: 0 14px 14px rgba(0,0,0,.3);
  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div:hover {
  z-index: 310;
}

.gallery > div:hover > img {
  transform: scale(2.25,2.25);
  transition: .3s transform;
}


#remote-wrap {
    width: 340px;
    margin: 8px auto;
    position: relative;
}

a {
    text-decoration: none;
    color: black;
}

.remote {
    width: 104;
    height: 220px;
    position: absolute;
    top: 18px;
    left: 400px;
    z-index: -2;
    
}

.image-link {
    display: block;
    width: 350px;
    height: 350px;
    position: absolute;
    top: 0; left: 0;
}

#one {
    background: url(../img/1d.png) no-repeat;
    z-index: 2;
}
#two {
    background: url(../img/2d.png) no-repeat;
}
#three {
    background: url(../img/3d.png) no-repeat;
}
#four {
    background: url(../img/4d.png) no-repeat;
}
#five {
    background: url(../img/5d.png) no-repeat;
}
#six {
    background: url(../img/6d.png) no-repeat;
}
#seven {
    background: url(../img/2d.png) no-repeat;
}
#eight {
    background: url(../img/8d.png) no-repeat;
}
#nine {
    background: url(../img/9d.png) no-repeat;
}
#ten {
    background: url(../img/10d.png) no-repeat;
}
#eleven {
    background: url(../img/11d.png) no-repeat;
}
#twelve {
    background: url(../img/12d.png) no-repeat;
}

#one span { 
    position: absolute;
    text-align: center;
    left: 414px;
    top: 60px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#two span { 
    position: absolute;
    text-align: center;
    left: 442px;
    top: 60px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#three span { 
    position: absolute;
    text-align: center;
    left: 470px;
    top: 60px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}



#four span { 
    position: absolute;
    text-align: center;
    left: 414px;
    top: 86px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#five span { 
    position: absolute;
    text-align: center;
    left: 442px;
    top: 86px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#six span { 
    position: absolute;
    text-align: center;
    left: 470px;
    top: 86px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}



#seven span { 
    position: absolute;
    text-align: center;
    left: 414px;
    top: 112px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#eight span { 
    position: absolute;
    text-align: center;
    left: 442px;
    top: 112px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#nine span { 
    position: absolute;
    text-align: center;
    left: 470px;
    top: 112px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#ten span { 
    position: absolute;
    text-align: center;
    left: 414px;
    top: 138px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#eleven span { 
    position: absolute;
    text-align: center;
    left: 442px;
    top: 138px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

#twelve span { 
    position: absolute;
    text-align: center;
    left: 470px;
    top: 138px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

.image-link span { width: 109px; display: block; height: 19px; padding: 5px; background: #000000; opacity: 0; }
.image-link:hover { z-index: 100; }
.image-link:hover span { opacity: .6; }

@media only screen and (max-width: 1200px) {
/*    body {
        background-color: lightblue;    
    }*/
    
    .img-pg {
    margin-left: -220px;
    }

    #clavicle {    
       margin-left: -220px;
    }
    
    .pic-holder {
        width: 420px;
        left: 480px;
        top:45px;
        }
    
    #vid-btn {
        left: -300px;
}
    
    .phone-wrapper {
        left: 17%;
        margin-left: -50px;
        }
    
    #strava-logo {    
        left: 10%;
        }
    
    #garmin-logo {    
        left: 30%;
        }
    
    .image04 {
        width: 400px;
        top: -20px;
        }
    
    #segment-graphic {
       visibility: hidden;
       }

    #outer-disc {
       visibility: hidden;
       }
    
    #approved-badge {    
       padding-top: 65px;
       left: 625px;
        }
    
     .image07 {
        width: 380px;
        left: 600px;
        top:45px;
        }
        
    }
    
    @media only screen and (max-width: 860px) {
/*    body {
        background-color: lightgreen;
    }*/
        
    .img-pg {
    margin-left: -360px;
    }

    #clavicle {    
       margin-left: -360px;
    }
        
        
    .pic-holder {
        width: 220px;
        left: 480px;
        top:45px;
        }
        
     #vid-btn {
        left: -100px;
}
        
   .phone-wrapper {
        visibility: hidden;
        }
    
    #strava-logo {    
        visibility: hidden;
        }
    
    #garmin-logo {    
        visibility: hidden;
        }    
        
    .image04 {
        width: 300px;
        top: 120px;
        }
    
    #approved-badge {    
       padding-top: 85px;
        }    
        
    .image07 {
        width: 220px;
        left: 600px;
        top:45px;
        }    
    }

    @media only screen and (max-width: 600px) {
/*    body {
        background-color: orangered;
    }*/
        
   .img-pg {
   visibility: hidden;
    }

    #clavicle {    
       visibility: hidden;
    }
        
    .pic-holder {
        visibility: hidden;
        }
        
    .c-heading {
        width: 380px;
        left: 50%;
        margin-left: 100px;
    }
        
     #sm-runner {    
        visibility: hidden;
        }

    #sm-skier {    
        visibility: hidden;
        }    
        
    .phone-wrapper {
        visibility: hidden;
        }
    
    #strava-logo {    
        visibility: hidden;
        }
    
    #garmin-logo {    
        visibility: hidden;
        }
        
   #bike-icon {    
        visibility: hidden;
        }
    
    #checkout-icon {    
        visibility: hidden;
        }
        
    #renders {    
        visibility: hidden;
        }
        
    #badge-container {    
        visibility: hidden;
        }
        
    .image-link {
        width: 200px;
        height: 200px;
        }
        
    #one {
        background-size: 200px;
        }
    #two {
        background-size: 200px;
        }
    #three {
        background-size: 200px;
        }
    #four {
        background-size: 200px;
        }
        #one {
        background-size: 200px;
        }
    #five {
        background-size: 200px;
        }
    #six {
        background-size: 200px;
        }
    #seven {
        background-size: 200px;
        }
    #eight {
        background-size: 200px;
        }
    #nine {
        background-size: 200px;
        }
    #ten {
        background-size: 200px;
        }
        #one {
        background-size: 200px;
        }
    #eleven {
        background-size: 200px;
        }
    #twelve {
        background-size: 200px;
        }
        
    #remote-wrap {
        width: 140px;
        }    
        
    .remote {
        left: 240px;
        z-index: 99;
        }
        
    #caption {
        visibility: hidden;
        }
        
     .image04 {
        visibility: hidden;
        }
    
    #approved-badge {    
       visibility: hidden;
        } 
        
        .image07 {
        visibility: hidden;
        }     
    }

    @media only screen and (max-width: 375px) {
/*    body {
        background-color: lightgreen;
    } */
        
    #logo{
     width: 140px;
     margin-left: -210px;
     left: 50%;   
    }
        
    #ks-flash {
       width: 160px;
       left: 0px;
    }    
        
        
    }


.modal {
	padding: 30px;
	left: 50%;
	top: 50%;	
	position: fixed;
	z-index: 500;
	background: #000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.modal.size-m {
	width: 600px;
	height: 400px;
}

.modal.size-l {
	width: 700px;
	height: 500px;
}

.modal.size-s {
	width: 500px;
	height: 300px;
}

.modal-bg {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.5;
	top: 0;
	left: 0;
	z-index: 100;
}

.modal-close {
	color: #b1b0ac;
	font-size: 30px;
	line-height: .5;
	position: absolute;
	top: 10px;
	right: 10px;
	font-weight: bold;
	cursor: pointer;
}

.modal-close:hover {
	color: #2BDE73;
}