@import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);
.inline-block {
  display: inline-block;
  *display: block;
  *zoom: 1;
}
/********************************************************************************
*
* Sticky Footer 
*
*  Used to keep footer at the bottom if the page is too long. 
* 
********************************************************************************/
html,
body {
  min-height: 100%;
}
.page-wrap {
  min-height: 100%;
  height: 100%;
  margin-bottom: -50px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.push {
  height: 50px;
}
.footer,
footer,
#footer {
  height: 50px;
}
.center {
  text-align: center;
  display: block;
}
.vertical-align {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#main-nav a:hover {
  background-color: transparent;
  /*color: #A8EAE3;*/
  color: #8ECA73;
}


#main-nav .brand {
  background: transparent url('../img/logo.formreleaf-02.png') no-repeat center !important;
  background-position: fixed;
  width: 211px;
  height: 37px;
  display: inline-block;
  overflow: hidden;
  text-indent: -1000px;
  margin-top: 6px !important;
}
.main-header {
  background: #cccccc url('../img/stadium.jpg') fixed bottom;
  background-size: cover;
  width: 100%;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
  display: inline-block;
}
.main-header:before {
  content: " ";
  position: absolute;
  display: block;
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
}
.main-header .headings {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.main-header .main-header--heading {
  color: #fff;
  padding: 5px;
  margin: 0px auto;
  font-weight: 700;
  font-size: 3.6rem;
  text-align: center;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 0px;
}
.main-header .main-header--subheading {
  color: #fff;
  padding: 5px 10px;
  margin: 0px auto;
  font-weight: 500;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 0px;
  text-shadow: 1px 1px 30px #6AB56D;
}
.main-header .main-header--buttons {
  margin: 0px auto;
  margin-top: 20px;
  text-align: center;
}
.shadow-row {
  -webkit-box-shadow: 0px 0px 5px #000000;
  box-shadow: 0px 0px 5px #000000;
  display: block;
  position: relative;
}
div[class*='box-'] {
  min-height: 400px;
  padding: 3em;
}
div[class*='sn-checkbox-'] {
  min-height: 0px !important;
  padding: 0px !important;
}
div[class*='box-'] i.fa {
  font-size: 5rem;
}
div[class*='box-'] h3,
div[class*='box-'] p {
  color: #fff;
}
div[class*='box-'] p {
  font-size: 1.7rem;
}
.box-easy {
  background: #8ECA73;
  color: #FFF;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.box-easy:hover {
  background: #70bc4e;
}
.box-saves {
  background: #6AB56D;
  color: #FFF;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.box-saves:hover {
  background: #4e9e51;
}
.box-customize {
  background: #5D8F5A;
  color: #FFF;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.box-customize:hover {
  background: #497046;
}
.tag-lines {
  background: #cccccc url('../img/subtle_dots.png');
  display: inline-block;
  padding: 3em 0;
  position: relative;
  width: 100%;
}
.tag-lines h1,
.tag-lines h2,
.tag-lines h3,
.tag-lines h4,
.tag-lines h5 {
  color: #484848;
}
.sign-up {
  padding: 3em 0;
}
.gainsboro-background {
  background: gainsboro;
  background:
        url('../images/login-second.png'),
        url("../images/login-first.png");

  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-repeat: repeat, repeat;
  background-attachment: scroll, scroll;
  background-size: auto, auto;
  background-attachment: fixed;
  background-size: auto;
  background-position:
  left top, right bottom;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
}

.logo-image{
  height: 50px;
  width: 50px;
}
.box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}
.box-shadow--16dp {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}