/*

Theme Name: Get WorkGear front end
Description: Get WorkGear front end
Author: Wired
Author URI: http://www.wired.co.nz
version: 1.0

*/

@charset "UTF-8";

html, body {  color:#000; font-family:'Montserrat', sans-serif; display:table; font-size:16px; font-weight:500; height:100%; margin:0 auto; overflow-x:hidden; padding:0; width:100%; }

img { border:none; display:block; height:auto; max-width:100%;}

h1 { color:#000; font-size:32px; font-weight:700; margin:0 0 20px 0; padding:0;}
h2 { color:#000; font-size:22px; font-weight:700; margin:0 0 20px 0; padding:0;}
h3 { color:#3a4243; font-size:24px; font-weight:300; margin:0 0 20px 0; padding:0;}
h4 { color:#3a4243; font-size:18px; font-weight:600; margin:5px 0; padding:0;}
h5 { font-size:16px; font-weight:600; margin:0 0 4px 0; padding:0;}
h6 { font-size:0.9em; font-weight:500; margin:0 0 5px 0; padding:0;}

p { margin:0 0 20px 0;}
p small { font-size:14px; }

a:link, a:visited { color:#c90000; text-decoration:none;}
a:hover, a:active { color:#007a89; transition:0.3s;}
a.phone {color:#00afc4; font-size:24px; }

.contentw { margin:auto; max-width:1920px; position:relative; }


#table { background:url(../images/tabletop.jpg); background-size:cover; height:1280px; padding-bottom:30px; position:relative;}
#paper-cap { position:absolute; left:0; bottom:0; width:100%; }
#paper-cap img { width:100%;}
#paper { background:url(../images/paper.jpg); background-size:cover;}

#examples { background:url(../images/sheets-3a.png) 0 -15px no-repeat; background-size:contain; height:1390px; position:absolute; right:0; top:0; width:calc(100% - 650px);}

#hexinfo { background:url(../images/Hex-info.png); height:714px; position:absolute; top:5px; left:1%; text-align:center; width:622px;}
#hexinner { padding:170px 90px 0 90px;}
#hexinner select { border:1px solid #939393; padding:6px; width:100%;}

#go-btn-wrap { background:url(../images/btn.png); height:106px; margin:auto; padding:0; width:192px; }
#go-btn-wrap input[type="button"], #go-btn-wrap input[type="submit"] { background:none; border:0; color:#fff; font-size:26px; font-weight:700; line-height:100px; padding:0 22px; text-transform:uppercase; }
#go-btn-wrap input[type="button"]:hover, input[type="submit"]:hover { cursor:pointer;}

#uploadart { border:2px dashed #939393; margin:15px 0; padding:5px;  }
#uploadart a {display:block;}

.dz-message { padding:40px 0; }

.myDropZone { padding:5px;}
#hexinner .myDropZone .dz-preview { margin:8px;}
#hexinner .myDropZone .dz-preview .dz-image { border-radius:5px;}
	
#blurb { color:#fff; position:absolute; left:2%; text-shadow:2px 2px 4px #000; top:750px; width:540px; }
#blurb h2 { color:#fff;}
#blurb p { font-size:18px;}


#extra-wrap { float:right; margin:30px;}
#extra-wrap p { text-align:center; margin:auto; max-width:400px;}

#message-wrap { margin:30px; max-width:650px;}

#message-wrap h2 { font-size:24px; margin:120px 0 0 0;}
#message-wrap p { }

#message-wrap input[type="text"], input[type="email"] { border:0; font-size:18px;  font-family:'Montserrat', sans-serif; font-weight:400; margin:0 0 12px 0; padding:8px 14px; width:calc(100% - 28px);}
#message-wrap textarea { border:0; font-family:'Montserrat', sans-serif; font-size:18px; font-weight:400; margin:0 0 12px 0; padding:8px 14px; width:calc(100% - 28px);}

#message-wrap input[type="button"], input[type="submit"] { background:#c90000; border:0; color:#fff; font-size:20px; font-weight:400; line-height:50px; padding:0 10px; text-transform:uppercase; }
#message-wrap input[type="button"]:hover, input[type="submit"]:hover { cursor:pointer;}

#mbtn-wrap { float:left; padding:0 20px; position:relative;}
#mbtn-wrap:before { border-style:solid; border-width:25px 20px 25px 0; border-color:transparent #c90000 transparent transparent; content:""; height:0; position:absolute; left:0; top:0; width:0; }
#mbtn-wrap:after { border-style:solid; border-width:25px 0 25px 20px; border-color:transparent transparent transparent #c90000; content:""; height:0; position:absolute; right:0; top:0; width:0; }

.col-50p { float:left; width:50%;}

.aligncenter,.alignleft,.alignright { display:block; padding:0;}
.aligncenter { float:none; margin:.5em auto 1em;}
.alignright { float:right; margin:.5em 0 1em 1em;}
.alignleft { float:left; margin:.5em 1em 1em 0;}

hr { border-bottom:0; border-left:0; border-right:0; border-top:1px dashed #b7c1c4; height:1px; margin:40px 0; }

.clear { clear:both;}

.inputerror { border: 1px solid red !important; }


/*---------------------Media queries---------------------------*/

@media only screen and (max-width: 1960px) {
#blurb { left:99px;  }
}

@media only screen and (max-width: 1600px) {
#table { height:990px; }
#examples { background-position:0 -20px; background-size: contain; height:990px; width:calc(100% - 590px);}
#blurb { top:750px;  }

}

@media only screen and (max-width: 1400px) {
#examples {background-position:20px -15px; background-size: contain; height:990px; width:calc(100% - 575px); }
#blurb { width:800px;  }
}

@media only screen and (max-width: 1200px) {
#table { height:800px; }
#examples {background:url(../images/sheets-3.png) 20px -12px no-repeat; background-size: contain; height:800px; width:calc(100% - 450px); }
#hexinfo { height:570px; width:500px; background-size:contain; left:0; top:0; }
#hexinner { padding:140px 60px 0 60px;}
#hexinner h1 { font-size:28px; margin:0 0 10px 0;}
#hexinner h2 { font-size:18px; margin:0 0 10px 0;}
#hexinner p { margin:0 0 10px 0;}
#uploadart { font-size:12px; margin:10px 0; padding:10px;}
#blurb { top:600px; width:600px;}

#extra-wrap { margin:30px 10px 30px 30px;}
#message-wrap { margin:30px 30px 30px 10px;}
#message-wrap h2 { margin:80px 0 0 0;}
#paper { padding:0 0 30px 0;}
}


@media only screen and (max-width: 1030px) {
#table, #examples { height:760px; }
#blurb { top:600px; width:calc(100% - 200px);}
}


@media only screen and (max-width: 999px) {
#table, #examples { height:auto; }
#hexinfo, #examples, #blurb { margin:auto; position:relative; }
#hexinfo { margin-top:-40px;}
#examples { background-position:center 0; height:590px; width:100%;}
#blurb { top:initial; left:initial; text-align:center; }
#paper { padding:30px 0 30px 0;}
.col-50p { padding:0 10%; width:80%;}
#extra-wrap { float:none; margin:auto; max-width:400px; }
#message-wrap { margin:auto; text-align:center; }
#message-wrap h2 { margin:30px 0 0 0;}
#mbtn-wrap { float:none; margin:auto; width:180px; }
#message-wrap input[type="text"], input[type="email"] { font-size:16px;}
#message-wrap textarea { font-size:16px; height:140px;}
}


@media only screen and (max-width: 600px) {
#examples { height:520px;}
#blurb { width:calc(100% - 60px);}	
}