/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
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;}

/* reset */

html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

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

html,
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    color: black;
    background-color: white;
    opacity: ;    
}
html {
    /*width: 100%;*/
    /*height: 100%;*/
    /*min-height: 100%; */
    /*overflow: auto;*/
    /*overflow-y: scroll;*/ /* has to be scroll, not auto */
    /*-webkit-overflow-scrolling: touch;*/
}

body {
    /*height: 100%;*/
}

img {
    width: 100%;
    height: auto;
}
img.landscape {
    width: 100%;
    height: auto;
}
img.portrait {
    width: 66%;
    height: auto;
}
.autofit {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}




/* Type 
=======================*/

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

p {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 1em;
    letter-spacing: 0.03em;
}
p a,
p a:hover {
    text-decoration: underline;
}

h1,
h2,
h3 {
    /*text-align: center;
    letter-spacing: .02em;
    line-height: 1.3;
    font-weight: normal;
    margin: 0 auto .5em;    
    text-transform: none;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    -ms-word-break: break-all;
        word-break: break-all;            */
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1em;
}
blockquote {
    /*font-style: italic;
    font-size: 2em;
    line-height: 1.5;
    padding-left: 3em;
    padding-right: 3em;
    margin-top: 2em;
    margin-bottom: 2em;*/
}
.text ul {
    padding-left: 1.25em;
    margin-bottom: 1em;
}
.text ul li {
    list-style-position: outside;
    list-style-type: disc;
}
strong {
    font-weight: bold;
}

.hyphen {
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
}
.elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

::selection {
    /*background-color: transparent;*/
}
p::selection, p ::selection {
    background-color: #ccc;
    color: #000;
}
button {
    cursor: pointer;
}
input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.noselect { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }




/* 
IE vertical align fix

1 non css transforms class and detection via Modernizr
for old browsers e.g. ie6, ie7

2 ie8 class and detection via HTML tag
non css transforms fix will not work on ie8 because of bug
use table fix for ie8

=============================*/
.vc-outer {
    display: block;
    height: 100%;
    position: relative;
    /*background: #aaf;*/
}

.vc-middle {
    display: block;
    height: 100%;
    position: relative;
    /*background: #66f;*/
}

.vc {
    display: block;
    /*position: relative;*/
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*background: blue;*/
}
.c {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*width: 100%;*/
    /*max-width: 600px;*/
}

/*.ie7 .vc-outer,*/
.no-csstransforms .vc-outer {
    position: relative !important;
    display: inline-block !important;
    top: 0;
    background: pink;
    overflow: hidden;
}
/*.ie7 .vc-middle,*/
.no-csstransforms .vc-middle {
    position: relative !important;
    display: inline-block !important;
    height: auto;
    width: auto;        
    top: 50%;
    background: purple;
}
/*.ie7 .vc,*/
.no-csstransforms .vc {
    background: violet;
    position: relative !important;
    display: inline-block !important;
    top: -50%;
    /*width: 600px;*/
}


.ie8.no-csstransforms .vc-outer {
    display: table !important;
    position: relative !important;
    top: 0;
    background: orange;
}
.ie8.no-csstransforms .vc-middle {
    display: table-cell !important;
    position: relative !important;
    vertical-align: middle;
    height: auto;
    width: auto;
    top: 0;
    background: gold;
}
.ie8.no-csstransforms .vc {
    display: block !important;
    position: relative !important;
    top: 0%;
    background: yellow;
}




/* Helper
=========================*/
.dib        { display: inline-block; *display: inline; *zoom:1; }
.di         { display: inline; }
.db         { display: block; }
.dn         { display: none; }

.tac        { text-align: center; }
.tal        { text-align: left; }
.tar        { text-align: right; }
.taj        { text-align: justify; }

.ttu        { text-transform: uppercase; }
.ttc        { text-transform: capitalize; }
.ttn        { text-transform: none; }

.ls         { letter-spacing: 0.05em; }
.ls0        { letter-spacing: 0em; }
.ls005em    { letter-spacing: 0.05em; }
.ls01em     { letter-spacing: 0.1em; }
.ls02em     { letter-spacing: 0.2em; }
.ls03em     { letter-spacing: 0.3em; }
.ls04em     { letter-spacing: 0.4em; }

.fwb        { font-weight: bold; }
.fwn        { font-weight: normal; }

.lh1em,.lh1 { line-height: 1; }
.lh12em,.lh12 { line-height: 1.2; }
.lh13em,.lh13 { line-height: 1.3; }
.lh14em,.lh14 { line-height: 1.4; }
.lh15em,.lh15 { line-height: 1.5; }
.lh16em,.lh16 { line-height: 1.6; }
.lh17em,.lh17 { line-height: 1.7; }
.lh18em,.lh18 { line-height: 1.8; }
.lh19em,.lh19 { line-height: 1.9; }

.fs06rem     { font-size: 0.6rem; }
.fs07rem     { font-size: 0.7rem; }
.fs08rem     { font-size: 0.8rem; }
.fs09rem     { font-size: 0.9rem; }
.fs1rem     { font-size: 1rem; }
.fs12rem     { font-size: 1.2rem; }
.fs13rem     { font-size: 1.3rem; }
.fs14rem     { font-size: 1.4rem; }
.fs15rem     { font-size: 1.5rem; }
.fs16rem     { font-size: 1.6rem; }
.fs17rem     { font-size: 1.7rem; }
.fs18rem     { font-size: 1.8rem; }
.fs19rem     { font-size: 1.9rem; }
.fs2rem     { font-size: 2rem; }
.fs25rem     { font-size: 2.5rem; }
.fs3rem     { font-size: 3rem; }
.fs4rem     { font-size: 4rem; }
.fs5rem     { font-size: 5rem; }
.fs6rem     { font-size: 6rem; }
.fs7rem     { font-size: 7rem; }
.fs8rem     { font-size: 8rem; }

.fs05em     { font-size: 0.5em; }
.fs06em     { font-size: 0.6em; }
.fs07em     { font-size: 0.7em; }
.fs08em     { font-size: 0.8em; }
.fs09em     { font-size: 0.9em; }
.fs1em     { font-size: 1em; }
.fs12em     { font-size: 1.2em; }
.fs13em     { font-size: 1.3em; }
.fs14em     { font-size: 1.4em; }
.fs15em     { font-size: 1.5em; }
.fs16em     { font-size: 1.6em; }
.fs17em     { font-size: 1.7em; }
.fs18em     { font-size: 1.8em; }
.fs19em     { font-size: 1.9em; }
.fs2em     { font-size: 2em; }
.fs3em     { font-size: 3em; }
.fs4em     { font-size: 4em; }
.fs5em     { font-size: 5em; }
.fs6em     { font-size: 6em; }
.fs7em     { font-size: 7em; }
.fs8em     { font-size: 8em; }


.fs11p { font-size: 11px; }

.tl         { top: 20px;left: 30px; }
.tr         { top: 20px;right: 30px; }
.bl         { bottom: 20px; left: 30px; }
.br         { bottom: 20px;right: 30px; }
.l          { left: 30px; }
.r          { right: 30px; }
.t          { top: 20px; }
.b          { bottom: 20px; }

.c {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.vc {
    top: 55%; 
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*.vc-outter {
    border: 1px solid red;
    top:0;
}
.vc-middle {
    border: 1px solid green;
    position: relative;
    top:50%;
}
.vc-inner {
    border: 1px solid blue;
    position: relative;
    top:-50%;
}*/
/*
http://emergentweb.com/test/valign.html
*/

.ofa {
    overflow: auto;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}
.ofh {
    overflow: hidden;
}

.curp {
    cursor: pointer;
}

.z-9 { z-index: -9; }
.z-1 { z-index: -1; }
.z0 { z-index: 0; }
.z1 { z-index: 1; }
.z99 { z-index: 99; }
.z999 { z-index: 999; }
.z5999 { z-index: 5999; }
.z9999 { z-index: 9999; }

.m0 { margin: 0px; }
.m10 { margin: 10px; }
.m15 { margin: 15px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }
.m60 { margin: 60px; }
.m70 { margin: 70px; }
.m80 { margin: 80px; }
.m90 { margin: 90px; }
.m100 { margin: 100px; }

.mb0 { margin-bottom: 0px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.mb05em { margin-bottom: 0.5em; }
.mb06em { margin-bottom: 0.6em; }
.mb07em { margin-bottom: 0.7em; }
.mb08em { margin-bottom: 0.8em; }
.mb09em { margin-bottom: 0.9em; }
.mb1em { margin-bottom: 1em; }
.mb12em { margin-bottom: 1.2em; }
.mb13em { margin-bottom: 1.3em; }
.mb14em { margin-bottom: 1.4em; }
.mb15em { margin-bottom: 1.5em; }
.mb16em { margin-bottom: 1.6em; }
.mb17em { margin-bottom: 1.7em; }
.mb18em { margin-bottom: 1.8em; }
.mb19em { margin-bottom: 1.9em; }
.mb2em { margin-bottom: 2em; }
.mb3em { margin-bottom: 3em; }
.mb4em { margin-bottom: 4em; }
.mb5em { margin-bottom: 5em; }
.mb6em { margin-bottom: 6em; }

.mt-30 { margin-top: -30px; }
.mt-20 { margin-top: -20px; }
.mt-15 { margin-top: -15px; }
.mt-10 { margin-top: -10px; }
.mt0 { margin-top: 0px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }

.mt05em { margin-top: 0.5em; }
.mt06em { margin-top: 0.6em; }
.mt07em { margin-top: 0.7em; }
.mt08em { margin-top: 0.8em; }
.mt09em { margin-top: 0.9em; }
.mt1em { margin-top: 1em; }
.mt12em { margin-top: 1.2em; }
.mt13em { margin-top: 1.3em; }
.mt14em { margin-top: 1.4em; }
.mt15em { margin-top: 1.5em; }
.mt16em { margin-top: 1.6em; }
.mt17em { margin-top: 1.7em; }
.mt18em { margin-top: 1.8em; }
.mt19em { margin-top: 1.9em; }
.mt2em { margin-top: 2em; }
.mt3em { margin-top: 3em; }
.mt4em { margin-top: 4em; }

.mr0 { margin-right: 0px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mr90 { margin-right: 90px; }
.mr100 { margin-right: 100px; }

.mr05em { margin-right: 0.5em; }
.mr06em { margin-right: 0.6em; }
.mr07em { margin-right: 0.7em; }
.mr08em { margin-right: 0.8em; }
.mr09em { margin-right: 0.9em; }
.mr1em { margin-right: 1em; }
.mr12em { margin-right: 1.2em; }
.mr13em { margin-right: 1.3em; }
.mr14em { margin-right: 1.4em; }
.mr15em { margin-right: 1.5em; }
.mr16em { margin-right: 1.6em; }
.mr17em { margin-right: 1.7em; }
.mr18em { margin-right: 1.8em; }
.mr19em { margin-right: 1.9em; }
.mr2em { margin-right: 2em; }
.mr3em { margin-right: 3em; }
.mr4em { margin-right: 4em; }
.mr5em { margin-right: 5em; }
.mr6em { margin-right: 6em; }

.mr0 { margin-right: 0px; }
.mr1p { margin-right: 1%; }
.mr2p { margin-right: 2%; }
.mr3p { margin-right: 3%; }
.mr4p { margin-right: 4%; }
.mr5p { margin-right: 5%; }
.mr6p { margin-right: 6%; }
.mr7p { margin-right: 7%; }
.mr8p { margin-right: 8%; }
.mr9p { margin-right: 9%; }
.mr10p { margin-right: 10%; }

.ml0 { margin-left: 0px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml80 { margin-left: 80px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }
.ml110 { margin-left: 110px; }
.ml120 { margin-left: 120px; }

.ml05em { margin-left: 0.5em; }
.ml06em { margin-left: 0.6em; }
.ml07em { margin-left: 0.7em; }
.ml08em { margin-left: 0.8em; }
.ml09em { margin-left: 0.9em; }
.ml1em { margin-left: 1em; }
.ml12em { margin-left: 1.2em; }
.ml13em { margin-left: 1.3em; }
.ml14em { margin-left: 1.4em; }
.ml15em { margin-left: 1.5em; }
.ml16em { margin-left: 1.6em; }
.ml17em { margin-left: 1.7em; }
.ml18em { margin-left: 1.8em; }
.ml19em { margin-left: 1.9em; }
.ml2em { margin-left: 2em; }
.ml3em { margin-left: 3em; }
.ml4em { margin-left: 4em; }
.ml5em { margin-left: 5em; }
.ml6em { margin-left: 6em; }

.p0 { padding: 0px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }
.p50 { padding: 50px; }
.p60 { padding: 60px; }
.p70 { padding: 70px; }
.p80 { padding: 80px; }
.p90 { padding: 90px; }
.p100 { padding: 100px; }
.p200 { padding: 200px; }
.p300 { padding: 300px; }
.p400 { padding: 400px; }

.pt0 { padding-top: 0px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }
.pt200 { padding-top: 200px; }
.pt300 { padding-top: 300px; }
.pt400 { padding-top: 400px; }

.pt05em { padding-top: 0.5em; }
.pt06em { padding-top: 0.6em; }
.pt07em { padding-top: 0.7em; }
.pt08em { padding-top: 0.8em; }
.pt09em { padding-top: 0.9em; }
.pt1em { padding-top: 1em; }
.pt12em { padding-top: 1.2em; }
.pt13em { padding-top: 1.3em; }
.pt14em { padding-top: 1.4em; }
.pt15em { padding-top: 1.5em; }
.pt16em { padding-top: 1.6em; }
.pt17em { padding-top: 1.7em; }
.pt18em { padding-top: 1.8em; }
.pt19em { padding-top: 1.9em; }
.pt2em { padding-top: 2em; }
.pt3em { padding-top: 3em; }
.pt4em { padding-top: 4em; }
.pt5em { padding-top: 5em; }
.pt6em { padding-top: 6em; }

.pr0 { padding-right: 0px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }
.pr200 { padding-right: 200px; }
.pr300 { padding-right: 300px; }
.pr400 { padding-right: 400px; }

.pr05em { padding-right: 0.5em; }
.pr06em { padding-right: 0.6em; }
.pr07em { padding-right: 0.7em; }
.pr08em { padding-right: 0.8em; }
.pr09em { padding-right: 0.9em; }
.pr1em { padding-right: 1em; }
.pr12em { padding-right: 1.2em; }
.pr13em { padding-right: 1.3em; }
.pr14em { padding-right: 1.4em; }
.pr15em { padding-right: 1.5em; }
.pr16em { padding-right: 1.6em; }
.pr17em { padding-right: 1.7em; }
.pr18em { padding-right: 1.8em; }
.pr19em { padding-right: 1.9em; }
.pr2em { padding-right: 2em; }
.pr3em { padding-right: 3em; }
.pr4em { padding-right: 4em; }
.pr5em { padding-right: 5em; }
.pr6em { padding-right: 6em; }

.pb0p { padding-bottom: 0%; }
.pb10p { padding-bottom: 10%; }
.pb15p { padding-bottom: 15%; }
.pb20p { padding-bottom: 20%; }
.pb30p { padding-bottom: 30%; }
.pb40p { padding-bottom: 40%; }
.pb50p { padding-bottom: 50%; }
.pb60p { padding-bottom: 60%; }
.pb65p { padding-bottom: 65%; }
.pb70p { padding-bottom: 70%; }
.pb80p { padding-bottom: 80%; }
.pb90p { padding-bottom: 90%; }
.pb100p { padding-bottom: 100%; }

.pb0 { padding-bottom: 0px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }
.pb200 { padding-bottom: 200px; }
.pb300 { padding-bottom: 300px; }
.pb400 { padding-bottom: 400px; }

.pb05em { padding-bottom: 0.5em; }
.pb06em { padding-bottom: 0.6em; }
.pb07em { padding-bottom: 0.7em; }
.pb08em { padding-bottom: 0.8em; }
.pb09em { padding-bottom: 0.9em; }
.pb1em { padding-bottom: 1em; }
.pb12em { padding-bottom: 1.2em; }
.pb13em { padding-bottom: 1.3em; }
.pb14em { padding-bottom: 1.4em; }
.pb15em { padding-bottom: 1.5em; }
.pb16em { padding-bottom: 1.6em; }
.pb17em { padding-bottom: 1.7em; }
.pb18em { padding-bottom: 1.8em; }
.pb19em { padding-bottom: 1.9em; }
.pb2em { padding-bottom: 2em; }
.pb3em { padding-bottom: 3em; }
.pb4em { padding-bottom: 4em; }
.pb5em { padding-bottom: 5em; }
.pb6em { padding-bottom: 6em; }

.pl0 { padding-left: 0px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }
.pl200 { padding-left: 200px; }
.pl300 { padding-left: 300px; }
.pl400 { padding-left: 400px; }

.pl05em { padding-left: 0.5em; }
.pl06em { padding-left: 0.6em; }
.pl07em { padding-left: 0.7em; }
.pl08em { padding-left: 0.8em; }
.pl09em { padding-left: 0.9em; }
.pl1em { padding-left: 1em; }
.pl12em { padding-left: 1.2em; }
.pl13em { padding-left: 1.3em; }
.pl14em { padding-left: 1.4em; }
.pl15em { padding-left: 1.5em; }
.pl16em { padding-left: 1.6em; }
.pl17em { padding-left: 1.7em; }
.pl18em { padding-left: 1.8em; }
.pl19em { padding-left: 1.9em; }
.pl2em { padding-left: 2em; }
.pl3em { padding-left: 3em; }
.pl4em { padding-left: 4em; }
.pl5em { padding-left: 5em; }
.pl6em { padding-left: 6em; }


.maxw600 { max-width: 600px; }
.maxw800 { max-width: 800px; }
.maxw1000 { max-width: 1000px; }
.maxw1200 { max-width: 1200px; }
.maxw100p { max-width: 100%; }
.maxh100p { max-height: 100%; }
.minw100p { min-width: 100%; }
.minh100p { min-height: 100%; }

.wa { width: auto; }
.w0 { width: 0px; }
.w10p { width: 10%; }
.w125p { width: 12.5%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w25p { width: 25%; }
.w30p { width: 30%; }
.w33p { width: 33.333%; }
.w35p { width: 35%; }
.w40p { width: 40%; }
.w45p { width: 45%; }
.w49p { width: 49%; }
.w50p { width: 50%; }
.w55p { width: 55%; }
.w60p { width: 60%; }
.w65p { width: 65%; }
.w70p { width: 70%; }
.w75p { width: 75%; }
.w75p { width: 75%; }
.w80p { width: 80%; }
.w85p { width: 85%; }
.w90p { width: 90%; }
.w100p { width: 100%; }


.w16p { width: 16%; }
.w19p { width: 19%; }
.w32p { width: 32%; }
.w13p { width: 13%; }
.w29p { width: 29%; }
.w24p { width: 30%; }
.w17d3p {width: 17.3%;}
.w20d3p {width: 28.7%;}


.w1em { width: 1em; }
.w2em { width: 2em; }
.w3em { width: 3em; }
.w4em { width: 4em; }
.w5em { width: 5em; }
.w6em { width: 6em; }

.w0 { width: 0px; }
.w10 { width: 10px; }
.w15 { width: 15px; }
.w20 { width: 20px; }
.w25 { width: 25px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w55 { width: 55px; }
.w60 { width: 60px; }
.w65 { width: 65px; }
.w70 { width: 70px; }
.w75 { width: 75px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w200 { width: 200px; }
.w300 { width: 300px; }
.w350 { width: 350px; }
.w400 { width: 400px; }

.ha { height: auto; }
.h0 { height: 0px; }
.h10p { height: 10%; }
.h125p { height: 12.5%; }
.h15p { height: 15%; }
.h20p { height: 20%; }
.h25p { height: 25%; }
.h30p { height: 30%; }
.h33p { height: 33.333%; }
.h40p { height: 40%; }
.h50p { height: 50%; }
.h60p { height: 60%; }
.h70p { height: 70%; }
.h75p { height: 75%; }
.h80p { height: 80%; }
.h90p { height: 90%; }
.h100p { height: 100%; }

.h0 { height: 0px; }
.h5 { height: 5px; }
.h10 { height: 10px; }
.h15 { height: 15px; }
.h20 { height: 20px; }
.h25 { height: 25px; }
.h30 { height: 30px; }
.h40 { height: 40px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h70 { height: 70px; }
.h80 { height: 80px; }
.h90 { height: 90px; }
.h100 { height: 100px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h300 { height: 300px; }
.h400 { height: 400px; }
.h500 { height: 500px; }
.h600 { height: 600px; }

.h1em { height: 1em; }
.h2em { height: 2em; }
.h3em { height: 3em; }
.h4em { height: 4em; }
.h5em { height: 5em; }
.h6em { height: 6em; }

.l0 { left: 0px; }
.l0p { left: 0%; }
.l5p { left: 5%; }
.l10p { left: 10%; }
.l125p { left: 12.5%; }
.l15p { left: 15%; }
.l20p { left: 20%; }
.l25p { left: 25%; }
.l30p { left: 30%; }
.l33p { left: 33.333%; }
.l35p { left: 35%; }
.l40p { left: 40%; }
.l50p { left: 50%; }
.l55p { left: 55%; }
.l60p { left: 60%; }
.l70p { left: 70%; }
.l75p { left: 75%; }
.l80p { left: 80%; }
.l90p { left: 90%; }
.l100p { left: 100%; }

.l0 { left: 0px; }
.l10 { left: 10px; }
.l15 { left: 15px; }
.l20 { left: 20px; }
.l30 { left: 30px; }
.l40 { left: 40px; }
.l50 { left: 50px; }
.l60 { left: 60px; }
.l70 { left: 70px; }
.l80 { left: 80px; }
.l90 { left: 90px; }
.l100 { left: 100px; }
.l150 { left: 150px; }
.l200 { left: 200px; }

.r0 { right: 0px; }
.r0p { right: 0%; }
.r5p { right: 5%; }
.r10p { right: 10%; }
.r125p { right: 12.5%; }
.r15p { right: 15%; }
.r20p { right: 20%; }
.r25p { right: 25%; }
.r30p { right: 30%; }
.r33p { right: 33.333%; }
.r35p { right: 35%; }
.r40p { right: 40%; }
.r50p { right: 50%; }
.r55p { right: 55%; }
.r60p { right: 60%; }
.r70p { right: 70%; }
.r75p { right: 75%; }
.r80p { right: 80%; }
.r90p { right: 90%; }
.r100p { right: 100%; }

.r-20 { right: -20px; }
.r-15 { right: -15px; }
.r-10 { right: -10px; }
.r0 { right: 0px; }
.r5 { right: 5px; }
.r10 { right: 10px; }
.r15 { right: 15px; }
.r20 { right: 20px; }
.r25 { right: 25px; }
.r30 { right: 30px; }
.r40 { right: 40px; }
.r50 { right: 50px; }
.r60 { right: 60px; }
.r70 { right: 70px; }
.r80 { right: 80px; }
.r90 { right: 90px; }
.r100 { right: 100px; }
.r200 { right: 200px; }

.t0 { top: 0px; }
.t0p { top: 0%; }
.t5p { top: 5%; }
.t10p { top: 10%; }
.t125p { top: 12.5%; }
.t15p { top: 15%; }
.t20p { top: 20%; }
.t25p { top: 25%; }
.t30p { top: 30%; }
.t33p { top: 33.333%; }
.t35p { top: 35%; }
.t40p { top: 40%; }
.t50p { top: 50%; }
.t55p { top: 55%; }
.t60p { top: 60%; }
.t70p { top: 70%; }
.t75p { top: 75%; }
.t80p { top: 80%; }
.t90p { top: 90%; }
.t100p { top: 100%; }

.t0 { top: 0px; }
.t5 { top: 5px; }
.t10 { top: 10px; }
.t15 { top: 15px; }
.t20 { top: 20px; }
.t25 { top: 25px; }
.t30 { top: 30px; }
.t40 { top: 40px; }
.t50 { top: 50px; }
.t60 { top: 60px; }
.t70 { top: 70px; }
.t80 { top: 80px; }
.t90 { top: 90px; }
.t100 { top: 100px; }
.t200 { top: 200px; }


.b0 { bottom: 0px; }
.b0p { bottom: 0%; }
.b5p { bottom: 5%; }
.b10p { bottom: 10%; }
.b125p { bottom: 12.5%; }
.b15p { bottom: 15%; }
.b20p { bottom: 20%; }
.b25p { bottom: 25%; }
.b30p { bottom: 30%; }
.b33p { bottom: 33.333%; }
.b35p { bottom: 35%; }
.b40p { bottom: 40%; }
.b50p { bottom: 50%; }
.b55p { bottom: 55%; }
.b60p { bottom: 60%; }
.b70p { bottom: 70%; }
.b75p { bottom: 75%; }
.b80p { bottom: 80%; }
.b90p { bottom: 90%; }
.b100p { bottom: 100%; }

.b0 { bottom: 0px; }
.b10 { bottom: 10px; }
.b15 { bottom: 15px; }
.b20 { bottom: 20px; }
.b30 { bottom: 30px; }
.b40 { bottom: 40px; }
.b50 { bottom: 50px; }
.b60 { bottom: 60px; }
.b70 { bottom: 70px; }
.b80 { bottom: 80px; }
.b90 { bottom: 90px; }
.b100 { bottom: 100px; }
.b200 { bottom: 200px; }

.bt1s { border-top: 1px solid; }
.b1s { border: 1px solid; }

.col-3 { width: 25%; }
.col-4 { width: 31.3333%; padding-left: 1%; padding-right: 1%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }

.col-3.col-first { width: 25%; }
.col-3.col-last { width: 25%; }
.col-4.col-first { width: 31.3333%; padding-left: 0%; padding-right: 2%;}
.col-4.col-last { width: 31.3333%; padding-left: 2%; padding-right: 0%; }
.col-6.col-first { width: 47%; padding-left: 0%; padding-right: 3%;}
.col-6.col-last { width: 47%; padding-left: 3%; padding-right: 0%;}
.col-12.col-first { width: 100%; }
.col-12.col-last { width: 100%; }


.fl {
    float: left;
}
.fr {
    float: right;
}
.fpfr {
    float: right;
}
.rel {
    position: relative;
}
.abs {
    position: absolute;
}
.fixed {
    position: fixed;
}
* html .fixed { 
    position: absolute;
}
/*

Fixed Positioning in IE6 
http://ryanfait.com/

*/

.abs.full {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.abs.full-framed {
    top: 9rem;
    right: 9rem;
    bottom: 9rem;
    left: 9rem;
    margin: auto;
}
.bgcover {
    background-size: cover;
    background-repeat: no-repeat;
}
.bgcontain {
    background-size: contain;
    background-repeat: no-repeat;
}
.bgpc {
    background-position: center center;
}
.bgpattern1 {
    background-color: rgba(0,0,0,0.5);
    background-image: radial-gradient(black 35%, transparent 36%),
    radial-gradient(black 35%, transparent 36%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    opacity: 0.6;
}

.plane-ui {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
}
.plane-ui:focus,
.plane-ui:hover {
    outline-width: 0;
}

.trans250 {
    -webkit-transition: 250ms all;
       -moz-transition: 250ms all;
         -o-transition: 250ms all;
            transition: 250ms all;
}
.trans500 {
    -webkit-transition: 500ms all;
       -moz-transition: 500ms all;
         -o-transition: 500ms all;
            transition: 500ms all;
}
.trans {
    -webkit-transition: 500ms all;
       -moz-transition: 500ms all;
         -o-transition: 500ms all;
            transition: 500ms all;
}

.o0 { opacity: 0; }
.o1 { opacity: 0.1; }
.o2 { opacity: 0.2; }
.o4 { opacity: 0.3; }
.o4 { opacity: 0.4; }
.o5 { opacity: 0.5; }
.o6 { opacity: 0.6; }
.o7 { opacity: 0.7; }
.o8 { opacity: 0.8; }
.o9 { opacity: 0.9; }
.o10 { opacity: 1.0; }



/* imagesLoaded
remove 'is-loading' class on img parent when loaded
use in conjunction with imagesLoaded.js
=========================*/
.image {
    background: ;
}

.is-loading *{
    opacity: 0;
}
.is-loading {
    /*background: #FAFAFA;*/
}
.image-placeholder {
    width: 1px; height: 1px;
    display: none;
}
.is-loading .image-placeholder {
    display: block;
}



.bgcover { background-size: cover; background-repeat: no-repeat; }
.bgcontain { background-size: contain; background-repeat: no-repeat; }
.bgpc { background-position: center center; }
.bgp5p { background-position: 5%; }
.bgp10p { background-position: 10%; }
.bgp25p { background-position: 25%; }
.bgp50p { background-position: 50%; }
.bgp75p { background-position: 75%; }
.bgp90p { background-position: 90%; }
.bgr { background-repeat: repeat; }

.bgs5p { background-size: 5%; }
.bgs10p { background-size: 10%; }
.bgs25p { background-size: 25%; }
.bgs50p { background-size: 50%; }
.bgs75p { background-size: 75%; }

.plane-ui,
.plane-ui:focus,
.plane-ui:hover {
    outline-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
}




/*

    FLEX

*/
/* 
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
*/

.df { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 
}
.flexnowrap {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
}
.flexwrap {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.flexrow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}
.flexcolumn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;   
}
.flexorder1 { order: 1; }
.flexorder2 { order: 2; }
.flexorder3 { order: 3; }
.flexorder4 { order: 4; }
.flexorder5 { order: 5; }
.flexorder6 { order: 6; }
.flexorder7 { order: 7; }
.flexorder8 { order: 8; }
.flexorder9 { order: 9; }
.flexorder10 { order: 10; }