/*
 Theme Name: Steel Tile
 Theme URI: http://steeltile.com
 Description: Theme for Steel Tile co
 Author: Jason Smith, Atlantis Digital
 Author URI: http://atlantisdigital.ca
 Template: steeltile
 Version: 1.0.0
*/
@charset "utf-8";

* {margin:0; padding:0; outline: none;}
img { border:0; }
body {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: 300;
	background: #fff;
	color: #444;
}
h1 {
	font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 400;
    display: block;
    color: #ed1d25;
	margin-bottom: 30px;
}
#content h1 {
    font-family: 'Oswald', sans-serif;
    color: #353535;
    font-weight: 700;
    display: block;
    padding-bottom: 0;
    background: none;
    max-width: none;
    text-transform: uppercase;
    font-size: 30px;
    margin-bottom: 10px;
}
h2 {
	font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 400;
    display: block;
    color: #333;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.home h2 {
	/*font-family: 'BenchNine', sans-serif;*/
	line-height: 24px;
    font-size: 29px;
	font-weight: 400;
	display: block;
	color: #fff;
	margin-bottom: 0;
	text-transform: uppercase;
}
.home h2 span {
	font-size: 22px;
}
h2.sub {
	margin: 20px 0 8px 0;
	font-size: 24px;
	
}
h3 {
	background: #ed1d25;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	padding: 10px;
	text-transform: uppercase;
	margin-top: 30px;
    max-width: 200px;
	font-family: 'Oswald', sans-serif;
}
h4 {
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	font-weight: 300;
	display: block;
}
.home h4 {
	text-align: center;
	text-transform: uppercase;
}
.home h3 {
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-size: 27px;
	line-height: 6px;
	color: #353535;
	font-weight: 700;
	display: block;
	padding-bottom: 10px;
	background: none;
	max-width: none;
}
.home h1 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 46px;
	font-weight: 400;
	display: none;
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 54px;
}
.home h1 .small {
	font-size: 36px;
}
#years30 {
	position: absolute;right: 30px;top: 28px;
}
a {
	color: #333;
}
.addthis_toolbox {
	margin-bottom: 20px;
}
p {
	margin: 20px 0;
	line-height: 26px;
}
.container, section {
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
}
header .container {
	height: 184px;
}
section {
	margin-bottom: 60px;
}
section#welcome {
	background: #dedede url("_img/bg-welcome.jpg") no-repeat top center;
	height: 336px;
	width: 100%;
	max-width: 1920px;
    padding: 20px 0;
    box-sizing: border-box;
	margin-bottom: 0;
}
section .container {
	overflow: hidden;
}
section#slider .container {
	overflow: inherit;
}
/*.home section {
	max-width: 800px;
}*/
header {
	color: #fff;
	background: #fff; /*old: #3f506d*/
	border-bottom: 5px solid #ed1d25;
}
footer {
	font-size: 12px;
	padding: 40px;
	background: #343434;
	border-top: 5px solid #ccc;
	color: #e2e1df;
}
section#slider {
	width: 100%;
	margin-bottom: 220px;
	color: #fff;
}
section#slider #boxwrap {
	position: absolute;
	bottom: -160px;
	left: 0px;
	right: 0px;
	text-align: center;
	margin: 0 auto;
	max-width: 1300px;
}
.box {
	text-align: left;
	 box-sizing: border-box;
	display: inline-block;
	width: 23.66%;
	font-size: 16px;
    margin-right: 1%;
	height: 260px;
	background: #2d3e5a;
	line-height: normal;
	vertical-align: bottom;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75);
	position: relative;
	text-transform: uppercase;
	height: 264px;
	overflow: none;
}
.box p {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 18px;
}
.box50 {
	text-align: center;;
	 box-sizing: border-box;
	display: inline-block;
	width: 48%;
	font-size: 16px;
	padding: 0 10px 20px ;
    height: 160px;
	vertical-align: top;
}
.box50 h3 {
	max-width: 100%;
}
#box1 {
	background: url("_img/metal-roof-1.jpg") no-repeat center top;
}
#box2 {
	background: url("_img/metal-roof-2.jpg") no-repeat center top;
}
#box3 {
	background: url("_img/metal-roof-3.jpg") no-repeat center top;
}
#box4 {
	background: url("_img/metal-roof-4.jpg") no-repeat center top;
}
.box .description {
	position:absolute;
	bottom: 0;
	width: 100%;
	box-sizing:border-box;
	padding: 17px 12px 12px 20px;
	color: #fff;
	background: #ed1d25;
}
.value {
	font-size: 36px;
}
.nomargin {
	margin-right: 0;
}
#sliderContent {
	/*background: url("_img/slider-bg2.png");*/
	font-family: 'Oswald', sans-serif;
	font-size: 40px;
	margin: auto;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	padding: 30px;
	text-align: left;
	top: 308px;
	text-shadow: 1px 3px 5px rgba(0, 0, 0, 1);
	/*1px 3px 6px rgba(0, 0, 0, 0.7)*/
}
#sliderContent p {
	padding: 0;
	margin: 0;
}

#slider p {
	line-height: normal;
}
#headWrap {
	width: 100%;
	position: relative;
	background: #000 url("_img/bg-header.jpg") no-repeat;
}
#logo {
	position: relative;
	float: left;
	margin: 28px 0 0;
}
#madeincanada {
	position: relative;
	float: right;
	margin: 28px 16px 0 0;
}
#requestQuote {
	background: #ed1d25;color: #fff;
	position: absolute;
	right:0;
	bottom: -58px;
	z-index: 100;
	padding: 10px 24px;
	text-decoration: none;
	margin-right: 16px;
	font-family: 'Oswald', sans-serif;
    font-size: 24px;
	font-weight: 700;
}
#logoMobile, #logoMobile2 {
	display: none;
	margin: 0;
}
#mainmenu {
    text-align: center;
    position: absolute;
    top: 110px;
    right: 0;
}
#mainmenu ul {
	list-style: none;
	position: relative;
	margin: 0 auto; /*center nav */
	max-width: 1300px;
	display: inline-table; /*center nav */
}
#mainmenu ul li {
	float: left;
	position: relative;
}
#mainmenu ul li a {
	font-family: 'Roboto Condensed', sans-serif;
    padding: 18px 16px;
    font-size: 20px;
    text-transform: uppercase;
    color: #231f20;
    text-decoration: none;
	display: block;
}
#mainmenu ul li:hover > a, #mainmenu ul li a:hover {
	color: #ed1d25;
}
#mainmenu ul li li:hover > a, #mainmenu ul li li a:hover {
	color: #fff;
	background:#666;
}
#mainmenu ul li.current_page_parent a, #mainmenu ul li.current_page_item a {
	/*border-bottom: 5px solid #ed1d25;*/
}
#mainmenu ul li.current_page_parent ul.children a, #mainmenu ul li.current_page_parent ul.children a:hover {
	color: #fff;
}
li>ul {
	top: auto;
	}
#mainmenu ul ul {
	display: none;
	position: absolute;
	margin: 0px;
	width: 270px;
	top: 100%;
	left:0px;
	z-index: 2000;
	}
#mainmenu ul ul ul {
	display: none;
	position: absolute;
	margin: 0px;
	width: 270px;
	top: 0;
	left:100%;
	z-index: 2000;
}
#mainmenu li li {
	width:100%;
	margin:0px;
	display: block;
	clear: both;
	border: 0;
	}
#mainmenu li li a {
	padding: 12px 12px;	
	display: block;
	color: #fff;
	background: #444;
	text-decoration: none;
	font-size: 16px;
	line-height: normal;
	font-style: normal;
	text-align: left;
	border-bottom: 1px solid #222;
	}
#mainmenu li li li a {
	background:#666;
	color: #fff;
	border-bottom: 1px solid #444;
}
#mainmenu li li li a:hover {
	background: #777;
}
#mainmenu li li a:hover, #mainmenu ul li.current_page_parent ul.children li.current_page_item a {
	color: #fff;
	background:#666;
}
#mainmenu ul li:hover > ul {
		display: block;
	}
#slider {
	max-width: 1920px;
	height: 694px;
	margin: 0 auto 0;
	position: relative;
	border-bottom: 5px solid #ed1d25;
	/*background: url("_img/ontario-metal-roofing.jpg") no-repeat top center;*/
}
.shadow {
	background: url("_img/shadow.png") repeat-x;
	height: 22px;
	width: 100%;
	border-top: 1px solid #fff;
}
section#feature {
	margin: 0 auto 20px;
	max-width: 100%;
}
#feature img {
	width: 100%;
	/*border-bottom: 5px solid #ed1d25;*/
}
#wrapper {
	background: url("_img/handmadepaper.png");
	margin-top: -8px;
}
#wrapper.home {
	margin-top: 0;
}
#content {
    max-width: 1300px;
    min-height: 600px;
    margin: 0 auto 0;
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
}
#content ul {
	margin-left: 30px;
}
.rightcol {
	width: 30%;
    display: block;
	float: left;
    vertical-align: top;
    box-sizing: border-box;
    background: #eee;
    min-height: 671px;
}
.rightcol p {
    line-height: 26px;
    padding: 20px;
	margin: 0;
}
.leftcol {
	width: 68%;
    display: block;
	float: right;
	vertical-align:top;
    box-sizing: border-box;
    padding: 22px 40px;
}
.container.panelHeader {
    /* z-index: 100; */
    /* overflow: visible; */
    text-transform: uppercase;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    color: #fff;
    margin: 0 auto;
    padding: 60px 0 20px 20px;
}
.container.panelHeader h1 {
    /* position: absolute; */
    /* top: 120px; */
    /* left: 20px; */
    /* z-index: 200; */
    font-size: 58px;
    color: #fff;
    margin: 0 0 6px 0;
    line-height: 50px;
}
.container.panelHeader p {
    margin: 0;
    padding: 0;
    /* position: absolute; */
    /* top: 191px; */
    /* left: 20px; */
    z-index: 200;
}
#panelSlider {
	width: 63.4%;
	max-width: 800px;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
#panelSlider .metaslider {
	margin-bottom: 8px;
}
.patch40 {
	position: absolute; z-index: 1000; top: 20px; right: 10px; width: 100px;
}
.g90 {
	width: 96px; height: 49px;
	float: right;
}
#dimensions {
	max-width: 600px;
	width: 76%;
}
#panelInfo {
	width: 36%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 0 24px;
}
#panelInfo h2, #relatedInfo h2 {
	font-size: 24px;
	color: #333;
	margin-bottom: 8px;
}
#panelInfo p {
	margin: 0 0 20px 0;
	font-size: 16px;
	line-height: 22px;
}
#panelInfo ul {
	margin-bottom: 20px;
}
a.btnQuote {
	background: #ed1d25;
	color: #fff;
	padding: 8px 12px;
	text-decoration: none;
	margin: 0 0 6px 0;
	font-family: 'Oswald', sans-serif;
    font-size: 20px;
	font-weight: 400;
	display: block;
	
}
a.btnQuote div {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}
a.btnQuote div.btnMain {
	text-transform: uppercase;
}
a.btnQuote div.btnSub {
	font-size: 16px;
	font-weight: 300;
}
#relatedInfo {
	max-width: 1300px;
	margin: 20px auto;
	background:#eee;
}
.minheight {
	min-height: 620px;
}
img.responsive {
	max-width: 100%;
	height: auto;	
}
.google-maps {
	position: relative;
	padding-bottom: 75%; // This is the aspect ratio
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.col {
	width: 32%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 20px;
}
.col h4 {
	margin-bottom: 10px;
}
.col img.head, .col2wide img.head {
	width: 100%;
	display: block;
}
.col img {
	margin-top: 10px;
}
.col2wide {
	width: 66%;
	min-height: 440px;
	margin-right: 2%;
	margin-bottom: 2%;
	float: left;
	display: inline;
	background: #fff;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
.col.last {
	margin-right: 0;
}
.swatch {
width: 17%; display: inline-block; vertical-align: top; height: 50px; margin: 0 2% 2% 0;
text-indent: -9999px;
}
.Black-18262 { background: #00000d; }
.Slate-Blue-18260 { background: #61838a; }
.Coffee-18326 { background: #574339; }
.Charcoal-18306 { background: #65655c; }
.Melchers-Green-18307 { background: #004628; }
.Heron-Blue-18330 { background: #0b5874; }
.Bright-Red-18386 { background: #c3262f; }
.Regent-Grey-18730 { background: #a6aca8; }
.White-White-18317 { background: #e8e7e1; }
.Slate-Grey { background: #3f434b; }
.Burgundy-18011 { background: #602d35; }
.Terra-Cotta-18558 { background: #903c27; }
.Red-Brown-18524 { background: #864e3c; }
.Dark-Brown-18229 { background: #473c31; }
.Galvalume-Steel { background: #d3dfe6; }
.Interior-White { background: #f2f0e9; border: 1px solid #ddd; }
.Bright-Silver-2624 { background: #84868c; }
.Coppertone { background: #8d5d4a; }

.metal-roof-colours .swatch {
    width: 9%;
    display: inline-block;
    vertical-align: top;
    height: 40px;
    margin: 0 1% 1% 0;
}
#tileSwap {
	width: 80%;
	box-sizing: border-box;
	margin: 0 auto;
}
#tileSwap img {
	max-width: 100%;
}
.center {
	text-align: center;
}
.homeContent {
	padding: 10px 20px;
}
.thumb {
	text-align: center;
	margin-bottom: 10px;
}
.thumb img {
	display: inline-block;
	vertical-align: top;
	width: 13%;
	margin-right: 1%;
}
#main_view img {
	width: 100%;
}
#trims {
	width: 100%;
}
#trims td {
	padding: 10px;
	font-size: 14px;
}
#trims h2 {
	margin: 0;
}
#trims p {
	margin: 0;
	line-height: normal;
}
.socialmedia .homeContent {
	padding: 0 5px 0 10px;
}
.col ul {
	margin-left: 20px;
}
a.more {
	background: #444;
	color: #fff;
	font-size: 16px;
	padding: 8px 12px;
	line-height: 30px;
	text-decoration: none;
}
a.buynow {
	background: #df0615;
    color: #fff;
    font-size: 16px;
    line-height: 19px;
    padding: 9px 10px;
    text-align: center;
    text-decoration: none;
	text-transform: uppercase;
	display: block;
}
a.more:hover {
	background: #555;
}
a.buynow:hover {
	background: #ee202e;
}
.socialIcons {
	float: right;
	height: 24px;
}
.socialIcons img {
	margin-right:14px;
}
#socialIcons img.youtube {
	margin-right:5px;
}
/** Blog Page Styles **/
ul.lcp_catlist {
	margin-left: 0;
	list-style: none;
}
ul.lcp_catlist li {
	padding: 10px 0;
	border-bottom: 1px dotted #ccc;
}
ul.lcp_catlist a {
	display: block;
	font-size: 18px;
	font-weight: 400;
}
#wrapper.home ul.lcp_catlist li {
	padding: 4px 0;
	font-size: 12px;
}
#wrapper.home ul.lcp_catlist a {
	font-size: 16px;
	text-decoration: none;
}
#wrapper.home ul.lcp_catlist a:hover {
	color: #df0615;
}
ul.lcp_paginator {
	margin-top: 20px;
}
ul.lcp_paginator li {
	border: 1px solid #666;
	color: #df0615;
	padding: 0 3px;
}
ul.lcp_paginator li a {
	text-decoration: none;
}
.rightcol img {
	width: 100%;
}
.rightcol.features img {
	width: auto;
}
.rightcol.features ul {
	margin-left: 40px;
}
.rightcol.features ul li {
	display: block;
    padding: 6px 16px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}
.rightcol h3 {
	max-width: 100%;
	text-align: left;
	padding: 10px 0 10px 20px;
	background: #666;
}
.rightcol ul {
	list-style: none;
	margin: 10px 0 0 0 !important;
}
.rightcol ul a {
    display: block;
    padding: 6px 16px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}
.rightcol ul a:hover, .rightcol ul li.current_page_item a {
	color: #ed1d25;
}
.rightcol.features ul li a {
	border-bottom: 0;
	padding: 0;
}
.article {
	padding: 18px 0;
	border-bottom: 2px solid #eee;
}
.article p {
	margin-top: 6px 0;
}
.alignright {
	float: right;
	margin: 0 0 20px 20px;
}
.seo {
	font-weight: normal;
	font-style: normal;
}
.projectGallery {
	margin-bottom: 40px;
}
.projectGallery h2 {
	margin-bottom: 10px;
	font-size: 30px;
}
/***** Form Styles *****/
input, select {
	padding: 6px;
	border: 1px solid #ccc;
}


.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 1px;
  border-bottom: 1px solid #353535;
  /*border-top: 1px solid #000;*/
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}
/** Dealer Locator **/
div.results_entry {
	padding: 18px !important;
	border-bottom: 1px dotted #ccc;
	box-sizing: border-box;
}
div.results_entry .results_row_right_column {
	overflow: none !important;
}
#searchForm #addy_in_radius LABEL {
    min-width: 0 !important;
}
#searchForm LABEL {
    min-width: 0 !important;
    padding-right: 0.5%;
    text-align: left !important;
    vertical-align: middle !important;
}
/*** Hover effect for home page ****/
.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}
.ih-item.square {
  position: relative;
  width: 23%;
    margin-right: 1%;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ih-item.square.effect6 {
  overflow: hidden;
}
.ih-item.square.effect6.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect6.colored .info h3 {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect6 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect6 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  max-width: none;
  margin: 30px 0 0 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
  -webkit-transition: all 0.35s 0.1s linear;
  -moz-transition: all 0.35s 0.1s linear;
  transition: all 0.35s 0.1s linear;
}
.ih-item.square.effect6 a:hover .img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.ih-item.square.effect6 a:hover .info {
  visibility: visible;
  opacity: 1;
}

.ih-item.square.effect6.from_top_and_bottom .info h3 {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect6.from_top_and_bottom .info p {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect6.from_top_and_bottom a:hover .info h3,
.ih-item.square.effect6.from_top_and_bottom a:hover .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.ih-item.square.effect6.from_left_and_right .info h3 {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.ih-item.square.effect6.from_left_and_right .info p {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.ih-item.square.effect6.from_left_and_right a:hover .info h3,
.ih-item.square.effect6.from_left_and_right a:hover .info p {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.ih-item.square.effect6.top_to_bottom .info h3 {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect6.top_to_bottom .info p {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect6.top_to_bottom a:hover .info h3,
.ih-item.square.effect6.top_to_bottom a:hover .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.ih-item.square.effect6.bottom_to_top .info h3 {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect6.bottom_to_top .info p {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect6.bottom_to_top a:hover .info h3,
.ih-item.square.effect6.bottom_to_top a:hover .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media screen and (max-width: 1300px) {
	.home h2 {
		font-size: 24px;
	}
	.box p {
		font-size: 14px;
	}
	header .container {
		height: 156px;
	}
	#logo {
    float: left;
    margin: 28px 0 0 28px;
    position: relative;
    width: 280px;
	}
	#madeincanada {
		margin: 12px 16px 0 0;
	}		
	#mainmenu {
		top: 86px;
	}
	section#welcome {
		padding: 0 20px;
	}
	p {
		line-height: normal;
	}
}
@media screen and (max-width: 1099px) {
	
	#mainmenu ul li a {
		padding: 18px 10px;
		font-size: 18px;
	}
	#logo {
		margin: 41px 0 0 28px;
		width: 230px;
	}
	.home h2 {
		font-size: 20px;
	}
	.box p {
		font-size: 11px;
	}
	.box {
		height: 246px;
	}
	section#slider #boxwrap {
	bottom: -142px;
	}
	a.btnQuote div {
	display: block;
	vertical-align: top;
	width: 100%;
	}
	a.btnQuote div.btnMain {
		text-transform: uppercase;
	}
	a.btnQuote div.btnSub {
		font-size: 16px;
		font-weight: 300;
	}
	
}
@media screen and (min-width: 981px) {
	#slider {
		background: url("_img/ontario-metal-roofing.jpg") no-repeat top center;
	}
}
@media screen and (max-width: 980px) {
	#mainmenu ul li a {
		font-size: 16px;
		padding: 18px 8px;
	}
	.box {
		height: 226px;
	}
	section#slider #boxwrap {
	bottom: -122px;
	}
	.box .description {
		padding: 12px 6px 6px 14px;
	}
	#slider {
		height: 484px;
		background: url("_img/ontario-metal-roofing-tablet.jpg") no-repeat top center;
	}
	section#slider {
		margin-bottom: 130px;
	}
	#sliderContent {
		top: 184px;
	}
	.home h1 {
		font-size: 38px;
		line-height: 46px;
	}
	.home h1 .small {
    font-size: 30px;
	}
	#years30 {
		width: 180px;
	}
}

@media screen and (max-width: 830px) {
	.home h2 {
		font-size: 16px;
	}
	.box p {
		font-size: 11px;
	}
	.box {
		height: 206px;
	}
	section#slider #boxwrap {
	bottom: -102px;
	}
	.box .description {
		padding: 6px 6px 6px 14px;
	}
		
	#mainmenu {
		display: none;
	}
	#mainmenu-sticky-wrapper {
		display: none;
	}
	#requestQuote {
		bottom: 0;
		box-sizing: border-box;
		display: block;
		font-size: 14px;
		margin: 16px 0 0;
		padding: 8px;
		position: relative;
		text-align: center;
	}
	section#welcome {
		background: #eee;
		overflow: visible;
		height: auto;
	}
	#madeincanada {
		margin: 63px 16px 0 0;
	}	
	#panelSlider, #panelInfo {
		width: 100%;
		display: block;
	}
	#panelInfo {
		padding: 24px;
		font-size: 16px;
	}
	a.btnQuote {
	display: inline-block;
    width: 40%;
	}
}

@media screen and (max-width: 640px) {
	.leftcol, #content.about .leftcol {
	width: 100%;
	display: block;
	float: none;
	padding: 0;
	}
	#content.about .leftcol {
		padding: 20px;
	}
	.rightcol {
	width: 100%;
	display: none;
	height: auto;
	min-height: 0px;
	}
	.contact-steel-tile-roofing .rightcol {
		display: block;
		float: none;
	}
	.rightcol.features {
		display:block;
	}
	
	#logo {
	 width: 160px;
	 margin: 20px 0 0 20px;
	}
	header .container {
		height: 122px;
	}
	#madeincanada {
		display:none;
	}
	section#slider #boxwrap {
    bottom: -427px;
}
	.box {
    width: 49%;
    margin-bottom: 3px;
    margin-right: 0;
    box-shadow: none;
}
	.box a {
		text-decoration: none;
		color: #fff;
	}
	.box50 {
		padding-bottom: 0;
		display: block;
		width: 100%;
	}
	/*#logoMobile {
		display: block;
	}*/
	#wrapper {
		background: #fff;
	}
	h1 {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 3px;
		padding: 0;
		text-align: center;
	}
	.panelHeader p {
		text-align: center;
	}
	.container.panelHeader {
		text-transform: uppercase;
		text-shadow: none;
		color: #333;
		margin: 0 auto;
		padding: 30px 0 20px 0;
		/* border-bottom: 1px solid #ccc; */
	}
	.container.panelHeader h1 {
		color: #333;
	}
	.home h1 {
    font-size: 36px;
    line-height: 46px;
    width: 100%;
	box-sizing: border-box;
}
	#years30 {
		display:none;
	}
	.col, .col2wide {
		float: none;
		margin-bottom: 5%;
		background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
		margin-right: 0;
		min-height: 0;
		display: block;
		max-width: 100%;
		width: 100%;
	}	
	
	.alignright {
		float: none;
		margin: 0 0 5% 0;
	}
	#sliderContent {
		top: 61px;
		padding:0;
	}
	section#slider {
    margin-bottom: 433px;
    height: 260px;
	padding: 0;
	}
	#dimensions {
	width: 100%;
	}
	a.btnQuote {
	display: block;
    width: 100%;
	    max-width: 226px;
	}
	#panelInfo {
		padding: 20px;
	}
	#featurebg {
		background: #eee !important;
		background-image: none !important;
	}
	#content {
		padding:0;
	}

}
@media screen and (max-width: 480px) {
	#trims img {
		width: 100px;
		height: auto;
	}
	#trims h2 {
		font-size: 20px;
	}
	#trims td {
		padding: 3px;
	}
	#logoMobile {
		display: none;
	}
	#logoMobile2 {
		display: block;
		padding: 10px 0 10px;
		
	}	
	/*#slider {
	background: url("_img/toronto-construction-mobile1.jpg") no-repeat top center;
	height: auto;
	}*/
	header {
		height: auto;
	}
	section {
		padding: 0 20px;
		box-sizing: border-box;
	}
	.home h1, .home h1 span {
		font-size: 25px;
		line-height: normal;
	}
	.home h3 {
		font-size: 21px;
	}
	section#feature {
		padding: 0;
		margin: 0 auto;
	}
	
	.box .description {
		padding: 6px;
		text-align: center;
	}
	div.results_entry .results_row_right_column, div.results_entry .results_row_center_column, div.results_entry .results_row_left_column {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: left !important;
}
	.ih-item.square {
	  position: relative;
	  width: 100%;
	  margin-right: 0;
		display: inline-block;
		vertical-align: top;
		font-size: 12px;
		box-sizing: border-box;
	  border: 8px solid #fff;
	  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.ih-item.square .info {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  text-align: center;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}
	
	.ih-item.square.effect6 a .img {
  -webkit-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  transform: scale(1.0);
}
.ih-item.square.effect6 .info {
	background: none;
}
.ih-item.square.effect6 a .info {
  visibility: visible;
  opacity: 1;
}
.ih-item.square.effect6.from_top_and_bottom a .info h3,
.ih-item.square.effect6.from_top_and_bottom a .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square.effect6.from_left_and_right a .info h3,
.ih-item.square.effect6.from_left_and_right a .info p {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.ih-item.square.effect6.top_to_bottom a .info h3,
.ih-item.square.effect6.top_to_bottom a .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square.effect6.bottom_to_top a .info h3,
.ih-item.square.effect6.bottom_to_top a .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square.effect6.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.9);
}
.ih-item.square.effect6.colored .info h3 {
  background: rgba(12, 34, 52, 0.9);
}
	
}