/* Center the loader */
#collapser li a {
    border-bottom: 1px solid black;
    font-size: 15px;
    font-weight: bold;
    color: #00aa7e;
}

#loader {
    position: relative;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #2D383F;
    border-bottom: 16px solid #2D383F;
    border-right: 16px solid #7B9BAA;
    border-left: 16px solid #7B9BAA;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}



@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.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
    }
}


@media (max-width: 766px){
    #loader {
        top: 35%;
        margin: -40px 0 0 -50px;
    }
}

/*Tabet View Ipad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #loader {
        left: 53%;
        top: 50%;
        width: 100px;
        height: 100px;
        z-index:1;
    }
}

    /*Ipad Pro*/
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
     #loader {
            left: 52%;
            top: 50%;
            width: 100px;
            height: 100px;
     }
}

    /*iPhone X in portrait & landscape*/
@media only screen and (width: 375px) and (height: 812px) {
    #loader {
        top: 55%;
        left: 55%;
        width: 80px;
        height: 80px;
    } 
}

    /*Ip 6/7/8*/
@media only screen and (width : 375px) and (height : 667px) {
    #loader {
        top: 55%;
        left: 55%;
        width: 80px;
        height: 80px;
    }
}

    /*Ip 6/7/8 Plus*/
@media only screen and (width : 414px) and (height : 736px) {
    #loader {
        top: 55%;
        left: 55%;
        width: 80px;
        height: 80px;
    }
}

    /*Iphone 5 or smaller */
@media only screen and (width: 320px) and (height: 568px) {
    #loader {
        top: 50%;
        left: 55%;
        width: 80px;
        height: 80px;
    }
}

/*Google Pixel*/
@media screen and (device-width: 411px) and (device-height: 731px) {
    #loader {
        top: 55%;
        left: 58%;
        width: 80px;
        height: 80px;
    }
}

/*Google Pixel XL*/
@media screen and (device-width: 411px) and (device-height: 823px) {
    #loader {
        top: 55%;
        left: 58%;
        width: 80px;
        height: 80px;
    }
}


/*Galaxy S5*/
@media screen and (device-width: 360px) and (device-height: 640px) {
    #loader {
        top: 50%;
        left: 59%;
        width: 80px;
        height: 80px;
    }
}