body {
    font-family: 'Radley', serif;
    
}

#site-wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
   overflow-y:auto;
   overflow-x:hidden;
   background:#e9ebee;

}

    #site-wrapper::-webkit-scrollbar {
        width: 10px;
    }

    #site-wrapper::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    #site-wrapper::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background: #ddd;
    }


    #preview-pane .preview-container{
       margin-right:-50px;
    }

    #avatar-result{
        text-align:center;
    }


/*
    font-family: 'Timmana', sans-serif;
font-family: 'Radley', serif;
*/


.newBg-container{
    width:75%;
    text-align:center;
    margin:auto;
    border:5px solid #ddd;
    padding:25px;
}

.newBg-container .form-block{
    margin-top:25px;
    margin-bottom:25px;
}



.form-block {
    position: relative;
}


/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
    background:#000;
    padding:5px;
    border-radius:15px;
    position:absolute;
   top:100%;
    left:50%;
    margin-left:-25%;
    width:50%;
    text-align:center;
    z-index:9;
}

.field-validation-error::before{
    content: "";
    position:absolute;
    top:-20px;
    left:50%;
    margin-left:-10px;
    border-width:10px;
    border-style:solid;
    border-color:transparent transparent #000 transparent;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.popover-title {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Timmana', sans-serif;
    font-size:20px;
}

.popover-content{
    font-size:18px;
    text-align:center;
}

.alert-info {
    font-family: 'Timmana', serif;
    font-size:20px;
}


.page-header {
    font-family: 'Limelight', cursive;
    font-size: 50px;
    margin-top:0;
}


.search-bar {
    background: #212529;
    padding: 5px 25px;
    position: fixed;
    top: 0;
    left:0;
    right:10px;
    z-index: 9999;
}

#search-container{
    width:25%;
    
}

mbl-nav-btns {
    display:none;
}

#notify-post,
#search2 .post-container{
    width:70%;
}




.dropdown-content {
    display: none;
    position: absolute;
    min-width: 320px;
    right: 0;
    z-index: 999;
}

#loadNotifications {
    border: 5px solid #ddd;
    background: #212529;
    border-radius: 5px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.85);
}




    #loadNotifications h3 {
        text-align: center;
        color: #fff;
        font-family: 'Limelight', cursive;
        margin-top: 10px;
        border-bottom: 1px solid #777;
    }

.dropdown-btn {
    background: none;
    border: none;
    color: #777777;
    height: 34px;
    font-size: 25px;
    margin-right: 30px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    outline:none;

}

    .dropdown-btn:hover {
        color: #2196F3;
    }


    

     
    #notify-inboxBtn .label-default,
    .dropdown-btn .label-success {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 12px;
        position: absolute;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        background:#777;
        padding-bottom:2px;
    }

    .dropdown-btn:hover .label-success {
        background: #2196F3;
    }

    .dropdown:hover .dropdown-content{
        display:block;
    }

.dropdown:hover .dropdown-btn {
    color: #2196F3;
}

    .dropdown:hover .dropdown-btn .label-success {
        background: #2196F3;
    }



.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}


.notify-menu li a {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    color:#777;
}

.notify-menu li a:hover{
    color:#fff;
    background:#282c30;
}


.accountBtn,
.mbl-menu-btn {
    display: none;
}


.mbl-side-menu{
    display:none;
} 



.logo {
    font-size: 23px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    color: #777;
    text-decoration: none;
}

.logo:focus,
    .logo:hover {
        text-decoration: none;
        color: #0050a1;
    }

    .logo span {
        color: #777;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }

    .logo:hover span {
        color: #2196F3;
    }




.nav-btn{
    font-size:30px;
    padding:25px;
    margin-left:5px;
    margin-right:5px;
}

#left-col,
#right-col{
    padding:0;
}


.left-nav,
.right-nav{
    position:absolute;
    top:0;
    width:100%;
    padding-top:25px;
}

.right-nav{
    text-align:center;
}



.left-nav.sticky{
    position:fixed;
    top:44px;
    left:0;
}

.right-nav.sticky{
    position:fixed;
    top:44px;
    right:10px;
}


.left-nav h4 {
    width: 80%;
    margin: auto;
    text-transform: uppercase;
    font-size: 30px;
    font-family: 'Limelight', cursive;
    border-bottom: 2px solid #ddd;
}

.left-menu{
    padding-left:3px;
}

    .left-menu .divider {
        height: 20px;
        background: linear-gradient(90deg, #717375,#363a3e,#212529);
        width:100%;
        border-radius:20px 0 0 20px;
        margin-top:15px;
        margin-bottom:20px;
    }
        .left-menu .divider::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            border-width: 10px;
            border-style: solid;
            border-color: #212529 #212529 #212529 #212529;
            border-radius: 0 0 20px 20px;
        }

.left-menu li a {
    font-size: 20px;
    width: 95%;
    color: #777;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    padding:5px 0;
    border:1px solid transparent;
    padding-left:2px;
}

.newItem{
    color:#2132f3;
    font-weight:bold;
}

#domainLink2,
#domainLink{
    font-size:16px;
}



    .left-menu li a .label-default {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }

    .left-menu li a:hover .label-default {
        background: #0053ff;
    }

.left-menu li a:hover{
    background:#fff;
    color:#0053ff;
    border-color:#ddd;
}

    .left-menu li a:focus {
        background: #fff;
        color: #0053ff;
        border-color: #ddd;
    }

.left-menu li{
    padding-left:5px;
}



.content-row{
    margin-left:0;
    margin-right:0;
}


.navImg {
    max-width: 95%;
    border: 20px solid transparent;
    border-image-source: url(../images/rusticborder.jpg);
    border-image-slice: 100 100 96 106;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    max-height: 300px;
}

.right-nav .nav-stacked li a {
    font-size: 20px;
    color: #777;
    border: 2px solid #ddd;
    width: 75%;
    margin: auto;
    margin-top: 15px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    .right-nav .nav-stacked li a:hover {
        color: #0053ff;
        
    }


    .messenger-container{
        position:fixed;
        top:45px;
        right:0;
        height:100%;
        background:#e9ebee;
        z-index:999;
    }

  


#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.71);
    display: none;
}


#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 200px;
    z-index: 9999;
    margin-top: -100px;
    margin-left: -100px;
    border: 5px solid #3273ca;
    border-radius: 50%;
    padding-top: 150px;
    background: url(../images/loader-icon.gif) center no-repeat;
    background-size: contain;
    background-color: #fff;
    border-left: 5px solid #3389fd;
    border-right: 5px solid #0856c0;
    border-bottom: 5px solid #003781;
    box-shadow: 0 0 80px #000;
}

/*xxxxxxxxxxxxxxxxx Page Loader xxxxxxxxxxxxxx*/

@-webkit-keyframes outerRotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-moz-keyframes outerRotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-o-keyframes outerRotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes outerRotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes outerRotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@-moz-keyframes outerRotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@-o-keyframes outerRotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes outerRotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@-webkit-keyframes textColour {
    0% {
        color: #fff;
    }

    100% {
        color: #3BB2D0;
    }
}

@-moz-keyframes textColour {
    0% {
        color: #fff;
    }

    100% {
        color: #3BB2D0;
    }
}

@-o-keyframes textColour {
    0% {
        color: #fff;
    }

    100% {
        color: #3BB2D0;
    }
}

@keyframes textColour {
    0% {
        color: #fff;
    }

    100% {
        color: #3BB2D0;
    }
}


.loadingBG {
    background: rgba(0, 0, 0, 0.84);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display:none;
}


#loadingImg{
    position:absolute;
    top:50%;
    left:50%;
    height:300px;
    width:300px;
    margin-top:-150px;
    margin-left:-150px;
    background:url(../images/giphy2.gif) center no-repeat;
    background-size:contain;
    border-radius:50%;
    box-shadow: 0 0 50px #00a7f0;
    z-index:9999;
}

#inside-loader{
    position:fixed;
    top:50%;
    left:50%;
    height:100px;
    width:100px;
    margin-top:-50px;
    margin-left:-50px;
    background:url(../images/loader-icon.gif) center no-repeat;
    background-size:contain;
    border-radius:50%;
    z-index:9999;
}

.circle {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 110px;
    margin-top: -25%;
}

.borderCircle2 {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    border-radius: 200px;
    box-shadow: -5px -5px 15px rgba(47, 124, 240, 0.18);
}

.borderCircle3 {
    background: #161616; /* Old browsers */
    background: -moz-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161616), color-stop(100%,#3d3d3d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* IE10+ */
    background: linear-gradient(to bottom, #161616 0%,#3d3d3d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
    border: 10px solid #000;
    position: absolute;
    top: -25px;
    right: -25px;
    bottom: -25px;
    left: -25px;
    border-radius: 200px;
    z-index: -2;
    box-shadow: 0 0 150px #3398fd;
}

.outerCirlce {
    margin: 0 auto;
    background: #91b5ff; /* Old browsers */
    background: -moz-radial-gradient(20% 20%, ellipse cover, #91b5ff 0%, #21befc 24%, #000000 74%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(radial,20% 20%, 0px,20% 20%, 100%, color-stop(0%,#91b5ff), color-stop(24%,#21befc), color-stop(74%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(20% 20%, ellipse cover, #91b5ff 0%,#21befc 24%,#000000 74%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(20% 20%, ellipse cover, #91b5ff 0%,#21befc 24%,#000000 74%,#000000 100%); /* Opera 12+ */
    background: -ms-radial-gradient(20% 20%, ellipse cover, #91b5ff 0%,#21befc 24%,#000000 74%,#000000 100%); /* IE10+ */
    background: radial-gradient(ellipse at 20% 20%, #91b5ff 0%,#21befc 24%,#000000 74%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b5ff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-radius: 110px;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.outerCirlce {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.borderCircle2 {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.borderCircle {
    color: #fff;
    background-color: #ccc;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    border-radius: 110px;
    background: #575b60; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#575b60), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #575b60 1%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: -1px 0px 0px #333, 0px -1px 0px #333;
}

.innerCircle {
    color: #000000;
    background-color: #373a3d;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    border-radius: 110px;
    background: #373a3d; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#373a3d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #373a3d 1%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373a3d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: -1px 0px 0px #666, 0px -1px 0px #666;
}


    .innerCircle p {
        text-align: center;
        margin-top: 40%;
        font-size: 18px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: -1px 1px 0 #3398fd, 0 0 2px #3398fd;
    }







footer{
    width:100%;
    text-align:center;
    font-size:25px;
    margin-top:200px;
    padding-bottom:25px;
}

    footer a {
        color: #777;
        font-weight: bold;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
        
    }

        footer a span {
            font-family: 'LimeLight',cursive;
            color: #6d9cfd;
            -webkit-transition: all .7s ease;
            transition: all .7s ease;
        }

footer a:hover{
    color:#111;
    text-decoration:none;
}

        footer a:hover span {
            color: #0053ff;
        }

.back-to-top {
    background: #212529;
    color: #fff;
    text-transform: uppercase;
    font-family: 'LimeLight', cursive;
    font-size: 20px;
    width: 65%;
    margin: auto;
    padding: 8px;
    margin-bottom: 20px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    opacity:.85;
}

.back-to-top:hover{
    cursor:pointer;
    opacity:1;
}



#mid-col {
    min-height: 600px;
}




.pagination > li > a:focus,
.pagination > li > a, .pagination > li > span {
    border-radius: 5px;
    margin: 0 5px;
    height: 38px;
    width: 38px;
    padding: 5px;
    background: #212529;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    border: 3px solid #343a40;
    color: #777;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}



    .pagination > li > a.active:hover {
        box-shadow: 0 3px 8px 0 #000;
    }

    .pagination > li > a:hover {
        border: 3px solid #2a80d5;
        background: #212529;
        box-shadow: 0 3px 8px 0 #000;
        color: #fff;
    }

.pagination > li.active > a:focus,
.pagination > li.active > a {
    border-color: #2a80d5;
    background: #212529;
}

.pagination > li.active:hover a {
    background: #212529;
    border-color: #2a80d5;
}



.pagination-wrapper {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}



/*xxxxxxxxx File upload Btn xxxxxxxx*/
.fileUpload {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: #212529;
    color: #777;
    border: 3px solid #ddd;
    border-radius: 10px;
    font-size: 18px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

    .fileUpload:hover {
        color: #fff;
        background: #212529;
        
    }

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }


#videoTxt,
#imgTxt{
    display:inline-block;
    width:80%;
}

.upload {
    display: inline-block;
}




.modal-dialog{
    margin-top:100px;
}





/*xxxxxxxxxxxxxx Login xxxxxxxxxxxx*/
.login-container {
    border: 10px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    background: #212529;
}

#loginForm {
    border: 5px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    background: #343a40;
}


    #loginForm .form-block {
        width: 75%;
        margin: auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .event-form{
        margin-top:25px;
        margin-bottom:25px;
    }

.event-form textarea{
    min-height:150px;
}

    #loginForm .submitBtn {
        margin-bottom: 50px;
    }

    .event-form .form-control,
    #loginForm .form-block .form-control {
        height: 50px;
        font-size: 18px;
        background: #212529;
        border: 3px solid #ddd;
        color: #fff;
    }

    .event-form .form-control:focus,
        #loginForm .form-block .form-control:focus {
            border: 3px solid #0050a1;
            box-shadow: none;
        }

    #loginForm .form-block .checkbox {
  
    }

    .checkbox{
        display:none;
    }

    #checkboxLabel2,
#checkboxLabel {
    color: #fff;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-family: 'Timmana', sans-serif;
    margin-left: 15px;
}

#loginForm p a {
    font-family: 'Timmana', sans-serif;
    font-size: 18px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

    #loginForm p a:focus,
    #loginForm p a:hover {
        text-decoration: none;
        color: #fff;
    }



.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

/* The slider */
.sliderz {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #343a40;
    -webkit-transition: .4s;
    transition: .4s;
    border: 2px solid #ddd;
}

    .sliderz:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .sliderz {
    background-color: #000;
}

input:focus + .sliderz {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderz:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.sliderz.round {
    border-radius: 34px;
}

    .sliderz.round:before {
        border-radius: 50%;
    }

    .proImgUpload,
    .proImgUpload:focus,
.submitBtn:focus,
.submitBtn {
    font-size: 20px;
    width: 200px;
    background: #212529;
    color: #777;
    -webkit-transition: .5s;
    transition: .5s;
    outline:none;
}

    .proImgUpload:hover,
    .submitBtn:hover {
        color: #fff;
        background: #212529;
        box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.54);
    }



.register-wrap {
    width: 100%;
    height: 500px;
    padding:15px;
    border: 2px solid #ddd;
    box-shadow: 0 3px 8px 0 #000;
}

.signup-slider {
    width: 100%;
    overflow: hidden;
    height: 480px;
    position: relative;
}

    .signup-slider ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        width: 300%;
        height: 100%;
        top: 0;
    }

    .signup-slider li {
        padding: 0;
        margin: 0;
        width: 33.333333%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
    }


.signup-step{
   height:100%;
}

.prevBtn,
.nextBtn,
.nextSubmitBtn{
    margin-top:50px;
}


.form-control.invalid{
   border:2px solid #d80000;
}








/*xxxxxxxxxxxx Posts xxxxxxxxxxxxx*/


#loadNewPost{
    position:relative;
}

#loadNewPost .new-post-panel .form-block .emojionearea.focused{
    box-shadow:none;
}

#loadNewPost .new-post-panel .panel-body{
    padding-bottom:25px;
}

#loadNewPost .new-post-panel {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#loadNewPost .new-post-panel:hover {
 box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.67);
}




.postOverlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0, 0, 0, 0.87);
    color:#fff;
    display:none;
}

.edit-post{
    display:none;
}

.edit-post .new-post-panel{
    border:none;
}

.back-drop{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0, 0, 0, 0.72);
    padding-top:150px;
    padding-bottom:50px;
    overflow-y:auto;
    z-index:9999;
}

.back-drop .new-post-panel{
    width:40%;
    margin-left:20%
}

.new-post-panel{
    position:relative;
}

.new-post-panel .panel-footer{
    background:#fff;
}

#new-post {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #new-post:hover {
        cursor: pointer;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.54);
    }

#new-post textarea{
   cursor:pointer;
}

#new-post textarea[readonly]{
    background:none;
}

.new-post-panel .exit-new-post{
   background:none;
   position:absolute;
   top:0;
   right:0;
   width:50px;
   z-index:1;
   text-align:center;
}

#new-post .exit-new-post button,
    .new-post-panel .exit-new-post a {
        font-size: 25px;
        padding: 0;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
        color:#0884eb;
        background:none;
    }

#new-post .exit-new-post button:hover,
    .new-post-panel .exit-new-post a:hover{
        color:#d80000;
    }

.new-post-panel .exit-new-post a.btnColor {
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    color:#fff;
}

    .new-post-panel .exit-new-post a.btnColor:hover {
        color: #d80000;
    }

.new-post-panel .panel-body{
    padding:0;
    padding-bottom:50px;
}



#vidTxt{
    display:inline-block;
    max-width:40%;
    height:40px;
    display:none;
}


#loadNewPost .new-post-panel .panel-body{
  
}

.bg-options {
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
    height: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}




#emoji-box{
    margin-bottom:10px;
}

#emoji-box .emojionearea{
    border:none;
    height:35px;
}

    .bg-options::-webkit-scrollbar {
        height: 7px;
    }

    .bg-options::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .bg-options::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background: #ddd;
    }

.removeImg3,
.removeImg2,
.removeImg,
.removeVid,
.removeVid2{
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 25px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    background:rgba(0, 0, 0, 0.48);
    padding:2px 8px;
    border-radius:10px;
}

.removeVid,
.removeVid2{
    right:0;
    z-index:99;
}

.removeImg3:hover,
.removeImg2:hover,
.removeImg:hover,
.removeVid:hover,
.removeVid2:hover{
    cursor:pointer;
    color:#930606;
}




.profileTabs #wall{
    padding-left:100px;
    padding-right:100px;
}




.nextBtn:focus,
.prevBtn:focus,
.nextSubmitBtn:focus,
.postBtn:focus,
.nextBtn,
.prevBtn,
.nextSubmitBtn,
.postBtn {
    background: #212529;
    color: #777;
    border: 3px solid #ddd;
    border-radius: 10px;
    font-size: 18px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    outline:none;
}

.videoBtn,
.tagBtn{
    margin-left:10px;
}

.noEdit:focus,
.noEdit {
    border: 3px solid #ddd;
    font-size: 18px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    outline: none;
    margin-right:5px;
}

    .noEdit:hover {
        border: 3px solid #ddd;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.58);
    }


    .nextBtn:hover,
    .prevBtn:hover,
    .nextSubmitBtn:hover,
    .postBtn:hover {
        color: #fff;
        background: #212529;
        border: 3px solid #ddd;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.58);
    }


    .nextBtn:focus,
    .prevBtn:focus,
    .nextSubmitBtn:focus,
    .prevBtn,
    .nextBtn,
    .nextSubmitBtn {
        font-size: 25px;
        width:150px;
    }



.nextPrvBtn-container{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    padding-bottom:20px;
}






.postBG {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #8d8d8d;
    vertical-align: bottom;
    margin-left:10px;
    margin-right:10px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}




.NormalBG{
    background:#fff;
}

.BlackBG{
    background:#000;
}

.postBG:hover{
    border-color:#019dfc;
    cursor:pointer;
}

.BlueBG{
    background:#0053ff;
}

.PinkBG{
    background:pink;
}

.PurpleBG{
    background:#6c18f5;
}

.CamoBG{
    background-image:url(../images/camo.jpg);
    background-size:cover;
    color:#fff;
}

.PeaceBG{
    background-image:url(../images/peacesign.jpg);
    background-size:cover;
    color:#fff;
}

.CheetahBG{
    background-image:url(../images/cheetah.jpg);
    background-size:cover;
    color:#fff;

}

.CodeBG{
    background-image:url(../images/codeBG.jpg);
    background-size:cover;
    color:#fff;
}

.SkullBG{
    background-image:url(../images/skullbg.jpg);
    background-size:cover;
    color:#000;
}

.SnowflakeBG{
    background-image:url(../images/snowflakebg.jpg);
    background-size:cover;
    color:#fff;
}

.StoneBG{
    background-image:url(../images/stone.jpg);
    background-size:cover;
    color:#fff;
}

input[type=radio]{
    display:none;
}



.new-post-panel .form-block textarea,
.new-post-panel .form-block .emojionearea {
    font-size: 35px;
    border-radius: 0;
    border: none;
    resize: none;
    margin-bottom: 5px;
    font-family: 'Timmana', sans-serif;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}


.new-post-panel .form-block .emojionearea .emojionearea-editor{
    min-height:150px;
}

   



.new-post-panel .form-block .emojionearea .emojionearea-search{
    font-size:16px;
}

.emojionearea .emojionearea-picker.emojionearea-picker-position-top{
    margin-top:0;
}


.new-post-panel .form-block .pholder::-webkit-input-placeholder {
    color: #fff;
    font-family: 'Timmana', sans-serif;
}

#postTxtBox3.spholder::-webkit-input-placeholder {
    color: #000;
    font-family: 'Timmana', sans-serif;
}

.new-post-panel .form-block .emojionearea-editor:focus{
    box-shadow:none;
}

.new-post-panel .panel-footer .form-block{
    margin:0;
}

.vid-preview2,
.vid-preview,
.img-preview{
    text-align:center;
    padding:15px;
    display:none;
    position:relative;
}

.img-preview img{
    max-width:100%;
    border-radius:5px;
    max-height:600px;
}


.img-preview2 {
    text-align: center;
    padding: 15px;
    display: none;
    position: relative;
}

    .img-preview2 img {
        max-width: 100%;
        border-radius: 5px;
        max-height: 600px;
    }


.vid-preview2,
.vid-preview3,
.img-preview3{
    position:relative;
    text-align:center;
    padding:15px;

}

.img-preview3 img{
    max-width:100%;
    border-radius:5px;
}





.profileImg-update h3{
    font-family:'LimeLight',cursive;
    
    font-size:30px;
}

.profileImg-update .img-preview{
    display:block;
}

.hide_vid,
.hide_img{
    display:none;
}


.current-proimg{
    text-align:center;
}

    .current-proimg img {
        border: 20px solid transparent;
        border-image-source: url(../images/rusticborder.jpg);
        border-image-slice: 100 100 96 106;
        border-image-width: 20px 20px 20px 20px;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: stretch stretch;
        max-height: 300px;
    }



.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}


.likeImg,
    .media img {
        height: 45px;
        margin-right: 15px;
        border-radius: 5px;
    }

.media-body {
    -ms-flex: 1;
    flex: 1;
    font-size: 20px;
}


    .media-body h4 a {
        color: #777;
        font-family: 'Timmana', sans-serif;
        font-size: 20px;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
    }

        .media-body h4 a:hover {
            color: #2196F3;
        }


.media-lvl-2 img{
    height:30px;
}

.reply-txt-container {
    display:none;
    width:75%;
    margin-left:auto;
    margin-right:15px;
}




.hide-com {
    display: none;
}

.hide-rep{
    display:none;
}


.hide_zero_0{
    display:none;
}

#likeForm{
    display:inline-block;
}


.post-container{
    padding:10px 0;
}

#details-post{
    width:70%;
}



#main-feed{
    width:60%;
}

.trending-panel {
   position:absolute;
   top:95px;
   right:0;
   width:40%;
   margin-bottom:0;
   overflow:hidden;
   background:#1e1e1e;
   
}

.trending-panel.sticky{
    position:fixed;
    top:70px;
    z-index:1;
}

    .trending-panel .panel-heading {
        background: none;
        color: #fff;
        border-color:#777;
    }



.top-spots {
    display: inline-block;
    width: 15%;
}

    .top-spots div {
        height: 73px;
        border-right:1px solid #777;
        padding-top:25px;
    }



        .top-spots div span {
            font-size: 20px;
            font-family: 'LimeLight',cursive;
            color: #777;
        }

#loadTopPosts {
    display: inline-block;
    width:80%;
    vertical-align:top;

}

.top-post {
    display: block;
    padding: 5px 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    .top-post span {
        display: block;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }

.top-post span:first-child{
    font-size:16px;
}

.top-post span:last-child{
    color:#777;
}

.top-post:hover{
    text-decoration:none;
}



.top-post:hover span:last-child{
    color:#fff;
}

.post-panel .panel-heading{
    border:none;
    background:none;
    position:relative;
}



.post-panel .panel-body{
    padding:0;
}

.post-panel .panel-footer {
    border: none;
    background: none;
}

.post-panel a{
    text-decoration:none;
}

    .post-panel .panel-heading h3 a {
        font-family: 'Timmana', sans-serif;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
        font-size:20px;
    }

    .post-panel .panel-heading h3 span{
        font-size:16px;
    }

    .post-panel .panel-heading h3 span a{
        font-size:20px;
    }

    .post-panel .panel-heading p {
        font-family: 'Timmana', sans-serif;
        font-size:18px;
    }



.bgDefault{
    color:#646464;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:25px;
    font-size:40px;
}

.bgBlack{
    background:#000;
    color:#fff;
    text-align:center;
    font-size:40px;
    padding-top:50px;
    padding-bottom:50px;
}

.bgBlue {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #0053ff;
}

.bgPink {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background: pink;

}

.bgPurple {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #6c18f5;
}

.bgCamo {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/camo.jpg);
    background-size: cover;
    text-shadow: -3px 3px 5px #000, 0 0 25px #000;
}

.bgPeace{
    color:#fff;
    text-align:center;
    font-size:40px;
    padding-top:50px;
    padding-bottom:50px;
    background-image:url(../images/peacesign.jpg);
    background-size:cover;
    text-shadow:-3px 3px 0 #433434,0 0 25px #000;
}

.bgCheetah {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/cheetah.jpg);
    background-size: cover;
    text-shadow:-3px 3px 5px #000, 0 0 25px #000;
}

.bgCode {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/codeBG.jpg);
    background-size: cover;
    text-shadow: -3px 3px 5px #000, 0 0 25px #000;
}

.bgSkull {
    color: #000;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/skullbg.jpg);
    background-size: cover;
    text-shadow: -2px 1px 0 #d80000, 0 0 5px #d80000;
}

.bgSnowflake {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/snowflakebg.jpg);
    background-size: cover;
    text-shadow: -3px 3px 5px #000, 0 0 25px #000;
}

.bgStone {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../images/stone.jpg);
    background-size: cover;
    text-shadow: -3px 3px 5px #000, 0 0 25px #000;
}

.post-txt {
    font-family: 'Timmana', sans-serif;
    font-size: 35px;
}

    .post-panel .panel-heading h3 a:hover{
        color:#2196F3;
    }

.userImg {
    height: 40px;
    border-radius: 5px;
}

.requestConfirm{
    position:fixed;
    height:200px;
    width:400px;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-200px;
    background:#000;
    border:5px solid #0053ff;
    border-radius:50px;
    text-align:center;
    padding-top:50px;
    box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.70);
 display:none;
  z-index:9999;
}

.likeConfirm {
    position: fixed;
    top: 100%;
    left:50%;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    font-size: 120px;
    padding: 10px;
    color: #0053ff;
    margin-left: -100px;
    background: #000;
    border: 5px solid #0053ff;
    z-index: 9999;
    text-align: center;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.70);
   
}

.requestConfirm h3,
    .likeConfirm h3 {
        color: #fff;
        font-size: 30px;
        font-family: 'Timmana', sans-serif;
    }


.panel-btns{
    padding:5px;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    
}

.shareBtn{
    display:none;
}

#shareModal .modal-body{
    padding:0;
}


#shareModal .new-post-panel{
    border-radius:0;
    margin-bottom:0;
}

.comLikes,
.likes{
    height:200px;
    overflow-y:auto;
}


    .likes::-webkit-scrollbar {
        width: 10px;
    }

    .likes::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .likes::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background: #ddd;
    }



.likeCount{
    padding:5px;
    padding-left:20px;
    font-size:20px;
}

    .likeCount a {
        font-family: 'Timmana', sans-serif;
    }


.newPostBtn {
    background: #212529;
    color: #777;
    border: 3px solid #ddd;
    border-radius: 10px;
    font-size: 18px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    width:60%;
    margin-bottom:25px;
}

    .newPostBtn:hover {
        color: #fff;
        background: #212529;
        border: 3px solid #ddd;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.58);
    }



.post-img-container{
    padding:5px;
    text-align:center;
}

.post-img-container img{
    max-width:100%;
    border-radius:5px;
  
}

.post-img-container img:hover{
    cursor:pointer;
}

.hidePostBtn{
    position:absolute;
    right:5px;
}

.bookMarkBtn{
    position:absolute;
    right:5px;
}

.editPostBtn{
    position:absolute;
    right:35px;
}

.bm-container{
    text-align:center;
    padding-top:25px;
    padding-bottom:25px;
}

.bm-container h3{
    font-family:'LimeLight',cursive;
    color:#fff;
    font-size:40px;
}


.form-control:focus{
    box-shadow:none;
}

.seeMoreBtn:focus,
.seeMoreBtn,
.readMoreBtn:focus,
.readMoreBtn {
    display: block;
    margin: auto;
    font-size: 18px;
    background: none;
    border: none;
    color: #777;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    outline:none;
}

.seeMoreBtn,
.seeMoreBtn:focus{
    margin:0;
}

.seeMoreBtn:hover,
    .readMoreBtn:hover {
        color: #2196F3;
    }



.comment-panel{
    width:95%;
    margin:auto;
    border-top:1px solid #ddd;
    padding-top:10px;
}



.modal-body .post-panel img{
    max-height:400px;
}


.sharedTxt{
    font-size:20px;
}


.new-post-panel,
.post-panel{
    background:#1e1e1e;
    border:5px solid #777;
    color:#777;
}

.post-panel .panel-heading p{
    color:#777;
}

.post-panel .panel-btns{
    border-color:#777;
}

.post-panel .comment-panel{
    border-color:#777;
}


    .new-post-panel .panel-footer {
        background: #1e1e1e;
        border-color:#777;
    }

  #loadNewPost .new-post-panel .panel-body{
      padding-bottom:2px;
  }


.emojionearea .emojionearea-filters {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
 height:0;
}

#toggleEmoji{
    margin-left:25px;
}

    #toggleEmoji .emojione-1F60B {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }


/*xxxxxxxxx Users xxxxxxxxxx*/


.form-block table{
    margin:auto;
    text-align:center;
    color:#fff;
}

#step3{
    text-align:center;
}

#step3 h3{
    font-size:40px;
   text-align:center;
}



#poke-container {
    position: fixed;
    height: 200px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
    background: #000;
    border: 5px solid #0053ff;
    border-radius: 50px;
    text-align: center;
    padding-top: 50px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.70);
    display:none;
    z-index:9999;
}

#poke-container h4{
    color:#fff;
    font-family:'Radley',cursive;
    font-size:30px;
}

.cropImg-row{
    text-align:center;
    margin-top:25px;
}


.form-block .modal{
    z-index:9999;
}


.registered{
    background:#212529;
    border:5px solid #ddd;
    border-radius:10px;
    padding:25px;
    text-align:center;
}

.registered h2{
    font-family:'Radley', sans-serif;
    font-size:30px;
    color:#fff;
}


.user-box {
    border: 5px solid #ddd;
    text-align: center;
    border-radius: 10px;
    padding: 8px;
    background: #212529;
    color: #fff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-bottom:15px;

}

    .user-box:hover {
        cursor: pointer;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.54);
    }

    .user-box h3 {
        font-family: 'Timmana', sans-serif;
    }

.user-img-box {
    border: 5px solid #ddd;
    border-radius: 10px;
    padding: 5px;
    background: #777;
    height: 240px;
    
}

    .user-img-box img {
        max-width: 100%;
        max-height: 220px;
        border: 20px solid transparent;
        border-image-source: url(../images/rusticborder.jpg);
        border-image-slice: 100 100 96 106;
        border-image-width: 20px 20px 20px 20px;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: stretch stretch;
    }

.deleteUsr:focus,
.deleteUsr {
    position: absolute;
    bottom: 23px;
    right: 23px;
    font-size: 20px;
    background: transparent;
    border-color:transparent;
    color: #000;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    outline:none;
    z-index:998;
}

    .deleteUsr:hover {
        background: transparent;
        color: #d80000;
        border-color: #d80000;
    }

.instructions{
    border:5px solid #ddd;
    border-radius:10px;
    padding:20px 10px;
    text-align:center;
    background:#212529;
}


    .instructions h3 {
        color: #fff;
        font-family: 'Radley', serif;
        font-size:30px;
    }

    .instructions p {
        font-family: 'Radley', serif;
        color:#2196F3;
        font-size:18px;
    }


.change-pass-container{
    text-align:center;
    width:80%;
    margin:auto;
}

.change-pass-container .form-block{
    margin-top:15px;
    margin-bottom:15px;
}



#signup-form {
    border: 5px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    background: #212529;
    min-height:500px;
    position:relative;
}

#signup-form .form-block{
    margin-top:25px;
    margin-bottom:25px;
}

#signup-form .form-block select,
#signup-form .form-block input{
    width:50%;
    margin:auto;
   height:50px;
   font-size:20px;
   display:block;
   border:3px solid #ccc;
   color:#777;
   border-radius:5px;
   padding:5px;
}

#signup-form .form-block .form-control.invalid{
    border:3px solid #d80000;
    background:#fcd3d3;
}

#signup-form #imgTxt{
    margin:0;
    width:80%;
    display:inline-block;
    height:43px;
}

#signup-form #step3 .prevBtn,
#signup-form #step3 .nextSubmitBtn{
}

#signup-form .fileUpload{
    display:block;
    width:50%;
    margin:auto;
}

#signup-form .img-preview{
    display:block;
    height:260px;
    border:1px solid #ddd;
    border-radius:5px;
    width:50%;
    margin:auto;
}

#signup-form .img-preview img{
    max-height:230px;
    max-width:100%;
}

#signup-form .page-header{
    color:#fff;
    border-bottom-color:#ddd;
    margin-bottom:50px;
}

#signup-form #step3 .form-block{
    z-index:8;
}


#requirements {
    display: none;
    background: #f1f1f1;
    color: #000;
    position: fixed;
    top:50px;
    left:50%;
    width:25%;
    margin-left:-12.5%;
    border: 3px solid #ddd;
    border-radius: 10px;
    padding: 5px;
    z-index: 9999;
    box-shadow: 0 3px 8px 0 #000;
    height:260px;
}

   

   #signup-form #requirements h3{
        color:#777;
        text-align:center;
    }

    #requirements p {
        padding: 5px 35px;
        font-size: 16px;
    }

.validP {
    color: green;
}

    .validP:before {
        position: relative;
        left: -35px;
        content: "✔";
    }

/* Add a red text color and an "x" when the requirements are wrong */
.invalidP {
    color: red;
}

    .invalidP:before {
        position: relative;
        left: -35px;
        content: "✖";
    }


    #signup-form h3 {
        color: #fff;
        font-family: 'Timmana', sans-serif;
    }

    #search-btn{
        height:33.99px;
    }

    

    #search-box{
        width:270px;
        border-radius:0;
    }

    #searchFilter{
        display:inline-block;
        width:85px;
        border-radius:5px 0 0 5px;

    }

    #searchFilter:focus{
        box-shadow:none;
        outline:none;
        border-color:#ddd;
    }

    #search-box:focus{
        box-shadow:none;
        border-color:#ddd;
    }

    #search1{
        margin-bottom:50px;
        margin-top:50px;
    }

    .post-panel{
        position:relative;
    }


    #searchForm{
        display:inline;
    }


    .viewPostBtn:focus,
.viewPostBtn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    outline:none;
    border:none;
}

.viewPostBtn:hover{
    background:rgba(0, 0, 0, 0.19);
}



#imgUploadModal{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#212529;
    z-index:9999;
    display:none;
}

#imgUploadModal .text-center{
    padding-bottom:10px;
}


.new-profile-img{
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    width:50%;
    margin-left:-25%;
    background:#e9ebee;
    padding-left:25px;
    padding-right:25px;
}

    .new-profile-img h3 {
        font-family: 'Timmana', sans-serif;
        font-size:50px;
    }

.laterBtn{
    position:absolute;
    top:15px;
    right:15px;
}


.popup-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left:20px;
    
}


    .popup-btn .popupmenu {
        visibility: hidden;
        background-color: #ddd;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -44.5px;
    }

        .popup-btn .popupmenu::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #ddd transparent transparent transparent;
        }

    .popup-btn .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*xxxxxxxx User Profile xxxxxxxxxx*/

.prevImg {
    position: absolute;
    left: 50px;
    font-size: 40px;
    top: 50%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index:9999;
}

.nextImg {
    position: absolute;
    right: 50px;
    font-size: 40px;
    top: 50%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 9999;
}

.prevImg:hover,
.nextImg:hover{
    cursor:pointer;
    color:#fff;
}


.load-container{
    padding-top:50px;
    text-align:center;
    padding-bottom:50px;
}

.load-container p{
    margin-top:50px;
    font-size:20px;
}

#loader-6 {
    left: -2.5px;
}

    #loader-6 span {
        display: inline-block;
        width: 20px;
        height: 100px;
        background-color: #0047ff;
    }

        #loader-6 span:nth-child(1) {
            animation: grow 1s ease-in-out infinite;
            background-color: #012a95;
        }

        #loader-6 span:nth-child(2) {
            animation: grow 1s ease-in-out 0.15s infinite;
            background-color: #0047ff;
        }

        #loader-6 span:nth-child(3) {
            animation: grow 1s ease-in-out 0.30s infinite;
            background-color: #012a95;
        }

        #loader-6 span:nth-child(4) {
            animation: grow 1s ease-in-out 0.45s infinite;
        }

@keyframes grow {
    0%, 100% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }

    50% {
        -webkit-transform: scaleY(1.8);
        -ms-transform: scaleY(1.8);
        -o-transform: scaleY(1.8);
        transform: scaleY(1.8);
    }
}


.profile-container {
    padding: 10px;
    width: 80%;
    
}

.profile-top {
    max-height:400px;
    position: relative;
    border-radius:10px;
}

#loadCoverUpdate {
    display: none;
}

.coverImg-preview {
    border: 2px solid #ddd;
    border-radius: 5px;
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #212529;
}


.profile-body{
    padding-top:20px;
}

.profile-table tr td{
    background:#fff;
}

.profile-img:hover{
    cursor:pointer;
}

.profile-top .profile-img{
    max-height:200px;
    border:3px solid #ddd;
    border-radius:10px;
    display:inline-block;

}

.profile-top .profile-img {
    background-color:#fff;
    border: 20px solid transparent;
    border-image-source: url(../images/rusticborder.jpg);
    border-image-slice: 100 100 96 106;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
}

.profile-img-box{
    display:inline-block;
    position:relative;
}

.edit-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.47);
    padding: 2px;
    border-radius: 5px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.edit-photo2 {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.47);
    padding: 2px;
    border-radius: 5px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 999;
}
.edit-photo2:hover,
.edit-photo:hover{
    cursor:pointer;
    color:#2196F3;
    text-shadow:-1px 1px 5px #000, 1px -1px 5px #000;
}



.profile-top h4 {
    display: inline-block;
    vertical-align: bottom;
    font-family: 'Timmana', sans-serif;
    font-size:40px;
    position:relative;
    color:#fff;
    text-shadow:-2px 1px 5px #000, 0 -1px 2px #000;

}


.profile-top{
    max-height:400px;
}

.cover-photo-container{
    position:relative;
    height:400px;
    overflow:hidden;
    border:2px solid #ddd;
    border-radius:5px;
    background:#212529;

}

.profile-top .cover-img {
    width: 100%;
    max-width: 100%;
    z-index: 0;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

#previewCoverImg {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    
}
    
    
    
    
    
    .profileImg-name-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
    }


.profileTabs{
    min-height:560px;
}

.profileTabs .tab-pane {
    min-height: 300px;
    padding-top: 25px;
}

.profileTabs .nav-tabs li a {
    text-transform: uppercase;
    font-size: 14px;
    color: #777;
}

.profileTabs .nav-tabs li.active a {
    color: #000;
    background:#e9ebee;
}

    .profileTabs .nav-tabs li a:hover {
        color: #000;
        background: #e9ebee;
    }



.profileTabs .tab-content h4 {
    font-size: 30px;
    font-family: 'Timmana', sans-serif;
}

.privacy-warning{
    border:5px solid #ddd;
    border-radius:10px;
    padding-top:25px;
    padding-bottom:25px;
    background:#212529;
    text-align:center;
    padding-left:5px;
    padding-right:5px;
}

.privacy-warning h3{
    font-family: 'Radley',sans-serif;
    font-size:30px;
    color:#fff;
    text-align:center;
}

.privacy-warning h3 a:focus,
    .privacy-warning h3 a {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        color:#0053ff;
        text-decoration:none;
    }

    .privacy-warning h3 a:hover {
        text-decoration:none;
        color:#2196F3;
    }

  

.profileTabs .tab-content .tab-box {
    
    font-size: 18px;
    border-top: 1px solid #ddd;
    border-bottom:1px solid #ddd;
    padding: 15px;
    min-height:100px;
    margin-bottom:25px;
}



.info-block{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#e9ebee;
    padding-top:50px;
}

.mobile-profile{
    display:none;
}


.img-upload-container .form-horizontal{
   
    padding:15px;
}

.img-upload-container .form-block{
    margin-top:25px;
    margin-bottom:25px;
}

.img-upload-container .form-block textarea{
    min-height:150px;
    font-size:18px;
}

.choose_upload{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#212529;
    z-index:99;
}

.chooser {
    color: #777;
    font-size: 40px;
    font-family: 'Limelight',cursive;
    padding-top: 150px;
    padding-bottom: 150px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.chooser:hover{
    color:#fff;
    cursor:pointer;
}

#imageU{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:50%;
    border-right:2px solid #cccccc;
}

#videoU{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:50%;
    border-left:2px solid #ccc;
}

.back-to-choose {
    position: absolute;
    top: 5px;
    left: 15px;
    font-size: 25px;
    color: #777;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index:98;
}

.back-to-choose:hover{
    cursor:pointer;
    color:#fff;
}

.cancelBtn,
.img-upload-container .cancelBtn{
    font-size:20px;

}


#loadImgUpload .page-header{
    color:#fff;
}


.modalimg {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.84);
}


.modalimg-content{
    margin:auto;
    display:block;
    width:75%;
    max-width:700px;
    border-radius:5px;
    box-shadow:0 5px 10px #000;
    margin-bottom:100px;
}

.modalz {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000000;
}


.modalz-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 90%;
    text-align: center;
}

.closeAcctModal,
.closeModal {
    color: #fff;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    z-index:999;
}

.closeAcctModal:hover,
    .closeModal:hover {
        cursor: pointer;
        color: #a10000;
    }

.closeAcctModal{
    font-size:20px;
}



.mainImg {
    border-radius: 5px;
    max-width: 100%;
    max-height:700px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);

}



.lightbox-caption p {
    color: #fff;
    font-family: 'Timmana', sans-serif;
}

.lightbox-caption{
    max-height:500px;
    overflow:auto;
    margin-top:10px;
    font-size:20px;
}

@media (min-width:1300px){
   

    .mainImg{
        max-height:600px;
    }
}

.photo-container{
    display:inline-block;
    position:relative;
}

.deleteImgBtn{
    position:absolute;
    top:0;
    right:0;
    z-index:998;
}

.publicBtn{
    position:absolute;
    top:0;
    right:40px;
    z-index:998;
}




.scroll-img-menu {
    background-color: #000;
    overflow: auto;
    white-space: nowrap;
    position: fixed;
    bottom: 15px;
    margin-bottom: -185px;
    left: 0;
    right: 0;
    padding-bottom: 10px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

.scroll-img-menu.open{
    margin-bottom:0;
}

    .scroll-img-menu::-webkit-scrollbar {
        height: 10px;
    }

    .scroll-img-menu::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .scroll-img-menu::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background: #ddd;
    }


#img-menu-btn {
    padding: 15px;
    background: #404347;
    font-family: 'LimeLight',cursive;
    color: #fff;
    font-size: 25px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    z-index:9;
}

#img-menu-btn:hover{
    cursor:pointer;
    background:#212529;
}

#img-menu-btn.open{
    margin-bottom:175px;
}


.thumbnailVid {
    display: inline-block;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    border: 5px solid transparent;
    vertical-align:bottom;
}

.thumbnailVid.hide_vid{
    display:none;
}

    .thumbnailVid.active {
        display: inline-block;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
        border: 5px solid #0050a1;
    }

.thumbnailImg {
    display: inline-block;
    max-height: 150px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    border: 5px solid transparent;
}

.thumbnailImg.hide_img{
    display:none;
}

    .thumbnailImg.active {
        display: inline-block;
        max-height: 150px;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
        border: 5px solid #0050a1;
    }

    .thumbnailVid:hover,
    .thumbnailVid.active:hover,
        .thumbnailImg.active:hover,
        .thumbnailImg:hover {
            cursor: pointer;
            border-color: #0050a1;
            opacity: .5;
        }



.mainVid{
    max-height:700px;
}


.back-btn,
.back-btn:focus,
.addPhotoBtn:focus,
.addPhotoBtn {
    display: block;
    margin-bottom: 25px;
    width: 100%;
    border: 3px solid #777777;
    background: #2e3237;
    color: #777;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size:20px;
}

.back-btn:hover,
    .addPhotoBtn:hover {
        border: 3px solid #777777;
        background: #2e3237;
        color: #fff;
        box-shadow: 0 3px 8px #000;
    }



    .photo-row{
        text-align:center;
    }

    .photo-row .col-xs-12,
    .photo-row .col-md-4{
        height:220px;
    }

.deleteVid{
    max-width:100%;
    max-height:500px;
    border:5px solid #ccc;
    border-radius:5px;
}

.tab-img {
    max-height: 200px;
    max-width:100%;
    border: 5px solid #ddd;
    border-radius: 5px;
    vertical-align: bottom;
    margin: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.tab-vid {
    border: 5px solid #ddd;
    border-radius: 5px;
    vertical-align: bottom;
    margin: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.tab-vid:hover,
    .tab-img:hover {
        cursor: pointer;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.54);
    }

    #loadProfile .form-block textarea{
        overflow:hidden;
        min-height:150px;
    }

#reminder {
    position: fixed;
    left: 25px;
    bottom: 0;
    width: 300px;
    background: #000;
    padding: 25px;
    text-align: center;
    color: #fff;
    border: 10px solid #00dbde;
}

.addProfileBtn{
    width:100%;
    margin-bottom:25px;
}

.hideone_1,
.hidethis_0{
    display:none;
}


#requestModal{
    z-index:9999;
}

.modal-content{
    background:#212529;
    border:10px solid #ccc;
}


#requestModal .modal-dialog{
    margin-top:70px;

}

#requestModal .modal-body{
    padding-top:50px;
    padding-bottom:50px;
    text-align:center;
}

#publicModal img,
#requestModal img{
    max-height:250px;
    margin-bottom:15px;
    border-radius:5px;
}


#publicModal .modal-body,
#removePostModal .modal-body{
    text-align:center;
}

#markReadModal .modal-body h3,
#updateModal .modal-body h3,
#publicModal .modal-body h3,
#removePostModal .modal-body h3,
    #requestModal .modal-body h3 {
        font-family: 'Timmana', sans-serif;
        font-size:40px;
        color:#fff;
    }

.modal-body{
    text-align:center;
}

.modal-body h3 {
    font-family: 'Timmana', sans-serif;
    font-size: 40px;
    color: #fff;
    text-align:center;
}

.modal-body .btn {
    font-size: 25px;
    min-width: 25%;
}

.modal-body .comUnlikeBtn,
.modal-body .unlikeBtn {
    min-width: unset;
    font-size: 20px;
    position:absolute;
    left:5px;
}


#messageModal .modal-body .fileUpload,
#uploadImgModal .modal-body .fileUpload{
    width:unset;
    min-width:unset;
    font-size:16px;
}


#updateModal .modal-body .btn,
#publicModal .modal-body .btn,
#removePostModal .modal-body .btn,
    #requestModal .modal-body .btn{
        font-size:25px;
        width:25%;
    }

#updateModal .modal-body textarea{
    font-size:20px;
    font-family:'Radley', sans-serif;
    color:#212121;
}

#friendRequest {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    
}

#friendRequest .privacy-warning{
    width:70%;
}

.request-box{
    width:70%;
    background:#e9ebee;
}

.blockBtn{
    display:block;
    margin:auto;
}

.friend-setting:focus,
.friend-setting {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    border: 3px solid #777;
    background: none;
    color: #777;
    outline: none;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.friend-setting:hover{
    border: 3px solid #fff;
    color:#fff;
    background:none;
}

.block-menu{
    position:absolute;
    bottom:65px;
    right:0;
    width:150px;
    background:#fff;
    padding:25px 10px;
    border:5px solid #ddd;
    border-radius:5px;
    box-shadow:0 3px 8px rgba(0, 0, 0, 0.73);
    display:none;
}

.block-user{
    text-align:center;
}

.block-user .btn{
    font-size:25px;
    margin-top:50px;
}

.block-user h3{
    font-family:'LimeLight', cursive;
    text-align:center;
    color:#fff;
    font-size:40px;
}

#inner-fr {
    width: 100%;
    margin: auto;
    text-align: center;
    background: #e9ebee;
    border-radius: 5px;
}


.popover{
    z-index:9999;
}

#mblGuide{
    display:none;
}


#inner-fr .thumbnail{
    border:5px solid #ddd;
    margin-top:10px;
    margin-bottom:10px;
}

#inner-fr .thumbnail img{
    max-height:200px;
    border-radius:5px;
}

#friendSection{
    margin-bottom:10px;
}

.deleteProfile{
    display:block;
    margin:auto;
    margin-bottom:15px;
}



.updateBtn{
    position:absolute;
    right:25px;
}

.tab-pane{
    position:relative;
}



.update-container{
    text-align:center;
    height:500px;
    overflow-y:scroll;
    overflow-x:hidden;
    padding:10px;
    padding-bottom:50px;
}


#markReadModal .modal-body h3,
#updateModal .modal-body h3 {
    font-family: 'Timmana', sans-serif;
}

#markReadModal .modal-body h3{
    font-size:40px;
}


#markReadModal .modal-body{
    text-align:center;
}

.update-container .form-block{
    margin-top:15px;
    margin-bottom:15px;
}

.update-container .form-block textarea{
    min-height:100px;
}

.update-container::-webkit-scrollbar {
    width: 10px;
}

.update-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.update-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background: #ddd;
}



.publicInfo {
    color: #000;
    position: absolute;
    right: 0;
    font-size: 25px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.publicInfo:hover{
    cursor:pointer;
    color:#fff;
}


.info-backdrop{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9998;
    background:rgba(0, 0, 0, 0.84);
    display:none;
}

.info-backdrop .info-box{
    position:absolute;
    top:50%;
    left:50%;
    height:500px;
    width:50%;
    margin-top:-250px;
    margin-left:-25%;
    text-align:center;
    background:#000;
    padding:50px 20px;
    color:#fff;
    font-size:20px;
    border-radius:20px;
}

.closeBox {
    position: absolute;
    top: 10px;
    right: 15px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index:9999;
}

.closeBox:hover{
    cursor:pointer;
    color:#d80000;
}

.hideprofile_1{
    display:none;
}

.profile-update .form-block{
    margin-top:15px;
    margin-bottom:15px;
}

.profile-update .form-block textarea{
    min-height:150px;
    font-size:20px;
}

#loadEditView{
    display:none;
}


.info-content-box p{
    color:#cecece;
    font-size:18px;
    text-indent:50px;
}


.ddBtn{
    display:block;
    width:95%;
    margin:auto;
    margin-bottom:10px;
}


.lightbox-img .prev,
.lightbox-img .next,
.lightbox-img .prev:focus,
.lightbox-img .next:focus {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top:-167px;
    background: none;
    padding-top: 20%;
    padding-bottom: 20%;
    color: #fff;
    font-size: 18px;
    -webkit-transition: .6s ease;
    transition: .6s ease;
    border-radius: 5px;
    border: 1px solid transparent;
}



.lightbox-img .prev{
    left:-42px;
}

.lightbox-img .next {
    right: -42px;
    margin-left: 0;
}

    .lightbox-img .prev:hover,
    .lightbox-img .next:hover {
        background-color: rgba(0,0,0,0.9);
        color: #3398fd;
        border-color: #3398fd;
    }

    .lightbox-img .prev:active,
    .lightbox-img .next:active {
        background-color: #0053ff;
    }


    .lightbox-img{
        min-height:700px;
        position:relative;
    }


/*xxxxxxxxxxxxxx Messages Inbox xxxxxxxxxxx*/
#loadMsgCount span.label-default {
    font-family: 'Times New Roman', Times, serif;
    padding-bottom:3px;
}

.chk-all {
    display: inline-block;
    padding: 6px 12px;
    background: #212529;
    color: #777;
    border: 3px solid #ddd;
    border-radius: 10px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    font-size:18px;
}

.form-horizontal .tagLbl {
    color: #777;
    font-size: 20px;
    padding:5px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    border:1px solid transparent;
    text-align:center;
}

.form-horizontal .tagLbl:hover{
    cursor:pointer;
    color:#fff;

}

.form-horizontal .tagLbl.selected{
    color:#fff;
    border:1px solid #fff;
    border-radius:20px;
    padding:5px;
}

#tagModal .okBtn{
    min-width:unset;
    width:unset;
    font-size:18px;
    display:none;
    margin-top:20px;
}

.ckbx-container {
    display: inline-block;
    position: relative;
    padding-left: 15px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align:top;
    margin-top:4px;
}

    /* Hide the browser's default checkbox */
    .ckbx-container input {
        position: absolute;
        opacity: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
}

.chk-all .ckbx-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* On mouse-over, add a grey background color */
.ckbx-container:hover input ~ .checkmark {
    background-color: #212529;
}

/* When the checkbox is checked, add a blue background */
.ckbx-container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.ckbx-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.ckbx-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.inbox-nav .inbox-btn {
    background: #212529;
    color: #777;
    border: 3px solid #ddd;
    border-radius: 10px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    font-size:18px;
    width:100px;
}

    .inbox-nav .inbox-btn:hover {
        color: #fff;
        background: #212529;
        border: 3px solid #ddd;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.58);
    }

.inbox-nav{
    padding:10px;
    border:5px solid #ddd;
    border-radius:5px;
    margin-bottom:20px;
    background:#ccc;
}

.inbox-nav .btn-toolbar{
    display:inline-block;
    vertical-align:top;

}



#inbox-table .t-row{
    font-size:20px;
    border-top:2px solid #ddd;
    border-bottom:2px solid #ddd;
    
}


#inbox-table .t-row td{
    padding-top:15px;
    padding-bottom:15px;
}

#inbox-table .t-row td {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#inbox-table .t-row:hover td{
    cursor:pointer;
    background:#ddd;
}



#inbox-table .t-row.read td{
    background:#ccc;
}

#inbox-table .t-row.notread td{
    background:#212529;
    color:#777;
}

#inbox-table .t-row.notread:hover td{
    color:#fff;
}

    #inbox-table .t-row.selected td {
        background: #212529;
        color:#fff;
    }


.tbl-subject{
    white-space:nowrap;
    overflow:auto;
}


.mark-read-btn{
    font-size:25px;
}


.cancelModal {
    position: absolute;
    right: 10px;
    font-size: 25px;
    top: 5px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    color:#777;
    background:none;
    border:none;
    outline:none;
    z-index:2000;
}

.cancelModal:hover{
    cursor:pointer;
    color:#d80000;
}


.backBtn{
    width:100%;
}


.message-detail{
    padding:25px;
    background:#fff;
    border-radius:5px;
    margin-top:5px;
}

.msg-divider{
    height:25px;
    background:#e9ebee;
    margin-left:-25px;
    margin-right:-25px;
    margin-top:25px;
}

.message-top{
    font-size:25px;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
}

.message-body p{
    font-size:20px;
    margin-left:25px;
}

.message-body{
    border-bottom:1px solid #ddd;
    padding-bottom:100px;
}

.user-info{
    padding-top:10px;
    padding-bottom:10px;
    font-size:20px;
}


.inbox-reply .form-block textarea{
    min-height:150px;
    font-size:20px;
}

.inbox-reply .form-block{
    margin-bottom:10px;
    margin-top:10px;
}

.inbox-reply{
    text-align:center;
    padding-top:50px;
}

#loadNewMsg #sendMtplMsg{
    width:100%;
}


#loadNewMsg .fileUpload{
    min-width:unset;
    font-size:16px;
}


.inbox-reply .form-block .page-header{
    color:#fff;
}


.multiSelect ul li{
    font-size:20px;
}

.inbox-reply .form-block .dropdown dt{
    height:34px;
}

.hida{
    font-size:18px;
    width:100%;
}

.message-img{
    text-align:center;
    padding:15px;
}

.message-img img{
    max-width:100%;
    border-radius:5px;
}

.message-img img:hover{
    cursor:pointer;
}

#sendMtplMsg{
    width:70%;
    margin:auto;
}


.back-drop .inbox-reply{
    width:50%;
    margin:auto;
    border:1px solid #ddd;
    border-radius:5px;
    background:#fff;
    padding:15px;
    padding-top:25px;
    position:relative;
}

.cancel-reply {
    position: absolute;
    top: 5px;
    font-size: 20px;
    right: 5px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.cancel-reply:hover{
    cursor:pointer;
    color:#d80000;
}

.message-reply{
    border-top:1px solid #ddd;
    padding-top:25px;
}

.message-reply .form-block textarea{
    min-height:150px;
    font-size:20px;
}



/*xxxxxxx Contact xxxxxxxxx*/
.confirm-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#confirm-box {
    text-align: center;
    width: 80%;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -40%;
    border: 10px solid #616161;
    border-radius: 10px;
    background:#212529;
    box-shadow: inset 0 0 15px #000;
}

    #confirm-box h2 {
        font-family: 'Limelight', cursive;
        font-size: 60px;
        color: #fff;
        text-shadow: -3px 3px 0 #000, 1px -1px 0 #000;
        margin-bottom:50px;
    }

    #confirm-box p {
        font-size: 25px;
        color: #fff;
        text-shadow: 0 0 10px #000;
    }

    #confirm-box .btn-default {
        width: 70%;
        margin: auto;
        border: 2px solid #fff;
        border-radius: 10px;
        background: #212529;
        box-shadow: 0 8px 0 #000;
        font-size: 20px;
        color: #c8c8c8;
        margin-top: 25px;
        font-family: 'Radley', sans-serif;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }

    #confirm-box .btn-default:hover{
        color:#fff;
    }

        #confirm-box .btn-default:active {
            box-shadow: 0 3px 0 #000;
            color: #fff;
            -webkit-transform: translate(0,5px);
            transform: translate(0,5px);
        }

.contact-title {
    text-align: center;
    font-family: 'Limelight', cursive;
    font-size:35px;
    color:#fff;
}


        #loadContactForm .form-block{
            margin-top:15px;
            margin-bottom:15px;
            
        }

        #loadContactForm .form-block textarea{
            min-height:150px;
        }

        #loadContactForm .btn-danger{
            font-size:18px;
        }

        #loadContactForm{
            text-align:center;
        }





    /*xxxxxxxxxx Home xxxxxxxxxxx*/
    .parallaxDiv{
        color:#777;
        background:#212529;
        text-align:center;
        padding:50px;
        position:relative;
    }

    .parallaxDiv p{
        font-size:20px;
    }

        .parallaxDiv h3 {
            font-family: 'Limelight', cursive;
            color:#fff;
            font-size:40px;
        }


    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
        position:relative;
        background-attachment:fixed;
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
    }

.bgimg-1 {
    background-image: url(../images/smedia.jpg);
    min-height: 800px;
    border-radius:5px 5px 0 0;
}

.bgimg-2 {
    background-image: url(../images/features.jpg);
    min-height: 600px;
}

.bgimg-3 {
    background-image: url(../images/media.jpg);
    min-height: 600px;
   
}

.bgimg-4 {
    background-image: url(../images/mediaicons.jpg);
    min-height: 600px;
    border-radius: 0 0 5px 5px;
}

.home-container .caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
}

    .home-container .caption span.border {
        background-color: #000;
        color: #fff;
        padding: 18px;
        font-size: 25px;
        letter-spacing: 5px;
        border-radius: 5px;
        font-family: 'Limelight', cursive;
    }


  .app-panel{
      position:fixed;
      bottom:0;
      right:15px;
      width:300px;
      z-index:99;
      display:none;
  }

  .app-panel .panel-heading{
      position:relative;
      background:#212529;
      color:#fff;
      font-family:'Limelight',cursive;
      font-size:25px;
  }

  .app-panel .panel-body{
      text-align:center;
  }

  .app-panel .panel-body p{
      font-size:20px;
  }

.closePanel {
    position: absolute;
    right: 10px;
    z-index: 999;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size:18px;

}

.closePanel:hover{
    cursor:pointer;
    color:#d80000;
}






    /*xxxxxxxxxxx Notifications xxxxxxxxxx*/
    .notify-filter{
       margin-bottom:50px;
    }

    .selectList{
        border:5px solid #ddd;
        background:#212529;
        color:#777;
        font-size:20px;
        height:unset;
    }

    .selectList:focus{
        color:#fff;
    }

    .notify-container{
        padding:0 25px;
    }

.notify-item {
    border: 5px solid #ddd;
    border-radius: 20px;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 20px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    background:#777;
    color:#fff;
    opacity:.7;
}

.notify-item.new{
    border-color:#0050a1;
    background:#212529;
    opacity:1;
}

.notify-item.new:active{
    border-color:#2196F3;
}

.notify-item:hover{
    
    cursor:pointer;
    opacity:1;
}

    .notify-item span.pull-right{
        font-size:16px;
        padding-top:5px;
    }


.dropdown-content p{
    color:#fff;

}


.pokeBox img{
    max-height:100px;
    border-radius:5px;
    border:5px solid #777;
}

.pokeBox{
    border:5px solid #ddd;
    border-radius:15px;
    background:#212529;
    padding:25px 10px;
    width:70%;
}

.pokeBox h2{
    font-family:'Limelight', cursive;
    color:#fff;
}

.pokeBox h2 span{
    display:block;
    text-align:center;
    font-size:20px;
}

.bookmark-container{
    width:70%;
}


.back-to-notify:focus,
.back-to-notify {
    width: 70%;
    display: block;
    margin-bottom: 25px;
    border: 3px solid #777777;
    background: #2e3237;
    color: #777;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size: 20px;
}


    .back-to-notify:hover {
        border: 3px solid #777777;
        background: #2e3237;
        color: #fff;
        box-shadow: 0 3px 8px #000;
    }


#notify-msg{
    width:70%;
}

/*xxxxxxxxxx Support xxxxxxxxx*/
.help-box img{
    max-width:100%;
}

.help-box{
    text-align:center;
    margin-top:15px;
    margin-bottom:15px;
    border-bottom:3px solid #777;
}

.help-row{
    margin-top:25px;
    margin-bottom:25px;
    text-align:center;
}

.help-row h4{
    font-family:'LimeLight',cursive;
    font-size:35px;
    margin-top:50px;
    background:#000;
    color:#fff;
}

.support-container h3 {
    font-family: 'LimeLight',cursive;
    font-size:40px;
    
}

.help-box p{
    border:3px solid #fff;
    border-radius:5px;
    padding:5px;
    margin-top:10px;
    margin-bottom:10px;
    font-size:20px;
}


.btn-default,
.btn-default:focus{
    outline:none;
}




/*xxxxxxxxxx File View xxxxxxxxx*/

.code-view-container{
    background:url(../Content/images/vsbackground.png);
    background-size:cover;
    width:100%;
    height:560px;
}

.code-view-row{
    margin-left:0;
    margin-right:0;
}

.file-explorer,
.menu-lvl1,
.menu-lvl2{
    list-style:none;
    padding:0;
    margin:0;
    padding:0;
}

.menu-lvl1,
.menu-lvl2{
    margin-left:25px;
}

    .file-explorer li a,
    .menu-lvl1 li a,
    .menu-lvl2 li a {
        font-size: 18px;
        text-decoration: none;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        color:#fff;
    }

    .menu-lvl1 li a,
    .menu-lvl2 li a{
        font-size:16px;
        color:#fff;
    }

.fa-folder,
.fa-folder-open{
    color:orange;
}


.spacer{
    opacity:0;
}

.file-explore-container {
    width: 100%;
    overflow: auto;
    background: url(../Content/images/explorer.png) center no-repeat;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 25px;
    height: 460px;
    width: 168px;
    overflow: hidden;
    text-align: left;
    margin-top: 55px;
    margin-left: 85px;
    padding-left: 5px;
}

.file-explorer{
    height:392px;
    width:160px;
    overflow:auto;
}



    .file-explorer::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .file-explorer::-webkit-scrollbar-thumb {
        background: #686868;
    }

    .file-explorer::-webkit-scrollbar-track {
        background: #3e3e42;
    }

    .file-explorer::-webkit-scrollbar-corner {
        background: #2d2d30;
    }

    


.menu-lvl1 li a,
.menu-lvl2 li a{
    font-size:15px;
}

.menu-lvl1 li,
.menu-lvl2 li{
    width:300px;
}


/*xxxxxxxxx Games xxxxxxxxxx*/
.game-container{
    text-align:center;
}

.game-container h3{
    font-family:'Radley',cursive;
    font-size:40px;
    border-bottom:3px solid #333;
    color:#333;
}

    .game-container img {
        max-height: 300px;
        max-width:100%;
        border: 5px solid transparent;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        border-radius:5px;
    }

    .game-container img:hover{
        cursor:pointer;
        border-color:#212529;
    }


/*xxxxxxxxxxx Connect Four xxxxxxxxxxxxx*/
#gameContainer {
    background-color: #FFF024;
    padding: 5px;
    padding-bottom: 10px;
    width: 440px;
    height: 380px;
    padding-left:15px;
}

.column {
    width: 56px;
    padding: 3px;
    float: left;
}

    .column:hover {
        cursor: pointer;
        opacity: .8;
    }

.circle {
    border-radius: 50%;
    margin: 3px;
    width: 54px;
    height: 54px;
    display: inline-block;
    border:3px solid #1c1c1c;
}

#startGame {
    width: 120px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    background-color: black;
    color: white;
    font-family:'Radley',cursive;
    font-size:20px;
}

    #startGame:hover {
        color: red;
        cursor: pointer;
    }



    /*xxxxxxxx Checkers xxxxxxx*/

#gameContainer2 {
    background-color: black;
    width: 480px;
    height: 480px;
    
}

.outer-game-container{
    border:10px solid #000;
    width:500px;
}

.checker-row {
    width: 100%;
}

.square {
    float: left;
    width: 60px;
    height: 60px;
}

.circle2 {
    border-radius: 50%;
    width: 94%;
    height: 94%;
    margin: 3%;
    color: #fff;
    text-align: center;
    line-height: 56px;
    font-size: 30px;
}

.square:hover {
    cursor: pointer;
    opacity: .8;
}

#startGame {
    width: 120px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    background-color: black;
    color: white;
}

    #startGame:hover {
        color: red;
        cursor: pointer;
    }

.gameInfo{
    font-size:20px;
    text-align:center;
    width:500px;
    font-family:'Timmana',cursive;
    padding-top:10px;
}


/*xxxxxxxx BreakOut xxxxxxxxxxx*/

.breakout-container{
    width:70%;

}

.breakout-container p{
    margin-top:15px;
}

#btnStart{
    margin-top:25px;
}


.gameOver,
.winner{
    position:fixed;
    top:50%;
    left:50%;
    height:150px;
    width:400px;
    margin-top:-75px;
    margin-left:-200px;
    text-align:center;
    background:#212529;
    border:10px solid #777;
    box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.83);
    border-radius:5px;
    z-index:999;
    display:none;
}

.gameOver h3,
.winner h3{
    color:#fff;
    font-family:'Limelight',cursive;
    font-size:40px;
}
canvas{
    border:5px solid #0095DD;
    border-radius:5px;
    padding-bottom:2px;
}

#mbl-ctrls{
    display:none;
    
}

    /*xxxxxxxxxxxxx Mobile App xxxxxxxxxxxxxxxx*/
.slide-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 10px solid #000;
    border-radius: 5px;
    background: linear-gradient(90deg,#000,#020262,#000);
}

.picslider {
    min-height: 425px;
    max-height: 550px;
    width: 100%;
    position: relative;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

    .picslider.animating {
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        will-change: transform;
    }








.picslide {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding: 0;
}

.picslide img{
    max-width:100%;
    max-height:425px;
    border:1px solid #0053ff;
    border-top:none;
    border-bottom:none;
}



    .picslide:nth-child(1) {
        left: 0;
    }

    .picslide:nth-child(2) {
        left: 100%;
    }

    .picslide:nth-child(3) {
        left: 200%;
    }

    .picslide:nth-child(4){
        left:300%;
    }

   



.appDownload img {
    margin-top: 50px;
    border: 5px solid #2196F3;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 7px #424242;
}

    .appDownload img:active {
        box-shadow: 0 3px #2f2f2f;
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

.appDownload span {
    display: block;
    font-size: 25px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-family:'Limelight',cursive;
    color:#0053ff;
    margin-top:20px;
}



    .appDownload:hover {
        text-decoration: none;
    }

.appDownload:hover span{
    text-decoration:none;
    color:#2196F3;
}

.appDownload:focus{
    text-decoration:none;
}

.app-step{
    text-align:center;
}
.app-step img{
    max-width:100%;
    border-radius:5px;
    max-height:435px;
}

.app-row h4{
    font-family:'Limelight',cursive;
    margin-top:50px;
}

.app-step p{
    margin-top:10px;
    background:#fff;
    padding:5px;
    border-radius:5px;
    min-height:110px;
}



.help-btn {
    background: #212529;
    color: #fff;
    text-transform: uppercase;
    font-family: 'LimeLight', cursive;
    font-size: 20px;
    width: 100%;
    padding: 8px;
    margin-top: 20px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: .85;
}


    .help-btn:focus {
        opacity: 1;
        background: #212529;
        color: #fff;
    }

    .help-btn:hover {
        opacity: 1;
        background: #212529;
        color: #fff;
    }

    #needHelp{
        margin-top:25px;
    }

    #needHelp .well{
        background:#e9ebee;
    }



#chat_window{
    width:70%;
    margin:auto;
}

#chat_title_bar strong{
    text-align:center;
    font-size:25px;
}

#chat_box {
    margin-top: 25px;
    font-size: 18px;
    font-family: 'Limelight',cursive;
}

.onlineUser {
    color: #0061af;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    
}

.onlineUser:hover{
    text-decoration:none;
    color:#4db0ff;
    cursor:pointer;
}

#chat_min_button{
    font-size:25px;
}

#chat_min_button:hover{
    cursor:pointer;
}


/*xxxxxxx Buttons xxxxxxxxxx*/
.btn-danger:focus,
.btn-warning:focus,
.btn-default:focus,
.btn-info:focus{
    outline: none;
}





/*xxxxxx Calendar xxxxxxx*/
.calendar-wrap{
    width:90%;
    margin:auto;
}

#eventModalTitle{
    text-align:center;
    font-family:'Limelight',cursive;
    font-size:40px;
}


/*xxxxx Preloader xxxxxx*/
.preloader-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    
}

.percentage {
    z-index: 100;
    border: 1px solid #ccc;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-size: 15px;
}

.loaders,
.percentage {
    height: 30px;
    max-width: 500px;
    border: 2px solid #2d6bd2;
    border-radius: 20px;
    font-weight: 300;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

    .loaders:after,
    .percentage:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

.trackbar {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    position: relative;
    opacity: 0.99;
    
}

.loadbar {
    width: 0%;
    height: 100%;
    background: repeating-linear-gradient( 45deg, #0021ff, #0021ff 10px, #2d6bd2 10px, #2d6bd2 20px ); /* Stripes Background Gradient */
    box-shadow: 0px 0px 14px 1px #0021ff;
    position: absolute;
    top: 0;
    left: 0;
    animation: flicker 5s infinite;
    overflow: hidden;
}

.glow {
    width: 0%;
    height: 0%;
    border-radius: 20px;
    box-shadow: 0px 0px 80px 10px #0021ff;
    position: absolute;
    bottom: -5px;
    animation: animation 5s infinite;
}

.load-title {
    text-align: center;
    color: #0021ff;
    font-size: 70px;
    font-family: 'Limelight',cursive;
    margin-top: 15%;
    text-shadow: -5px 0 0 #2d6bd2, 1px 0 0 #2d6bd2;
}

@keyframes animation {
    10% {
        opacity: 0.9;
    }

    30% {
        opacity: 0.86;
    }

    60% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.75;
    }
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -56px;
    width: 112px;
    height: 70px;
    *zoom: 1;
}

    .loading:before,
    .loading:after {
        display: table;
        content: "";
    }

    .loading:after {
        clear: both;
    }

    .loading .finger {
        float: left;
        margin: 0 2px 0 0;
        width: 20px;
        height: 100%;
    }

    .loading .finger-1 {
        -webkit-animation: finger-1-animation 2s infinite ease-out;
        animation: finger-1-animation 2s infinite ease-out;
    }

        .loading .finger-1 span {
            -webkit-animation: finger-1-animation-span 2s infinite ease-out;
            animation: finger-1-animation-span 2s infinite ease-out;
        }

        .loading .finger-1 i {
            -webkit-animation: finger-1-animation-i 2s infinite ease-out;
            animation: finger-1-animation-i 2s infinite ease-out;
        }

    .loading .finger-2 {
        -webkit-animation: finger-2-animation 2s infinite ease-out;
        animation: finger-2-animation 2s infinite ease-out;
    }

        .loading .finger-2 span {
            -webkit-animation: finger-2-animation-span 2s infinite ease-out;
            animation: finger-2-animation-span 2s infinite ease-out;
        }

        .loading .finger-2 i {
            -webkit-animation: finger-2-animation-i 2s infinite ease-out;
            animation: finger-2-animation-i 2s infinite ease-out;
        }

    .loading .finger-3 {
        -webkit-animation: finger-3-animation 2s infinite ease-out;
        animation: finger-3-animation 2s infinite ease-out;
    }

        .loading .finger-3 span {
            -webkit-animation: finger-3-animation-span 2s infinite ease-out;
            animation: finger-3-animation-span 2s infinite ease-out;
        }

        .loading .finger-3 i {
            -webkit-animation: finger-3-animation-i 2s infinite ease-out;
            animation: finger-3-animation-i 2s infinite ease-out;
        }

    .loading .finger-4 {
        -webkit-animation: finger-4-animation 2s infinite ease-out;
        animation: finger-4-animation 2s infinite ease-out;
    }

        .loading .finger-4 span {
            -webkit-animation: finger-4-animation-span 2s infinite ease-out;
            animation: finger-4-animation-span 2s infinite ease-out;
        }

        .loading .finger-4 i {
            -webkit-animation: finger-4-animation-i 2s infinite ease-out;
            animation: finger-4-animation-i 2s infinite ease-out;
        }

    .loading .finger-item {
        position: relative;
        width: 100%;
        height: 100%;
        -webkit-border-radius: 6px 6px 8px 8px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 6px 6px 8px 8px;
        -moz-background-clip: padding;
        border-radius: 6px 6px 8px 8px;
        background-clip: padding-box;
        background: #fff;
    }

        .loading .finger-item span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: auto;
            padding: 5px 5px 0 5px;
        }

            .loading .finger-item span:before,
            .loading .finger-item span:after {
                content: '';
                position: relative;
                display: block;
                margin: 0 0 2px 0;
                width: 100%;
                height: 2px;
                background: #000;
            }

        .loading .finger-item i {
            position: absolute;
            left: 3px;
            bottom: 3px;
            width: 14px;
            height: 14px;
            -webkit-border-radius: 10px 10px 7px 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 10px 10px 7px 7px;
            -moz-background-clip: padding;
            border-radius: 10px 10px 7px 7px;
            background-clip: padding-box;
            background: #000;
        }

    .loading .last-finger {
        position: relative;
        float: left;
        width: 24px;
        height: 100%;
        overflow: hidden;
    }

    .loading .last-finger-item {
        position: absolute;
        right: 0;
        top: 32px;
        width: 110%;
        height: 20px;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        background: #fff;
        -webkit-animation: finger-5-animation 2s infinite linear;
        animation: finger-5-animation 2s infinite linear;
    }

        .loading .last-finger-item i {
            position: absolute;
            left: 0;
            top: -8px;
            width: 22px;
            height: 8px;
            background: #fff;
            overflow: hidden;
        }

            .loading .last-finger-item i:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 34px;
                height: 20px;
                -webkit-border-radius: 0 0 15px 15px;
                -webkit-background-clip: padding-box;
                -moz-border-radius: 0 0 15px 15px;
                -moz-background-clip: padding;
                border-radius: 0 0 15px 15px;
                background-clip: padding-box;
                background: #000;
            }

@-webkit-keyframes finger-1-animation {
    0% {
        padding: 12px 0 5px 0;
    }

    20% {
        padding: 12px 0 5px 0;
    }

    29% {
        padding: 4px 0 24px 0;
    }

    35% {
        padding: 4px 0 24px 0;
    }

    41% {
        padding: 12px 0 5px 0;
    }

    100% {
        padding: 12px 0 5px 0;
    }
}

@keyframes finger-1-animation {
    0% {
        padding: 12px 0 5px 0;
    }

    20% {
        padding: 12px 0 5px 0;
    }

    29% {
        padding: 4px 0 24px 0;
    }

    35% {
        padding: 4px 0 24px 0;
    }

    41% {
        padding: 12px 0 5px 0;
    }

    100% {
        padding: 12px 0 5px 0;
    }
}

@-webkit-keyframes finger-1-animation-span {
    0% {
        top: 0;
    }

    20% {
        top: 0;
    }

    29% {
        top: -7px;
    }

    35% {
        top: -7px;
    }

    41% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@keyframes finger-1-animation-span {
    0% {
        top: 0;
    }

    20% {
        top: 0;
    }

    29% {
        top: -7px;
    }

    35% {
        top: -7px;
    }

    41% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes finger-1-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    20% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    29% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    35% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    41% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@keyframes finger-1-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    20% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    29% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    35% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    41% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@-webkit-keyframes finger-2-animation {
    0% {
        padding: 6px 0 2px 0;
    }

    24% {
        padding: 6px 0 2px 0;
    }

    33% {
        padding: 2px 0 16px 0;
    }

    39% {
        padding: 2px 0 16px 0;
    }

    45% {
        padding: 6px 0 2px 0;
    }

    100% {
        padding: 6px 0 2px 0;
    }
}

@keyframes finger-2-animation {
    0% {
        padding: 6px 0 2px 0;
    }

    24% {
        padding: 6px 0 2px 0;
    }

    33% {
        padding: 2px 0 16px 0;
    }

    39% {
        padding: 2px 0 16px 0;
    }

    45% {
        padding: 6px 0 2px 0;
    }

    100% {
        padding: 6px 0 2px 0;
    }
}

@-webkit-keyframes finger-2-animation-span {
    0% {
        top: 0;
    }

    24% {
        top: 0;
    }

    33% {
        top: -7px;
    }

    39% {
        top: -7px;
    }

    45% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@keyframes finger-2-animation-span {
    0% {
        top: 0;
    }

    24% {
        top: 0;
    }

    33% {
        top: -7px;
    }

    39% {
        top: -7px;
    }

    45% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes finger-2-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    24% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    33% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    39% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    45% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@keyframes finger-2-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    24% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    33% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    39% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    45% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@-webkit-keyframes finger-3-animation {
    0% {
        padding: 0 0 0 0;
    }

    28% {
        padding: 0 0 0 0;
    }

    37% {
        padding: 0 0 12px 0;
    }

    43% {
        padding: 0 0 12px 0;
    }

    49% {
        padding: 0 0 0 0;
    }

    100% {
        padding: 0 0 0 0;
    }
}

@keyframes finger-3-animation {
    0% {
        padding: 0 0 0 0;
    }

    28% {
        padding: 0 0 0 0;
    }

    37% {
        padding: 0 0 12px 0;
    }

    43% {
        padding: 0 0 12px 0;
    }

    49% {
        padding: 0 0 0 0;
    }

    100% {
        padding: 0 0 0 0;
    }
}

@-webkit-keyframes finger-3-animation-span {
    0% {
        top: 0;
    }

    28% {
        top: 0;
    }

    37% {
        top: -7px;
    }

    43% {
        top: -7px;
    }

    49% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@keyframes finger-3-animation-span {
    0% {
        top: 0;
    }

    28% {
        top: 0;
    }

    37% {
        top: -7px;
    }

    43% {
        top: -7px;
    }

    49% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes finger-3-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    28% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    37% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    43% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    49% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@keyframes finger-3-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    28% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    37% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    43% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    49% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@-webkit-keyframes finger-4-animation {
    0% {
        padding: 8px 0 3px 0;
    }

    32% {
        padding: 8px 0 3px 0;
    }

    41% {
        padding: 4px 0 20px 0;
    }

    47% {
        padding: 4px 0 20px 0;
    }

    53% {
        padding: 8px 0 3px 0;
    }

    100% {
        padding: 8px 0 3px 0;
    }
}

@keyframes finger-4-animation {
    0% {
        padding: 8px 0 3px 0;
    }

    32% {
        padding: 8px 0 3px 0;
    }

    41% {
        padding: 4px 0 20px 0;
    }

    47% {
        padding: 4px 0 20px 0;
    }

    53% {
        padding: 8px 0 3px 0;
    }

    100% {
        padding: 8px 0 3px 0;
    }
}

@-webkit-keyframes finger-4-animation-span {
    0% {
        top: 0;
    }

    32% {
        top: 0;
    }

    41% {
        top: -7px;
    }

    47% {
        top: -7px;
    }

    53% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@keyframes finger-4-animation-span {
    0% {
        top: 0;
    }

    32% {
        top: 0;
    }

    41% {
        top: -7px;
    }

    47% {
        top: -7px;
    }

    53% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes finger-4-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    32% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    41% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    47% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    53% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@keyframes finger-4-animation-i {
    0% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    32% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    41% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    47% {
        bottom: 8px;
        height: 12px;
        -webkit-border-radius: 7px 7px 4px 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 7px 7px 4px 4px;
        -moz-background-clip: padding;
        border-radius: 7px 7px 4px 4px;
        background-clip: padding-box;
    }

    53% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }

    100% {
        bottom: 3px;
        height: 14px;
        -webkit-border-radius: 10px 10px 7px 7px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 10px 10px 7px 7px;
        -moz-background-clip: padding;
        border-radius: 10px 10px 7px 7px;
        background-clip: padding-box;
    }
}

@-webkit-keyframes finger-5-animation {
    0% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    34% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    43% {
        top: 20px;
        right: 2px;
        -webkit-border-radius: 0 8px 20px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 8px 20px 0;
        -moz-background-clip: padding;
        border-radius: 0 8px 20px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    50% {
        top: 20px;
        right: 2px;
        -webkit-border-radius: 0 8px 20px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 8px 20px 0;
        -moz-background-clip: padding;
        border-radius: 0 8px 20px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    60% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes finger-5-animation {
    0% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    34% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    43% {
        top: 20px;
        right: 2px;
        -webkit-border-radius: 0 8px 20px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 8px 20px 0;
        -moz-background-clip: padding;
        border-radius: 0 8px 20px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    50% {
        top: 20px;
        right: 2px;
        -webkit-border-radius: 0 8px 20px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 8px 20px 0;
        -moz-background-clip: padding;
        border-radius: 0 8px 20px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    60% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        top: 32px;
        right: 0;
        -webkit-border-radius: 0 5px 14px 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 5px 14px 0;
        -moz-background-clip: padding;
        border-radius: 0 5px 14px 0;
        background-clip: padding-box;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}