/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */


@media (max-width: 768px) { 

    .responsive-logo {
        width: 100%;
        height: auto;
        max-width: 260px;
    }

    .mob-100 {
        width: 100%;
    }
 }

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */



@media (min-width: 420px) { 


    .header-logo {
        margin-top: 0;
        display: inline-block;
        margin-left: 0;
        margin-right: 0;
    }

    .header-logo.regnan-logo {
        margin-left: 1.4rem;
    }
    

}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

    .register-overlay {
        padding: 80px 25px;
    }
   
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    body {
        padding-top: 0px;

    }

    .title-container {
        padding: 100px 0 80px 0
    }
    
    
    .jo-nav-logo img {
        width: 150px;
        height: 47px;
    }

    
    .head-info {
        margin-top: 200px;
    }
    

    h1 {
        font-size: 3.6rem;
        line-height: 3.8rem;
        letter-spacing: 2px;
        
    }

    h2.sub-header {
        font-size: 1.8rem;
    }

    .section-header {
        font-size: 2.4rem;
        line-height: 2.6rem;
    } 

    .navbar-dark .navbar-nav .nav-link {
        color: #053865;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #00203c;
    }

    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
        color: #00203c;
    }
    
    .navbar:not(.no-animate) {
        background-color: rgba(67, 140, 133,0);
        transition: all .4s ease

    }

    .fix-scrolled:not(.no-animate) {
        background-color: rgba(67, 140, 133,1);
    }

    .fix-scrolled:not(.no-animate) .navbar-nav .nav-link {
        color: #ffffff;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 1.6rem;
        padding-left: 1.6rem;
    }

    .nav-link {
        text-align: left;
        font-size: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }


    .table tbody tr td:last-child {
        max-width: 260px;
    }


    .table th {
        display: table-cell;
    }
    
    .table td {
        display: table-cell;;
    }

    .table tr td:nth-child(1) {
        width: 20%;
    }

    .table tr td:nth-child(3)  {
        width: 25%;
    }

    .modal-content {
        margin-top: 0rem;
    }

    .modal-footer.mobile-footer {
        display: none;
    }
    

    .modal-header h5 {
        font-size: 2rem;
    
    }

    .border-right-2 {
        border-right: 2px solid;
    }

    #register-info-panel h2 {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: 2px;
    }

    .border-right-md {
        border-right: 12px solid #fff;
    }

    .header-under-marker {
        margin: 0px;
    }
    
    
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
   
    .head-left .head-overlay, .head-right .head-overlay {
        padding: 140px 60px;
       
    }
    

    .alert-buttons {
        display: inline-block;
    }
    
    
    .modal-body {
        padding: 2.6rem 2rem;
    }

    .location-description-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(20%, -50%);
    }

    .map-container {
        min-height: 500px;
    }

 }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 


    nav .container {
        max-width: 1400px !important;
    }

    .restrict-1 {
        max-width: 430px;
    }

    #virtual-event {
        background-position: top right 12%;
    }

    #event-info-block h3 {
        font-size: 1.75rem;
    }

    #register-info-panel h2 {
        font-size: 5.6rem;
        line-height: 5.6rem;
        letter-spacing: 2px;
    }

    .register-info {
        padding: 4rem 1rem;
    }

 }



  /* XXL large devices (large desktops, 1500px and up) */
@media (min-width: 1600px) { 

    nav .container, .container-header {
        max-width: 1400px !important;
    }


    .head-left .head-overlay, .head-right .head-overlay {
        padding: 200px 140px;
    }

    
 }