/*  
Theme Name:
Theme URI:
Description:
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; }

/** SITE STYLES **/

@font-face {
    font-family: 'geared_slabextrabold';
    src: url('fonts/gearedslab/gearedslab-extrabold-webfont.woff2') format('woff2'),
         url('fonts/gearedslab/gearedslab-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html { background-color: #f5f5f5; scroll-behavior: smooth;overflow: -moz-scrollbars-none;}
body { -webkit-text-size-adjust: none; background-color:#f5f5f5; font-size:16px; scrollbar-width: none}

h1, h2, h3, h4 { font-family: 'geared_slabextrabold'; margin:0; padding:0; text-decoration:none; outline:none; border:none; line-height:1.6;}

h1 { font-size: 22px; color:#545454; margin:0 0 20px 0;}
h2 { font-size: 18px; color:#545454; margin:0 0 15px 0;}
h3 { font-size: 16px; color:#545454; margin:0 0 10px 0;}
h4 { font-size: 14px; color:#545454; margin:0 0 10px 0;}

p, a, li { font-family: 'geared_slabextrabold'; margin:0; padding:0; text-decoration:none; border:none;}
p, li { color:#545454; line-height:1.6;}
p { margin:0 0 10px 0;}

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

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

b, strong {font-family: 'geared_slabextrabold'; font-weight: 700;}
em, i { font-family: 'geared_slabextrabold'; font-style: italic;}
em b, i b, em strong, i strong { font-family: 'geared_slabextrabold'; font-style: italic; font-weight: 700;}

@media only screen and (min-width :700px) {
body, p, a, li { font-size:16px;}
h1 { font-size: 24px;}
h2 { font-size: 20px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
}

@media only screen and (min-width :1200px) {
body, p, a, li { font-size:18px;}
h1 { font-size: 26px;}
h2 { font-size: 22px;}
h3 { font-size: 20px;}
h4 { font-size: 18px;}
}

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


.wrap { position:relative; }
.in-wrap { position: relative;}

.wrap .box { width:100vw; height:100vh; min-height: 500px; display:inline-block; position:relative; padding: 30px;}
.wrap .box .box-in { width:calc(100vw - 60px); height:calc(100vh - 30px); min-height:calc(500px - 30px); font-size:96px; color:#222; text-align: center; background: #fff; border: 2px solid rgba(230,230,230,0.7); position: relative;}

.wrap .box:nth-of-type(1) .box-in:after {background: url(images/cm-wave.svg) top right no-repeat; background-size: contain; width: 80%; height: 95%; position: absolute; top: -10px; right: -10px; display: block; content: '';}
.wrap .box:nth-of-type(2) .box-in:after {background: url(images/cm-me.svg) bottom right no-repeat; background-size: contain; width: 80%; height: 85%; position: absolute; bottom: -10px; right: -10px; display: block; content: '';}
.wrap .box:nth-of-type(4) .box-in:before {background: url(images//cm-surf.svg) top left no-repeat; background-size: contain; width: 50%; height: 65%; position: absolute; left: -24px; top: -10px; display: block; content: ''; }
.wrap .box:nth-of-type(4) .box-in:after {background: url(images/cm-dots.svg) top left no-repeat; background-size: contain; width: 20%; height: 35%; position: absolute; right: 15%; top: 20px; display: block; content: ''; }

@media only screen and (max-width : 500px) {
    .wrap .box:nth-of-type(2) { height: 135vh;}
    .wrap .box:nth-of-type(4) { height: 160vh;}
    
    .wrap .box:nth-of-type(2) .box-in {  height:calc(135vh - 30px);}
    .wrap .box:nth-of-type(4) .box-in { height:calc(160vh - 30px);}
}

@media only screen and (max-width : 700px) and (orientation: landscape) {
    .wrap .box:nth-of-type(2) { min-height: 640px;}
    .wrap .box:nth-of-type(2) .box-in {  min-height:calc(640px - 30px);}
}

@media only screen and (min-width : 993px) {

    ::-webkit-scrollbar { width: 0px; background: transparent; display: none;}
 
    .wrap { overflow-y:scroll; overflow-x:hidden; -webkit-transform: rotate(270deg) translateX(-100%); transform: rotate(270deg) translateX(-100%); -webkit-transform-origin: top left; transform-origin: top left; background-color:#f5f5f5; position:absolute;  width:100vh; height:100vw;}
    
    .in-wrap { -webkit-transform: rotate(90deg) translateY(-100vh); transform: rotate(90deg) translateY(-100vh);  -webkit-transform-origin: top left; transform-origin: top left; white-space:nowrap; font-size:0; position: relative; z-index: 1000;}
    .wrap .box { position: relative;}

    .wrap .box .box-in { width:calc(100vw - 60px);  height:calc(100vh - 60px); border: 3px solid rgba(230,230,230,0.7);}
    .wrap .box:nth-of-type(n + 2) { padding-left: 0; width:calc(75vw - 0px); }
    .wrap .box:nth-of-type(n + 2) div.box-in { width: 100%;}
    .wrap .box:nth-of-type(3) {width:calc(30vw + 30px);}
    .wrap .box:nth-of-type(4) {width:calc(75vw - 30px);}
    .wrap .box:nth-of-type(5) {width:calc(55vw - 30px);}
    
}/** min width 993px end **/

@media only screen and (min-width : 1400px) {
    .wrap .box:nth-of-type(3) {width:calc(20vw + 30px);}
    .wrap .box:nth-of-type(4) {width:calc(45vw - 30px);}
    .wrap .box:nth-of-type(5) {width:calc(25vw - 30px);}
}
/** HEADER **/
	header { position:relative; margin:0; padding:0;}
	
	
	





	
/** CONTENT **/

.h-spun { text-transform: uppercase; color: #ccc; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; }

@media only screen and (min-width : 700px) {
    .h-spun { position: absolute; left: -220px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); text-transform: uppercase; color: #ccc; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 20px; bottom: 60%;}
}
	
.name, 	.hme-txt { position: absolute;}	
				

.name {font-family: 'geared_slabextrabold'; color: #454545; font-size: 24px; width:100%; text-align: center; margin-top: 30px; z-index: 1000;}

@media only screen and (min-width : 700px) {
    .name { font-size: 36px;}
}


.hme-txt { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left; z-index: 1200; width: 80%;}
.hme-txt p { font-size: 24px; margin-bottom: 10px; line-height: 1.4;}
.hme-txt p br { display: none;}
.hme-txt p:nth-of-type(2) span { color: #e5e5e5 !important;}
.hme-txt cite {font-family: 'Montserrat', sans-serif; color: #00b283; font-size: 14px; text-transform: uppercase; display: block;}

@media only screen and (min-width : 700px) {
    .hme-txt { top: 50%;}
    .hme-txt p { font-size: 34px;}
}

@media only screen and (min-width : 1000px) {
    .hme-txt { max-width: 800px;}
    .hme-txt p { font-size: 38px;}
    .hme-txt p br { display: block;}
    .hme-txt p:nth-of-type(1) span:before { position: absolute; top: -10px; left: -17px; border: 3px solid #00b283; width: 150px; height: 150px; display: block; content: '';}
    .hme-txt p:nth-of-type(1) span { margin-left: 25px; position: relative;}
}

@media only screen and (min-width : 1200px) {
    .hme-txt { max-width: 800px;}
    .hme-txt p { font-size: 42px;}
    .hme-txt p:nth-of-type(1) span:before { position: absolute; top: -10px; left: -17px; border: 5px solid #00b283; width: 200px; height: 200px; display: block; content: '';}
    .hme-txt p:nth-of-type(1) span { margin-left: 25px; position: relative;}
}


.about-txt { position: absolute; text-align: left; left: 30px; top: 30px; z-index: 10; width: 80%;}

.about-txt h4 {  color: #00B283; font-family: 'geared_slabextrabold'; font-size: 40px; margin-bottom: 10px; line-height: 1; margin-top: 40px;}
.about-txt ul { list-style: none; position: relative; margin: 0; padding: 0;}
.about-txt ul li {display: block; font-family: 'Montserrat', sans-serif; color: #545454; font-weight: 300; margin-bottom: 10px; font-size: 14px;}

@media only screen and (min-width : 700px) {
    .about-txt { left: 100px; top: inherit; bottom: 10%; width: auto;}
    .about-txt .h-spun { left: -250px;}
    .about-txt h4, .about-txt ul { margin-left: 0px;}
    .about-txt ul li {font-size: 16px}
}

@media only screen and (min-width : 1200px) {
    .about-txt .h-spun { left: -200px;}
    .about-txt h4, .about-txt ul { margin-left: 100px;}
    .about-txt ul li {font-size: 18px}
}


.emp-txt { position: absolute; left: 40px; width: calc(100% - 80px); bottom: 10%; text-align: left; z-index: 10; width: 80%;}
.emp-txt h4 { color: #00B283; font-family: 'geared_slabextrabold'; font-size: 24px; line-height: 1; margin-top: 20px;}
.emp-txt p { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #aaa; font-weight: 300; margin-bottom: 10px; white-space: pre-wrap;}
.emp-txt p span { color: #545454;}

@media only screen and (min-width : 700px) {
    .emp-txt { width: calc(100% - 60px); left: 30px;}
    .emp-txt h4 { font-size: 30px; margin-bottom: 10px; margin-top: 40px;}
    .emp-txt p { font-size: 16px;}
}

@media only screen and (min-width : 1200px) {
    .emp-txt { width: calc(100% - 120px); left: 50px;}
    .emp-txt h4 { font-size: 40px;}
    .emp-txt p { font-size: 18px;}
}



.ind-txt { position: absolute; left: 30px; width: calc(100% - 80px); top: 30px; text-align: left; z-index: 10;}

.ind-txt ul { list-style: none; position: relative; margin: 0; padding: 0; max-width: 750px; margin-top: 15%;}
.ind-txt ul li {display: block; font-family: 'Montserrat', sans-serif; color: #545454; font-weight: 300; margin-bottom: 10px; font-size: 14px;}

@media only screen and (min-width : 500px) {
    .ind-txt ul { list-style: none; position: relative; margin: 0; padding: 0; -webkit-columns: 2; columns: 2; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 30px; column-gap: 30px; max-width: 750px; margin-top: 15%;}
}

@media only screen and (min-width : 700px) {
    .ind-txt { width: calc(100% - 60px); left: 100px; top: auto; bottom: 10%; }
    .ind-txt ul { margin-left: 30px;}
    .ind-txt ul li {font-size: 16px;}
}

@media only screen and (min-width : 1200px) {
    .ind-txt { left: 100px;}
    .ind-txt .h-spun { left: -220px; bottom: 35%;}
    .ind-txt ul li {font-size: 18px;}
}

.cont-txt {position: absolute; left: 50%; width: calc(100% - 60px); -webkit-transform: translateX(-50px); transform: translateX(-50px); width: auto; top: 30%; text-align: left; z-index: 10;}
.cont-txt p, .cont-txt p a { text-align: right; font-size: 30px; position: relative;}
.cont-txt p a:after { border: 3px solid #E6E6E6; width: 150px; height: 150px; display: block; content: ''; top: -15px; right: -15px; position: absolute;-webkit-transition:all .2s ease-out; transition:all .2s ease-out;}
.cont-txt p a:hover:after { border: 5px solid #00B283;-webkit-transition:all .5s ease-out; transition:all .5s ease-out;}

@media only screen and (min-width : 1000px) {
    .cont-txt {top: auto; bottom: 40%;}
    .cont-txt p, .cont-txt p a { font-size: 40px; }
    .cont-txt p a:after { border: 5px solid #E6E6E6; width: 200px; height: 200px;}
}

/** FOOTER **/

	
	
	
	
/* misc */
	

				
	.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 : 993px) {
	.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 : 992px) {
	.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;}
	}