.marvel-device.iphone-x {
    width: 304px;
    height: 612px;
}

.marvel-device.iphone-x .notch {
    width: 152px;
    left: 102px;
}

.user-theme {
    min-height: 100%;
    padding: 35px 0px;
}

.user-theme .container {
    max-width: 700px;
}

/*.user-theme .card-body {
    padding: .5rem !important;
    padding: 0rem !important;
    margin-bottom: 10px;
}*/
.user-theme .card-body {
    padding: 0px !important;
    margin: 10px 0px;
}

.customScroll .ps__rail-x,
.customScroll .ps__rail-y {
    display: none
}

.user_profile_container {
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 50%;
    position: relative;
}

.user_profile {
    border-radius: 50%;
    /*padding: 5px;*/
    border: 5px solid #000;
    background-color: #833ab4;
    background-color: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
    background-color: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
}

.user_profile img {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    /*border: 5px solid white;*/
}

.user_profile_container .green_icon {
    background-color: #4cd137;
    position: absolute;
    right: 10px;
    bottom: 15px;
    height: 20px;
    width: 20px;
    border: 5px solid white;
    border-radius: 50%;
}


.user-theme .btn {
    border-radius: 0px;
    border-width: 2px;
}

.mint .social_icon{
    color: #fff;
    border-color: #fff;

}

/*theme-smoke*/
/*.smoke {
    background-color: #343a40;
}

.smoke .user_instagram {
    color: #a79d9d;
}

.smoke .btn-custom {
    color: #343a40;
    background: #ffffff;
    
}

.smoke .btn-custom:hover,.smoke .social_icon {
    color: #fff;
    background-color:  #343a40;
    border-color: #fff;
}*/

/*theme-default*/
/*.default {
    background: #ffffff;
}

.default .user_instagram {
    color: #a79d9d;
}

.default .btn-custom {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.default .btn-custom:hover,.default .social_icon {
    color: #3d3b3c;
    background-color: #fff;
}*/

/*theme-moon*/

/*.moon {
    background: #fff;
}

.moon .user_instagram {
    color: #a79d9d;
}

.moon .btn-custom{
    color: #fff;
    background-color: #4f7cfe;
    border-color: #4f7cfe;

}

.moon .btn-custom:hover,.moon .social_icon {
    color: #4f7cfe;
    background-color: #fff;
    border-color: #4f7cfe;
}*/

/*theme-green*/
/*.green {
    background: #fff;
}

.green .user_instagram {
    color: #a79d9d;
}

.green .btn-custom{
    color: #fff;
    background-color: #39e09b;
    border-color: #39e09b;

}

.green .btn-custom:hover,.green .social_icon {
    color: #39e09b;
    background-color: #fff;
    border-color: #39e09b;
}*/

/*theme-gradient-2*/

/*.miami {
    background: linear-gradient(0deg, #fd8f67, #d463a3) !important;
}

.miami .user_instagram {
    color: #fff;
}

.miami .btn-custom ,.miami .social_icon{
    color: #fff;
    border-color: #fff;

}

.miami .btn-custom:hover {
    background-color: #fff;
    color: #d463a3;
}*/

/*theme-gradient-1*/
/*.dark {
    background: linear-gradient(0deg, #ffb9c6, #694ff6) !important;
}

.dark .user_instagram {
    color: #fff;
}

.dark .btn-custom ,.dark .social_icon{
    color: #fff;
    border-color: #fff;
}

.dark .btn-custom:hover {
    background-color: #fff;
    color: #694ff6;
}*/

/*theme-gradient-3*/

/*.mint {
    background: linear-gradient(0deg,#aaf0cb,#39e09b) !important;
}

.mint .user_instagram {
    color: #fff;
}

.mint .btn-custom ,.mint .social_icon{
    color: #fff;
    border-color: #fff;

}

.mint .btn-custom:hover {
    background-color: #fff;
    color: #39e09b;
*/


/*theme-gradient-3*/

/*.noir {
    background: linear-gradient(0deg,#9a9b9b,#3f4049) !important;
}

.noir .user_instagram {
    color: #fff;
}

.noir .btn-custom ,.noir .social_icon{
    color: #fff;
    border-color: #fff;

}

.noir .btn-custom:hover {
    background-color: #fff;
    color: #3f4049;
}*/

/*theme-gradient-4*/

/*.spray {
    background: linear-gradient(0deg,#76f3fa,#3a4eff) !important;
}

.spray .user_instagram {
    color: #fff;
}

.spray .btn-custom ,.spray .social_icon{
    color: #fff;
    border-color: #fff;

}

.spray .btn-custom:hover {
    background-color: #fff;
    color: #3a4eff;
}*/

/*button-style*/
.button-style-fill a{




}





.link-features-box {
    margin: 25px 0px 25px 0px;
}

.btn.active,.link-features-box button:hover,.link-features-box button:focus {
    color: #343a40 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}



.link-features-box .effect {
    margin-right: 10px;
    width: 110px;

}

.btn.btn-outline-dark, {
    border: 1px solid;
    border-color: #343a40 !important;
}



.buzz:hover,
.screen .buzz,.buzz.active,.user-theme .buzz {
    animation-name: animate-buzz;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes animate-buzz {
    0% {

        transform: translateX(3px) rotate(1deg)
    }

    2.5% {
        transform: translateX(-3px) rotate(-1deg)
    }

    5% {
        transform: translateX(3px) rotate(1deg)
    }

    7.5% {
        transform: translateX(-3px) rotate(-1deg)
    }

    10% {
        transform: translateX(2px) rotate(1deg)
    }

    12.5% {
        transform: translateX(-2px) rotate(-1deg)
    }

    15% {
        transform: translateX(2px) rotate(1deg)
    }

    17.5% {
        transform: translateX(-2px) rotate(-1deg)
    }

    20% {
        transform: translateX(1px) rotate(1deg)
    }

    22.5% {
        transform: translateX(-1px) rotate(-1deg)
    }

    25% {
        transform: translateX(0) rotate(0)
    }
}




.pop:hover,
.screen .pop,.pop.active,.user-theme .pop {

    animation-name: animate-pop;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes animate-pop {
    0% {
        transform: scale(1)
    }

    12.5% {
        transform: scale(1.05)
    }

    25% {
        transform: scale(1)
    }
}

.wobble:hover,
.screen .wobble,.wobble.active,.user-theme .wobble {
    animation-name: animate-wobble;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes animate-wobble {
    4.16% {
        transform: translateY(8px)
    }

    8.33% {
        transform: translateY(-6px)
    }

    12.48% {
        transform: translateY(4px)
    }

    16.66% {
        transform: translateY(-2px)
    }

    20.81% {
        transform: translateY(1px)
    }

    25% {
        transform: translateY(0)
    }
}

.skew:hover,
.screen .skew,.skew.active,.user-theme .skew {

    animation-name: animate-skew;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;


}

@keyframes animate-skew {

    0% {
        transform: skew(-12deg)
    }

    25% {
        transform: skew(-12deg)
    }
}