@import url(https://fonts.googleapis.com/css?family=Exo&display=swap);



* {

    box-sizing: border-box;

    outline: none !important

}



h1, p {

    margin: 0;

    padding: 0

}



body {

    background-color: #000;

    margin: 0;

    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;

    letter-spacing: 1px;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    height: 100vh

}



a {

    color: #fff;

    text-decoration: none

}



.row {

    display: flex

}



@keyframes move-twink-back {

    0% {

        background-position: 0 0

    }



    to {

        background-position: -10000px 5000px

    }

}



@-webkit-keyframes move-twink-back {

    0% {

        background-position: 0 0

    }



    to {

        background-position: -10000px 5000px

    }

}



@keyframes move-clouds-back {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 10000px 0

    }

}



@-webkit-keyframes move-clouds-back {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 10000px 0

    }

}



.main {

    position: absolute;

    z-index: 3;

    height: 100vh;

    max-height: 100vh;

    width: 100vw;

    max-width: 100vw;

    background: transparent url(../img/background.png) no-repeat;

    background-size: cover;

    background-position: 50% bottom;

    overflow: hidden

}



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

    .main {

        background-image: none

    }

}



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

    .main {

        background-position: bottom

    }

}



.content-wrapper {

    position: absolute;

    top: 0;

    z-index: 4;

    width: 45%;

    max-width: 760px;

    height: 100vh;

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    background-color: rgba(0,0,0,.6);

    padding: 2% 20px 1% 40px;

    border-right: 1px solid #000

}



@media screen and (min-width:768px) and (max-width:1366px) {

    .content-wrapper {

        width: 90vw

    }

}



@media screen and (min-width:320px) and (max-width:767px) {

    .content-wrapper {

        width: 100%;

        background: transparent;

        padding: 2% 30px 1%

    }

}



.content-wrapper .header img {

    width: 300px

}



@media screen and (min-width:320px) and (max-width:1024px) {

    .content-wrapper .header img {

        width: 250px

    }

}



.content-wrapper .content {

    color: #fff;

    font-size: 40px

}



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

    .content-wrapper .content {

        font-size: 40px

    }

}



.content-wrapper .content .type-wrap {

    align-items: center;

    color: #fff;

    font-family: Exo,sans-serif;

    text-transform: uppercase

}



    .content-wrapper .content .type-wrap span span {

        color: #00a1ff

    }



@media screen and (min-width:320px) and (max-width:1024px) {

    .content-wrapper .content .type-wrap {

        width: 100%

    }

}



.content-wrapper .content .text-wrapper {

    padding-right: 10px;

    margin-top: 10px

}



    .content-wrapper .content .text-wrapper .text {

        line-height: 22px;

        text-transform: none

    }



@media screen and (min-width:320px) and (max-width:1024px) {

    .content-wrapper .content .text-wrapper .text {

        width: 100%

    }

}



.content-wrapper .content .text-wrapper .text p {

    font-size: 18px

}



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

    .content-wrapper .content .text-wrapper .text p {

        font-size: 14px

    }

}



.content-wrapper .footer {

    width: 300px;

    color: #fff

}



    .content-wrapper .footer p {

        display: block;

        -webkit-margin-before: 1em;

        margin-block-start: 1em;

        -webkit-margin-after: 1em;

        margin-block-end: 1em;

        -webkit-margin-start: 0;

        margin-inline-start: 0;

        -webkit-margin-end: 0;

        margin-inline-end: 0;

        font-size: .9em;

        margin: 0 0 10px

    }



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

    .content-wrapper .footer p {

        font-size: .7em

    }

}



.content-wrapper .footer .social-container {

    margin-bottom: 10px

}



    .content-wrapper .footer .social-container .social-icon {

        cursor: pointer;

        margin-right: 10px;

        width: 20px

    }



.content-wrapper .footer hr {

    width: 100%;

    text-align: left;

    height: 0;

    display: inline-block;

    margin: 0 0 20px;

    border: 0;

    border-top: 1px solid #eee;

    box-sizing: content-box;

    unicode-bidi: -webkit-isolate;

    unicode-bidi: -moz-isolate;

    unicode-bidi: isolate;

    -webkit-margin-start: auto;

    margin-inline-start: auto;

    -webkit-margin-end: auto;

    margin-inline-end: auto;

    overflow: hidden

}



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

    .content-wrapper .footer hr {

        margin: 10px 0

    }

}



.clouds, .stars, .twinkling {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    display: block

}



.stars {

    background: #000 url(../img/stars.png) repeat top;

    z-index: 0

}



.twinkling {

    background: transparent url(../img/twinkling.png) repeat top;

    z-index: 1;

    -webkit-animation: move-twink-back 200s linear infinite;

    animation: move-twink-back 200s linear infinite

}



.clouds {

    background: transparent url(../img/clouds.png) repeat-x top;

    z-index: 3;

    -webkit-animation: move-clouds-back 400s linear infinite;

    animation: move-clouds-back 400s linear infinite

}



.typewriter div {

    overflow: hidden; /* Ensures the content is not revealed until the animation */

    /*border-right: .15em solid orange;*/ /* The typwriter cursor */

    white-space: nowrap; /* Keeps the content on a single line */

    margin: 0 auto; /* Gives that scrolling effect as the typing happens */

    /*letter-spacing: .15em;*/ /* Adjust as needed */

    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;

}



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

    .typewriter div {

        white-space: normal;

    }

}



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

    .typewriter div {

        white-space: normal;

    }

}



/* The typing effect */

@keyframes typing {

    from {

        width: 0

    }



    to {

        width: 100%

    }

}



/* The typewriter cursor effect */

@keyframes blink-caret {

    from, to {

        border-color: transparent

    }



    50% {

        border-color: orange;

    }

}



.text-center {

    text-align: center;

}



.button-div {

    text-align:center;

    font-size: initial;

}



.button {

    transition: all .5s ease;

    color: #fff;

    border: 3px solid white;

    font-family: 'Montserrat', sans-serif;

    text-transform: uppercase;

    text-align: center;

    line-height: 1;

    font-size: 14px;

    background-color: transparent;

    padding: 10px;

    outline: none;

    border-radius: 4px;

    display: inline-block;

    margin-top: 10px;

    margin-bottom: 10px;

}



    .button:hover {

        color: #001F3F;

        background-color: #fff;

    }



.divider {

    color: #ccc;

    width: 70%;

    margin: 20px auto;

    overflow: hidden;

    text-align: center;

    line-height: 1.2em;

}



    .divider:before, .divider:after {

        content: "";

        vertical-align: middle;

        display: inline-block;

        width: 50%;

        border-bottom: 2px dotted #ccc;

        margin: 0 2% 0 -55%;

    }



    .divider:after {

        margin: 0 -55% 0 2%;

    }