/******************************************
loading image for vimeo video loop            
******************************************/

/**, *::before, *::after {
  box-sizing: border-box;
}*/
.loading {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    .loading::before {
        content: "";
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-image: URL("../img/Loading_loop.gif");
        background-size: 1280px 720px;
        filter: invert(100%) sepia(4%) saturate(362%) hue-rotate(220deg) brightness(115%) contrast(84%);
        /*        filter: invert(56%) sepia(48%) saturate(5576%) hue-rotate(162deg) brightness(96%) contrast(101%);*/
    }

 /*End of Original Loading bar settings*/


  /******************************************
 /*clearfix                
******************************************/
    /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
    .cf:before, .cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
/******************************************
 END OF clearfix                 
******************************************/

/*.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}
*/
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


::-moz-selection {
    background: transparent;
    color: #66ffcc;
}

::selection {
    background: transparent;
    color: #66ffcc;
}

html,
body,
header {
    text-decoration: none;
    width: 100%;
    -webkit-font-smoothing: antialiased
}

ul {
    margin: auto;
    padding: 10px;
}

head {
    display: block;
}


h1 {
    /*text-transform: uppercase;*/
    /*letter-spacing: 5px;*/
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 500;
    /*font-weight: 300;*/
    font-size: 1.5rem;
    color: white;
    line-height: normal;
    text-align: left;
    position: relative;
    top: 0px;
    left: 0;
    z-index: 3;
}
h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.3rem;
    color: white;
    line-height: normal;
    text-align: left;
    position: relative;
    top: 0px;
    left: 0;
    z-index: 3;
}

h3 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 300;
    margin-top: 0;
    /* margin-bottom: 25px; */
    font-size: 1.1rem;
    color: #F9F6F1;
    line-height: normal;
    text-align: left;
    position: relative;
    top: 0px;
    left: 0;
    z-index: 3;
}
.stroke{
    text-decoration-color: white;
    text-decoration: line-through;
}

/* .fontBold{
    font-weight: 500;
} */


.noMarginBtm{
    margin-bottom: 0px;
}
.sMarginTop{
    margin-top: 8px;
}
.emoji{
    color: white;
}

.bodyStyle {
    margin-top: 0;
    padding: 0;
    margin-left: auto;
    background-color: #ccc;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    /*    -webkit-transform: all .5s ease;
    -moz-transform: all .5s ease;
    -ms-transform: all .5s ease;
    -o-transform: all .5s ease;
    transition: all 0.5s ease;*/
}

.logoHotspot {
    position: fixed;
    left: 50%;
    z-index: 999;
}
.logoStyleIn {
    opacity: 0.5;
    fill: #FFF;
}
.logoColour {

    fill: #000;
}

.logo {
    margin-left: -42px;
    /*    margin-top: 28px;*/
    margin-top: 30px;
    transition: fill .5s ease;
/*    transition: all 0.5s ease;*/
}

.logo a {
        text-decoration: none;
        cursor: pointer;
}
.svgStroke {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
}

/*svg cursor pointer*/

svg {
    z-index: cursor: pointer;
}
/* whole rectangle */
/* OR */
.element-name {
    cursor: pointer;
}

.btnClose {
    display: block;
    margin-top: 20px;
    z-index: 999;
}

.closePosition {
    opacity: .7;
    position: fixed;
    top: 15px;
    left: 30px;
    z-index: 999;
}

.spacer {
    margin-top: 100px;
}

.smallSpacer{
    padding-top: 8px;
}

.margin-btm {
    margin-bottom: 23px;
}

/*grey frame*/

.frameStyle {
    background-color: #999;
    display: block;
    overflow: hidden;
    /*margin:5px;*/
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    transition: all .5s ease;
    /*position: absolute;*/
    /*top:0;
  bottom:0;
  width: 99%;*/
}

.frameStyle2 {
    background-color: #999;
    display: block;
    overflow: hidden;
    /*margin:5px;*/
    /* margin-top: 20px; */
    margin-left: 20px;
    margin-right: 20px;
    transition: all .5s ease;
    /*position: absolute;*/
    /*top:0;
  bottom:0;
  width: 99%;*/
}

.imageStyle {
    overflow: hidden;
}

.viewBtn {
    letter-spacing: 5px;
    padding: 5px 15px;
    display: block;
    width: 100px;
    border-radius: 2px;
    text-align: center;
    text-decorclosepation: none;
    font-size: .5rem;
    /* font-weight:500; */
    text-transform: uppercase;
    color: black;
    /*line-height: 19px;*/
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #666;
    line-height: normal;
    margin: 0;
    position: absolute;
    transform: translateX(-50%);
}

.buyBtn {
    padding: 3px 4px;
    width: 95px;
    border-radius: 2px;
    text-align: center;
    background-color: #666;
    text-decoration: none;
    font-size: 1em;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
}

.contentPhotoStyle {
    color: white;
    border-width: 1px;
    font-weight: 300;
    font-size: .8rem;
    line-height: 20px;
    letter-spacing: 1px;
}

.contentStyle {
    color: white;
    margin: 0px 11px 0 11px;
    border-width: 1px;
    font-weight: 300;
    font-size: .9rem;
    line-height: 20px;
    letter-spacing: 1px;
    overflow: hidden;
}

.subContentStyle {
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 5px 0px 0px 0px;
    font-size: 1rem;
    line-height: 23px;
}

.copyright {
    color: white;
    margin: 70px 11px 0 11px;
    border-width: 1px;
    font-weight: 300;
    font-size: .8rem;
    line-height: 20px;
    letter-spacing: .4px;
    overflow: hidden;
    padding-bottom: 50px;
}

.maxSize {
    margin: 0 auto;
    padding-bottom: 20px;
}
.lessBtmPadding{
    padding-bottom: 8px;
}
.columnC {
   al
 
}

.columnL {
    font-size: .9rem;
    width:60%;
    float:left;
}

.imgColumnL {
/*    font-size: .9rem;*/
    width: 60%;
/*    float: left;*/
}

.imgColumnR {
    width: 38%;
    float: right;
}

.columnR {
    margin-left: 20px;
    width: 35%;
    float: right;
}

.divider,
.dividerExtra {
    color: white;
    border-top-style: dashed;
    border-width: 1px;
    padding-top: 0px;
}

.dividerExtra {
    display: none;
}

.navBtnStyle {
    width: 100%;
    line-height: 35px;
    z-index: 3;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
    text-align: left;
    color: black;
    margin: 0 0 0 15px;
    position: relative;
    top: -17px;
    left: 0;
}
/*.textCentre {
    left: 50%;
    float: none;
    text-align: center;
}*/

.textRight {
/*    padding-right:250px;*/
    float: right;
     text-align: right;
}
.textLeft {
/*    padding-left: 250px;*/
    float: left;
    text-align: left;
}

.projectStyle {
    color: white;
    /*    margin: 0px 11px 0 11px;*/
    border-width: 1px;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 20px;
    letter-spacing: 1px;
    overflow: hidden;
    text-decoration: none;
    border-bottom:;
    padding-bottom: 3px;
}



.linkStyle {
    color: white;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 2px;
}
    .projectStyle:hover,
    .linkStyle:hover {
    opacity: 0.4;
    transition: all .3s ease;
}
  
 

    .desktopNav {
        opacity: 0;
        display: none.btnClose;
    }

/******************************************
  Photos section             
******************************************/

.photobody {
    /*padding: 20px 0 0 20px;*/
    padding: 0px
}

.gallery img {
    float: left;
    /* margin-left: 10px;*/
    padding: 0 5px 5px 0;
    /* Yes, you *can* adjust/remove padding. */
}



/******************************************
 END OF Photos section                
******************************************/

/* Responsive iframe */
.ri-wrapSection  {
    padding: 20px 12px 0px 12px;
    margin: 0 auto;
/*        max-width: 960px;*/
    max-width: 1100px;
}

.ri-wrap {
    padding: 80px 12px 0px 12px;
    margin: 0 auto;
/*        max-width: 960px;*/
    max-width: 1100px;
}

.ri-iframe {
    padding-bottom: 56.25%;
    position: relative;
}

    .ri-iframe iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.extraSpace {
    margin-left: 10px;
    transition: all .2s ease;
}

/******************************************
Cycle2 - Prev & Next buttons style
******************************************/
.prevControl, .nextControl{
    cursor: pointer;
    opacity: .6;

    /* Rudy Script to make nav inside cycle */
    /*z-index: 800;*/
    /*margin-top: 20px;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*width: 30%;*/
    /*filter: alpha(opacity=0);*/
    /*height: 100%;*/
}

.prevControl {
    margin-left: -45px;
    margin-top: -360px;
/*    margin-top: -330px;*/
    float: left;
    padding-left: 5px;
    /* Rudy Script to make nav inside cycle */
    /*background: url(../img/left.png) 10% center no-repeat;*/
    /*left:0;*/
}

.nextControl {
    margin-right: -45px;
    /*    margin-top: -330px;*/
    margin-top: -360px;
    /*background: url(../img/right.png) 90% center no-repeat;*/
    /*margin-right:5px; */
    float: right;
    /* padding-right: 20px;*/
}
/******************************************
END OF - Cycle2 - Prev & Next buttons style
******************************************/

/******************************************
/* Read more text box                 
/******************************************/

.card-holder{
    /* display: flex; */
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .card{
    /* width: 20rem; */
    background-color: var(--accent);
    color: #fff;
    margin: 2rem auto;
  }
  
  .card__name{
    font-size: 1.7em;
  }
  
  .card__img{
    /* height: 100%; */
    width: 100%;
    height: 12rem;
    object-fit: cover;
  }
  
  .card-contents{
    padding: 1rem;
  }
  
  .card__read-more{
    display: block;
    opacity: 0;
    height: 0;
    transition: all 0.5s;
  }
  
  .card__read-more--open{
    display: block;
    opacity: 1;
    height: 5rem;
  }
  
  .read-more-btn{
    display: inline-block;
    color: var(--accent);
    background-color: rgb(79, 143, 0);
    padding: 0.5rem 1rem;
    font-size: 1em;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
    cursor: pointer;
  }
  
  .read-more-btn:hover{
    background-color: rgb(103, 243, 93);
    box-shadow: 0 0 2rem rgba(0,0,0,0.1);
    transform: translateY(-3px);
  }

/******************************************
/* END OF --- Read more text box                 
/******************************************/

/******************************************
/* Hover animations                 
/******************************************/

div a {
    opacity: 1;
    transition: all .3s ease;
}


div a:hover :not(.logoHotspot):not(.logo):not(.logoColour):not(.logoStyleIn){
        opacity: 0.5;
        transition: all .5s ease;
    }

/******************************************
/* MEDIA QUERY                   
/******************************************/
@media only screen and (max-width:325px){
    .addSpace {
        padding-top: 358px;
    }
}

@media only screen and (max-width:376px) and (min-width:324px) {
    .addSpace {
        padding-top: 440px;
    }
}
@media only screen and (max-width:419px) and (min-width:377px) {
    .addSpace {
        padding-top: 510px;
    }
}
@media only screen and (max-width:519px) and (min-width:420px) {
    .addSpace {
        padding-top: 692px;
    }
}
  @media only screen and (max-width:548px){
    .dividerExtra {
        display: block;
    }

    .columnL,
    .columnR,
    .imgColumnL {
        width: 100%;
        /*        float: left;*/
    }

    /*    .imgColumnR,{
        margin-top: 80px;
    }*/

    .imgColumnR,
    .columnR {
        width: 100%;
        margin-left: 0px;
    }

  }

    @media only screen and (max-width:548px) and (min-width:520px) {


        .copyright {
            font-size: .7rem;
        }

        .addSpace {
            padding-top: 800px;
        }


        .closePosition {
            top: 12px;
            left: 22px;
        }

        .textLeft,
        .textRight {
            /*        color: white;
        margin: 0px 11px 0 11px;
        border-width: 1px;*/
            font-weight: 200;
            font-size: 1rem;
            /*        font-size: 1rem;*/
            /*        line-height: 20px;
        letter-spacing: 1px;
        overflow: hidden;*/
        }

        .spacer {
            margin-top: 50px;
        }

        /*    .closePosition {
        left: 22px;
    }*/

        


        @media only screen and (max-device-width:1100px) {
            .prevControl {
                margin-left: 0px;
                margin-top: 0px;
                float: none;
            }

            .nextControl {
                margin-right: 0px;
                margin-top: 0px;
                float: right;
            }
            .frameStyle2 {
                margin-top: 10px;
                margin-left: 10px;
                margin-right: 10px /*position: absolute;*/ /*top:0; bottom:0; width: 99%;*/;
                transition: all .5s ease;
            }

            .frameStyle {
                margin-top: 10px;
                margin-left: 10px;
                margin-right: 10px /*position: absolute;*/ /*top:0; bottom:0; width: 99%;*/;
                transition: all .5s ease;
            }


            /*@media only screen and (min-width: 400px) {
         .extraSpace {
                margin-left: 20px;
                transition: all .2s ease;
         }
*/
            @media only screen and (max-width: 629px) {
                .maxSize {
                    display: block;
                    margin: 0 auto;
                    max-width: 522px;
                    max-height: 704px;
                    overflow: hidden;
                }