/*
 *  Global Colors
 */
 
 
@green: #5fbe7b;
@green-dark: #075c1f;
@green-light-border: #d3ebd2;

@gray-light: #9d9d9d;
@gray-dark: #313131;

@border-radius: 2px;


/*
 *  Global styles, type/heading and color wrapper/classes
 */
 

html, body {
  font-family: 'Open Sans', sans-serif;
  color: @gray-dark;
}

.green{
  color: @green;
}

.green-wrapper {
  background-color: @green;
  color: #fff;
}

.green-light-wrapper
{
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eff6ef;
  border-top: thin solid @green-light-border;
  border-bottom: thin solid @green-light-border;  
}

.gray-wrapper {
  background-color: @gray-dark;
  color: #fff;
}

.h1 {
  margin-bottom: 0px;
  font-weight: 600;
}

.h2 {
  margin-bottom: 0px;
  font-size: 2em;
  font-weight: 600;
  
}

.h3 {
  margin-bottom: 0px;
  margin-top: 0px;
  font-size: 1.8em;
  font-weight: 300;
  
}

p {
  margin-bottom: 0px;
  font-size: 1.2em;
  font-weight: 300;
}

/*
 *  Wrapping element for page header
 */
 
 
header {
  padding-top: 20px;
  padding-bottom: 20px;
}
 

/*
 *  Main Page Elements
 */
 

#domain-comps {
  padding: 20px;
  border: thin solid @green-light-border;
  border-radius: @border-radius;
  -moz-border-radius: @border-radius;
  
  .comp{
    display: inline-block;
    margin-right: 20px;
    
    &:last-child{
      margin-right: 0px;
    }
  }//comp
}//domain comps
 
/* Green Button and their floating wrappers */ 
.green-button{
  display: inline-block;
  height: 80px;
  width: 400px;
  padding-top: 23px;
  font-size: 1.2em;
  text-transform: uppercase;
  background-color: @green;
  color: #fff;
  border-radius: @border-radius;
  -moz-border-radius: @border-radius;
  border-bottom: 8px solid @green-dark;
  
  &:hover {
    
    height: 75px;
    margin-top: 5px;
    border-bottom: 3px solid @green-dark;
    text-decoration: none;
    color: #fff;
    
    
  }
  
} 

/*tablet wide*/
/*@media (min-width: 980px) and (max-width: 1199px) {

  .green-button { width: 300px; }

}*/

/*tablet tall*/
@media (min-width: 768px) and (max-width: 979px) {

	.green-button { width: 300px; }

}

/*phone*/
@media (max-width: 767px) {

.green-button { width: 100%; }

}
 
#green-button-wrapper-left{
  float: left;
  width: 50%;
  height: 80px;
  overflow: hidden;
  
  .green-button{
    float: right;
    margin-right: 5px;
  }
}

#green-button-wrapper-right{
  float: right;
  width: 50%;
  height: 80px;
  overflow: hidden;
  
  .green-button{
    float: left;
    margin-left: 5px;
  }
}

.brokerage-image{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.broker-links a{
  color: @gray-dark;
}
 
 /* Social share icons */
.round-icon{
  @size: 20px;
  
  display: inline-block;
  height: @size;
  width: @size;
  margin-left: 5px;
  border-radius: (@size/2);
  -moz-border-radius: (@size/2);
  background-color: @gray-dark;
  
  .fa {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: .7em;
  }//fa
  
  &:hover{
    background-color: lighten(@gray-dark, 10%);
    text-decoration: none!important;
  }
}



/*
 *  Wrapping element for page footer
 */
 
 
footer {
  padding-top: 20px;
  padding-bottom: 20px;
  
  a{
    color: #fff;
  }
}//footer
 

/*
 *  Misc helper and margin classes
 */
 
.underline { text-decoration: underline; }

.padding-60{ padding: 60px; }

.margin-left-10 { margin-left: 10px; }
 
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-30 { margin-top: 30px; }
.margin-top-40 { margin-top: 40px; }
.margin-top-50 { margin-top: 50px; }
.margin-top-60 { margin-top: 60px; }
.margin-top-70 { margin-top: 70px; }
.margin-top-80 { margin-top: 80px; }
.margin-top-90 { margin-top: 90px; }
.margin-top-100 { margin-top: 100px; }
.margin-top-110 { margin-top: 110px; }
.margin-top-120 { margin-top: 120px; }

.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }

.clear { clear: both; }