@charset "utf-8";

video {
    width: 100%;
    max-width: 500px;
    height: auto;
    background-color: #111;
}

.bgContainer {
    max-width: 1100px;
    margin: 0 auto;
}
.bgHeading {
    text-align: center;
    margin-top: 6vw; 
}
.bgHeading img {
    width: 40%;
    height: auto;
}

.bgHeading p {
    font-size: 6em;
    font-family: 'Economica', sans-serif, Helvetica;
    font-weight: bold;
}

.bgContent {
    max-width: 1100px;
    margin: 0 auto;
}
.bgText {
    max-width: 96%;
    //background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;
    margin: 2vw auto;
    
}

.spacer {
    margin: 100px 0;
}

/*********** backgrounds ***********/

.worldMobile {
    background-image:url(../images/work/bg/vegas.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}


.sticky {
    background-image:url(../images/work/bg/sticky.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}

.vegas {
    background-image:url(../images/work/bg/vegas.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}

.jungle {
    background-image:url(../images/work/bg/jungle.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}

.rise {
    background-image:url(../images/work/bg/rise.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}

.toucan {
    background-image:url(../images/work/bg/toucan.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}
.reefLife {
    background-image:url(../images/work/bg/reefLife.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed; 
    height: 50vh;
    width:100%;   
}
.blackbeards {
    background-image:url(../images/work/bg/blackbeards.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    display: table;
    background-attachment:fixed;
    height: 50vh;
    width:100%;   
}



.bgGrid {
    width: 96%;
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px;
    text-align: center;
}

.bgGrid div img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}
}

/* *** media queries *** 
@media screen and (max-width: 1250px) {
    .worldMobile, .sticky, .vegas, .jungle, .rise, .toucan, .reefLife, .blackbeards {height: 35vh;}  
    
    
    
}

@media screen and (max-width: 860px) {
    .worldMobile, .sticky, .vegas, .jungle, .rise, .toucan, .reefLife, .blackbeards {height: 45vh;}    
    
    
}

@media screen and (max-width: 600px) {
    .worldMobile, .sticky, .vegas, .jungle, .rise, .toucan, .reefLife, .blackbeards {height: 35vh;}    
    
    
}

*/