@charset "UTF-8";

/* ----------------------------------------- SITE fluid layout > outer */

html { position:relative; top:0; left:0; margin:0; padding:0; height:100%; width:100%; }
body { position:relative; top:0; left:0; margin:0; padding:0; height:100%; width:100%; /*font-size:62.5%;*/ }

/* ----------------------------------------- HTML ELEMENTS > resets */

div,h1,h2,h3,p,a,img,span { top:0; left:0; margin:0; padding:0; vertical-align:top; }

/* ----------------------------------------- HTML ELEMENTS > LAYOUT control */

div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ----------------------------------------- HTML ELEMENTS > UI control */

h1,h2,h3 { position:relative; display:block; line-height:1em; font-weight:800; z-index:9000; }

h1 { font-size:1.5em; padding-bottom:0.5em; }
h2 { font-size:1.1em; padding-bottom:0.5em; }
h3 { font-size:0.8em; padding-bottom:0.5em; }

a { position:relative; display:block; color:#FFFFFF; border:none; outline:none; text-decoration: none; z-index:9000; }
span { position:relative; display:block; border:none; }
p { position:relative; display:block; border:none; width:100%; height:auto; }

/* height:auto; line-height:1.3em; font-size:1.5em; > TAKEN OFF P */

/* ----------------------------------------- HTML ELEMENTS > rounded buttons */

.cir { border-radius: 50%; background-color:#FF0000; } /* circle */
.squ { border-radius: 80%; } /* circle */

/* ----------------------------------------- HTML ELEMENTS > img control */

img { border:none; outline:none; }

/* ----------------------------------------- HTML ELEMENTS > svg control (ENSURE SVGS APPEAR IN PLACE AND CORRECT SIZE > AS SIZED BY PARENT CONTAINER DIV */

.svg-holder { position: relative; display: inline-block; width: 100%; padding-bottom: 100%; /* width & padding must be the same */ vertical-align: middle; }
.svg-object { position: absolute; display: block; top: 0; left: 0; width: 100%; /* only required for <img /> */ }
.svg-fallback { position:absolute; top:0px; left:0px; display:block; width: 100%; }
.svg-object + .svg-fallback { display:none; } /* GENERIC (NON GROUP) > DONT DISPLAY FALLBACK IMAGE ON BROWSERS SUPPORTING SVG */

/* ----------------------------------------- HTML ELEMENTS > display */

.dbb { display:block; }
.dbl { display:inline-block; }
.vis { visibility:hidden; }
.ovr { overflow:hidden; }

.zi-p9 { z-index:9000; }
.zi-p8 { z-index:8000; }
.zi-p7 { z-index:7000; }
.zi-p6 { z-index:6000; }
.zi-p5 { z-index:5000; }
.zi-m9 { z-index:-9000; }

/* ----------------------------------------- FONT FACE > SOURCE SANS PRO FONTS */

@font-face {
    font-family: 'ss1';
    src: url('ffs/SourceSansPro-ExtraLight-webfont.eot');
    src: url('ffs/SourceSansPro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-ExtraLight-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-ExtraLight-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-ExtraLight-webfont.svg#ss1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss2';
    src: url('ffs/SourceSansPro-ExtraLightIt-webfont.eot');
    src: url('ffs/SourceSansPro-ExtraLightIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-ExtraLightIt-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-ExtraLightIt-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-ExtraLightIt-webfont.svg#ss2') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss3';
    src: url('ffs/SourceSansPro-Light-webfont.eot');
    src: url('ffs/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-Light-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-Light-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-Light-webfont.svg#ss3') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss4';
    src: url('ffs/SourceSansPro-LightIt-webfont.eot');
    src: url('ffs/SourceSansPro-LightIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-LightIt-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-LightIt-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-LightIt-webfont.svg#ss4') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss5';
    src: url('ffs/SourceSansPro-Regular-webfont.eot');
    src: url('ffs/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-Regular-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-Regular-webfont.svg#ss5') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss6';
    src: url('ffs/SourceSansPro-It-webfont.eot');
    src: url('ffs/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-It-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-It-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-It-webfont.svg#ss6') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss7';
    src: url('ffs/SourceSansPro-Semibold-webfont.eot');
    src: url('ffs/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-Semibold-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-Semibold-webfont.svg#ss7') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss8';
    src: url('ffs/SourceSansPro-SemiboldIt-webfont.eot');
    src: url('ffs/SourceSansPro-SemiboldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-SemiboldIt-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-SemiboldIt-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-SemiboldIt-webfont.svg#ss8') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss9';
    src: url('ffs/SourceSansPro-Bold-webfont.eot');
    src: url('ffs/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-Bold-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-Bold-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-Bold-webfont.svg#ss9') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss10';
    src: url('ffs/SourceSansPro-BoldIt-webfont.eot');
    src: url('ffs/SourceSansPro-BoldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-BoldIt-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-BoldIt-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-BoldIt-webfont.svg#ss10') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ss11';
    src: url('ffs/SourceSansPro-Black-webfont.eot');
    src: url('ffs/SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-Black-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-Black-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-Black-webfont.svg#ss11') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ss12';
    src: url('ffs/SourceSansPro-BlackIt-webfont.eot');
    src: url('ffs/SourceSansPro-BlackIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/SourceSansPro-BlackIt-webfont.woff') format('woff'),
         url('ffs/SourceSansPro-BlackIt-webfont.ttf') format('truetype'),
         url('ffs/SourceSansPro-BlackIt-webfont.svg#ss12') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'monbld';
    src: url('ffs/Montserrat-Bold-webfont.eot');
    src: url('ffs/Montserrat-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/Montserrat-Bold-webfont.woff') format('woff'),
         url('ffs/Montserrat-Bold-webfont.ttf') format('truetype'),
         url('ffs/Montserrat-Bold-webfont.svg#monbld') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'monreg';
    src: url('ffs/Montserrat-Regular-webfont.eot');
    src: url('ffs/Montserrat-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/Montserrat-Regular-webfont.woff') format('woff'),
         url('ffs/Montserrat-Regular-webfont.ttf') format('truetype'),
         url('ffs/Montserrat-Regular-webfont.svg#monreg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'alebld';
    src: url('ffs/Aleo-Bold-webfont.eot');
    src: url('ffs/Aleo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/Aleo-Bold-webfont.woff') format('woff'),
         url('ffs/Aleo-Bold-webfont.ttf') format('truetype'),
         url('ffs/Aleo-Bold-webfont.svg#srcbld') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opnext';
    src: url('ffs/opensans-extrabold-webfont.eot');
    src: url('ffs/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-extrabold-webfont.woff') format('woff'),
         url('ffs/opensans-extrabold-webfont.ttf') format('truetype'),
         url('ffs/opensans-extrabold-webfont.svg#opnext') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ----------------------------------------- FONT FACE > OPEN SANS FONTS */


@font-face {
    font-family: 'op1';
    src: url('ffs/opensans-light-webfont.eot');
    src: url('ffs/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-light-webfont.woff') format('woff'),
         url('ffs/opensans-light-webfont.ttf') format('truetype'),
         url('ffs/opensans-light-webfont.svg#op1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op2';
    src: url('ffs/opensans-lightitalic-webfont.eot');
    src: url('ffs/opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-lightitalic-webfont.woff') format('woff'),
         url('ffs/opensans-lightitalic-webfont.ttf') format('truetype'),
         url('ffs/opensans-lightitalic-webfont.svg#op2') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op3';
    src: url('ffs/opensans-regular-webfont.eot');
    src: url('ffs/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-regular-webfont.woff') format('woff'),
         url('ffs/opensans-regular-webfont.ttf') format('truetype'),
         url('ffs/opensans-regular-webfont.svg#op3') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op4';
    src: url('ffs/opensans-italic-webfont.eot');
    src: url('ffs/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-italic-webfont.woff') format('woff'),
         url('ffs/opensans-italic-webfont.ttf') format('truetype'),
         url('ffs/opensans-italic-webfont.svg#op4') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op5';
    src: url('ffs/opensans-bold-webfont.eot');
    src: url('ffs/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-bold-webfont.woff') format('woff'),
         url('ffs/opensans-bold-webfont.ttf') format('truetype'),
         url('ffs/opensans-bold-webfont.svg#op5') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op6';
    src: url('ffs/opensans-bolditalic-webfont.eot');
    src: url('ffs/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-bolditalic-webfont.woff') format('woff'),
         url('ffs/opensans-bolditalic-webfont.ttf') format('truetype'),
         url('ffs/opensans-bolditalic-webfont.svg#op6') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op7';
    src: url('ffs/opensans-extrabold-webfont.eot');
    src: url('ffs/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-extrabold-webfont.woff') format('woff'),
         url('ffs/opensans-extrabold-webfont.ttf') format('truetype'),
         url('ffs/opensans-extrabold-webfont.svg#op7') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'op8';
    src: url('ffs/opensans-extrabolditalic-webfont.eot');
    src: url('ffs/opensans-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ffs/opensans-extrabolditalic-webfont.woff') format('woff'),
         url('ffs/opensans-extrabolditalic-webfont.ttf') format('truetype'),
         url('ffs/opensans-extrabolditalic-webfont.svg#op8') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* ----------------------------------------- FONT FACE > APPLY */



.fs1 { font-family: 'ss1', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs1i { font-family: 'ss2', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs2 { font-family: 'ss3', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs2i { font-family: 'ss4', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs3 { font-family: 'ss5', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs3i { font-family: 'ss6', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs4 { font-family: 'ss7', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs4i { font-family: 'ss8', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs5 { font-family: 'ss9', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs5i { font-family: 'ss10', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs6 { font-family: 'ss11', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fs6i { font-family: 'ss12', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */


.fo1 { font-family: 'op1', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo1i { font-family: 'op2', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo2 { font-family: 'op3', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo2i { font-family: 'op4', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo3 { font-family: 'op5', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo3i { font-family: 'op6', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo4 { font-family: 'op7', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.fo4i { font-family: 'op8', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */





/* TEXT > LOGO HEADER */
.ffh { font-family: 'monbld', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */
.ffs { font-family: 'monbld', Arial, Helvetica, sans-serif; font-variant:normal; line-height:1.3em; } /* custom fonts bold */

/* TEXT > SUB HEADING + BODY TEXT + COPYWRITE */
.ffb { font-family: 'alebld', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts normal */
.fff { font-family: 'monreg', Arial, Helvetica, sans-serif; font-variant:normal; } /* custom fonts bold */

.brd-cpy { border:20px #FFFFFF solid;  }

/* ----------------------------------------- GENERIC CLASSES > font sizes */



.fz0-2 { font-size:0.2em; }
.fz0-4 { font-size:0.4em; }
.fz0-6 { font-size:0.6em; }
.fz0-8 { font-size:0.8em; }

.fz1 { font-size:1em; }
.fz1-2 { font-size:1.2em; }
.fz1-5 { font-size:1.5em; }
.fz1-7 { font-size:1.7em; }


.fz2-2 { font-size:2.2em; }
.fz2-5 { font-size:2.5em; }
.fz2-7 { font-size:2.7em; }



/* ----------------------------------------- GENERIC CLASSES > font line heights */

.lh16 { line-height:1.3em; }
.lh17 { line-height:1.4em; }

/* ----------------------------------------- GENERIC CLASSES > font transforms */

.fsn { font-weight:normal; }
.fsb { font-weight:bold; }
.fsi { font-style:italic; }
.fsl { letter-spacing: -1px; }
.fsu { text-transform:uppercase; }
.fsw { white-space: nowrap; }
.fsa { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

/* ----------------------------------------- GENERIC CLASSES > COLOURS > black / white / grey */

.fc-wht { color:#FFFFFF; }
.fc-blk { color:#000000; }
.fc-gyl { color:#CCCCCC; }
.fc-gym { color:#999999; }
.fc-gyd { color:#666666; }

.bc-wht { background-color:#FFFFFF; }
.bc-blk { background-color:#000000; }
.bc-gyl { background-color:#EFEFEF; }
.bc-gym { background-color:#999999; }
.bc-gyd { background-color:#666666; }

/* ----------------------------------------- GENERIC CLASSES > COLOURS > green / blue / magenta / orange */

.fc-grn { color:#6DC623; }
.fc-blu { color:#6699FF; }
.fc-mag { color:#FF6699; }
.fc-org { color:#FF9933; }

.bc-grn { background-color:#6DC623; }
.bc-blu { background-color:#6699FF; }
.bc-mag { background-color:#FF6699; }
.bc-org { background-color:#FF9933; }

/* ----------------------------------------- GENERIC CLASSES > positioning */

.lef { text-align:right; }
.rig { text-align:right; }
.cen { text-align:center; }

.ml5 { margin-left:5%; } 
.ml10 { margin-left:10%; } 
.ml10 { margin-left:15%; } 

.mt2 { margin-top:2%; }
.mt3 { margin-top:3%; }
.mt4 { margin-top:4%; }
.mt5 { margin-top:5%; }
.mt6 { margin-top:6%; }
.mt7 { margin-top:7%; }
.mt8 { margin-top:8%; }
.mt9 { margin-top:9%; }
.mt10 { margin-top:10%; }
.mt11 { margin-top:11%; }
.mt12 { margin-top:12%; }
.mt13 { margin-top:13%; }
.mt14 { margin-top:14%; }
.mt15 { margin-top:15%; }

.mt-5 { margin-top:-5%; }
.mt-10 { margin-top:-10%; }
.mt-15 { margin-top:-15%; }

/* ----------------------------------------- GENERIC CLASSES > borders */

.brd-gyl { border-right:2px #CCCCCC solid; }
.brd-gym { border-right:2px #999999 solid; }
.brd-gyd { border-right:2px #666666 solid; }

.brd-grn { border-right:10px #6DC623 solid; }
.brd-blu { border-right:10px #6699FF solid; }
.brd-mag { border-right:10px #FF6699 solid; }
.brd-org { border-right:10px #FF9933 solid; }

.bb-3 { border-bottom:3px #999 solid; }


.tb-txt { border-bottom:1px #000000 solid; }

/* ----------------------------------------- GENERIC CLASSES > opacity */

.opc-2 { opacity:0.2; }
.opc-5 { opacity:0.5; }
.opc-7 { opacity:0.7; }
.opc-8 { opacity:0.8; }
.opc-9 { opacity:0.9; }

/* ----------------------------------------- HTML ELEMENTS > VERTICAL HEIGHT */

.hi-50 { height:50%; }
.pd-05 { padding:5% 0; }
.pd-10 { padding:8% 0; }

/* ----------------------------------------- GENERIC CLASSES > spacing */

.itr-05 { padding:0.5em 1em; }

.itr-1 { padding:1em 1em; }






.pb-15 { padding-bottom:1.5em; }
.pb-05 { padding-bottom:0.5em; }


.ml-5 { margin-left:2%; }



.mb-3 { margin-bottom:3%; }


.mt-15 { margin-top:1.5em; }



.ml-1 { margin-left:1em; }
.mr-1 { margin-right:1em; }

.pt-1 { padding-top:1em; }
.pb-1 { padding-bottom:1em; }
.pl-1 { padding-left:1em; }
.pr-1 { padding-right:1em; }


.pt-2 { padding-top:2em; }
.pb-2 { padding-bottom:2em; }
.pl-2 { padding-left:2em; }
.pr-2 { padding-right:2em; }

/*.pd-hdr { padding-top:2%; padding-bottom:1%; padding-left:3%; }*/
.pd-hdr { padding-top:2%; padding-bottom:2%; padding-left:3%; }
.lh-hdr { line-height:3em; }


.bb-har { border-bottom:1px #666 solid; padding-bottom:2px; z-index:9000; }


/* ----------------------------------------- GENERIC CLASSES > backgrounds */

.lft { position:absolute; width:100%; height:100%; background-color:#000000; opacity:0.2; }

.hlf {
background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(139,139,139,0.1) 46%);
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%);
background: -ms-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), -ms-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%);
background-position: 0 0, 2px 2px;
background-size:4px 4px, 4px 4px, 100% 100%;
background-repeat: repeat, repeat, no-repeat;
display:block; 
padding-bottom: 38%;
}

/* ----------------------------------------- SITE fluid layout > (outer elements) */

.wrap { position:relative; width:100%; height:100%; } 
.spcl { position:relative; display:inline-block; width:2%; height:100%; z-index:8000; }
.mid { position:relative; display:inline-block; width:96%; height:100%; /* min height to get mid all way down page */ margin-left:-0.25em; z-index:9000; }
.spcr { position:relative; display:inline-block; width:2%; height:100%; margin-left:-0.25em; z-index:8000; }

/* ----------------------------------------- SITE fluid layout > (inner elements) */

#header { position:fixed; display:block; font-size:0.5em; width:100%; min-height:20%; z-index:9000; } /* --- POSITION FIXED NEGATES SPCL AND SPCR (LEFT / RIGHT SPACERS) --- */
.hdr-fix { position:relative; display:block; width:100%; height:14em; } /* --- RELATIVE BLOCK TO USE WITH FIXED HEADER --- */

#content { position:relative; font-size:0.5em; width:100%; min-height:70%; z-index:8000; }
#footer { position:relative; font-size:0.5em; width:100%; min-height:20%; z-index:9000; }

/* --------------------------------------------------- SITE LAYOUT ELEMENTS > NAV POS > BGR POS > Title POS > FOOTER ------------------------------------- */

.fz-hdr { font-size:1.8em; } /* --- navigation A tag sizing --- */
.fz-til { width:62%; } /* --- header title width --- */
.fz3 { font-size:2.5em; } /* --- header title font size --- */
.fz-blo { width:38%; padding:0.5em 1em; font-size:0.9em; } /* --- header SUB-title block width --- */

.fz2 { font-size:2em; } /* --- content paragraph size --- */
.fz-ftr { font-size:1em; } /* --- footer paragraph size --- */

/* --------------------------------------------------- HEADER > ELEMENTS --------------------------------------------------- */

.ctc { position:relative; display:inline-block; width:auto; height:20%; padding:3% 0; margin-left:2%; }
.ctc-spn { position:relative; display:inline-block; width:auto; height:100%; margin-left:0.4em; margin-right:0.4em; padding-bottom:1em; }

/* --------------------------------------------------- SITE > NAVIGATION --------------------------------------------------- */

.logo { position:relative; display:inline-block; margin-right:1em; width:8%; height:auto;/* padding-bottom:1.7%; USE WITHN SVG */ }
.logo img { position:absolute; display:block; /* or max-width:100%; */ width:100%; height:auto; text-align:left; z-index:8000; }
.logo img:nth-child(1) { position:relative; display:block; z-index:9000; } /* SVG BROWSERS > SHOW SVG */
.logo img:nth-child(2) { display:none; } /* SVG BROWSERS > HIDE PNG */

#nav { position:relative; display:block; width:100%; height:20%; }
.hld { position:relative; display:inline-block; width:90%; height:20%; margin:1.5% 0; }
#subnav ul { display:block; list-style: none; padding:0; margin:0; }
#subnav ul li { display:inline-block; padding:0 0.5em; width:auto; } /* display default li items as inline block (NO MOBILE DROPDOWNS) */
#nav a { position:relative; display:inline-block; width:100%; height:100%; color:#666666; }


/* --------------------------------------------------- BUTTON STYLING NAVIGATION  --------------------------------------------------- */

.btnid { position:relative; display:inline-block; width:auto; height:90%; margin-top:-0.4em; margin-right:1.3em;  } /* ---TAKE STYLING OFF HERE FOR MOBILE -- */
.btn { position:relative; display:inline-block; margin-right:1em; margin:1.5% 0; } /* ---TAKE STYLING OFF HERE FOR MOBILE -- */
.btn a:hover { -webkit-transition: 0.4s ease background; background-color:#CCCCCC; transition: 0.4s ease background; background-color:#CCCCCC; }

/* --------------------------------------------------- MOBILE NAVIGATION --------------------------------------------------- */

#tog { position:relative; display:none; margin-left:1%; width:95%; height:20%; vertical-align:middle; line-height:30px; } 
#tog img { display:inline-block; height:30px; width:30px; margin-right:1%; }
/* ---.togpos { position:relative; display:inline-block; background-color:#009999; }
.tognav { position:relative; display:inline-block; background-color:#009999; } -- */
/* --- <div class="tognav">navigation</div> --- */

/* --------------------------------------------------- COLUMNS > INTERIOR ELEMENTS POSITIONING --------------------------------------------------- */

 /* NO HEIGHT ON HERE */
.img-sml { position:relative; display:block; width:100%; height:auto; overflow:hidden; } /* NO HEIGHT ON HERE */
.img-ver { position:relative; display:block; width:100%; height:507px; overflow:hidden; } /* NO HEIGHT ON HERE */


.rpl { display:none; } 
.svg { display:none; }
.svg:not([ie8min]) { display:block; }
.rpl:not([ie8min]) { display:none; }

.img-sml img { position:relative; display:block; width:100%; /* or max-width:100%; */ max-width:100%; height:auto; text-align:left; }
.img-ver img { position:relative; display:block; width:100%; /* or max-width:100%; */  max-width:100%; height:auto; text-align:left; }

.hid { position:absolute; width:100%; height:100%; padding:1em; z-index:9000; } /* TRIGGER HIDDEN CONTENT */

.hid { position:absolute; width:100%; height:100%; padding:1em; z-index:9000; } /* TRIGGER HIDDEN CONTENT */

.txt-sml { position:relative; display:block; width:100%; height:auto; text-align:left; padding-left:2em; padding-right:2em; }

.pd-txt { padding:3em 2.3em; }


/* ------------------------------------------------ COLUMNS PARENT --------------------------------------------------- */

.cls-par { position:relative; display:inline-block; width:100%; height:auto; z-index:9000; } /* --- MAX 1 COLS --- */
/*.pd-par { padding:28% 0; } */  /* --- SET HEIGHT OF PARENT ELEMENT (DONT USE AN IMAGE TO DO THIS) --- */
/*.pd-tpp { margin-top:-12%; }*/ /* --- SET HEIGHT OF PARENT ELEMENT (DONT USE AN IMAGE TO DO THIS) --- */

.pd-par { padding-top:20%; padding-bottom:20%; } 
.pd-tpp { padding-top:5%; padding-bottom:20%; }

.cn-par { padding:2% 0; } /* --- SET HEIGHT OF PARENT ELEMENT (DONT USE AN IMAGE TO DO THIS) --- */

/* ------------------------------------------------ COLUMNS PARENT > INTERIOR HOLDER (HORIZONTAL OR VERTICAL) ---------------------------------- */

.clh-hrz { position:relative; display:block; width:92%; height:auto; z-index:9000; } /* --- COLUMN HOLDER > HORIZONTAL --- */
.clh-ver { position:relative; display:inline-block; width:45%; height:auto; z-index:9000; } /* --- COLUMN HOLDER > VERTICAL --- */
.ml-ver { margin-left:2.67%; } /* --- COLUMN HOLDER > VERTICAL (APPLY TO SECOND VERTICAL COLUMN AS ITS LEFT MARGIN) --- */

/* ------------------------------------------------ COLUMNS 1,2,4 --------------------------------------------------- */

.cls1 { position:relative; display:inline-block; width:100%; height:auto; z-index:9000; } /* --- FULL WIDTH COLUMN --- */
.cls2 { position:relative; display:inline-block; width:48%; height:auto; z-index:9000; } /* --- HALF WIDTH COLUMN --- */
.cls4 { position:relative; display:inline-block; width:22%; height:auto; z-index:9000; } /* --- QUARTER WIDTH COLUMN --- */

.clsv { position:relative; display:inline-block; width:44.95%; height:auto; z-index:9000; } /* --- VERTICAL COLUMN SPAN TWO ROWS --- */
.clsh { position:relative; display:inline-block; width:98.1%; height:auto; z-index:9000; } /* --- HALF WIDTH COLUMN --- */



/* ------------------------------------------------ ABSOLUTELY POSITIONED ELEMENT (BACKGROUND ANIMATIONS) > INSERT CODE BEFORE ACTUAL INTERAL ELEMENT GROUP ---- */

.abs { position:absolute; display:inline-block; width:100%; height:100%; z-index:9000; }
.abshid { position:absolute; display:inline-block; width:100%; height:100%; overflow:hidden; z-index:9000; }

/* ------------------------------------------------ INTERIOR COLUMNS > ABSOLUTELY POSITIONED PARENT (ADD CLA ON ALL COLUMNS APART FROM FIRST COLUMN ---- */

/* vertical-align:middle; */

.clc1 { position:relative; display:inline-block; width:100%; height:auto; z-index:9000; vertical-align:middle; }
.clc2 { position:relative; display:inline-block; width:49.9%; height:auto; z-index:9000; vertical-align:middle; } 
.clc3 { position:relative; display:inline-block; width:33.3%; height:auto; z-index:9000; } /* --- CENTRAL ROW MIDDLE --- */
.clc4 { position:relative; display:inline-block; width:24.9%; height:auto; z-index:9000; } /* --- CENTRAL ROW MIDDLE --- */

.pt-clc { padding-top:15%; padding-bottom:15%; }
.ml-clc { margin-left:2%; }

.pt-clc2 { padding:6%; }
.pl-clc2 { padding-left:7%; } /* --- PARENT MARGIN LEFT --- */
.pr-clc2 { padding-right:7%; } /* --- PARENT MARGIN LEFT --- */


/* ------------------------------------------------ MARGINS (GLOBAL) --------------------------------------------------- */

.mt-glb { margin-top:4%; } /* --- PARENT MARGIN TOP --- */
.ml-glb { margin-left:4%; } /* --- PARENT MARGIN LEFT --- */
.mb-glb { margin-bottom:4%; } /* --- PARENT MARGIN BOTTOM --- */
.mr-glb { margin-right:4%; } /* --- PARENT MARGIN RIGHT --- */

.mt-ele { margin-top:8%; } /* --- TOP LEVEL ELEMENT MARGIN TOP --- */
.mr-ele { margin-right:8%; } /* --- TOP LEVEL ELEMENT MARGIN RIGHT --- */
.mb-ele { margin-bottom:8%; } /* --- TOP LEVEL ELEMENT MARGIN BOTTOM --- */

.mb-int { margin-bottom:18%; } /* --- SECOND LEVEL ELEMENT MARGIN BOTTOM --- */

.pd-sml { padding:0.3em; }

/* --------------------------------------------------- INLINE COLUMN FIX --------------------------------------------------- */

.cla { margin-left:-0.25em; }

/* --------------------------------------------------- SITE > BACKGROUNDS --------------------------------------------------- */

/* --------------------------------------------------- BACKGROUND PARENT */

.bgr { position:absolute; left:-4%; width:106.1%; height:100%; z-index:-1000; } /* generic background */

.bgr img { width:100%; height:auto; }


.webhdr { position:absolute; width:100%; height:100%; background-image: url(../img/webhds.png); background-size: cover; background-repeat: no-repeat; background-position: top; z-index:-9000; }

.mblhdr { position:absolute; width:100%; height:100%; background-image: url(../img/mblhds.png); background-size: cover; background-repeat: no-repeat; background-position: top; z-index:-9000; }

.wrkhdr { position:absolute; width:100%; height:100%; background-image: url(../img/wrkhds.png); background-size: cover; background-repeat: no-repeat; background-position: top; z-index:-9000; }

/* ----------------------------------------- SVG BACKGROUND */

.circ {
background-image: url(../img/lnkfix.png);
background-image: -moz-linear-gradient(transparent, transparent), url(../img/spiral.svg);
background-image: -webkit-linear-gradient(transparent, transparent), url(../img/spiral.svg);
background-image: -o-linear-gradient(transparent, transparent), url(../img/spiral.svg);
background-image: -ms-linear-gradient(transparent, transparent), url(../img/spiral.svg);
background-image: linear-gradient(transparent, transparent), url(../img/spiral.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
}

/* --------------------------------------------------- SITE fluid layout > PHONES (SMALL) --------------------------------------------------- */

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

/*
#nav:after { content:"PHONE > MAX WIDTH [ 320px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.mid { margin-left:0; }

.mbl { display:block; width:100%; margin:0; margin-bottom:2em; }

#header { font-size:0.5em; }
.hdr-fix { height:4.5em; }
#content { font-size:0.5em; }
#footer { font-size:0.5em; }

.logo { display:none; }
.hld { width:100%; padding:0; }
.fz-hdr { font-size:1em; }

#tog { display:block; }
#subnav ul { position:relative; display:block; width:100%; } /* main parent */
#subnav ul li { position:relative; display:block; width:90%; margin:2% 2%; background-color:#CCCCCC; }
#subnav ul li a { width:98%; display: block; padding:0.5em 0.5em; background-color:#CCCCCC; }
#subnav { display: none; }
#nav #tog a.togoff { display: none; }
#nav:target #subnav { display: block; }
#nav:target #tog a.togon { display: none; }
#nav:target #tog a.togoff { display: block; }

.fz-til { width:73%; }
.fz-blo { width:50%; font-size:0.6em; }
.fz3 { font-size:1.5em; }

.fz2 { font-size:1.4em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width : 321px) and (max-width : 400px) {

/*
#nav:after { content:"TABLET > MIN WIDTH [ 321px ] > MAX [ 399px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.mbl { display:block; width:100%; margin:0; margin-bottom:2em; }

#header { font-size:0.5em; }
.hdr-fix { height:4.5em; }
#content { font-size:0.5em; }
#footer { font-size:0.5em; }

.logo { display:none; }
.hld { width:100%; margin:0; }
.fz-hdr { font-size:1.6em; }

#tog { display:block; }
#subnav ul { position:relative; display:block; width:100%; padding-bottom:0.8em; } /* main parent */
#subnav ul li { position:relative; display:block; width:88%; margin:2% 2%; background-color:#CCCCCC; }
#subnav ul li a { width:100%; display: block; padding:0.5em 0.2em; padding-top:0.8em; background-color:#CCCCCC; }
#subnav { display: none; }
#nav #tog a.togoff { display: none; }
#nav:target #subnav { display: block; }
#nav:target #tog a.togon { display: none; }
#nav:target #tog a.togoff { display: block; }

.fz-til { width:66%; }
.fz-blo { width:50%; font-size:0.9em; }
.fz3 { font-size:1.55em; }

.fz2 { font-size:1.5em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width : 401px) and (max-width : 640px) {

/*
#nav:after { content:"TABLET > MIN WIDTH [ 400px ] > MAX [ 640px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.mbl { display:block; width:100%; margin:0; margin-bottom:2em; }

#header { font-size:0.5em; }
.hdr-fix { height:5em; }
#content { font-size:0.5em; }
#footer { font-size:0.5em; }

.logo { display:none; }
.hld { width:100%; margin:0; }
.fz-hdr { font-size:1.6em; }

#tog { display:block; }
#subnav ul { position:relative; display:block; width:100%; padding-bottom:0.8em; } /* main parent */
#subnav ul li { position:relative; display:block; width:90%; margin:2% 2%; background-color:#CCCCCC; }
#subnav ul li a { width:100%; display: block; padding:0.5em 0.2em; padding-top:0.8em; background-color:#CCCCCC; }
#subnav { display: none; }
#nav #tog a.togoff { display: none; }
#nav:target #subnav { display: block; }
#nav:target #tog a.togon { display: none; }
#nav:target #tog a.togoff { display: block; }

.fz-til { width:62%; }
.fz-blo { width:45%; font-size:0.9em; }
.fz3 { font-size:1.6em; }

.fz2 { font-size:1.7em; }
.fz-ftr { font-size:1em; }

}

@media only screen and (min-width : 401px) and (max-width : 640px) and (orientation: landscape) {

/*
#nav:after { content:"TABLET > MIN WIDTH [ 400px ] > MAX [ 640px ] > LANDSCAPE"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.mbl { display:block; width:100%; margin:0; margin-bottom:2em; }

#header { font-size:0.5em; }
.hdr-fix { height:5em; }
#content { font-size:0.5em; }
#footer { font-size:0.5em; }

.logo { display:none; }
.hld { width:100%; margin:0; }
.fz-hdr { font-size:1.6em; }

#tog { display:block; }
#subnav ul { position:relative; display:block; width:100%; padding-bottom:0.8em; } /* main parent */
#subnav ul li { position:relative; display:block; width:90%; margin:2% 2%; background-color:#CCCCCC; }
#subnav ul li a { width:100%; display: block; padding:0.5em 0.2em; padding-top:0.8em; background-color:#CCCCCC; }
#subnav { display: none; }
#nav #tog a.togoff { display: none; }
#nav:target #subnav { display: block; }
#nav:target #tog a.togon { display: none; }
#nav:target #tog a.togoff { display: block; }

.fz-til { width:65%; }
.fz-blo { width:40%; }
.fz3 { font-size:2em; }

.fz2 { font-size:1.7em; }
.fz-ftr { font-size:1em; }

}

@media only screen and (min-width : 641px) and (max-width : 800px) {

/*
#nav:after { content:"TABLET > MIN WIDTH [ 641px ] > MAX [ 800px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

#header { font-size:0.5em; }
.hdr-fix { height:6em; }
#content { font-size:0.5em; }
#footer { font-size:0.5em; }

.logo { display:none; }
.hld { width:90%; margin:0; }
.fz-hdr { font-size:1em; }

#tog { display:none; }

.fz-til { width:60%; }
.fz-blo { width:35%; font-size:0.9em; }
.fz3 { font-size:2.1em; }

.fz2 { font-size:1.5em; }
.fz-ftr { font-size:1em; }

}

@media only screen and (min-width : 801px) and (max-width : 1024px) {

/*
#nav:after { content:"TABLET > WIDTH [ 801px ] > [ 1024px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:8.5em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1.2em; }

#tog { display:none; }

.fz-til { width:61%; }
.fz-blo { width:34%; font-size:0.75em; }
.fz3 { font-size:2.1em; }

.fz2 { font-size:1.3em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (device-width: 768px) and (orientation: portrait) {

/*
#nav:after { content:"IPAD > WIDTH [ 768px ] > [ PORTRAIT ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

#header { font-size:0.7em; }
.hdr-fix { height:7em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }

.fz-hdr { font-size:1em; }
#tog { display:none; }

.fz-til { width:67%; }
.fz-blo { width:38%; font-size:0.7em; }
.fz3 { font-size:1.9em; }

.fz2 { font-size:1.1em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (device-width: 768px) and (orientation: landscape) {

/*
#nav:after { content:"IPAD > WIDTH [ 768px ] > [ LANDSCAPE ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

#header { font-size:0.7em; }
.hdr-fix { height:7em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1em; }
#tog { display:none; }

.fz-til { width:61%; }
.fz-blo { width:38%; font-size:0.7em; }
.fz3 { font-size:1.8em; }

.fz2 { font-size:1em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
.deshdr { background-image: url(../img/deshds.png); }
.webhdr { background-image: url(../img/webhds.png); }
.mblhdr { background-image: url(../img/mblhds.png); }
.wrkhdr { background-image: url(../img/wrkhds.png); }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }
}

@media only screen and (min-width : 1025px) and (max-width : 1249px) {

/*
#nav:after { content:"DESKTOP > WIDTH [ 1025px ] > [ 1249px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:11em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1.3em; }

#tog { display:none; }

.fz-til { width:55%; }
.fz-blo { width:35%; }
.fz3 { font-size:2.2em; }

.fz2 { font-size:1.3em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width: 1250px) and (max-width: 1409px) {

/*
#nav:after { content:"DESKTOP > WIDTH [ 1250px ] > [ 1409px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:12em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1.5em; }

#tog { display:none; }

.fz-til { width:65%; }
.fz-blo { width:35%; font-size:0.8em; }
.fz3 { font-size:2.5em; }

.fz2 { font-size:1.5em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width: 1410px) and (max-width: 1649px) {

/*
#nav:after { content:"DESKTOP > WIDTH [ 1410px ] > [ 1649px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:14.5em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1.7em; }

#tog { display:none; }

.fz-til { width:58%; }
.fz-blo { width:35%; }
.fz3 { font-size:2.5em; }

.fz2 { font-size:1.5em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width: 1650px) and (max-width: 1889px) {
 
/*
#nav:after { content:"DESKTOP > WIDTH [ 1650px ] > [ 1889px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:16em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:1.9em; }

#tog { display:none; }

.fz-til { width:60%; }
.fz-blo { width:35%; }
.fz3 { font-size:2.7em; }

.fz2 { font-size:1.7em; }
.fz-ftr { font-size:1em; }
}

@media only screen and (min-width: 1890px) and (max-width: 2529px) {

/*
#nav:after { content:"DESKTOP > WIDTH [ 1890px ] > [ 2529px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block;   background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:18em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:2.3em; }

#tog { display:none; }

.fz-til { width:60%; }
.fz-blo { width:30%; font-size:1.1em; }
.fz3 { font-size:2.9em; }

.fz2 { font-size:2em; }
.fz-ftr { font-size:1em; }
}

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

/*
#nav:after { content:"DESKTOP > WIDTH [ 2530px ]"; position:absolute; width:50%; font-size: 1em; color:#000000; font-weight:bold; display:block; background-color:#99CC66; width:auto; padding:0.3em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; z-index:9000; }*/

.deshdr { background-image: url(../img/deshdl.png); }
.webhdr { background-image: url(../img/webhdl.png); }
.mblhdr { background-image: url(../img/mblhdl.png); }
.wrkhdr { background-image: url(../img/wrkhdl.png); }

#header { font-size:0.7em; }
.hdr-fix { height:24em; }
#content { font-size:0.7em; }
#footer { font-size:0.7em; }

.logo { display:inline-block; }
.hld { width:80%; margin:1.5% 0; }
.fz-hdr { font-size:3em; }

#tog { display:none; }

.fz-til { width:60%; }
.fz-blo { width:35%; font-size:1.5em; }
.fz3 { font-size:3.3em; }

.fz2 { font-size:2.8em; }
.fz-ftr { font-size:1em; }
}