@media (min-width:972px)
{
    .buffer{
        display:block;
    }
}

@media (min-width:768px) and (max-width:972px)
{
    .buffer{
        display: none !important;
     }


    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 70px;
      width: 70px;
    }

     .social a{
        font-size: 3rem;
        padding:2rem;
     }

     .head-banner{
        font-size:450% !important;
    }
}

@media (min-width:682px) and (max-width:767px)
{
    .head-banner{
        font-size:400% !important;
    }


    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 70px;
      width: 70px;
    }

    .social a{
        font-size: 2.5rem;
        padding:2rem;
     }

    .carousel-caption{
        position:absolute;
        top:45%;
        transform:translateY(-45%);
    }

    .display-4{
        font-size:300%;
    }

    .sub-head
    {
        font-size:1.4rem !important;
        float:none !important;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:-0.5rem;
    }

    .get-started{
        padding:1rem;
    }

    .login-form .modal-content{
    width: 50%;
    height:70%;
    }
}

@media (min-width:510px) and (max-width:681px)
{
    .head-banner{
        font-size:300% !important;
    }


    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 60px;
      width: 60px;
    }

    .carousel-control-next-icon:after,
    .carousel-control-prev-icon:after
    {
        font-size:40px;
     }

    .carousel-caption{
        position:absolute;
        top:45%;
        transform:translateY(-45%);
    }

    .social a{
        font-size: 2.5rem;
        padding:2rem;
     }


    .display-4{
        font-size:300%;
    }

    .sub-head
    {
        font-size:1.4rem !important;
        float:none !important;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:-0.5rem;
    }

    .get-started{
        padding:1rem;
    }

    .login-form .modal-content{
    width: 60%;
    height:70%;
    }
}

@media (min-width:400px) and (max-width:509px)
{
    .head-banner{
        font-size:300% !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 50px;
      width: 50px;
    }

    .carousel-control-next-icon:after,
    .carousel-control-prev-icon:after
    {
        font-size:32px;
     }

    .carousel-caption{
        position:absolute;
        top:45%;
        transform:translateY(-45%);
    }

    .social a{
        font-size: 2.5rem;
        padding:2rem;
     }


    .display-4{
        font-size:200%;
    }

    .sub-head
    {
        font-size:110% !important;
        float:none !important;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:-0.5rem;
    }

    .get-started{
        padding:0.9rem;
    }
    .login-form .modal-content{
    width: 80%;
    height:80%;
    }
}


@media (min-width:320px) and (max-width:399px)
{
    .head-banner{
        font-size:250% !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 50px;
      width: 50px;
    }

    .carousel-control-next-icon:after,
    .carousel-control-prev-icon:after
    {
        font-size:35px;
     }

    .social a{
        font-size: 2.5rem;
        padding:2rem;
     }

     .display-4{
        font-size:200%;
    }

    .sub-head
    {
        font-size: 100% !important;
        float:none !important;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:-0.5rem;
    }
    .get-started{
        padding:0rem;
    }

    .login-form .modal-content{
    width: 90%;
    height:90%;
    }
}

@media (max-width:319px)
{
    .head-banner{
        font-size:190% !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 45px;
      width: 45px;
    }

    .carousel-control-next-icon:after,
    .carousel-control-prev-icon:after
    {
        font-size:30px;
     }

    .social a{
        font-size: 2rem;
        padding:2rem;
     }

     .display-4{
        font-size:200%;
    }


    .sub-head
    {
        font-size: 90% !important;
        float:none !important;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:-0.5rem;
    }
    .get-started{
        padding:0rem;
    }
    .login-form .modal-content{
    width: 90%;
    height:90%;
    }
}
}