@charset "UTF-8";
/* CSS Document */


/* Set parameters for entire website */
* {
    box-sizing: border-box; /* Ensure that box settings (padding, margin etc) do not add width to boxes */
 }
/* ---- HOME PAGE ---- */

/* TAGS */

body {
    background-color: #fff;
    color: #5d7e70;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-size: 16px; /* Allow text parameters to be set as em ratios */  
    display: flex;
    justify-content: center;
    }

h1, h2, h3, .caption, .column-button-text {
    font-family: lexia-advertising, serif;
    font-style: normal;
    font-size: 40px;
    letter-spacing: 0.07em;
    text-align: right;
    line-height: 1.2em;
    /* The following setting is a back-up in case Lexia Ad is unavailable */
    font-weight: normal;
    color: #fff;
    margin: 0px 0px 0px 10px; /* Puts a space between the logo and title */
}

h2, h3 {
    margin: 0px;
    font-size: 36px;
    color:#5d7e70;
}

h3 {
    font-size: 24px;
}

p {
    font-weight: 300;
    margin: 0.5em 0 0.5em 0;
    line-height: 1.4em;
}

p strong {   
    font-weight: 900;   
}

p.right{
    text-align: right;
}

p.centre{
    text-align: center;
}

/* Ensure that links in buttons do not have any underlines */
a {
    color: inherit;
    text-decoration: none;
}

/* Set the height for the logo */
a.logo img {
    height: 86px;
}

/* Applies underline to text-based links only */
a.text {
    text-decoration: underline;
}


/* CLASSES */

.page-container {    
    width: 100%;
    height: 100%;
    background-color: rgba(190,223,207,0.30);
    display: flex;
    justify-content: center;
}

.main {
    width: 100%;
    max-width: 1440px;
    min-width: 300px;
    margin: 36px;
}

/* Apply width to all containers within main div */
.header, .menu, .req-content, .column-box {
    width: 100%;
}

.header {
    width: 100%;
    background-color: rgba(190,223,207,1.0);
    height: 200px;
    padding-left: 3%;
    display: flex;    
    align-items: center;
    justify-content: center;
}

.header-left {
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

.header-right {
    background-color: #e02405;
    height: 86px;
    width: 63%;
    padding-right: 3%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu {
    height: 60px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.nav {
    height: 45px;
    padding-top: 15px;
    width: 75%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Hamburger icon for menu toggle */
.menu-toggle {
    cursor: pointer; /* Change cursor from default text cursor to pointer */
    width: 100%;
    height: 34px;
    font-size: 28px;
    margin: 0px 0px 4px 0;
    padding-bottom: 5px;
    color: #fff;
    background-color: #e02405;
    display: none;
}

/* Standard button styles */

.button {
    width: 150px;
    height: 34px;
    margin: 4px 10px 4px 0;
    background-color: rgba(255,255,255,1.0);
    display: flex;    
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.button:hover {
    color: #e02405;
    border-bottom: 5px solid rgba(190,223,207,1.0);
    transition: 0.3s;
}

.button:active {
    color: #e02405;
    font-weight: 700;
    border-bottom: 5px solid rgba(190,223,207,1.0); 
    transform: scale(0.95);
    transition: 0.3s;
}

.button-text {
    font-weight: 700;
}

#button-current {
    border-bottom: 2px solid rgba(190,223,207,1.0);
} 

#button-current:hover {
    border-bottom: 5px solid rgba(190,223,207,1.0);
}

#button-current:active {
/* Visual identifier for the current webpage */
    border-bottom: 5px solid rgba(190,223,207,1.0);
}

/* Social media icons styles */
.social {
    width: 25%;
    padding-top: 15px;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

.social-icon {
    height: 45px;
    margin-left: 10px;
    vertical-align: baseline;
}

.social-icon:hover {
    animation-name: icon-hover;
    animation-duration: 0.3s;
    transform: rotate(10deg);
}

.social-icon:active {
    animation-name: icon-click;
    animation-duration: 0.2s;
    transform: rotate(10deg);
}

/* Container for three column layout */
.column-box {
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Column styles */
.column {
    box-sizing: content-box;
    width: 100%;
    height: auto;
    margin-right: 36px;
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
}

/* Remove right margin from right-most column */
.column:last-of-type {
    margin-right: 0px;
}

/* Three-column button styles */

.column-button {
    width: 100%;
    height: 56px;
    margin: 4px 10px 4px 0;
    color: #fefefe;
    background-color: #5d7e70;
    border: none;
    display: flex;    
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.column-button:hover {
    color: #fefefe;
    background-color:#e02405;
    transition: 0.3s;
}

.column-button:active {
    color: #e02405;
    background-color: rgba(255,255,255,1.0); 
    transform: scale(0.95);
    transition: 0.3s;
}

.column-button-text {
    font-size: 1.5em;
    text-align: center;
}

.column-button-text:active {
    color: #e02405;
}

/* Classes for webpage section images */
.sections {
    width: 100%;
    height: auto;
 }

.example {
    width: 150px;
    border-radius: 25px;
    background-color: #5d7e70;
    color: #fefefe;
    font-weight: 700;
    text-align: center;
    padding: 10px;
}

.example:hover {
    background-color: #e02405;
}

/* Footer container */
.footer {
    width: 100%;
    height: 85px;
    margin: 36px 0 0 0;
    padding: 0 36px 0 36px;
    background-color: rgba(190,223,207,0.55);
    color: #5d7e70;
    font-size: 14px;
    font-weight: 700;
    display: flex;    
    align-items: flex-start;
    justify-content: center;
}

/* Prevent unsightly widows and orphans */
.no-break {white-space: nowrap;}

/* Slideshow CSS - adapted from https://www.w3schools.com/howto/howto_js_slideshow.asp */

/* Slideshow container */
.slideshow-container {
    height: 400px;
    position: relative;
    margin: auto;
}

.slideshow {
    width: 100%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

/* Caption text for the image slideshow */
.caption {
    width: 100%;
    text-align: center;
    color: #fefefe;
    padding-bottom: 5px;
    margin-left: 0;
    background-color: rgba(93,116,112,0.90);
    position: absolute;
    top: 0%;
}

/* Previous and next arrows for the image slideshow */
.prev, .next {
    cursor: pointer; /* Change cursor from default text cursor to pointer */
    color: rgba(93,116,112,0.85);
    font-size: 36px;
    text-shadow: 0 0 5px rgba(190,223,207,1.0);
    position: absolute;
    top: 50%;
}

.prev{
    left: 15px;
}
.next {
    right: 15px;
}

/* Containter for the dots at the bottom of the slideshow images */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image slider dots at the bottom of the slideshow images */
.dot {
    position: absolute;
    bottom: 5%;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: rgba(93,116,122,0.85);
    box-shadow: 0px 0px 10px rgba(190,223,207,1.0);
    border-radius: 50%;
    transition: background-color 0.6s ease;
}

/* Spread the three dots out (otherwise position: absolute causes them to overlap) */
.dot:nth-child(1) {
    left: 48%;
}

.dot:nth-child(2) {
    left: 50%;
}

.dot:nth-child(3) {
    left: 52%;
}


.active, .dot:hover {
  background-color: rgba(190,223,207,0.85);
}


/* ANIMATIONS */

/* Simulate key press when icon is clicked */
@keyframes icon-click {
  from {height: 45px; margin-left: 10px;}
  to {height: 43px; margin-left: 12px;}
}

/* Slightly rotate icon when mouse is moved over it */
@keyframes icon-hover {
  from {transform: rotate(0deg);}
  to {transform: rotate(10deg);}
}

/* ---- PORTFOLIO PAGE ---- */

.page-heading {display: flex; justify-content: center;}

.page-heading h2 {
    margin: 36px 0 36px 0;
 
}

.section-heading h3 {
    color: #fff;
    background-color: #e02405;
    padding: 10px 0 10px 10px;
    text-align: left;
}

.photo-gallery {
    width: 100%;
    margin-bottom: 72px;
    height: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-flow: row wrap;
}

.photo-box:nth-child(1) .info {
    top: -130px;
    width: 100%;
}

.photo-box:nth-child(2) .info {
    top: 20px;
    width: 100%;
}

.photo-box:nth-child(3) .info {
    height: 100%;
}

.photo-box:nth-child(4) .info {
    height: 100%;
}

.photo-box:nth-child(1) .viz {
    height: 120%;
}

.photo-box:nth-child(2) .viz {
    height: 110%;
}

.photo-box:nth-child(3) .viz {
    height: 110%;
    left: -66px;
}

.photo-box:nth-child(4) .viz {
    height: 110%;
}

.photo-box .reports {
    height: 110%;
}

.photo-box:nth-child(3) .reports {
    left: 0px;
}

.photo-box:nth-child(4) .reports {
    left: 0px; top: -10px;
}

.photo-box:last-child {
    margin-right: 0px;
}

.photo-box:nth-child(4) {
    margin-right: 0px;
}

.photo-box:nth-child(8) {
    margin-right: 0px;
}

.photo-box {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #fff;
    width: 22.7%;
    height: 250px;
    margin-right: 3%;
    margin-top: 40px;
    overflow: hidden;
    cursor: pointer;
}

.photo-box img {
    position: absolute;
    object-fit: cover;
}
.photo-gallery .photo-box img {
}

.photo-box h4 {
    top: -28px;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    font-size: 18px;
    color: #fff;
    background-color: rgba(93,116,122,0.75);
    transition: 0.3s;
}

.photo-box:hover h4 {
    top: 0px;
    transition: 0.3s;
}

/* CONTENT FOR UNDER CONSTRUCTION PAGES */
.page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

.page-content h3 {
        color: #F3E600;
}

.page-content img {
    height: 200px;
}

/* ---- CONTACT PAGE ---- */
.contact-form {width: 450px;}
.contact-form h2 {text-align: left;}
.contact-form p {line-height: 0.3em; padding-top: 15px;}
input[type=text], textarea {
  width: 350px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

/* make the robot trap invisible to humans */
.terms {color: rgba(190,223,207,0.0);}
input[type=radio] {opacity: 0%;}

button[type=submit] {width: 350px;}
button[type=submit] .column-button-text {font-size: 2em; padding-top: 0px;}

.form-field {
    display: flex;
    justify-content: flex-start;
    flex-flow: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* ---- MEDIA QUERIES (ALL PAGES) ---- */

/* FIRST BREAK HERE */
@media screen and (max-width: 1500px) {
    
.header-left {
    width: 25%;
    }

.header-right {
    height: 86px;
    width: 75%;
    padding-right: 3%;
    }

    .slideshow-container, .slideshow {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    .column-button-text {
        font-size: 1.2em;
    }    

    /* Portfolio page changes */


    .section-heading h3 {
      text-align: center;
        font-size: 22px;
    }
 
    .photo-box {height: 210px;}
    
    .photo-box img {
        width: 100%;
        height: auto;
    }    
    
}

/* SECOND BREAK HERE */
@media screen and (max-width: 1200px) {
    .main {
        
    }
    
    .header {
        justify-content: center;
        flex-flow: row wrap;
        height: 186px;
    }
    
    .header-left {
        width: 30%;
        justify-content: flex-start;
        
    }
    
    .header-right { 
        width: 70%;
    }
    
    h1 {
        font-size: 24px;
    }


    .menu {
        justify-content: center;
        flex-flow: row wrap;
        height: 130px;
    }
    
    .nav {
        padding-left: 0px;
        justify-content: center;
        width: 100%;
    }
    
    /* Remove left margin from first social media icons to centre them on the page */
    .social a:nth-child(1) img.social-icon {
    height: 45px;
    margin-left: 0px;
    vertical-align: baseline;
}

    
    /* Adjust the spread of the three dots as the screen becomes more narrow */
    .dot:nth-child(1) {
        left: 47%;
    }

    .dot:nth-child(2) {
        left: 50%;
    }

    .dot:nth-child(3) {
        left: 53%;
    }

    
    .button-buy {
        margin-right: 0px;
    }
    
    .social {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .footer {
        height: auto;
    }

    .column-button-text {
        font-size: 1.1em;
    }    
    

    /* Portfolio page changes */

.photo-box {height: 170px;}
    .section-heading h3 {
      text-align: center;
        font-size: 22px;
    }
 
    .photo-box img {
        width: 100%;
        height: auto;
    }    

 /* Nudge images 7 and 9 up slightly to better postion them in the container
.photo-gallery .photo-box:nth-child(7) img {
        top: -20%;
    }
.photo-gallery .photo-box:nth-child(9) img {
        top: -20%;
    }
 */

}

/* TABLET - LANDSCAPE ORIENTATION */
@media (max-width: 1024px){
    
    .menu {
        height: auto;
    }

    .nav {
        flex-flow: row wrap;
        height: auto;
     }
    
    /* Adjust the spread of the three dots as the screen becomes more narrow */
    .dot:nth-child(1) {
        left: 46%;
    }

    .dot:nth-child(2) {
        left: 50%;
    }

    .dot:nth-child(3) {
        left: 54%;
    }


    a.button, a.button-buy {
        width: 100%;
        margin-right: 0px;
    }
        
    .slideshow-container, .slideshow {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
    
     .column-box {
        justify-content: center;
        flex-flow: row wrap;

    }
    
    .column-box .column {
        width: 75%;
        margin-right: 0px;
        margin-top: 36px;
    }
    
    .column:first-of-type {
        margin-top: 0px;
    }
    
    .column .button {
        width: 100%;
    }

    
    .footer {
        flex-flow: row wrap;
    }
    
    .footer .column {
        text-align: center;
    }
    
    p.right {
        text-align: center;
    }
   
/* Portfolio page changes */

    .photo-box:nth-child(1) .info {
    top: -80px;
    width: 100%;
}

/* move photos up in frame slightly at TABLET LANDSCAPE size
.photo-box img {top: -15%;}
*/

/* disable hover slide-over for tablet and mobile devices 
.photo-box h4 {top: 0px;}
*/
    
}

/* HEADER BREAKS HERE */
@media (max-width: 866px){
    .button-box:nth-child(5) .button {
        margin-right: 0;
    }

    .header-left {
       width: 25%;
    }
    
    .header-right {
    height: 86px;
    width: 75%;
    padding-right: 3%;
    }
    
    .caption {
        font-size: 28px;
    }
    
   /* Portfolio page changes */
    
    .photo-box {
        height: 150px;
    }
    .photo-box:nth-child(2) .info {
    top: -5px;
    height: 100%;
}

    .photo-box:nth-child(4) .reports {
    top: -15px;
}


}



/* TABLET - PORTRAIT ORIENTATION AND MOBILE - LANDSCAPE ORIENTATION */
@media (max-width: 768px){

/* Remove margin at small screen sizes so content takes up full width of page */
.main {margin: 0px}    
    .header {margin-top: 40px;}
    h1 {font-size: 22px;}
/* Artists page changes */

.page-heading h2 {
    font-size: 27px;
}

    .section-heading h3 {
        font-size: 20px;
    }
    
/* Change image gallery to two column layout */
.photo-box {
    width: 48%;
    height: 220px;
}

.photo-box:nth-child(2) {
    margin-right: 0px;
}

.photo-box:nth-child(3) {
    margin-right: 3%;
}

.photo-box:nth-child(4) {
    margin-right: 0px;
}

.photo-box:nth-child(6) {
    margin-right: 0px;
}

.photo-box:nth-child(8) {
    margin-right: 0px;
}

.photo-box:nth-child(9) {
    margin-right: 3%;
}

.photo-box:nth-child(10) {
    margin-right: 0px;
}

/* Align photos to top of frame at this screen size and smaller */
.photo-box img {top: 0%; width: 100%;}

/* Make specific changes to images 1 and 2 */
.photo-box:nth-child(2) .info {
    top: 0px;
}

.photo-box:nth-child(1) .info {
    top: -150px;
}

 /* Remove specific changes made earlier to images 7 and 9 */
.photo-gallery .photo-box:nth-child(7) img {
        top: 0%;
    }
.photo-gallery .photo-box:nth-child(9) img {
        top: 0%;
    }

}


/* MOBILE - PORTRAIT ORIENTATION */ /* BUTTON LAYOUT BREAKS HERE */
@media (max-width: 645px){
    
h1 {font-size: 20px;}

    .header-left {width: 30%;}
    .header-right {width: 70%;}
    .caption {font-size: 22px; padding-top: 10px; padding-bottom: 10px;}
    
.nav {
    height: 35px;
    padding-top: 0px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: 0.5s;
    }

/* Container to reveal dropdown menu items when called by javascript */
.show-dropdown {
    height: 270px;
    transition: 0.5s;
}
    
/* Hamburger icon for menu toggle */
.menu-toggle {
    display: flex;    
    align-items: center;
    justify-content: center;
}

    .slideshow-container {
        height: 250px;
    }
    .slideshow {
        height: 250px;
    }
    
    /* Adjust the spread of the three dots as the screen becomes more narrow */
    .dot:nth-child(1) {
        left: 45%;
    }

    .dot:nth-child(2) {
        left: 50%;
    }

    .dot:nth-child(3) {
        left: 55%;
    }

   
.page-heading h2 {
    font-size: 24px;
}


    
.page-content h3 {
    font-size: 20px; 
}
    
.column-box .column {
    width: 75%;
    }
    
    .button-box {
        width: 100%;
    }

    .button, .button-buy{
        width: 100%;
      }

/* Portfolio page changes */
    .photo-box {
        height: 150px;
    }
    
.photo-box img {
    width: 100%;
    height: auto;
}

}

/* MOBILE - VERY NARROW SCREENS */
@media (max-width: 400px){
    
    .header-left, .header-right {
        height: 60px;
    }
 
    a.logo img {
    height: 60px;
}

    .header-right h1 {font-size: 14px;}

    
/* Portfolio page changes */
    
    /* Set single column layout for image gallery */
    .photo-box {
        width: 80%;
        height: 155px;
    }

    .photo-box img {
    width: 100%;
    height: auto;
}


.photo-box:nth-child(1) .info {
    top: -175px;
}

    .photo-box:nth-child(2) .viz {
    width: 100%;
}

        .photo-box:nth-child(4) .viz {
    width: 100%;
}

.photo-box:nth-child(1) .reports {
    width: 100%;
}


.photo-box:nth-child(2) .reports {
    width: 100%;
}

/* Make sure all artist images line up on the right margin */
.photo-box:nth-child(1), .photo-box:nth-child(3), .photo-box:nth-child(5), .photo-box:nth-child(7), .photo-box:nth-child(9), .photo-box:nth-child(11) {
     margin-right: 0px;
}

 /* Nudge images 7 and 9 up slightly to better postion them in the container */
.photo-gallery .photo-box:nth-child(7) img {
        top: -10%;
    }
.photo-gallery .photo-box:nth-child(9) img {
        top: -10%;
    }

    .page-heading h2 {width: 400px; text-align: center;}
}