.modal {
    position: fixed; 
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgb(0,0,0);
    background-color: rgba(0,0,0);
	display: none;
 /* Black with Opacity */ 	
}

.modal-content {
background-color: #000;
margin: 5% auto;
padding: 20px;
width: 75%; 
opacity: 1;
z-index: 8;  
}


.modal-content-wide {
    background-color: #000;
    margin: 5% auto;
    padding: 20px;
    width: 85%; 
    opacity: 1;
    z-index: 8;
    padding: 2%;

    }

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;  
}

.close:hover, .close:focus {
color: white;
text-decoration: none;
cursor: pointer;    
}

#firstbox:hover {
background: #ff4557;
cursor: pointer;
border: #ff4557;
}

#secondbox:hover  {
    background: #00B229;
    cursor: pointer;
    border:#00B229;
    }

#thirdbox:hover  {
background: #FFBA0D;
cursor: pointer;
border: #FFBA0D;
        }

#fourthbox:hover  {
background: #B00CE8;
cursor: pointer;
border: #B00CE8;
 }

.box.bkg-charcoal:hover p {
color: #fff;    
}

#viplusmodal {
background-image:url('images/viplus-collage.jpg');
}

/*  Additional Media queries */

/*  Coloured background boxes on mobile */

@media only screen and (max-width: 760px) {

        #firstbox {
            background: #ff4557;
            cursor: pointer;
            border: #ff4557;
            color: #fff;
            }
            
            #secondbox  {
                background: #00B229;
                cursor: pointer;
                border:#00B229;
                color: #fff;
                }
            
            #thirdbox  {
            background: #FFBA0D;
            cursor: pointer;
            border: #FFBA0D;
            color: #fff;
                    }
            
            #fourthbox  {
            background: #B00CE8;
            cursor: pointer;
            border: #B00CE8;
            color: #fff;
        }

  /* Modal container width on mobile and tablet */

  .modal-content {
    width: 96%;
    margin-top: 20%;  
    }

  .modal-content-wide {
    margin: 20% auto;
     }
}

/* Modal container width on mobile and tablet */

#desktophero {
display: block;
}

#mobilehero{
display: none;
}


  @media only screen and (min-width: 761px) and (max-width: 1300px) {
    .modal-content-wide {
        margin: 12% auto;
        }
  }  

/* Widen Logo */

.logo .no-transition {
    width: 15em;
    font-size: 12px;
    }

.logo-inner {
width: 15em; 
font-size: 12px;   
}    



/* Smaller headline Text on Mobile */

@media only screen and (max-width: 768px) {

/* Remove  black background from header on mobile */

.mobile .header { 
  background: #fff;    
  }

    h3 {
    font-size: 1.5rem;
 }

.lspacing-xlarge {
    letter-spacing: 0;
  }
}