/*templtheme by Tom Freeman for UKC, started on 15th Oct 2015 */
/* Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 */

/************************************************** Core BEGINS **************************************************/
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../Montserrat-Regular-latinExt.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../Montserrat-Regular-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*:focus {outline: none}
img,legend{border:0}body,legend,td,th{padding:0}*{font-family:Montserrat,Arial,sans-serif;/*letter-spacing:.6px;*/transition:opacity .5s}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

::-webkit-scrollbar { width: 7px; height: 7px; border: 0; margin-left: -14px}
::-webkit-scrollbar:hover { width: 7px; transition:opacity .5s}
::-webkit-scrollbar-track { background: unset}
::-webkit-scrollbar-thumb { background: #d4d4d4}
::-webkit-scrollbar-thumb:hover { background: #79ced8; }
::-webkit-scrollbar-thumb:window-inactive { background: #a8a8a8}

:-webkit-autofill::first-line,
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {font-family: 'Montserrat', Arial, sans-serif !important; font-size: 15px}

@media only screen and (max-width:960px) {
	::-webkit-scrollbar { width: 0; height: 0; border: 0 }
	::-webkit-scrollbar:hover { width: 0 }
}

::selection { background: #79ced8; color: #ffffff}
::-moz-selection { background: #79ced8; color: #ffffff}

::-webkit-input-placeholder { font-style: italic; color: #e4e4e4}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { font-family: 'Montserrat', Arial, sans-serif !important; -moz-box-shadow: 0 0 0 30px white inset; -webkit-box-shadow: 0 0 0 30px white inset}

/* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */
html {width: 100%; height: 100%; margin: 0; padding: 0; font-size: 62.5%; background: url(../images/bg.png) top center fixed; overflow: unset; opacity: 1; -ms-overflow-style: -ms-autohiding-scrollbar}

body {width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 30px; font-weight: 400; font-family: Verdana,Arial,Helvetica,sans-serif; color: #222222; overflow: unset; opacity: 1}

.container {transition: all .4s; position: relative; left:0%;width: 100%;max-width: 1234px;margin: 0 auto;padding: 0 20px;box-sizing: border-box}

/* cant see this in use anywhere... what is it trying to do?
.column,.columns {width: 100%;float: left;box-sizing: border-box}
*/

/* Mega clear */
.container:after,.row:after,.u-cf,.clear {content: ""; display: table; clear: both}

.showthis {display: none}
.hidethis {display: block}

@media only screen and (max-width: 960px){
	.hidethis {display: none}
	.showthis {display: block}
}

/* For devices larger than 400px */
@media (min-width: 400px) {
	.container {width: 95%; padding: 0}
}

/* For devices larger than 960px (desktops) */
@media (min-width: 960px) {
	.container {	width: 100%}

	.row div[class^="col"] {float: left}

	.col1half	{width: 3.125%}
	.col1		{width: 6.25%}
	.col2		{width: 12.5%}
	.col3		{width: 18.75%}
	.col1third	{width: 33.3%}
	.col4		{width: 25%}
	.col4nhalf	{width: 28.125%}
	.col5		{width: 31.25%}
	.col6		{width: 37.5%}
	.col7		{width: 43.75%}
	.col8		{width: 50%}
	.col8nhalf	{width: 53.125%}
	.col9		{width: 56.25%}
	.col10		{width: 62.50%}
	.col11		{width: 68.75%}
	.col2thirds	{width: 66.6%}
	.col12		{width: 75%}
	.col13		{width: 81.25%}
	.col14		{width: 87.50%}
	.col15		{width: 93.75%}
	.col16		{width: 100%}
}

@media only screen and (max-width: 959px){

[class^="col"] {width: 100%; float: left}
[class^="tocol"] {margin-left: 0 !important; margin-right: 0 !important}

.tocolhalf {width: 3.125%}
.tocol1 {width: 6.25%}
.tocol2 {width: 12.5%}
.tocol2nhalf {width: 15.625%}
.tocol3 {width: 18.75%}
.tocol3nhalf {width: 21.875%}
.tocol4 {width: 25%}
.tocol4nhalf {width: 28.125%}
.tocol5 {width: 31.25%}
.tocol5nhalf {width: 34.375%}
.tocol6 {width: 37.5%}
.tocol6nhalf {width: 40.625%}
.tocol7 {width: 43.75%}
.tocol8 {width: 50%}
.tocol8nhalf {width: 53.125%}
.tocol9 {width: 56.25%}
.tocol10 {width: 62.50%}
.tocol11 {width: 68.75%}
.tocol12 {width: 75%}
.tocol13 {width: 81.25%}
.tocol14 {width: 87.50%}
.tocol15 {width: 93.75%}
.tocol16 {width: 100%}

.hidethis {display: none}
.showthis {display: block}
.centralmob {text-align: center !important}
}

/********** Core ENDS **********/
/***** Base Styles BEGIN *****/

::-webkit-scrollbar {width: 10px}
::-webkit-scrollbar-track {background: #efeeec}
::-webkit-scrollbar-thumb {background: #d2d2d2}
::-webkit-scrollbar-thumb:window-inactive {background: #d4d4d4}

::selection {background: #fff2a8}
::-moz-selection {background: #fff2a8}

p {margin-top: 0}
a {color: #1EAEDB}
a:hover {color: #0FA0CE}

h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 2rem;font-weight: 300}
h1 {font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem}
h2 {font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem}
h3 {font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem}
h4 {font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem}
h5 {font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem}
h6 {font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0}

/* Larger than phablet (desktops) */
@media (min-width: 960px) {
	h1 {font-size: 5.0rem}
	h2 {font-size: 4.2rem}
	h3 {font-size: 3.6rem}
	h4 {font-size: 3.0rem}
	h5 {font-size: 2.4rem}
	h6 {font-size: 1.5rem}
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {height: 38px;padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff;border: 1px solid #D1D1D1;border-radius: 4px;box-shadow: none;box-sizing: border-box}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none}
a[x-apple-data-detectors] {color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important}

textarea {min-height: 65px;padding-top: 6px;padding-bottom: 6px}
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border: 1px solid #33C3F0;outline: 0}
label,legend {display: block;margin-bottom: .5rem;font-weight: 600}
fieldset {padding: 0;border-width: 0}
input[type="checkbox"],input[type="radio"] {display: inline}
label > .label-body {display: inline-block;margin-left: .5rem;font-weight: normal}

ul {list-style: circle inside}
ol {list-style: decimal inside}
ol, ul {padding-left: 0;margin-top: 0}
ul ul,ul ol,ol ol,ol ul {margin: 1.5rem 0 1.5rem 3rem;font-size: 90%}
li {margin-bottom: 1rem}

hr {margin: 3rem 0;border-width: 0;border-top: 1px solid #E1E1E1}

th,td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #E1E1E1}
th:first-child,td:first-child {padding-left: 0}
th:last-child,td:last-child {padding-right: 0}

button,.button {margin-bottom: 1rem}
input,textarea,select,fieldset {margin-bottom: 1.5rem}
pre,blockquote,dl,figure,table,p,ul,ol,form {margin-bottom: 2.5rem}

.button,button,input[type="submit"],input[type="reset"],input[type="button"] {display: inline-block;height: 38px;padding: 0 30px;color: #555;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;
text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {color: #333;border-color: #888;outline: 0}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary {color: #FFF;background-color: #33C3F0;border-color: #33C3F0}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color: #FFF;background-color: #1EAEDB;border-color: #1EAEDB}

/***** Base Styles END *****/
/*Nav Begins*/

nav {border-top: 1px solid #f4f4f4}
nav ul {display: table; list-style: none}
nav li {display: table-cell; border-right: 1px solid #f4f4f4; float: left; position: relative}
nav li a {padding: 1em 1.6em; font-weight: 700; background: #FFFFFF; float: left; transition: background .2s,color .1s}
nav a:focus,nav a:hover {background-color: #1aa0b0; color: #FFFFFF}
nav li .sub-menu {border-bottom: 3px solid #1aa0b0; background-color: #FFFFFF; display: none; padding: .5em 0; position: absolute; width: 200px; z-index: 99; margin-top: 50px}
nav li .sub-menu li {border-right: 0; float: left; width: 100%}
nav li .sub-menu li a {padding: .5em 2em !important; float: left; width: 100%}
nav li.hover .sub-menu  {display: block}

@media only screen and (max-width: 960px) {

html {margin-top: 0 !important}
nav {position:fixed !important; width:80% !important; right:0%; top: 0; left:100% !important; height:100%; background: #918b8b; z-index: 100}
nav  ul {list-style: none; margin:0; padding: 0}
nav  ul  li {margin-bottom: 0.1rem; float: none; display: block}
nav  ul  li  a {display: block; font-weight: bold; padding:20px 10px 20px 30px; background: #e11b1f; color:#ffffff; text-decoration: none; text-align: left; width: 100%}
nav  ul  li  a:hover {background: #000000; color: #ffffff}

ul.sub-menu li a{background: #333333; padding: 10px 0 10px 50px}

a#menubtn {position: absolute; background: #0000; width:20%; height:78px; right:0; top:0; z-index: 10}
a#menubtn:before {content: ""; position: absolute; right: 25%; top: 41%; width: 50%; max-width: 50px; height: 5px; background: #e11b1f; box-shadow: 0 10px 0 0 #e11b1f, 0 20px 0 0 #e11b1f}
#tabhelper {display:none; position:fixed; left:0; width:20%; height:100%; top:0; z-index: 101}
#content, #menubtn, nav {transition: all .4s}
#mobmenu {display: none}
/*NOTES: tilde '~' is a sibling indicator*/
/*NOTES: :target is used in this instance when the anchor links to itself so a (#) - one point though is that the address bar will show #mobmenu, when the menu is active, which you may think looks a bit pants*/
#mobmenu:target ~ a#menubtn {right:80%; position: fixed}
#mobmenu:target ~ #tabhelper {display:block}
#mobmenu:target ~ nav {left:20% !important}

/*use below to nudge the whole page to the side when opening the menu*/
#mobmenu:target ~ .container {left:-80%}
#mobmenu:target ~ .parallax {left:-80%}
}
/*THOUGHT: combining target ~ with triggering an animation, could be sick*/

/*Nav Ends*/
/*Parallax Begins*/

.parallax {transition: all .4s; position: relative; left:0%}
.parallaxgroup{position:relative;height:500px;height:100vh;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.pxlayer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform-origin-x:100%;transform-origin-x:100%}
.pxlayerbase{-webkit-transform:translateZ(0);transform:translateZ(0);z-index:4}
.pxlayerback{-webkit-transform:translateZ(-300px) scale(2);transform:translateZ(-300px) scale(2);z-index:3}
.pxtitle{text-align:center;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.parallax{min-height:500px; max-height: 500px; min-height:100vh; max-height: 100vh; overflow-x:hidden;overflow-y:auto;-webkit-perspective:300px;perspective:300px;-webkit-perspective-origin-x:100%;perspective-origin-x:100%}
#pxgroup{z-index:3}
#pxgroup .pxlayerback{background:#7bd266}
.pxtitle{text-align:center;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

/*Parallax Ends*/
/*JS slide full size screen Begins*/
#clientWindow {position: absolute; width: 100%; height: 100%; z-index: 0; opacity: 0}
#clientMain {position: absolute; z-index: 1}

/*JS slide full size screen Ends*/
/* Dev Stuff
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.demoboxes {box-sizing: border-box;background: #2e7bc4;border: 1px solid #00aced; color: #ffffff; text-align: center}


/* Wow fade
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInDown {
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown {
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDownBig {
0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDownBig {
0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeft {
0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft {
0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeftBig {
0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeftBig {
0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRight {
0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRight {
0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRightBig {
0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRightBig {
0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes fadeInUp {
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp {
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUpBig {
0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUpBig {
0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}



/*
#mobmenu ~ * {transition: all .4s; position: relative; left:0%}
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (desktops) (also point when grid becomes active) */
@media (min-width: 960px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}