body{
    color: #1D1D1D;
    background-color: #f5f5f7;
    font-family: nunito;
    justify-content: center;
    display: grid;
    align-items: center;
    margin-top: 7%;
}



/*LOADER*/
/*  Loader Default  */
.section_louder{
    position:fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;}
/*  End Loader  */

/*  Image Loader  */
.loader{
    position: relative;
    width: 170px;}
/*  End Image Loader  */

/*  Square Transparent on Image  */
.loader-1{
    margin-top: 20px;
    position: absolute;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
    animation-name: loader;
    animation-duration: 4s;
    background-color: rgba(255, 255, 255, 0.795);}
/*  End Square Transparent on Image  */

/*  Loader Display  */
.show-loader{
    display: flex;}
/*  End Loader Display  */

/*  Animation Loader  */
@keyframes loader {
    /*  Before  */
    from {
        height: 200px;}
    /*  End Before  */

    /*  After  */
    to {
        height: 0px;}
    /*  End  After  */}
/*  End animation Loader  */
/*END LOADER*/



/*CONTENT ALL*/
.content-all{
    height: 100%;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;}



    /*Content Card*/
    .content-card{
        background-color: #f8f8f8;
        box-shadow: 0px 0px 20px #e8e8e9;
        border-radius: 30px;
        justify-content: center;
        display: grid;
        grid-row-gap: 1vh;}

    .card-logo-container{

        display: flex;
        justify-content: center;
        height: .5fr;
        width: .5fr; 
    }

    .card-logo{
        padding: 20px;
        width: 250px;
        align-items: center;
        display: flex;
        justify-content: center;}

    .card-text{
        display: flexbox;
        align-items: center;
        justify-content: center;
        margin: 0px;
        text-align: center;
    }

    .card-title{
        font-size: x-large;
    }
    .card-subtitle{
        font-size: medium;
        font-weight: normal;
    }
    .card-title, .card-subtitle{
        justify-content: center;
        display: flex;
        text-align: center;
   
    }

    /*  Content Button*/
    .content-all-buttons{

        align-items: center;
        display: grid;
        grid-template-rows: repeat(6, 1fr);
        grid-row-gap: 25px;
}

    .content-icon-text{
        display:flex;
        justify-content:start;
        align-items:center;}

    /*  Icon Media Size  */
    .icon-media{
        width: 4.5vh;}

    /*  Text Media Size  */
    .text-media{
        margin: 0px 0px 0px 20px;
        font-weight: 600;}

    /*  Arrow Media Size  */
    .arrow{
        width: 2.5vh;}
    

    /*  Social Media Hyperlinks  */
    .content-link-button{
        box-shadow: 0px 0px 30px #e8e8e9;
        display: grid;
        width: 30vw;
        display:inline-flex;
        background-color: #F8F8F8;
        border-radius: 30px;
        justify-content:space-between;
        align-items: center;
        padding: 10px;}
    
    /*  Social Media Hyperlinks Animations  */
    .content-link-button:link{
        color: #1D1D1D;
        text-decoration: none;}
    .content-link-button:visited{
        color: #1D1D1D;}
    .content-link-button:active{
        color: #1D1D1D;;
        padding: 0.5vw;
        margin-left: 9vw;
        box-shadow: 0px 0px 30px #c9c9c9;}
    .content-link-button:hover{
        color: #1D1D1D;;
        left: 30vw;
        box-shadow: 0px 0px 20px #c9c9c9;
        transition-duration:  0.5s;
        transition-delay: 0s;}
    /*  End Social Media Hyperlinks Animations  */
/*END CONTENT ALL*/


 /*  CopyRight  */
 .copyright{
     margin-top: 5%;
     display: flex;
     justify-content: center;}
 /*  End CopyRight  */



/*  Media Layout Screen  */
@media only screen and (max-width: 750px) {

    .content-card{
        margin-bottom: 25px;
    }

    .card-logo{
        width: 175px;
        display: flex;
        justify-content: center;}
    
    .content-all{
        grid-row:auto;
        grid-template-columns: none;}

    .content-link-button{
        width: 80vw;}

    .copyright{
        margin-top: 7%;
        justify-content: center;
        justify-items: end;
    }
}

/*  End Media Layout Screen  */