* {box-sizing:border-box;margin:0;padding:0;}
a {text-decoration:none;color:#fff;font-size:1.3rem;font-weight:500; font-family: "museo-sans",sans-serif;}
.cyan {background-color:rgb(0,174,239);color:rgb(35,31,32);}
.magenta {background-color:rgb(236,0,140);color:rgb(35,31,32);}
.yellow {background-color:rgb(255,242,0);color:rgb(35,31,32);}
.black {background-color:rgb(35,31,32);color:rgb(255,255,255);}
html {font-size:62.5%;}
body { font-family: "museo-sans",sans-serif;}
#page-wrapper {width:100%;max-width:120rem;margin:0 auto;/*background-color:rgba(255,255,255,0.7);*/padding:1rem;}
header {width:100%;padding:1rem 0;overflow:hidden;}
#logo {width:33%;float:left;padding:0 1rem;}
#logo img {max-width:100%;height:auto;}
nav#main {width:67%;float:left;padding:0 1rem 1rem 1rem;}
nav#main ul {list-style-type: none;width:100%;float:right;text-align:right;}
nav#main ul li {display:inline-block;padding:0 1rem;}
nav#main ul li a {display:block;padding:1rem 0.3rem;text-align:center;width:8rem;height:8rem;border-radius:16rem;line-height:6rem;box-shadow:0.3rem 0.3rem 0.3rem rgba(0,0,0,0.19);}
nav#sub {width:100%;float:left;padding:0.5rem;box-shadow:0.3rem 0.3rem 0.3rem rgba(0,0,0,0.19);}
nav#sub ul {list-style-type: none;width:100%;overflow:hidden;}
nav#sub ul li {display:block;padding:0rem;width:25%;float:left;height:3.5rem;}
nav#sub ul li a {display:block;padding:1rem;text-align:center;width:100%;line-height:1.5rem;height:3.5rem;}
nav#sub.cyan ul li a {color:#231f20;}
nav#sub.magenta ul li a {color:#231f20;}
nav#sub.yellow ul li a {color:#231f20;}
nav#sub ul li a:hover {border-bottom:0.3rem solid #231f20;}
nav#sub.black ul li a:hover {border-bottom:0.3rem solid #fff;}
main {padding:5rem 1rem;/*background-color:rgba(255,255,255,0.38);*/}

h1 {font-size:2.4rem;font-family: "museo-sans",sans-serif;line-height:2.4rem;margin-bottom:2.4rem;}
h2 {font-size:2.1rem;font-family: "museo-sans",sans-serif;line-height:2.4rem;margin-bottom:2.4rem;}
h3 {font-size:1.8rem;font-family: "museo-sans",sans-serif;line-height:2.4rem;margin-bottom:2.4rem;}
p {font-size:1.4rem;line-height:1.9rem;font-family: "museo-sans",sans-serif;margin-bottom:1.9rem;}


#logo {width:23rem;}




@media all and (min-width:768px){
#logo {width:42%;}
nav#main {width:58%;}
}

@media all and (min-width:800px){
#logo {width:42%;}
nav#main {width:58%;}
}
@media all and (min-width:960px){
#logo {width:37%;}
nav#main {width:63%;}
}

@media all and (min-width:1024px){
#logo {width:35%;}
nav#main {width:65%;}
}

@media all and (min-width:1150px){
#logo {width:34%;}
nav#main {width:66%;}
}

@media all and (min-width:1280px){
#logo {width:33%;}
nav#main {width:67%;}
}


/* Mobile Menu Styles */
 #main, #sub { display: none }

.hamburger-icon { height: 0.8rem; width: 4rem; background-color:  rgb(236,0,140); position: relative; top: 1.3rem; float: right; border-radius:2rem; }
.hamburger-icon:after, .hamburger-icon:before { content: ' '; height: 0.8rem; width: 4rem;  position: absolute; border-radius:2rem; }
.hamburger-icon:after { top: 1.3rem;background-color:rgb(255,242,0); }
.hamburger-icon:before { bottom: 1.3rem;  background-color:rgb(0,174,239);}

.mobile-menu { display: block; }
.mobile-menu ul#mobile { list-style-type: none; margin-left: 0px; clear:both;margin-top:2rem;  }
.mobile-menu ul#mobile li a{ background-color:rgb(35,31,32);padding:0.5rem 0.5rem 0.5rem 1rem; }
.mobile-menu li { margin-bottom: 0 }
.mobile-menu ul#mobile ul.subs {margin:0.3rem;box-shadow:0.2rem 0.2rem 0.2rem rgba(0,0,0,0.19);}
.mobile-menu ul#mobile ul.subs a { padding: 0.8rem 0 0.8rem 2rem; font-size: 1.3rem; border-bottom:0.1rem solid rgba(0,0,0,0.19); }
.mobile-menu ul#mobile ul.subs.cyan a { background-color:rgb(0,174,239);color:rgb(35,31,32); }
.mobile-menu ul#mobile ul.subs.magenta a { background-color:rgb(236,0,140);color:rgb(35,31,32); } 
.mobile-menu ul#mobile ul.subs.yellow a  { background-color:rgb(255,242,0);color:rgb(35,31,32); }
.mobile-menu ul#mobile ul.subs.black a  { background-color:rgb(35,31,32);color:rgb(255,255,255); }
.mobile-menu a { display: block;  text-decoration: none;  }
.mobile-menu > ul { display: none }
ul.subs {display:block !important;}

.mobile-menu-button { padding: 1rem; text-transform: uppercase; cursor: pointer; font-size: 17px; background-color: rgb(35,31,32);overflow:hidden;height:5.5rem;width:6rem;border-radius:1rem;
    box-shadow:0.3rem 0.3rem 0.3rem rgba(0,0,0,0.19);float:right;margin-right:1rem; margin-bottom:1rem;}

@media all and (min-width:768px) {
    .mobile-menu { display: none }
    #main, #sub {display:block;}
}

/* Page Fade */
body {-webkit-animation: fadein 1.41s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.41s; /* Firefox < 16 */
        -ms-animation: fadein 1.41s; /* Internet Explorer */
         -o-animation: fadein 1.41s; /* Opera < 12.1 */
            animation: fadein 1.41s;
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}