/*  
Theme Name: D+D Master Theme
Theme URI: 
Description: Master Theme for Design Plus Drafting & Drawable
Version: 1.0
Author: Studio 313
Author URI: studio313.com.au
*/

/** 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; }

/* box-sizing border box */
html {-webkit-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after {  -webkit-box-sizing: inherit;  box-sizing: inherit; }


/* colours */
	
.grad-d2l {background: #0f6da2; background: -webkit-gradient(linear, left top, right top, color-stop(61%, #0f6da2),to(#8bd2ed)); background: linear-gradient(to right, #0f6da2 61%,#8bd2ed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f6da2', endColorstr='#8bd2ed',GradientType=1 );}
.grad-l2d {background: #8bd2ed; background: -webkit-gradient(linear, left top, right top, from(#8bd2ed),color-stop(60%, #0f6da2)); background: linear-gradient(to right, #8bd2ed 0%,#0f6da2 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bd2ed', endColorstr='#0f6da2',GradientType=0 );}
.col-main, h1, h2, h3, h4 { color: #0F6DA2;}
.bg-col-main { background: rgba(15,109,162,1);}
.bg-col-main-75 { background: rgba(15,109,162,0.75);}
.bg-col-main-50 { background: rgba(15,109,162,0.5);}
.bg-col-main-25 { background: rgba(15,109,162,0.25);}

/*
fonts:

font-family: 'Raleway', sans-serif;
font-family: 'Open Sans', sans-serif;

*/


.btn.ghost { border: 2px solid rgba(255,255,255,0.25); background: none; color: #fff; text-align: center; font-family: 'Raleway', sans-serif; font-weight: 700; padding: 10px 30px; font-size: 18px;}
.btn.ghost:hover { border: 2px solid rgba(255,255,255,0.5);}

.btn.center { display: block; margin-left: auto; margin-right: auto; max-width: 230px;}


/** SITE STYLES **/

body { -webkit-text-size-adjust: none; background-color:#fff; font-size:18px; overflow-x: hidden;}

h1, h2, h3, h4 { font-family: 'Open Sans', sans-serif; margin:0; padding:0; text-decoration:none; outline:none; border:none; line-height:1.6;}
h1.rale, h2.rale, h3.rale, h4.rale { font-family: 'Raleway', sans-serif;}

h1 { font-size: 26px; margin:0 0 10px 0; font-weight: 700;}
h2 { font-size: 24px; margin:0 0 15px 0; font-weight: 700;}
h3 { font-size: 20px; margin:0 0 15px 0; font-weight: 700;}
h4 { font-size: 20px; margin:0 0 15px 0; font-weight:400;}

p, a, li, cite { font-family: 'Open Sans', sans-serif; margin:0; padding:0; text-decoration:none; outline:none; border:none;}
p, li { color:#545454; line-height:1.6;}
p { margin:0 0 20px 0;}

a, button { text-decoration:none; color:#0F6DA2; outline:none; border:none; -webkit-transition:all .2s ease-out; transition:all .2s ease-out;}
a:hover { text-decoration:none; color:#545454;}

ul, ol { margin-left:20px; margin-bottom:10px;}
ul { list-style:disc;}
ol { list-style:decimal;}

table { margin:20px auto;}
th { text-transform:uppercase; border-bottom:2px solid #aaa !important;}
th, td { padding:10px; border:1px solid #ccc;}
table tr:nth-of-type(even) { background:#f2f2f2;}
@media screen and (max-width: 600px) {table { overflow-x: auto; display: block; border-right:1px dashed #ccc; padding:30px 0; }}

b, strong { font-family: 'Open Sans', sans-serif; font-weight: 700;}
em, i { font-family: 'Open Sans', sans-serif; font-style: italic;}
em b, i b, em strong, i strong { font-family: 'Open Sans', sans-serif; font-weight: 700; font-style: italic;}


img { max-width: 100%; height: auto;}
.container { padding-left:0; padding-right: 0; width: 100%; max-width: 1500px;}

/** HEADER **/
header { margin:0; padding:0;  width: 100%; padding: 0px 0; background: #fff; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; z-index: 2001; top: 0; position: fixed;}

nav.navbar { background: #fff;}

header a.navbar-brand { width: 200px;}
header a.navbar-brand img { width: 100%; height: auto;}

.shrink {padding: 0 0;}
header.shrink a.navbar-brand { width: 160px;}



@media only screen and (min-width :700px) {
    header { padding: 15px 0 0;}
    header a.navbar-brand {width: 300px;}
    
    .shrink {padding: 7px 0 0;}
    header.shrink a.navbar-brand { width: 150px;}
}

@media only screen and (max-width :991px) {
    button.navbar-toggler { z-index: 2000; border: 1px solid #ccc;}
    button.navbar-toggler i { font-size: 24px; color: #545454;}
    ul.navbar-nav, ul.navbar-nav li { margin-left: 5px;}
}

@media only screen and (min-width :992px) {
    header { padding: 15px 0 0px;}
    header a.navbar-brand {width: 200px;}
    
    header.shrink a.navbar-brand { width: 200px;}
    .shrink {padding: 0px 0;}
}

@media only screen and (min-width :1200px) {
    header { padding: 15px 0 0;}
    header a.navbar-brand {width: 400px;}
    
    .shrink {padding: 0px 0;}
    header.shrink a.navbar-brand { width: 250px;}
}

@media only screen and (min-width :1400px) {
    header { padding: 15px 0 0;}
    header a.navbar-brand {width: 500px;}
    
    .shrink {padding: 10px 0 0;}
    header.shrink a.navbar-brand { width: 300px;}
}

	/* nav */
	
ul.navbar-nav li a {font-family: 'Open Sans', sans-serif; color: #545454; font-size: 14px;}

.dropdown-menu, button.navbar-toggler {  border:none !important;}
header a.dropdown-item { font-weight: 400 !important;}

@media only screen and (min-width :1000px) {
    ul.navbar-nav li a { font-weight: 700; font-size: 16px; padding-left: 20px !important; padding-right: 20px !important;}
    
    .dropdown-menu { border: none; -webkit-box-shadow: none; box-shadow: none;}
    .dropdown-menu a { padding-left: 10px !important; padding-right: 10px !important;}
	.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; }
	.dropdown-menu li:hover .sub-menu { visibility: visible; }
	.dropdown:hover .dropdown-menu { display: block; }
	.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; }
	.navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px;}
	.navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; top: 11px; left: -6px;}
}


@media only screen and (min-width :1200px) {
    ul.navbar-nav li a { padding-left: 25px !important; padding-right: 25px !important;}
}


.contact-panel { background: #111; text-align: right; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.contact-panel ul { position: relative; text-align: right; list-style: none; margin: 0; padding: 0 0 0; line-height: 0;}
.contact-panel ul li { text-align: center; display: inline-block; position: relative; vertical-align: top; padding:  5px; position: relative;}
.contact-panel ul li a { /*position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);*/ display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 16px;}
.contact-panel ul li:nth-of-type(4) { padding-top: 0; padding-bottom: 10px;}
.contact-panel ul li:nth-of-type(4) a { width: auto; border: 2px solid transparent; font-size: 30px; font-weight: 700; margin: 0; padding: 0; padding: 2px 20px 8px; letter-spacing: 1px; line-height: 1;}
.contact-panel ul li a i {}

@media only screen and (max-width :400px) {
    .contact-panel ul li { display: none;}
    .contact-panel ul li:nth-of-type(4) { display: block; width: 100%;}
}

	
/** CONTENT **/
.home-content-out { margin: 55px 0 0; min-height: 300px;}
@media only screen and (min-width :700px) {
    .home-content-out { margin: 97px 0 0;}
}

@media only screen and (min-width :1200px) {
    .home-content-out { margin: 115px 0 0;}
}
@media only screen and (min-width :1400px) {
    .home-content-out { margin: 127px 0 0;}
}


.content-out { padding: 150px 0 0;}



/* home */

.home-feat-img { background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; position: relative; z-index: 12;}
.home-feat-overlay { width: 100%; display: block; background: rgba(0,0,0,0.6);}
.home-feat-overlay, .home-feat-img { height: 300px;}
.home-feat-img { overflow: hidden; position: relative;}
.home-feat-img span {font-family: 'Raleway', sans-serif; color: #fff; font-size: 50px; position: absolute; bottom: 50px; padding: 20px;}
.home-feat-img a { position: absolute; bottom: 0px; padding: 15px 30px; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; left: 50%; -webkit-transform: translateX( -50%); transform: translateX( -50%); width: 100%; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-align:center; font-weight:700;}

.no-overlay { display: none;}

@media only screen and (orientation : landscape) {
.home-feat-overlay, .home-feat-img { height: calc(100vh - 55px);}
}

@media only screen and (min-width :400px) {
    .home-feat-img span { font-size: 70px; width: 100%; max-width: 700px; bottom: 20%;}
    .home-feat-img a { bottom: 10%; border: 2px solid #0f6da2; width: inherit;}
    .home-feat-img a:hover { border: 2px solid #fff;}
}

@media only screen and (min-width :700px) {
    .home-feat-overlay, .home-feat-img { height: calc(100vh - 97px);}
    .home-feat-img span { font-size: 100px; width: 80%; max-width: 700px; bottom: 20%;}
    .home-feat-img a { bottom: 10%; border: 2px solid #0f6da2; width: inherit;}
}

@media only screen and (min-width :1200px) {
    .home-feat-img { height: calc(100vh - 115px);}
    .home-feat-img span { font-size: 120px; left: 10%; max-width: 800px;}
    .home-feat-img a { bottom: 10%; font-size: 22px;}
}
@media only screen and (min-width :1400px) {
    .home-feat-img { height: calc(100vh - 127px);}
    .home-feat-img span { font-size: 140px;}
    .home-feat-img a { bottom: 10%;}
}
@media only screen and (min-width :1800px) {
    .home-feat-img { height: calc(100vh - 127px);}
    .home-feat-img span { font-size: 160px; left: 20%; max-width: 1000px;}
}


/* home panels 3 & 4 */
.home-panels { width: 100%; min-height: 400px; padding-top: 30px; }
.home-panels ul { margin: 0; padding: 0; position: relative; list-style: none; text-align: center; z-index: 10;}
.home-panels ul li { text-align: left; display: inline-block; width: calc(100% - 40px); vertical-align: top;}
.home-panels ul li.home-panels-item { border: 2px solid #fff; border-bottom: 0; }


.home-panels-item { margin-bottom: 50px; position: relative;}
.h-panels-img { background: #000; position: relative; line-height: 0;}
.h-panels-img img { opacity: 0.4;}
.h-panels-img h1 { color: #fff; font-size: 20px; font-family: 'Raleway', sans-serif; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.h-panels-txt { position: relative; padding: 20px 20px 20px  20px; background: #fff; line-height: 0;}
.h-panels-txt:before { content: ''; width: 100%; height: 50px; position: absolute; top: -31px; left: 0; z-index: 200; background: url(images/panel-bg-angle.png) top center no-repeat;}

@media only screen and (min-width :1000px) {
    .h-panels-img h1 { font-size: 30px;}
}

/*.h-panels-btn { background: #f5f5f5; width: 120px; height: 60px; border-radius: 50%; position: relative; margin-left: 50%; left: -60px; bottom: -30px;}
.h-panels-btn a { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 34px;}
*/

.panel-link-out { width: 100%; height: 40px; overflow: hidden;}
div.panel-link{
    position:relative;
    width:100%; height:100px;
    margin:0 auto;
    overflow:hidden;
}
div.panel-link a { position: absolute; top: 30%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #0f6da2; z-index: 200; font-size: 30px; font-weight: 700;}
div.panel-link:after{
    content:'';
    position:absolute;
    left:50%; margin-left: -60px; top:5px;
    border-radius:100%;
    width:120px; height:75px;
    -webkit-box-shadow: 0px 0px 0px 2000px #fff;
    box-shadow: 0px 0px 0px 2000px #fff;
}



.bottom-contact { width: 100%; height: 50px; position: fixed; bottom: 10px; z-index: 10; opacity: 1; text-align: center;-webkit-transition: all 0.25s;transition: all 0.25s;}
.bottom-contact a { display: inline-block;  color: #fff; font-size: 16px; padding: 10px 13px;  border-radius: 20px; text-shadow: 0 0 5px rgba(15,109,162,1); overflow: hidden; -webkit-box-shadow: 0 0 4px 4px rgba(100,100,100,0.2); box-shadow: 0 0 4px 4px rgba(100,100,100,0.2);}
.bottom-contact a:before { content: "\f095"; font-family: FontAwesome; font-style: normal; font-weight: normal;}	

@media only screen and (max-width : 699px) {
    .home-panels { padding-top: 30px; }
    div.panel-link a { position: absolute; top: 30%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; z-index: 200; font-size: 30px; font-weight: 700;}
    .home-panels ul li:nth-of-type(3) div.panel-link a { color: #0f6da2; }
	.h-panels-btn { background: #fff;}
    .home-panels ul li div.panel-link a { color: #0f6da2; padding-bottom: 30px;}
}

@media only screen and (min-width : 700px) {
    .home-panels ul li { text-align: left; display: inline-block; width: calc(33% - 20px);}
    .home-panels ul li:nth-of-type(2) { margin-left: 15px; margin-right: 15px;}
    
    .home-panels.home-panels-4 ul li { text-align: left; display: inline-block; width: calc(45% - 20px);}
    .home-panels.home-panels-4 ul li { margin-left: 15px; margin-right: 15px;}
}

@media only screen and (max-width : 999px) {
.h-panels-btn { background: #fff;}
    .home-panels ul li div.panel-link a { color: #0f6da2; padding-bottom: 30px;}
}


@media only screen and (min-width : 1000px) {
    .home-panels ul li:nth-of-type(2) { margin-left: 20px; margin-right: 20px;}
    
    .home-panels.home-panels-4 ul li { text-align: left; display: inline-block; width: calc(23% - 20px);}
    .home-panels.home-panels-4 ul li { margin-left: 15px; margin-right: 15px;}
    .home-panels.home-panels-4 .h-panels-txt:before { top:-29px;}
    .h-panels-txt p { font-size: 18px; margin-bottom: 20px;}
    
    .bottom-contact a {  border-radius: 3px; font-size: 20px; padding: 10px 30px; border: 2px solid #0f6da2; }
    .bottom-contact a:hover { border: 2px solid #fff;}
    .bottom-contact a:before { content: 'contact us';font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 1px;}
}

.h-panels-txt ul, .h-panels-txt ol { text-align: left; position: relative;}
.h-panels-txt ul li, .h-panels-txt ol li { text-align: left !important; display: inline-block; width: 100%;}
.h-panels-txt ol li:nth-of-type(2) { margin: 0;}



/* home about */
.home-about { background: #f5f5f5; position: relative; padding: 200px 20px 80px; margin-top: -150px;}
.home-about .container { }
.home-about h4 { color: #0F6DA2;font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 18px;}

.home-about img {display: none;}

@media only screen and (min-width : 991px) {
    .home-about h4 { text-align: right; margin-bottom: 40px;}
    .home-about img { display: block;}
}

@media only screen and (min-width : 1000px) {
    .home-about h4 { font-size: 24px;}
    .home-about p { font-size: 18px; margin-bottom: 20px;}
}


/* home projects */
.home-projects { min-height: 400px; padding: 80px 10px;}		
.proj-title h1 { color: rgba(255,255,255,1.0);font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 36px; line-height: 1; padding: 0 10px;}
.proj-title h1 span { color: rgba(255,255,255,0.75); font-size: 20px; text-transform:capitalise;}
.proj-blurb p { color: rgba(255,255,255,0.75);}

@media only screen and (min-width : 1000px) {
    .proj-blurb p { text-align: right; padding-right: 10px;}
}



/* PROJECT FEED */

ul.proj-feed { list-style: none; position: relative; text-align: center; margin: 40px 0; padding: 0; display: block;}
ul.proj-feed li { display: inline-block; width: 100%; max-width: 500px; height: 400px; margin-bottom: 20px; position: relative; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;}

.projfeed-overlay { background-color: rgba(0,0,0,0.1); display: block; width: 100%; height: 400px; position: absolute; top: 0; left: 0; z-index: 1; -webkit-transition:all .2s ease-out; transition:all .2s ease-out;}
.projfeed-overlay:hover { background-color: rgba(0,0,0,0.3);}

ul.proj-feed li h1 { color: rgba(255,255,255,1.0);font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; position: absolute; right: 20px; bottom: 20px; text-align: right; z-index: 2;}
ul.proj-feed li h1 span { color: rgba(255,255,255,0.5); font-size: 20px;}

@media only screen and (min-width : 700px) {
    ul.proj-feed li { max-width: inherit; width: calc(50% - 15px); margin: 0 5px 20px;}
    ul.proj-feed li:nth-of-type(3) { display: none;}
}

@media only screen and (min-width : 1200px) {
     ul.proj-feed li:nth-of-type(3) { display: inline-block;}
     ul.proj-feed li { width: calc(33% - 12px); margin: 0 5px 20px;}
   
}

/* projects page */
.projects { background: #313131 url(images/bg-prog-grad.png) top center repeat-x; padding: 200px 20px 40px;}
.projects-btm { background: #313131; padding:40px 20px 40px;}
.projects .projfeed-overlay, .projects-btm .projfeed-overlay { background-color: rgba(0,0,0,0.4);}
.projects .projfeed-overlay:hover, .projects-btm .projfeed-overlay:hover { background-color: rgba(0,0,0,0);}

@media only screen and (min-width : 700px) {
    .projects ul.proj-feed li:nth-of-type(5), .projects-btm ul.proj-feed li:nth-of-type(5) { max-width: inherit; width: calc(100% - 17px); margin: 0 5px 20px;}
    .projects ul.proj-feed li:nth-of-type(3), .projects-btm ul.proj-feed li:nth-of-type(3) { display: inline-block;}
    .projects ul.proj-feed li, .projects-btm ul.proj-feed li { margin-bottom: 10px;}
}

@media only screen and (min-width : 1200px) {
    .projects { padding-top: 250px;}
     .projects ul.proj-feed li:nth-of-type(4), .projects ul.proj-feed li:nth-of-type(5), .projects-btm ul.proj-feed li:nth-of-type(4), .projects-btm ul.proj-feed li:nth-of-type(5) { max-width: inherit; width: calc(50% - 17px); margin: 0 5px 20px;}
   
}



/* proj-modal */

.modal { z-index: 3001 !important;}
.modal-backdrop { z-index: 3000 !important; background: #313131 !important; opacity: 1.0 !important; filter: alpha(opacity=100) !important;}
.modal-backdrop.in { z-index: 3000 !important; opacity: 1.0 !important; filter: alpha(opacity=100) !important;}
.modal-dialog { display: block; width: 100%; max-width: 1400px;}
.modal-content { background: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; border: none;}
button.close { text-shadow: none; color: #fff; font-weight: 400; opacity: 0.75; font-size: 14px; margin-bottom: 20px;}
button.close:hover { color: #fff; opacity: 1; cursor: pointer;}

.modal-body { padding-bottom:150px;}
.modal-body img { margin-bottom: 30px; max-width: calc(100% - 10px);}
.modal-body h2 { color: #0F6DA2;font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; text-align: left;}
.modal-body h2 span { color: rgba(255,255,255,0.5); font-size: 20px;}
.modal-body p { text-align: left; color: #fff;  font-size: 18px; margin-bottom: 20px;}


@media only screen and (min-width : 1000px) {
    .modal-body h2 { text-align: right;}
}


/* proj testimonial */
.testimonial-quote { text-align: center; background: #0F6DA2; padding: 100px 20px 60px;}
.testimonial-quote .container { position: relative;}
.testimonial-quote .container::before { content: '\00201c'; font-family: serif; color: rgba(255,255,255,0.5); position:absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 100px; margin: 0; padding: 0; line-height: 0;}
.testimonial-quote p { color: #fff; font-size: 18px; line-height: 2.2; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 700; margin-bottom: 20px;}
.testimonial-quote cite { color: rgba(255,255,255,0.75); font-weight: 700;}


/* FLEX CONTENT */

.flexcont { padding-top: 90px !important;}
.flexcont-head { padding: 20px 20px;}
.flexcont-head h1 { font-size: 20px; color: #fff; line-height: 1; margin-bottom: 0; font-weight: 700; padding-left: 10px;}

.mod-spacer { width: 100%; height: 50px;}

@media only screen and (min-width : 700px) {
    .flexcont { padding-top: 110px !important;}
}

@media only screen and (min-width : 1000px) {
    .flexcont { padding-top: 100px !important;}
}

@media only screen and (min-width : 1200px) {
    .flexcont { padding-top: 130px !important;}
    .flexcont-head { padding: 20px 20px;}
    .flexcont-head h1 { padding: 25px 0 5px 20px; font-size: 30px; line-height:1; margin-bottom:0;}
}


/* modules - sidebar */
.mod-sidebar { width: 100%; background: url(images/bg-twotone.png) top center repeat-y; background-size: contain;}
.mod-sidebar-main { background: #fff; padding: 30px 40px;}
.mod-sidebar-sidebar { padding: 50px 30px 40px 20px; display: none;}
.mod-sidebar-item { margin-bottom: 50px;}

.sidebar-feat { background: #fff; padding: 0;}
.sidebar-feat img { width: 100%; height: auto; margin-bottom: 20px;}
.sidebar-feat p { padding: 0 10px 20px; font-size: 14px; text-align:center;}
.sidebar-feat a { display: block; color: #fff; font-weight: 700; text-align: center;font-family: 'Raleway', sans-serif; font-size: 18px; text-transform: uppercase; padding: 10px 20px;}

@media only screen and (min-width : 768px) {
    .mod-sidebar-sidebar { display: block;}
}

@media only screen and (min-width : 1200px) {
    .mod-sidebar-main { background: #fff; padding: 40px;}
}

@media only screen and (min-width : 1550px) {
    .mod-sidebar-main { padding: 40px 40px 40px 30px;}
}

/* module - full */
.mod-full { }
.mod-full .container { padding-left: 15px; padding-right: 15px;}

/* module - 2col */
.mod-2col { }
.mod-2col .container { padding-left: 15px; padding-right: 15px;}

/* module - grid */

.mod-grid { background:#f5f5f5;}
.mod-grid .container { background:#fff; padding: 40px;}
.grid-element { padding:0 40px; background-size: contain !important; background-repeat: no-repeat !important; background-position: top center !important; background-color:#fff; min-height: 200px !important; position: relative; margin-bottom:40px;}

@media only screen and (min-width : 700px) {
    .grid-element { min-height: 350px !important;}
}

@media only screen and (min-width : 1000px) {
    /*.grid-element p { padding-right: 40px;}*/
}

@media only screen and (min-width : 1200px) {
    .grid-element { min-height: 300px !important;}
    
}

@media only screen and (min-width : 1024px) {
.grid-reversed { -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.grid-reversed .grid-element { -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
.grid-element .grid-txt { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
}

/** Blog **/
.blog { padding: 60px 20px 60px; background: #F5F5F5;}

.blog-head { padding-bottom: 40px;}
.blog-head h1 { font-size: 30px; color: #0F6DA2; font-weight: 700;}

.blog-head a.btn { border: 0 !important; background-color: #fff !important; border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #545454 !important; padding: 15px; width: 100%; text-align: left;}
.blog-head .dropdown-menu { width: 100%; margin-top: -2px;}
.blog-head a.dropdown-item { padding: 10px !important;}

.feed-item { margin-bottom: 30px;}
.feed-item > div { background: #fff;}
.feed-img { height: 200px; width: 100%; float: left; position: relative; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;}
.feed-txt { height: auto; width: 100%; float: left; position: relative; padding: 20px 0 60px;}
.feed-txt h1 { color: #545454; font-size: 18px; font-weight: 700; padding: 0 20px;}
.feed-txt p { padding: 0 20px;}
.feed-txt a { position: absolute; bottom: 0; display: block; width: 100%; padding: 15px 20px; color: #fff; text-align: right; font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: uppercase;}
.feed-txt a:after { content: '\00bb'; margin-left: 5px; color: #fff; font-size: 22px;}

@media only screen and (min-width : 700px) {
    .feed-img { height: 300px; width: 47%;}
    .feed-txt { height: 300px; width: 53%;}
}

@media only screen and (min-width : 1200px) {
    .feed-txt h1 { font-size: 22px; }
}



/* article */
.article { padding-top: 90px !important;}
.article-wrap { width: 100%; background: url(images/bg-twotone.png) top center repeat-y; background-size: contain;}
.article-head { padding: 20px 20px;}
.article-head h1 { font-size: 20px; color: #fff; line-height: 1; margin-bottom: 0; font-weight: 700; padding-left: 10px;}
.article-main { background: #fff; padding: 30px 40px;}
.article-sidebar { padding: 40px 30px 40px 20px; display: none;}
.article-foot { padding: 50px 20px 0;}
.article .blog-feed { padding: 0 20px;}
.article-foot h1 { font-size: 24px; font-weight: 700; color: #0F6DA2;}

.article-sidebar-item { margin-bottom: 10px; background: #fff;}
.article-sidebar-item h4 { width: 100%; display: block; text-align: center; margin: 0; padding: 15px; background: #e6e7e8; color: #0f6da2; font-size: 16px; font-weight: 700;}
.sidebar-contact a { color: #fff; background: #0f6da2; display: block; text-align: center; padding: 30px 0; font-size: 16px; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; line-height:1.4;}

.sidebar-share ul { position: relative; list-style: none; margin: 0; padding: 0; text-align: center; line-height: 0; font-size: 0;}
.sidebar-share ul li {display: inline-block; width: 25%;}
.sidebar-share ul li a { background: white; display: inline-block; width: 100%; font-size: 30px; padding: 10px; color: #545454;}
.sidebar-share ul li a:hover { background: #545454; color: #fff;}

.sidebar-articles ul { position: relative; list-style: none; margin: 0; padding: 20px 0;}
.sidebar-articles ul li { display: block; padding: 0;}
.sidebar-articles ul li a { color: #545454; padding: 5px 20px; display: block; font-size: 14px;}
.sidebar-articles ul li a:hover { color: #0f6da2; background: #fafafa;}

@media only screen and (min-width : 700px) {
    .article { padding-top: 120px !important;}
}

@media only screen and (min-width : 768px) {
    .article-sidebar { display: block;}
}

@media only screen and (min-width : 1000px) {
    .sidebar-contact a { font-size: 20px; }
}

@media only screen and (min-width : 1200px) {
    .article { padding-top: 130px !important;}
    .article-head { padding: 20px 20px;}
    .article-head h1 { padding: 20px 0 10px 20px; font-size: 30px;}
    .article-main { background: #fff; padding: 40px;}
    
    .sidebar-contact a { padding: 40px 0; font-size: 30px; }
}

@media only screen and (min-width : 1550px) {
    .article-main { padding: 40px 40px 40px 30px;}
}


/* footer contact */
.footer-contact { padding: 80px 20px; position: relative; z-index: 13;}
.footer-contact p { text-align: center; font-size: 28px; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; max-width: 600px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 30px;}



/** CONTACT **/
.contact { padding-top: 90px !important; background: #f5f5f5;}

.contact-head { background: url(images/contact-head.jpg) center no-repeat; background-size: cover; position: relative; height: 200px;}
.contact-overlay { width: calc(40% + 100px); height: 200px; opacity: 0.85;-webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); margin-left: -100px; }
.contact-head h4 { font-family: 'Raleway', sans-serif; font-size: 30px; color: #fff; font-weight: 700; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; text-align: center;}

ul.contact-dets { list-style: none; position: relative; margin: 0; padding: 0; margin-top: 50px; margin-bottom: 50px;}
ul.contact-dets li { display: block; padding-left: 40px; position: relative; margin-bottom: 20px;}
ul.contact-dets li i { font-style: normal; font-weight: normal; position: absolute; left: 0px; font-size: 30px; color: #0f6da2;}
ul.contact-dets li.contact-tel i { top:10px;}
/*ul.contact-dets li:nth-of-type(1):before { content: "\f041"; }
ul.contact-dets li:nth-of-type(2):before { content: "\f1d8"; }
ul.contact-dets li:nth-of-type(3):before { content: "\f1d8"; }*/
ul.contact-dets li.contact-tel { font-family: 'Raleway', sans-serif; font-size: 30px; font-weight: 700;}
ul.contact-dets li span a { font-size:12px;}

.contact-form { background: #fff; padding: 40px; position: relative;}
.contact-dets-out { padding:20px !important;}
ul.contact-dets, .contact-dets-out p { padding:0 20px !important;}

@media only screen and (min-width : 700px) {
    .contact { padding-top: 120px !important;}
}

@media only screen and (min-width : 768px) {
    .contact-head h4 { text-align: left; max-width: 1500px; padding-left: 10%;}
}


@media only screen and (min-width : 992px) {
    .contact-form { margin-top: -60px; min-height: 500px;}
}

@media only screen and (min-width : 1000px) {
    .contact-head, .contact-overlay { height: 400px;}
    .contact-head h4 { font-size: 50px;}
}

@media only screen and (min-width : 1200px) {
	.contact-head, .contact-overlay { height: 500px;}
    .contact { padding-top: 130px !important;}
    .contact-head h4 { font-size: 60px;}
}


/** FOOTER **/
footer { background:#333333; padding:10px 0; position:relative; z-index: 13;}
footer > div { padding: 40px 0;}
footer p , footer a { color: #939598; font-size: 16px;}
footer p.credits, footer p.credits a { font-size: 16px; color: #545454;}
footer h4 { color: #fff; text-transform: uppercase; font-family: 'Raleway', sans-serif; font-size: 18px;}
footer a:hover { color: #8bd2ed;}
footer ul { list-style: none; position: relative; margin: 0; padding: 0;}
footer ul li { display: block; padding: 5px 0;}
footer ul li.a-white a { color: #fff; font-weight: 700;}

.foot-contact-dets img { opacity: 0.2; width: 100%; max-width: 400px; height: auto; padding-right: 30px; margin-bottom: 20px;}
.foot-contact-dets h1 a { color: #fff;font-family: 'Raleway', sans-serif; font-size: 30px;}
.foot-contact-dets p, .foot-contact-dets a { font-size: 18px;}
.foot-contact-dets p { margin-bottom: 20px;}
	
@media only screen and (min-width : 767px) {
        footer h4 { margin-top: 90px;}
}

@media only screen and (max-width : 767px) {
.sm-hidden { display: none; margin: 0; height: 0; padding: 0;}

}

@media only screen and (max-width : 991px) {
.md-hidden { display: none; margin: 0; height: 0; padding: 0;}
}
	
	
/* misc */
	
	/* form */
	.gform_wrapper label.gfield_label { font-family: 'Open Sans', sans-serif; font-size:12px; color:#939598; font-weight:400; padding:0 0 3px 0; margin:10px 0 0 0;}
	.gform_wrapper input[type=text], .gform_wrapper textarea, .gform_wrapper input[type=submit] { border-radius: 0; background-color:#fff; padding:10px; resize:none; border:none;  border-bottom:1px solid rgba(15,109,162,0.25); width:100%; margin:0 0 0 0; color:#545464 !important; font-size: 14px !important; opacity:1;}
	.gform_wrapper input[type=submit] { background-color:#fff; text-transform:uppercase; text-align:right !important; display:block !important; color:#0f6da2 !important; border:2px solid #0f6da2; font-weight:800; width:100%; max-width:400px; font:14px Arial, Helvetica, sans-serif; cursor:pointer; margin:0;-webkit-appearance: none; width:100% !important; font-weight:700;}
	.gform_wrapper input[type=submit]:hover { background-color:#0f6da2 !important; color:#fff !important; }
	.gform_wrapper input[type=checkbox] { position:relative; top:-5px;}
	.gform_confirmation_wrapper { font-family: 'Open Sans', sans-serif; font-size:16px;}
				
/* WP Paginate */
	ol.wp-paginate { margin-top:30px; position:relative; text-align:center;}
	ol.wp-paginate li, ol.wp-paginate li a, ol.wp-paginate li span.current { background:none; border:1px solid #ccc;}
	ol.wp-paginate li a:hover { background:none; border:1px solid #ccc; color:#545454;}
	ol.wp-paginate li a { color:#ccc;}

/* image align */
	img.alignright {float:right; margin:10px; margin-right:0px;} .alignright {float:right; }
	img.alignleft {float:left; margin:10px; margin-left:0px;} .alignleft {float:left; }
	img.aligncenter {display: block; margin-left: auto; margin-right: auto; margin-bottom:10px; margin-top:10px;} .aligncenter {display: block; margin-left: auto; margin-right: auto;}
	
	@media only screen and (min-width : 800px) and (max-width : 1200px) {img.alignright, .alignright, img.alignleft, .alignleft { max-width:50%; height:auto;} }
	@media only screen and (max-width : 799px) {img.alignright, .alignright, img.alignleft, .alignleft, img.aligncenter, .aligncenter { width:100%; height:auto; margin:15px auto;}}
    @media only screen and (min-width : 1200px) {img.alignright, .alignright, img.alignleft, .alignleft { max-width:75%; height:auto;}}
	
				
				
	.cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; }
	.fl { float:left;}
	.fr { float:right;}

	.no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.no-r-pad { padding-right:0 !important;}
	.no-l-pad { padding-left:0 !important;}
	.hidden {display:none; height:0; width:0;}
	.display {display:block;}

@media only screen and (min-width : 1024px) {
	.d-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.d-no-r-pad { padding-right:0 !important;}
	.d-no-l-pad { padding-left:0 !important;}
	}

@media only screen and (min-width : 700px) and (max-width : 1023px) {
	.t-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.t-no-r-pad { padding-right:0 !important;}
	.t-no-l-pad { padding-left:0 !important;}
}

@media only screen and (max-width : 699px) {
	.m-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.m-no-r-pad { padding-right:0 !important;}
	.m-no-l-pad { padding-left:0 !important;}
	}
	
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.article { padding-top:50px;}

/* WP Paginate */
	.pagination {}
	ol.wp-paginate { margin-top:30px; position:relative; text-align:center; width:100%;}
	ol.wp-paginate li, ol.wp-paginate li a, ol.wp-paginate li span.current { background:none; border:none;}
	ol.wp-paginate li span.current { color:#0f6da2;}
	ol.wp-paginate li a:hover { background:none; border:none; color:#0f6da2;}
	ol.wp-paginate li a { color:#545454;}
	
.ginput_container_select { background: url(https://designplusdrafting.com.au/wordpress/wp-content/uploads/2017/11/select-arrow.jpg) no-repeat 100% 0;  height: 39px; border-radius: 0; overflow: hidden; width: 100%;}
.ginput_container_select select { background: transparent; border: none; border-radius: 0; font-size: 14px; height: 39px; padding: 5px;  width: calc(100% + 30px);-webkit-appearance: none;  -moz-appearance:none;}
.stylin .ginput_container_select { background: #fff url(https://designplusdrafting.com.au/wordpress/wp-content/uploads/2017/11/select-arrow.jpg) no-repeat 100% center; height: 44px; width: 100%; border-bottom:1px solid rgba(15,109,162,0.25); }
.stylin .ginput_container_select select { border: none; background: transparent; border-radius:0px !important; font-size: 14px; height: 44px; width: calc(100% + 30px); -webkit-appearance: none;  -moz-appearance: none; color:#A4A4B1;}


.module-wrap a.cta-btn { padding: 10px 30px; color: #fff; text-align: center; display: inline-block; border: 2px solid #0F6DA2; margin: 20px 0; font-weight: 700; font-size: 18px;}
.module-wrap a.cta-btn:hover { background: none !important; color: #0f6da2;}

.cd-top {
  display: inline-block; z-index:5000;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: calc(50% - 20px);
  /* image replacement properties */
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}


a.cd-top { display: inline-block;  color: #fff; font-size: 16px; padding: 10px 13px;  border-radius: 20px; text-shadow: 0 0 5px rgba(15,109,162,1); overflow: hidden; -webkit-box-shadow: 0 0 4px 4px rgba(100,100,100,0.2); box-shadow: 0 0 4px 4px rgba(100,100,100,0.2);  text-align: center;}
a.cd-top:after { content: "\f095"; font-family: FontAwesome; font-style: normal; font-weight: normal;}





@media only screen and (min-width: 768px) {
  .cd-top {
    right: calc(50% - 100px);
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 45px;
      width: 200px;
    bottom: 30px;
  }
a.cd-top {  border-radius: 3px; font-size: 20px; padding: 10px 30px; border: 2px solid #0f6da2; text-align: center;}
a.cd-top:hover { border: 2px solid #fff;}
a.cd-top:after { content: 'contact us';font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 1px;}
}


.testimonial-cta { position: relative; display: inline-block; z-index: 100; border: 2px solid white; margin-top: 50px; padding: 10px 20px; color:#fff; text-align: center; font-weight: 700; text-transform: uppercase;}
.testimonial-cta:hover { background: #fff; color: #0f6da2;}


.module-wrap p a, .article-main p a {border-bottom:1px dashed #bbb;}

@media only screen and (max-width: 768px) {
body, h-panels-txt p, .home-about p, .modal-body p, .testimonial-quote p, .sidebar-feat a, .feed-txt h1 , footer h4, .foot-contact-dets p { font-size:14px !important;}
}

p.post-date, p.post-date a { color:#bbb; font-size:12px;}
p.post-date a {border-bottom:1px dashed #bbb;}


.free-testionial-wrap {}
.free-testionial-wrap p { text-align: left; color: #545454; font-weight: 700; display: block; margin-left: auto; margin-right: auto;}
.free-testionial-wrap img { width:100%; height:auto;}
.free-testionial-wrap cite { color: #0F6DA2; text-align: left; margin-top: 30px;}
.free-testionial-wrap .container { position: relative; border-top: 4px solid #C4C4C4; padding: 160px 20px 80px;}
.free-testionial-wrap .container::before { content: '\00201c'; font-family: serif; color:#C4C4C4; position:absolute; top: 160px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 200px; margin: 0; padding: 0; line-height: 0;}
.free-testionial-wrap .container.no-border { border-top: 0;}

p.text-cta a { color:#0F6DA2; display:inline-block; margin-left:auto; margin-right:auto; font-weight:800; text-align:center; font-size:24px;}
p.text-cta a:hover { color:#545454;}

.pg-404 {padding:200px 0;}
@media only screen and (max-width: 768px) {
.pg-404 {padding:30px 0;}
}