/* Note from Mike James - mikejamesmedia.com - This is currently a hybrid stylesheet, including elements from my previous (CSS 2) work, while gradually transitioning to all CSS 3, derived largely from W3.CSS 1.55. */

/* ————————————————————————————————————————-*/

/* W3.CSS 1.55 by J.E.Refsnes. Do not remove this line. */

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

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

html{-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,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{-webkit-tap-highlight-color:transparent;background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box}
pre{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]{padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{box-sizing:content-box;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
/* End extract from normalize.css */

html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,Verdana,sans-serif;font-weight:400;margin:10px 0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
hr{height:0;border:0;border-top:1px solid #eee;margin:20px 0}
img{margin-bottom:-5px}
a{color:inherit}

/* TABLES */ 
table{border-collapse:collapse;border-spacing:0;width:100%;display:table}
table,th,td{border:none}
table.w3-table-all{border:1px solid #ccc}
table.w3-bordered tr,table.w3-table-all tr{border-bottom:1px solid #d0d0d0}
table.w3-striped tbody tr:nth-child(even){background-color:#f2f2f2}
table.w3-table-all thead tr{background-color:#fff}
table.w3-table-all tr:nth-child(odd){background-color:#fff}
table.w3-table-all tr:nth-child(even){background-color:#f2f2f2}
table.w3-hoverable tbody tr{transition:background-color .25s ease}
table.w3-hoverable tbody tr:hover{background-color:#f2f2f2}
table.w3-centered tr th,table.w3-centered tr td{text-align:center}
thead.w3-bordered{border-bottom:1px solid #d0d0d0}
table.w3-table td,table.w3-table th,table.w3-table-all td,table.w3-table-all th
{padding:8px;display:table-cell;text-align:left;vertical-align:top}
table.w3-table th:first-child,table.w3-table td:first-child,table.w3-table-all th:first-child,table.w3-table-all td:first-child{padding-left:16px}

/* BUTTONS */
.w3-btn{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;
text-decoration:none !important;color:#fff;background-color:#000;text-align:center;transition:.2s ease-out;cursor:pointer;white-space:nowrap}
.w3-btn.w3-disabled,.w3-btn-floating.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large.w3-disabled,.w3-btn-floating-large:disabled{
background-color:#DFDFDF;box-shadow:none;color:#9F9F9F;cursor:not-allowed}
.w3-btn.w3-disabled *,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover,
.w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{background-color:#DFDFDF;color:#9F9F9F}
.w3-btn:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn-floating,.w3-btn-floating-large{
display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;
padding:0;border-radius:50%;transition:.3s;cursor:pointer;vertical-align:middle;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating-large{width:56px;height:56px;line-height:56px}
.w3-btn-floating i,.w3-btn-floating-large i{vertical-align:1%}

/* BADGES */
.w3-badge,.w3-tag{display:inline-block;padding-left:6px;padding-right:6px;font-weight:bold;text-align:center}
.w3-badge{border-radius:12px}

/* BLOCKQUOTE */
.w3-blockquote{margin:0;padding-left:16px;border-left:5px solid #ddd;font-style:italic}

/* LISTS */
ul.w3-ul{list-style-type:none;padding:0;margin:0}
ul.w3-ul li{padding:6px 16px;border-bottom:1px solid #e0e0e0}
ul.w3-ul li:last-child{border-bottom:none}

/* IMAGES */
.w3-image{position:relative}
.w3-image img{max-width:100%;height:auto}
.w3-image .w3-title{position:absolute;bottom:8px;left:16px;color:#fff;font-size:20px}

/* TOOLTIP */
.w3-tooltip .w3-text{display:none}
.w3-tooltip:hover .w3-text{display:inline-block}

/* NAVIGATION */
.w3-topnav{padding:8px 8px}
.w3-topnav a,.w3-sidenav a,.w3-dropnav a{text-decoration:none !important}
.w3-topnav a{padding:0 8px;border-bottom:3px solid transparent;
-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
.w3-topnav a:hover{border-bottom:3px solid #fff}
.w3-sidenav{height:100%;width:200px;position:fixed;z-index:1;overflow:auto}
.w3-opennav,.w3-closenav{color:inherit}
.w3-opennav:hover,.w3-closenav:hover{cursor:pointer;opacity:0.8}
.w3-sidenav a{padding:4px 16px}
.w3-sidenav a:hover,.w3-sidenav a:focus{background-color:#ccc}
.w3-sidenav a,.w3-dropnav a{display:block;transition:.3s}
.w3-dropnav a:hover{text-decoration:underline !important}

/* TAB */
.w3-tab div{display:none}
.w3-tab div:target{display:block}

/* MODAL */
.w3-modal{
display:none;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;
background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal:target{display:table;position:absolute;overflow:scroll;z-index:1}
.w3-modal-dialog{display:table-cell;vertical-align:middle}
.w3-modal-dialog .w3-modal-content{
margin:auto;background-color:#f3f3f3;position:relative;padding:0;outline:0;border:1px #555 solid;width:600px}
.w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit}
.w3-closebtn:hover,.w3-closebtn:focus{color:#000;text-decoration:none;cursor:pointer}

/* FORMS */
.w3-group{position:relative;margin-top:30px;margin-bottom:30px}
.w3-input,.w3-textarea{padding:10px;display:block;border:none;border-bottom:1px solid #808080}
.w3-label{position:absolute;top:0;left:0;color:#009688;transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}
.w3-select{background-color:transparent;padding:4px 0;font-size:16px;color:#000;border:1px solid transparent;border-bottom: 1px solid #009688}
.w3-select select:focus {color:#000;border:1px solid #009688}
.w3-select option[disabled] {color:#009688}
.w3-input:focus ~ .w3-label,.w3-input:valid ~ .w3-label,.w3-textarea:focus ~ .w3-label,.w3-textarea:valid ~ .w3-label{
top:-20px;font-size:14px;color:#888}
.w3-checkbox:before,.w3-checkbox:after,.w3-checkbox,.w3-checkmark:before,.w3-checkmark:after,.w3-checkmark{box-sizing:border-box}
.w3-checkbox{display:inline-block;line-height:24px;margin:8px 0}
.w3-checkbox input[type=checkbox], .w3-checkbox input[type=radio]{display:none}
.w3-checkbox input[type=checkbox]:checked + .w3-checkmark:before{background:#009688}
.w3-checkbox input[type=checkbox]:checked + .w3-checkmark:after{opacity:1}
.w3-checkbox input[type=radio]:checked + .w3-checkmark:before{background:#fff}
.w3-checkbox input[type=radio]:checked + .w3-checkmark:after{opacity:1;background-color:#009688}
.w3-checkmark:before{content:'';position:absolute;width:24px;height:24px;border:2px solid #009688}
.w3-checkmark{position:relative;display:inline-block;vertical-align:top;cursor:pointer;width:24px;height:24px}
.w3-checkmark:after 
{content:'';position:absolute;top:7px;left:6px;width:14px;height:8px;border:4px solid #fff;
border-top:none;border-right:none;
-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.w3-checkbox input[type=radio] + .w3-checkmark:before{border-radius:50%;background-color:#fff}
.w3-checkbox input[type=radio] + .w3-checkmark:after 
{content:'';position:absolute;top:6px;left:6px;width:12px;height:12px;border:0 solid #fff
;border-radius:50%}
.w3-checkbox input[type=checkbox]:disabled + .w3-checkmark{opacity:0.3;cursor:default}
.w3-checkbox input[type=radio]:disabled + .w3-checkmark{opacity:0.3;cursor:default}

/* RESPONSIVE */
.w3-responsive{overflow-x:auto}
.w3-container:after, .w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}
.w3-col.s2{width:16.66666%}
.w3-col.s3{width:24.99999%}
.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}
.w3-col.s6{width:49.99999%}
.w3-col.s7{width:58.33333%}
.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}
.w3-col.s10{width:83.33333%}
.w3-col.s11{width:91.66666%}
.w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-quarter{width:99.99999%}
@media only screen and (min-width:601px){
.w3-col.m1{width:8.33333%}
.w3-col.m2{width:16.66666%}
.w3-col.m3,.w3-quarter{width:24.99999%}
.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}
.w3-col.m6,.w3-half{width:49.99999%}
.w3-col.m7{width:58.33333%}
.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9{width:74.99999%}
.w3-col.m10{width:83.33333%}
.w3-col.m11{width:91.66666%}
.w3-col.m12{width:99.99999%}}
@media only screen and (min-width:993px){
.w3-col.l1{width:8.33333%}
.w3-col.l2{width:16.66666%}
.w3-col.l3,.w3-quarter{width:24.99999%}
.w3-col.l4,.w3-third{width:33.33333%}
.w3-col.l5{width:41.66666%}
.w3-col.l6,.w3-half{width:49.99999%}
.w3-col.l7{width:58.33333%}
.w3-col.l8,.w3-twothird{width:66.66666%}
.w3-col.l9{width:74.99999%}
.w3-col.l10{width:83.33333%}
.w3-col.l11{width:91.66666%}
.w3-col.l12{width:99.99999%}}
.w3-content{max-width:100%;margin:auto}
.w3-rest{overflow:hidden}
@media (max-width:601px){.w3-modal-dialog .w3-modal-content{margin:50px 10px 10px 10px;width:auto !important}}
@media (max-width:768px){.w3-modal-dialog .w3-modal-content{width:500px}}
@media (min-width:992px){.w3-modal-dialog .w3-modal-content{width:900px}}
@media screen and (max-width:601px){.w3-topnav a{display:block}.w3-topnav a:first-child{padding:0 8px}}	
@media screen and (max-width:600px){.w3-topnav{text-align:center}}
@media (max-width:600px){.w3-hide-small{display:none !important}}
@media (max-width:991px) and (min-width:601px){.w3-hide-medium{display:none !important}}
@media (min-width:992px){.w3-hide-large{display:none !important}}

/* UTILITIES */
.material-icons,.glyphicon{vertical-align:-18%}
.w3-left{float:left !important}
.w3-right{float:right !important}
.w3-hide{display:none !important}
.w3-show{display:block !important}
.w3-tiny{font-size:10px !important}
.w3-small{font-size:12px !important}
.w3-medium{font-size:15px !important}
.w3-large{font-size:18px !important}
.w3-xlarge{font-size:24px !important}
.w3-xxlarge{font-size:36px !important}
.w3-xxxlarge{font-size:48px !important}
.w3-stroke{font-family:'Courgette';-webkit-text-stroke:1px #000;letter-spacing:2px}
.w3-jumbo{font-size:64px !important}
.w3-left-align{text-align:left !important}
.w3-right-align{text-align:right !important}
.w3-center{text-align:center !important}
.w3-circle{border-radius:50% !important}
.w3-border-0{border:0 !important}
.w3-border{border:1px solid #ccc !important}
.w3-border-top{border-top:1px solid #ccc !important}
.w3-border-bottom{border-bottom:1px solid #ccc !important}
.w3-border-left{border-left:1px solid #ccc !important}
.w3-border-right{border-right:1px solid #ccc !important}
.w3-margin-0{margin:0 !important}
.w3-margin-2{margin:2px !important}
.w3-margin-4{margin:4px !important}
.w3-margin-8{margin:8px !important}
.w3-margin-12{margin:12px !important}
.w3-margin-16{margin:16px !important}
.w3-margin-24{margin:24px !important}
.w3-margin-32{margin:32px !important}
.w3-margin-64{margin:64px !important}
.w3-margin{margin:16px !important}
.w3-margin-top{margin-top:16px !important}
.w3-margin-bottom{margin-bottom:16px !important}
.w3-margin-left{margin-left:16px !important}
.w3-margin-right{margin-right:16px !important}
.w3-padding-tiny{padding:2px 4px !important}
.w3-padding-small{padding:4px 8px !important}
.w3-padding-medium,.w3-padding{padding:8px 16px !important}
.w3-padding-large{padding:12px 24px !important}
.w3-padding-xlarge{padding:16px 32px !important}
.w3-padding-xxlarge{padding:24px 48px !important}
.w3-padding-jumbo{padding:32px 64px !important}
.w3-padding-0{padding:0 !important}
.w3-padding-4{padding-top:4px !important;padding-bottom:4px !important}
.w3-padding-8{padding-top:8px !important;padding-bottom:8px !important}
.w3-padding-16{padding-top:16px !important;padding-bottom:16px !important}
.w3-padding-24{padding-top:24px !important;padding-bottom:24px !important}
.w3-padding-32{padding-top:32px !important;padding-bottom:32px !important}
.w3-padding-48{padding-top:48px !important;padding-bottom:48px !important}
.w3-padding-64{padding-top:64px !important;padding-bottom:64px !important}
.w3-padding-top{padding-top:8px !important}
.w3-padding-bottom{padding-bottom:8px !important}
.w3-padding-left{padding-left:16px !important}
.w3-padding-right{padding-right:16px !important}
.w3-row-padding,.w3-row-padding .w3-half,.w3-row-padding .w3-third,.w3-row-padding .w3-twothird,.w3-row-padding .w3-quarter,
.w3-row-padding .w3-col{padding:1px 8px}
.w3-spin {animation:w3-spin 2s infinite linear;-webkit-animation:w3-spin 2s infinite linear}
@-webkit-keyframes w3-spin{
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes w3-spin {
0%{-webkit-transform:rotate(0deg);transform: rotate(0deg)}
100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}

/* CONTAINERS */
.w3-container{padding:1px 16px}
.w3-example{background-color:#f1f1f1;padding:1px 16px}
.w3-section{margin-top:16px;margin-bottom:16px}
.w3-code{font-family:Consolas,"courier new";font-size:16px;line-height:1.4;
width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #009688;word-wrap:break-word}
.w3-example, .w3-code, .w3-reference {margin:16px 0}

/* CARDS */
.w3-card{border:1px solid #ccc}
.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important}
.w3-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}
.w3-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}
.w3-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important}
.w3-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21) !important}
.w3-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22) !important}

/* ANIMATION */
.w3-animate-opacity{
-webkit-animation-name:opac;-webkit-animation-duration:4s;animation-name:opac;animation-duration:4s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}

/* TOP */
.w3-animate-top{
position:relative;-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

/* LEFT */
.w3-animate-left{
-webkit-animation-name:animateleft;-webkit-animation-duration:0.4s;animation-name:animateleft;animation-duration:0.4s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:0.9}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:0.9}}

/* RIGHT */
.w3-animate-right{
-webkit-animation-name:animateright;-webkit-animation-duration:0.4s;animation-name:animateright;animation-duration:0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:0.9}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:0.9}}

/* BOTTOM */
.w3-animate-bottom{
position:relative;-webkit-animation-name:animatebottom;-webkit-animation-duration:0.4s;animation-name:animatebottom;animation-duration:0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

/* COLORS */
.w3-text-amber{color:#ffc107 !important}.w3-amber{color:#000 !important;background-color:#ffc107 !important}
.w3-text-blue{color:#2196F3 !important}.w3-blue{color:#fff !important;background-color:#2196F3 !important}
.w3-text-light-blue{color:#87CEEB !important}.w3-light-blue{color:#000 !important;background-color:#87CEEB !important}
.w3-text-brown{color:#795548 !important}.w3-brown{color:#fff !important;background-color:#795548 !important}
.w3-text-cyan{color:#00bcd4 !important}.w3-cyan{color:#000 !important;background-color:#00bcd4 !important}
.w3-text-blue-grey{color:#607d8b !important}.w3-blue-grey{color:#fff !important;background-color:#607d8b !important}
.w3-text-green{color:#4CAF50 !important}.w3-green{color:#fff !important;background-color:#4CAF50 !important}
.w3-text-light-green{color:#8bc34a !important}.w3-light-green{color:#000 !important;background-color:#8bc34a !important}
.w3-text-indigo{color:#3f51b5 !important}.w3-indigo{color:#fff !important;background-color:#3f51b5 !important}
.w3-text-khaki{color:#b4aa50 !important}.w3-khaki{color:#000 !important;background-color:#f0e68c !important}
.w3-text-lime{color:#cddc39 !important}.w3-lime{color:#000 !important;background-color:#cddc39 !important}
.w3-text-orange{color:#ff9800 !important}.w3-orange{color:#000 !important;background-color:#ff9800 !important}
.w3-text-deep-orange{color:#ff5722 !important}.w3-deep-orange{color:#fff !important;background-color:#ff5722 !important}
.w3-text-pink{color:#e91e63 !important}.w3-pink{color:#fff !important;background-color:#e91e63 !important}
.w3-text-purple{color:#9c27b0 !important}.w3-purple{color:#fff !important;background-color:#9c27b0 !important}
.w3-text-deep-purple{color:#673ab7 !important}.w3-deep-purple{color:#fff !important;background-color:#673ab7 !important}
.w3-text-red{color:#F44336 !important}.w3-red{color:#fff !important;background-color:#F44336 !important}
.w3-text-teal{color:#009688 !important}.w3-teal{color:#fff !important;background-color:#009688 !important}
.w3-text-yellow{color:#d2be0e !important}.w3-yellow{color:#000 !important;background-color:#ffeb3b !important}
.w3-text-white{color:#fff !important}.w3-white{color:#000 !important;background-color:#fff !important}
.w3-text-black{color:#000 !important}.w3-black{color:#fff !important;background-color:#000 !important}
.w3-text-grey{color:#757575 !important}.w3-grey{color:#000 !important;background-color:#9e9e9e !important}
.w3-text-light-grey{color:#f1f1f1 !important}.w3-light-grey{color:#000;background-color:#f1f1f1 !important}
.w3-text-dark-grey{color:#3a3a3a !important}.w3-dark-grey{color:white;background-color:#616161 !important}
.w3-text-white-opacity{color:rgba(255,255,255,0.65) !important}
.w3-text-black-opacity{color:rgba(0,0,0,0.60) !important}

/* —————————————————————————-————————————————*/
/* ---------------------------- (HYBRID MJM ADD-ON CSS begins here) --------------------------------*/
/* —————————————————————————-————————————————*/

body {background:#e9e9e9; color: #000}

.w3-container {background: inherit; color: inherit; width: 95%; margin: 0 auto; position: relative}

.main {width:100%; position: relative}

,content{padding: 18px 20px; position: relative; color: inherit}

.main ,content{clear:both; padding:0.5em 0}

.clear {clear: both}

.clearer {clear: both; display: block; margin: 14px 0; padding: 0; height: 0; line-height: 1px; font-size: 1px}

.main .hr {width: 100%; border-bottom: 1px solid #999}

div.center {text-align:center}

img.left {float: left; margin: 8px 20px 16px 0}
img.right {float: right; margin: 8px 0 16px 20px}
img.center {max-width: 100%; padding: 12px auto}

video {max-width: 100%; height: auto; }

/* ————————————- HEADER————————————————*/

#header {margin: .2em auto; padding: .1em; text-align: center; border-radius: 10px;
	background: -webkit-linear-gradient(rgb(154, 228, 253), rgb(51, 153, 255)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgb(154, 228, 253), rgb(51, 153, 255)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgb(154, 228, 253), rgb(51, 153, 255)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgb(154, 228, 253), rgb(51, 153, 255)); /* Standard syntax */}

/* ----------------------------------------------------------------------*/
/* ------------------------- TYPE ------------------------- */
/* ----------------------------------------------------------------------*/

body {font: 14px/16px}

a {color: #0000ff}

strong, b {font-weight:bold}
em, i {font-style:italic}
sup {padding-left:1px; font-size:10px !important; font-weight:normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; color: #76797c; _position:static !important}

.fineprint {font-size: 10px !important; color: #666}

.main p {margin-left: 12px; margin-bottom: 18px0}

#header h1 {font-family: optima; font-weight: normal; font-size: 42px; line-height: 42px; margin-bottom: .1em}

#header h6 {color: #eee; font-weight: normal; font-style: italic; font-size: 14px; line-height: 16px; text-align: center; margin-bottom: 18px}

.main h1 {font-weight: normal; font-size: 28px; line-height: 30px; margin-left: 10px; margin-bottom: .5em}

.main h2 {font-weight: normal; font-size: 20px; line-height: 22px; margin-left: 10px; margin-bottom: 18px}

.main h3 {font-weight: normal; font-size: 18px; line-height: 20px; margin-left: 10px; margin-bottom: 12px}

.main h4 {font-weight: normal; font-size: 16px; line-height: 18px; margin-left: 10px; margin-bottom: 10px}

.main h5 {font-weight: normal; font-size: 14px; line-height: 16px; margin-left: 10px; margin-bottom: 18px}

.main h6 {font-weight: normal; font-size: 14px; line-height: 16px; text-align: center; margin-bottom: 18px}

.main h1 {color: #000}
.main h2 {color: #000}
.main h3 {color: #000}
.main h4 {color: #000}
.main h5 {color: #000}
.main h6 {color: #000}

.main .highlight {color: #cc0000}

.center {text-align:center}

.main p.intro {font-weight: bold}

.main .more {text-align: right}

.main ul {list-style: none outside; margin-bottom: 18px}

.main ul li {list-style: disc; color: #000; margin-bottom: 12px}

.main ol {list-style: decimal; margin-bottom: 18px}

.main ul.square,

.main ul.circle {margin-left: 10px}

.main ul.square {list-style: square outside}

.main ul.circle {list-style: circle outside}

.main ul ul.circle,

.main ul ul.square {margin-top: 4px; margin-bottom: 5px}

.main ol.fineprint {margin-left: 0; padding-left: 2em}

.main p a.pdf {background: url(../media/00_primary/css_images/icon_pdf_12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px}

.main h3 a.pdf {background: url(../media/00_primary/css_images/icon_pdf_32x32.gif) 0 0.4em no-repeat; display: block; padding-left: 36px}

.main .sidebar {font-size: 10px; line-height: 18px; color:#000}

.main .last {margin-bottom: 0}

/* ----------------------------------------------------------------------*/
/* LINKS */
/* ----------------------------------------------------------------------*/
.main a {text-decoration:none}

.main a:hover {color: #ff0000}

#header a, .header a:hover {color: #000; text-decoration: none}

/* ————————————- BANNER————————————————*/

.banner {width: 70%; margin: 1em auto; padding: .1em; text-align: center; border-radius: 10px;
	background: -webkit-linear-gradient(rgb(220, 220, 220), rgb(140, 140,140)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgb(220, 220, 220), rgb(140, 140,140)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgb(220, 220, 220), rgb(140, 140,140)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgb(220, 220, 220), rgb(140, 140,140)); /* Standard syntax */}

/* ——————————— SEARCH BOX ——————————*/

.searchbox {display: inline; font-size: 90%; background: transparent; width: 280px; height: 1em; margin: 1em 1em; float: right}

/* -------------------- WEB "SIGNATURE" ---------------------*/

.signed {width: 140px; height: 58px; background:url(../media/00_primary/mjj_websignature_gold.png) no-repeat 0 100%; _background:url(../media/00_primary/mjj_websignature_gold.gif) no-repeat 0 100%}

/* ----------------------------------------------------------------------*/
/* COLUMN LAYOUT */
/* ----------------------------------------------------------------------*/

.column {float: left}
.layout2col, .layout2cola, .layout2colb, .layout2colc, .layout2cold, .layout2cole, .layout2colf, .layout3col, .layout3cola, .layout4col {width: 100%}

/* ----------------------------------------------------------------------*/
/* ------------------- 1-COLUMN DEFAULT LAYOUT ---------------*/
.layout1col {float: left; width: 100%; margin-left: 4.5%}
/* ----------------------------------------------------------------------*/

/* ------------------- 2-COLUMN (EQUAL SIZE) ---------------*/
.layout2col .column {width: 49%}
.layout2col .layout2col .column {width: 47.8%}
/* ----------------------------------------------------------------------*/

/* ----------------------------------------------------------------------*/
.layout3col .layout2col .column {width: 46%}
/* ----------------------------------------------------------------------*/
.layout4col .layout2col .column {width: 45%}
/* ----------------------------------------------------------------------*/

/* -------------------- LEFT MAIN W RIGHT SIDEBAR --------------------------*/
.layout2cola .column.first {width: 66%}
.layout2cola .column.last {width: 32%}

/* ------------------- LEFT MAIN W RIGHT SIDEBAR (SMALLER) ----------*/
.layout2colb .column.first {width: 74.9%}
.layout2colb .column.last {width: 23%}

/* -------------------- RIGHT MAIN W LEFT SIDEBAR ----------------------------*/
.layout2colc .column.first {width: 32%}
.layout2colc .column.last {width: 66%}

/* ------------------ RIGHT MAIN W LEFT SIDEBAR (SMALLER) -------------*/
.layout2cold .column.first {width: 23%}
.layout2cold .column.last {width: 74.9%}

/* ------------------ LARGE LEFT W RIGHT SIDEBAR (SMALLEST) ----------*/
.layout2cole .column.first {width: 79%}
.layout2cole .column.last {width: 19%}

/* ----------------- LARGE RIGHT W LEFT SIDEBAR (SMALLEST) -------------*/
.layout2colf .column.first {width: 19%}
.layout2colf .column.last {width: 79%}
/* ----------------------------------------------------------------------*/

/* ------------------- 3-COLUMN (EQUAL SIZE) ---------------*/
.layout3col .column {width: 32%; margin-left: 2%}
.layout2col .layout3col .column {width: 31%}
/* ----------------------------------------------------------------------*/
/* ------ 3-COLUMN (CENTER MAIN WITH SIDEBARS BOTH SIDES) ------*/
.layout3cola .column {width: 58%; margin-left: 2%}
.layout3cola .column.first,
.layout3cola .column.last {width: 19%}
/* ----------------------------------------------------------------------*/

/* ------------------- 4-COLUMN (EQUAL SIZE) ---------------*/
.layout4col .column {width: 23%; margin-left: 3%}
/* ----------------------------------------------------------------------*/

/* ------------------- 5-COLUMN (EQUAL SIZE) ---------------*/
.layout5col .column {width: 18%; margin-left: 2%; margin-bottom: .5em}
/* ----------------------------------------------------------------------*/

/* ------------------- 6-COLUMN (EQUAL SIZE) ---------------*/
.layout6col .column {width: 15%; margin-left: 2%; margin-bottom: .5em}
/* ----------------------------------------------------------------------*/

.layout2cola .column.first {width:680px}
.layout2cola .column.last {width:223px}

.layout2colc .column.first {width:223px}
.layout2colc .column.last {width:680px}

.layout2colc .layout2col .column {width:336px; display:inline}
.layout2colc .layout3col .column {width:195px; margin-right:26px}

/* ----------------GENERAL COLUMN LAYOUT CONSTRAINTS ---------------*/

.column.first, .column.last {margin-left: 0 !important}
.column.last {float: right !important}

.column.black { width: 48.5%; background: #000; padding: 4px; border: solid 1px #06f}

p.last, ul.last, ol.last, li.last {_width:auto !important; _float:none !important}

/* ----------------------------------------------------------------------*/
/* ----------------------------------- (GLOBAL NAV CSS begins here) -----------------------------------*/
/* ----------------------------------------------------------------------*/

/* GLOBALNAV */
#globalnav {width: auto; height: auto; margin: 0 auto; position: relative; z-index: 9998}

/* ----------------------------------------------------------------------*/
/* ————————— DROP-DOWN MENU -----------------*/
/* ----------------------------------------------------------------------*/

.gnavmc .gnavdivider {display:block; font-size:1px; border-width:0px;border-style:solid;position:relative;z-index:1}

.gnavmc .gnavdividery {float:left; width:0px}

.gnavmc .gnavtitle {display:block; cursor:default; white-space:nowrap; position:relative; z-index:1}

.gnavclear {font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none !important}

.gnavmc {position:relative; zoom:1;z-index:10}

.gnavmc a, .gnavmc li {float:left; display: block; white-space:nowrap;position:relative; z-index:1}

.gnavmc div a, .gnavmc ul a, .gnavmc ul li {float:none}

.gnavsh div a {float:left}

.gnavmc div {visibility:hidden;position:absolute}

.gnavmc .gnavcbox {cursor:default; display:block; position:relative; z-index:1}

.gnavmc .gnavcbox a {display:inline}

.gnavmc .gnavcbox div {float:none; position:static; visibility: inherit;left:auto}

.gnavmc li {z-index:auto}

.gnavmc ul {left:-10000px; position:absolute; z-index:10}

.gnavmc, .gnavmc ul {list-style:none; padding:0px; margin:0px}

.gnavmc li a {float:none}

.gnavmc li:hover>ul {left:auto}

#gnav0 ul {top:100%}

#gnav0 ul li:hover>ul {top:0px;left:100%}

/* -------------------- MENU CONTAINER -----------------*/
#gnav0 {width:auto; padding: 5px 20px; margin:0px;
	background: #666; border-style: none; border-radius: 10px}

/* -------------------- MAIN ITEMS -----------------*/
#gnav0 a {padding:3px 30px 3px 3px; margin:0px 20px 0px 0px; background-color: transparent; color:#fff; font-family:Arial; font-size:12px; text-decoration:none}

/* -------------------- MAIN HOVER STATE -----------------*/
#gnav0 a:hover {color:#ff0000; border-color:#000}

/* -------------------- MAIN HOVER STATE -----------------*/
#gnav0 li:hover>a {color:#00ffff; border-color:#000}

/* -------------------- MAIN ACTIVE STATE -----------------*/
body #gnav0 .gnavactive, body #gnav0 .gnavactive:hover {color:#00ff00; border-color:#000}

/* -------------------- SUB CONTAINER -----------------*/
#gnav0 div, #gnav0 ul {padding:15px;background: #ddd; color: #300; background-image:url(../media/00_primary/gnavimages/transparent_light_gradient.png); background-repeat: repeat-y;  border-width:1px;border-style:solid;border-color:#900}

/* -------------------- SUB ITEMS -----------------*/
#gnav0 div a, #gnav0 ul a {padding:3px 20px 3px 5px; margin:0px; color:#000; border-width:0px; border-color:#93f}

/* -------------------- SUB HOVER STATE -----------------*/
#gnav0 div a:hover {color:#000; text-decoration:underline}

/* -------------------- SUB HOVER STATE -----------------*/
#gnav0 ul li:hover>a {color:#ff0000; text-decoration:underline}

/* -------------------- SUB ACTIVE STATE -----------------*/
body #gnav0 div .gnavactive, body #gnav0 div .gnavactive:hover {color:#00fc2b;text-decoration:underline}

/* -------------------- SUB TITLES -----------------*/	
#gnav0 .gnavtitle {margin:2px 5px 5px 5px; color:#333; font-family:Arial; font-size:12px; font-weight:bold; color:##008383}

/* -------------------- HORIZONTAL DIVIDERS -----------------*/
#gnav0 .gnavdividerx {border-top-width:1px; margin:4px 5px 4px 5px; border-color:#f90}

/* -------------------- ARROW GRAPHICS -----------------*/
ul#gnav0 li .gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_03.png);background-repeat:no-repeat;background-position:90% 50%}

/* -------------------- ARROW GRAPHICS -----------------*/
ul#gnav0 li:hover > a.gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_04.png)}

/* -------------------- ARROW GRAPHICS -----------------*/
ul#gnav0 ul li .gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_01.png)}

/* -------------------- ARROW GRAPHICS -----------------*/
ul#gnav0 ul li:hover > a.gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_02.png)}

/* ----------------------------------------------------------------------*/
/——————-——— LOCAL NAV ————————————/
/* ----------------------------------------------------------------------*/

.localnav {border-bottom: 1 px solid #000}

.main .localnav {padding:1em 0 .2em; border-bottom: 1px solid #000}

.main .localnav h1 {font-size: 16px; width: 48px; height: 24px; float: left; margin: 0 0 .1em 8px; color: #222}

.main .localnav h1 a {display: block; width:48px; height: 24px; color: #858585; font-weight: normal; text-decoration: none; text-indent: -99999px}

.main .localnav ul {float: right; margin: 0 -.3em; padding: 0 0 1px}

.main .localnav ul li {display: inline; margin: 0; padding: 0}

.main .localnav ul li a {float: left; margin: .5em 1em 0; padding: 0; color: #0000ff; text-decoration: none}

.main .localnav ul li a.activelink {float: left; margin: .5em 1em 0; padding: 0; color: #00cc00; text-decoration: none}

.main .localnav ul li a:hover {color: #ff6600}

/* --------------------------- FOOTER ------------------------------*/

#footer {width: auto; margin: 0px auto; text-align: center; font-size: 14px; color: #6e6e6e}
#footer a {margin: 0 2px; text-decoration: none}
#footer a:hover {text-decoration: none}
#footer p.left {width: 50%; float: left; text-align: left; text-indent: 10px}
#footer p.right {width: 50%; float: right}
#footer p.links {border: 1px solid #666; border-width: 1px 0; padding: .5em 0; margin: 1.5em 0 2em}

/* —————————— FINAL ————————————*/

.final {background: transparent; clear: both; position: relative}

/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* PRINT */
/* ----------------------------------------------------------------------*/
@media print {
	body, .main, ,content{color:#000 !important}
	a, a:link, a:visited {color:#000 !important; text-decoration:none !important}
	#tabs, #globalheader, .noprint, .hide {display: none !important}
	.main a.pdf {padding-left: 0 !important; background-image: none !important}
}

/* ----------------------------------------------------------------------*/
/* -------------------------- "LIGHTBOX" Image Display -----------------------------*/
/* ----------------------------------------------------------------------*/

/* Preload images */
body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
