/*



	Theme Name: Midwest Roofing



	Text Domain: Midwest Roofing



*/







/*======================== Genral */







* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }



body { font-size: 15px; line-height: 20px; color: #000000; margin: 0; padding: 0; font-family: 'PT Sans', sans-serif; font-weight: 400; }



html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }



.left { float: left; }



.right { float: right; }



.wd { width: 100%; }



a, img { border: 0; outline: 0; text-decoration: none; }



.clear { margin: 0; padding: 0; clear: both; }



.hr { height: 1px; background: #e6e6e6; float: left; width: 100%; margin: 10px 0; }



p { padding: 0 0 20px 0; margin: 0; }



small { font-size: 12px; line-height: normal }



strong, b { font-weight: 700; }



a { color: #2E2E2E; }



h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; padding: 0; line-height: normal; }



h1 { font-size: 30px; color: #000000; }



h2 { font-size: 26px; color: #000000; padding-bottom: 15px; margin-bottom: 15px; line-height: 28px; border-bottom: 1px solid #ca3747; }



h3 { font-size: 22px; color: #000000; padding: 0 0 5px 0; line-height: 24px; }



h4 { font-size: 16px; color: #ca3747; margin-bottom: 5px; }



h5 { font-size: 14px; color: #ca3747; margin-bottom: 10px; }



h6 { font-size: 12px; color: #000000; margin-bottom: 10px; }



input, textarea { font-family: 'PT Sans', sans-serif; font-size: 16px; color: #000000; overflow: hidden; border: none; -webkit-appearance: none; width: 100%; padding: 3px 10px; height: 34px; }



textarea { height: 70px; }



input[type="submit"], a.learnmore { background: url(images/rightwhitearrow.png) no-repeat #000 right; height: auto; line-height: normal; font-size: 20px; color: #FFF; font-weight: 700; padding: 7px 35px 7px 15px; cursor: pointer; text-align: left; width: auto; display: inline-block; }



ul, ol { list-style-type: none; margin: 0; padding: 0; }



li { margin: 0; padding: 0; }



.entrytext ul, ul.list { padding: 0; margin: 0 0 15px 0; display: block }



.entrytext ul li, ul.list li { background: url(images/list.png) no-repeat left 10px; padding: 0 0 0 15px; font-size: 16px; line-height: 24px; }



.entrytext ol { list-style: decimal; margin: 0 0 15px 0; display: block; padding-left: 15px; }



.entrytext ol li { padding: 0 0 4px 5px; }



.pageright { float: right; width: 250px; margin-left: 15px; }



.box { float: right; border: 1px solid #CCCCCC; width: 270px; padding: 15px; margin: 5px 0 10px 15px; }



.box h4 { color: #000; font-size: 16px; }



.box ul { margin-bottom: 0 }



.callbox { border:1px solid #ca3747; text-align: center; color: #ca3747; padding: 10px 15px; margin: 0 0 15px 15px; float: right; font-size: 18px; width: 270px; line-height: normal; }



.callbox a { color: #ca3747; font-weight: 700; display: block; font-size: 25px }



.callbox strong { display: block; font-size: 24px; }



.pagerightcont{ float: right}



.pagecallbox { border:1px solid #ca3747; text-align: center; color: #ca3747; padding: 5px 15px; margin: 0 0 15px 0; font-size: 18px; width: 100%; line-height: normal; display:inline-block }



.pagecallbox a { color: #ca3747; font-weight: 700; font-size: 25px; padding-left:15px; display:inline-block }



.pagecallbox span { display:inline-block; vertical-align:top; padding:5px 0 }



/*======================== ImageAlign */







img.aligncenter { margin-top:10px; display: block; margin-left: auto; margin-right: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }



img.alignright { margin: 5px 0 10px 20px; display: inline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }



img.alignleft { margin: 5px 20px 10px 0; display: inline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }



.alignright { float: right; }



.alignleft { float: left; }



.pageimgtxt { float: right; position: relative; margin: 5px 0 30px 15px; }



.pageimgtxt img { margin-left: 0; }



.pageimgtxt span { background: #e8ecec; text-align: center; display: inline-block; padding: 5px 10px; position: absolute; width: 100%; bottom: -10px; }



.pageimgtxt-cen { position: relative; margin-bottom: 25px; }



.pageimgtxt-cen span { background: #e8ecec; text-align: center; display: block; padding: 5px 10px; width: 100%; }



.pageimgtxt-1 { float: right; position: relative; margin: 5px 0 40px 15px; }



.pageimgtxt-1 img { margin-left: 0; }



.pageimgtxt-1 span { background: #e8ecec; text-align: center; display: inline-block; padding: 5px 10px; position: absolute; width: 100%; bottom: -40px; }



/*======================== VSBOX */



.vxboxwrap{ display:flex }



.vsbox{ width:45%; float:left }



.vstext{ width:10%; float:left; text-align:left; padding-top:50px; font-weight:700; }



/*======================== Custom */







.layout { width: 1240px; margin: 0 auto; }



/*======================== Header */







.haderwrap { width: 100%; float: left; background: url(images/headerbg.jpg) repeat; border-top: 5px solid #ca3747; }



.header { float: left; width: 100%; padding: 10px 0 10px 0; }



.logo { float: left; padding: 15px 0 }



.tagline { width: 357px; height: 28px; float: left; font-size: 18px; line-height: normal; text-align: center; font-weight: 700; color: #FFFFFF; background: url(images/sloganbg.png) no-repeat top; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto }



.toplogos { float: left; margin: 20px 0 0 145px; }



.topcall { float: right; background: url(images/call-icon.png) #231f20 no-repeat 15px 15px; padding: 15px 25px 0 75px; margin: 0; text-align: left; }



.topcall h3 { font-size: 14px; font-weight: 400; margin: 0 0 4px 0; padding: 0; color: #FFF; line-height: 10px }



.topcall a { color: #FFFFFF; font-size: 24px; font-weight: 700; line-height: normal }



.topcall > .textwidget { margin-bottom:10px }



.navwrap { float: left; width: 100%; background: #ca3747; position: relative; border-top: 5px solid #ffffff; border-bottom: 5px solid #231f20; }



/*======================== Slider */







.banner { float: left; width: 100%; background: url(images/bannerbg.jpg) repeat; padding: 15px 0 25px 0; }



.banner img { border: 3px solid #000; width: 100%; }



/*======================== Get Estimate */







body.home .getestimate { margin-top: 25px }



.getestimate { float: left; width: 100%; }



.getestimate .left { width: 890px; float: left; font-size: 20px; line-height: 28px; font-weight: 700; color: #FFF; padding: 5px 0; }



.getestimate a.btn { height: 65px; border: 3px solid #000000; background: url(images/tagicon.jpg) #ca3747 no-repeat left; font-size: 24px; font-weight: 700; color: #FFF; padding: 17px 45px 15px 73px; float: right; position: relative; }



.getestimate a.btn:after { position: absolute; right: 10px; top: 19px; background: url(images/rightblackarrow.png) no-repeat center; width: 20px; height: 22px; content: ""; }



/*======================== Main Content */







.contentwrap { float: left; width: 100%; min-height: 200px; padding: 45px 0 35px 0; }



#content { width: 920px; float: left; }



#sidebar { width: 290px; float: right; }



.fullcolumn { width: 100% !important; }



/*======================== Sidebar */







#sidebar > ul { float: left; width: 100%; }



#sidebar > ul > li { float: left; width: 100%; margin-bottom: 20px; background: #ca3747; color: #FFF; padding: 15px }



#sidebar > ul > li:last-child { margin-bottom: 0; }



#sidebar h2 { float: left; color: #FFF; width: 100%; font-size: 24px; font-weight: 700; padding: 0; margin: 0 0 5px 0; border: 0; line-height: 26px; }



#sidebar form { margin-top: 15px }



#sidebar ul li#text-3 { background: #232021; }



#sidebar ul li#text-3 a.learnmore { background: #ca3747 url("images/rightwhitearrow.png") no-repeat scroll right center }



#sidebar ul.list { float: left; width: 100%; margin: 0 0 15px 0 }



#sidebar div { float: left; width: 100%; }



#sidebar .con { padding: 15px; }



#sidebar ul li#text-11{ background: #232021; text-align:center; line-height:normal }



#sidebar ul li#text-11 a{ font-size:30px; color:#FFF }



#sidebar ul li blockquote{ margin:15px }



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







.wpcf7-form div { margin-bottom: 8px; }



.wpcf7-form img.ajax-loader { display: none; }



span.wpcf7-not-valid-tip { font-size: 11px; color: #f7e700; }



div.wpcf7-response-output { float: left; margin: 15px 0 0 0 }



ul.cform { }



ul.cform li { width: 100%; float: left; list-style: none; margin: 0; padding: 0; background: none; margin-bottom: 10px; }



ul.cform li:last-child { margin: 0 }



ul.cform li input, ul.cform li textarea { padding: 4px 20px 4px 40px }



ul.cform li.name input { background: url(images/nameicon.jpg) #FFF no-repeat left top; }



ul.cform li.email input { background: url(images/mailicon.jpg) #FFF no-repeat left top; }



ul.cform li.phone input { background: url(images/phoneicon.jpg) #FFF no-repeat left top; }



ul.cform li.message textarea { background: url(images/msgicon.jpg) #FFF no-repeat left top; }



ul.cform li input[type="submit"] { padding: 7px 35px 7px 15px; margin: 0 0 0 33px; }



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







.footerwrap { float: left; width: 100%; background: #ca3747; color: #FFF; border-top: 17px solid #232021; padding: 20px 0 }



.footer > ul { }



.footer > ul > li { float: left; width: 915px; }



.footer > ul > li + li { width: 290px; background: #FFFFFF; float: right; color: #232022; }



.footer a { color: #FFF }



.footer .copy { display: block; padding-top: 40px; font-size: 14px; }



.footer .copy a { color: #FFF; }



.footer .copy a:hover { color: #FFFFFF; }



.footer .flogo { background: #efefef; text-align: center; padding: 15px 0 }



.footer .address { float: left; width: 100%; background: #FFF; padding: 10px 35px; font-size: 14px; line-height: 19px; font-style: italic; }



.footer .address a { color: #000 }



.footer .tel { color: #fff; float: left; width: 100%; font-size: 20px; line-height: normal; font-size: 14px; padding: 8px 30px; background: #231f20 }



.footer .tel a { color: #fff; display: block; font-size: 24px; font-weight: 700; }



.footer .tel .con { padding: 0 0 0 50px; background: url(images/call-icon.png) no-repeat left; }



/*======================== Home Page Content */







.homeboxes { float: left; width: 100%; }



.homeboxes ul { float: left; width: 100%; margin-bottom: 25px }



.homeboxes ul li { width: 292px; float: left; background: #efefef; margin: 0 24px 0 0; }



.homeboxes ul li + li + li + li { margin-right: 0 }



.homeboxes ul li h3 { font-size: 22px; color: #000; background: #FFF; padding: 0 0 15px 0 }



.homeboxes ul li img { width: 100%; }



.homeboxes ul li .con { padding: 10px 15px }



body.home #content { width: 610px; float: left; margin: 0 0 0 25px; }



.testimonial { float: left; width: 100%; border-top: 1px solid #ca3747; margin: 100px 0 0 0; }



.testimonial h2 { font-size: 24px; font-weight: 700; font-style: italic; color: #ca3747; border: 0; padding: 20px 0 25px 0; margin: 0 }



.testimonial blockquote { padding: 0 5px; margin: 0; font-size: 19px; line-height: 28px; }



.testimonial .credit { font-size: 19px; font-style: italic; color: #ca3747; font-weight: 700; text-align: left !important; margin-top: 30px !important }



.hlsidebar { width: 290px; float: left }



.hlsidebar img { width: 100%; }



.hlsidebar ul li { float: left; width: 100%; background: #ca3747; text-align: center; font-size: 24px; font-weight: 700; line-height: normal; color: #FFF; margin-bottom: 20px; }



.hlsidebar ul li + li { margin-bottom: 0; padding: 8px; }



.hlsidebar h2 { font-size: 24px; color: #FFF; line-height: normal; margin: 0; padding: 10px; float: left; width: 100%; background: #232021; border: 0 }



.hlsidebar span { padding: 36px 20px; float: left; width: 100%; }



.hlsidebar .con { background: #FFF; padding: 10px }



/*======================== Contact Page Content */







.contact { float: left; width: 100%; }



.contact .left { width: 290px; float: left; background: #ca3747; padding:15px }



.contact .left h4 { width: 100%; color: #FFF; padding: 0; font-size: 24px; margin:0 }



.contact .left h2 { float: left; color: #FFF; width: 100%; font-size: 15px; font-weight: 700; margin: 0; border: 0; line-height: normal; position: relative; font-size: 16px; line-height: normal; font-weight: 400;}



.contact .left span { display: block; font-size: 16px; font-weight: 400; }



.contact .left ul{ margin:0 }



.contact ul { float: left; width: 100%; }



.contact .right { width: 920px; float: right; }



.contact .right h2{ border:none; font-size:20px; margin:0; padding:0 }



.contact .col1 { float: left; width: 70%; padding-right:25px }



.contact .col1 h3{ color:#ca3747; }



.contact .col {  border-bottom: medium none;

    display: table-cell;

    margin-bottom: 15px;

    padding: 0 1%;

    width: 31%;}



.contact .col2 { float: left; width: 30%;}







.contact .clogo img{ width:100%; }



.contact .testimonials { background:#ca3747; text-align:left; width:100%; color:#FFF; padding:15px; margin-bottom:20px }



.contact blockquote { margin:0 0 10px 0 }



.contact .testimonials h3 { color:#FFF }



/*======================== Blog */







.blog h2 { margin-bottom: 5px; }



.blog small { clear: both; display: block; font-size: 12px; padding-bottom: 10px; letter-spacing: normal; color: #666 }



.postmetadata { background: none repeat scroll 0 0 #232021; clear: both; color: #D3D3D3; margin: 10px 0 25px; padding: 5px 10px !important; font-size: 14px; }



.postmetadata a { color: #FFFFFF; text-decoration: underline; }



.postmetadata a:hover { text-decoration: none; }



.postdate { color: #5F9000; font-weight: 700; line-height: 30px; }



#respond small { color: #999; }



#commentform { margin-top: 15px; }



#commentform p { padding: 0; }



#commentform input[type="text"] { border: 1px solid #D7D7D7; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: 26px; line-height: 26px; margin-bottom: 10px; padding: 0 5px; width: 200px; }



#commentform input[type="submit"] { background: #ca3747; border: medium none; color: #FFFFFF; cursor: pointer; height: 28px; padding: 0 10px; }



#commentform input[type="submit"]:hover { background: #000000; }



#commentform textarea { border: 1px solid #D7D7D7; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: 150px; line-height: normal; margin-bottom: 10px; overflow: hidden; padding: 5px; width: 450px; }



.navigation { display: block; float: left; margin-bottom: 10px; width: 100%; }



.navigation .alignleft { float: left; width: 49%; background: #f5f5f5; padding: 10px; }



.navigation .alignright { float: right; width: 49%; background: #f5f5f5; padding: 10px; }



ol.commentlist { list-style: none outside none; margin: 15px 0 0; padding: 0; }



ol.commentlist li { background: none repeat scroll 0 0 #F6F6F6; border: 1px solid #D5D5D5; margin: 0 0 10px; padding: 10px 7px 10px 64px; position: relative; }



ol.commentlist li.pingback comment-author { padding: 0 170px 0 0; }



ol.commentlist li div.vcard { font-weight: 700; }



ol.commentlist li div.vcard cite.fn { font-style: normal; }



ol.commentlist li div.vcard cite.fn a.url { color: #000000; text-decoration: none; }



ol.commentlist li div.vcard cite.fn a.url:hover { color: #000000; }



ol.commentlist li div.vcard img.avatar { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AAAAAA; left: 7px; padding: 5px; position: absolute; top: 7px; }



ol.commentlist li div.comment-meta { font-weight: 700; position: absolute; right: 10px; text-align: right; top: 5px; }



ol.commentlist li div.comment-meta a { color: #ca3747; text-decoration: none; }



ol.commentlist li p { font-weight: normal; margin: 5px 0 12px; }



ol.commentlist li ul { font-weight: normal; list-style: square outside none; margin: 0 0 12px; padding: 0; }



ol.commentlist li div.reply { background: #ca3747; border: medium none; color: #FFFFFF; cursor: pointer; height: 28px; line-height: 28px; margin-top: 15px; padding: 0 10px; width: 60px; text-align: center }



ol.commentlist li div.reply:hover { background: #000000; }



ol.commentlist li div.reply a { color: #FFFFFF; text-decoration: none; }



ol.commentlist li ul.children { list-style: none outside none; margin: 12px 0 0; text-indent: 0; }



ol.commentlist li ul.children li.depth-2 { margin: 0 0 3px; }



ol.commentlist li ul.children li.depth-3 { margin: 0 0 10px; }



ol.commentlist li ul.children li.depth-4 { margin: 0 0 3px; }



ol.commentlist li ul.children li.depth-5 { margin: 0 0 3px; }



ol.commentlist ul.children li.odd { background: none repeat scroll 0 0 #FFFFFF; }



ol.commentlist ul.children li.even { background: none repeat scroll 0 0 #F6F6F6; }



ol.commentlist li.pingback div.vcard { padding: 0 170px 0 0; }







/*================= Blog Comment End =====*/









.box-list-main {border: 1px solid #ddd; margin-bottom: 15px;

    display: table;

    width: 100%;}

.box-list-main .box-list {width: 25%; display: table-cell; padding: 15px;}

.box-list-main .box-list:nth-child(2n) {background: #f2f2f2; }

.box-list-main .box-list p {display: none;}

.clogo,

.toplogos { position: relative}
.cycloneslider-template-standard { margin-bottom: 0;}
.cycloneslider-template-standard {   border: 3px solid #000;}

#cssmenu.small-screen .submenu-button {z-index:9999 !important;}

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

	.box-list-main .box-list {width: auto; float: none; display: block;}

	.contact .col {display: block; width:auto;}
	.logo img {max-width:100%;}

}