.all-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
p {
  text-align: justify;
}
.bottom-0 {
  bottom: 0;
}
.overflow-auto {
  overflow: auto;
}

a {
    color:rgb(192 176 255);
    text-decoration:none;
}

a:visited {
    color:rgb(192 176 255);   
}

a:hover {
    color:rgb(218 209 255);   
}

a:active {color:white;}











body, html {
    padding:0;
    margin:0;
    background-color:#100e19;
    color:white;
    font-family: TitilliumSemiBold;
    overflow:auto;
    /*height:100%;*/
}

.noscroll {
    overflow: hidden;
}

.noscroll .mainsite {
    padding-right:16px;
}


* {
    box-sizing: border-box;
}

.hide {
    display:none!important;
}

/*.hide {*/
/*    display:none!important;*/
/*}*/

.hand {
    cursor:pointer;
}

.flash {
    animation:flash 0.2s linear 0s 1;
}

@keyframes flash {
    /*0% {opacity: 1; }*/
    /*50% {opacity: 0.2; }*/
    /*100% {opacity: 1; }*/
    0% { color:transparent; }
    100% { color: inherit; }
}

.flash2 {
    animation:flash2 0.4s linear 0s 1;
}

@keyframes flash2 {
    0% { color:transparent; }
    100% { color: inherit; }
}


.flex {
    display:flex;
}

.flex.row {
    flex-direction:row;
    align-items:center;
    justify-content:center;
    width:100%;
}

.flex.col {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    width:100%;
}

.flex.row.buy {
    min-height:45%;
    width:calc(100% + 40px);
}

/*.flex.col.start,*/
/*.flex.row.start {*/
/*    justify-content:flex-start;*/
/*}*/

/*.flex.col.end,*/
/*.flex.row.end {*/
/*    justify-content:flex-end;*/
/*}*/

.f1 {
    flex:1;
}

.f2 {
    flex:2;
}

.f3 {
    flex:3;
}

.f4 {
    flex:4;
}

.f5 {
    flex:5;
}

.f6 {
    flex:6;
}

.f7 {
    flex:7;
}

.f8 {
    flex:8;
}

.f9 {
    flex:9;
}

.f10 {
    flex:10;
}

.flex.lightup .flex:nth-child(1) {
    background-color:rgb(255 0 0 / 0.5);
}
.flex.lightup .flex:nth-child(2) {
    background-color:rgb(0 255  0 / 0.5);
}
.flex.lightup .flex:nth-child(3) {
    background-color:rgb(0 0 255 / 0.5);
}
.flex.lightup .flex:nth-child(4) {
    background-color:rgb(255 255 0 / 0.5);
}





.wrappa {
    position:absolute;
    z-index:2;
    top:0px;
    left:0px;
    /*height:100%;*/
    padding-top:40px;
    width:100%;
    padding:0% 2%;
    display:flex;
    flex-direction:row;
}


body > .low {
    position:fixed;
    width:100%;
    bottom:0px;
    height:20%;
    background-color:#1e1a2b;
    /*z-index:0;*/
}

input[type="text"]#hasheesh {
    -webkit-appearance:none!important;
    color:red;
    text-align:right;
    width:75px;
    border:1px solid gray;
    border-left:0px;
    margin:0 0 0 -7px;
    background:white;
}
input[type="text"] #hasheesh {
    -webkit-appearance:none!important;
    border:1px solid gray;
    border-right:0px;
    outline:none;
}

.menu.mobile {
    position:absolute;
    right:4px;
    top:2px;
    width:9%;
    height:77%;
    display:none;
}
.menu.mobile:hover {
    cursor:pointer;
}

.menu.mobile:hover .ham {
    background-color:rgb(250 198 255);
}

.ham {
    position: absolute;
    right: 10%;
    width: 80%;
    max-width: 50px;
    height: 4px;
    border-radius: 2px;
    background-color: white;
    transition:0.25s;
}

.burger1 {
    top:20%;
}

.burger2 {
    top:50%;
}

.burger3 {
    top:80%;
}

.menu.desktop {
    position: absolute;
    top: 120%;
    font-size: 16px;
    width: 100%;
    text-align: center;
    line-height: 32px;
    min-width:54px;
}

.debounce .logo {
    transition:0.25s;
}

.debounce .logo:hover {
    cursor:pointer;
    opacity:0.67;
}

.menu.desktop ul {
    list-style-type:none;
    padding:0;
    margin:0;
}

.menu.desktop ul li {
    position:relative;
    margin:6px;
    transform:skewX(-20deg);
}

.menu.desktop ul li:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0%;
    left:-20%;
    width:140%;
    height:100%;
    background-color:rgb(170 130 255 / 10%);
    border-radius:7px;
    transition:0.4s;
}

.menu.desktop ul li:hover:before {
    background-color:rgb(170 130 255 / 20%);
}

    
.menu.desktop span {
    transform:skewX(20deg);
}

.menu.desktop a {
    color:rgb(132 103 199);
    transition:0.25s;
}

.menu.desktop a:hover {
    color:rgb(180 153 243);
}





.align.start {
    align-items:flex-start;
}

.justify.start {
    justify-content:flex-start;
}

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

.justify.end {
    justify-content:flex-end;
}

.wrappa .flex.colrow {
    display:flex;
    flex-direction: row;
    align-items:flex-start;
    justify-content:center;
}


.colm {
    /*height:100%;*/
    width: 32%;
    text-align: center;
    display:flex;
    justify-content:center;
    /*align-items:center;*/
}

.colm.left {
    order: 1;
    background-color: rgb(59 60 234 / 0%);
    margin-top:5%;
}

.colm.middle {
    order: 2;
    background-color: rgb(244 56 190 / 0%);
    width:36%;
}

.colm.right {
    order: 3;
    background-color: rgb(56 244 67 / 0%);
    margin-top:5%;
}

.perp {
    width:100%;
    /*background-color:purple;*/
    display: flex;
    /*justify-content:center;*/
    align-items:center;
    flex-direction:column;
    padding:2%;
}

.perp .im {
    width:100%;
    z-index:2;
    position: relative;
}

.perp .im .footage {
    position: relative;
    z-index: 3;
    margin-top: -72.2%;
    width: 99.1%;
    float: left;
    margin-left: 0.5%;
}

.perp .im img {
    width:100%;
    position: relative;
    z-index:3;
}

.perp .im img.deckhand {
    position:absolute;
    z-index:4;
}

.colm.middle .perp .im {
    min-width:320px;
}

.just {
    display: flex;
    flex-direction: column;
    width: 64%;
    margin-top: -200px;
    padding-top: 200px;
    margin-top:-60%;
    padding-top:60%;
    background-color: #2e2a45;
    z-index: 0;
    margin-bottom:60px;
    box-shadow: 30px 30px 48px #00000087;
}

.colm.left .just,
.colm.right .just {
    margin-top:-40%;
    padding-top:42%;
    width:75%;
}

.colm.left .perp .im,
.colm.right .perp .im {
    width:75%;
}

.colm.left .perp {
    align-items:flex-end;
    padding-right:10%;
}
.colm.right .perp {
    align-items:flex-start;
    padding-left:10%;
}

.colm.middle .just {
    min-width:300px;
}

.text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items:center;
    min-height:300px;
    padding-bottom:20px;
}

.features {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    text-align:left;
    max-width: 85%;
    width: 85%;
}

.border {
    border:1px solid transparent;
    transition:0.3s;
    margin:5px 0;
}

.border.on {
    border: 1px solid rgb(76 62 107);
    background-color: rgb(55 50 82 / 85%);
}

.border:hover {
    cursor:pointer;
    background-color: rgb(54 49 78 / 85%);
    filter:brightness(1.05);
}

.border .seemore {
    padding-left:7px;
    opacity:1;
    transition:0.3s;
}

.border .seemore:hover {
    cursor:pointer;
}

.border.on .seemore {
    opacity:0;
}

.feat:before {
    content:"";
    background-image:url('../images/check2.png');
    width:20px;
    height:20px;
    position:absolute;
    left:7px;
    top:7px;
}

.feat.plus:before {
    background-image:url('../images/plus2.png');
}


.head {
    flex: 1;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    padding: 10px 8%;
}

.block {
    padding: 2% 8%;
    text-align: left;
    font-size: 0.85em;
}

.popper {
    bottom: -51px;
    height: 60px;
    width: 85%;
    background-color: orange;
    max-width: 340px;
    margin: auto;
    display: flex;
    /* margin-bottom: -30px; */
    align-items: center;
    justify-content: center;
    background: rgb(225,48,77);
    background: -webkit-linear-gradient(left, rgba(225,48,77,1) 0%, rgba(255,134,3,1) 100%);
    background: -moz-linear-gradient(left, rgba(225,48,77,1) 0%, rgba(255,134,3,1) 100%);
    background: -o-linear-gradient(left, rgba(225,48,77,1) 0%, rgba(255,134,3,1) 100%);
    background: linear-gradient(to right, rgba(225,48,77,1) 0%, rgba(255,134,3,1) 100%);
    background: linear-gradient(to right, rgba(225,48,77,1) 0%, rgb(255, 134, 3) 50%, rgb(255, 46, 76) 100%);
    background-position: 0% 0%;
    background-size: 200% 100%;
    transition-duration: 0.3s;
    cursor: pointer;
    text-shadow: 2px 2px 3px rgb(0 0 0);
    font-size: 18px;
    padding:3px;
    margin: 5% 0 8% 0;
}

.popper:hover {
    background-position: 75% 0%;
}

.feature.stripe {
    width: 100%;
    padding: 10px 0;
    line-height: 30px;
    padding-left: 20%;
    font-size: 26px;
    text-align: left;
    background: linear-gradient(45deg, #4a3c68, #6f59a0);
    margin: 0 0 25px 0;
}

.expand {
    margin: 10px 0;
    margin-top: -35px;
    padding-top: 35px;
    padding-bottom: 0;
    border-top:none;
}

.features .feat {
    flex: 1;
    padding: 7px 10px 7px 36px;
    position: relative;
    min-height:34px;
}

.features .expand .feat:before,
.features .sub.feat:before{
    content:"⦦";
    background-image: none;
    width:20px;
    height:20px;
    position:absolute;
    left:20px;
    line-height:14px;
    /*top:3px;*/
}

.text .features .expand .feat {
    padding-left:25px;
    padding-left:36px;
}

















/* hehe this is clever */
.hex:before {
    content: "";
    width: 0; height: 0;
    border-bottom: 30px solid #778899;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #778899;
    position: relative;
    float: left;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #778899;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}