/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-main-content { position: relative; min-height: 100vh; }
.cd-main-content:after { content: ""; display: table; clear: both; }
.cd-main-content.is-fixed .cd-tab-filter-wrapper { position: fixed; top: 0; left: 0; width: 100%; }
.cd-main-content.is-fixed .cd-gallery { padding-top: 76px; }
.cd-main-content.is-fixed .cd-filter { position: fixed; height: 100vh; overflow: hidden; }
.cd-main-content.is-fixed .cd-filter form { height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.cd-main-content.is-fixed .cd-filter-trigger { position: fixed; }

@media only screen and (min-width: 768px) { 
	.cd-main-content.is-fixed .cd-gallery { padding-top: 90px; }
}
@media only screen and (min-width: 1170px) { 
	.cd-main-content.is-fixed .cd-gallery { padding-top: 100px; }
}

/* -------------------------------- 

xtab-filter 

-------------------------------- */
.cd-tab-filter-wrapper { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); z-index: 1; }
.cd-tab-filter-wrapper:after { content: ""; display: table; clear: both; }

.cd-tab-filter { position: relative; height: 50px; width: 140px; margin: 0 auto; z-index: 1; }
.cd-tab-filter::after { content: ''; position: absolute; right: 14px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 16px; height: 16px; background: url("../img/cd-icon-arrow.svg") no-repeat center center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; pointer-events: none; }
.cd-tab-filter ul { position: absolute; top: 0; left: 0; box-shadow: inset 0 -2px 0 #e03835; width:100%; }
.cd-tab-filter li { display: none; margin-right:27px; overflow:hidden; }

.cd-tab-filter li:first-child { display: block; }
.cd-tab-filter a { display: block; line-height: 50px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; height:30px; }
.cd-tab-filter a.selected { background: #e03835; color: #fff; }
.cd-tab-filter .placeholder { margin-right:0; }
.cd-tab-filter .placeholder a { color:#fff; text-align:center; text-transform:uppercase; }

.cd-tab-filter.is-open::after { -webkit-transform: translateY(-50%) rotate(-180deg); -moz-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); -o-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); }
.cd-tab-filter.is-open ul { box-shadow: inset 0 -2px 0 #e03835, 0 2px 10px rgba(0, 0, 0, 0.2); text-transform:uppercase; background:#000; width:100%; }
.cd-tab-filter.is-open ul li { display: block; }
.cd-tab-filter.is-open .placeholder { text-align:center; width:100%; margin:0!important; padding-bottom:20px; }
.cd-tab-filter.is-open .placeholder a { opacity: .4; color:#fff; }
.cd-tab-filter.is-open ul li { margin-right: auto; width:100%; text-align:center; }
.cd-tab-filter.is-open ul li a { color:rgba(255,255,255,0.40); }
.cd-tab-filter.is-open ul li a.selected { color:rgba(255,255,255,1); }
.cd-tab-filter.is-open ul li a:hover { color:rgba(255,255,255,1); }

@media only screen and (min-width: 768px) { 
  .cd-tab-filter { width: auto; cursor: auto; }
  .cd-tab-filter::after { display: none; }
  .cd-tab-filter ul { position: static; box-shadow: none; padding:0 0 0 25px; }
  .cd-tab-filter li { display: inline-block; float:left; width:auto; }
  .cd-tab-filter li.placeholder { display: none !important; }
  .cd-tab-filter a { font-family: "klavika-web", sans-serif;
    font-weight: 600;
    font-style: normal; font-size:13px; color:#999; text-transform:uppercase; line-height:13px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
  .no-touch .cd-tab-filter a:hover { color:rgba(255,255,255,0.40); }
  .cd-tab-filter a:hover { color:#fff; }
  .cd-tab-filter a.selected { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 #e03835; }
  .cd-tab-filter.is-open ul li { display: inline-block; }
}
@media only screen and (min-width: 1170px) { 
  .cd-tab-filter { width: 100%; float: right; margin: 0; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; }
  .cd-tab-filter.filter-is-visible {  width: 80%; }
}

/* -------------------------------- 

xgallery 

-------------------------------- */
.cd-gallery { padding: 26px 5%; width: 100%; }
.cd-gallery li { margin-bottom: 1.6em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); display: none; position:relative; overflow:hidden; }
.cd-gallery li .mask { height:75px; }
.cd-gallery li .mask { bottom: -70px; -webkit-transition: all 0.3s ease-out 0.0s; -moz-transition: all 0.3s ease-out 0.0s; -o-transition: all 0.3s ease-out 0.0s; -ms-transition: all 0.3s ease-out 0.0s; transition: all 0.3s ease-out 0.0s; }
.cd-gallery li:hover .mask { bottom: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.3s linear; -moz-animation: bounceY 0.3s linear; -ms-animation: bounceY 0.3s linear; animation: bounceY 0.3s linear; }
.cd-gallery li.gap { opacity: 0; height: 0; display: inline-block; }
.cd-gallery img { display: block; width: 100%; }
.cd-gallery .cd-fail-message { display: none; text-align: center; }
@media only screen and (max-width: 767px) {
  .cd-gallery li { width: 100%; margin-bottom: 2em; }
  .cd-tab-filter a { line-height:30px; }
}
@media only screen and (min-width: 768px) { 
  .cd-gallery { padding: 40px 3%; }
  .cd-gallery ul { text-align: justify; }
  .cd-gallery ul:after { content: ""; display: table; clear: both; }
  .cd-gallery li { width: 48%; margin-bottom: 2em; }
}
@media only screen and (min-width: 1170px) { 
  .cd-gallery { padding: 50px 2%; float: right; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; }
  .cd-gallery li { width: 23%; }
  .cd-gallery.filter-is-visible { width: 80%; }
}

/* -------------------------------- 

xfilter 

-------------------------------- */
.cd-filter { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: #ffffff; box-shadow: 4px 4px 20px transparent; z-index: 2; /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s; -moz-transition: -moz-transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s; }
.cd-filter::before { content: ''; position: absolute; top: 0; left: 0; height: 50px; width: 100%; background-color: #e03835; z-index: 2; }
.cd-filter form { padding: 70px 20px; }
.cd-filter .cd-close { position: absolute; top: 0; right: 0; height: 50px; line-height: 50px; width: 60px; color: #ffffff; font-size: 1.3rem; text-align: center; background: #37296a; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 3; }
.no-touch .cd-filter .cd-close:hover { background: #32255f; }
.cd-filter.filter-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2); }
.cd-filter.filter-is-visible .cd-close { opacity: 1; }

@media only screen and (min-width: 1170px) { 
  .cd-filter { width: 20%; }
  .cd-filter form { padding: 70px 10%; }
}

.cd-filter-trigger { position: absolute; top: 0; left: 0; height: 50px; line-height: 50px; width: 60px; /* image replacement */
  overflow: hidden; text-indent: 100%; color: transparent; white-space: nowrap; background: transparent url("../img/cd-icon-filter.svg") no-repeat center center; z-index: 3; }
.cd-filter-trigger.filter-is-visible { pointer-events: none; }

@media only screen and (min-width: 1170px) { 
  .cd-filter-trigger { width: auto; left: 2%; text-indent: 0; color: #9a9a9a; text-transform: uppercase; font-size: 1.3rem; font-weight: 700; padding-left: 24px; background-position: left center; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; }
  .no-touch .cd-filter-trigger:hover { color:rgba(255,255,255,0.40); }
  .cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover { color: #ffffff; }
}

/* -------------------------------- 

xcustom form elements 

-------------------------------- */
.cd-filter-block { margin-bottom: 1.6em; }
.cd-filter-block h4 { /* filter block title */
  position: relative; margin-bottom: .2em; padding: 10px 0 10px 20px; color: #9a9a9a; text-transform: uppercase; font-weight: 700; font-size: 1.3rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.no-touch .cd-filter-block h4:hover { color: #e03835; }
.cd-filter-block h4::before { /* arrow */
  content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; background: url("../img/cd-icon-arrow.svg") no-repeat center center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.cd-filter-block h4.closed::before { -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); }
.cd-filter-block input, .cd-filter-block select,
.cd-filter-block .radio-label::before,
.cd-filter-block .checkbox-label::before { /* shared style for input elements */
  font-family: "Open Sans", sans-serif; border-radius: 0; border: 2px solid #e6e6e6; }
.cd-filter-block input[type='search'],
.cd-filter-block input[type='text'],
.cd-filter-block select { width: 100%; padding: .8em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; box-shadow: none; }
.cd-filter-block input[type='search']:focus,
.cd-filter-block input[type='text']:focus,
.cd-filter-block select:focus { outline: none; border-color: #e03835; }
.cd-filter-block input[type='search'] { /* custom style for the search element */
  border-color: transparent; background-color: #e6e6e6; /* prevent jump - ios devices */
  font-size: 1.6rem !important; }
.cd-filter-block input[type='search']::-webkit-search-cancel-button { display: none; }
.cd-filter-block .cd-select { /* select element wrapper */
  position: relative; }
.cd-filter-block .cd-select::after { /* switcher arrow for select element */
  content: ''; position: absolute; z-index: 1; right: 14px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 16px; height: 16px; background: url("../img/cd-icon-arrow.svg") no-repeat center center; pointer-events: none; }
.cd-filter-block select { cursor: pointer; font-size: 1.4rem; }
.cd-filter-block select::-ms-expand { display: none; }
.cd-filter-block .list li { position: relative; margin-bottom: .8em; }
.cd-filter-block .list li:last-of-type { margin-bottom: 0; }
.cd-filter-block input[type=radio],
.cd-filter-block input[type=checkbox] { /* hide original check and radio buttons */
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; opacity: 0; z-index: 2; }
.cd-filter-block .checkbox-label,
.cd-filter-block .radio-label { padding-left: 24px; font-size: 1.4rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after { /* custom radio and check boxes */
  content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before { width: 16px; height: 16px; left: 0; }
.cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::after { /* check mark - hidden */
  display: none; }
.cd-filter-block .checkbox-label::after { /* check mark style for check boxes */
  width: 16px; height: 16px; background: url("../img/cd-icon-check.svg") no-repeat center center; }
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after { border-radius: 50%; }
.cd-filter-block .radio-label::after { /* check mark style for radio buttons */
  width: 6px; height: 6px; left: 5px; }
.cd-filter-block input[type=radio]:checked + label::before,
.cd-filter-block input[type=checkbox]:checked + label::before { border-color: #e03835; background-color: #e03835; }
.cd-filter-block input[type=radio]:checked + label::after,
.cd-filter-block input[type=checkbox]:checked + label::after { display: block; }

@-moz-document url-prefix() { /* hide custom arrow on Firefox - select element */
  .cd-filter-block .cd-select::after { display: none; }
}