@charset "UTF-8";

@font-face {
    font-family: 'archery_black_roundedregular';
    src: url('../fonts/archery/archblr-webfont.woff2') format('woff2'),
         url('../fonts/archery/archblr-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {background: #21153b  url(../img/bgs/main-bg.jpg) top center no-repeat; background-size: 100%;}
.navbar-dark .navbar-brand img {width: 50%;}
.display-1 {font-family: 'archery_black_roundedregular'; font-size: 6rem!important; text-transform: uppercase;}
.hero-banner {padding-bottom: 45%!important;}
.bg-dark {background-color: #21153b !important;}

.sub-head {color: #FFAE1E!important;}
.text-shadow {text-shadow: 1px 1px 3px #372677;}

.icon-list.bullet-soft-primary.bullet-bg .completed  {text-decoration:line-through;}
.icon-list.bullet-soft-primary.bullet-bg .completed i {background-color: green!important; color: white!important;}

#roadmap {background: #21153b  url(../img/bgs/bg-middle.jpg) center no-repeat; background-size: 100%;}
.stars-bg {background: #21153b url(../img/bgs/bg-stars.jpg) top center no-repeat; background-size: 100%;}
.box-constellation {background: #fff url(../img/bgs/bg-cons.png) top center no-repeat; border-radius: 5px; background-size: 100%;}
.box-constellation h4 {color: #442C8C !important;}

.box-constellation-a {background: #fff url(../img/bgs/bg-cons1.png) bottom center no-repeat; border-radius: 5px; background-size: 100%;}
.box-constellation-a h4 {color:#ed7e24!important}

.offcanvas-header img {max-width: 60%!important;}

@media (min-width: 360px){
    .display-1 {font-size: 5em!important; letter-spacing: 2px!important; font-weight: normal!important;}
    body{background-size: 130%;}
    .hero-banner {padding-top: 60%!important;}
    .navbar-dark .navbar-brand img {width: 70%!important;}
}

@media (min-width: 516px){

.offcanvas-header img {max-width: 50%; height: auto;}
.hero-banner {padding-top: 60%!important; padding-bottom:10%!Important}
body{background-size: 130%;}


}

@media (min-width: 992px) {
    .hero-banner {padding-top: 65%!important; padding-bottom: 15%!important;}
    body{background-position: top -200px;}
}

@media (min-width: 1440px){
    .hero-banner {padding-bottom: 45%!important; padding-top: 5%!important;}
    body{background-position: top center;}
    .display-1 {font-size: 6rem!important;
}

@media (min-width: 1920px){
    .hero-banner {padding-bottom: 35%!important; padding-top: 5%!important;}
    body{background-size: 90%;}
    .display-1 {font-size: 6rem!important;
}