/*
	Theme Name: ShadoTheme
	Theme URI: shado3225@gmail.com
	Description: Assemble WordPress Theme
	Version: 1.5
	Author: Custom built theme based on HTML5 Blank WordPress Theme from Todd Motto (@toddmotto)
	Author URI: www.assemble.co.za
	Tags: Blank, HTML5, CSS3
	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

*, *:after, *:before{-moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html{font-size:100%;}
body{font:400 16px/20px 'Roboto', sans-serif; color:#333333;}

/* clear */
.clear:before, .clear:after {content:' '; display:table;}
.clear:after {clear:both;}

img{max-width:100%; vertical-align:bottom;}

a{color:#017799; text-decoration:none; cursor:pointer;}
a:hover, a:focus, a:active{color:#02A39D; outline:0; text-decoration:none; color:inherit; 
-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out; 
		-o-transition:all 0.5s ease-in-out; 
			transition:all 0.5s ease-in-out;}
input:focus, select:focus, textarea:focus, button{outline:none;}

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

p{margin:0 0 10px;}
p:last-child{margin: 0;}

iframe{width: 100%;}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/
h1, h2, h3, h4, h5, h6{width:100%; display:inline-block; text-transform:uppercase;}
h1{font-size:30px; line-height:34px;}
h2{font-size:26px; line-height:30px;}
h3{font-size:22px; line-height:26px;}
h4{font-size:20px; line-height:24px;}
h5{font-size:18px; line-height:22px;}


/*------------------------------------*\
    COLOUR PALETTE
\*------------------------------------*/

.blueTX{color:#017799;}
.greenTX{color:#02A39D;}
.whiteTX{color:#FFFFFF;}
.blackTX{color:#333333;}

.blueBG{background-color:#017799;}
.greenBG{background-color:#02A39D;}
.whiteBG{background-color:#FFFFFF;}
.blackBG{background-color:#333333;}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper{width:100%; position:relative;}

header{width:100%; display:inline-block; float: left; margin:0 auto;}
main{width:100%; display:inline-block; float: left; margin:0 auto;}
footer{width:100%; display:inline-block; vertical-align:top; margin:0 auto; color:#FFFFFF;}

section{width:100%; display:inline-block; float: left; margin:0 auto; padding:80px 0;}

article{width:100%; max-width:1408px; margin:0 auto; padding: 0 20px; position:relative;}

/*------------------------------------*\
    THEME SECTIONS
\*------------------------------------*/

.shado-x{width:20%;}
.shado-1{width:8.33%;}
.shado-2{width:16.66%;}
.shado-3{width:25%;}
.shado-4{width:33.33%;}
.shado-5{width:41.66%;}
.shado-6{width:50%;}
.shado-7{width:58.33%;}
.shado-8{width:66.66%;}
.shado-9{width:75%;}
.shado-10{width:83.33%;}
.shado-11{width:91.66%;}
.shado-12{width:100%;}
[class*="shado-"]{display:inline-block; float:left; vertical-align:top;}

.centerAlign{text-align:center;}
.leftAlign{text-align:left;}
.rightAlign{text-align:right}
.noPad{padding:0;}
.halfPad{padding:45px 0;}
.leftPad{padding-left:20px;}
.rightPad{padding-right:20px}
.topPad{padding-top:20px;}
.bottomPad{padding-bottom:20px;}
.topMarg{margin-top:20px;}
.bottomMarg{margin-bottom:20px;}

.spacer{width:90%; display:inline-block; vertical-align:middle; margin:10px auto; border-bottom: 1px solid #333333;}

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

/* header */
.socBox{}

.contactBox{margin:0; text-align: right; padding: 10px 0;}
.contactBox p{width:auto; display:inline-block; position:relative; margin:0;}
.contactBox p:before {content: " | "; color:#FFFFFF;}
.contactBox p:first-child:before {content: "";}
.contactBox p a{color:#FFFFFF; cursor:pointer; padding: 0 5px;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
.contactBox p:hover a, .contactBox p:active a{color: #02A39D;}

.fullMenu{} 
.fullMenu .logoBox a{padding: 10px 0; display: block;}
.fullMenu .logoIMG{width: auto; max-height: 60px;}
.navBox{}

.scrollMenu{width:100%; display:none; position: absolute; top: 0; left: 0;}
.scrollMenu.sticky{display: inline-block;}
.scrollMenu .logoBox{display: inline-block; width: 100px; height: 100px; background-color: #333333; border-bottom-right-radius: 100%; position: fixed; top: 0; left: 0; z-index:9999;}
.scrollMenu .logoBox a{padding: 15px 0 0 5px; display: block;}
.scrollMenu .logoBox a img{width:60px; height:60px;}
.scrollMenu .popBox{display: inline-block; width: 100px; height: 100px; background-color: #333333; border-bottom-left-radius: 100%; position: fixed; top: 0; right: 0; z-index:9999; float:right;}
.scrollMenu .popBox a{padding:20px 15px 0 0; display: block;}

/* banner */
.headBox{width:100%; height:65vh; display:inline-block; margin:0 auto; padding:0; position:relative; background-color:#FFFFFF; background-position:center; background-repeat:no-repeat; background-attachment:fixed; overflow:hidden; display:inline-block; vertical-align:bottom;
-webkit-background-size:cover; 
	-moz-background-size:cover; 
		-o-background-size:cover; 
			background-size:cover;}
.headBox:before{position:absolute; content:" "; top:0; left:0; width:100%; height:100%; display:block; z-index:999; z-index: 0; 
-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out; 
		-o-transition:all 0.5s ease-in-out; 
			transition:all 0.5s ease-in-out;}

.bandBox{width:100%; height:auto; display:inline-block; margin:0 auto; padding: 30px 0; position:relative; background-color:#FFFFFF; background-position:center; background-repeat:no-repeat; background-attachment:fixed; overflow:hidden; display:inline-block; vertical-align:bottom;
-webkit-background-size:cover; 
	-moz-background-size:cover; 
		-o-background-size:cover; 
			background-size:cover;}
.bandBox h1{color: #FFFFFF; width: 80%;}

#typedtext{font-family: 'Marck Script', cursive; color:#FFFFFF; font-size:70px; line-height: 70px; width:100%; max-width:600px; margin:0 auto; padding: 0 20px; position:relative; text-align: center;}

/* home */
.introBox{padding-top: 30px;}

.serviceBoxlet{padding:20px; text-align: center;}
.serviceBoxlet img{width: 140px; height: auto; background-color: #017799; padding:20px; border-radius:50%; margin-bottom:20px;}
.serviceBoxlet h5{width:100%; display:inline-block; float: left; color: #333333; margin:0;}
.serviceBoxlet:hover img{background-color: #02A39D;}

.whyBox ul{margin:20px 0;}
.whyBox ul li{width: 100%; line-height:24px; display: inline-block; margin:5px 0;}
.whyBox ul li:before{content:'\2713'; display: inline-block; background-color:#333333; color:#FFFFFF; text-align:center; border-radius:50%; width:24px; height:24px; margin-right:5px;}

/* footer */
.footBox{}
.footBoxlet{}
.footBoxlet h5{margin: 0 0 20px; text-align:center;}
.footBoxlet img{width:100%; max-width: 300px; height:auto; margin-bottom:20px;}

#text-4{text-align:center; margin-bottom:20px;}
#text-4 a{color:#FFFFFF;}
#text-4 a:hover{color: #02A39D;}

.copyright{font-size:14px; line-height:18px; padding: 20px 0;}
.copyright a{color:#FFFFFF;}
.copyright a:hover{color: #02A39D;}

/*------------------------------------*\
    MENUS & BUTTONS
\*------------------------------------*/

ul#menu-mainnav{display: inline-block; font-size:0; margin:0; text-align:right; float: right;}
ul#menu-mainnav li{width:auto; display:inline-block; position:relative; float: left;}
ul#menu-mainnav li a{display:block; float:left; color: #333333; font-size: 18px; line-height: 80px; letter-spacing: 1px; cursor:pointer; padding: 0 10px;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-mainnav li:hover a{color: #FFFFFF;}
ul#menu-mainnav li a:after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: bottom center; background-color: #02A39D; z-index: -1;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-mainnav li:hover a:after{background-color:#02A39D; transform: scaleY(1);}
ul#menu-mainnav li.current_page_item a:after{content: ""; position: absolute; bottom: 0; left: 0; border-bottom:3px solid #017799; width: 100%; height: 3px; transform: scaleY(1);}
ul#menu-mainnav li.current_page_item:hover a:after{height: 100%;}

ul#menu-mainnav-1{margin:0; text-align: center;}
ul#menu-mainnav-1 li{width:100%; display:inline-block; position:relative;}
ul#menu-mainnav-1 li a{width:100%; display:inline-block; color:#FFFFFF; cursor:pointer; padding: 0 10px 10px;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-mainnav-1 li:hover a, ul#menu-mainnav-1 li:active a{color: #02A39D;}
ul#menu-mainnav-1 li.current_page_item a{text-decoration: underline;}

ul#menu-socbar{display: inline-block; width: 100%; font-size:0; margin:0; text-align:left; float: left;}
ul#menu-socbar li{width:auto; display:inline-block; position:relative; float: left;}
ul#menu-socbar li a{display:block; float:left; width:40px; height: 40px; font-size: 16px; line-height: 30px; color: #FFFFFF; background-color: #017799; cursor:pointer; padding: 5px; text-align:center;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-socbar li:hover a{background-color: #02A39D; color: #FFFFFF;}

ul#menu-socbar-1{display: inline-block; width: 100%; font-size:0; margin:0; text-align:center;}
ul#menu-socbar-1 li{width:auto; display:inline-block; position:relative;}
ul#menu-socbar-1 li a{display:block; float:left; width:40px; height: 40px; font-size: 16px; line-height: 30px; color: #FFFFFF; background-color: #017799; cursor:pointer; padding: 5px; text-align:center;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-socbar-1 li:hover a{background-color: #02A39D; color: #FFFFFF;}

ul#menu-socbar-2{display: inline-block; width: 100%; font-size:0; margin:0; text-align:center;}
ul#menu-socbar-2 li{width:auto; display:inline-block; position:relative;}
ul#menu-socbar-2 li a{display:block; float:left; width:40px; height: 40px; font-size: 16px; line-height: 30px; color: #FFFFFF; background-color: #017799; cursor:pointer; padding: 5px; text-align:center;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul#menu-socbar-2 li:hover a{background-color: #02A39D; color: #FFFFFF;}

ul.legalBar{margin:0; text-align:center;}
ul.legalBar li{width:auto; display:inline-block; position:relative;}
ul.legalBar li:before {content: " | ";}
ul.legalBar li:first-child:before {content: "";}
ul.legalBar li a{cursor:pointer; padding: 0 5px;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
ul.legalBar li:hover a, ul.legalBar li:active a{}

.greenButton{margin-top: 20px; outline: none; width: auto; background: transparent; cursor: pointer; position: relative; display: inline-block; background-color: #02A39D; color: #FFFFFF; line-height: 42px; padding: 0 20px; border: none;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
.greenButton:hover{background-color: #FFFFFF; color: #017799;
-webkit-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
	-moz-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
		-o-transition:1px 1px 2px rgba( 51, 51, 51, 0.25 );
			box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );}
.greenButton:active{background-color: #FFFFFF; color: #017799;
-webkit-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
	-moz-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
		-o-transition:1px 1px 2px rgba( 51, 51, 51, 0.25 );
			box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );}
.greenButton:before, .greenButton:after{content:''; position:absolute; top:0; right:0; height:2px; width:0; background-color: #017799; transition:400ms ease all;}
.greenButton:after{right:inherit; top:inherit; left:0; bottom:0;}
.greenButton:hover:before, .greenButton:hover:after{width:100%;
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}

/*------------------------------------*\
    SCRIPTS
\*------------------------------------*/

/* back-to-top */
.cd-top{width:40px; height:40px; border: 1px solid #02A39D; outline:0; background:#02A39D url("img/cd-top-arrow.svg") no-repeat scroll center 50%; display:inline-block; opacity:0; overflow:hidden; position:fixed; bottom:100px; right:20px; text-indent:100%; visibility:hidden; white-space:nowrap; z-index:100001;
-webkit-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
	-moz-box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
		-o-transition:1px 1px 2px rgba( 51, 51, 51, 0.25 );
			box-shadow:1px 1px 2px rgba( 51, 51, 51, 0.25 );
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
.cd-top.cd-is-visible{opacity:1; visibility:visible; margin-top:10px; 
-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;}
.cd-top.cd-fade-out{opacity:0.88;}
.no-touch .cd-top:hover{background-color:#017799; border: 1px solid #017799; opacity:1;}

/* owl carousel overide base style */
.owl-stage{display:-webkit-box; display:-moz-box; display:-ms-box; display:box;}
.owl-carousel .owl-item img{height: auto;}
.owl-nav{margin-top: 20px; text-align: center;}
.owl-nav .owl-prev, .owl-nav .owl-next{position: relative; left: 0; margin:0 10px; background: transparent; border: none;}
.owl-nav .owl-prev i, .owl-nav .owl-next i{font-size: 26px;}
.owl-nav .owl-prev:hover i, .owl-nav .owl-next:hover i{color:#333333;}
.owl-nav [class*='owl-']:focus{outline:0}
.owl-nav.disabled{display: none;}

/* modal */
.modal{z-index:9999 !important;}
.modal-dialog{padding-top:7vh; max-width: 768px;}
.modal-content{border-radius:0;}
.modal-title{text-align:center; margin-bottom: 20px;}
.modal-body{color: #333333; width: 100%; display:inline-block; text-align:left;}
.modal-body ul{margin-bottom:20px; padding-left:20px;}
.modal-body ul li{list-style: outside disc;}
.modal-footer{color: #333333; padding:15px; border-top:1px solid #E5E5E5;}
.modal-header .close{font-size:24px; margin-top:0;}

/* panel */
.panel{background-color:#333333; z-index:9000; margin-bottom:0; border-radius:0; border-left:1px solid #2B2E34;
-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out; 
		-o-transition:all 0.5s ease-in-out; 
			transition:all 0.5s ease-in-out;}
.push{position:relative;}
.menu-link{width: 60px; height: 60px; background-color:transparent; color:#02A39D; border-radius:0; font-size:40px; line-height: 40px; margin: 0; text-align: center; float:right; position: relative;
-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out; 
		-o-transition:all 0.5s ease-in-out; 
			transition:all 0.5s ease-in-out;}
.menu-link:hover, .menu-link:focus, .menu-link:active{color:#FFFFFF;}
.panel ul{margin:0; padding:120px 20px 20px;}
.panel ul li{width:100%; display:inline-block; border-top:1px solid #2B2E34;}
.panel ul li a{display:block; color:#FFFFFF; padding:10px 15px; text-align: center;
-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out; 
		-o-transition:all 0.5s ease-in-out; 
			transition:all 0.5s ease-in-out;}
.panel ul li a:hover{color:#02A39D;}
.panel ul li:last-child a{border-bottom:1px solid #2B2E34;}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width:1280px){}
@media only screen and (min-width:769px){
	.panel{display:none;}
}
@media only screen and (max-width:768px){
	.topMenu, .fullMenu, .introIMG{display:none;}
	.scrollMenu{display:inline-block; margin:0;}
	.introBox{width:100%; text-align:center; padding-top:0;}
	.serviceBoxlet{width:50%;}
	.whyBox{width:100%;}
	.whyBox:last-child{width:100%; margin-top:20px; padding-left:0;}
	.locationBox{width:100%;}
	.locationBox:last-child{width:100%; margin-top:20px; padding-left:0;}
	.footBoxlet:first-child{width:100%; text-align:center; margin-bottom:20px;}
	.footBoxlet{width:50%;}
}
@media only screen and (max-width:480px){
	.aboutBox{width:100%;}
	.aboutBox:first-child{width:100%; padding:0; margin-bottom:20px;}
	.serviceBoxlet{width:100%;}
	.footBoxlet{width:100%; margin-bottom:20px;}
	.footBoxlet:last-child{margin-bottom:0;}
}
@media only screen and (max-width:320px){
	.bandBox{padding: 90px 0 30px 0;}
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection{background:#017799; color:#FFFFFF; text-shadow:none;}
::-webkit-selection{background:#017799; color:#FFFFFF; text-shadow:none;}
::-moz-selection{background:#017799; color:#FFFFFF; text-shadow:none;}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print{
	*{background:transparent !important; color:#000 !important;	box-shadow:none !important; text-shadow:none !important;}
	a, a:visited{text-decoration:underline;}
	a[href]:after{content:" (" attr(href) ")";}
	abbr[title]:after{content:" (" attr(title) ")";}
	.ir a:after, a[href^="javascript:"]:after,
	a[href^="#"]:after{content:"";}
	pre,blockquote{border:1px solid #999; page-break-inside:avoid;}
	thead{display:table-header-group;}
	tr,img{page-break-inside:avoid;}
	img{max-width:100% !important;}
	@page{margin:0.5cm;}
	p, h2, h3{orphans:3; widows:3;}
	h2, h3{page-break-after:avoid;}
}