@charset "UTF-8";
/* CSS DOC */


/*---------- MAIN ----------*/

html {
  margin: 0px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Roboto', helvetica, sans-serif;
  font-weight: 300;
  color: #505c67; /* samonte blue/grey */
  margin: 0px;
  background-color: #ebe2d4;
}

span {
  font-weight: 500;
}

.clear {
  clear: both;
}

#wrapper {
  max-width: 400px;
  margin: auto;
  width: 90%;
}

      /************* DESKTOP - Main Styles ********/
            @media (min-width: 768px) {
                #wrapper {
                  max-width: 1000px;
                }
            }


/*---------- GRID ----------*/

.content-container {
  display: grid;
  grid-template-columns: repeat(3, 105px);
  grid-template-rows: repeat(6, 100px);
  background-color: #ebe2d4; /* samonte beige */
  justify-content: center;
}

      /************* DESKTOP - Grid Styles ********/
            @media (min-width: 768px) {
              .content-container {
                grid-template-columns: repeat(12, 100px);
                grid-template-rows: repeat(8, 100px);
              }
            }

/*---------- SPLASH PAGE ----------*/

.header-container i {
    font-size: 1.25em;
    display: inline-block;
    float: right;
    margin-top: 15px;
}

.header-container a {
    text-decoration: none;
    color: #ebe2d4;
}
.splash-logo {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
    text-align: center;
}

.splash-logo img {
    width: 200px;
    height: auto;
    text-align: center;
}

#splash-header-logo h3 {
    font-family: 'Roboto', helvetica, sans-serif;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: 300;
    font-size: .9em;
    letter-spacing: 6pt;
    color: #FFF;
    text-align: center;
    margin-top: 15px;
}

      /************* DESKTOP - Splash Page Styles ********/
            @media (min-width: 768px) {
              .header-container i {
                  font-size: 1.9em;
                  margin-top: 20px;
              }

              .splash-logo {
                grid-column: 5 / 9;
                grid-row: 3 / 5;
                text-align: center;
              }

              .splash-logo img {
                  width: 300px;
              }

              #splash-header-logo h3 {
                  font-size: 1.2em;
                  margin-top: 21px;
              }
            }

/*---------- HEADER ----------*/

header {
    height: 50px;
    width: 100%;
    background: #85a18a; /* samonte green */
    position: fixed;
    left: 0;
    top: 0;
}

.header-container {
    width: 70%;
    margin: auto;
    padding: 0;
}


      /************* DESKTOP - Header Styles ********/
            @media (min-width: 768px) {
              header {
                  height: 70px;
              }

              .header-container {
                  width: 75%;
              }

            }

/* NAV/LOGO STYLE FOR FULL NAV PAGES - NOT CURRENTLY LIVE
.logo {
    float: left;
    font-family: 'Roboto', helvetica, sans-serif;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 6pt;
    color: #FFF;
    margin-top: 21px;
}

nav {
    float: right;
    padding: 10px 25px;
}

nav ul li{
    display: inline-block;
}

nav ul li a {
    font-family: 'Roboto', helvetica, sans-serif;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: 300;
    font-size: 1em;;
    letter-spacing: 2pt;
    color: #FFF;
    padding-left: 80px;
}
END NAV/LOGO STYLE FOR FULL NAV PAGES - NOT CURRENTLY LIVE */

/*---------- CONTENT LAYOUT ----------*/

.section-header {
    grid-column: 1 / 5;
    grid-row: 2 / 5;
}

.logo-bug {
    text-align: center;
}

.logo-bug img {
    width: 100px;
}

.section-content {
    grid-column: 1 / 5;
    grid-row: 4 / 7;
}

/************* DESKTOP - Content Layout Styles ********/
      @media (min-width: 768px) {
          .section-header {
              grid-column: 5 / 9;
              grid-row: 3 / 5;
          }

          .logo-bug {
              text-align: center;
          }

          .logo-bug img {
              width: 100px;
          }

          .section-content {
              grid-column: 4 / 10;
              grid-row: 5 / 8;
          }

      }


/* SOLUTIONS PAGE STYLES - NOT CURRENTLY LIVE
#solutions1 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    text-align: center;

}

#solutions2 {
    grid-column: 4 / 7;
    grid-row: 5 / 8;
    text-align: center;

}

#solutions3 {
    grid-column: 7 / 10;
    grid-row: 5 / 8;
    text-align: center;

}

#solutions4 {
    grid-column: 10 / 13;
    grid-row: 5 / 8;
    text-align: center;
}

.services-header {
    grid-column: 5 / 9;
    grid-row: 9 / 12;
}
SOLUTIONS PAGE STYLES - NOT CURRENTLY LIVE */

/*---------- CONTENT STYLE ----------*/

h1 {
    font-family: 'Roboto', helvetica, sans-serif;
    text-transform: lowercase;
    font-size: 1.5em;
    font-weight: 300;
    color: #85a18a; /* samonte green */
    text-align: center;
    margin-bottom: 50px;
}

h2 {
    font-family: 'Roboto Condensed', helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 700;
    color: #505c67; /* samonte blue/grey */
    text-align: center;
    padding-top: 10px;
}

p {
    font-family: 'Roboto', helvetica, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.4em;
    color: #505c67; /* samonte blue/grey */
    text-align: center;
}

.solutions {
    padding-top: 20px;
}

/*---------- FORM ----------*/

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, input, select, textarea {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

input[type='text']:focus, [type='email']:focus, textarea:focus {
	outline: none;
	padding: 0 0 0.875em 0;
}

.message {
	float: none;
}

.name {
  width: 100%;
}

.subject {
  width: 100%;
}

textarea {
	line-height: 120%;
	height: 125px;
	resize: none;
  width: 100%;
}

::-webkit-input-placeholder {
	color: #474544;
}

:-moz-placeholder {
	color: #474544;
	opacity: 1;
}

::-moz-placeholder {
	color: #474544;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #474544;
}

input[type='text'], [type='email'], [type='subject'], textarea {
	background: none;
  border: none;
	border-bottom: solid 2px #85a18a; /* samonte green */
  font-family: 'Roboto', helvetica, sans-serif;
	color: #505c67; /* samonte blue/grey */
	font-size: 1.000em;
  font-weight: 300;
  letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
  text-transform: uppercase;
	width: 100%;
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#form_button {
  background: none;
  border: solid 2px #85a18a;  /* samonte green */
  color: #85a18a;  /* samonte green */
  cursor: pointer;
  display: inline-block;
  font-family: 'Roboto Condensed', helvetica, sans-serif;
  letter-spacing: .05em;
  font-size: 1em;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#form_button:hover {
  background: #85a18a;  /* samonte green */
  color: #FFF;
}

/*---------- THANK YOU PAGE ----------*/

.thank-you-page a {
    font-family: 'Roboto Condensed', helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    font-weight: 400;
    color: #505c67; /* samonte blue/grey */
    text-align: center;
}

.thank-you-page p {
    line-height: 1.7em;
    margin-bottom: 25px;
    font-size: .9em;
}

      @media (min-width: 768px) {
            .thank-you-page p {
                font-size: 1em;
            }
        }



/*---------- FOOTER ----------*/

footer {
  /* Change the width to 100% */
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #85a18a;  /* samonte green */
}

.footer-container {
    width: 1000px;
    margin: auto;
    padding: 0;
}

footer i {
    font-size: 1.75em;
    margin: 10px;
    display: inline-block;
    float: right;
    padding: 5px;

}

footer a {
    text-decoration: none;
    color: #FFF;
}