/*
Theme Name: byerly
Description: Responsive Theme
Author: Tyler Taylor | Awebco
Author URI: https://www.awebco.com
Version: 1
*/

* {box-sizing: border-box;} article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 0px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

.col:after, .clr:after, .group:after, #comments #respond:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; zoom: 1; }
.col { display: block; float: left; margin: 0% 0 0% 0%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.one-half, .one-third, .one-fourth, .one-fifth { display: block; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px 1% 0 1%; padding: 0 0; }

.one-half { width: 48% }
.one-third { width: 31.3% }
.one-fourth { width: 23% }
.one-fifth { width: 20% }
.one-sixth { width: 16.5% }
.span_1_of_4 { width: 25% }
.span_3_of_4 { width: 75% }

body { background:#fff url('') top center no-repeat; nowhitespace: afterproperty; font: 16px/1.5 'Droid Sans', sans-serif; color: #111;  }
body a { color: green; text-decoration:none;}
body a:hover { color: darkgreen; }

.wrapper { max-width:1280px; margin: 0 auto; }

.home { background:#fff; color:#111; }
.index {  border-radius: 1em; }
.home { padding-top: 1px; }

.index .wrapper  { background:#ddd; margin: 25px auto; border: 2px solid #ccc; overflow:hidden;}

.content { padding: 25px 50px; background:#fff }
.content ul li { margin-left: 15px; }
.content img { border-radius: .25em; animation: fadeIn .5s ease}
.content p { font-size: 16px; text-align:justify  }


header { 
	background:linear-gradient(#f7b62c, #ff6600 20%); 
	background: -webkit-linear-gradient(#f7b62c, #ff6600 20%);
	background:#e74700;
	position:relative; 
	padding: 0px 0 0px 0; 
	margin: 0px auto 0px auto; 
	font-size: 25px; 
}

header.sticky { position: fixed; top: 0; animation:fadeInDown 1s ease; padding: 5px 0; width:100%;  z-index:9999; border-bottom: 0; }
header .number { font-size: 14px; }
header.sticky .number {display:none}
header.sticky nav ul{ top: 0px !Important }
header.sticky nav ul li ul { top: 57px !Important }

.logo img{
	width: 250px;
	height: auto;
	margin-top: -18px;
	margin-bottom:-10px; 
}
header.sticky .logo img { width: 100px; margin-top: 5px }


/* Top Bar
================================================== */

.top-bar { background:#222; color:#ccc; padding: 5px 0; border-bottom:1px solid #555; font-size:14px; text-transform:uppercase; }
.top-bar i { background:#333; padding: 5px 8px; border-radius:.25em; color: #fff;   margin-right: 3px; }
.top-bar i:hover { background:#555; }
.top-bar .textright i { background:none; padding: 5px 0; }
.top-bar .number { background:#fff; background:#097f44; padding: 10px; margin-left: 15px; font-size:16px; color:#fff; font-weight:bold }


/* Color Schemes
================================================== */

body.one { background:#fff url('https://www.byerlygaragedoor.com/wp-content/uploads/tile.png'); }
body.two { background:#fff url('') top center repeat-x; color:#000 !Important}
body.two .number { color:#fff; }

body.three { background: #4c76cb }
body.four { background: #d67332 }



/* Typography
================================================== */

h1, h2, h3, h4, h5, h6 {margin: 15px 0; font-family:oswald; color:#222   }

h1 { font-size:2em; }

.index h1 { font-size: 2.5em; background:#222; color:#fff; border-radius: 0 0 0 0; border-bottom: 1px solid #ccc; padding-bottom: 15px; padding: 25px 50px;  margin: 0 0;}

h2 { font-size: 2em;  }

h3 { font-size: 1.75em; color:#000; }
.index h3 { display:block; }
.index h3 i { float:right; position: relative; top: 8px; color:#666 }

h4 { font-size: 1.5em; }

h5 { font-size: 14px; }

h6 { font-size: 12px; }



/* Commons
================================================== */

/*clear floats*/

.clr  { clear:both }

p { margin: 0 0 20px 0; }

em { font-style: italic }

strong { font-weight: bold }

small { font-size: 80% }

hr { border:0; border-bottom: 1px solid #ccc; clear: both; display:block; margin: 25px 0; background:transparent; }

a { outline: 0; text-decoration: none;}

.breadcrumb { background:#eee; border-bottom: 1px solid #ccc; padding:15px 50px;  font-size: 12px; }

.map iframe { width: 100%; height: 250px; }

.phone { display:none }
.date { font-style:italic; color:#990000 }

blockquote { margin: 0 0 0px 0 !important; padding: 25px; background:#ddd; }
blockquote p { margin: 0 0; text-align:center !important; color:#333 !important; font-size: 14px !important;  font-family:arial; }

.panel-grid { padding: 25px;  }
.panel-grid:nth-child(1) { border:0; padding: 0  }
.panel-grid:nth-child(1) img { border-radius:0 }


.panel-first-child { margin-bottom: 0 !important }


/* CTA Section
================================================== */


#cta { 
	background: #097f44;
	padding: 50px 0 30px 0;
	display:block;
	margin:0px auto 0 auto;
	font-size: 40px;
	color:#fff

}
#cta h2 { margin-top: 0; }

#cta .button { font-size: 20px; padding: 15px 25px; }

#cta a { color:#fff; font-size: 16px; display:inline-block; float:left; width:33%; text-align:center;   }
#cta i { color:#fff; display:block; font-size: 60px; margin-bottom:10px;  margin-top: -15px; }
#cta a:hover, #cta i:hover { color:#111 !important }


/* WordPress Styles
================================================== */

/*aligns*/

.aligncenter { display: block; margin: 0 auto 20px auto; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }


/*floats*/

.floatleft { float: left }
.floatright { float: right }


/*text style*/

.textcenter { text-align: center }
.textright { text-align: right }
.textleft { text-align: left }


/*captions*/

.wp-caption { max-width: 100% !important }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; max-width: 100%; }
.wp-caption { border: 1px solid #EFEFEF; text-align: center; background-color: #f3f3f3; padding-top: 4px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.absolute { position: absolute;}
.relative { position: relative; }

table { width:100%;}


/* Buttons
================================================== */

.button { background:#097f44; color: #fff; padding: 10px 20px; border-radius: .5em; border:0; display:inline-block;  }
.button:hover { background:#097f44; color:#fff; text-decoration:none;}



/* Images
================================================== */
.page-thumb img {
	width:100%;
	height: auto;
}

.post-thumb img {
	width: 300px ;
	height:auto;
	float:left;
	margin-right:50px;
}



/* Navigation
================================================== */


nav ul
{
	list-style:none;
	position:relative;
	float:right;
	margin:15px 0 0 0;
	padding:0
}

nav ul a
{
	display:block;
	color:#fff;
	text-decoration:none;
	font-weight:700;
	font-size:28px;
	padding: 15px 35px;
	font-family:Oswald;
	text-transform:uppercase;
	border-right: 1px solid #993300 
}

nav ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

nav ul li:hover a
{
	background:#ddd;
	color:#000 
}

nav ul li ul li a:hover
{
	background:#fff;
	color:#000 
}

nav ul li ul li:hover
{
	background:#ffffcc;
	color:#000 
}

nav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#ccc;
	padding:0;
	margin-top:0;
	width: 250px;
	z-index:9999;
	padding: 15px;
}

nav ul ul li
{
	float:none;
}

nav ul ul a
{
	line-height:120%;
	padding:15px;
	color:#000;
	font:normal 17px oswald;
	text-align:left; 
	border-bottom:1px solid #999;
	width:100%;
	text-transform:capitalize;
	background:#fff;
	border-right:0
}

nav ul ul ul
{
	top:0;
	left:100%;
	padding: 0 
}
nav ul li ul li ul li a { color:#eee }

nav ul li:hover > ul
{
	display:block
}


/* Slider
=================================================== */
#slider {
	background:#ccc url('https://www.byerlygaragedoor.com/wp-content/uploads/tile.png');
	padding: 25px 0 ; 
	color:#fff 
}
#slider .wrapper { 
	background:#222;
	padding:5px;
}

#slider .col:nth-child(1) {
	width: 60%;
	position: relative;
	overflow:hidden
}
.overlay {
	width:98%;
	min-height: 515px;
	background:url('https://www.byerlygaragedoor.com//wp-content/uploads/door.jpg');	
	position: absolute;
	top:0;
	background-size: 100% 100%;
	left:0;
	z-index:5;
	animation:overlay-out 4s .25s ease forwards;
}
@keyframes overlay-out {
	0% { opacity:1; }
	75% { top:-101%;}
	90% { opacity: 1}
	100% { opacity: 0; top:-101%; }
}

#slider .col:nth-child(2) {
	width:40%;
	float:right;
	padding: 23px 50px 0px 40px;
	position: relative
}
#slider .col:nth-child(1) img { width:103%; height: auto; }

#slider .seal { position: absolute; top: -15px; right: -15px; animation: pulse 1s ease infinite; }

#slider .title { 
	font-size:45px; 
	font-family:oswald;
	text-transform:uppercase;
	line-height: 1.1em;
}
#slider .title span { color:#ff6600 }
#slider p { margin: 10px 0; font-size: 12px; }
#slider p span { color:#ff6600 }

#gform_1 li { list-style:none }

#gform_1 select {
	width:100%;
	border:0px;
	border-radius:.25em;
	padding: 5px 5px;
	margin-bottom: 5px;
	border:1px solid #fff;

}

#gform_1 input {
	width:100%;
	border:0px;
	border-radius:.25em;
	padding: 10px;
	margin-bottom: 5px;
	border:1px solid #fff;
}


#gform_1 input:hover,
#gform_1 select:hover {
	border:1px solid yellow;
}

#gform_1 input:focus,
#gform_1 select:focus {
	box-shadow: 0 0 8px #0099ff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

#gform_1 .gfield_label, #gform_2 .gfield_label  { display:none }

#gform_submit_button_1 { width: 97% !important; margin-top: -20px !important; border: 0 !important }

#gform_1 select option,
#gform_2 select option  {
	padding: 10px 15px;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}
#gform_1 select option:nth-child(even),
#gform_2 select option:nth-child(even) {
	background:#f8f7a5;
}




/* Homepage
=================================================== */
#homepage-h1 {
	text-align:center;
	border:5px solid #ccc;
	background:#e1e1e1;
	padding: 20px 45px; 
	margin: 25px auto; 
	background-image: url('https://www.byerlygaragedoor.com/wp-content/uploads/screw.jpg'), url('https://www.byerlygaragedoor.com/wp-content/uploads/screw.jpg');
	background-position: left 10px top 50%, right 10px top  50%;
	background-repeat: no-repeat, no-repeat; 
}
#homepage-h1 h1{ margin-top: 0 }




/* Services
=================================================== */
.services { margin-bottom: 20px; }
.services img {width: 100%; height: auto; }
.services .col { margin-bottom: 20px; position: relative; overflow:hidden; border:1px solid #ccc  }
.services .col:hover img { opacity:.9; animation:pulse 1s ease }

.services span { 
	position: absolute; 
	bottom: 0px; 
	left: 0; 
	padding: 15px 25px; 
	width: 100%; 
	z-index: 5;
	color:#999;
	background: #222 url('https://www.byerlygaragedoor.com/wp-content/uploads/arrow.png');
	background-position:  left -45px top  50%;
	background-repeat:  no-repeat; 
}
.services span .title {
	font-size: 26px; 
	text-transform:uppercase;
	font-family:oswald;
	margin-bottom:5px;
	color:#fff
}
.services span p { margin-bottom: 0}

.services a { color:#fff  }
.services a:hover { color:#ff6600 }

.services .col:hover span{
	background: #12452b url('https://www.byerlygaragedoor.com/wp-content/uploads/arrow.png');
	background-position:  right 10px top  50%;
	background-repeat: no-repeat; 
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.services .one-third .title { font-size: 20px }
.services .one-third { font-size: 12px }
.services .one-third span { padding: 10px 25px; }

/* About
=================================================== */
#about { padding:25px 0 }

.small, .big {
	font-family:oswald;
	text-transform:uppercase;
}
.small { font-size: 35px; }
.big {
	font-size: 65px;
	line-height: 1.1em;
	margin-bottom: 25px; 
	font-weight:bold;
	color:#ff6600
}
.map img { width: 100%; height: auto; border-radius: 1em; }



/* Video Container
=================================================== */

#video-container { 
	background:#222; 
	padding: 50px 0
}
#video-container .title {
	display:block;
	text-align:center;	
	color:#fff;
	background:#000;
	padding: 15px; 
	font-size: 1.5em;
	font-family:oswald;
	text-transform:uppercase
}
#video-container .one-fourth { background:#fff }
#video-container .one-fourth span { padding: 32.5px 15px; text-align:center; display:block; }

.photo-gallery img { width:80%; height:auto; left: 10%; position: relative; }
.photo-gallery img:hover { opacity:.7 }

#video-container .meteor-nav { display:none !Important}

.brands, .photo-gallery { background:#fff }


/* Footer 
=================================================== */

#copyright { background:#222; border-top:1px solid #555; padding: 25px; color:#ccc; font-size: 11px;  }
#copyright i { font-size: 25px; margin-left:15px; color:#fff;  padding: 10px; }
#copyright i:hover { opacity:1; color:orange }
#copyright a { color:#666 }



/* Tags & Post Navigation
=================================================== */
.tags { 
	padding: 10px 0;
	display:block;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
	font-size: 12px; 
	margin: 25px 0; 
}
.tags a {
	color:#999;
}

.post-navigation { margin:25px 0; display:block; }
.post-navigation a { 
	padding: 15px;
	background: #64ca64; 
	display:inline-block;
	border-radius:.25em;
	color:#fff;
	font-size: 14px;
	text-align:left;
	text-align:center;
}

.post-navigation a:hover { 
	background:#36ef62;
	color:#fff; 
	text-decoration:none;
}





/* Sidebar
================================================== */
.sidebar { padding: 0 25px; float:right;  }
.sidebar .sow-slider-image-wrapper img { border-radius: .5em !Important }
.sidebar #gform_submit_button_1 { position: relative; margin-top: 0px !Important; }
.sidebar #gform_submit_button_1:hover { background:#999 }
.sidebar .gform_footer { padding-top: 0 !Important;  margin: 0px 0 !Important; }
.sidebar .gform_widget { background:#fff; border:1px solid #999; padding: 5px 25px 0px; margin: 15px 0; }
.sidebar .gform_widget input,
.sidebar .gform_widget select { border:1px solid #999 !important }
.sidebar .gform_widget h4 { color:#e74700 }

.sidebar blockquote { background:#fff }

/* Forms
================================================== */
form input { 
	font-size: 16px !Important;
	padding: 10px  !Important;
}


/* Contact Us Page
=================================================== */
#gform_2 input,
#gform_2 select,
#gform_2 textarea { margin-bottom: 15px; border:1px solid #999; }

#gform_2 textarea { padding: 10px; text-transform:none  }

#gform_2 input:hover,
#gform_2 select:hover,
#gform_2 input:focus,
#gform_2 select:focus { border-color:red;}



/* Products
================================================== */

.products h3 { font-size: 20px !important; text-align:center; border:0; margin-top: 0; background:#fff; padding: 0  }
.products img:hover {transform:scale(.9)}


/* Responsive Breakpoints
================================================== */

/* Desktop */
@media only screen and (min-width : 1024px) {

}
   
/* Tablet */
@media only screen and (min-width:768px) and (max-width:1023px) {
}
 
/* Mobile - Smartphone */
@media only screen and (max-width:1023px) {

	.col { display:block !Important; width:100% !important }
	.wrapper { padding: 0 5%}

	nav,
	.number,
	.seal,
	.top-bar,
	#cta,
	#about,
	.brands,
	.photo-gallery,
	#copyright p { display:none !important; }

	.logo img {margin-top: 0px; margin-bottom:-7px; }

	header { text-align:center }
	header.sticky { position: relative !Important}

	#slider { padding: 0 0; }
	.overlay { display:none !Important }
	#slider .col:nth-child(2)  { padding: 10%; }

	#homepage-h1 { background:#eee; margin-top: 0  }
	#homepage-h1 h1 { font-size: 22px; }

	.services .col { width: 48% !important}
	.services .col span { padding: 10px; position:relative; display:block; width:100%;  }
	.services .col p { display:none }
	.services .col .title { font-size: 18px; text-align:center }
	.services .col:hover span{ background: #12452b }

	#video-container { padding: 25px; background:#000 }

	#copyright .textright { text-align:center }
	#copyright i { margin-left: 0; margin-right: 15px; }

	#wprmenu_bar {z-index:888 !important; background:#000; }
	.phone { color:#fff !Important; background:#168b16; font-size: 1.5em !Important; display:inline-block; z-index: 9999 !important; position: fixed; top: 0px; padding: 3px 25px !important; right:0; }

	.index h1 { font-size: 1.5em }
	.index .wrapper { padding: 0 0 }
	.index, .content { padding: 0 5%; }
	.index img { width: 100%; height: auto}

	blockquote p{ font-size: 1rem !important }

}
 
/* Mobile - Standard */
@media only screen and (max-width : 420px) {
}