/*Remove below after homepage*/
.full-bg {
  background-image: url(../images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: white;

}

#homepage {
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
  }


.hidden{
  display: none;
}



.container{
  width: 100%;

}

.content{
  padding-top: 20px;
  width: 100%;
}

.hp-content{
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


}

.valign{
  margin-top: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.sticky-footer{
  width:100%;
  position: fixed;
  bottom: 0px;
  padding-bottom: 20px;
  z-index: 99;
  overflow: visible;
  background: white;
  border-top: solid #efefef 1px;
}



.clearfix::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.navbar {
  width: 100%;
  height: 85px;
  z-index: 9999;
  position: fixed;
}

.wrapper{
  display: block;
  margin: 0 auto;
  width: 940px;
  padding-top: 20px;
  padding-bottom: 120px;
 
}

#homepage img{
  text-align: center;
  display: block;
  float: none;
  margin: 0 auto;
}


#homepage .continue{
  text-align: center;
  display: block;
  float: none;
  margin: 0 auto;
}


#section-one .wrapper{
  width: 750px;
}

#section-one .column{
  float: left;
  width: 200px;
  margin-left: 40px;
}



.left-side{
  float: left;
  width: 450px;
  padding-right: 20px;
}

.right-side{
  float: right;
  width: 450px;
  border-left: 1px solid #efefef;
  padding-left: 20px;
}


.circle{
  border-radius: 50%;
  background-color: #efefef;
  margin: 0 auto;

}

.metal{
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  margin-top: 20px;
}

.metal img{
  width: 75px;
  height: 75px;
}


.active{
  border: 3px solid gray;
}

.hover{
   border: 3px solid white;
}

.hover:hover{
   border: 3px solid gray;
}


/*Colors for prototype*/

#primary-one{
  background-color: #45ccae;
}

#secondary-one{
  background-color: #1a498f;
}




/*Begin left side circle template*/

.template{
  position: relative;
  width: 200px;
  height: 200px;
  padding: 83px 100px 100px;
  border-radius: 50%;
  margin: auto 0;
}
/*
.template .circle {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 50%; left: 50%;
  width: 4em; height: 4em;
  margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
*/
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg125 { transform: rotate(125deg) translate(-12em) rotate(-125deg); }
.deg45 { transform: rotate(40deg) translate(-121px) rotate(-40deg); }
.deg180 { transform: translate(-12em); }
.deg294 { transform: rotate(294deg) translate(24em) rotate(-294deg); }
.deg281 { transform: rotate(282deg) translate(632px) rotate(-281deg); }




.primary-color {  
  width: 200px;
  height: 200px;
  background-color: #45ccae;
   
}



.secondary-color {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}



.accent-color{
  background-color: #efefef;
  width: 100px;
  height: 100px;
}

.blank {
   background-color: white;
   border: dashed 1px #45ccae;
}




.right-side .column {
    float: left;
    padding-left: 20px;
}



.right-side .circle {
   
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: 20px;
   
}



#section-four .column {
    float: left;
    padding-left: 20px;
}


#section-four .circle {
   
  width: 75px;
  height: 75px;
  background-color: #efefef;
  margin: 0 auto;
  margin-top: 20px;
   
}

#section-four .accent-menu{
  text-align: center;
  padding-top: 300px;}

#section-four ul{
  list-style: none;
  padding-left: 0;
}

#section-four li{
  display: inline-block;
  font-size: 28px;
  margin: 10px;
  color: #efefef;
}

.accent-colors-container {
    position: relative;
}

.accent-colors {
    position: absolute;
}

#section-five {
    border-left: none;
}


/* Basic Styles*/

body { 
  font: 18px/23px "Lato", sans-serif;
  font-weight: 100;
  color: gray;
}

h1 {
  color: gray;
  font-size: 60px;
  line-height: 70px;
  font-weight: 100;
  font-style: italic;
  letter-spacing: 2px;
  text-align: center;
  width: 700px;
  margin: 0 auto;
  margin-bottom: 30px;
}

h2 {
  margin: 0;
  font-size: 36px;
  line-height: 38px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  padding-top: 100px;
}

h3 {
    font-size: 24px;
    padding-bottom: 20px;
    border-bottom: 1px #efefef solid;
}

ul{
  padding-left: 0;
}

li {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
}

.chart li span{
  font-size: 20px;
  margin-left: 10px;
  letter-spacing: 0px;
}

.accent-menu li span{
  font-size: 30px;
}

.share li{
  display: inline-block;
  font-size: 30px;
  color: #efefef;
  margin-right: 15px;
}

a {

  color: #45ccae;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 100;
}

p {
  margin: 0 0 15px 0;
}

strong {
  font-weight: 700;
}

button {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  border: none;

}



.navbar a {
  display: inline-block;
  border: 1px solid #fff;
  font-size: 14px;
  line-height: 24px;
  border-radius: 3px;
  padding: 2px 15px;
  text-decoration: none;
  margin-top: 5px;
}



.logo{
  float: left;
  margin-top: 10px;
  margin-left: 20px;


}


.step{
  text-align: right;
  font-size: 14px;
  color: #45ccae;
  letter-spacing: 3px;
  font-weight: 700;
  padding: 20px 20px 0px;
  font-family: 'Lato', sans-serif;
}

.step span{
  color: gray;
  font-size: 40px;
  font-weight: 100;
  font-style: italic;
  font-family: 'Lato', sans-serif;
}



/*Homepage Circle Button
*/
.circle-btn{
  background-color: transparent;
  margin-top: 20px;
  border: 3px solid #45ccae;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  margin: 0 auto;
  display: block;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.circle-btn:active {
  border-color: #1bbe9a;
  color: #1bbe9a;
}

.circle-btn:hover {
  background: #45ccae;
  color: white;
}


.circle-btn:after {
  content: url("../images/teal-arrow-right.png");
}

.circle-btn:hover:after{
  content: url("../images/teal-arrow-right-ko.png");

}





/* Continue and Return Buttons */


.btn {
  margin-top:20px;
  background: none;
  cursor: pointer;
  width: 175px;
  height: 50px;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50px;
  border: 3px solid #45ccae;
  color: #45ccae;
  background-color: transparent;
  overflow: hidden;

}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:active {
  border-color: #1bbe9a;
  color: #1bbe9a;
}

.btn:hover {
  background: #45ccae;
  color: white;
}



/* Centers buttons within footer */

.both-btns-centered{
  margin: 0 auto;
  width: 375px;
  display: block;
}

.return{
  float: left;
}

.continue{
  float:right;
}

.continue-btn-centered{
  text-align: center;
}

#section-one .continue{
  text-align: center;
  float: none;
}



/*----*/


/*Three column layout*/

.three-column{
  padding-left: 40px;
  margin: 0 auto;
  margin-bottom: 100px;
  display: table;
}


label{
  display: block;
  margin-top: 30px;
}

input[type=radio] {
    margin:10px;
}



/*//Drag and Drop UI Stuff*/
/*.ui-state-highlight{
  background: none;
  border: 1px solid #efefef;
  
}*/








/*All the icon shit*/

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot?f3thcz');
  src:url('../fonts/icomoon.eot?f3thcz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?f3thcz') format('truetype'),
    url('../fonts/icomoon.woff?f3thcz') format('woff'),
    url('../fonts/icomoon.svg?f3thcz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-eyedropper:before {
  content: "\e900";
}
.icon-droplet:before {
  content: "\e901";
}
.icon-spinner:before {
  content: "\e902";
}
.icon-trophy:before {
  content: "\e903";
}
.icon-download3:before {
  content: "\e904";
}
.icon-sun:before {
  content: "\e905";
}
.icon-contrast:before {
  content: "\e906";
}
.icon-star-empty:before {
  content: "\e907";
}
.icon-cool:before {
  content: "\e908";
}
.icon-cross:before {
  content: "\e909";
}
.icon-arrow-right2:before {
  content: "\e90a";
}
.icon-arrow-left2:before {
  content: "\e90b";
}
.icon-facebook2:before {
  content: "\e90c";
}
.icon-pinterest:before {
  content: "\e90d";
}



.icon-btn{
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.icon-active{
  color: #45ccae;
}

.icon-btn:hover{
  color: #45ccae;
  cursor: pointer;
}

.icon-btn:active{
  opacity: 1;
}