/* CSS Document */

strong {
  font-weight: bold;
}

b {
  font-weight: bold;
}

i {
  font-style: italic;
}

em {
  font-style: italic;
}
.p-centred {
  text-align: center;
  width: 100%;
}

.invisible {
  visibility: hidden;
}

html, body {
  font-family: duffy-script, sans-serif;
  font-size: 30px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-rendering: optimizeSpeed;
}
body{
  overflow-y: scroll;
}
body, div, p, img, nav, header {
	box-sizing: border-box;
}
body.no-scroll {
	overflow: hidden;
}
body.touch {
	.btn-nav {
		display: none;
	}
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple {
  font-family: reklame-script, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m24 {
	margin: 24px !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt24 {
  margin-top: 24px !important;
}

.mt36 {
  margin-top: 36px !important;
}

div, article, header, footer {
  box-sizing: border-box;
}
hr {
  width: 100%;
  border-top: 1px solid #222222;
  margin-top: 44px;
  margin-bottom: 60px;
}
p {
  font-family: duffy-script, sans-serif;
  font-weight: 400;
  font-style: normal;
  /* max-width: 500px; */
}
.caption {
  font-size: 16px !important;
  padding: 0 !important;
  align-self: flex-start;
}
.caption-para {
  font-size: 24px !important;
  padding: 0 !important;
  align-self: flex-start;
  margin-bottom: 0;
}
.num {
  font-family: reklame-script, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 4px;
}
header {
  padding: 20px;
  transition: height 0.3s ease;
  position: fixed;
  height: 200px;
  background: white;
  z-index: 20;
  box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  padding: 0;
  align-items: center;
}
body.scrolled header{
  height: 80px;
}
body.scrolled .page-content{
  margin-top: 80px;
}
body.scrolled #headerlogo{
  width: 180px;
  padding-top: 10px;
}
header .content-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
#breadcrumb-row {
  display: flex;
  align-content: flex-start;
  width: 100%;
  justify-content: flex-start;
  padding: 24px;
  padding-bottom: 0;
  margin-bottom: 24px;
}
#breadcrumb {
  font-size: 26px !important;
}
#breadcrumb span {
  color: #b7b7b7;
}
#breadcrumb a {
  text-decoration: none;
}
.page-content {
  /* margin-top:235px; */
	margin-top: 200px;
  transition: margin-top 0.2s ease;
}
nav{
  display:flex;
  align-items: flex-end;
  height:100%;
}
body.scrolled nav{
  align-items: center;
}
nav a{
  font-size:30px;
  text-decoration: none;
  margin:0 12px;
  color:#878787;

  text-decoration-thickness: 2px;
}
nav a:hover{
  text-decoration: underline;
  color:#222222;
  text-decoration-thickness: 2px;
}
nav a.current{
  text-decoration: underline;
  color:#222222;
  text-decoration-thickness: 2px;
}
#navlinks{
  display:flex;
  flex-direction:row;
  margin-top:0;
  overflow:hidden;
  transition: all ease 0.25s;
}
.img-link{
    opacity:0.5;
}
#lock_open {
	width: 24px;
}
.img-link:hover{
    opacity:1;
}

.img-link img{
    width:24px;
    margin-top:10px;
    
}

a{
  color:black;
  /* text-decoration: none; */
}

a:hover{
  color: black;
  text-decoration: underline;
}
#burgermenu{
  display:none;
  width: auto;
  height:24px;
  align-items: center;
  justify-content: center;
  opacity:0.6;
}
#burgermenu:hover{
  opacity:1;
}
#burgermenu img{
  width:24px;
  cursor: pointer;
}
#headerlogo{
  width:300px;
  max-width: 100%;
  transition: margin 0.2s ease, width 0.2s ease;
}
footer{
  background:#222222;
  color:white;
  padding:36px;
  border-top:8px solid #868686;
  margin-top:30px;

}
.container{
  width:100%;
  display:flex;
  justify-content: center;

}
.container-breadcrumb{
  position: absolute;
  z-index: 1;
}
.post-breadcrumb{
  padding-top: 66px !important;
}
.content-inner{
  width:100%;
  max-width:1280px;
  position: relative;
  /* border: 1px solid red; */
}
.content-inner p{
  padding: 0 24px;
}
.content-search-top {
	display: flex;
	justify-content: flex-start;
	max-width: calc(100% - 24px);
}

.content-video{
  display:flex;
  justify-content: center;
  padding:30px 24px;
  flex-direction: column;
  align-items: center;
  font-size: 17px;
}
.content-video a:not .card{
  text-decoration: none;
  color: #868686;
  font-size: 33px;
  margin:16px 0;
}
.content-video a:hover{
  text-decoration: underline;
  color:#222222;
}
.content-video .num{
  font-size:22px;
  letter-spacing: 3px;

}
.content-video video{
  width: 100%;
  max-width: 100%;
  margin:12px 24px;
}
.notivid{
  max-width: 400px !important;
}
.two-col{
  display: flex;
}
.two-col .text-col{
  width:50%;
  padding-right: 12px;
  box-sizing: border-box;
}
.two-col .text-col:last-of-type{
  padding-right:0;
  padding-left:12px;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}
.card-holder{
  display:flex;
  width:100%;
  padding:36px 12px;
  overflow: hidden;
}

.card-holder-3{
  flex-wrap: wrap;
}

.card-holder-3 .card{
  width: calc(33.333% - 24px);
}
.card.card-bg{
  align-items: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
/* .card.card-bg:before{
  display:block;
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:white;
  z-index: 1;
  opacity:0.1;
  content: "";
  transition: opacity 0.2s ease;
} */
.card.card-bg p{
  color: white;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
  width: 100%;
  margin-bottom: 0;
  padding: 10px 0;
}
a.card.card-bg:hover{
  text-decoration-color: white;
  color: white !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* a.card.card-bg:hover:before{
  opacity:0;
} */

.card.card-bg:hover p{
  transform: scale(1);

}
.card-aligned-top{
  background-position: top center !important;
}
.card-aligned-bottom{
  background-position: bottom center !important;
}
#card-strings{
  background-image: url("../img/stringsStill.jpg");
}
#card-maggot{
  background-image: url("../img/maggotStill.jpg")
  }
#card-livingstone{
  background-image: url("../img/livingstoneStill.jpg")
}
#card-monosnow{
  background-image: url("../img/monoSnowStill.jpg")
}
#card-alienate{
  background-image: url("../img/alienateStill.jpg")
}
#card-algorithmic{
  background-image: url("../img/algorithmicStill.jpg")
}
#card-interference{
  background-image: url("../img/interferenceStill.jpg")
}
#card-roots{
  background-image: url("../img/rootsStill.jpg")
}
#card-monobeach{
  background-image: url("../img/monoBeachStill.jpg")
}
#card-spacewater{
  background-image: url("../img/spaceWaterStill02.jpg")
}
#card-lonelyplanet{
  background-image: url("../img/lonelyPlanetStill.jpg")
}
#card-window{
  background-image: url("../img/windowstill.jpg")
}
#card-southbourne{
    background-image: url("../img/southbourneBeachPromenade1000.png")
}
#card-cafe{
  background-image: url("../img/FILM 0001 (31)1000.jpg")
}

#card-sadscratch{
  background-image: url("../img/sadscratch.jpg")
}

#card-tree{
  background-image: url("../img/tree1000.jpg")
}

#card-nightsky{
  background-image: url("../img/nightsky.jpg")
}

#card-snake{
  background-image: url("../img/snake1000.jpg")
}

#card-flower{
  background-image: url("../img/FILM 0045 (12)1000.jpg")
}

#card-wall{
  background-image: url("../img/walladjusted1000.jpg")
}

#card-girlwithplate{
  background-image: url("../img/girlwithplate1000.jpg")
}

#card-snowinlight{
  background-image: url("../img/snowinlight1000.jpg")
}

#card-snakeyellow{
  background-image: url("../img/snakeyellow1000.jpg")
}

#card-treewall{
  background-image: url("../img/FILM 0036 (6) 1000.jpg")
}

#card-sea{
  background-image: url("../img/neg 34 1000.jpg")
}

#card-athens01{
  background-image: url("../img/285100301000.jpg")
}

#card-joseph{
  background-image: url("../img/FILM 0031 (29) 1000.jpg")
}

#card-autumn{
  background-image: url("../img/FILM 0028 (3) 1000.jpg")
}

#card-athens02{
  background-image: url("../img/285100121000.jpg")
}

#card-ruinwalls{
  background-image: url("../img/ruinwalls1000.jpg")
}

#card-peruvianboy{
  background-image: url("../img/peruvianboy1000.jpg")
}

#card-oldlady{
  background-image: url("../img/oldlady1000.jpg")
}

#card-mplonetree{
  background-image: url("../img/mplonetree1000.jpg")
}

#card-rustyfence{
  background-image: url("../img/trip 0031000.jpg")
}

#card-et{
  background-image: url("../img/etbella.jpg")
}

#card-alienate01{
  background-image: url("../img/alienate01.jpg")
}

#card-alienate02{
  background-image: url("../img/alienate02.jpg")
}


#card-alienate03{
  background-image: url("../img/alienate03.jpg")
}

.img_row3{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
/*  height: 300px;*/
}

.img_row3 img{
/*  width:33%;*/
  margin:12px;
  position: relative;
  height: 255px;
}



.card{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.333%;
  /* border:1px solid #999999; */
  min-height: 300px;
  /* flex-grow:1; */
  /* height: 20vw; */
  margin:12px;
  cursor:pointer;
  box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.25);
  transition: box-shadow ease 0.5s, background ease 0.5s;
  background: #fcfcfc;
  text-align: center;
  text-decoration: none;

}

.card-with-mount{
    border: 15px solid white;
    box-sizing: border-box;
        
}
.card p{
  text-decoration: none;
  color: #222222;
  transform-origin:center center;
  width:auto;
  display:block;
  transition: transform ease 0.5s;

}

.card:hover{
  box-shadow: 0px 4px 20px 6px rgba(0,0,0,0.25);
  background: white;
}
.card:hover p{
  transform:scale(1.5);
}


.accordion{
  width:100%;
  padding:0 24px;
  margin:40px 0;
  user-select:none;
}
.accordion-header{
  color: white;
  background: #878787;
  padding:8px 16px;
  cursor: pointer;
  position: relative;
  height:60px;
}
.accordion-header:after{
  content:">";
  font-weight: bold;
  position: absolute;
  right:0;
  top:0;
  font-size:36px;
  height:100%;
  width: 60px;
  text-align:center;
  transform: rotate(90deg);
  transition: transform 0.4s ease;
}
.accordion-item{
  overflow: hidden;
  max-height: 1000vh;
  transition: max-height 0.4s ease;
}
.accordion-item.collapsed{
  max-height:61px;
}
.accordion-item.collapsed .accordion-header:after{
  transform: rotate(0deg);
}

.table-accordion-mob{
  display:none;
  width:100%;
  font-size:26px;
  border-left:1px solid #cccccc;
  border-right:1px solid #cccccc;
  border-spacing: 2px;
  margin-bottom:8px;
  border-collapse: separate;
}
.table-accordion-mob tr:nth-child(odd){
  background-color: #f2f2f2;
}
.table-accordion-mob strong{
  font-weight:600;
}
.table-accordion-mob td{
  padding: 8px 4px;
  width:100%;
  min-width:100%;
}
.table-accordion-mob td.separator{
  height:10px;
  border-top:1px solid #cccccc;
  border-bottom:1px solid #cccccc;
}
.table-accordion-mob tr:last-of-type td{
  border-bottom:1px solid #cccccc;
}

.table-accordion{
  border-spacing: 0;
  border-collapse: separate;
  font-family: duffy-script, sans-serif;
  font-size: 28px;
  width:100%;
  margin: 2px 0;
}
.table-accordion tbody tr:nth-child(odd){
  background-color: #f2f2f2;
}
.table-accordion th{
  font-weight: 400;
  background-color:#878787;
  color: white;
  text-align: left;
  padding:5px 10px;
}
.table-accordion td{
  padding:5px 10px;
  border-left: 1px solid #cccccc;
}
.table-accordion td:first-of-type, .table-accordion th:first-of-type{
  padding-left:16px;
}
.table-accordion td:last-of-type{
  border-right: 1px solid #cccccc;
  white-space: nowrap;
}
.table-accordion tr:last-of-type td{
  border-bottom: 1px solid #cccccc;
}

.text-img-row{
  display: flex;
  align-items: flex-start;
  padding-right: 24px;
  padding-left: 24px;
}
.text-img-row img{
  width: calc(33% - 24px);
  flex-shrink: 0;
  margin-left: 30px;
  margin-top: 30px;
  margin-right: 24px;
}
.text-img-row p{
  width: 66%;
  flex-shrink: 0;
  margin-bottom:0;
  padding-left:0;
}

.text-img-row p:first-of-type{
  margin-top:0;
  padding-top:0;
}

.btn {
	user-select: none;
  min-height: 48px;
  min-width: 48px;
  line-height: 0;
  padding:0;
  box-sizing: border-box;
	&:not(:disabled) {
		cursor: pointer;
	}
}
.btn-text {
	font-family: duffy-script, sans-serif;
	min-height: 48px;
	padding: 10px 20px;
	font-size: 30px;
	color: rgba(0, 0, 0, 0.65);
	border: none;
	background: rgba(0, 0, 0, 0);
	border-radius: 3px;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease;
	&:hover {
		color: rgba(0, 0, 0, 1);
		background: rgba(0, 0, 0, 0.05);
	}
	&:not(:disabled) {
		cursor: pointer;
	}
}

.btn-flat {
  font-size:40px;
  font-family: "reklame-script", sans-serif;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 8px;
  transition: color 0.2s ease;
}
.btn-nav {
  position: absolute !important;
  height: 50px;
  width: 50px;
  font-size: 50px;
  top: calc(50% - 30px);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
	transition: background 0.2s ease;
	&:hover {
		background: rgba(0, 0, 0, 0.75);
	}
}
.btn-42 {
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
}
.btn-icon {
	svg {
		position: absolute;
		fill: rgba(0, 0, 0, 0.5);
		transition: fill 0.2s ease;
	}
	&:hover {
		svg {
			fill: black;
		}
	}
}
.btn-icon24 {
	svg {
		width: 24px;
		height: 24px;
		left: calc(50% - 12px);
		top: calc(50% - 12px);
	}
}
#btnNavFrameL {
  left: 20px;
}
#btnNavFrameR {
  right: 20px;
}
.btn-flat:hover {
  color: #ffffff;
}

.btn-dark {
  color: rgba(0,0,0,0.7);
}

.btn-dark:hover {
  color: black;
}
#btnCloseFrame {
  position: absolute;
  top: 6px;
  right: 6px;
}

#frameHolder {
  perspective: 800px;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
#frameHolder.shown {
  width: 100%;
  height: 100%;
  z-index: 30;
}

#scrim {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  width: 0;
  height: 0;
  z-index: 25;
  transition: opacity 0.1s ease;
}
#scrim.shown {
  width: 100%;
  height: 100%;
  opacity: 1;
}
#scrim.hidden {
  opacity: 0;
}

#frame {
  position: fixed;
  pointer-events: auto;
  background: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 30;
  transition: transform 0.35s ease-in-out, opacity 0.2s ease 0.1s;
  top: -2000px;
  left: 50%;
  perspective: 250px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotate3d(1, 0, 0, 65deg);
  opacity: 0;
	&.no-swipe {
		.btn-nav {
			display: none;
		}
	}
}
#frame.shown {
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
	transition: transform 0.35s ease-in-out, opacity 0.35s ease 0s;
}
#frame.hidden {
  transform: translate(-50%, -50%) rotate3d(1, 0, 0, 65deg);
  opacity: 0;
	transition: transform 0.35s ease-in-out, opacity 0.2s ease 0.1s;
}
#frameInfo {
	position: absolute;
	padding: 8px 15px;
}
#frameImgsHolder {
	touch-action: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.frameImg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 80px solid white;
  border-bottom: 25px solid white;
  border-left: 15px solid white;
  border-right: 15px solid white;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.popover {
  position:absolute;
  background: rgba(0, 0, 0, 0.65);
  width: 50px;
  height:50px;
  border-radius: 25px;
  overflow:hidden;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0), 0 6px 10px 0 rgba(0, 0, 0, 0), 0 1px 18px 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.5s ease, border-radius 0.5s ease, width 0.5s ease, height 0.5s ease, background 0.5s ease;
}
.popover .btn-bg{
  width:50px;
  height:50px;
/*  background: rgba(255, 0, 0, 0.25);*/
  position: absolute;
  top:0;
  right:0;
  cursor:pointer;
  border-radius: 25px;
}
.popover .pop-content{
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.popover.expanded{
  background:white;
  border-radius:5px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  width:600px;
  height:230px;
  max-width: calc(100% - 12px);
}
.popover svg{
  fill:rgba(255, 255, 255, 0.8);
  transition: fill 0.2s ease ;
  position: absolute;
  top:13px;
  right:13px;
  pointer-events: none;
  transition: fill 0.5s ease;
}
.popover .btn-bg:hover svg{
  fill:rgba(255, 255, 255, 1);
}
.popover-info{
  bottom:5vh;
  right:6px;
}
.popover-info svg{
  width:24px;
  height:24px;
}
.popover-info #stemI{
  transform: translate(0px, 2px);
  transition: transform 0.5s ease;
}
.popover-info.expanded #stemI{
  transform: translate(18px, -13px) rotate(41deg) scaleY(1.5);
}
.popover-info #dotI{
  transition: transform 0.5s ease;
}
.popover-info.expanded #dotI{
  transform: translate(-12px, 1px) rotate(-39deg) scaleY(6.5);
}
.popover.expanded svg{
  fill:rgba(0, 0, 0, 0.8);
}
.popover.expanded .btn-bg:hover svg{
  fill:rgba(0, 0, 0, 1);
}
.popover.expanded .pop-content{
  opacity: 1;
}

.pop-content{
  padding:16px;
  padding-top: 36px;
}
.pop-content h3{
  margin-top:0;
  margin-bottom:16px;
  font-size:32px;
}
.pop-content p{
  margin:12px 0;
  font-size: 26px;
}

.frameBlanket{
  position: absolute;
  background:rgba(255, 255, 255, 0.75);
  background:white;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-caption{
  background:white;
  width:100%;
  position: absolute;
  bottom:0;
  height:5vh;
}
.btn-info{
  width:42px;
  height:42px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: white;
  top:6px;
  left:6px;
}
.btn-info svg{
  position: absolute;
  width: 24px;
  height:24px;
  top:50%;
  left:50%;
  margin-top: -12px;
  margin-left: -12px;
  fill: rgba(0, 0, 0, 0.8);
  transition: fill 0.2s ease;
}
.btn-info:hover svg{
  fill: rgba(0, 0, 0, 1);
}


.tblResults {
	tr:first-of-type {
		td {
			background-color: #262829;
			color: white;
		}
	}
}

.pag {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	.pag-ellipsis {
		color: rgba(0, 0, 0, 0.5);
		font-weight: 400;
		font-size: 32px;
		padding-bottom: 24px;
		margin: 0 3px;
		user-select: none;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0, 0, 0, 0.65);
		border-radius: 21px;
		background: rgba(0, 0, 0, 0);
		font-size: 32px;
		margin: 0 3px;
		transition: color 0.2s ease, background 0.2s ease;
		&:disabled {
			color: rgba(0, 0, 0, 0.25);
		}
		&:hover:not(:disabled):not(.current) {
			background: rgba(0, 0, 0, 0.05);
			color: rgba(0, 0, 0, 0.8);
		}
		&.btn-num {
			font-size: 26px;
			padding-bottom: 4px;
		}
		&.current {
			background: rgba(0, 0, 0, 0.75);
			color: white;
			cursor: default;
		}
	}
}

@media only screen and (max-width: 1240px){
  .table-accordion{
    font-size: 24px;
  }
}

@media only screen and (max-width: 1000px){
  header{
    height: 205px;
  }
  .page-content{
    margin-top: 205px;
  }
  #headerlogo{
    width:300px;
    margin-top:12px;
    margin-left:6px;
    margin-bottom:12px;
  }
  .two-col{
    flex-direction: column;
  }
  .two-col .text-col{
    width:100%;
    padding-right:0;
  }
  .two-col .text-col:last-of-type{
    padding-left:0;
    border:none;
  }
  .text-img-row{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text-img-row img{
    width: 100%;
    max-width: 600px;
    margin-left: 24px;
    margin-right: 24px;
  }
  .text-img-row p{
    width: 100%;
    padding-left:0;
  }
  .img_row3 img{
    height: 260px;
  }
}
@media only screen and (max-width: 850px){
  header{
    height: 275px;
  }
  .page-content{
    margin-top: 275px;
  }
  #headerlogo{
    width:300px;
    margin-top:20px;
    margin-bottom:50px;
  }
  header .content-inner{
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }

  body.scrolled header{
    height:150px;
  }
  body.scrolled .page-content{
    margin-top: 150px;
  }
  body.scrolled #headerlogo{
    width:200px;
    margin: 10px 0;
    padding-top:0;
  }
  
}
@media only screen and (max-width: 800px){
  .card{
    min-height: 200px;
  }
}

@media only screen and (max-width: 700px){
  .card-holder-3 .card{
    width: calc(50% - 24px);


  }
}


@media only screen and (max-width: 620px){
  .table-accordion-mob{
    display: table;
  }
  .table-accordion{
    display: none;
  }
}


@media only screen and (max-width: 450px){
  nav{
    text-align: center;
  }

  #burgermenu{
    display:flex;

  }

  .card-holder{
    flex-direction:column;
  }
  .card{
    width: auto;
  }
  .card-holder-3 .card{
    width: calc(100% - 24px);
  }
}
@media only screen and (max-width: 430px){
  .img_row3 img{
    height: auto;
    width:100%;
  }
}

@media only screen and (max-width: 375px){
  header{
    height: 265px;
  }
  nav{
    text-align: center;

  }
  nav a{
    font-size: 24px;

  }
  .card-holder{
    flex-direction:column;
  }
  .card{
    width: auto;
  }
}


















@keyframes ldio-us27d42vi6-r {
  0%, 100% { animation-timing-function: cubic-bezier(0.2 0 0.8 0.8) }
  50% { animation-timing-function: cubic-bezier(0.2 0.2 0.8 1) }
  0% { transform: rotate(0deg) }
  50% { transform: rotate(180deg) }
  100% { transform: rotate(360deg) }
}
@keyframes ldio-us27d42vi6-s {
  0%, 100% { animation-timing-function: cubic-bezier(0.2 0 0.8 0.8) }
  50% { animation-timing-function: cubic-bezier(0.2 0.2 0.8 1) }
  0% { transform: translate(-44px,-44px) scale(0) }
  50% { transform: translate(-44px,-44px) scale(1) }
  100% { transform: translate(-44px,-44px) scale(0) }
}
.ldio-us27d42vi6 > div { transform: translate(0px,-22px) }
.ldio-us27d42vi6 > div > div {
  animation: ldio-us27d42vi6-r 2s linear infinite;
  transform-origin: 100px 100px;
}
.ldio-us27d42vi6 > div > div > div {
  position: absolute;
  transform: translate(100px, 73.6px);
}
.ldio-us27d42vi6 > div > div > div > div {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #515151;
  animation: ldio-us27d42vi6-s 2s linear infinite;
}
.ldio-us27d42vi6 > div > div:last-child {
  animation-delay: -1s;
}
.ldio-us27d42vi6 > div > div:last-child > div > div {
  animation-delay: -1s;
  background: #bebebe;
}
.loadingio-spinner-interwind-43u7v8uevv5 {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
}
.ldio-us27d42vi6 {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-us27d42vi6 div { box-sizing: content-box; }

.searchInputs {
	margin: 0 12px;
	margin-left: 24px;
	width: calc(100% - 48px);
	max-width: 400px;
	position: relative;
	input {
		position: relative;
		width: calc(100% - 24px);
	}
	.btn {
		background: none;
		border: none;
		outline: none;
		position: relative;
		&:not(:disabled) {
			cursor: pointer;
		}
		&.btnIcon {
			width: 48px;
			height: 48px;
			svg {
				fill: #878787;
				width: 24px;
				height: 24px;
				position: absolute;
				left: calc(50% - 12px);
				top: calc(50% - 12px);
				transition: fill 0.2s ease;
			}
			&.btnIcon26 {
				svg {
					width: 26px;
					height: 26px;
				}
			}
			&:hover {
				svg {
					fill: black;
				}
			}
		}
	}
	#btnSearch {
		position: absolute;
		top: calc(50% - 24px);
		right: 10px;
	}
}

input {
	font-family: duffy-script, sans-serif;
	font-size: 30px;
	padding: 10px;
	&::placeholder {
		color: rgba(0, 0, 0,  0.2);
	}
}

#searchResults {
	/* display: flex; */
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 0 !important;
	h2 {
		width: fit-content;
		margin: 24px 12px;
		position: relative;
		&::after {
			content: "";
			height: 3px;
			width: 50%;
			max-width: 100px;
			display: block;
			background: rgba(0, 0, 0, 0.2);
			position: absolute;
			left: 0;
			bottom: -5px;
		}
	}
}
h2 {
	margin: 0;
	font-family: duffy-script, sans-serif;
}

.sCard {
	width: calc(33.333% - 24px);
	margin: 12px;
	background: #fcfcfc;
	box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.25);
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	.btn-card-expand {
		position: absolute;
		top: 6px;
		right: 6px;
	}
	.sCardDets {
		padding: 12px;
		position: relative;
	}
	p {
		font-size: 28px;
		padding: 0;
		margin: 12px 0;
		padding: 0 12px;
	}
	.pLife {
		span {
			margin-right: 6px;
		}
		span:nth-of-type(3) {
			border-left: 1px solid #333333;
			padding-left: 6px;
		}
		.val {
			font-family: reklame-script, sans-serif;
			font-size: 0.8rem;
			letter-spacing: 3px;
		}
	}
	.pCountry, .pGenre, .pKeywords {
		.val {
			font-weight: 600;
		}
	}
	.rowImgs {
		touch-action: none;
		display: block;
		width: 100%;
		/* height: 200px; */
		aspect-ratio: 1 / 1;
		overflow: hidden;
		position: relative;
		.imgDiv {
			position: absolute;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: 50% 50%;
		}
		.btn-car {
			width: 42px;
			height: 42px;
			min-width: 42px;
			min-height: 42px;
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			top: calc(50% - 21px);
			transition: color 0.2s ease, background-color 0.2s ease;
			border-radius: 21px;
			padding: 0;
			padding-bottom: 8px;
			&.btn-car-left {
				left: 6px;
				padding-right: 4px;
			}
			&.btn-car-right {
				right: 6px;
			}
			&:hover {
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
			}
		}
	}
}

@media only screen and (max-width: 860px){
	.sCard {
		width: calc(50% - 24px);
	}
}

@media only screen and (max-width: 580px){
	.sCard {
		width: calc(100% - 24px);
	}
}