@import url("font/Montserrat/static/stylesheet.html");

body {
    background-color: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    letter-spacing: 0.3px;
    font-weight: 300;
}
.tee{font-size:17px;}
.hov:hover {
    color: #FF9800;
}

a {
    color: #fff;
    cursor: pointer;
}
.seo{
    color: #4f4f4f;
    font-size: 14px;
	    padding-top: 1200px;
}
.seo a{
	color: #4f4f4f;
}
.seo ul, .seo ol{
	padding-left: 25px
}
.seo h2, .seo h3{
	font-size: 17px;
}
.m-1 {margin: 10px;}
.mt-1{margin-top: 10px;}
.mb-1{margin-bottom: 10px;}
.mr-1{margin-right: 10px;}
.ml-1{margin-left: 10px;}
.m-2 {margin: 20px;}
.mt-2{margin-top: 20px;}
.mb-2{margin-bottom: 20px;}
.mr-2{margin-right: 20px;}
.ml-2{margin-left: 20px;}
.m-3 {margin: 30px;}
.mt-3{margin-top: 30px;}
.mb-3{margin-bottom: 30px;}
.mr-3{margin-right: 30px;}
.ml-3{margin-left: 30px;}
.w-100 {
    width: 100%;
}
.relative {
    position: relative;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.row-end {
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.row-top {
    display: flex;
    position: relative;
    align-items: flex-start;
    width: -webkit-fill-available;
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.row-center {
    align-content: center;
    align-items: center;
}

.row-sb {
    justify-content: space-between;
}

.transition {
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex-direction: column;
}

.f-end {
    align-items: flex-end;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.hidden {
    display: none;
}

.orange {
    color: #FF9800;
}

.grayhref {
    color: #151515;
}

.grey-bg {
    background-color: #151515;
    z-index: 0;
}

.bold {
    font-weight: 800;
}

.upp {
    text-transform: uppercase;
}

@media screen and (min-width: 320px) {
    .container {width: 300px;
        margin: 0px auto;
        height: inherit;
    }

    .f-21-18 {
        font-size: 21px;
    }
    .info .logo .lines {
        font-size: 28px;
    }

    .box {
        padding: 40px 0px 50px;
    }

    .header {
        background-color: #00000070;
    }

    .menu.desctop {
        display: none;
    }
    .mob-center {
        text-align: center;
        width: 100%;
    }

    .banner .img.moriarty{
        height: 390px;
        margin-top: 60px;
    }

    .banner .title {
        font-size: 15px;
    }

    button {
        width: 100%;
    }

    .hidden-on-mobile {
        display: none;
    }

    .row-1\@xs>* {width: 100%;}
    .row-1-2\@xs>* {width: 50%;}
    .row-1-3\@xs>* {width: 33.33%;}
    .row-1-4\@xs>* {width: 25%;}
    .row-1-5\@xs>* {width: 20%;}
    .row-1-6\@xs>* {width: 16.66%;}

    .col-1\@xs {width: 100%;}
    .col-1-2\@xs {width: 50%;}
    .col-1-3\@xs {width: 33.33%;}
    .col-1-4\@xs {width: 25%;}
    .col-1-5\@xs {width: 20%;}
    .col-1-6\@xs {width: 16.66%;}

    h1 {font-size: 62px;}
    h2, .how-to-get div.orange {font-size: 34px;}
    h3 {font-size: 25px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}

}

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

    .container {width: 640px;}



    .row-1\@s>* {width: 100%;}
    .row-1-2\@s>* {width: 50%;}
    .row-1-3\@s>* {width: 33.33%;}
    .row-1-4\@s>* {width: 25%;}
    .row-1-5\@s>* {width: 20%;}
    .row-1-6\@s>* {width: 16.66%;}

    .col-1\@s {width: 100%;}
    .col-1-2\@s {width: 50%;}
    .col-1-3\@s {width: 33.33%;}
    .col-1-4\@s {width: 25%;}
    .col-1-5\@s {width: 20%;}
    .col-1-6\@s {width: 16.66%;}

    h1 {font-size: 37px;}
    h2, .how-to-get div.orange {font-size: 34px;}
    h3 {font-size: 16px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}
}

@media screen and (min-width: 960px) {
    .container {width: 940px;}

    .header {
        background-color: #151515;
    }

    .f-21-18 {
        font-size: 18px;
    }

    .menu.desctop {
        display: flex;
    }

    .menu.mobile {
        display: none;
    }

    .info .logo .lines {
        font-size: 50px;
    }

    .mob-center {
        text-align: left;
        width: fit-content;
    }

    .row-reverse-desctop {
        flex-direction: row-reverse;
    }

    .row-on-desctop {
        display: flex;
        flex-wrap: nowrap;
    }
    button {
		width: 100%;
		margin-top: 50px;
    }

    .banner .img.moriarty{
        height: 700px;
        margin-top: -35px;
    }

    .banner .title {
        font-size: 22px;
        margin-top: -16px;
    }

    .hidden-on-desctop {
        display: none;
    }

    .hidden-on-mobile {
        display: block;
    }

    .box {
        padding: 60px 0px 80px;
    }

    .how-to-get .orange {
        margin-right: 30px;
		font-weight: bold;
    }

    .info .left {
        padding-right: 40px;
    }

    .row-1\@m>* {width: 100%;}
    .row-1-2\@m>* {width: 50%;z-index: 99;}
    .row-1-3\@m>* {width: 33.33%;}
    .row-1-4\@m>* {width: 25%;}
    .row-1-5\@m>* {width: 20%;}
    .row-1-6\@m>* {width: 16.66%;}
    .row-1-7\@m>* {width: 14.28%;}

    .col-1\@m {width: 100%;}
    .col-1-2\@m {width: 50%;}
    .col-1-3\@m {width: 33.33%;}
    .col-1-4\@m {width: 25%;}
    .col-3-4\@m {width: 75%;}
    .col-1-5\@m {width: 20%;}
    .col-1-6\@m {width: 16.66%;}

    .col-2-3\@m {width: 66%;}

    h1 {font-size: 90px;}
    h2, .how-to-get div.orange {font-size: 48px;}
    h3 {font-size: 20px;}
    h4 {font-size: 18px;}
    h5 {font-size: 16px;}

}

@media screen and (min-width: 1280px) {
    .container {width: 1240px;}

    .banner .title {
        font-size: 25px;
    }

    .row-1\@l>* {width: 100%;}
    .row-1-2\@l>* {width: 50%;}
    .row-1-3\@l>* {width: 33.33%;}
    .row-1-4\@l>* {width: 25%;}
    .row-1-5\@l>* {width: 20%;}
    .row-1-6\@l>* {width: 16.66%;}
    .row-1-7\@l>* {width: 14.28%;}

    .col-1\@l {width: 100%;}
    .col-1-2\@l {width: 50%;}
    .col-1-3\@l {width: 33.33%;}
    .col-1-4\@l {width: 25%;}
    .col-1-5\@l {width: 20%;}
    .col-1-6\@l {width: 16.66%;}

    h1 {font-size: 110px;}
    h2, .how-to-get div.orange {font-size: 62px;}
    h3 {font-size: 20px;}
    h4 {font-size: 18px;}
    h5 {font-size: 16px;}

}

#menuToggle span {
    display: block;
    width: 27px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    /* transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease; */
}
 
#menuToggle span:first-child {
    transform-origin: 0% 0%;
}
 
#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}