/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Webfont: ProductSans-Regular */@font-face {
    font-family: 'ProductSans';
    src: url('../fonts/ProductSans-Regular.woff') format('woff'), /* Modern Browsers */;
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body{
  font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
  overflow-x:  hidden!important;
}

.product-sans{
    font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
}

#fader {
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  z-index: 100;
  background: #000000;
  pointer-events: none;
}

#header {
  position: relative;
  width: 100%;
  /* border-bottom: 2px solid #63c7c7; */
}

#header::after {
  display: block;
  content: "";
  clear: both;
}

#header_left {
  width: 100%;
  height: 100%;
  float: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header_right {
  width: 100%;
  height: 100%;
  float: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header_title{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#header_text_container {
  border: 2px solid #63c7c7;
  padding: 18px 30px;
  box-sizing: border-box;
  margin-top: 50px;
  margin-bottom: 50px;
}

#header_text {
  font-size: 18px;
  color: #fff;
}

#header-border {
  position: absolute;
  width: 100vw;
  height: 2px;
  background-color: #63c7c7;
  overflow: hidden;
  bottom: 0;
}

#fs_logo {
  height: 40px;
  margin-top: 30px;
  padding: 0;
  cursor: pointer;
}

#gmp_logo {
  height: 40px;
  padding-top: 30px;
}

#footer_graphic {
  display: block;
  width: 100%;
}

#footer {
  display: block;
  position: relative;
  padding-bottom: 50px;
}

.grid-item {
  padding: 10px!important;
/*  opacity: 0;*/
}

.is-showing-items .grid-item {
  opacity: 1; /* reveal when ready */
}

.caption p {
  width: 100%;
  height: 70px;
  border: solid 3px #63c7c7;
  margin-top: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  overflow: hidden;
  color: white;
  font-size: 16px;
  line-height: 18px;
  font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
}

body{
  background: black;
}
h2, p {
  color: black;
}

#fs_logo_footer {
  position: absolute;
  left: 5%;
  bottom: 20px;
  width: 120px;
  cursor: pointer;
}

#fs_text_footer {
  position: absolute;
  right: 5%;
  bottom: 20px;
  width: 130px;
  cursor: pointer;
}

#privacy_notice {
  width: 130px;
  text-align: center;
  font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
  color: #63C7C7;
  font-size: 13px;
  cursor: pointer;
  right: 5%;
  bottom: 46px;
  transition: 0.3s ease-in;
}

#privacy_notice:hover {
  color: #FFFFFF;
}

#bottom_content {
  position: relative;
  margin: 48px 0;
}


/* 
-------------------------------- FILTER SIDE NAVIGATION CODE ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/

#showcase_grid{
  overflow-x: hidden;
}

#filters-side-navigation{
 background:  black;
 float: left; 
 /*width: 400px; */
 width: 0%; 
 height: 100%; 
 position: absolute; 
 top: 300px; 
 box-sizing: border-box; 
 border-right: 0px solid #63c7c7;
 overflow-x: hidden;
 overflow-y: scroll;
 /*position: fixed;*/
  height: 100vh;
/*overflow: hidden;*/
  scrollbar-color: #63C7C7 #666666;
  scrollbar-width: thin;
  z-index: 99;
  overflow-x:  hidden!important;
}

#filters-side-navigation.mobile.open{
 width: 100%; 
 /*background: green;*/
}

#filters-side-navigation.desktop.open{
  width: 23%;
  min-width: 435px;
/* background: pink;*/
}

.cursor-pointer{
   cursor: pointer;
}

.filter-label{
   font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
   color:  white;
}


#filters-side-navigation.sticky{
  position: fixed!important;
  top: 0px!important;
  left: 0px;
  -webkit-transform: translateZ(0);
}

#side_nav_filters_icon_container{
top: 326px;
left: 30px;
width: 135px;
height: 40px;
z-index: 100;
position: absolute;
z-index: 1;
}

#side_nav_filters_icon_container.sticky{
 position: fixed!important;
  top: 20px!important;
  left: 30px;
  -webkit-transform: translateZ(0);
}

#side_nav_filters_icon_container_inside{
  top: 25px;
  left: 30px;
  width: 135px;
  height: 40px;
  position: absolute;
}

#txt-rotate-container {
  text-align: center;
  font-size: 1.5rem;
  padding: 100px 20px;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
  color: #ffffff;
  font-weight: normal;
  position: relative;
}


/* #txt-rotate-container {
  text-align: center;
  font-size: 1.5rem;
  padding: 100px 20px;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #ffffff;
  font-weight: normal;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
} */

.txt-rotate {
  font-weight: normal;
  color: #63C7C7;
}

.gam_mrec {
  width: 300px;
  height: 250px;
  position: relative;
  margin: 0 auto;
  z-index: 500;
}


/* 
-------------------------------- CLEAR FILTERS STYLES  ----------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

.clear-filters-container {
 
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 90%;
  left:  30px;
  top:  65px;
  background-color: #63c7c7;
  color: black;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border:  2px solid  #63c7c7;
  transition:  all 0.2s ease-in;
  font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
  margin-top: 40px;
}

.clear-filters-container p {
color:  black;
}



/* 
-------------------------------- SIDE NAV FILTERS SEARCH  ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/
#side_nav_search_icon {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 100;
}

#side-nav-search-container{
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 90%;
  left:  30px;
  height: 70px;
  margin-bottom: 110px;
  top: 80px;
   border:  2px solid  #63c7c7;
   cursor: pointer;

}
#side_bar_search_box{
  position: relative;
  background: transparent;
  outline: none;
  border:  0px none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
  width: 85%;
  font-size: 18px;
  color:  white;
  height: 68px;
  top:  0px;
  left:  0px;
  padding-left: 30px;
  box-sizing: border-box;
}

#side_bar_search_box:focus{
  outline: none;
}

#side_bar_search_box::placeholder{
  color: #fff;
}

#search-nav-svg{
  position: absolute;
  left:  30px;
  top:  10px;
}



/* 
-------------------------------- CLOSE BUTTON STYLES  ----------------------------------------------
----------------------------------------------------------------------------------------------------------
*/


#side-nav-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  width: 150px;
  right: 9px;
  height: 70px;
  margin-bottom: 110px;
  top: 10px;
  border: 2px solid #63c7c7;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  margin: 0;
}

/* 
-------------------------------- SCROLL BAR STYLES  ----------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

#filters-side-navigation::-webkit-scrollbar {
  width: 12px;
}

#filters-side-navigation::-webkit-scrollbar-track {
  /* border-radius: 10px; */
  background-color: #666666;
}

#filters-side-navigation::-webkit-scrollbar-thumb {
  background-color: #63C7C7;
  border: 3px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
}
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  /* border-radius: 10px; */
  background-color: #666666;
  
}

*::-webkit-scrollbar-thumb {
  background-color: #63C7C7;
  border: 3px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
}

* {
  scrollbar-color: #63C7C7 #666666;
  scrollbar-width: thin;
}


/* 
-------------------------------- SIDE NAV DROP DOWN STYLES  ----------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

.collapsible {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 90%;
  left:  30px;
  background-color: #000;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-top:  1px solid #63c7c7;
  border-bottom:  1px solid #63c7c7;
  border-right:  2px solid #63c7c7;
  border-left:  2px solid #63c7c7;
  transition:  all 0.2s ease-in;
  font-family: "ProductSans", Arial, Tahoma, Sans-Serif;
}

.collapsible:hover {
  background-color: #63c7c7;
  color:  black;
}

.collapsible.active{
  background-color: #63c7c7;
  color:  black;
}

.content {
  position: relative;
  width: 90%;
  left:  30px;
  padding: 0 0px;
  display: none; /*Change back to display: none;*/
  overflow: hidden;
  background-color: #000;
}

.down_arrow_icon {
  position: absolute;
  right: 18px;
  top: 20px;
  transform: rotate(-90deg);
  transition: transform .4s;
}

#studio_icon_coll {
  position: absolute;
  left: 160px;
  top: 12px;
  width: 25px;
}

#cm360_icon_coll {
  position: absolute;
  left: 160px;
  top: 12px;
  width: 25px;
}

#dv360_icon_coll {
  position: absolute;
  left: 160px;
  top: 12px;
  width: 25px;
}

/* 
-------------------------------- CHECKBOX STYLES  --------------------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

.unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.checkbox-unordered-list{
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #000;
}

ul.checkbox-unordered-list li {
  margin: 20px 0;
  position: relative;
  padding-left:  15px;
  overflow: hidden;

}

/*.centered {
  width: 300px;
  margin: auto;
}*/

.title {
  text-align: center;
  color: #fff;
}

ul.filters-list li label{
color:  white;
line-height: 1em;
font-size: 15px;
padding-bottom: 4px;
margin-top: 4px;
padding-right: 20px;
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: all 0.2 ease-in;
}
.styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #000;
  border: 2px solid #63c7c7;
  box-sizing: border-box;
}
.styled-checkbox:hover + label:before {
  background: #63c7c7;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #63c7c7;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #63c7c7;
}
.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: #63c7c7;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}








/*.content ul{
 list-style: none;
 list-style-type: none;
 background: red;
}

.content ul li{

    position: relative;
    margin-bottom: .8em;

}

.checkbox-filter{
  position: relative;
  left:  0px;
  background: black;
}*/


/*.checkbox-filter input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 2;
    background: black;
}*/

/*.checkbox-filter-label{
  display: block;
}*/



/* 
-------------------------------- SIDE NAV FILTERS STUDIO FORMATS  ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/





#studio_ad_formats_filter_container{
    /*top:  290px;*/
    cursor:  pointer;
      float: left;
       border:  2px solid  #63c7c7;
  box-sizing: border-box;
  left:  0px;
  /*min-width: 385px;*/

  font-size: 18px;
}


#studio_ad_formats_header{
  cursor:  pointer;
  float: left;
  border:  2px solid  #63c7c7;
  box-sizing: border-box;
  left:  0px;
  /*min-width: 385px;*/

  font-size: 18px;
}



#studio_icon{
  position: absolute;
  top:  18px;
  left:  200px;
}

#studio_down_arrow_icon{
  position: absolute;
  top:  28px;
  left:  270px;
}

#studio_formats_fiters{
  float: left;
  padding-top: 0px;
  padding-bottom:  30px;
  padding-left:  30px;
  border:  2px solid  #63c7c7;
  box-sizing: border-box;
  left:  0px;
  width: 100%;
  height: 70px;
  font-size: 18px;
  top:  0px;
  height: auto;
}


/* 
-------------------------------- DV360 FORMATS  ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/


#dv360_formats_filter_container{
    top:  0px;
    cursor:  pointer;
}

#dv360_icon{
  position: absolute;
  top:  18px;
  left:  200px;
}

#dv360o_down_arrow_icon{
  position: absolute;
  top:  28px;
  left:  270px;
}

#dv360_formats_fiters{
  padding-top: 30px;
  padding-bottom:  30px;
  padding-left:  30px;
  border:  2px solid  #63c7c7;
  box-sizing: border-box;
  left:  0px;
  /*min-width: 385px;*/
  width: 100%;
  height: 70px;
  font-size: 18px;
  top:  70px;
  height: auto;
}


/* 
-------------------------------- MEDIA QUERIES DAVE  ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/

@media (min-width:900px) {

  #header_logos::after {
    display: block;
    content: "";
    clear: both;
  }

  #header_left {
    width: 50%;
    float: left;
    justify-content: flex-start;
  }

  #header_right {
    width: 50%;
    float: left;
    justify-content: flex-end;
  }

  #header_title {
    position: absolute;
    top: 0;
    width: 100%;
  }

  #header_text_container {
    padding: 18px 30px;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  #header_text {
    font-size: 18px;
  }

  #fs_logo {
    height: 40px;
    margin-top: 59px;
    margin-bottom: 59px;
    margin-left: 50px;
    padding: 0;
  }

  #gmp_logo {
    height: 40px;
    padding-top: 59px;
    padding-bottom: 59px;
    padding-right: 50px;
  }

  .grid-this {
    padding-left: 5%!important;
    padding-right: 5%!important;
    box-sizing: border-box!important;
  }

  #filters-side-navigation {
    top: 160px;
  }

  #side_nav_filters_icon_container{
    top: 194px;
  }

  #fs_logo_footer {
    left: 5%;
    bottom: 55px;
    width: 160px;
  }
  
  #fs_text_footer {
    right: 17%;
    bottom: 60px;
    width: 160px;
  }

  #privacy_notice {
    width: 111px;
    font-size: 17px;
    right: 4%;
    bottom: 66px;
  }

  #txt-rotate-container {
    font-size: 2.5rem;
    padding: 120px 20px;
  }

}

@media (min-width: 1200px) { 
  .gam_mrec {
    width: 300px;
    height: 250px;
    position: absolute;
    left: 5%;
    margin: 0 10px;
  }
}


@media (min-width: 1400px) { 

  #header_text_container {
    padding: 23px 56px;
  }
  
  #header_text {
    font-size: 24px;
  }

  #fs_logo {
    height: 55px;
    margin-left: 150px;
    padding: 0;
  }

  #gmp_logo {
    height: 55px;
    padding-right: 150px;
  }
  
  #filters-side-navigation {
    top: 175px;
  }
  
  #side_nav_filters_icon_container{
    top: 200px;
  }

  #fs_logo_footer {
    left: 5%;
    bottom: 55px;
    width: 280px;
  }
  
  #fs_text_footer {
    right: 19%;
    bottom: 60px;
    width: 225px;
  }

  #privacy_notice {
    width: 192px;
    font-size: 26px;
    right: 5%;
    bottom: 67px;
  }

  #txt-rotate-container {
    font-size: 3rem;
    padding: 102px 20px;
  }



}



/* 
-------------------------------- HORIZONTAL FILTER NAVIGATION UI OLD CODE REMOVE LATER ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/

/*  Horizonal Filter Navigation UI old code can remove later  */

.filter-nav{
  /*width: 100%;
  position: fixed;
  height: 40px;
  margin: 0 auto;
  z-index: 100;
  margin-left: 0%;
 /* display: none!important;*/
/*  background: black;*/
}

.filter-nav ul{
/*margin: 0;
padding: 0;
width: 100%;
height: 40px;
margin: 0 auto;
list-style: none;
text-align: center;*/
}

/*.filter-nav ul li{*/
/*float: left;
text-align: center;
padding: 0;
margin: 0;
padding-left: 10px;
font-size: 1em;
line-height: 40px;
color: white;
text-transform: uppercase;
transition: all 0.3s ease;
cursor: pointer;
color: #AD976E;*/
/*}*/

/*.filter-nav ul li:first-child{
margin-left: 10%;
}

.filter-nav ul li.active{
color: white;
}

.filter-nav ul li.active:hover{
color: #f1f1f1;

}

.filter-nav ul li:hover{
color: white;
}*/

/*.menu-space{
  position: relative;
  top: 0px;
}

.search-container{
 position: absolute; 
 right: 45px;
 z-index: 10;
 top: 0;
}

.search-wrapper{
  height: 40px;
}

.search-svg{
  position: absolute;
  right: -43px;
  height: 28px;
  width: auto;
  cursor: pointer;
  top: 6px;
}

.search-wrapper input#searchNote{
  height: 40px;
  padding: 0;
  
  padding-left: 10px;
  margin: 0;
  background: black;
  outline: none;
  border: none;
  opacity: 0;
  color: white;
}

.search-wrapper input#searchNote.showSearch{
  opacity: 1;
}*/

/*.grid-this-svg{
  width: auto;
  height: 28px;
  float: left;
  margin-right: 2px;
  cursor: pointer;
  margin-top: 6px;
}

.layout-switcher{
  position: absolute;
  left: 0;
  z-index: 100;
  float: left;
  display: none;
}

.layout-switcher.active{
display: block;
}

.layout-switcher ul.grid-switcher{
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
width: 220px;
background: rgba(0,0,0,0.8);
}

.layout-switcher ul li{
padding: 0;
padding-left: 2px!important;
padding-right: 2px!important;
margin: 0;
display: block;
width: 18%;
cursor: pointer;
}
.layout-switcher ul li:first-child{

padding-left: 2px!important;
padding-right: 2px!important;
margin-left: 2px!important;
}

.layout-switcher ul li:hover{
background: rgba(256,256,256,0.5);
}

.layout-switcher ul li.active{
background: rgba(256,256,256,0.3);
}

.layout-switcher ul li.active:hover{
background: rgba(256,256,256,0.5);
}

.grid-icon{
  float: left;
  height: 40px;
}

.grid-icon img{
 width: 75%;
 margin-top: 4px;
 height: auto;
}*/

.no-results-found-message{
  background: white;
  width: 100%;
  text-align: center;
  height: 0px;
  margin: 0;
  padding: 20%;
  box-sizing: border-box;
  transform: scale(0);
  transition: all 0.3s ease;
  background: url(../img/grid_ui/nothing-found-gallery-wall-web.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.no-results-found-message h3{
  margin: 0;
  padding: 0;
}

.no-results-found-message.active{
  transform: scale(1);
  height: 100%;
  height: 100vh;
  min-height: 800px;
  min-height: 100vh;
}

#oops {
  display: inline-block;
  max-width: 169px;
  width: 100%;
  opacity: 0;
}

#did_not_return {
  margin-top: 30px;
  display: inline-block;
  max-width: 800px;
  width: 100%;
  opacity: 0;
}

#please_try_another {
  margin-top: 30px;
  display: inline-block;
  max-width: 805px;
  width: 100%;
  opacity: 0;
}






/* http://isotope.metafizzy.co/v1/docs/animating.html */

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/*Controles the width of the entire container the rest is fluid */
.grid-this{
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  margin-top: 0%;
  padding: 0;
  clear: both;
}

.grid-this ul {
  padding: 0;
  margin: 0;
  width: 100%;
  background: black;;
}

.grid-this li{
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.grid-this li a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  background-color: none;
  color: rgba(256, 256, 256, 1);
  text-align: center;
   margin: 0;
  padding: 0;
}

/* Adds psuedo border to the elements */
.grid-this.border-this li:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: none;
  border: 7px solid white;
}



.grid-this .view-large{
width: 100%;
text-align: center;
font-size: 5em;
color: white;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid-this .thumb-gallery{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  pointer-events: none;
  padding: 0;
  margin: 0;
  top: 0px;
}
 
.grid-this .border-this li, .border-this div{
  padding: 10px;
   -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.grid-this.fiftyPercentWidth,
.grid-this.fiftyFiveWidth,
.grid-this.sixtyPercentWidth,
.grid-this.sixtyFivePercentWidth,
.grid-this.seventyPercentWidth,
.grid-this.seventyFivePercentWidth,
.grid-this.eightyPercentWidth,
.grid-this.eightyFivePercentWidth,
.grid-this.nintyPercentWidth,
.grid-this.nintyFivePercentWidth,
.grid-this.nintyEightPercentWidth,
.grid-this.nintyNinePercentWidth
{
  width: 100%;
}

.col-group, .grid-this .col-group.three-columns, .grid-this .col-group.four-columns. .grid-this .col-group.five-columns, .grid-this .col-group.six-columns {
  overflow: hidden;
}

/*   =================================================================
                            FOUR COLUMNS
======================================================================  */

@media screen and (min-width: 44em) and (max-width: 62em) {

/*  body{
    background: green;
  }*/
 
  .col-group.four-columns > div {
    float: left;
    width: 50%;
  }
  .col-group.four-columns > div:nth-child(odd) {
    clear: left;
  }

  .col-group.four-columns > li {
    float: left;
    width: 50%;
  }


  .col-group.four-columns > li:nth-child(odd) {
    clear: left;
  }
}



/*This would be desktop 4 columns*/

@media screen and (min-width: 62em) {

  /*body{
    background: red;
  }
*/
  .col-group.four-columns > div {
    float: left;
       width: 33.3333333%;
  }
 

  .col-group.four-columns > li {
    float: left;
       width: 33.3333333%;
  }
  .col-group.four-columns  > li.grid-item--width2 {
     height: auto;
    width: 66.6666666%;
  }


  .col-group.four-columns > li:nth-child(odd) {
    clear: none;
  }

}


@media screen and (min-width: 86em) {

  /*body{
    background: teal;
  }*/



  .col-group.four-columns > div {
    width: 25%;
  }
  .col-group.four-columns > div:nth-child(odd) {
    clear: none;
  }
  .col-group.four-columns > li{
     height: auto;
    width: 25%;
  }

}



@media screen and (min-width: 50em) {

        .grid-this.fiftyPercentWidth{
          width: 50%;
        }

        .grid-this.fiftyFiveWidth{
          width: 55%;
        }

        .grid-this.sixtyPercentWidth{
          width: 60%;
        }

        .grid-this.sixtyFivePercentWidth{
          width: 65%;
        }

        .grid-this.seventyPercentWidth{
          width: 70%;
        }

        .grid-this.seventyFivePercentWidth{
          width: 75%;
        }

        .grid-this.eightyPercentWidth{
          width: 80%;
        }

        .grid-this.eightyFivePercentWidth{
          width: 85%;
        }

        .grid-this.nintyPercentWidth{
          width: 90%;
        }

        .grid-this.nintyPercentWidth{
          width: 95%;
        }

        .grid-this.nintyEightPercentWidth{
          width: 98%;
        }

        .grid-this.nintyNinePercentWidth{
          width: 98%;
        }

         .grid-this.OneHundredPercentWidth{
          width: 100%;
        }


}



/*   =================================================================
                            HOVER STYLES
======================================================================  */


/*HIDE THE INFO CONTAINER SO IF CLASS IS NOT SET IT DOES NOT BREAK THE LAYOUT
CLASSES WILL SET THE DISPLAY TO BLOCK*/

.grid-this .info{
  display: none;
}

.grid-this .item-tags{
  color: white;
  text-align: center;
 /* display: none;*/
 opacity: 0;
 position: absolute;
}




/*   =================================================================
                            .slide-this
======================================================================  */

.grid-this .slide-this li {
          overflow:hidden;
}

.grid-this .slide-this .info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(0%, -101%);
  border-radius: 0px;
  pointer-events: none;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
  display: block;
}

.grid-this .slide-this .in-top .info {
          animation: slide-this-in-top 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .out-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
          animation: slide-this-out-top 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .in-right .info {
          animation: slide-this-in-right 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .out-right .info {
          animation: slide-this-out-right 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .in-left .info {
          animation: slide-this-in-left 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .out-left .info {
          animation: slide-this-out-left 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .in-bottom .info {
          animation: slide-this-in-bottom 300ms ease 0ms 1 forwards;
}

.grid-this .slide-this .out-bottom .info {
          animation: slide-this-out-bottom 300ms ease 0ms 1 forwards;
}



@keyframes slide-this-in-top {
  from {
    transform: translate(0%, -101%);
  }
  to {
    transform: translate(0%, 0%);
  }
}

@keyframes slide-this-out-top {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, -101%);
  }
}

@keyframes slide-this-in-right {
  from {
   transform: translate(101%, 0%);
  }
  to {
   transform: translate(0%, 0%);
  }
}

@keyframes slide-this-out-right {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(101%, 0%);
  }
}

@keyframes slide-this-in-left {
  from {
   transform: translate(-101%, 0%);
  }
  to {
   transform: translate(0%, 0%);
  }
}


@keyframes slide-this-out-left {
  from {
     transform: translate(0%, 0%);
  }
  to {
       transform: translate(-101%, 0%);
  }
}

@keyframes slide-this-in-bottom{
  from {
   transform: translate(0%, 101%);
  }
  to {
   transform: translate(0%, 0%);
  }
}

@keyframes slide-this-out-bottom{
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, 101%);
  }
}

/*   =================================================================
                            .zoom-this-in
======================================================================  */

.grid-this .zoom-this-in li {
          overflow:hidden;
}

.grid-this .zoom-this-in .info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  border-radius: 0px;
  pointer-events: none;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
  display: block;
}

.grid-this .zoom-this-in li:hover .info {
  transform: scale(1);
  opacity: 1;

}

.grid-this .zoom-this-in li img.thumb-gallery {
  transform-origin: center center;
  transition: all 0.5s ease;
  transform: scale(1);
}

.grid-this .zoom-this-in li:hover img.thumb-gallery {
  transform: scale(1.2);
  transform-origin: center center;
  transition: all 0.5s ease;
}

/*   =================================================================
                            .zoom-this-out
======================================================================  */

.grid-this .zoom-this-out li {
          overflow:hidden;
}

.grid-this .zoom-this-out .info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  border-radius: 0px;
  pointer-events: none;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  display: block;
}

.grid-this .zoom-this-out li:hover .info {
  transform: scale(1);
  opacity: 1;

}

/* .grid-this .zoom-this-out li img.thumb-gallery {
  transform-origin: center center;
  transition: all 0.5s ease;
  transform: scale(1);
}

.grid-this .zoom-this-out li:hover img.thumb-gallery {
  transform: scale(0.8);
  transform-origin: center center;
  transition: all 0.5s ease;
} */

.grid-this .zoom-this-out a {
  transform-origin: center center;
  transition: all 0.5s ease;
  transform: scale(1);
}

.grid-this .zoom-this-out li:hover a {
  transform: scale(0.8);
  transform-origin: center center;
  transition: all 0.5s ease;
}


/*   =================================================================
                            .flip-this
======================================================================  */

/* Add this to allow for the 3D flipping*/
.grid-this .flip-this li, .grid-this .flip-this li.grid-item--width2 {
          perspective: 820px;
          overflow:hidden;
}

.grid-this .flip-this .info {
  transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  border-radius: 0px;
  pointer-events: none;
  background-color: rgba(0,0,0,0.5);
  background-size: cover;
  opacity: 0;
  display: block;
}

.grid-this .flip-this .info:after {
position: absolute;
top: 4.5%;
left: 4.5%;
right: 0;
bottom: 0;
content: '';
width: 90%;
height: 90%;
border: 2px solid white;
}

/* TURN OFF HOVER EFFECTS ON MOBILE USING MODERNIZR */
.touch .grid-this .flip-this .info, .touch .grid-this .flip-this .info:after {
display: none;
}

.grid-this .flip-this .in-top .info {
          transform-origin: 50% 0%;
          animation: flip-this-in-top 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .in-right .info {
          transform-origin: 100% 0%;
          animation: flip-this-in-right 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .in-bottom .info {
          transform-origin: 50% 100%;
          animation: flip-this-in-bottom 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .in-left .info {
          transform-origin: 0% 0%;
          animation: flip-this-in-left 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .out-top .info {
          transform-origin: 50% 0%;
          animation: flip-this-out-top 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .out-right .info {
          transform-origin: 100% 50%;
          animation: flip-this-out-right 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .out-bottom .info {
          transform-origin: 50% 100%;
          animation: flip-this-out-bottom 300ms ease 0ms 1 forwards;
}

.grid-this .flip-this .out-left .info {
          transform-origin: 0% 0%;
          animation: flip-this-out-left 300ms ease 0ms 1 forwards;
}


@keyframes flip-this-in-top {
  from {
    opacity: 0;
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes flip-this-in-right {
  from {
    opacity: 0;
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);  
  }
  to {
     opacity: 1;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);   
  }
}


@keyframes flip-this-in-bottom {
  from {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
         
  }
  to {
     opacity: 1;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes flip-this-in-left {
  from {
    opacity: 0;
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
     opacity: 1;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);  
  }
}

@keyframes flip-this-out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
           opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
              opacity: 0;
  }
}

@keyframes flip-this-out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
             opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
             opacity: 0;
  }
}

@keyframes flip-this-out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
             opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
             opacity: 0;
  }
}

@keyframes flip-this-out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
             opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
             opacity: 0;
  }
}

/*   =================================================================
      CUSTOM TO MY THEME COLOR SCHEME ONLY DELETE FOR FRAMEWORK
======================================================================  */

/*.grid-this li:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: none;
  border: 7px solid white;
  display: none;
}*/

/* Break down to two columns */
/* 
@media screen and (min-width: 44em) and (max-width: 60em) {

.grid-this li:after {
  display: block;
} */


/* @media screen and (min-width: 44em) and (max-width: 60em) {

  .grid-this li:after {
    display: block;
  } */






/* Browser Animation fixes and Rendering Optimization */

/* 
--------------------- BROWSER ANIMATION FIXES AND RENDERING OPTIMAZATION -------------------------
--------------------------------------------------------------------------------------------------
*/


.smooth-text{
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizelegibility;
}

/* Add to body*/
.no-pixel-shift{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0) scale(1.0, 1.0);
}

.crisp-image{
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.will-change {
  will-change: transform;
}


/*
-------------------------------- HELPER STYLES ----------------------------------------------
---------------------------------------------------------------------------------------------
*/

/* OPACITY HELPERS */

.invisible{opacity: 0;}

/*. TYPOGRAPHY HELPERS */

.text-align-center{text-align: center;}

/*. CENTERING HELPERS */

.absolute-center{position: absolute;margin: 0 auto;left: 0;right: 0;margin-left: auto;margin-right: auto;}
.center-block-element{margin: 0 auto;}

.display-table-one{/*Add this to parent vertical center element*/
  display:table;
 
}

.display-table{/*Add this to parent vertical center element*/
  display:table;
   margin-left: auto;
    margin-right: auto;
}

.vertical-center{/*Add this to next child element of the .display-table element*/
  display:table-cell;
  vertical-align:middle;
}

/*. POSITIONING HELPERS */

.pos-a{position: absolute;}
.pos-r{position: relative;}
.top-0{top: 0;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.left-0{left: 0;}
.zero-scale{transform: scale(0);}

/*. POSITIONING HELPERS STACKING ORDER */

/*. .z-i-1 = Z Index 1 */

.z-i-1{z-index: 1;}
.z-i-2{z-index: 2;}
.z-i-3{z-index: 3;}
.z-i-4{z-index: 4;}
.z-i-5{z-index: 5;}
.z-i-6{z-index: 6;}
.z-i-7{z-index: 7;}
.z-i-8{z-index: 8;}
.z-i-9{z-index: 9;}
.z-i-10{z-index: 10;}
.z-i-11{z-index: 11;}
.z-i-12{z-index: 12;}

/*. RESPONSIVE HELPERS */

.img-responsive{ display: block; max-width: 100%; height: auto;}

/* 
-------------------------------- BANNER SPECIFIC STYLES ----------------------------------------------
------------------------------------------------------------------------------------------------------
*/

.mask{
  overflow: hidden;
  width: 100%;
}