/*.modals.show {*/
/*    z-index:3;*/
/*}*/

@keyframes show {
    0% { opacity:0; z-index: 3; }
    100% {opacity: 1; z-index:3; }
}

@keyframes hide {
    0% {opacity: 1; z-index:3; }
    100% { opacity:0; z-index: 3; }
}


.darkener {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: -1;
    background-color: rgba(0 0 0 / 80%);
    opacity:0;
    animation: hide 0.3s linear 0s 1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.darkener.on {
    animation: show 0.3s linear 0s 1;
    z-index:3;
    opacity:1;
}



.modals {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: -1;
    background-color: rgba(0 0 0 / 80%);
    opacity:0;
    animation: hide 0.3s linear 0s 1;
    display:flex;
    align-items:center;
    justify-content:center;
    
    /* new */
    /*display:block;*/
}


.modals.on {
    animation: show 0.3s linear 0s 1;
    z-index:3;
    opacity:1;
}

.modal {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 92%;
    height: 92%;
    max-height: 900px;
    max-width: 720px;
    min-height: 600px;
    min-width: 300px;
    border: 3px solid rgb(200 200 200);
    border-radius: 2px;
    background-color: rgb(16 15 23);
    padding: 50px 80px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* animation: hide 0.3s linear 0s 1; */
    
    /* new */
    display: block;
    /*left: calc(50% - 360px);*/
    top: 4%;
    overflow-y: auto;
    min-height: 200px;
}

.modal > .flex.col {
    min-height:600px;
}

.abs {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height:720px;
}

.abs > div {
    flex:1;
}

.buying .summary {
    flex:2;
    text-align: center;
    margin-top: 5px;
    color: rgb(252 212 69);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*font-size:0.9em;*/
}

.customer.pin.secure {
    -webkit-text-security: disc;
    text-security: disc;
}

#smart-button-container {
    z-index:2;
}

#paypal-button-number-1,
#paypal-button-number-2 {
    display:none;
}

.buying {
    /*position: absolute;*/
    /*top:0px;*/
    /*z-index: 6;*/
    background-color: rgb(16 15 23 / 96%);
    background-color: rgb(80 69 152 / 99%);
    background-color: rgb(66 52 128 / 99%);
    background-color: rgb(87 68 165 / 98%);
    /*background-color: rgb(27 22 47 / 99%);*/
    padding:1% 4%;
    animation: hide 0.3s linear 0s 1;
}

.buying.load {
    animation: hide 0s;
}


.modal .flex.col {
    /*padding:20px 0;*/
}

/*.modal > .flex.col {*/
/*    width:100%;*/
/*}*/

.modal.on {
    animation: show 0.3s linear 0s 1;
    z-index:3;
    opacity:1;
}

.modal .kill {
    font-size: 4em;
    position: absolute;
    z-index:5;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 34px;
    font-weight: normal;
    text-align: right;
    transition:0.3s;
    transform-origin: 65% 25%;
    transform-origin: 60% 40%;
}

.modal .kill:hover {
    cursor:pointer;
    transform:scale(1.25);
}

.modal .back {
    font-size: 3.6em;
    position: absolute;
    z-index: 7;
    top: 1%;
    left: 2%;
    height: 50px;
    width: 50px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 10px;
    font-weight: normal;
    text-align: right;
    transition: 0.3s;
    transform-origin: 5% 75%;
}

.modal .back:hover {
    cursor:pointer;
    font-size:4.4em;
    transform:scale(1.25);
}

.modal .slide,
.modal .slider {
    width:100%;
}

.modal.ezdeck .slide {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: transparent;
    background-image: url(https://streamez.net/images/monitor_first_frame_and_hand.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


.modal.static .slide {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: transparent;
    background-image: url(https://streamez.net/images/static_overlay.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal.static > .flex.col {
    padding:20px 0;
    width:70%;
    margin-left: 15%;
}

.modal .buying.flex.col {
    width:100%;
}

.modal.static .flex.row.buy {
    width:100%;
}

.modal.static .flip-card {
    /*padding:6%;*/
}

.modal.static .title {
    width:100%;
}

.modal.static .slide {
    width:100%;
    padding-top:80%;
}

.modal.ezdeck .slide img {
    display:none;
}

.modal .info {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction:column;
    max-height:88%;
    background-color: rgb(47 41 69);
    width:100%;
}

.modal.ezdeck .info {
    padding-top: 400px;
    margin-top: -350px;
    width:70%;
    max-height:none;
    min-height:450px;
}

.modal .info img,
.modal img,
.modal .slide img {
    width:100%;
    /*flex:2;*/
}

.modal .title {
    text-align:center;
    font-size:1.3em;
    /*padding: 30px 0;*/
    line-height: 1em;
    /*flex:1;*/
}

.modal.ezdeck .title {
    /*padding:7px 0;*/
    /*padding: 0 0 10px 0;*/
}

.modal.ezdeck {
    justify-content:flex-start;
    overflow-x:hidden;
}

.modal .featlink {
    color:rgb(252 212 69);
    font-size:0.6em;
    text-decoration:underline;
    padding:2px 0;
    text-align:center;
    /*flex:1;*/
}

.yella {
    color:rgb(252 212 69);
}

.modal .buy.options {
    display:flex;
    flex-direction:row;
    /*width:calc(100% + 80px);*/
    margin-top:10px;
    width:115%;
    /*font-size:0.6em;*/
}

.modal .buy.options .title {
    /*font-size: 2em;*/
}

.modal .buy.options .buy.container {
    /*background-color: rgb(47 41 69);*/
}

.modal .buy.container {
    /*display: flex;*/
    /*flex-direction: row; */
    width: 90%;
    flex: 2;
    /*padding: 4% 10% 15% 10%; */
    /*padding: 2% 5%;*/
    align-items:center;
    justify-content:center;
}

.modal .buy.container.left {
    margin-right:5px;
}

.modal .buy.container.right {
    margin-left:5px;
}

.modal .buy.container .divider {
    width: 100%;
    height: 2px;
    margin: 3% 0;
    background-color: #483f69;
    border-top: 1px solid #1f1f2f;
}

.modal .buy.container .period {
    width: 100%;
    float: left;
    font-size: 1.3em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

.modal .buy.container .price {
    width: 50%;
    float: left;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1em;
    text-align: left;
}

.modal .buy.container .buy.box {
    width:50%;
    float:left;
}

.modal .buy.container .buy.box .perch {
    width: 90%;
    height: auto;
    background-color: rgb(255 196 58);
    color: rgb(0 0 0);
    border-radius: 12px;
    box-shadow: inset 0px 3px 3px rgb(252 227 132);
    text-align: center;
    line-height: 32px;
    font-weight: bold;
    font-family: arial;
    text-shadow: 1px 1px 1px rgb(252 227 132);
    transition: 0.3s;
    margin-left: 10%;
    line-height: 15px;
    padding: 8px;
}

.modal .buy.container .buy.box .perch:hover {
    cursor:pointer;
    box-shadow: inset 0px 3px 3px rgb(255 243 200);
    background-color:rgb(255 206 91);
}

.modal .buying .pay.now:hover {
    cursor:pointer;
    box-shadow: inset 0px 3px 3px rgb(255 243 200);
    background-color:rgb(255 206 91);
}

.modal .pay.now {
    width: 90%;
    height: auto;
    font-size:1.25em;
    background-color: rgb(255 196 58);
    color: rgb(0 0 0);
    border-radius: 12px;
    box-shadow: inset 0px 3px 3px rgb(252 227 132);
    text-align: center;
    line-height: 32px;
    font-weight: bold;
    font-family: arial;
    text-shadow: 1px 1px 1px rgb(252 227 132);
    transition: 0.3s;
    line-height: 15px;
    padding: 12px 8px;
    outline:none;
    border:none;
    max-width:250px;
}

.modal .footer {
    width:120%;
}

.support {
    margin-top:24px;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.support .icon {
    float:left;
}

.support .words {
    float:left;
    /*font-size:0.8em;*/
    margin-left:16px;
}

.words .bold {
    font-weight:bold;
}

.headunder {
    font-size:0.8em;
}

.pp_checkout {
    
}

/*.low {*/
/*    position: relative;*/
/*    z-index:1;*/
/*}*/

.modal.ezdeck .footage {
    margin-top:-71.2%;
    margin-top:-85.2%;
    width:119%;
    margin-left:-9.5%;
}

.modal .top.half {
    width:100%;
    height:50%;
    background-color:rgb(255 0 0 / 30%);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    flex:4;
}
.modal .middle.third {
    width:100%;
    height:40%;
    background-color:rgb(0 255 0 / 30%);
    flex:6;
}
.modal .bottom.eighth {
    width:100%;
    height:10%;
    background-color:rgb(0 0 255 / 30%);
    flex:1;
}

.prup {
    width:70%;
    height:100%;
    background-color:purple;
}

.prup .monitor {
    position:relative;
}

.prup .monitor .slide {
    position:absolute;
    width:130%;
    margin-left:-15%;
}

.prup .monitor .footage {
    position:absolute;
    width:129%;
    margin-left:-14.5%;
    margin-top:2px;
}



/*.buy.form {*/
/*    background-color:red;*/
/*}*/

.frow {
    position:relative;
    width: 70%;
    height: 50px;
    margin:4px 0 16px 0;
    display:flex;
}

.frow.wide {
    width:70%;
    height: auto;
    margin-bottom: 26px;
}

.slanty {
    /*padding: 0px 20px;*/
    position:relative;
    /*background-color:white;*/
    color: #645190;
    width: 100%;
    height: 90%;
    line-height: 50px;
    outline:none;
    display:inline-flex;
    align-items:center;
    /*background-color:rgb(0 0 0 / 38%);*/
    border-radius:6px;
    font-size:22px;
    max-height:50px;
    /*transform:skewX(-16deg);*/
}
    /*clip-path: polygon(4% 7%, 5% 0%, 99% 0%, 100% 5%, 96% 93%, 95% 100%, 0.7% 100%, 0% 92%);*/
    /*clip-path: polygon(4% 10%, 4.4% 6%, 4.9% 3%, 5.5% 1%, 6.5% 0%, 98% 0%, 98.65% 0.48%, 99.25% 1.45%, 99.63% 3.47%, 99.8% 6%, 99.7% 9.5%, 96% 90%, 95.6% 94%, 95.1% 97%, 94.5% 99%, 93.5% 100%, 2% 100%, 1.35% 99.5%, 0.7% 98%, 0.37% 96.53%, 0.2% 94%, 0.3% 90.5%);   */

.slanty {
    transition: width 0.5s, margin-left 0.7s;
}

.slanty input {
    transition:font-size 0.5s;
}

.slanty.nothirds {
    width:0%;
    overflow:hidden;
    margin-left:0!important;
}

.slanty.onethird {
    width:33%;
    /*overflow:hidden;*/
}

.slanty.twothirds {
    width:67%;
}

.slanty.date {
    /*width: calc(70% - 50px);*/
    width: 60%;
    min-width:150px;
}

.slanty .lay {
    position: absolute;
    /* top: -16px; */
    bottom: 54px;
    bottom: calc(100% + 3px);
    /* height: 16px; */
    font-size: 14px;
    line-height: 12px;
    left: 12px;
    color: rgb(212 185 255 / 75%);
    white-space: nowrap;
}

.slanty .lay.right {
    left: unset;
    right: 5px;
    text-align: right;
    white-space: normal;
    max-width: 220px;
}

.slanty .lay.error {
    color: rgb(255 135 135);
    font-size: 12px;
}

.slanty.date input {
    /*background-color:red;*/
    /*-webkit-appearance: none;*/
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*input[type="date"]:before {*/
/*    content: attr(placeholder) !important;*/
/*    color: #aaa;*/
/*    margin-right: 0.5em;*/
/*}*/

/*input[type="date"]:focus:before,*/
/*input[type="date"]:valid:before {*/
/*    content: "";*/
/*}*/

/*.customer.start.date.pseudo_placeholder:before {*/
/*    content: "Start Date"; */
    /*attr(placeholder) !important;*/
/*    color: #aaa;*/
/*    margin-right: 0.5em;*/
/*}*/

/*.customer.start.time.pseudo_placeholder:before {*/
/*    content:"Time";*/
/*    color:#aaa;*/
/*    margin-right:0.5em;*/
/*}*/

.slanty.time {
    width:40%;
}

.slanty + .slanty {
    margin-left:20px;
}

.slanty.small input {
    font-size:18px;
}

.slanty input {
    position: relative;
    width:100%;
    height:90%;
    font-size: 26px;
    outline:none;
    border:none;
    border-radius:6px;
    color: #645190;
    background-color:transparent;
    /*background-color:rgb(0 0 0 / 38%);*/
    color: rgb(169 131 243);
    color: rgb(187 187 187);
    color: rgb(191 168 216);
    padding:0 12px;
    font-style:italic;
    
    /*transform:skewX(16deg);*/
}

.slanty input.hashtag {
    padding-left:26px;
}

.slanty .pre {
    position: absolute;
    left:12px;
    /*font-size:20px;*/
    width: auto;
    /*padding-right: 6px;*/
    /*margin-left:20px;*/
    font-style:italic;
    text-align:center;
    color: rgb(191 168 216);
}

.slanty .post {
    position: relative;
    position:absolute;
    z-index:5;
    /*transform:skewX(16deg);*/
    width: 30px;
    height: 30px;
    /*background-color: red;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7%;
    right:8px;
}

.slanty .post.available {
    background-color: rgb(136 115 226);
    clip-path: polygon(45% 100%, 45% 76%, 23% 54%, 32% 43%, 44% 55%, 67% 26%, 77% 36%, 45% 76%);
}

.slanty .post.active {
    /*border-radius: 50%;*/
}

.slanty .post.available {
    width:40px;
    height:40px;
}

.slanty .post.invalid {
    background-color: rgb(230 61 61);
    background-color: rgb(255 110 110);
    clip-path: polygon(27% 100%, 27% 84%, 17.912% 73.205%, 43.299% 50.769%, 17.397% 26.154%, 27.706% 16.667%, 51.675% 42.308%, 76.804% 16.795%, 86.469% 26.154%, 59.794% 51.026%, 84.407% 75.256%, 74.613% 85%, 51.289% 58.59%, 27% 84%);
}

@-webkit-keyframes anim-glow {
  0% {
    box-shadow: 0 0 #61ef61;
  }
  100% {
    box-shadow: 0 0 10px 8px transparent;
    border-width: 2px;
  }
}
@keyframes anim-glow {
  0% {
    box-shadow: 0 0 #61ef61;
  }
  100% {
    box-shadow: 0 0 10px 8px transparent;
    border-width: 2px;
  }
}

.glowlight {
    display:none;
    border-radius: 50%;
    border: 2px solid #61EF61;
    width: 24px;
    height: 24px;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    -webkit-animation: anim-glow 2s ease infinite;
    animation: anim-glow 2s ease infinite;
}

.glowlight .inner {
    border-radius: 50%;
    border: 2px solid #61EF61;
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: 43px;
    background-color: #61EF61;
}

.slanty .post.active .glowlight {
    display:flex;
}

.slanty .post.expired .glowlight {
    display:flex;
    /*filter: brightness(0.45) grayscale(0.9);*/
    border: 2px solid white;
    opacity: 0.4;
    animation:none;
}

.expired .glowlight .inner {
    border: 2px solid white;
    background-color: white;
}


.slanty .hashtag {
    /*padding-left:20px;*/
    /*width:84%;*/
}

.slanty {
    /*background-color: rgb(0 0 0 / 63%);*/
    /*background-color: rgb(26 5 51 / 63%);*/
    /*background-color: rgb(0 0 0 / 38%);*/
    /*background-color:transparent;*/
}

.slanty .bg {
    position: absolute;
    width:100%;
    height:100%;
    border-radius:6px;
    transform:skewX(-16deg);
    background-color:rgb(0 0 0 / 38%);
    box-shadow:inset 2px 2px 9px rgb(0 0 0 / 85%);
}

.receipt .bg {
    position: relative;
    width: 30%;
    height: 30%;
    min-height: 100px;
    min-width: 100px;
    font-weight: 100!important;
    font-family: arial;
    background-image: url('../images/STREAMEZ LOGO.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    flex: 1;
}

.receipt a,
.receipt a:visited {
    color:rgb(145 190 255);
}

.buying .agree {
    text-align:center;
}

/*.slanty:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index:0;*/
/*    left: -25px;*/
/*    top: 0px;*/
/*    width: 25px;*/
/*    height: 100%;*/
/*    background-image: url(../images/slanty_left.png);*/
/*    background-size: contain;*/
/*    background-repeat:no-repeat;*/
/*    background-position: 100% 50%;*/
/*    opacity: 0.38;*/
/*}*/

/*.slanty:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index:0;*/
/*    left: 100%;*/
/*    top: 0px;*/
/*    width: 25px;*/
/*    height: 100%;*/
/*    background-image: url(../images/slanty_right.png);*/
/*    background-size: contain;*/
/*    background-repeat:no-repeat;*/
/*    background-position: 0% 50%;*/
/*    opacity: 0.38;*/
/*}*/



.slanty input::-webkit-input-placeholder { /* Edge */
  color: rgb(255 255 255 / 16%);
}


.slanty input:-ms-input-placeholder { /*Internet Explorer 10-11 */
  color: rgb(255 255 255 / 16%);
}

.slanty input::placeholder {
    color: rgb(104 83 152 / 39%);
    color: rgb(255 255 255 / 16%);
}

.slanty .start::-webkit-calendar-picker-indicator {
    filter: invert(100%) opacity(50%);
    /*margin-left:0px;*/
}

/*.slanty .handel.customer.email:-webkit-autofill {*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: rgb(191 168 216);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 86400s ease-in-out 86400s;
  caret-color:white;
}

@keyframes spin {
    0% {opacity: 1; z-index:3; }
    100% { opacity:0; z-index: 3; }
}

.loading {
    position: absolute;
    z-index: 6;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000db;
}


.load_circles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    margin-top: -80px;
}

.loading_outer_cw {
	position:absolute;
	width:100%;
	height:100%;
	z-index:20;
	animation:rotate_cw 1s infinite;
	animation-play-state:running;
	animation-timing-function:linear;
	background-image:url('../images/loading_outer_cw.png');
	background-size:100%;
}

.loading_inner_ccw {
	position:absolute;
	width:100%;
	height:100%;
	z-index:21;
	animation:rotate_ccw 1.2s infinite;
	animation-play-state:running;
	animation-timing-function:linear;
	background-image:url('../images/loading_inner_ccw.png');
	background-size:100%;
}


@keyframes rotate_cw {
	from 	{ transform: rotate(0deg); }
	to		{ transform: rotate(360deg); }
}


@keyframes rotate_ccw {
	from 	{ transform: rotate(360deg); }
	to		{ transform: rotate(0deg); }
}

.loading .wheel {
    animation: spin 1s linear infinite;
}

.receipt {
    text-align:center;
}

.receipt table {
    border-collapse: collapse;
    border:1px solid red;
}

.receipt table td {
    text-align: left;
    padding: 4px 16px;
    border: 1px solid rgb(120 100 200);
}

.receipt table td:first-child {
    text-align:right;
}

/*@keyframes suppress {*/
/*  from {*/
/*    background-color: transparent;*/
/*  }*/

/*  to {*/
/*    background-color: transparent;*/
/*  }*/
/*}*/

/*.suppress {*/
/*  animation-duration: 3s;*/
/*  animation-delay: 5s;*/
/*  animation-name: suppress;*/
/*  animation-iteration-count: infinite;*/
/*  animation-direction: alternate;*/
/*}*/

.slanty.error .bg {
    background-color:rgb(202 70 70 / 47%);
}


.modal .frow .suggestions {
    position: absolute;
    top: calc(90% + 1px);
    top: 50px;
    left: 0%;
    width: 90%;
    min-width: 300px;
    /*border: 1px solid #a7a7a7;*/
    border-top: none;
    border-radius: 4px;
    height: auto;
    max-height: 280px;
    overflow-y: auto;
    background-color: rgb(162 162 162 / 95%);
    z-index: 7;
    box-shadow: 8px 8px 8px rgba(0,0,0,0.5);
}

.suggestions div {
    padding: 0 0 0 8px;
    line-height: 45px;
    margin: 3px;
    border-radius: 4px;
    background-color: rgb(19 18 51 / 73%);
    color: #dbbbf9;
    font-size: 24px;
    transition: opacity 0.3s;
}

.suggestions div.highlight {
    /*background-color:rgba(38, 255, 125, 0.73);*/
    background-color:rgb(88 70 128 / 86%);
}

/*.suggestions div:hover {*/
/*    background-color:rgb(100 79 144 / 76%);*/
/*}*/

.suggestions.gone {
    opacity:0.1;
}










/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    /*width: 300px;*/
    /*height: 200px;*/
    /*border: 1px solid #f1f1f1;*/
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    /*transform: rotateY(180deg);*/
}

.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.flip-card-inner .flip-card-back {
    overflow:hidden;
}

.flip-card-inner.flipped .flip-card-back {
    overflow:auto;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    /*background-color: #bbb;*/
    /*color: black;*/
    padding: 2% 5%;
    padding:2% 5% 5% 5%;
    background-color: rgb(47 41 69);
}

/* Style the back side */
.flip-card-back {
    background-color: rgb(47 41 69);
    color: white;
    transform: rotateY(180deg);
    overflow-y:auto;
    padding:2% 2% 2% 2%;
    padding-bottom:45px;
}

.flip-card-back ul {
    font-size:1em;
    text-align:left;
    list-style-type: none;
    padding-left: 0;
    padding-left:16px;
}

.flip-card-back ul li {
    line-height:1.1em;
    margin-bottom:4px;
}

.flip-card-back ul span {
    font-size:0.8em;
    opacity:0.7;
    list-style-type:none;
    font-family:TitilliumLight;
}

.flip-card ul li:before {
    content:"•";
    margin-left:-12px;
    position:absolute;
}

.flipfade {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 5px;
    height: 40px;
    width: calc(100% - 6px);
    z-index: 5;
    background-color: #2f2945;
    background: rgb(47,41,69);
    background: linear-gradient(0deg, rgba(47,41,69,1) 20%, rgba(47,41,69,0) 100%);
    transform: rotateY(180deg);
}

.flip:hover, .unflip:hover {
    cursor:pointer;
}

.modal .buy .flip-card .title {
    font-size:1.6em;
}

.flip-card-front > .flex.col {
    height: 33%;
}