/* GENERIC */
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;  }

*{ margin:0; padding:0; box-sizing:border-box; -moz-box-sizing:border-box; list-style:none; position:relative; }
:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}


/* HTML5 display-role reset for older browsers*/
footer, header, menu, section { display:block; }
body { font-size:16px; line-height: 1.5;}
ol, ul, nav { list-style:none; list-style-image:none; }
table { border-collapse:collapse; border-spacing:0; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after
   { content:''; content:none; }

/*-------------
   General
-------------*/
html { width:100%; height:100%; font-size:14px; line-height:1.6; }
body { width:100%; height:100%; font-size:14px; line-height:1.6; color:black; font-weight:normal; font-family:'Open Sans', sans-serif; background:white; }
@media screen and (min-width:900px){ html, body { font-size:15px;  } }
@media screen and (min-width:1200px){ html, body { font-size:16px;  } }

h1, .h1 { font-size: 1.6em;}
h2, .h2 { font-size: 1.4em;}
h3, .h3 { font-size: 1.2em;}
h4, .h4 { font-size: 1em;}
@media screen and (min-width:900px) {
h1, .h1 { font-size: 2em;}
h2, .h2 { font-size: 1.7em;}
h3, .h3 { font-size: 1.4em;}
h4, .h4 { font-size: 1em;}
}
@media screen and (min-width:1200px) {
h1, .h1 { font-size: 2.5em;}
h2, .h2 { font-size: 2em;}
h3, .h3 { font-size: 1.5em;}
h4, .h4 { font-size: 1em;}
}

ul.circle{ list-style-type:circle; }
ul.disc{ list-style-type:disc; list-style-position:inside; }
ul.square{ list-style-type:square; }

a { text-decoration:none; color:inherit; }
img { max-width:100%; }

.maxw100{ max-width:100%; }
.maxw90{ max-width:90%; }
.maxw80{ max-width:80%; }
.maxw70{ max-width:70%; }
.maxw60{ max-width:60%; }
.maxw50{ max-width:50%; }
.maxw45{ max-width:45%; }
.maxw40{ max-width:40%; }
.maxw30{ max-width:30%; }
.maxw20{ max-width:20%; }
.maxw10 { max-width:10%; }
.maxw25{ max-width:25%; }
.maxw75{ max-width:75%; }
.maxw33{ max-width:33%; }

.w10 { width:10%; } .w20 { width:20%; } .w30 { width:30%; } .w40 { width:40%; } .w50 { width:50%; }
.w60 { width:60%; } .w70 { width:70%; } .w80 { width:80%; } .w90 { width:90%; } .w100 { width:100%; }
.w5 { width:5%; } .w15 { width:15%; } .w25 { width:25%; } .w35 { width:35%; } .w45 { width:45%; } .w55 { width:55%; }
.w65 { width:65%; } .w75 { width:75%; } .w85 { width:85%; } .w95 { width:95%; } .w100{ width:100%; }

.pad0 { padding:0; } .pad1{ padding:1em; } .pad2{ padding:2em; }
.marg0 { margin:0; } .marg1{ margin:1em; } .marg2 { margin:2em; }
.pt1 { padding-top:1em; }     .pt2 { padding-top:2em; }
.pb1 { padding-bottom:1em; }  .pb2 { padding-bottom:2em; }
.pl1 { padding-left:1em; }    .pl2 { padding-left:2em; }
.pr1 { padding-right:1em; }   .pr2 { padding-right:2em; }

.abs-topleft { position:absolute; top:0; left:0; }
.abs-topright { position:absolute; top:0; right:0; }
.abs-botleft { position:absolute; bottom:0; left:0; }
.abs-botright { position:absolute; bottom:0; right:0; }
.abs-topcent { position:absolute; top:0; left:50%; transform:translate(-50%, 0);}
.abs-botcent { position:absolute; bottom:0; left:50%; transform:translate(-50%, 0);}
.abs-center { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

.centerpg{ margin:0 auto; }
.centerit{ text-align:center; }
.leftit{ text-align:left; }
.rightit{ text-align:right; }
.topit{ vertical-align:top; }
.bottomit{ vertical-align:bottom; }
.midit{ vertical-align:middle; }
.italit{ font-style:italic; }
.boldit{ font-weight:bold; }
.boldit2 { font-weight:bolder; }

.borderit { border:1px solid black; }
.borderit-bot { border-bottom:1px solid black; }
.borderit-top { border-top:1px solid black; }
.borderit-left { border-left:1px solid black; }
.borderit-right { border-right:1px solid black; }
.borderit-big { border:3px solid black; }
.borderit-bot-big { border-bottom:3px solid black; }
.borderit-top-big { border-top:3px solid black; }
.borderit-left-big { border-left:3px solid black; }
.borderit-right-big { border-right:3px solid black; }

.bordertest1 { border:3px solid purple; }
.bordertest2 { border:3px solid green; }
.bordertest3 { border:3px solid red; }
.bordertest4 { border:3px solid blue; }

.text-wrap-left { clear:both; float:right; }
.text-wrap-right { clear:both; float:left; }
.float-left { float:left;  }
.float-right { float:right;  }
@media screen and (max-width: 400px) {
   .float-right, .float-left { float:none; }
}

.text-3D { text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }
.text-outline { text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.text-emboss { color:rgba(0,0,0,.6); text-shadow:2px 8px 6px rgba(0,0,0,.2), 0 -5px 35px rgba(255,255,255,.3); }
.text-hard-shadow { text-shadow:6px 6px 0 rgba(0,0,0,.2); }
.text-lifted-up { text-shadow:0 3px 0 #b2a98f, 0 14px 10px rgba(0,0,0,.15), 0 24px 2px rgba(0,0,0,.1), 0 34px 30px rgba(0,0,0,.1); }
.text-close-heavy { text-shadow:0 4px 3px rgba(0,0,0,.4), 0 8px 13px rgba(0,0,0,.1), 0 18px 23px rgba(0,0,0,.1); }
.text-superhero { text-shadow:-10px 10px 0 #00e6e6, -20px 20px 0 #01cccc, -30px 30px 0 #00bdbd; }
.text-glow { text-shadow:2px 8px 6px rgba(0,0,0,.2), 0 -5px 35px rgba(255,255,255,.3); }

.circle{ border-radius:50%; }
.btn { border-radius:7px; display:inline-block; font-size:100%; white-space:nowrap; text-align:center; cursor:pointer;
       outline:0; vertical-align:middle; overflow:hidden; text-decoration:none; border:1px solid;
   -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.btn1{ border-radius:7px; display:inline-block; font-size:100%; white-space:nowrap; text-align:center; cursor:pointer;
       padding:3px 5px; border:1px solid; box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
   -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;  }
.card1{ box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); padding:2rem; }
.card2{ box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19); padding:2rem; }
.iframe{ overflow:hidden!important; }

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer, .btn, .my-btn, nav li:hover;
{ cursor:pointer; }

.text-black { color:black; }
.text-red { color:red; }
.text-white { color:white; }
.text-blue { color:blue; }
.text-green { color:green; }
.text-grey { color:grey; }
.text-navy { color:navy; }
.back-black { background:black; }
.back-red { background:red; }
.back-white { background:white; }
.back-blue { background:blue; }
.back-green { background:green; }
.back-grey { background:grey; }
.back-navy { background:navy; }

.fakeimg {  background-color: #aaa;  width:100%;  padding:20px;}

.hidden { display:none; }
.mobile { display:block; }
.desktop { display:none; }
@media screen and (min-width:900px) {
   .mobile { display:none; }
   .desktop { display:inline; }
}

.fixed {  position:fixed; width:100%; left:0; top:0;}

.row { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; }
/* On screens that are 600px wide or less, make all columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
   .row { flex-direction:column; flex-wrap:nowrap;  }
}

.column2 { flex: 50%; padding: 1.3rem; }
.column3 { flex: 33%; padding: 1.3rem; }
.column4 { flex: 25%; padding: 1.3rem; }
@media screen and (max-width: 1024px) {
   .column3 { flex: 50%;   }
   .column4 { flex: 50%;   }
}
.jc-centered { justify-content:centered; }
.jc-sparound { justify-content: space-around; }
.jc-spbetween { justify-content: space-between; }

