/******************************************
logo Inside invert            
******************************************/

.logoStyleIn {
    fill: #F9F6F1;
}

/******************************************
Over write - Styles                
******************************************/

.noMarginTop{
    margin-top: 0px;
}

.loading::before {
  
    filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(318deg) brightness(114%) contrast(95%);
}

.frameStyle {
    /**background-color: #F9F6F1;**/
    background-color: #F9F6F1;
}
.frameStyle2 {
     background-color: #dee8e4;
}

.logoColour {
    transition: fill 2.4s ease;
    fill:#0B575A;
}

.green,
.svgStroke {
    stroke: #0B575A;
}
.light,
.contentStyle{
    font-weight: 350;
}

.txtAlignCentre{
    text-align: center;
}

/* .darktext {

    color: #0B575A;
} */
.bolded { 
    font-weight: bold; 
}

h3,
p {
font-weight: 350;
}

h2,
bolded{
 font-weight: 500;
}
.fontColour{
    color: #24AE90;
}

.lineHeight{
    line-height: 25px;
}
.green,
li,
h1,
h2,
h3,
p,
.subContentStyle,
.contentStyle,
.divider,
.dividerExtra,
.bodyStyle,
.linkStyle,
.copyright,
.projectStyle {
    color: #0B575A;
}
.linkStyle {
    border-bottom: 1px dotted #eb897a;
}

/*.buyBtn{
    background-color: #666;
}

.imageColor {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
*/

::selection,
::-moz-selection {
    color: #eb897a;
}


.imgColumnL,
.imgColumnR {
    width: 49%;
}


/******************************************
 END OF Over write - Styles                      
******************************************/

/******************************************
 Cycle2 Slideshow               
******************************************/
.fit-vids-style {
    height: 0px;
}

.slider {
    width:100%;
    margin:0 auto;
    position: relative;
}

.slide02,
.slide03  {
    width:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height:600px;
    position: absolute;
    text-indent: 0;
}


    #slide02_1 {
         background-image: url(../img/portfolio/work/lyka/DesignProcess/designProcess_S01.jpg);
    }
    #slide02_2 {
        background-image: url(../img/portfolio/work/lyka/DesignProcess/designProcess_S02.jpg);
    }
    #slide02_3 {
        background-image: url(../img/portfolio/work/lyka/DesignProcess/designProcess_S03.jpg);
    }  
    #slide02_4 {
        background-image: url(../img/portfolio/work/lyka/DesignProcess/designProcess_S04.jpg);
    }  


    
    
   #slide03_1 {
             background-image: url(../img/portfolio/work/lyka/FinalTesting/FinalTesting_s01.jpg);
        }
    #slide03_2 {
            background-image: url(../img/portfolio/work/lyka/FinalTesting/FinalTesting_s02.jpg);
        }
   #slide03_3 {
            background-image: url(../img/portfolio/work/lyka/FinalTesting/FinalTesting_s03.jpg);
        }  
    #slide03_4 {
            background-image: url(../img/portfolio/work/lyka/FinalTesting/FinalTesting_s04.jpg);
        }  
    

/******************************************
 END OF cycle2 Slideshow               
******************************************/
.vimeoStyle {
/*        width: 500px;*/
    height: 800px;
    width: -webkit-fill-available;
    /*    width: 34%;
    height: 50%;
    position: absolute;*/
}
.indent{
    padding-left: 16px;
}

.vimeoHero {
    padding: 106.52% 0 0 0;
    position: relative;
}



.Ipad, .Mobile {
    display: none;
}

@media(max-width: 768px) {
    .Desktop, .Mobile {
        display: none;
       
    }

    .Ipad {
        display: block;
    }
}

@media(max-width: 500px) {
    .Desktop, .Ipad {
        display: none;
    }

    .Mobile {
        display: block;
    }
}

#Eras_img {
  height: 100%;
  width:100%;
}

@media only screen and (max-device-width:551px) {
    #Eras_img {
        background-image: url(../img/portfolio/work/hkow/hkowApp_Eras_mobile.jpg);
    }
}

@media screen and (min-width: 552px) {
    #Eras_img {
        background-image: url(../img/portfolio/work/hkow/hkowApp_Eras.jpg);
    } 
} 




/*****************************************
    /* MEDIA QUERY                   
/******************************************/

    @media only screen and (max-device-width:551px) {
        .vimeoStyle {
            /*        width: 100%;*/
            height: 534px;
        }
    

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


    .imgColumnR,
    .columnR {
        margin-top: 17px;
        width: 100%;
        margin-left: 0px;
/*        float: none;*/
    }
    .dividerExtra {
        display: block;
    }
    
    @media only screen and (max-device-width:551px) {
        .columnL,
        .columnR,
        .imgColumnL {
            width: 100%;
            float: left;
        }
    
        .imgColumnR,
        .columnR {
            width: 100%;
            margin-left: 0px;
        }
        .slide02 {
            height: 200px;
        }
    
        .slide {
            height: 200px;
        }
    
    @media only screen and (min-width: 500px) {
            .slide02 {
                height: 400px;
            }
    
            .slide {
                width: 100%;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                height: 400px;
                position: absolute;
                text-indent: 0;
                z-index: 0;
            }

@media only screen and (min-width: 800px) {
                .slide02 {
                    height: 600px;
                }

                .slide {
                    width: 100%;
                    background-position: center center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    height: 500px;
                    position: absolute;
                    text-indent: 0;
                    z-index: 0;
          }
/* 
                #slide1 {
                    background-image: url(../img/portfolio/work/SlimeFest/L/SlimeFest_StyleGuide_L.jpg);
                }

                #slide2 {
                    background-image: url(../img/portfolio/work/SlimeFest/L/logo_nick_L.jpg);
                }

                #slide3 {
                    background-image: url(../img/portfolio/work/SlimeFest/L/Screen-Shot_L.jpg);
                }

                #slide4 {
                    background-image: url(../img/portfolio/work/SlimeFest/L/InVenue_L.jpg);
                }

                #slide5 {
                    background-image: url(../img/portfolio/work/SlimeFest/L/SlimeMeter_L.jpg);
                }

                #slide6 {
                    background-image: url(../img/portfolio/work/SlimeFest/S/Event_Delta_L.jpg);
                } */



                @media only screen and (min-width:900px) {

                    /*                .slide02 {
                    height: 576px;
                }
*/
                    .slide {
                        width: 100%;
                        background-position: center center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        height: 600px;
                        position: absolute;
                        text-indent: 0;
                        z-index: 0;
                        /*transition: all .3s ease;*/
                    }