@media (min-width: 1025px) {
    .footer-centering {
        margin-top: 35px !important;
        display: flex;
        justify-content: center;
    }
    .footer-block {
        width: inherit;
        padding-left: 10%;
    }
}

.footer {
    flex-shrink: 0; /*fix to bot*/
    width: 100%;
}

.title{
    margin-bottom:20px !important;
}
.social{
    display:none;
}
/*Fixing login page wrong password bug*/
.facebook {
    background-position: -108px center !important;
}
#facebook>.facebook{
    display:initial !important;
}
.twitter {
    background-position: 0px center !important;
}
#linkedIn, #twitter {
    margin-left: 6px;
}
.linkedIn {
    background-position: -425px center !important;
}
#linkedIn > .linkedIn, #twitter > .twitter {
    display: initial !important;
}
div>ul>li>.social {
    /*position: absolute;*/
    width: 38px;
    height: 38px;
    transform-style: preserve-3d;
    transform: translateZ(-10px);
    transition: background-position, ease-in .4s, ease-out .4s;
    display: inline-block;
}

.socialFace {
    display:none !important;
    position: absolute;
    width: 38px;
    height: 38px;
    backface-visibility: hidden;
    transition: background-position, ease-in .5s, ease-out .7s;
    background-position: -108px center;
    left: 0px;
    right:0px;
}

/* transform the faces and use a big grad for shading */

.socialFace:first-child {
    transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
    background-image: linear-gradient(rgba(0,0,0,1) 10%, rgba(0,0,0,0) 66%);
}

.socialFace:last-child {
    transform: translateY(50%) rotateX(-90deg);
    background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,1) 90%);
}

@keyframes rotate {
to {
    transform: translateZ(-10px) rotateX(90deg);
}
}

@keyframes shade {
to {
    background-position: 0 0
}
}

.title .socialFace {
    background: none !important;
    position: static;
    pointer-events: none;
}

/* hover to animate */
.social:hover {
    transform: translateZ(-10px) rotateX(90deg);
}

.social:hover > .socialFace:first-child,
.social:hover > .socialFace:last-child {
    background-position: 0 0
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close-modal {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
@media(min-width:1080px)
{
    .close-modal {
        position: absolute;
        right: 15px;
    }
    .modal-content {
        position: relative;
    }
}
.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.close-modal-text {
    font-size: 15px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 5px !important;
}
.modal-dialog,
.modal-content {
    height: 90%;
    overflow-y: auto;
    width: 50%
}
@media (max-width: 1080px) {
    .modal-dialog,
    .modal-content {
        width: 80%
    }
}

.modal-body {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}