/******************************************
 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                 
******************************************/

html,
body,
header{
  width: 100%;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;

 
}

footer{
  line-height: 17px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 300;
  font-size: .7rem;
  overflow: hidden;
  width:100%;
  color: white;
  z-index: 3;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  display: block;
  text-align: left;
}
footer p{
  padding-top: 60px;
  padding-left: 5%;
  padding-right: 5%;

  padding-bottom: 50px;
 
}

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

ul{
  margin: auto;
  padding: #fff;

}

h2{
  display: inline-block;
  margin: 0 0 0 15px;
  line-height: 35px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  color: white;
  text-align: left;
  position: relative; top: 0px; left: 0;
  z-index: 3;
  text-rendering: optimizeLegibility;
  transition: all .3s ease;  
}


head{
  display: block;
}

/*div{
  margin-top: 80px;
}*/

.container {
    margin: auto;
    transition: all 0.5s ease;
}

.logoStyleIn {
    opacity: 0.5;
    fill: #FFF;
}

.logoColour {
    fill: #000;
}

.logo{
  margin-left: -42px;
  margin-top: 12px;
  position: fixed; left: 50%;
  z-index: 999;
  transition: all 0.5s ease;
}

.logo a{
  text-decoration: none;
  cursor: pointer;
}

.bodyStyle{
  margin: auto;
  background-color: #ccc;

}
.grid{
padding-left:0px
}

.section{
  z-index: 5;
  list-style: none;
  padding: 0px;
  margin: 0 auto; 
  position: relative; 
  width: 286px;
 /* width: 21%;*/
  height: 223px;
  transition: all 0.2s ease;
}


.title{
  position: absolute;
  top: 0px;
  right: 0px;
  display: table;
  text-align: center;
  width: 223px;
  height: 223px;
}

.title>div{
  display: table-cell;
  vertical-align: middle;
}

.titleBoxStyle{
  width: 223px;
  height: 223px;
  z-index: 2;
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}

.desktopNav {
    margin-left: -169px;
    margin-top: 55px;
    position: fixed;
    font-family: 'Helvetica', Arial, sans-serif;
    opacity: 0;
    visibility: hidden;
    display: inline;
    transition: all 1s ease;
  
}

.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;
  border-bottom: 1px solid transparent;

}

.selected{
  color: #fff !important;
  border-bottom: 1px solid !important;
  font-weight: 800;
}


.email{
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 2px;
  font-weight: 300;

}

nav a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.divider{
  color: black;
  border-top-style: dashed;
  border-width: 1px;
  padding-top: 0px

}

.extraLineHeight{
  line-height: 1000px !important;

}


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

/******************************************
 odd and even works style                 
******************************************/

ul li:nth-child(odd) .title {
  position: absolute;
  top: 0px;left: 0px;
  }


 ul li:nth-child(odd) .image{
  position: absolute; 
  top: 0px; right: 0px;
  }

ul li:nth-child(even) .title {
  position: absolute;
  top: 0px;left: 0px;
  }


 ul li:nth-child(even) .image{
  position: absolute; 
  top: 0px; right: 0px;
  }

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



/* Use the following styles if you experience 'flicker' between the original image and the masked one. 
img[data-mask] {
  /* hide original imgs 
  visibility: hidden;
}

.no-js img[data-mask] {
  /* show original imgs for non JS users 
  /* requires '<html class="no-js">' setup as seen in the HTML5 boilerplate */


/*hover styles*/
/* target <image> inside SVG to take advantage of the mask, instead of the SVG bounding box */
/*svg image*/

.section a{
 opacity: 1;
 transition: all .3s ease;
}
.section a:hover{
 opacity: 0.5;
 transition: all .3s ease;
}

nav a{
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
nav a:hover{
  border-bottom: 1px solid;
  transition: all .3s ease;
}

h2:hover{
  line-height: 33px;
  font-size: 1.1rem;
  transition: all .2s ease;
}

/******************************************
/* Reponsive iFrame               
/******************************************/

.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/******************************************
/* OVERLAY MOBILE MENU                  
/******************************************/

/*hamburger menu */



#trigger-overlay {
    position: absolute;
    padding: 20px 40px 22px 10px;
    left: -111px;
    /*    visibility: visible;*/
    opacity: 1;
    top: -15px;
    cursor: pointer;
    -webkit-transform: all .8s ease;
    -moz-transform: all .8s ease;
    -ms-transform: all .8s ease;
    -o-transform: all .8s ease;
    transition: all .8s ease;
    /* background-color: black;*/
}
 

#nav-toggle {
  z-index: 99999;
  outline: none;
  position: relative;
  display: block;
  /*left: -97px;
  top: -5px;*/
  /*padding: 10px 0px 16px 0px;*/
  
  
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  height: 1px;
  width: 30px;
  background: white;
  position: absolute;
  display: block;
  content: '';
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}
*{
  box-sizing: border-box;
}
#nav-toggle span:before {
  top: -10px;
}


#nav-toggle span:after {
 
  bottom: -10px;
  
}

#nav-toggle.active span:before {
  /*left: -5px;
  width: 30px;*/
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;

}
#nav-toggle.active span:after {
 /* left: -5px;
  width: 30px;*/
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-toggle.active span {
  
/*  -ms-transform: scale(1.2);*/ /* IE 9 */
/*  -webkit-transform: scale(1.2); *//* Chrome, Safari, Opera */
/*  transform: scale(1.2);*/
  background-color: transparent;

}
/******************************************
 End of Mobile Menu BTN animation              
******************************************/

/******************************************
Mobile Menu OVERLAY animation             
******************************************/

/* Overlay style */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -80px;
  left: 0;
  /*background: rgba(153  ,153  ,153  ,0.9);*/
}

/* Overlay closing cross */
.overlay .overlay-close {
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: transparent;
  border: none !important;
  z-index: 8;
}
  
/* Menu style */
.overlay nav {
  position: relative;
  top: 50%;
  height: 60%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}

.overlay ul {
  list-style: none;
  padding: 50px 0 0 25px;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}

.overlay ul li{
  display: block;
  padding-bottom: 15px;
  /*height: calc(100% / 10);
  min-height: 50px;*/
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}

.overlay ul li a{
  border-bottom: 1px solid transparent;
  text-transform: uppercase;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: 5px;
  text-align: left;
  color: black;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  -webkit-transform: all .3s ease;
  -moz-transform: all .3s ease;
  -ms-transform: all .3s ease;
  -o-transform: all .3s ease;
  transition: all .3s ease;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  border-bottom: 1px solid black;
  -webkit-transition: -webkit-transform 0.3s;
  transition: all 0.3s ease;
}

/*Social links*/
.mobileSocial.space{
  /*margin-top: -25px;*/
}

.mobileSocial a{
  font-size: .7em !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
 
}

/* Effects */
body {
  background: #ccc;
}

.desktopNav {
    margin-top: 30px;
    transition: all .8s ease;
}


.container {
    padding-top: 70px;
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: all .5s ease;
}

.container.overlay-open {
  opacity: .2;
  -webkit-transform: translateX(60%);
  transform: translateX(60%);
/*  -webkit-transform: scale(0.9);
  transform: scale(0.9);*/
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: all 0.5s ease;
 }


.overlay-contentscale {
  visibility: hidden;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentscale.open {
  visibility: visible;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

/******************************************
 END of Mobile Menu OVERLAY  animation              
******************************************/

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

/*Mobile portrait iphone 5*/
@media only screen and (max-width: 320px) {
  .desktopNav{
    display: none;
  }
  .grid li:nth-child(odd) {
    margin-bottom: 0%;
  }

  .grid li:nth-child(even) {
    margin-top: 0%;
  }
}

/*Mobile portrait iphone 6*/
@media all and (min-device-width:350px) and (max-width: 399px) {
 
.overlay ul {
  padding: 50px 0 0 45px;
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}
  }

/*Mobile portrait iphone 6 Plus*/
@media all and (min-device-width:400px) and (max-width: 500px) {

.overlay ul {
  padding: 50px 0 0 65px;
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all .2s ease;
  -o-transform: all .2s ease;
  transition: all .2s ease;
}
  }


/*Mobile Lanscape*/
@media all and (min-device-width:320px) and (max-device-width:629px) and (orientation:landscape) {
.grid{
  zoom:75%;
}

.grid li:nth-child(odd) {
  margin-bottom: 8%;
}

.grid li:nth-child(even) {
  margin-top: 8%;
}


.container{
  width: 106%;
  margin: 0 auto;
  -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;
}
  
.section{
  float: left;
  position: relative; left;
  width: 40%;
  margin-left:4%;
  margin-right:2%;
  margin-bottom:4%;
  -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;
}

.logo{
  margin-top: 10px;
  position: fixed; left:42px;
  z-index: 999;
}
.overlay, 
.overlay nav,
.overlay-close
{
  margin: 0 auto;
  top: 50%;
  height: 70%;
  opacity: 0;
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  -webkit-transform: all .2s ease;
  -moz-transform: all .2s ease;
  -ms-transform: all 2s ease;
  -o-transform: all .2s ease;
  transition: all 0.2s ease;

}

    .desktopNav {
        margin-top: 70px;
        margin-left: 20px;
        visibility: visible;
        display: inline;
        opacity: 1;
        -webkit-transform: all .8s ease;
        -moz-transform: all .8s ease;
        -ms-transform: all .8s ease;
        -o-transform: all .8s ease;
        transition: all .8s ease;
    }

}


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


    #trigger-overlay {
        top: -6px;
        opacity: 0;
        visibility: hidden;
        left: -110px;
        -webkit-transform: all .8ss ease;
        -moz-transform: all .8s ease;
        -ms-transform: all .8s ease;
        -o-transform: all .8s ease;
        transition: all .8s ease;
    }

.grid li:nth-child(even) {
  margin-top: 7%;
}


.container{
  width: 630px;
  padding-top: 130px;
  /*width: 92%;*/
  margin: 0 auto;
  -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;
}
  
.section{
  float: left;
  position: relative; left;
  width: 44%;
  margin-left:4%;
  margin-right:2%;
  margin-bottom:4%;
  -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;
}

/*.logo{
  margin-top: 10px;
  position: fixed; left:42px;
  z-index: 999;
}*/
  .overlay, 
  .overlay nav,
  .overlay-close
  {
  margin: 0 auto;
    top: 50%;
    height: 70%;
    opacity: 0;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    -webkit-transform: all .2s ease;
    -moz-transform: all .2s ease;
    -ms-transform: all 2s ease;
    -o-transform: all .2s ease;
    transition: all 0.2s ease;

  }

  .desktopNav{
   margin-top: 60px;
/*    margin-left:20px;*/
    visibility: visible;
    display: inline;
    opacity: 1;
    -webkit-transform: all .8s ease;
    -moz-transform: all .8s ease;
    -ms-transform: all .8s ease;
    -o-transform: all .8s ease;
    transition: all .8s ease;
  }

/*@media only screen and (min-width: 700px) {
.container{
  width: 100%;
  margin: 0 auto;
  transition: all 0.5s ease;
}
*/

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

.container {
  padding-top: 80px;
}
        .grid li:nth-child(odd) {
  margin-bottom: 0%;
}

.grid li:nth-child(even) {
  margin-bottom: 0%;
  margin-top: 0%;
}

.grid li:nth-child(3n-1) {
  margin-top: 5%;
}

.grid li:nth-child(3n) {
  margin-bottom: 5%;
}


.container{
  width: 940px;
  /*width: 95%;*/
  -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;
}

.section{
  width: 28.8%;
  margin-left:2%;
  margin-right:2%;
  margin-bottom:3%;
  -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;
}

@media only screen and (min-width: 1100px) {
/*.logo{
  position: fixed; left:6%;
}*/
.container{
  width: 1100px;
 /* width: 95%;*/
  -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;
}

.section{
  width: 25%;
  margin-left:4.5%;
  margin-right:3%;
  margin-bottom:4%; 
  -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;
}
@media only screen and (min-width: 1200px) {
/*.logo{
  position: fixed; left:8%;
}*/
@media only screen and (min-width: 1400px) {

  
 .grid li:nth-child(odd) {
  
  margin-bottom:0%;

}

.grid li:nth-child(3n-1) {
  margin-top: 0%;
}

.grid li:nth-child(even) {
  margin-bottom: 0%;
  margin-top: 5%;
}



.grid li:nth-child(3n) {
  margin-bottom: 0%;
}

/*.logo{
  position: fixed; left:5%;
}*/
.container{
  padding-top: 120px;
  width: 1400px;
  -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;
}

.section{
  width: 21%;
  margin-left:2.7%;
  margin-right:.6%;
  margin-bottom:3%;
  -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;
}

/*Photo page style*/
/*body {
  padding: 2px 0 0 2px;
}*/

.gallery img {
  float: left;
  
 /* ORIGINAL setting*/
  /*padding: 0 2px 2px 0;*/

  padding:  5px;
  /* Yes, you *can* adjust/remove padding. */
}
/*End Photo page style*/

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

.container{
  width: 1500px;
  -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;
}

.section{
  width: 20.5%;
  margin-left:2.7%;
  margin-right:1.6%;
  margin-bottom:3%;
  -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;
}


/*@media only screen and (min-width: 1700px) {
.container{
  width: 1700px;
  -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;
}

.section{
  width: 20.5%;
  margin-left:1.7%;
  margin-right:2.6%;
  margin-bottom:2%;
  -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;
}
@media only screen and (min-width: 1900px) {
.container{
  width: 1800px;
  -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;
}

.section{
  width: 16.5%;
  margin-left:1.7%;
  margin-right:1.7%;
  margin-bottom:2%;
  -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;
}*/
/******************************************
/* END OF MEDIA QUERY                   
/******************************************/