/* ==========================================================================
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) { 
    
    

    .regnan-nav-logo img {
        width: 100px;
        height: 37px;
    }

    .jo-nav-logo img {
        width: 130px;
        height: 41px;
    }

    #device {
        display: block;
    }

    #mobile-device {
        display: none !important;
    }

    .head-left {
        width: 55%;
        display: inline-block;
      
    }
    
    .head-right {
        width: 45%;
        display: inline-block;
        
    }

    #device-bottom {
        margin-left: -130px;
        width: 130px;
        height: 132px;
    }

    #device-top {
        width: 130px;
        height: 132px;

    }
    
    .head-left .head-overlay, .head-right .head-overlay {
        padding: 140px 30px;
       
    }
    
    .head-info {
        margin-top: 200px;
    }
    

    h1 {
        font-size: 2.4rem;
        line-height: 2.4rem;
    }

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

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

    .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 tr:not(:last-child) {
        border-bottom: 2px solid #fff;
    }

    .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-overlay {
        padding: 80px 38px;
    }
    
}


/* 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;
    }
    
    h1 {
        font-size: 3.6rem;
        line-height: 3.4rem;
    }

    h2.sub-header {
        font-size: 2.8rem;
    }
    
    .modal-body {
        padding: 3rem 2rem;
    }

    #virtual-event {
        background-image: url('../img/device.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right 40px;
    }


 }

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

    #device-bottom {
        margin-left: -160px;
        width: 160px;
        height: 163px;
    }

    #device-top {
        width: 160px;
        height: 163px;

    }

    .header-logo.jo-logo {
        width: 170px;
        height: 54px
    }

    .header-logo.regnan-logo {
        width: 150px;
        height: 48px
    }

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

    h1 {
        font-size: 4.2rem;
        line-height: 4.2rem;
    }

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

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

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

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

 }


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


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

    #device-bottom {
        margin-left: -200px;
        width: 200px;
        height: 204px;
    }

    #device-top {
        width: 200px;
        height: 204px;

    }
    
    
 }

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

    h1 {
        font-size: 4.8rem;
        line-height: 4.6rem;
    }

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


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


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

    
 }