@import "https://fonts.adobe.com/fonts/kallisto";
@import "fonts/AkzidenzGrotesk-Bold.otf";
@import "fonts/AkzidenzGrotesk-Light.otf";
/* @charset "UTF-8";


*/


.intro::after {
    z-index: 101;
    position:fixed;
    left:-50px;
    content:url(images/2x/cloud2_med.png);   
    opacity: 40%; 

}
body::after {
    z-index: 101;
    position:fixed;
    top: -40px;
    left:200px;
    content:url(images/2x/cloud1_med.png);  
    opacity: 40%;  
    /* width:1745px;
    height:411px; */
}
/*  Mobile */
body {
    font-family: 'Kallisto';
    /* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-weight: normal;
    font-size: 12pt;
   
    color: #ffff;
    background-image: url("images/3x/cosmos@3x.png");
    background-repeat: no-repeat;
    background-color: rgb(20, 2, 59);
    padding-left:5%;
    padding-right:5%;  
    /* /* overflow-x: hidden; */
    
}

h1 {
    font-family: 'Kallisto';
    font-weight: heavy;
    font-size: 100pt;
    margin: 2%;
}

h2 {
    font-family: 'Akzidenz-Grotesk BQ';
    font-size: 32pt;
    padding-left:20%;
}

p {
    font-family: 'Akzidenz-Grotesk BQ Light';
}

.summary {
    font-size: 14pt;
    max-width:40%;
}

.summary p:nth-child(1) {
    font-family: 'Akzidenz-Grotesk BQ';
}

.summary p:nth-child(2) {
    font-style:italic;
    font-family: 'Akzidenz-Grotesk BQ Light';
}

.preamble {
    text-align: right;
    max-width:35%;
    margin-left:auto;
}

.preamble h3 {
    font-size: 36pt;
    font-weight: xbold;
    text-align: right;
    margin: 1%;
}
.explanation {
    max-width:50%;
}

.explanation h3 {
    font-family: 'Kallisto';
    font-size: 34pt;
    margin: 1%;
}

.participation {
    text-align: left;
    max-width: 53%;
    padding-top: 2%;
}

.participation h3 {
    font-family: 'Kallisto';
    font-size: 33pt;
    margin: 1%;
}

.benefits {
    text-align: right;
    max-width:40%;
    margin-left:auto;
}

.benefits h3 {
    font-family: 'Kallisto';
    font-size: 30pt;
    margin: 1%;
}

.requirements {
    text-align: right;
    max-width:40%;
    margin-left:auto;
    padding-top: 2%;
}

.requirements h3 {
    font-family: 'Kallisto';
    font-size: 26pt;
    margin: 1%;
}

footer {
    background-image: url(images/1x/aries.png);
    background-repeat: no-repeat;
    width: 417px;
    height: 211px;
    background-position: center;
    margin-left: 5%;
    text-align: center;
}
footer a:nth-child(1){
    position:relative;
    left:-95px;
}

footer a:nth-child(2){
    position:relative;
    top:70px;
    right:50px;
}
footer a:nth-child(3){
    position:relative;
    top:80px;
    left:40px;
}

footer a:nth-child(4){
    position:relative;
    top:190px;
    left:115px;
}

footer a:nth-child(5){
    position:relative;
    top:95px;
    left:155px;
}

.design-selection {
    background-image: url(images/1x/orion.png);
    background-position: right;
    background-repeat: no-repeat;
    width:675px;
    height:466px;
    padding-top:500px;
    margin-left:40%; 
    overflow: hidden;
    margin-bottom:-200px;
}
.design-selection h3 {
    position:relative;
    bottom:380px;
}

.design-selection li:nth-child(1){
    position:relative;
    bottom:405px;
    left: 80px;
}
.design-selection li:nth-child(2){
    position:relative;
    bottom:375px;
    left: 265px;
}
.design-selection li:nth-child(3){
    position:relative;
    bottom:255px;
    left: 385px;
}
.design-selection li:nth-child(4){
    position:relative;
    bottom:180px;
    left: 350px;
}

.design-selection li:nth-child(5){
    position:relative;
    bottom:30px;
    left: 200px;
}

.design-selection li:nth-child(6){
    position:relative;
    bottom:350px;
    right: 10px;
}

a {
    text-decoration: none;
    color:white;
}

a:hover{
    text-decoration: underline;
}

li {
    list-style-type: none;
}

.select {
    font-weight: normal;
    font-size: 36pt;
    text-align: right;
}

.zen-resources {
    z-index: 100;
    font-size: 14pt;
    font-weight: lighter;
    background-image: url(images/1x/casiopea.png);
    background-repeat: no-repeat;
    width: 436px; 
    height: 472px; 
    margin-left: 10%;
    margin-top: 185px;
    padding-bottom: 10%;
}

.zen-resources h3 {
    font-family: Kallisto;
    font-weight: normal;
    font-size: 30pt;
    position: relative;
    bottom: 110px;
}


.zen-resources ul li:nth-child(1){
    position: relative;
    right: 280px;
    bottom: 110px;
}

.zen-resources ul li:nth-child(2){
    position: relative;
    left: 370px;
    top: 75px;
}

.zen-resources ul li:nth-child(3){
    position: relative;
    left: 405px;
    top: 205px;
}

.zen-resources ul li:nth-child(4){
    position: relative;
    left: 370px;
    top: 272px;
}
.css-resources {
    z-index: 50;
    margin-left:70%;
}

.design-archives {
    text-align: right;
}

.archives {
    font-family: Kallisto;
    font-weight: normal;
    font-size: 34pt;
    margin-left:auto;
    padding-top: 1%;
}

.next {
    font-size: 24pt;
    font-weight: lighter;
    margin-left:auto;
    padding-right:15%;
    /* margin-left: 19em;
    padding: 0em 5em 0em 0em; */
}

.previous {
    font-size: 24pt;
    font-weight: lighter;
    margin-left:auto;
    padding-right:25%;
    padding-top: 1%;
    /* margin-left: 16em; */
    /* padding: 1em 6em 0em 0em; */
}

.viewall {
    font-size: 24pt;
    font-weight: lighter;
    margin-left:auto;
    padding-right:35%;
    padding-top: 1%;
    /* margin-left: 12em; */
    /* padding: 2em 11em 0em 0em; */
}

.requirements p {
    text-align: right;
}


/*  Desktop 
@media screen and (min-width: 1366px) */