/*
Theme Name: Beck & Caul
Theme URI: http://www.beckandcaul.co.nz
Author: Beck & Caul
Version: 1.0

*/


/* =Reset default browser CSS. 
-------------------------------------------------------------- */


/* Generated by Glyphter (http://www.glyphter.com) on  Mon Sep 26 2016*/
@font-face {
    font-family: 'Glyphter';
    src: url('fonts/Glyphter.eot');
    src: url('fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('fonts/Glyphter.woff') format('woff'),
         url('fonts/Glyphter.ttf') format('truetype'),
         url('fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
	display: inline-block;
   font-family: 'Glyphter';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}



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, font, 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 {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	font-family: 'Arial', sans-serif;
	font-size: 16px;
	line-height: 19px;
}
html { height: 100%; position:relative; overflow-x:hidden; }
body {height: 100%; }
p {margin-bottom:10px;}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
img{ max-width:100%;}
h1{
	color:#434343;
	font-size:24px;
	font-weight:bold;
}

ol, ul{ margin-left:20px; padding-left:5px; }

blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
	

}

a:hover, a:link, a:visited{
	color:black;
	text-decoration:none;
}
.acf-map {
	width: 100%;
	height: 300px;
	border: #ccc solid 1px;
	margin: 20px 0;
}
#sending, #sent{display:none;}

.nodisp{ display:none !important; opacity: 0; }
.ninesixty{ width:980px; position:relative; margin:0 auto; }
.clear{clear:both;}
.cl5{ height:5px;}
.cl10{ height:10px;}
.cl20{height:20px;}
.cl30{height:30px;}
.cl40{height:40px;}
.cl50{height:50px;}
.cl60{height:60px;}
.cl70{height:70px;}
.cl80{height:80px;}
.cl90{height:90px;}
.cl100{height:100px;}
.paddlefttw{ padding-left:20px; }
.smartphoneonly{ display: none; }
#savetarget{ display:none; }

div, input, span{ transition:all 0.5s ;  -webkit-transition:all 0.5s ;  -o-transition:all 0.5s ;  -moz-transition:all 0.5s  }

.loading{ display:none; position:absolute; z-index:9999999999; width:100%; height:100%; background:rgba(0,0,0,0.9); }
.hiddenoverflow{ overflow:hidden;  }
.approved{display:none;  position:absolute; z-index:9999999999; width:100%; height:100%; background:rgba(0,0,0,0.7);  color:#FFF; text-align:center; padding-top:20%; font-size:20px; top:150px }

.cancelled{  -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.5; }

/*HEADER*/
	.header{ background:#1B1B1B; padding:12px 0; position:relative; }


/*FOOTER*/
	.footer{ position:fixed; width:100%; top:100%; margin-top:-50px; height:50px; left:0%; border:0px solid; background-color:#1b1b1b; padding:15px 0px 0px 15px; }
	.Grey_Small         {	color           : #606060;	font            : 8pt 'Arial', Helvetica, sans-serif;	}
	.Grey_Small a{ color:inherit; font:inherit; font-size:8pt; }
	
/*DEFAULT*/
	.placeholderspan{position:absolute;font-size:10px;right:10px;color:#000;opacity:.5;top:5px;line-height: 10px;height:10px; }
	.inputholder{position: relative; display:block; margin-bottom: 5px;}
	.loginbox, .fp_box{ position:relative; max-width:500px; margin:100px auto; background:#EDEDED url("img/bglines.png"); box-sizing:border-box; opacity:0; height:0; overflow:hidden;}
	.loginbox:before{ content:'LOGIN'; position:absolute; left:0; top:50px; width:100%; text-align:center; box-sizing:border-box; color:#FFF; font-size:30px; font-weight:bold;   }
	input:-webkit-autofill {
		-webkit-box-shadow: 0 0 0px 1000px #eaeaea inset;
	}
	input, select{ height:48px; border:1px solid #e6e6e7; padding:0 10px; line-height:48px; background:#eaeaea; margin:0; width:100%; font-size:18px; font-weight:400; font-size:14px; font-style:italic; color:#444; }
	select{  -webkit-appearance:none;    -moz-appearance:none;    appearance:none;  cursor:pointer; }	
	input[type="radio"], input[type="checkbox"]{ width:20px; float:left; margin:0 10px;}
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		select {padding-right:18px}
	}

	
	textarea{height:48px;border:1px solid #e6e6e7;padding:0 10px;line-height: 24px;background:#eaeaea;margin:0;width:100%;font-size:18px;font-weight:400;height:200px;font-family:Arial;font-size:14px;color:#444;}
	input, select, textarea{box-sizing: border-box; margin-bottom:5px; }
	
	
	.selectfield {position:relative; background:black; cursor:pointer; }
	.selectfield:after {cursor:pointer;width: 48px;height: 48px;background:#fddd02  url("img/bglines.png");content:'A';font-family: 'Glyphter';color:#FFF;right:0px;top: -16px;padding:16px 0 0px 17px;font-weight:bold;border-bottom:0;position:absolute;pointer-events:none;box-sizing: border-box;}
	.containerselect:after{margin-top: 2px;}
	


	input:focus, textarea:focus { outline: none; background:#fff; border:1px solid #fddd02; }
	input[type=submit], input[type=button], .button{background:#fddd02  url("img/bglines.png");max-width:200px;display:block;position:relative;float:right;color:#FFF;font-size: 17px;font-weight:bold;text-transform:uppercase;cursor:pointer;}
	
	input[type=submit]:hover, input[type=button]:hover, .button:hover{ background:#444; }
	.failedlogin{  background:red  url("img/bglines.png") !important; }

	.halfinput{ width:49.5%; float:left; }
	.halfinput.leftmarg{ margin-left:1%; }
	.thirdinput{ width:33%; float:left; }
	.thirdinput:nth-of-type(2), .thirdinput:nth-of-type(3){ margin-left:1%; width:32.5%; }
	.twothirdinput{ width:66%; float:left; margin-left:1%; }
	.thirds .thirdinput{ text-transform:uppercase; font-size:12px; padding-bottom:5px; font-weight:bold; color:#444;}

	.fourthinput, .fourth{ width:24%; float:left; margin-left:1%; }
	.fourthinput:nth-of-type(1), .fourth:nth-of-type(1){ margin-left:0; }
	.fourth{ text-transform:uppercase; font-size:12px; font-weight:bold; }
	
	
	.activebox{  padding:120px 50px 80px  50px; opacity:1; height:auto; }
	.fp_box:before{ content:'Forgotten Password'; position:absolute; left:0; top:50px; width:100%; text-align:center; box-sizing:border-box; color:#FFF; font-size:30px; font-weight:bold; text-transform:uppercase;  }
	.forgottenpwd{ font-size:8pt; float:right; line-height:8pt; text-transform:uppercase; display:block !important; width:100%; text-align:right; padding-bottom:10px;}
 
 	.processbox .formbox, .processbox .rightbox{ margin-top:10px; }
 	.formbox{  position:relative;margin-top:100px;width: 78%;  display:block; box-sizing:border-box; float:left; }
	
	.registrationbox:before{content:'Registration';position:absolute;left:0;top: 30px;width:100%;box-sizing:border-box;color:#FFF;font-size:30px;font-weight:bold;color:#2a7ca8;text-transform:uppercase;font-weight:400;}
	.rightbox{width:20%; background:#EDEDED url("img/bglines.png"); position: relative; box-sizing: border-box; display:block; float:left; margin-top:100px;margin-left:2%; }
	.rightbox input[type=submit], .rightbox input[type=button], .rightbox .button, .rightbox .nextbuttonspan{ position:absolute; bottom:-70px; }
	.rightbox .floatingbutton {position:fixed !important;z-index:999999;width:290px;height:100px;bottom: 0;}
	.rightbox .nav-down{ bottom:100px !important; }
	.nextbuttonspan input{ bottom:0 !important;}

	.rightbox .backbuttonspan{position:absolute;bottom: -7px;width:100%;border-top:20px solid #FFF;}
	.rightbox .deletebuttonspan{position:absolute;bottom: 45px;width:100%;border-top:20px solid #FFF;}
	.rightbox .duplicatebuttonspan{position:absolute;bottom: 97px;width:100%;border-top:20px solid #FFF;}
	.rightbox .docbuttonspan{position:absolute;bottom: 149px;width:100%;border-top:20px solid #FFF;}
	.rightbox .editbuttonspan{position:absolute;bottom: 201px;width:100%;border-top:20px solid #FFF;}
	.rightbox .previewbuttonspan{position:absolute;bottom: 253px;width:100%;border-top:20px solid #FFF;}

	.backbuttonspan input, .deletebuttonspan input, .duplicatebuttonspan input, .docbuttonspan input, .editbuttonspan input, .previewbuttonspan input{bottom:0 !important;background:#222; text-align:left; font-size:14px; font-style:normal; font-weight:normal;}
	.previewbuttonspan input{ background:#1E5C87;}
	.inputsection{  background:#EDEDED url("img/bglines.png"); padding:0 50px; }
	.inputsection h2{ text-transform:uppercase; position:relative; top:-20px; font-size:21px; font-weight:bold; }

	.datepickerinput{ padding-left:50px;  }
	.datepickerinput:before{ content:'D'; position:absolute; left:0; width:50px; height:48px; line-height:48px; font-family:"Glyphter"; background:#aaa; color:#DDD; font-size:25px; text-align:center;}

/*LOGGEDIN*/
	.yellow_bar{ 
		padding-top:50px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fddd02+2,fddd02+52,eacd08+100 */
		background: #fddd02; /* Old browsers */
		background: -moz-linear-gradient(top,  #fddd02 2%, #fddd02 52%, #eacd08 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #fddd02 2%,#fddd02 52%,#eacd08 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #fddd02 2%,#fddd02 52%,#eacd08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fddd02', endColorstr='#eacd08',GradientType=0 ); /* IE6-9 */
 	}
	.ribbon{
			-webkit-mask-image: url("img/ribbon.svg");
			mask-image: url("img/ribbon.svg");
			-webkit-mask-size: cover;
			mask-size: cover;
			background-color:#facb0d;
			background-image:url("img/bglines.png");
			width:240px;
			height:45px;
			color:#FFF;
			display:inline-block;
			padding:0;
			line-height:45px;
			position:relative;
			margin-left:-30px;
			box-sizing:border-box;
			padding:0 20px;
			text-transform:uppercase;
			font-weight:bold;
			font-size:15px;
			left:30px;
			position:relative;
			box-shadow: inset -5px 0px 25px rgba(0,0,0,0.3);  
			}
	.activeribbon{ background-color:#246c93; }
	.ribbon:hover{ background-color:#444; }
	.sub_navigation a{margin-left: 15px; }
	.sub_navigation a:first-of-type{ margin-left:0; }

	.steps_container{  margin-top:80px; position:relative; display:block; overflow:hidden; }
	.steps{ color:#2a7ca8; font-size:31px; font-weight:bold; line-height:31px; }
	.steps:after{ width:100%; height:1px; background:#2a7ca8; position:absolute; content:''; top:16px; margin-left:15px; }
	.requestbookingbox:before{ content:'Request a booking'; position:absolute; left:0; top:-50px; width:100%;  box-sizing:border-box; color:#FFF; font-size:30px; font-weight:bold;  color:#2a7ca8; text-transform:uppercase; font-weight:400;  }

	.inputfront{ position:absolute; height:48px;  line-height:48px; padding:0 0 0 20px; color:#FFF; font-weight:bold; text-transform:uppercase; font-size:14px; width:80px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#287aa5+0,1b517c+100 */
		background: #287aa5; /* Old browsers */
		background: -moz-linear-gradient(left,  #287aa5 0%, #1b517c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #287aa5 0%,#1b517c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #287aa5 0%,#1b517c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#287aa5', endColorstr='#1b517c',GradientType=1 ); /* IE6-9 */

	}
	.inputfrontpadding{padding-left: 113px;text-transform:uppercase;}

	.reviewinput .inputfront{ width:230px; }
	.reviewinput input, .ship_data{ padding-left:260px;}
	.ship_data{ font-size:14px; font-style:italic; color:#444; background:#EAEAEA; line-height:20px; padding:4px 20px 4px 260px; }


	.radioinput{ background:#EAEAEA;}
	.radioinput label{  font-size:13px !important; padding-top:15px; display:block;}

	#nextbutton, #backbutton, #editbutton, #docbutton, #delbutton, #duplicatebutton{ display:block; padding-right:40px;}
	.nextbuttonspan, .backbuttonspan, .editbuttonspan, .docbuttonspan, .delbuttonspan, .duplicatebuttonspan{width:100%;height:auto;display: block;position: relative;}
	.nextbuttonspan:after{ content:"B"; width:20px; height:20px; display:block; position:absolute;  content:'B'; font-family: 'Glyphter';   color:#FFF; right:20px; bottom:18px; }
	.floatingbutton:after{ right:unset; left:170px;}
	.editbuttonspan:after{content:"E";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px;}
	.docbuttonspan:after{content:"F";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px;}
	.duplicatebuttonspan:after{content:"G";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px;}
	.deletebuttonspan:after{content:"H";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px;}
	.backbuttonspan:after{content:"C";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px;}
	.previewbuttonspan:after{ content:"";width:20px;height:20px;display:block;position:absolute; font-family: 'Glyphter';color:#FFF;right:20px;bottom:18px; }

	.filebox{ width:24%; float:left; height:100px; background:rgba(0,0,0,0.3); text-align:center; margin-right:1%; margin-bottom:7px; color:#FFF; padding-top:40px;}
	.filebox:hover{ background:rgba(0,0,0,0.5); }

	.selectable_ships{background:#EAEAEA;margin-bottom:10px;padding: 0;color:#444;font-size:14px;}
	.selectable_ships span{ color:red; font-weight:bold; font-size:12px; font-style:italic; padding:15px; display:block; }
	.selectable_ships thead td{ font-weight:bold; border:1px solid #aaa; font-size:10px; white-space:nowrap; padding:10px; }
	.selectable_ships tbody td{ font-size:12px; border:1px solid #ddd; padding: 10px; vertical-align:middle; line-height:14px;}
	.selectable_ships table input{ width:15x; height:15px; margin:0; }
	.mustselectradio{border: 1px solid red !important;}
	
	.ui-widget-content li{ margin-left: 110px !important; line-height:30px; max-width:calc(100%-110px); }
	.ui-widget-content .ui-state-focus{ background:transparent;  border:0; color:#26749F; font-weight:bold; cursor:pointer; }




/*PREVIOUS BOOKINGS*/
	.btable_top{/* background: #EDEDED url(img/bglines.png); */position:relative;}
	.tableheader{clear:both;width:100%;position:relative; }
	.field_from, .field_to, .field_sno, .field_bno, .field_bdate, .field_action{ padding:5px; float:left; display:block; position:relative;  line-height:20px; 	min-height:30px; font-size:13px; box-sizing:border-box; }
	.field_from, .field_to, .field_sno{ width:11%; }
	 .field_bdate{ width:16%; text-align:center;}
	.field_bno{ width:36%; }
	.field_action{ width:15%; }
	.field_action input{width: 100%;padding: 0;text-align: center;}

	.field_action input[type="submit"]{ position:relative; display:block; }
	.field_action span{float:left;display: block;text-align:center;padding: 0;margin: 0;width: 33%;height: 33%;position: relative;cursor: pointer;}
	.field_action span:after{ font-size:20px; line-height:20px; left:13px;}
	.field_action .nextbuttonspan:after { display:none }
	.field_action .nextbuttonspan #nextbutton{font-family:'Glyphter';text-align:center;padding-left:13px;box-sizing:border-box;padding-right: 27px;display:block;}
	
	.vesselname{ font-size:11px; }
	.bookinglist{ border-bottom: 0px solid #216691;margin:0 0 5px 0; border-bottom:1px dotted #287aa5}
	.bookinglist:nth-of-type(even){background: #ddd !important;}
	.bookinglist:nth-of-type(odd){ background:#f3f3f3; }

	.tableheader div{ border-right:2px solid #FFF; color:#FFF; text-transform:uppercase; line-height:35px;
		background: #287aa5; /* Old browsers */
		background: -moz-linear-gradient(left,  rgb(40, 122, 165) 0%, #1b517c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #287aa5 0%,#1b517c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #287aa5 0%,#1b517c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#287aa5', endColorstr='#1b517c',GradientType=1 ); /* IE6-9 */ }
	.tableheader div:nth-of-type(6n+6){ border-right:0;}
	.small_button{ width:20px; height:20px; float:left; }

	.btable_top .containers{ position:absolute; bottom:10px; font-size:12px; padding:5px 10px; width:82%; margin-left:5px; background:rgba(40,122,165,0.7); color:#FFF; z-index:0;}
	
/*CONTACT*/
	#sending, #sent{display:none;}
	.mobileonly{ display:none; }
	.mobilmenu{ width:90%;}
	.mobilmenuclose{ font-size:20px}
	.mobilemenu_button{ margin-top:50px; position:absolute; z-index:999999999; right:50px; cursor:pointer; }	
	.mobilemenu_button img{ width:50px;}
	.contact_content{ margin:70px 0; }
	.mapdiv{ width:100%; height:500px; background:black; }
	.smartphoneonly{ display:none; }

/*MENU*/
	.mobileonly{ display:block; }
	
	.mobilmenu{ left: 0%; position: fixed;width: 100%;background: rgba(0,0,0,0.9); height: 100%;top: -100%; z-index: 0;box-sizing: border-box;padding: 5px 50px 50px 0px;overflow: scroll;  transition:all 0.5s ;  -webkit-transition:all 0.5s ;  -o-transition:all 0.5s ;  -moz-transition:all 0.5s  }
	.mobilmenushow{ top:0; z-index:99999999999 }
	.mobilmenu ul{ clear:both;  }
	.mobilmenu li{ list-style: none; float: none; display: block; clear:both; display:block; width:100%; padding:10px 20px; background:#C09713; box-sizing:border-box; margin-bottom:5px; text-align:right;}
	.mobilmenu li ul { margin-left:30px; }
	.mobilmenu li ul li{ padding:5px;}
	.mobilmenu a{ color:#FFF; display:block; clear:both; padding:10px; text-transform: uppercase;}
	.mobilmenu li ul li a{ text-transform: none;}
	.mobilmenuclose{ float:right; background:rgba(255,255,255,0.1); color:#FFF; font-size:40px; padding:15px 10px 5px; text-align:Center; margin-bottom:5px; cursor:pointer;}
	.mobilmenuclose span{ color:inherit; display: block; font-size:10px; padding-top:5px;}

	.mobmenu{ width:100%; box-sizing: border-box; clear:both;}
	.mobmenu span{ text-transform: uppercase; background:rgba(255,255,255,0.1); width:100%; display:block; padding:20px 30px; margin-bottom: 5px; box-sizing:border-box;}


/*POSTS*/
	a.backlink{ display:block; padding-bottom:30px;  color:#DD1D3B;  line-height:40px; font-size:18px;}
	.backlink:before{ content:'❰'; position:relative; top:2px; left:0; width:20px; height:40px; overflow:hidden; text-align:center; font-size:22px; font-weight:400; color:#DD1D3B;  padding-right:10px; font-style:normal; }
	.post_content{ margin-top:60px; }
	.post_content h1{margin-bottom:30px;color:#DD1D3B;line-height: 27px;}
	.post_content h1 span{  line-height:20px; padding-top:5px; }
	.writers{  font-weight:Bold; padding-bottom:20px;}
	.writers:before{ content:'[ '; padding-left:20px; }
	.writers:after{ content:']'; }
	.writers a{ color:#DD1D3B; font-style:italic; font-weight:normal; }

	.posts h1{ color:#DD1D3B; text-transform:uppercase; font-size:90px; line-height:150px; font-weight:900;  }
	.article.latestpost{ background:#DD1D3B;  box-sizing:border-box; padding:20px; }
	.latestpost:before{ content:'Latest post'; text-transform:uppercase; font-size:14px; font-weight:300; color:#FFF; font-style:italic; padding-bottom:20px; display:block; }
	.article div, .article p, .article span, .article a{ color:#FFF; font-size:17px; line-height:24px;}
	.article a{ font-weight:300; font-style:italic; padding-left:20px; white-space:nowrap; }
	.article_title{ font-weight:bold; font-size:19px; line-height:24px;  } 

	.blog{ border-bottom:2px solid #DD1D3B; padding-bottom:20px; margin-bottom:20px; }
	.blog_date{ background:#DD1D3B; width:20%;  float:left; display:block; color:#FFF; font-size:56px; line-height:55px; font-weight:900; text-transform:uppercase; box-sizing:border-box; padding:10px; text-align:right; }
	.blog_content{ width:80%; display:block; float:left; box-sizing:border-box; padding-left:30px; }
	.blog_title{ color:#DD1D3B; font-weight:bold; font-size:19px; padding-bottom:10px; }
	.blog_lesscontent a{ color:#DD1D3B; font-style:italic; font-weight:300;}


/*RESPONSIVE*/
	
	@media only screen and (max-width:1920px){
		.rtop_graphic{top:-350px; left:-650px;	}
		h1 .cd-words-wrapper b i em{font-size:200px !important; line-height: 138px;}
		.footer_graphic{ 	background-position:-520px bottom ;	background-size: 1200px auto; }
		.content{ position:relative;max-width:100%; padding-left:600px; clear:both;display:block;padding-top:0px;}
	}

	@media only screen and (max-width:1280px){
		.rtop_graphic{ display:none	}
		h1 .cd-words-wrapper b i em{font-size:150px !important; line-height: 108px;}
		.footer_graphic{ background-position:-450px bottom ;	background-size: 1000px auto;	max-width:100%;	box-sizing:border-box;	display:block; 	}
		.content{ position:relative;max-width:100%; padding-left:500px; clear:both;display:block;padding-top:0px;}
	}


	@media only screen and (max-width:960px){
		.logo {	width: 100%;	height: 100%;	max-height: 129px;			position: relative;			text-align: left;		padding-top: 150px;		z-index: 9999;		margin-left: 0;		box-sizing-border-box;	padding-left:30px;	}
		.ltop_graphic {
				width: 1204px;
				max-width:100%;
				height: 800px;
				background: url("img/mainbg-min.png");
				background-position: left bottom;
				background-size: cover;
				-ms-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
				position: absolute;
				top: -500px;
				right: -0;
			}

		.post_content{ padding:0 10px;}
		a.backlink{ font-size:14px; }
		.posts h1{ font-size:50px; box-sizing:border-box; padding-left:20px; }
		.post_content h1 { font-size:20px;    margin-bottom: 30px;    color: #DD1D3B;    line-height: 20px; }
		.mobilemenu_button{ float:right; margin-right:0px; margin-top:20px; background:rgba(0,0,0,0.7); padding:10px 6px 5px; border-radius:5px; right:20px; position:fixed; }	
		.mobilemenu_button:before{ display:none;}
		.mobilemenu_button img{ width:50px; opacity:0.7}


		.cd-intro {    margin: 0em auto;    margin-top: 219px !important;    height: 250px;    display: block;    position: relative;    clear: both;    left: -45px;}

		.rtop_graphic{ display:none !important; 	}
		h1 .cd-words-wrapper b i em{font-size:130px !important; line-height: 78px;}
		.footer_graphic{background:transparent; 	width:100%; padding:0 30px;}
		.content{ position:relative;max-width:100%; padding-left:0; clear:both;display:block;padding-top:0px;}
		.content_inner {    max-width: 100%; }

		body, html{max-width:100%; position:relative; }
		.desktoponly{ display:none !important;}
		
		.ninesixty{ width:100%;}

		.graybar, .redbar{ box-sizing:border-box; padding:50px 30px; }
		.template td:nth-of-type(2n+2){ display:none; }

	}

	@media only screen and (max-width:767px){
	  .mobileonly{ display:block; }
	   body, html{ width:100%;}
	  .ninesixty{ width:100%;}
	  .templates_title{ font-size:40px;line-height:70px; padding-bottom:20px; }
	  h1 .cd-words-wrapper b i em{font-size:95px !important; line-height: 50px; z-index:999; position:relative;}
	  .cd-intro {height:100px;margin-left:45px;margin-top: 169px !important;}
	  .logo{ max-width:80%; text-align:center; margin:0 auto; margin-left:-0px; top:-30px; left:-10px; }
	  .logo img{ content:url("http://innovate.parryfield.com/wp-content/themes/beckandcaul/img/Innovate-Christchurch-Lawyers-logo-black.png"); }
	  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, font, 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 {
				background: transparent;
				border: 0;
				margin: 0;
				padding: 0;
				vertical-align: baseline;
				font-family: 'Roboto', sans-serif;
				font-size: 14px;
				line-height: 17px;
			}
	
		.content strong{color:#DD1D3B;font-size: 16px;line-height: 21px;font-weight: bold; padding-bottom:15px; display:block;}
		.content p, content strong{ line-height:16px; font-size:14px;}
		.footer_graphic {	padding: 0 0px;	}
		.content_inner{ padding: 0 20px 20px;}
		.footertitle{  font-size:44px; line-height:40px;  margin-bottom:20px; text-align:center; }
		.graybar{border-top: 5px solid #dd1d3b; background:#323232; color:#FFF; padding:50px 20px;}
		.graybar div{  text-align:center; }
		.graybar label{ width: 100%;font-size: 18px;line-height: 20px;}
		.graybar a{ color:#FFF; font-weight: 900; font-size: 18px; line-height: 18px;}
		.graybar span{color:#fff; display:inline-block; font-weight: 900; font-size: 18px; line-height: 18px; margin-bottom:20px;}
		.template td, .template td a{font-size:15px; }
		
		.smartphoneonly{ display:block; top:-40px; position:relative; display:block; z-index:0; }

		.cd-words-wrapper{ position:relative; z-index:999; }
	}

	@media only screen and (max-width:414px){
	  .mobileonly{ display:block; }
	  .template td, .template td a{font-size:13px; }
	  .cd-intro {height:170px;margin-left: 0;margin-top: 139px !important;left: 0;}
	  .template td:nth-of-type(3n+3){ white-space:nowrap }
	  .footertitle{  font-size:44px; line-height:40px;  margin-bottom:20px; text-align:center; }
	  .enquirybutton{ width:100%; display:block;}
	  h1 .cd-words-wrapper b i em{font-size:85px !important; line-height: 50px; z-index:999; position:relative;}
	}

	@media only screen and (max-width:360px){
	   h1 .cd-words-wrapper b i em{font-size:60px !important; line-height: 28px;}
	   .cd-intro {height:130px;margin-left: 14px;margin-top: 139px !important;}

	   .logo {    max-width: 100%;    text-align: center;    margin: 0 auto;    margin-left: -10px;    top:-30px; }
	}






.sk-circle {
  margin: 20% auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fddd02;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}