@charset utf-8;
/*
Theme Name: SixEightBlue
Theme URI: http://www.hoglab.com
Author: MrHOG
Author URI: http://www.hoglab.com
Description: A clean base the to develop upon. It has as the basic WordPress functionality that can help any WordPress developer create their own WordPress theme.
Tags: white, custom-background, custom-header, custom-menu, editor-style, featured-images, post-formats, threaded-comments, translation-ready
Text Domain: sixeightblue
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.htm
Version: 2.7.2
*/


/*
==========================================
  Font Styles
==========================================
*/
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

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

@font-face {
    font-family: 'ralewaybold';
    src: url('fonts/raleway-bold-webfont.eot');
    src: url('fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('fonts/raleway-bold-webfont.woff') format('woff'),
         url('fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaysemibold';
    src: url('fonts/raleway-semibold-webfont.eot');
    src: url('fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('fonts/raleway-semibold-webfont.woff') format('woff'),
         url('fonts/raleway-semibold-webfont.ttf') format('truetype'),
         url('fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaymedium';
    src: url('fonts/raleway-medium-webfont.eot');
    src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayregular';
    src: url('fonts/raleway-regular-webfont.eot');
    src: url('fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('fonts/raleway-regular-webfont.woff') format('woff'),
         url('fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaylight';
    src: url('fonts/raleway-light-webfont.eot');
    src: url('fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-light-webfont.woff2') format('woff2'),
         url('fonts/raleway-light-webfont.woff') format('woff'),
         url('fonts/raleway-light-webfont.ttf') format('truetype'),
         url('fonts/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextralight';
    src: url('fonts/raleway-extralight-webfont.eot');
    src: url('fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extralight-webfont.woff2') format('woff2'),
         url('fonts/raleway-extralight-webfont.woff') format('woff'),
         url('fonts/raleway-extralight-webfont.ttf') format('truetype'),
         url('fonts/raleway-extralight-webfont.svg#ralewayextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaythin';
    src: url('fonts/raleway-thin-webfont.eot');
    src: url('fonts/raleway-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-thin-webfont.woff2') format('woff2'),
         url('fonts/raleway-thin-webfont.woff') format('woff'),
         url('fonts/raleway-thin-webfont.ttf') format('truetype'),
         url('fonts/raleway-thin-webfont.svg#ralewaythin') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
==========================================
  Base Styles
==========================================
*/
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  outline: none;
}
*:focus {
  outline: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background: ;
  font-family: 'ralewayregular', Georgia, Times, serif;
  font-size: 18px;
  color: ;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1 {
  font-size: 40px;
}
a:link {
  color: #00b807;
}
a:visited {
  color: #00b807;
}
a:hover {
  color: rgb();
}
a:active {
}
p {
  margin-bottom: 10px;
}
hr {
  margin: 20px 0;
}


/*
==========================================
  Helper Classes
==========================================
*/
.fontOpenSansLight {
  font-family: 'open_sanslight', Arial, Times, serif;
}
.fontOpenSans {
  font-family: 'open_sansregular', Georgia, Times, serif;
}
.fontOpenSansSemi {
  font-family: 'open_sanssemibold', Georgia, Times, serif;
}
.fontOpenSansBold {
  font-family: 'open_sansbold', Georgia, Times, serif;
}
.fontOpenSansExtra {
  font-family: 'open_sansextrabold', Georgia, Times, serif;
}
.learnMore {
  padding: 15px 30px;
  display: block;
  background: rgb();
  color: rgb() !important;
}
.learnMore:hover {
  color: rgb();
}


/*
==========================================
  Main Structure Styles
==========================================
*/
/* ===================================== Main Wrap ===================================== */
#mainWrap {
  min-height: 100%;
}

/* ===================================== Header ===================================== */
#topBar {
  height: 10px;
  background-color: #00b807;
}
#headContent {
  min-height: 900px;
  box-sizing: border-box;
  position: relative;
  background: url(images/energia-solar-tijuana.jpg) fixed;
  background-repeat: no-repeat;
  background-position: center;
}
#headContent h1 {
  width: 70%;
  line-height: 80px;
  box-sizing: border-box;
  position: absolute;
  top: 35%;
  left: 0;
  z-index: 3;
  text-align: center;
  background-color: rgba(40,46,50,0.7);
  font-family: 'ralewaylight', Arial, Times, serif;
  color: #fff;
}
#logo {
  position: absolute;
  top: 40px;
  left: 50px;
  z-index: 2;
}
#pageCTA {
  width: 500px;
  margin-left: -250px;
  padding: 10px 20px;
  box-sizing: border-box;
  position: absolute;
  top: 65%;
  left: 50%;  
  text-align: center;
  font-family: 'open_sanssemibold', Georgia, Times, serif; 
  font-size: 18px; 
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1);
  color: #fff;
}
.mainBtn {
  display: block;
  width: 100%;
  padding: 35px 20px;
  border: 7px solid #00b807;
  box-sizing: border-box;
  text-align: center;
  background-color: rgba(40,46,50,0.7);
  font-family: 'ralewaylight', Arial, Times, serif;
  font-size: 24px;
  color: #fff !important;
}

/* --- Header Content --- */

/* --- Main Menu --- */


/* ===================================== Content ===================================== */
#mainContent {
  padding: 0 0 132px 0;
}
#topCont {
  padding: 50px 0;
}
#topContText {
  padding: 0 5px 20px;
  text-align: center;
  box-sizing: border-box;
}
#topContText h3 {
  padding-bottom: 20px;
  text-transform: uppercase;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  font-size: 24px;
  font-weight: 900;
}
#topContBoxes {
  padding-top: 40px;
}
.topContBox {
  padding: 5px;
}
.contBox {
  width: 100%;
  height: 180px;
  padding: 0 10px;
  border: 5px solid #00b807;
  box-sizing: border-box;
  border-radius: 3px;
  text-align: center;
  font-family: 'ralewaybold', Arial, Times, serif;
  font-size: 28px;
}
.contBox img {
  margin-top: -55px;
  margin-bottom: 0;
}
.contBox p {
  line-height: 100%;
}

#topMidCont {
  padding: 50px 0;
  text-align: center;
  background-color: #00b807;
  color: #fff;
}
#mainText {
  padding: 0 5px;
  box-sizing: border-box;
}
#topMidCont h2 {
  margin-bottom: 20px;
  font-size: 34px;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  color: #daffdb;
}
.yellowFeat {
  margin-bottom: 15px;
  letter-spacing: -1px;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  font-size: 28px;
  color: #ffe400;
}
#bottMidCont {
  padding: 50px 0;
  text-align: center;
}
#bottMidCont h4 {
  padding-bottom: 20px;
  text-transform: uppercase;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  font-size: 24px;
  font-weight: 900;
}
.certIcon {
  text-align: center;
}
#bottCont {
  min-height: 470px;
  background: url(images/paneles-solares-tijuana.jpg) fixed;
  background-repeat: no-repeat;
  background-position: center;
}
#bottCont .container {
  padding: 40px 5px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}
#bottCont h2 {
  margin-bottom: 20px;
  font-size: 34px;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1);
}
#bottCont #mainTexts {
  padding: 20px 0 20px 0;
  font-family: 'ralewaysemibold', Georgia, Times, serif;
  font-size: 19px;
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1);
}


/* ===================================== Footer ===================================== */
#mainFooter {
  min-height: 132px;
  margin-top: -132px;
  background-color: #212832;
  color: #fff;
}
#footerTop {
  padding: 40px 5px;
  text-align: center;
}
#siteInfo {
  line-height: 40px;
  background-color: #3a465b;
  font-size: 13px;
}
#siteInfo .box50:last-of-type {
  text-align: right;
}
#designInfo {
  font-size: 13px;
}


/*
==========================================
  Specific Area Styles
==========================================
*/
/* ===================================== Home ===================================== */

/* ===================================== Single ===================================== */

/* ===================================== Contact ===================================== */

/* ===================================== Search ===================================== */
#searchBox {
  min-height: 50px;
  position: relative;
}
#formSearch {
  width: 45%;
  position: absolute;
  top: 50px;
  left: 20px;
}
#formSearch #s {
  width: 77%;
  height: 40px;
  padding: 2px 10px;
  border: none;
  box-sizing: border-box;
  float: left;
  background: rgb(255,255,255);
  color: rgb(100,100,100);
}
#formSearch #searchsubmit {
  width: 23%;
  height: 40px;
  border: none;
  box-sizing: border-box;
  float: left;
  background: rgb(225,202,0);
  color: rgb(255,246,140);
  cursor: pointer;
}
#formSearch #searchsubmit i {
	font-size: 1.7em;
}

/* ===================================== Social ===================================== */


/*
==========================================
  Scripts and Plugins Styles
==========================================
*/
/* ----------------- Back to Top ----------------- */
.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
.cd-top {
  display: inline-block;
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 30px;
  right: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5) url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .5s 0s, visibility 0s .5s;
  -moz-transition: opacity .5s 0s, visibility 0s .5s;
  transition: opacity .5 0s, visibility 0s .5s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .5s 0s, visibility 0s 0s;
  -moz-transition: opacity .5s 0s, visibility 0s 0s;
  transition: opacity .5s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: rgb(0,0,0);
  opacity: 1;
}

/*
====================================================================================================================================================-----
  Responsive Styles
  -This styles are a complement or overwrite of the sixeightblue.css file
====================================================================================================================================================-----
*/

@media only screen and (max-width: 1220px) {
  #headContent {
	min-height: 700px;
  }
  #headContent h1 {
	width: 70%;
	line-height: 70px;
	font-size: 30px;
  }
  #logo {
	top: 30px;
	left: 40px;
  }
}
@media only screen and (max-width: 920px) {
  #headContent {
	min-height: 500px;
  }
  #headContent h1 {
	width: 100%;
	line-height: 120%;
	padding: 15px;
	font-size: 24px;
  }
  #logo {
    margin-left: -120px;
	top: 20px;
	left: 50%;
  }
  #pageCTA {
	width: 320px;
	margin-left: -160px;
	padding: 10px 10px;
	top: 60%;
	font-size: 14px;
  }
  .mainBtn {
	display: block;
	width: 100%;
	padding: 25px 15px;
	border: 5px solid #00b807;
	font-size: 18px;
  }
}