/*
Theme Name: Ontario Chrome
Description: Theme created for Ontario Chrome
Author: Gel Creative 
Author URI: www.gelcreative.ca
Version: 1.0

This theme can not be used for commercial or non-commercial use or redistributed or resold in any way.
*/
@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-theme.css');
@import url('css/font-awesome.css');


/*======================================= TABLE OF CONTENTS=====================================================================/*
 1. Global & Baseline Styles 
 2. Unique Cases & Styles 
 3. Reset 

================================================================================================================================*/

/* ======================================== #GLOBAL STYLES ======================================================= */

* {
	margin: 0;  
}

html {
  position: relative;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 100%;
  font-family: 'Nimbus Sans', sans-serif; 
  text-align: center; 
  color: #404041;
  min-height: 1200px; 
}

.wrapper {
   max-width: 1100px; 
   margin-left: auto; 
   margin-right: auto; 
   
}

article a:hover {
    color: #fff; 
    text-decoration: none !important; 
}

.contact a:hover {
    color: #428bca !important; 
}

/* stop safari from doing it's thing */

:focus {
  outline-color: transparent;
  outline-style: none;
}

/*next section button */

.next:hover {
  background-color: transparent !important; 
}

.nexth {
	margin-right: 15px !important; 
}

/* TYPOGRAPHY*/

h1 {
   font-size: 42px;
   text-transform: uppercase; 
}

h2 {
    font-size: 32px;
    text-transform: uppercase;  
    text-align:center; 
}

h3 {
   font-size: 22px;
   text-align:center;   
}

h4 {
   font-size: 18px;   
}

h5 {
   font-size: 16px;
}

h6 {
   font-size: 14px; 
}

p {
   font-size: 18px; 
   line-height:22px; 
   font-weight: light;    
}

footer p {
    font-size: 12px; 
}

ul {
    padding-left: 0 !important; 
}

/*NAVIGATION*/

header {
   height: 48px;
   position: fixed; 
   z-index: 9999; 
   background-color: #fff; 
   width: 100%;   
   padding-bottom:1px; 
}

.container > .navbar-header .tollfree,
.container-fluid > .navbar-header .tollfree {
    display: inline-block;
    margin-top: 15px;
}

/* Make sure the navbar is overflowing outside it's box instead of scrolling */
div#navbar {
    overflow: visible;
}

.nav li a {
    float: left;
    width: 130px;
    padding-left: 15px; 
    padding-right: 15px; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: #404041; 
    font-weight: bold;
}

.nav li {
  border-right: 2px solid #f1f2f2;   
    
} 

.nav li:hover {
    background-color: #efefef; 
	border-right: 2px solid #efefef; 
}

.navbar-right li:last-child {
   background-color: #113898; 
   color: #fff !important; 
   border-right: none;  
}

a.fl_box-1.cboxElement {
   color: #fff !important;  
   background-color: #113898;
}

.dropdown-menu li a {
    width: 100%;
   text-transform: none; 
   font-size: 14px; 
   line-height: 36px; 
    
}

.dropdown-menu li {
   border-right: none !important;  
}

.dropdown-menu li a:hover { 
   display: block; 
   background-color: #113898; 
   width: 100%; 
   color: #fff !important; 
   border-right: none !important; 
}


img[alt="Ontario Chrome Logo"] {
	float: left;
    padding-top: 8px; 
    margin-right: 150px;    
}
/* MAIN FOOTER */

footer {
   min-height: 200px;
}

footer a:hover {
    color: #113898 !important; 
    text-decoration: none !important; 
}


.logolist li {
   display: inline;
   padding-right: 2%;  
}

.logolist li:first-of-type {
    padding-left: 2%; 
}

footer h4 {
   padding-top: 30px;
   padding-bottom: 30px;
   text-align:center; 
   font-size: 22px; 
   color: #404041;  
}

footer .textwidget	{
   text-align:left !important; 
   padding-left: 16px;  
}

.last .textwidget {
   padding-left: 6px; 
}

.topfnav {
   font-size: 14px; 
   color: #83a6fe; 
   text-transform: uppercase; 
   padding-bottom: 15px; 
   margin-left: -60px; 
   
}

#copyright {
   float: right; 
   color: #6d6e71; 
   padding-right: 40px;  
}

.pages {
   background-color: #f5f5f5;
   padding-bottom: 30px; 
}

.pages div.row {/*added padding to the top of the footer */
   padding-top: 30px;  
}

.pages > .wrapper > .row > div > div a,
#text-3 {
    color: #6d6e71; 
    font-size: 14px; 
    font-weight: light; 
}
.carousel-caption {
    width: 80%; 
}

.carousel-caption p {
    position: absolute; 
    right: 100px; 
    top: 0; 
}

.carousel-caption a {
   color: #fff !important; 
}

.carousel-caption a:hover {
    text-decoration: underline; 
    background-color: transparent !important; 
}

/* enables hover dropdown */

.dropdown:hover .dropdown-menu {
display: block;
}

/* ====================================== SPECIAL CASES ===============================================*/
/*FRONT PAGE */

.homecarousel {
    position: relative;
}

.homecarousel > a.nexth {
    position: absolute;
    bottom: 30px;
    margin: 0px auto;
    z-index: 10;
}

.servicebar {
    height: 74px; 
}

.servicebar > div > div:hover {
    background-color: #f1f2f2;
    color: #113898 !important; 
}

.servicebar > div  {
   padding-right: 0 !important;
    padding-left: 0 !important; 
}

.servicebar h3 {
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;    
}

.servicebar a {
    color: #404041; 
}

.showserviceone a:hover,
.showservicetwo a:hover {
    color: #83a6fe !important; 
}

/* service section one */

.hideit {
   display: none;    
}

.showserviceone:hover,
.showservicetwo:hover {
    color: #113898;
}

.serviceone {
   text-align:center;
   min-height: 600px; 
   /*margin-top: -40px;*/ 
   padding-top: 50px; 
   background-image: url('images/servicetwo-background.jpg'); 
   background-repeat: no-repeat; 
   /*background-attachment: fixed; */
   background-position: top; 
   background-size: cover; 
   color: #fff;  
}

.servicetwo {
   text-align:center;
   min-height: 600px; 
   padding-top: 50px; 
   background-image: url('images/serviceone-background.jpg'); 
   background-repeat: no-repeat; 
   /*background-attachment: fixed; */
   background-position: top; 
   background-size: cover; 
   color: #fff;  
}

.servicetwo h2,
.servicetwo h3,
.servicetwo h4,
.servicetwo a {
    text-shadow: 0px 0px 1px #000;
}

.serviceone  h2,
 {
   font-weight: bold; 
}

.theservices  h3 {
    text-transform:lowercase; 
    font-weight: lighter;
    line-height: 24px; 
    font-size: 26px; 
    text-transform: uppercase; 
    padding-top: 70px;
}

.theservices {
    max-width: 750px; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    margin-top: 40px; 
    margin-bottom: 30px; 
}

.theservices a {
    color: #79a0ff; 
}

.serviceone h4 {
   text-transform: uppercase; 
   font-size: 24px; 
   font-weight: bold; 
}

.serviceone a {
 	font-size: 14px; 
    color: #79a0ff !important; 
}
/* boxes with images backgrounds that display on hover */

.box {
   min-width:260px; 
   min-height: 150px; 
   background-color: rgba(23, 57, 137, 0.7); 
   border: 1px solid rgba(23, 57, 137, 0.7);
   display: table; 
}

/* centers the text vertically in the box div */
.vcenter {
   display: table-cell;
   vertical-align: middle;
}

.box2 {
   min-width:260px; 
   min-height: 150px; 
   background-color: rgba(23, 57, 137, 0.7); 
   border: 1px solid rgba(23, 57, 137, 0.7);
   display: table; 
}


.box:first-of-type:hover {
   background-color: transparent; 
   background-image:url('images/photo_1_a.jpg');
   background-repeat: no-repeat; 
   background-size: cover;
   opacity: 0.5;  
}

.box:nth-of-type(2):hover {
   background-color: transparent; 
   background-image:url('images/photo_2_a.jpg'); 
   background-repeat: no-repeat; 
   background-size: cover; 
   opacity: 0.5;  
}

.box:nth-of-type(3):hover {
   background-color: transparent; 
   background-image:url('images/photo_3_a.jpg');
   background-repeat: no-repeat; 
   background-size: cover; 
   opacity: 0.5;  
}

.box2:first-of-type:hover {
   background-color: transparent; 
   background-image:url('images/photo_4_a.jpg');
   background-repeat: no-repeat; 
   background-size: cover; 
   opacity: 0.5;  
}

.box2:nth-of-type(2):hover {
   background-color: transparent; 
   background-image:url('images/photo_5_a.jpg');
   background-repeat: no-repeat; 
   background-size: cover; 
   opacity: 0.5;  
}

.box2:nth-of-type(3):hover {
   background-color: transparent; 
   background-image:url('images/photo_6_a.jpg');
   background-repeat: no-repeat; 
   background-size: cover; 
   opacity: 0.5;  
}

/* service section two */

.servicetwo h3 {
    padding-bottom: 30px; 
}
.servicetwo h4 {
   padding-top: 5px; 
   padding-bottom: 10px; 
   text-transform: uppercase; 
   font-weight:bold; 
   font-size: 18px;  
}

.cert {
  position: absolute; 
  z-index: 999999; 
  bottom: 2%;
  margin-left: auto; 
  margin-right: auto;    
}

.commitment-image {
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
   	padding-bottom: 20px; 
}

.learnmore {
    display: block; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    padding: 20px 0 20px 0;
    margin-top: 30px;
    margin-bottom: 30px; 
    font-size: 26px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff !important;  
}

.learnmore:hover {
   color: #2850a4 !important; 
}

.arrow-down1,
.arrow-down2 {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #e6e7e8;
    margin-left: auto; 
    margin-right: auto; 
}

/* fixes the weird white background that appeared when hovering over the arrow*/
.arrow-down1:hover,
.arrow-down2:hover {
   background-color: transparent !important;  
}


/*add fade effect to the carousel instead of slide */


.carousel slide, .carousel-inner {
    max-height: 768px; 
    position: relative; 
}

.content {
	position: absolute; 
	top: 175px; 
	z-index: 1000; 
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
    clear: both; 
}

.content img {
    margin-top: 7%; 
}

.content p {
   padding-top: 10px; 
   text-transform:none; 
   font-size: 30px !important; 
   font-weight: light;  
}

.registration {
   position: absolute; 
	z-index: 1000; 
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0; 
    bottom: 25%; 
}

.carousel.fade {
  opacity: 1;
}

.carousel.fade .item {
  -moz-transition: opacity ease-in-out 8s;
  -o-transition: opacity ease-in-out 8s;
  -webkit-transition: opacity ease-in-out 8s;
  transition: opacity ease-in-out .71-;
  left: 0 !important;
  opacity: 0;
  top:0;
  position:absolute;
  width: 100%;
  display:block !important;
  z-index:100;
}
.carousel.fade .item:first-child {
  top: auto;
  position:relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out 8s;
  -o-transition: opacity ease-in-out 8s;
  -webkit-transition: opacity ease-in-out 8s;
  transition: opacity ease-in-out .71-;
  z-index:0;
}

.homecarousel h1,
.homecarousel p {
    color: #fff; 
    text-align:center; 
}

.homecarousel h1 {
    font-weight: bold;
}

.homecarousel h1,
.homecarousel h2 {
    text-shadow: 0px 0px 1px #000;
}

.homecarousel p {
   font-size: 22px;
   margin-bottom: 40px; 
}

.fl_box-2,
.fl_box-3 {
    display: block; 
    text-align: center; 
    color: #fff;
    text-transform: uppercase; 
    font-size: 22px;
    width: 225px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: rgba(17, 52, 134, 0.6); 
    padding-top: 14px;
    padding-bottom: 7px;  
}

/*lighter background color on hover */
.fl_box-2:hover,
.fl_box-3:hover {
   background-color: #79a0ff;  
}

.icon {
 padding-bottom: 15px;    
}

.homecarousel a:hover {
    background-color: rgba(73, 122, 243, 0.6);
}

.logo {
    padding-bottom: 60px; 
}

img[alt="nextsection"] {
    margin-left: -15px; 
}

/* ABOUT PAGE  */


/*first section */

.about .wrapper p {
    text-align: left; 
}

.about h3:first-of-type {
    color: #113898 !important; 
}

.about section {
   position: relative;  
}

.about section .row {
  /*width: 60%;
  height: 60%;*/
  min-width: 500px;
  max-width: 1020px;
  padding: 40px 0 0 0;
}

.nexticon {
  padding-bottom: 50px;  
}

.about > section:first-of-type,
.contact > section:first-of-type {
   background-image: url('images/about-bg.jpg'); 
   background-repeat: no-repeat; 
   background-size: cover; 
   background-position: center center;
   min-height: 325px;    
}

.about > section:first-of-type h1 {
    padding-top: 80px; 
    color: #fff; 
    font-size: 40px; 
    font-weight: bold; 
    margin-bottom: 0; 
    text-shadow: 0px 0px 1px #000;
}

.about h3 {
    text-transform: uppercase; 
    text-align:left !important;
}

.about > section:nth-of-type(2) h3 {
	/*color: #113898; */
    color: #fff; 
    font-size: 18px; 
    font-weight: bold;
    padding-top: 22px; 
    text-align:center !important;  
}

.about > section:first-of-type h2 {
   line-height: 40px; 
   color: #fff; 
   font-size: 30px; 
   text-transform: lowercase; 
   padding-bottom: 36px; 
   text-shadow: 0px 0px 1px #000;
}

/*second section */
.about > section:nth-of-type(2) {
   min-height: 125px;   
}

.about > section:nth-of-type(3) h3, 
.about > section:nth-of-type(4) h3, 
.about > section:nth-of-type(5) h3 {
    color: #113898; 
    font-size: 18px; 
    font-weight: bold;
    padding-bottom: 18px;  
}

.about > section:nth-of-type(3) h3,
.about > section:nth-of-type(5) h3 {
   color: #fff !important;  
}

.about > section:nth-of-type(2) p,
.about > section:nth-of-type(5) h3 {
    max-width: 700px; 
    margin: 20px auto; 
    font-weight: light; 
    text-align: center;
}

.about > section:nth-of-type(3) p,
.about > section:nth-of-type(4) p,  
.about > section:nth-of-type(5) p {
    padding-bottom: 30px; 
}

.about > section:nth-of-type(3) p, 
.about > section:nth-of-type(5) p {
    color: #fff;  
}

/*third section */
.about > section:nth-of-type(3) {
    min-height: 310px; 
    background-image: url('images/about-section1-bg.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center;
/*  background-attachment: fixed; */
}

/*align the paragraph in the row */
.about > section:nth-of-type(3) p {
    text-align: left; 
}

.about > section:nth-of-type(3) ul li {
     text-align: left;
     color: #fff; 
     font-size: 18px; 
     
}


/*fourth section */
.about > section:nth-of-type(4) {
    min-height: 310px; 
    background-color: #fff; 
}

/*fifth section */

.about > section:nth-of-type(5) {
    min-height: 310px; 
    background-image: url('images/about-section2-bg.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
/*  background-attachment: fixed; */
}



/* Individual Services Pages */

.indservices h3:first-of-type {
   color: #113898 !important;  
}

.indservices h3 {
  color: #fff !important;   
}

.indservices ul {
   padding-bottom: 10px;  
}

.indservices ul li {
  list-style-position: inside;   
}


.indservices p:first-of-type {
    text-align:center; 
    margin-top: 15px !important;  
}

.serviceimg,
.contactsec {
  padding-top: 40px; 
  border-bottom: 2px solid #e6e7e8;   
}

/*CONTACT PAGE */

.thecontact {
    padding-bottom: 65px; 
}


.contact h4 { 
   text-transform: uppercase;
   color: #113898; 
}

.contact .container {
    margin-top: 30px; 
}

.address1 { 
   text-align: left;  
}

.address2 {
   margin-top: 30px; 
   text-align: left;  
}

.address3 {
    text-align:left;
    margin-top: 40px; 
}

.contact input, 
.contact textarea {
  padding: 5px;
  border: 1px solid #e6e7e8; 
  margin-top: 20px;
  width: 350px;    
    
}

#captchabox {
    width: 125px;
    margin-top: 0;  
}

.cf .wpcf7-submit {
   	width: 180px; 
}

.wpcf7-submit:hover {
    background-color: #a3bcff; 
}

.cmessage {
    padding: 10px 0 0 0; 
}

.contact2,
.contact1  {
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

/*.nextservices {
    float: left; 
    margin-left: 33%; 
}*/


/* submit button */

.wpcf7-submit {
  height: 35px; 
  background-color: #113898; 
  color: #fff; 
  text-transform: uppercase; 
  padding: 12px 15px 15px 15px;
  margin-left: 5px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 180px !important;  
 
}


/* GET A QUOTE */

/* the main heading */
.qftitle {
  padding-top: 30px; 
  font-size: 26px; 
  color: #113898; 
  text-transform: uppercase; 
}
/* the tagline */
.qftagline {
  padding-top: 15px; 
  font-size: 18px;
  padding-bottom: 20px; 
}

input {
   height: 30px;
   width: 280px; 
   border: 2px solid #e6e7e8;
}

.hasDatepicker {
   max-width: 240px; 
}

::-webkit-input-placeholder {
 	text-align:center;
    padding-top: 2px; 
    color: #808285;
}

::-moz-placeholder { /* Firefox 18- */
   text-align:center; 
   padding-top: 2px; 
   color: #808285;
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align:center; 
   padding-top: 2px;
   color: #808285;
}

::-ms-input-placeholder {  
   text-align:center; 
   padding-top: 2px;
   color: #808285;
}

input[name="text-166"] placeholder {
	text-align: left; 
    font-weight: light !important; 
}

input[name="text-166"]::-webkit-input-placeholder {
    text-align:left !important;
    padding-left: 10px;
    font-weight: light !important; 
}

input[name="text-166"]::-moz-placeholder  {
    text-align:left !important; 
    padding-left: 10px; 
   font-weight: light !important;
}

input[name="text-166"]::-ms-input-placeholder  {
    text-align:left !important;
    padding-left: 10px;  
    font-weight: light !important; 
}


input[name="tel-134"] placeholder {
	text-align: left; 
    font-weight: light !important; 
}

input[name="tel-134"]::-webkit-input-placeholder {
    text-align:left !important;
    padding-left: 10px;
    font-weight: light !important; 
}

input[name="tel-134"]::-moz-placeholder  {
    text-align:left !important; 
    padding-left: 10px; 
   font-weight: light !important;
}

input[name="tel-134"]::-ms-input-placeholder  {
    text-align:left !important;
    padding-left: 10px;  
    font-weight: light !important; 
}


input[name="email-107"] placeholder {
	text-align: left; 
    font-weight: light !important; 
}

input[name="email-107"]::-webkit-input-placeholder {
    text-align:left !important;
    padding-left: 10px;
    font-weight: light !important; 
}

input[name="email-107"]::-moz-placeholder  {
    text-align:left !important; 
    padding-left: 10px; 
   font-weight: light !important;
}

input[name="email-107"]::-ms-input-placeholder  {
    text-align:left !important;
    padding-left: 10px;  
    font-weight: light !important; 
}


#message placeholder {
	text-align: left; 
    font-weight: light !important; 
}

#message::-webkit-input-placeholder {
    text-align:left !important;
    padding-left: 10px;
    font-weight: light !important; 
}

#message::-moz-placeholder  {
    text-align:left !important; 
    padding-left: 10px; 
   font-weight: light !important;
}

#message::-ms-input-placeholder  {
    text-align:left !important;
    padding-left: 10px;  
    font-weight: light !important; 
}




/* the input boxes that are positioned beside each other */

.qf1, 
.qf3 {
  margin-bottom: 20px;   
}

.qf1 p,
.qf3 p {
    display: inline;
}

.qf1 p:first-of-type,
.qf3 p:first-of-type {
    padding-right: 10px; 
}

.qf1 p:last-of-type,
.qf3 p:last-of-type {
    padding-left: 10px; 
}

.qf3 p span {
 vertical-align: middle; 
 color: #113898;
}

/* full width input boxes */

.qf2 input {
   width: 581px;
   margin-bottom: 10px;   
}

.qf4 textarea {
   width: 581px;
   border: 2px solid #e6e7e8;
   margin-bottom: 10px;   
}

/* submit button */

#qfsubmit {
    width: 180px; 
    height: 40px; 
    border: none !important;
    text-transform: uppercase; 
}

/*hides the contact 7 success message */


/* success page */

.mgmap {
   padding-top: 50px;  
}

.success {
    min-height: 800px; 
    padding-top: 10%; 
}

.successmessageh1 {
   margin-top: 25px; 
   font-size: 26px; 
   text-transform: uppercase; 
   color: #113898;
   font-weight: bold; 
}

.successmessageh2 {
   margin-top: 15px; 
   font-size: 20px; 
   color: #404041;
}

.thanks {
   font-size: 18px; 
   color: #113898;
   font-weight: bold; 
}

.successparagraph {
    margin-top: 30px; 
    margin-bottom: 30px; 
}

.homebutton {
  height: 35px; 
  background-color: #113898; 
  color: #fff;
  font-size: 18px; 
  font-weight: bold;  
  text-transform: uppercase; 
  padding: 10px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 180px !important;   
}

.fl_box-3,
.cboxElement {
   height: 50px; 
  background-color: #113898; 
  color: #fff !important;
  font-size: 18px; 
  font-weight: bold;  
  text-transform: uppercase; 
  padding: 10px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 180px !important; 
}

/* 404 Page */

.single {
  min-height: 700px; 
  padding-top: 5%;
  list-style:none;     
}

.single h2 {
  padding-bottom: 30px;   
}

.single ul li {
  list-style:none; 
  font-size: 20px;
  padding-bottom: 10px;  
}

.single ul li a {
  color: #83a6fe;
}

.single ul li a:hover {
  color: #333; 
}

.pagenav {
 font-size: 20px;    
}

/* Telephone Links */

.tel-link {
    color: #000;
}

/* Media Queries
========================================================================== */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   .content h1 {
	/*position: absolute;*/ 
	/*top: 25px; */
	z-index: 1000; 
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
    clear: both; 
    margin-bottom: 15px !important; 
}

.homecarousel h2 {
   margin-bottom: 15px !important;  
}

.content img {
    margin-top: 5px; 
}

.serviceone h2, 
.servicetwo h2 {
    margin-top: 50px; 
}

.homecarousel h1 {
    font-size: 22px; 
}

.homecarousel p,
.homecarousel h2 {
   font-size: 16px !important;  
}


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.homecarousel h1 {
    font-size: 36px; 
}

.homecarousel p,
.homecarousel h2 {
   font-size: 18px !important;  
}
}


@media (max-width: 1024px) {
    section.homecarousel {
       /* min-height: 600px;*/
        background-color: #666;
    }
    
    section#services > div.servicebar div.arrow-down1,
    section#services > div.servicebar div.arrow-down2 {
        display: none;
    }
    
    section#services > div.servicebar div.bar2 {
        background-color: #FFF;
    }
}








/* ======================================== #RESET ======================================================= */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}


/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}