@charset "UTF-8";
@import url("slideshow.css");

/* ----- GLOBAL ----- */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-family: 'Source Sans Pro', sans-serif; }
body, html, h1, h2, h3, ul, li, p { margin: 0; padding: 0; } 

a { color: #d42035; text-decoration: none; -webkit-transition: all 0.4s; transition: all 0.4s; }
a:hover { color: #fff; }

.half { width: 50%; }
.third { width: 32%; }
.third:first-child, .third:nth-child(2) { margin-right: 2%; }
.forth { width: 22%; text-align: center; }
.forth:first-child, .forth:nth-child(2), .forth:nth-child(3) { margin-right: 4%; }
.third div { text-align: center; padding: 5%; min-height: 450px; }
.third i { margin: 20px 0; text-shadow: 2px 2px 8px #333; }
.third h1 { margin-bottom: 25px; text-shadow: 1px 1px 3px #333; color: #fff !important; }
.third h2 { color: #333; font-style:italic; font-weight: normal; }
.third h3 { font-weight: normal; margin-bottom: 25px; }
.third p { font-size: 14px; margin-bottom: 25px; color: #fff !important; }
.left { float: left; text-align: left; height: 100%; }
.right { float: left; text-align: right; height: 100%; }
.flexCenLeft { display: flex; align-items: center; justify-content: flex-start; height: 100%; }
.flexCenRight { display: flex; align-items: center; justify-content: flex-end; height: 100%; }
.flexCenCenter { display: flex; align-items: center; justify-content: center; height: 100%; }
.flexCorrect { text-align: center; padding: 5%; min-height: 100px !important; }
.flexCorrect p { color: #333 !important; font-size: 16px; margin-bottom: 20px !important; }
.flexCorrect i { text-shadow: none; }
.centerContent { width: 80%; margin: auto; color: #333; }
.centerContent h1, .centerContent h2 { margin-bottom: 15px; }
a.button1 { display:inline-block; padding:0.35em 1.2em; border:0.1em solid #FFFFFF; margin:0 0.3em 0.3em 0; border-radius:0.12em; box-sizing: border-box; text-decoration:none; font-weight:300; color:#FFFFFF; text-align:center; transition: all 0.2s; }
a.button1:hover { color:#000000; background-color:#FFFFFF; }
.upgrade h1 { color: #fff !important; font-size: 50px; text-shadow: 1px 1px 3px #333; }
.upgrade p { margin-bottom: 0; color: #fff !important; font-size: 26px; text-shadow: 1px 1px 3px #333; }
.footer { background-color: #333 !important; color: #fff !important; }
.thirdContain { width: 85%; min-height: 250px !important; }
.thirdContain img { margin-bottom: 25px; }
.thirdContain h1 { font-weight: normal; color: #fff !important; font-size: 16px; margin-bottom: 15px !important; }
.thirdContain h2 { font-weight: normal; color: #fff !important; font-size: 16px; margin-bottom: 15px !important; }
.thirdContain li { display: block; float: none; }
.thirdContain li a { width: 100%; height: 30px; font-size: 14px; text-align: left; line-height: 30px; background:none; } 
.thirdContain li a:hover { background: none; color: #d42035; }
.thirdContain p { margin-bottom: 10px !important; }
.seventy { width: 65%; margin-right: 5%; float: left; }
.thirty { width: 30%; float: left; }
.seventy p, .thirty p { margin-bottom: 10px !important; }
.fixed { position: fixed; top: 0; width: 100%; left: 0; z-index: 4000; }
.fixedNav { position: fixed; top: 40px; left: 0; width: 100%; z-index: 4000;}


#topHeading { background-color: #f3f3f3; height: 40px; padding: 0 2%; border-bottom: 1px solid #CCC; font-size: 14px; }
#topHeading a:hover { color: #333 !important; }
#heading { height: 150px; padding: 0 2%; }
#heading h1, #heading h2 { font-weight: normal; }
#heading h1 { font-size: 25px; }
#heading h2 { font-size: 18px; }
#heading a:hover { color: #333; }
#nav { width: 100%; height: 50px; background-color: #2B2B2B; padding: 0 2%; font-size: 14px; }
.section { width: 100%; padding: 60px 2% ; border-bottom: 1px solid #E1E1E1; }
.section h1 { color: #333; margin-bottom: 0; }
.section p { color: #7E7E7E; margin-bottom: 30px; }
.callContain { width: 90%; background-color: #f3f3f3; text-align: center; color: #333; padding: 5%; }
.red { background-color: #d42035; color: #fff; }
.upgrade { width: 100%; height: 300px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-image: url(http://www.858-door.com/wp-content/uploads/2014/01/homeBg2.jpg); }
#bottom { background-color: #272727; color: #fff; height: 60px; }
#reviewWid { width: 180px; height: 115px; background-color:#2E78B1; margin-left: 15px; }



ul { list-style-type: none; position: absolute; }
li { display: inline-block; float: left; margin-right: 1px; }
li a { display:block; min-width:120px; height: 50px; text-align: center; line-height: 50px; color: #fff; background: #2B2B2B; text-decoration: none; }
li:hover a { background: #d42035; color: #333; }
li:hover ul a { background: #2B2B2B; color: #fff; height: 40px; line-height: 40px; }
li:hover ul a:hover { background: #2B2B2B; color: #d42035; }
li ul { display: none; }
li ul li { display: block; float: none; }
li ul li a { width: 100%; min-width: 200px; padding: 0 20px;}
ul li a:hover + .hidden, .hidden:hover { display: block; z-index: 4000;}

.show-menu { text-decoration: none; color: #fff; background: #2B2B2B; text-align: center; padding: 10px 0; display: none; }
input[type=checkbox]{ display: none; }
input[type=checkbox]:checked ~ #menu{ display: block; }


#sliderMain { width: 100%; height: 350px; }
.slider-outer{ height:100% !important; overflow:hidden; }
.slider{ width: 100%; height: 100%; }
.slide-image{ width: 100%; height: 100%; display:block; color: transparent; background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; 
-webkit-background-size: cover; background-position: 50% 50%; background-repeat: none; }
.slider .slide-item{ float:left; padding: 0; margin: 0; }
.clear{ clear:both; }


.carousel { padding-bottom: 20px; }
.carousel-cell { width: 28%; height: 200px; margin-right: 10px; background: #8C8; border-radius: 5px; counter-increment: carousel-cell; overflow: hidden; }
.carousel-cell.is-selected { background: #FFF; }
.carousel-cell:before { display: block; text-align: center; line-height: 200px; font-size: 80px; color: white; }
.carousel-cell-image { display: block; height: auto; max-height: 100%; width: 100%; margin: 0 auto; max-width: 100%; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; }
.carousel-cell-image.flickity-lazyloaded, .carousel-cell-image.flickity-lazyerror { opacity: 1; }


/*------ IMAGE GALLERY -----*/
 
.flexRow { display: flex; flex-wrap: wrap; padding: 0 4px; }
/* Create four equal columns that sits next to each other */
.flexColumn { flex: 33%; max-width: 33%; padding: 0 4px;}
.flexColumn img { margin-top: 8px; vertical-align: middle; width: 100%; height: auto;}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column { flex: 50%; max-width: 50%; }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column { flex: 100%; max-width: 100%; }
}

/*------ IMAGE GALLERY -----*/



/*------ TABS -----*/

.tabs { display: flex; flex-wrap: wrap; max-width: 100%; background: #efefef; box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3); margin-top: 35px;}
.input { position: absolute; opacity: 0; }
.label { width: 100%; padding: 20px 30px; background: #e5e5e5; cursor: pointer; font-weight: bold; font-size: 18px; color: #7f7f7f; transition: background 0.1s, color 0.1s;}
.label:hover { background: #d8d8d8;}
.label:active { background: #ccc;}
.input:focus + .label { box-shadow: inset 0px 0px 0px 3px #d42035; z-index: 1;}
.input:checked + .label { background: #fff; color: #000;}
@media (min-width: 600px) {
  .label {
    width: auto;
  }
}
.panel { display: none; width: 100%; padding: 20px 30px 30px; background: #fff; text-align: left;}
.panel h1 { font-size: 20px; margin-bottom: 20px; }
.panel p { color: #333; }
.panel .imgContain { width: 100%; height: 200px; margin-bottom: 25px; background-size: cover; background-repeat: o-repeat; background-position: center center; }
.panel .legacy { background-image: url(../img/legacy-garage-doors-4.jpg); }
.panel .legacyLong { background-image: url(../img/long-panel-garage-door-3.jpg); }
.panel .carriage { background-image: url(../img/carriage-doors.jpg); }
.panel .carriageLong { background-image: url(../img/carriageLong.jpg); }
.panel .choice { background-image: url(../img/choice-garage-doors.jpg); }
.panel .ribbed { background-image: url(../img/commercial-ribbed.jpg); }
.panel .homestead { background-image: url(../img/homestead.jpg); background-position: center bottom; }
.download { border-radius: 5px; background-color: #f3f3f3; width: 100%; height:75px; margin-top: 25px; margin-bottom: 15px; }
.download a:hover { color: #333; }
.openerContain { margin-bottom: 45px; padding-bottom: 20px; }
.operator { width: 40%; height: auto; border: solid 3px #f3f3f3; float: left; }
.openerConent { width: 55%; float: right; }
.openerConent h2 { margin-bottom: 20px; }
.openerConent h3 { margin: 20px 0; }
.openerConent p { margin-bottom: 5px; }



@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}
.input:checked + .label + .panel { display: block;}

/*------ TABS -----*/



@media screen and (max-width: 760px) {

.half { width: 100%; } 
.left { float: none; text-align: center; }
.right { float: none; text-align: center; }
.flexCenLeft, .flexCenRight { display: flex; align-items: center; justify-content: center; }

#topHeading { height: 60px; }
#topHeading div { height: 30px; }
#heading div:nth-child(2) { display: none; }

.third, .forth { width: 100%; margin-bottom: 25px !important; }
.third:first-child, .third:nth-child(2), .forth:first-child, .forth:nth-child(2) { margin-right: 0; margin-bottom: 20px; }

.third { width: 100%; }
.third:first-child, .third:nth-child(2) { margin-right: 0; margin-bottom: 20px; }
.thirdContain ul { display: block; text-align: center; }
.thirdContain li { display: block; float: none; text-align: center; }
.thirdContain li a { width: 100%; height: 30px; font-size: 14px; text-align: center; line-height: 30px; background:none; } 
.thirdContain li a:hover { background: none; color: #d42035; }

.thirdContain { width: 100%; min-height: 100px !important; }

.carousel-cell { height: 100px; }
.carousel-cell:before { line-height: 100px; }

.upgrade h1 { color: #fff; font-size: 30px; text-shadow: 1px 1px 3px #333; }
.upgrade p { margin-bottom: 0; color: #fff; font-size: 16px; text-shadow: 1px 1px 3px #333; }

}

@media screen and (max-width : 760px){
    ul { position: static; display: none;}
    li { margin-bottom: 1px;}
    ul li, li a { width: 100%;}
    .show-menu { display:block;}
	#nav { padding: 0 0; width: 100%; }
	.fixedNav { position: fixed; top: 60px; left: 0; width: 100%; z-index: 4000;}
}

@media all and (max-width:30em){
 a.button1{
  display:block;
  margin:0.4em auto;
 }
}