/* Extends ''Pure Css'' a small framework /set of responsive CSS modules
https://purecss.io/ :: https://github.com/pure-css/pure/ :: https://purecss.io/grids/*/

/* Check for errors here--  https://jigsaw.w3.org/css-validator/
https://thecraftysmith.com/css/styles.css (don't worry about vendor extension warnings */

/*Help  https://www.w3schools.com/css/default.asp -- https://htmlcolorcodes.com/color-picker/ */

/* Load fonts in use - others in css/fonts.css */
@font-face {
    font-family: 'lucida_console';
    src: url('lucida_console_regular-webfont.woff2') format('woff2'),
         url('lucida_console_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'courier_prime';
    src: url('courier_prime-webfont.woff2') format('woff2'),
         url('courier_prime-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'streetscript';
    src: url('streetscript-webfont.woff2') format('woff2'),
         url('streetscript-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}
body {
    height:100vh;
    margin-top: 2vw;
    font-family: courier_prime, lucida_console, Arial, Helvetica, sans-serif;
    color: #2A2A2A;
}
/* font for all text inside ANY grid */
.pure-g [class*=pure-u] {
    font-family: courier_prime, lucida_console, Arial, Helvetica, sans-serif;
}
/* font for headers */
h1, h2 {
    font-family: streetscript,lucida_console, courier_prime, Arial, Helvetica, sans-serif;
    margin: 0.5rem 0 1rem;
    color: #303030;
}
h3 {
    font-family: streetscript,lucida_console, courier_prime, Arial, Helvetica, sans-serif;
    margin: 0.5rem 0 0.3rem;
}
/* font class to usin in <div <span etc */
.courier{font-family: courier_prime, lucida_console, Arial, Helvetica, sans-serif;}
.lucida{font-family: lucida_console, courier_prime, Arial, Helvetica, sans-serif;}
.streetscript{font-family: streetscript,lucida_console, courier_prime, Arial, Helvetica, sans-serif;}
.narrow{word-spacing: 0px;letter-spacing: 0px;text-justify: none;}

/* images */
img{
    /*object-fit: scale-down;*/
    object-fit: contain;
    padding:0;
}
.portfolio-images img, .workshop-images img,
.decor-images img,.about-images img,#modalImg{
        border: 1px solid rgba(0, 58, 154, 0.2);
}

.logo {
    display: inline-block;
    width: 450px;
    margin: 0 0 16px 20px;
    border:0;
}
/* Gradient classes with background mask for text */
.gradient-text{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6afda+0,bdb9fd+51,64dcf4+100 */
/*    text-shadow: 1px 1px rgba(128, 128, 128, 0.3);    */
    background: #e6afda;
    background: -moz-linear-gradient(left,  #e6afda 0%, #bdb9fd 51%, #64dcf4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #e6afda 0%,#bdb9fd 51%,#64dcf4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #e6afda 0%,#bdb9fd 51%,#64dcf4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-full{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1c0e8+0,bdb9fd+43,64dcf4+74,c2fbc8+94,faf7c8+100 */
    background: #f1c0e8; /* Old browsers */
    background: -moz-linear-gradient(left,  #f1c0e8 0%, #bdb9fd 43%, #64dcf4 74%, #c2fbc8 97%, #faf7c8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f1c0e8 0%,#bdb9fd 43%,#64dcf4 74%,#c2fbc8 97%,#faf7c8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f1c0e8 0%,#bdb9fd 43%,#64dcf4 74%,#c2fbc8 97%,#faf7c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Gradient classes for element backgrounds */
.gradient-bg{background-size:100%;background-image: linear-gradient(to right,  #e6afda 0%,#bdb9fd 51%,#64dcf4 100%);}
.gradient-bg-full{background-size:100%;background-image: linear-gradient(to right,  #f1c0e8 0%,#bdb9fd 43%,#64dcf4 74%,#c2fbc8 97%,#faf7c8 100%);}

/* Menu sizing and colours*/
.menu{
    display: inline-block;
    width: 540px;
    height:60px;
    vertical-align:bottom;
    margin:0 0 0 10px;
}
/* All links */
a{
    color: #0559AF;
    text-decoration: none;
}
/* Menu links with colour boxs */
.menu a {
    border: 1px solid #707070;  /*#4C4C4C #616161*/
    border-radius: 1px;
    padding: 3px 5px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 1rem;
    color: #044C96;
    text-decoration: none;
    letter-spacing: 0;
    word-spacing: -0.25rem;
    font-weight: 400;
    /*filter: drop-shadow(1px 1px 1px rgba(3, 63, 125, 0.2));*/
}

/* Menu link colours */
.menu a:hover,.tab button.active {background-color:#FFFFFF;}

.portfolio-link  {background-color:#E6AFDA;}
.menu .portfolio-link:hover  {background-color:#E09BD1;}

.workshops-link,.tab button {background-color:#BDB9FD;}
.menu .workshops-link:hover,.tab button:hover {background-color:#9B95FC;}

.decor-link{background-color:#68D9F0;}
.menu .decor-link:hover{background-color:#3ACDEC;}

.about-link{background-color:#C2FBC8;}
.menu .about-link:hover{background-color:#92F89D;}

.contact-link {background-color:#FAF7C8;margin-right: 0;}
.menu .contact-link:hover {background-color:#F9F296;}

 /* Text link colour */
.link-blue{ color:#033F7D;}

/* Active link colour */
.menu a:active,.portfolio-link.active,.workshops-link.active,.decor-link.active,.about-link.active,.contact-link.active {
    color: #222222;
    /*filter: saturate(115%); */
    filter: drop-shadow(0px 1px 1px rgba(3, 63, 125, 0.2));
}

/* Copyright sticky footer */
.footer {
    position: fixed;
    left: 4vw;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #FFF;
    /*text-align: center;*/
    padding: 7px 0 4px 0;
}
.copyr {
    font-size: .9rem;
    letter-spacing: 0;
}
/* Social share icons */
.social-large img{
   height:40px;
    position: relative;
    top:0px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    transition-delay: 0s;
}
.social-large img:hover{
    top:-7px;
}
.social-sml img{
   height:15px;
    position: relative;
    top:1px;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    transition-delay: 0s;
}
.social-sml img:hover{
    top:-2px;
}
.share-h1{
    margin:30px 0 20px 0;
}

/* -------------------- random adjustments ---------------------  pink purp blue green yellow-- */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 60%; if div is full width*/
    max-width: 60%;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
.float-left {
    float:left;
    margin-right: 20px;
}
.float-right {
    float:right;
    margin-left: 20px;
}
.img-75p {
    max-height: 75%;
    max-width: 75%;
}
.img-50p {
    max-height: 50%;
    max-width: 50%;
}
.margin-bottom-sml {
    margin-bottom:4px;
}
.no-margin-top {
    margin-top:0px;
}
.smaller {
    font-size: smaller;
}

/* -------------------- images & modal pop-up --------------------------- */

/* reduce image size for gallery thumbnails */
.grid-item img {
    max-width: 25%;
    max-height: 25%;
}

 .portfolio-images img,.workshop-images img,
 .decor-images img,.about-images img {
    max-width: 100%;
    max-height: 100%;
    transition: 0.3s;
    cursor:url('../img/icon/zoom-in-32.png'), pointer;
}

/* reduce about me images */
.about-images img {
    max-height: 50%;
}

/* Hover effect for gallery thumbnails */
 .portfolio-images img:hover,.workshop-images img:hover,
 .decor-images img:hover,  .about-images  img:hover  {
     /*opacity: 0.95; */
     /*filter: hue-rotate(10deg);*/
     filter: brightness(1.22);
     filter: saturate(1.22);
     filter: contrast(1.18);
 }

/* Modal window (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top:5px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, 1);
}
.modal-content{
    cursor:url('../img/icon/zoom-out-32.png'), pointer;
    display: block;
    object-fit: contain;
    margin: auto;
    /*height:calc(100vh - 80px); */
    max-height:calc(100vh - 80px);
    max-width:90vw;
}
#modalCaption {
    margin: 0 auto;
    display: block;
    width: 90%;
    max-width:70vw;
    text-align: center;
    font-family: streetscript,lucida_console, Arial, Helvetica, sans-serif;
    font-size:1.3rem;
    line-height:1.5rem;
    color: #3C97D5;
    padding: 15px 0;
    transition: 0.3s;
}

/* Add Animation to modal loading*/
.modal-content, #modalCaption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.4s;
    animation-name: zoom;
    animation-duration: 0.4s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* hover text for galleries */
#hover-alt,.hover-alt{
    height:1.6rem;
    padding: .2rem 0 .2rem 0;
    margin: 0 0 8px 0;
    font-family: streetscript,lucida_console, Arial, Helvetica, sans-serif;
    font-size:1.2rem;
    text-align: center;
    /*color:#033F7D; */
    background-color: #FFF;
    color: #3C97D5;
    z-index: 50;
}

/* Close modal pop up button */
.close {
    position: absolute;
    top: 10px;
    right: 35px;
    color: #222222;
    font-size: 40px;
    font-weight: bold;
    transition: 0.2s;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* -------------------- homepage carousel ---------------------- */
.carousel {
    background: #FFFFFF;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width:1200px;
    margin: 0 auto;
}
.carousel-cell {
    background: #ffffff;
    width: 100%;
    max-height: 100vh;
}
.carousel-cell img {
    display: block;
    width: 100%;
}
.flickity-page-dots {
   margin-bottom:1rem;
}

/* ------- Workshops tab style -------   */
.tab {
    overflow: hidden;
    margin-bottom:-1px;
}
/* Style Tab buttons */
.tab button {
    float: left;
    outline: none;
    cursor: pointer;
    font-family: lucida_console, courier_prime, Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    color: #044C96;
    text-decoration: none;
    /*padding: 12px 22px; */
    transition: 0.3s;
    border: 1px solid #707070; /*#363636*/
    border-radius: 1px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    padding: 7px 14px 3px 14px;

    /*margin-right: 14px; put space between tab buttons like the menu. disable margin-left ID's below*/
}
/* #woodland-button,#painting-button */
#tabTwoButton,#tabThreeButton,#tabFourButton{
    margin-left: -1px;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 10px;
    border: 1px solid #616161;
    margin-bottom: 35px;
}
.tab button.active {
    color: #2A2A2A;
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
    cursor: default;
}

/* -------------------- contact form  --------------------------- */
.contactDetailsTel img{
    position: relative;
    top:5px;
    margin:0 1px 0 0;
}
.contactDetailsAt img{
    position: relative;
    top:5px;
    margin:0 4px 0 0;
}
#mailform{
    width:70%;
    text-align:left;
    max-width:46rem;
    border:1px #044C96 solid;
    -webkit-border-radius:2px;
    border-radius:2px;
    margin:30px 0;
    padding: 15px 5px 0;
}
label{
    color:#044C96;
}
fieldset{
        border: none;
}
input[type="text"],textarea{
    border:1px #044C96 solid;
    width:70%;
    line-height:1.4rem;
    margin:0.5rem 0;
}
input:focus,textarea:focus,input:focus-visible{
    outline:1px solid #D474BF;
    border:1px #D474BF solid;
}
.textbox{
    width:100%
}
.info_fieldset .button{
    color: #044C96;
    background-color:#68D9F0;
    border: 1px solid #4C4C4C;
    border-radius: 1px;
    padding: 5px 6px 4px 6px;
    margin: 18px 20px 8px 0;
    font-size: .9rem;
    text-decoration: none;
    letter-spacing: 0;
}
.info_fieldset .button:hover{
    background-color:#3ACDEC;
}
.notification_error{
    text-align:left;
    border:1px solid #A91704;
    background:#F4E0DE;
    max-width:48rem;
    height:auto;
    padding:1rem;
    margin-bottom:1rem;
    -webkit-border-radius:2px;
    border-radius:2px
}
.notification_ok{
    text-align:left;
    border:1px #4E9403 solid;
    background:#EBF3E2;
    max-width:48rem;
    height:auto;
    padding:1rem;
    margin-bottom:1rem;
    -webkit-border-radius:2px;
    border-radius:2px
}
#captchaimg{
    border:1px #044C96 solid;
}
#captcha{
    width: 210px;
}

::-webkit-input-placeholder{
    color:#A03417;
    font-size:small
}
::-moz-placeholder{
    color:#A03417;
    font-size:small
}
:-moz-placeholder{
    color:#A03417;
    font-size:small
}

/* --------------------- Adjustment steps for screen sizes ----------------- */

@media screen and (max-width: 1080px) {
    .carousel-cell {
        /*height: 420px;        */
    }
    .menu{
        margin-top:10px;
        margin-left:35px;
        height:35px;
    }
    .tab button {
        font-size: 1rem;
        padding: 7px 12px 3px 12px;
    }
    #mailform,input[type="text"],textarea{
        width:75%;
    }
}

@media screen and (max-width: 810px) {
    .carousel-cell {
       /* height: 340px;*/
    }

    #mailform{
        width:100%;
        margin:10px 0;
    }
    .menu{
        margin-top:10px;
        margin-left:35px;
        height:35px;
    }
    .tab button {
        font-size: 0.9rem;
        padding: 7px 8px 3px 8px;
    }
    .hover-alt{
        height:1.5rem;
        padding: .3rem 0 .3rem 0;
        margin: 0 0 8px 0;
        font-family: streetscript,lucida_console, Arial, Helvetica, sans-serif;
        font-size:1rem;
    }
    #mailform,input[type="text"],textarea{
        width:90%;
    }
}

@media screen and (max-width: 500px) {
    .logo {
        width: 420px;
        margin: 0 25px 0 0;
    }
    .menu{
        width: 100px;
        height:220px;
        margin-left:20px;
        margin-bottom:0;
    }
    .menu a {
        padding: 3px 5px 3px 5px;
        margin: 0 5px 0 0;
        font-size:1.2rem;
        line-height:2.2em;
    }
    .carousel-cell {
        /*height: 360px; */
    }
    .tab button {
        font-size: 0.8rem;
        padding: 6px 5px 3px 5px;
    }
    .hover-alt{
        height:1.2rem;
        padding: .3rem 0 .3rem 0;
        margin: 0 0 6px 0;
        font-family: lucida_console, Arial, Helvetica, sans-serif;
        font-size:0.8rem;
    }
    #mailform,input[type="text"],textarea{
        width:98%;
    }
}
@media screen and (max-width: 380px) {
    .logo {
        width: 330px;
        margin: 7px 25px 0 0;
    }
    .menu{
        width: 80px;
        height:220px;
        margin-left:15px;
    }
    .menu a {
        padding: 3px 5px 3px 5px;
        margin: 0 5px 0 0;
        font-size:1.2rem;
        line-height:2.2em;
    }
    .carousel-cell {
        /*height: 360px; */
    }
    .tab button {
        font-size: 0.6rem;
        padding: 5px 4px 3px 4px;
    }

    #mailform,input[type="text"],textarea{
        width:98%;
    }
}
/* -------------------- Adjustment steps for number of gallery columns --------------- */

@media (max-width: 3840px) {
    .portfolio-images, .workshop-images, .decor-images{
        -webkit-column-count: 4;
        column-count:         4;
    }
    .about-images{
        -webkit-column-count: 2;
        column-count:         2;
    }
}
@media (max-width: 1200px) {
    .portfolio-images, .workshop-images, .decor-images{
        -webkit-column-count: 4;
        column-count:         4;
    }
    .about-images{
        -webkit-column-count: 2;
        column-count:         2;
    }
}
@media (max-width: 1000px) {
    .portfolio-images, .workshop-images, .decor-images{
        -webkit-column-count: 3;
        column-count:         3;
    }
    .about-images{
        -webkit-column-count: 2;
        column-count:         2;
    }
}
@media (max-width: 800px) {
    .portfolio-images, .workshop-images,.about-images, .decor-images{
        -webkit-column-count: 2;
        column-count:         2;
    }
    .about-images{
        -webkit-column-count: 1;
        column-count:         1;
    }
}
@media (max-width: 400px) {
    .portfolio-images, .workshop-images,.about-images, .decor-images{
        -webkit-column-count: 1;
        column-count:         1;
    }
    .about-images{
        -webkit-column-count: 1;
        column-count:         1;
    }
    .footer {
        height: 65px;
    }
}