/*
Theme Name: WP-ROCK
Theme URI: http://www.rcmi.ca/
Author: Fresh Inc.
Author URI: http://www.freshbrand.ca
Description: Custom theme for ROCK Group of Companies
Version: 1.0
*/

/*--------------------------------*\
*************** RESET **************
\*--------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*--------------------------------*\
****** 12-COL RESPONSIVE GRID ******
\*--------------------------------*/

/* http://www.responsivegridsystem.com/calculator */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
                                               
					
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.5%;
}
.span_10_of_12 {
  	width: 83%;
}

.span_9_of_12 {
  	width: 74.5%;
}

.span_8_of_12 {
  	width: 66%;
}

.span_7_of_12 {
  	width: 57.5%;
}

.span_6_of_12 {
  	width: 49%;
}

.span_5_of_12 {
  	width: 40.5%;
}

.span_4_of_12 {
  	width: 32%;
}

.span_3_of_12 {
  	width: 23.5%;
}

.span_2_of_12 {
  	width: 15%;
}

.span_1_of_12 {
  	width: 6.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 960px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 960px) {
	.span_12_of_12 {
		width: 100%; 
	}
	.span_11_of_12 {
		width: 100%; 
	}
	.span_10_of_12 {
		width: 100%; 
	}
	.span_9_of_12 {
		width: 100%; 
	}
	.span_8_of_12 {
		width: 100%; 
	}
	.span_7_of_12 {
		width: 100%; 
	}
	.span_6_of_12 {
		width: 100%; 
	}
	.span_5_of_12 {
		width: 100%; 
	}
	.span_4_of_12 {
		width: 100%; 
	}
	.span_3_of_12 {
		width: 100%; 
	}
	.span_2_of_12 {
		width: 100%; 
	}
	.span_1_of_12 {
		width: 100%;
	}
}


/*--------------------------------*\
*********** TYPOGRAPHY *************
\*--------------------------------*/

h1{font:4.5em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.25em 0;}
h2{font:3em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#de1a1e; margin:0.25em 0;}
h3{font:2.25em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
h4{font:1.875em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
h5{font:1.5em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
h6{font:1.125em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}

p{font:1.125em 'Open Sans', sans-serif; color:#666; line-height:1.5em; margin:0.75em 0;}

a{text-decoration:none; color:#de1a1e;}
a:hover{text-decoration:underline;}

strong{font-weight:700;}
em{font-style:italic;}

#page-content ul, #page-content ol{font:1.125em 'Dosis', sans-serif; line-height:1.5em; color:#666; margin:0.75em 0 0.75em 1.5em;}
#page-content ul{list-style:circle;}
#page-content ul li{}
#page-content ol{list-style:decimal;}
#page-content ol li{}

hr{
	width:100%; height:1px;
	margin:0.75em 0;
	border:none;
	background:#e5e5e5;
}

#page-content table{
	width:100%;
	border:none;
	font-family:'Dosis';
	text-align:left;
}

#page-content table thead tr{
	color:#FFF;
	background:url(images/bg_sidebar.png);
}

#page-content table thead th{
	padding:10px 15px;
	font-size:1.5em;
	text-transform:uppercase;
}

#page-content table td{
	padding:10px 15px;
	background: #FFF;
}

#page-content table tbody tr:nth-child(even) td{background:#e5e5e5;}

@media only screen and (max-width: 960px) {
	h1{font-size:3.5em;}
	h2{font-size:2em;}
	h3{font-size:1.875em;}
	h4{font:1.5em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
	h5{font:1.125em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
	h6{font:1em 'Dosis', sans-serif; font-weight:700; text-transform:uppercase; color:#454545; margin:0.75em 0;}
}


/*--------------------------------*\
********** BODY STYLES *************
\*--------------------------------*/

html,body{
	width:100%; height:100%;
}

body.home{
	
	background-size:cover;
}

body.page{background:none;}

@media only screen and (max-width: 960px) {
	body.home{background:none;}
}


/*--------------------------------*\
************* SIDEBAR **************
\*--------------------------------*/

#sidebar{
	width:25%; height:100%;
	min-width:220px;
	float:left;
	font-family:'Dosis', sans-serif;
	color:#454545;
	text-transform:uppercase;
	background:#b8000d url(images/bg_sidebar.png);
	-webkit-box-shadow: 0 0 20px 0 #252525;
	box-shadow: 0 0 20px 0 #252525;
}

#sidebar a{
	color:#454545;
}

.side-cell{
	width:100%;
	display:table;
}

#logo{
	width:88%; height:20%;
	max-width:400px;
	margin:0 auto;
}

#logo img{
	width:100%;
}

#main-nav{
	width:100%; height:65%;
	text-align:center;
}

#main-nav ul{
	line-height:1.75em;
}

#main-nav ul li a{
	font-size:1.5em;
}

#main-nav ul li.active a{
	font-weight:700;
}

#colophon{
	height:15%;
	text-align:center;
	font-size:0.875em;
	line-height:1.5em;
}

#colophon a{font-weight:700;}

#logo-cell, #main-nav ul, #colophon span{
	display:table-cell;
	vertical-align:middle;
}

@media only screen and (max-width: 960px) {
	#sidebar{
		width:100%; height:100px;
		max-width:100%;
		float:none;
	}
	
	.side-cell{
		display:block;
	}
	
	#logo{
		width:180px;
		margin:10px 0 0 15px;
		float:left;
	}
	
	#main-nav{
		width:auto;
		margin:35px 15px 0 0;
		float:right;
	}
	
	#main-nav ul li{
		display:inline;
		margin:0 0.5em;
	}
	
	#main-nav ul li:last-child{
		margin-right:0;
	}
	
	#main-nav ul li a{font-size:1em;}
	
	#colophon{display:none;}
}

@media only screen and (max-width: 720px) {
	
	#sidebar{
		height:auto;
		padding:1em 0;
	}
	
	#logo{
		margin:0 auto;
		float:none;
	}
	
	#main-nav{
		margin:15px 0 0 0;
		float:none;
	}
	
	#main-nav ul{
		text-align:center;
		margin:0 auto;
		display:block;
	}
}


/*--------------------------------*\
************* CONTENT **************
\*--------------------------------*/

#content{
	width:75%; height:100%;
	float:left;
	position:relative;
}

#home-content{
	padding:0 5%;
	position:absolute;
	bottom:10%;
	text-shadow: 0 0 3px #252525;
}

#home-content h1{font:3em 'Dosis', sans-serif; font-weight:700; color:#FFF; text-transform:uppercase; line-height:1.5em; margin:0 0 0.5em 0;}
#home-content h1 span{font-size:1.5em; display:block;}
#home-content p{font:1.5em 'Open Sans', sans-serif; color:#FFF; line-height:1.5em;}

body.home #content a{
	font-family:'Dosis', sans-serif;
	color:#FFF;
	font-weight:700;
	text-transform:uppercase;
}

body.page #content{
	overflow-y:scroll;
	height:100%;
}

#page-banner{
	width:100%; height:50%;
	overflow:hidden;
	background:#333;
}

#page-banner img{
	min-width:100%;
	min-height:100%;
}

#page-content{
	padding:5%;
	background-image: url(images/page-bg.png) ;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 40%;
}
#content .gallery-content {
	background-size: 60%;
}

@media only screen and (max-width: 960px) {
	#page-banner {
		width:100%; height:160px;
		overflow:hidden;
		background:#333;
	}
	#content{
		width:75%; height:auto;
		float:left;
		position:relative;
	}
	#home-content {
		margin-top: 0;
		padding-top: 10%;
		padding-bottom: 10%;
		background:url(images/bg_main.jpg) bottom right no-repeat;
		background-size:cover;
	}
}

/* CONTACT FORM */

.screen-reader-response{display:none;}

input, textarea{
	width:80%;
	padding:1.25em 2.5%;
	border:1px solid #D6D6D6;
	border-radius:3px;
	font:0.875em 'Dosis', sans-serif;
	color:#454545;
	-moz-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

input:focus, textarea:focus{
	outline-color:#de1a1e;
}

input[type=submit]{
	padding:1em;
	border:3px solid #de1a1e;
	outline:none;
	font:1.25em 'Dosis', sans-serif;
	color:#454545;
	font-weight:700;
	text-transform:uppercase;
	background:none;
}

input[type=submit]:hover{
	cursor:pointer;
	border-color:rgba(69,69,69,1);
}

span.wpcf7-form-control-wrap {
	display: inline !important;
}

div.wpcf7-validation-errors{
	width:80% !important;
	margin:0 !important;
	padding:1.25em 2.5% !important;
	border:none !important;
	font:1em 'Dosis', sans-serif;
	color:#F00;
	text-align:center;
	border-radius:3px;
	background:#FDD9D5;
}

div.wpcf7-mail-sent-ok{
	width:80% !important;
	margin:0 !important;
	padding:1.25em 2.5% !important;
	border:none !important;
	color:#FFF;
	text-align:center;
	border-radius:3px;
	background:#454545;
}

.wpcf7-not-valid-tip{
	display:inline-block;
	padding:0.5em 1.5em;
	font:0.75em 'Dosis', sans-serif;
	text-align:right;
}

#form-hide{
	height:auto;
	padding:0 10px;
	overflow:hidden;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.wpcf7-form.sent #form-hide{
	height:0;
}

@media only screen and (max-width: 960px) {
	
	#content{
		width:100%;
		float:none;
	}
	
	#home-content{
		margin-top:0;
		position:static;
	}
	
	#home-content h1{font-size:2.25em;}
	
	body.page #content{
		min-height:100%;
		overflow:visible;
	}
}