body, html { background-color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; margin: 0px; min-height: 100%; overflow-x: hidden; padding: 0px; }
a:hover, a:focus { transition: .2s; text-decoration: none; }
.container { padding: 0; }
.row { margin: 0; }
/* .row > div { padding: 0 1.5% 12px; } */

h1,h2,h3,h4,h5,h6 { margin: 0; font-family: 'Open Sans', sans-serif;}
h2 {color: #026CB6; margin-bottom: 20px;}
h3 { font-family: 'Myriad Pro'; background-color: #026CB6; color: #fff; font-size: 22px; font-weight: 700; margin: 10px 0; margin-left: 0; padding: 8px 16px; border-radius: 4px; line-height: normal;}
h4 {color: #333; font-size: 18px; font-weight: bold; font-style: uppercase; margin-bottom: 10px;}
p { line-height: 1.6em; margin: 1.2rem 0;}



/* Modal Window */
/* #popup {display: none;} */
#popup { height: 100%; left: 0; opacity: 0; overflow-y: scroll; position: fixed; top: -100%; transition: opacity .1s, top 0s; width: 100%; z-index: 4; }
#popup > span { background-color: rgba(43, 87, 99,.95); height: 145%; left: 0; position: absolute; top: 0; width: 100%; }
#popup > span > span { color: #fff; cursor: pointer; font-size: 3em; line-height: .6em; padding: 12px 16px; position: absolute; right: 0; top: 0; }
#popup > div { background-color: #fff; box-shadow: 0 14px 9px -6px rgb(54,54,54); left: 14%; position: absolute; text-align: center; top: 60px; width: 70%; border-radius:20px; }
#popup > div > img { margin-top: -1px; width: 100%; }
#popup .top-inst { background-color: #0066B3; border-radius: 20px 20px 0px 0px; width: 100%; padding: 0; margin: 0;}
#popup .top-inst img { width: 100%; padding: 15px;}

#popup.showing { opacity: 1; top: 0; }
#popup .instructions { color: #0066B3; padding: 0px; margin-left: 10%; margin-right: 10%; }
#popup h1 { color: #0066B3; text-align: center; font-family: 'Myriad Pro'; font-style: normal;font-weight: 700; font-size: 60px; line-height: 72px; margin: 15px auto; position: relative; left: 0;}
#popup .instructions img { width: 100%; margin: 25px auto 0; }

#popup .instructions p { width: 88%; margin: 20px auto; padding-left: 0;}
#popup .instructions p a.button { float: right; margin-bottom: 50px;}
#popup .instructions .arrow {margin: 25px auto; width: 75%;}
#popup .instructions .arrow p {display: inline-block;  vertical-align: middle; margin: 0; padding-left: 5px;}
#popup .instructions .arrow img {display: inline-block; width: 7%; margin: 0;}
#popup h2 { font-size: 25px; text-transform: uppercase; color: #333; margin: 15px 0; display: block;}
#popup p a {font-weight:bold;}
#popup p {color: #333; font-size: 20px;}

/* LEFT MENU */
#skipcontent { background-color: #fff; border: 1px inset #aaa; border-radius: 8px; box-shadow: 2px 2px 8px 0 #333; color: #000; font-size: 1.4em; font-weight: 700; left: -9999px; padding: 6px 14px; position: absolute; top: -9999px; }
#skipcontent:focus { left: 8px; top: 8px; }



/* MEDIA QUERIES */


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

    #popup h1 { font-size: 30px; line-height: 40px; margin: 15px auto; position: relative; left: 0;}
    #popup .instructions { margin-left: 10%; margin-right: 10%; }
    #popup .instructions img { margin: 25px 0 0; }
    #popup .instructions p {margin: 20px auto; width: 100%;}
    #popup .instructions p a.button {float: none;}
    #popup .instructions .arrow img {width: 10%;}
    #popup > div > img.top { margin-top: -6px; }
    #popup p { margin-top: 5px; }

}


@media screen and (max-width: 420px) {
    #popup > div {width: 85%; left: 8%;}
    #popup .instructions { margin-left: 3%; margin-right: 3%; }
}