@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: 5px;
  background-color: #00b807;
}
#headContent {
  min-height: 100px;
  padding: 5px 10px 3px;
  box-sizing: border-box;
  background-color: #fff;
}
#logo {
}

#mainBanner {
  min-height: 50px;
  max-height: 550px;
}
.bannerBox {
  position: relative;
  color: #fff;
}
.bannerBox h2 {
  width: 65%;
  padding: 10px 20px;
  position: absolute;
  top: 90px;
  background-color: rgba(40,46,50,0.7);
  font-size: 24px;
}
#bannerLeft h2 {
  left: 0;
  text-align: right;
}
#bannerRight h2 {
  right: 0;
}
.pageCTA {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  position: absolute;
  top: 55%;
  left: 0;  
  text-align: center;
  font-family: 'open_sanssemibold', Georgia, Times, serif; 
  font-size: 16px; 
  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 {
  max-width: 330px;
  display: block;
  padding: 20px 10px;
  margin: 0 auto;
  border: 5px 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: 20px;
  color: #fff !important;
}

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

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


/* ===================================== Content ===================================== */
#mainContent {
  padding: 0 0 120px 0;
}
#topCont {
  padding: 50px 0;
}
#topContText {
  padding: 0 5px 20px;
  text-align: center;
  box-sizing: border-box;
}
#topContText h1 {
  padding-bottom: 20px;
  text-transform: uppercase;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  font-size: 24px;
  font-weight: 900;
}
#topContBoxes {
  padding-top: 40px;
}
#topContBoxes h3 {
  padding-bottom: 20px;
  text-transform: uppercase;
  font-family: 'open_sansextrabold', Georgia, Times, serif;
  font-size: 24px;
  font-weight: 900;
}
.topContBox {
  padding: 10px;
  margin-top: 20px;
}
.contBox {
  width: 100%;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
  font-family: 'ralewaybold', Arial, Times, serif;
  font-size: 28px;
  background: #ddd;
}
.contBox img {
  margin-bottom: 0;
}
.contBoxText {
  padding: 0 20px 0 0;
}
.contBoxText .btnBase {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: 'raleway', Arial, Times, serif;
  font-size: 22px;
}
.contBox p {
  line-height: 100%;
}
.contBox h4 {
  font-family: 'ralewaybold', Arial, Times, serif;
}
#topMidCont {
  padding: 50px 0;
  border-top: 4px solid #00b807;
  text-align: center;
  background-color: #373f41;
  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: #fedd00;
}
.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;
}
#topBottCont {
  min-height: 470px;
  position: relative;
  background: url(products/images/paneles-solares-tijuana-03.jpg) fixed;
  background-repeat: no-repeat;
  background-position: center;
}
#topBottCont h3 {
  width: 45%;
  padding: 10px 20px;
  position: absolute;
  top: 30%;
  text-align: right;
  background-color: rgba(40,46,50,0.7);
  font-family: 'ralewaysemibold', Georgia, Times, serif;
  font-size: 28px;
  color: #fff;
}
#bottCont {
  min-height: 470px;
  position: relative;
  background: url(products/images/paneles-solares-tijuana-04.jpg) fixed;
  background-repeat: no-repeat;
  background-position: center;
}
#bottCont h3 {
  width: 45%;
  padding: 10px 20px;
  position: absolute;
  top: 30%;
  right: 0;
  text-align: left;
  background-color: rgba(40,46,50,0.7);
  font-family: 'ralewaysemibold', Georgia, Times, serif;
  font-size: 28px;
  color: #fff;
}
.bottDescText {
  padding: 20px 30px 20px 0;
  font-size: 18px;
}
.bottDescBtn {
  padding: 20px 0 20px 10px;
}

#topBottDesc, #bottDesc {
  min-height: 100px;
  padding: 10px 0;
  background-color: #fff;
}
#topBottDesc .btnPrimary, #bottDesc .btnPrimary {
  padding: 30px 20px;
  font-size: 20px;
}
#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: 120px;
  margin-top: -120px;
  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;
}


/* ============================================= Social ============================================= */
.socialList ul {
  list-style: none;
  float: right;
}
.socialList ul li {
  line-height: normal;
  float: left;
  margin: 5px 0 0 7px;
}
.socialList ul li a {
  line-height: 40px;
  width: 40px;
  display: block;
  text-align: center;
  background-color: #4985ff;
  font-size: 18px;
  color: #fff !important;
  transition: background-color 0.5s ease, color 0.5s ease;
  -moz-transition: background-color 0.5s ease, color 0.5s ease;
  -webkit-transition: background-color 0.5s ease, color 0.5s ease;
  -o-transition: background-color 0.5s ease, color 0.5s ease;
}
.socialList ul li a:hover {
  background-color: #5f7190 !important;
}
.socialList ul li:nth-of-type(2) a {
  background-color: #62d5ff;
}
.socialList ul li:nth-of-type(3) a {
  background-color: #ff6233;
}
.socialList ul li:nth-of-type(4) a {
  background-color: #007bb5;
}
#socialBott {
  width: 190px;
  height: 40px;
  margin: auto;
}
#socialBott ul {
  float: none;
}
#socialBott ul li {
  line-height: normal;
  float: left;
  margin: 5px 0 0 7px;
}

/*
==========================================
  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(products/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: 1599px) {
  .bannerBox h2 {
	top: 60px;
  }
  .pageCTA {
	top: 45%;
  }
  .mainBtn {
	max-width: 330px;
	display: block;
	padding: 20px 10px;
  }	
}
@media only screen and (max-width: 1399px) {
  .bannerBox h2 {
	top: 40px;
  }
  .pageCTA {
	top: 35%;
  }
  .pageCTA .quoteText-lg {
    font-size: 18px !important;
  }
  .mainBtn {
	font-size: 18px;
  }	
}
@media only screen and (max-width: 1220px) {
  #headContent h1 {
	width: 70%;
	line-height: 70px;
	font-size: 30px;
  }
  #logo {
	top: 30px;
	left: 40px;
  }
  .bannerBox h2 {
	width: 75%;
	padding: 10px 20px;
	position: absolute;
	font-size: 18px;
  }
  .pageCTA .quoteText-lg {
    font-size: 16px !important;
  }
  .pageCTA p {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1020px) {
  .bannerBox h2 {
	width: 100%;
	padding: 10px 20px;
	box-sizing: border-box;
	top: 40px;
	font-size: 20px;
  }
  #bannerLeft h2 {
	left: 0;
	text-align: center;
  }
  #bannerRight h2 {
	right: 0;
	text-align: center;
  }
  .pageCTA {
	top: 37%;
  }
  .pageCTA p {
	font-family: 'ralewayregular', Georgia, Times, serif;
    font-weight: normal !important;
  }
  .mainBtn {
	max-width: 200px;
    padding: 10px 10px;
	font-size: 14px;
  } 
  
  .contBoxText h4 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 920px) {
  #headContent h1 {
	width: 100%;
	line-height: 120%;
	padding: 15px;
	font-size: 24px;
  }
  #logo {
    margin-left: -120px;
	top: 20px;
	left: 50%;
  }
  .bannerBox h2 {
	padding: 10px 20px;
	box-sizing: border-box;
	top: 30px;
	font-size: 18px;
  }
  .bannerText {
	display: none;
  }
}
@media only screen and (max-width: 860px) {
  .contBoxText h4 {
    font-size: 18px;
  }
  .contBoxText .btnBase {
    font-size: 16px;
  }
}
@media only screen and (max-width: 790px) {
  .pageCTA {
	top: 42%;
  }
  .pageCTA p {
	display: none;
  }
}
@media only screen and (max-width: 720px) {
  .pageCTA {
	top: 37%;
  }
  .pageCTA p {
    display: block;
	font-family: 'ralewaysemibold', Georgia, Times, serif;
    font-weight: normal !important;
  }
  .mainBtn {
	max-width: 200px;
    padding: 10px 10px;
	font-size: 14px;
  } 
  
  .contBoxText h4 {
    font-size: 26px;
  }
  .contBoxText .btnBase {
    font-size: 18px;
  }
  
  .bottDescText {
	padding: 20px 10px 20px 10px;
	font-size: 18px;
  }
  .bottDescBtn {
	padding: 20px 10px 20px 10px;
  }
  #siteInfo, #siteInfo .box50:last-of-type {
    text-align: center !important;
  }
}
@media only screen and (max-width: 560px) {
  .contBox {
    min-height: 190px;
  }
  .contBoxText h4 {
    font-size: 18px;
  }
  .contBoxText .btnBase {
    font-size: 16px;
  }
}
@media only screen and (max-width: 480px) {
  .bannerBox h2 {
	padding: 10px 10px;
	top: 0;
	font-size: 18px;
  }
  .pageCTA {
	top: 42%;
  }
  .pageCTA p {
	display: none;
  }
  #topBottCont h3 {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-size: 24px;
  }
  #bottCont h3 {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-size: 24px;
  }
}