* {
	font-family: "Roboto Condensed", sans-serif;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background-color: #888888;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
	background: #222222; 
}

::-webkit-scrollbar-thumb:hover {
	background: #222222; 
}

:root {
	--width: 1330px;
	--text-color: #ffffff;
	--main-color: #eac51e;
	--secondary-color: #000000;
	--accent-color: #C68A1E;
	--bg-color: #646464;
	--color-red: #a81717;
}

body {
	font-size: 13pt;
	background-color: #e0e0e0;
}

a, a:active, a:visited {
	text-decoration: none;
}

h1 {
	font-size: 16pt;
}

h2 {
	font-size: 14pt;
	margin-bottom: 10px;
}

h3 {
	
}

img {
	border: 0px;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

p {
	line-height: 150%;
	padding-bottom: 10px;
}

td {
	padding: 5px 2px;
}

ul, ol {
	list-style-position: inside;
}

input[type="checkbox"] {
	width: 16px;
	height: 16px;
    vertical-align: middle;
    position: relative;
    bottom: 2px;
	z-index: 10;
}

input[type="text"], input[type="password"], textarea, select {
	padding: 12px;
	border: 1px solid #e0e0e0;
	font-size: 12pt;
	color: #444444;
	max-width: 100%;
	background-color: #fafafa;
}

input[type="submit"], .button {
	text-decoration: none;
	padding: 12px 12px;
	background-color: #000000;
	color: #ffffff;
	font-size: 14pt;
	font-weight: bold;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	line-height: 125%;
	
	i {
		margin-right: 5px;
	}
	
	&.small {
		padding: 8px;
		text-transform: none;
		font-size: 12pt;
		text-align: left;
	}
	
	&.block {
		display: block;
	}
	
	&.gray {
		background-color: #cccccc;
		color: #000000;
	}
	
	&.red {
		background-color: #a81717;
	}
}

input[type="submit"]:hover, .button:hover {
	background: #000000;
}

input.required, textarea.required {
	background: #fafafa url(images/asterisk.png) no-repeat right 10px center;
}

select.required {
	background: #fafafa url(images/asterisk.png) no-repeat right 15px center;
}

select.error, input.error, textarea.error {
	border: 1px solid #ff0000;
}

span.error {
	display: inline-block;
	color: #ff0000;
	font-size: 11pt;
	border: 1px solid #ff0000;
	padding: 1px 5px; 
	background-color: #fee0e1;
	margin-bottom: 5px;
}

.pointer {
	cursor: pointer;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
}

.sortable-placeholder {
	background: rgba(100, 100, 255, 0.1);
	border: 2px dashed #bbb;
	min-height: 100px;
}

header {
	position: fixed;
	width: 100%;
	padding: 5px 10px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #cccccc;
	z-index: 100;
	
	#logo {
		height: 60px;
	}
	
	#customer {
		float: right;
		display: flex;
		align-items: center;
		
		#avatar {
			width: 60px;
			height: 60px;
			object-fit: cover;
			border-radius: 50%;
			border: 1px solid #cccccc;
			padding: 3px;
			cursor: pointer;
		}
	}
}

#customer-data {
	display: none;
	position: fixed;
	top: 70px;
	right: 10px;
	border: 1px solid #cfcfcf;
	padding: 10px 20px;
	border-radius: 10px;
	background-color: #ffffff;
	text-align: center;
	width: 200px;
	z-index: 100;
}

#menu {
	position: fixed;
	z-index: 1000;
	
	ul {
		list-style: none;
		
		li a {
			display: block;
			font-size: 11pt;
			color: #444444;
			text-align: center;
			
			i {
				font-size: 22pt;
			}
		}
	}
}

main {
	width: var(--width);
	max-width: 100%;
	margin: auto;
	padding-top: 68px;
	background-color: #ffffff;
}

footer {
	background-color: #393939;
	padding: 30px 0px 80px 0px;
	color: #ffffff;
	
	a {
		color: #ffffff;
	}
}

.wrap {
	padding: 15px;
}

.flex {
    display: flex;
}

#cookies-policy {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 340px;
	background-color: #f8f8f8;
	padding: 10px 20px;
	z-index: 1000;
	border: 1px solid #666666;
	
	p {
		color: #000000;
		text-align: center;
		font-size: 9pt;
		margin-bottom: 10px;
	}
	
	#button-close-cookies {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		width: 20px;
		height: 20px;
		background: url(icons/button-close.png) no-repeat;
	}
}

.leftbar {
	width: 350px;
}

.sidebar {
	width: 350px;
}

.content {
	flex: 1;
}

#list {
	width: 500px;
	max-width: 100%;
	margin: auto;
}

.row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #999999;
	min-height: 100px;
	padding: 10px;
	border-radius: 10px;
	cursor: pointer;
	margin-bottom: 10px;
	position: relative;
	
	&.small {
		min-height: auto;
		width: 150px;
	}
	
	.image {
		flex-shrink: 0;
		width: 150px;
		margin-right: 10px;
		background-color: #ffffff;
		
		img {
			object-fit: cover;
			width: 100%;
			height: 80px; 
			vertical-align: top;
		}
	}
	
	.details {
		flex-grow: 1;
		flex-shrink: 1;
	
		h2 {
			display: flex;
			font-size: 16pt;
			margin-bottom: 0px;
		}
		
		p {
			padding-bottom: 0px;
		}
	}
	
	.buttons {
		width: 175px;
		background-color: #ffffff;
		border: 1px solid #cccccc;
		border-radius: 10px;
		padding: 10px;
		position: absolute;
		top: 30px;
		right: 0px;
		display: none;
		z-index: 5;
		
		.button {
			border-radius: 5px;
			margin-bottom: 6px;
			
			&:last-child {
				margin-bottom: 0px;
			}
		}
	}
	
	&:nth-child(even) {
		background-color: #f8f8f8;
	}
	
	&:nth-child(odd) {
		background-color: #d9d9d9;
	}
	
	&:hover {
		border: 1px solid #333333;
	}
	
	&.inactive {
		background-color: #f0c2c2;
		border: 1px solid #f53d3d;
		
		img {
			border: 1px solid #f53d3d;
		}
	}
	
	&.active {
		background-color: #baf6c5;
		border: 1px solid #0f9b1f;
		
		img {
			border: 1px solid #0f9b1f;
		}
	}
	
	&.selected {
		background-color: #9bd9f5;
		border: 1px solid #1b7cc0;
	}
}

section {
	.title-content {
		overflow: hidden;
		margin-bottom: 15px;
		
		h1, .title {
			color: #333333;
			font-size: 22pt;
			font-weight: bold;
			margin-bottom: 0px;
		}
	}
	
	&.gray {
		background-color: #ececec;
	}
	
	&.dark-gray {
		background-color: #cccccc;
	}
}

section:last-child {
	margin-bottom: 0px;
}

.announce {
	font-size: 12pt;
    font-weight: bold;
	text-align: center;
	border: 1px solid #ac235b;
	background-color: #efd1dd;
	padding: 5px;
	margin: 10px;
}

#message {
	position: fixed;
	top: 50%;
	width: 100%;
	z-index: 1000;
	font-size: 20pt;
	color: #222222;
	font-weight: bold;
	text-transform: uppercase;
	padding: 20px;
	text-align: center;
	transform: translate(0%, -50%); 
	
	&.error {
		border-top: 2px solid #df8f90;
		background-color: #ffd2d3;
	}
	
	&.success {
		border-top: 2px solid #9adf8f;
		background-color: #d4ffcd;
	}
}

.breadcrumb {
	margin-bottom: 10px;
	
	p {
		margin-bottom: 0px;
	}
	
	.separator {
		margin: 0px 5px;
	}
	
	.selected {
		color: #ac235b;
	}
}

.breadcrumb *, .breadcrumb {
	font-weight: bold;
	font-size: 10pt;
	text-transform: uppercase;
}

.pages {
	text-align: right;
	
	line-height: 200%;
	
	&.top {
		margin-bottom: 15px;
	}
	
	&.bottom {
		margin-top: 15px;
	}
	
	a {
		margin: 0px 2px;
		padding: 5px 10px;
		font-weight: bold;
		font-size: 13pt;
		color: #000000;
	}
	
	a.selected {
		border: 1px solid #000000;
		background-color: #ffffff;
	}
}

.page-content {
	p {
		text-align: justify;
		line-height: 175%;
		margin-bottom: 10px;
		font-size: 12pt;
	}
	
	li {
		font-size: 12pt;
	}
}

.popup-message {
	padding: 15px 30px;
	font-weight: bold;
	fon-size: 16pt;
	text-align: center;
}

#slider {
	position: relative;
	padding: 0px;
}

#banners {
	> div {
		width: 100%;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 14pt;
		text-transform: uppercase;
		border: 1px solid #cccccc;
		position: relative;
		overflow: hidden;
	}
	
	> div .button {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -120px;
		margin-top: -40px;
		padding: 20px;
		font-size: 16pt;
		visibility: hidden;
		z-index: 100;
		background-color: #01378e;
		border: 2px solid #ffffff;
	}
	
	> div:hover img {
		scale: 1.30;
	}
	
	> div:hover .button {
		visibility: visible;
	}
	
	> div img {
		position: relative;
		transition: 0.5s;
		z-index: 10;
		vertical-align: middle;
	}
	
	> div div.caption {
		position: absolute;
		background-color: #01378e;
		bottom: 0px;
		padding: 15px 10px;
		font-weight: bold;
		text-align: center;
		color: #ffffff;
		height: 20px;
		overflow: hidden;
		z-index: 100;
		line-height: 100%;
		width: calc(100% - 20px);
		display: none;
	}
	
	> div.r1 {
		width: 100%;
	}
	
	> div:hover div.caption {
		display: block;
	}
	
	> div.r2 {
		width: calc(50% - 6px - 4px);
		margin-right: 12px;
	}
	
	> div.r3 {
		width: calc(33.3333% - 8px - 2px);
		margin-right: 12px;
	}
	
	> div.r4 {
		width: calc(25% - 9px);
		margin-right: 12px;
	}
	
	> div img {
		max-width: 100%;
	}
	
	> div.last {
		margin-right: 0px;
	}
}

#gallery {
	text-align: center;
	margin-bottom: 10px;
	
	img {
		height: 250px;
		margin: 8px;
		border: 1px solid #b2b2b2;
		background-color: #efefef;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 5px 5px 5px #cccccc;
	}
	
	img:hover {
		box-shadow: 5px 5px 5px #999999;
	}
}

#container-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
	z-index: 200;
	
	#popup-box {
		position: absolute;
		top: 35px;
		right: 25px;
		bottom: 15px;
		left: 25px;
		margin: auto;
		width: fit-content;
		height: fit-content;
		max-width: 1024px;
		max-height: calc(100% - 50px);
		box-shadow: 5px 5px 5px #000000;
	}
	
	#popup-content {
		background-color: #ffffff;
		max-height: 80vh;
		max-width: 80vw;
		overflow-y: auto;
		
		.wrap {
			width: auto;
		}
	}
	
	#popup-close {
		position: absolute;
		font-size: 25pt;
		cursor: pointer;
		padding: 3px 6px;
		background-color: #000000;
		border-radius: 50%;
		border: 4px solid #ffffff;
		color: #ffffff;
		top: -25px;
		right: -25px;
	}
}

#box-login {
	border-radius: 3px;
	width: 400px;
	max-width: 100%;
	margin: auto;
	border: 1px solid #e1e1e1;
	
	h1 {
		font-size: 14pt;
		background-color: #e1e1e1;
		padding: 20px 0px;
		margin-bottom: 0px;
	}
	
	> div {
		padding: 25px 20px 20px 20px;
	}
	
	> div input[type="text"], > div input[type="password"] {
		width: 100%;
		border: 1px solid #cccccc;
		background-color: #ffffff;
	}
	
	> div input[type="submit"] {
		width: 100%;
	}
}

.buttons {
	a, label {
		margin: 4px 5px;
	}
}

#places {
	text-align: center;
}

.places-grid {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	margin-bottom: 20px;
	
	&.small {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
		
		.place {
			.image {
				height: 175px;
			}
		}
	}
}

.place {
	position: relative;
	background-color: #e1e1e1;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	
	&.active {
		outline: 3px solid #ff0000;
	}
	
	&:hover {
		.image img {
			scale: 1.2;
		}
	}
	
	.image {
		overflow: hidden;
		width: 100%;
		height: 250px;
	}
	
	.image img {
		margin-bottom: 0px;
		vertical-align: middle;
		width: 100%;
		height: 280px;
		object-fit: cover;
		transition: 1s;
	}
	
	.image:after {
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		height: 150px;
		background: linear-gradient(180deg, rgba(0,0,0,0), #000000);
	}
	
	.title {
		position: absolute;
		bottom: 0px;
		color: #ffffff;
		padding: 15px;
		font-weight: bold;
		line-height: 150%;
		text-shadow: 1px 1px 1px #000000;
		
		.buttons {
			display: none;
			margin-top: 5px;
			
			a, span {
				margin: 4px 10px 4px 2px;
				color: #ffffff;
				font-size: 20pt;
				cursor: pointer;
			}
		}
	}
	
	.menu {
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 10;
		color: #ffffff;
		background-color: #000000;
		font-size: 25px;
		padding: 5px 8px;
		border-radius: 50%;
		cursor: pointer;
	}
	
	.type {
		position: absolute;
		top: 15px;
		left: 15px;
		text-align: left;
		z-index: 10;
	}
	
	.type span {
		display: inline-block;
		background-color: #000000;
		padding: 3px 8px;
		border-radius: 5px;
		font-size: 10pt;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 3px;
	}
}

.trips-grid {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(min(325px, 100%), 1fr));
	margin-bottom: 20px;
}

.trip {
	position: relative;
	background-color: #e1e1e1;
	border-radius: 15px;
	overflow: hidden;
	max-width: 650px;
	
	&:hover {
		.image img {
			scale: 1.2;
		}
		
		.actions {
			/*
			display: block;
			*/
		}
		
		.user {
			top: -32px;
			left: -32px;
			
			img {
				width: 120px;
				height: 120px;
			}
		}
	}
	
	.labels {
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 5;
		
		span {
			background-color: #000000;
			border-radius: 5px;
			padding: 5px 10px;
			color: #ffffff;
			font-size: 11pt;
		}
	}
	
	.actions {
		display: none;
		position: absolute;
		top: 90px;
		width: 100%;
		text-align: center;
		z-index: 10;
		
		img {
			max-width: 72px;
		}
	}
	
	.user {
		position: absolute;
		top: -22px;
		left: -22px;
		z-index: 10;
		transition: 0.5s;
		
		img {
			border-radius: 50%;
			border: 4px solid #e1e1e1;
			background-color: #ffffff;
			width: 100px;
			height: 100px;
			object-fit: cover;
			transition: 0.5s;
		}
		
		&.inactive img {
			background-color: #cb2e2e;
		}
	}
	
	.stamp {
		top: 30px;
		position: absolute;
		width: calc(100% - 20px);
		z-index: 10;
	}
	
	.image {
		overflow: hidden;
		width: 100%;
		height: 280px;
	}
	
	.image img {
		margin-bottom: 0px;
		vertical-align: middle;
		width: 100%;
		height: 280px;
		object-fit: cover;
		transition: 1s;
	}
	
	.image:after {
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		height: 150px;
		background: linear-gradient(180deg, rgba(0,0,0,0), #000000);
	}
	
	.image.grayscale {
		filter: grayscale(100%);
		opacity: 0.75;
	}
	
	.title {
		position: absolute;
		bottom: 0px;
		color: #ffffff;
		padding: 15px;
		font-weight: bold;
		line-height: 150%;
		text-shadow: 1px 1px 1px #000000;
	}
	
	.type {
		position: absolute;
		top: 15px;
		left: 15px;
		text-align: left;
		z-index: 10;
	}
	
	.type span {
		display: inline-block;
		background-color: #000000;
		padding: 3px 8px;
		border-radius: 5px;
		font-size: 10pt;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 3px;
	}
}

#trips-place-descriptions {
	width: 500px;
	margin: auto;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 10px;
}

#trip-items-type {
	background-color: #f8f8f8;
	text-align: center;
	padding: 10px;
	
	i {
		display: inline-block;
		font-size: 42px;
		margin: 5px 8px;
		cursor: pointer;
		line-height: 100%;
	}
}

.trip-item {
	padding: 10px;
	border: 1px solid #ffffff;
	
	p:last-child {
		padding-bottom: 0px;
	}
	
	&:hover, &.active {
		border: 1px solid #cccccc;
		background-color: #f8f8f8;
		cursor: pointer;
	}
	
	&.active:not(.image) {
		margin-bottom: 10px;
	}
	
	&.tripsPlace {
		max-width: 400px;
	}
	
	&.text {
		grid-column: 1 / -1;
		
		ul {
			margin-bottom: 10px;
			
			li {
				line-height: 150%;
			}
		}
	}
	
	&.image {
		display: inline-block;
		width: 250px;
		position: relative;
		
		img {
			width: 100%;
			height: 250px;
			object-fit: cover;
			vertical-align: middle;
		}
		
		.buttons {
			position: absolute;
			z-index: 100;
			bottom: 10px;
			left: 10px;
			padding: 10px;
			
			i {
				color: #ffffff;
			}
		}
		
		&:after {
			z-index: 10;
			content: '';
			position: absolute;
			bottom: 10px;
			left: 10px;
			right: 10px;
			height: 50px;
			background: linear-gradient(180deg, rgba(0,0,0,0), #000000);
		}
	}
	
	.buttons {
		display: none;
		margin-top: 10px;
		
		i {
			font-size: 16pt;
			margin-right: 10px;
		}
	}
}

.trips-place-images {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	
	&.small {
		grid-gap: 12px;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		
		.trips-place-image {
			img {
				height: 150px;
			}
		}
	}
}

.trips-place-image {
	display: inline-block;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	
	&:hover {
		cursor: pointer;
	}
	
	&.active {
		outline: 2px solid #ff0000;
	}
	
	img {
		width: 100%;
		height: 250px;
		object-fit: cover;
		vertical-align: middle;
	}
	
	.button {
		position: absolute;
		top: 10px;
		background-color: #000000;
		padding: 5px 8px;
		border-radius: 50%;
		color: #ffffff;
		font-size: 16pt;
		text-align: center;
		
		i {
			margin: 0px;
		}
		
		&.left {
			left: 10px;
		}
		&.right {
			right: 10px;
		}
		
		&.image-sort {
			left: 50px;
		}
	}
	
	.buttons {
		position: absolute;
		bottom: 0px;
		padding: 5px;
		z-index: 100;
		width: 100%;
		text-align: center;
		
		a, span {
			margin: 4px;
			color: #ffffff;
			font-size: 22pt;
			cursor: pointer;
		}
	}
	
	&:after {
		z-index: 10;
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		height: 50px;
		background: linear-gradient(180deg, rgba(0,0,0,0), #000000);
	}
}

#tag-groups {
	display: grid;
	width: 500px;
	max-width: 100%;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-bottom: 20px;
	
	.tag-group {
		border: 1px solid #cccccc;
		padding: 10px;
		background-color: #f8f8f8;
		text-align: left;
		
		p:last-child {
			padding-bottom: 0px;
		}
		
		h2 {
			text-align: center;
			text-transform: uppercase;
		}
	}
}

#place {
	img {
		border: 1px solid #cccccc;
		padding: 10px;
		background-color: #ffffff;
		width: 300px;
		height: 220px;
		object-fit: cover;
		margin-bottom: 10px;
	}
	
	iframe {
		vertical-align: top;
		width: 300px;
		max-width: 100%;
		height: 220px;
		border: 1px solid #cccccc;
		padding: 10px;
		background-color: #ffffff;
	}
}

.user {
	display: inline-block;
	margin: 5px;
	
	.image {
	}
	
	.image img {
		border: 1px solid #cccccc;
		padding: 10px;
		border-radius: 150px;
		background-color: #ffffff;
		width: 250px;
		height: 250px;
		object-fit: cover;
	}

	.name {
		font-size: 16pt;
		font-weight: bold;
		color: #000000;
		text-align: center;
	}
}

.percentage-bar {
	margin: auto;
    width: 100%;
    height: 30px;
    background-color: #ffffff;
	border: 1px solid #cccccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-bottom: 5px;
	
	.fill {
		height: 100%;
		background-color: #393939;
		color: #ffffff;
		padding: 4px 0px;
		font-weight: bold;
		text-align: right;
		transition: width 0.3s ease-in-out;
	}
}

.user-image {
	display: inline-block;
	margin-right: 20px;
	position: relative;
	width: 350px;
	max-width: 100%;
	height: 500px;
	
	.image {
		width: 100%;
		height: 500px;
		
		img {
			width: 350px;
			height: 500px;
			object-fit: cover;
		}
		
		&:after {
			content: '';
			position: absolute;
			bottom: 0px;
			left: 0;
			right: 0;
			height: 100px;
			background: linear-gradient(180deg, rgba(0,0,0,0), #000000);
		}
	}
	
	.user-image-buttons {
		position: absolute;
		bottom: 20px;
		width: 100%;
		text-align: center;
		
		i {
			display: inline-block;
			font-size: 28pt;
			margin: 4px;
			cursor: pointer;
			color: #ffffff;
			background-color: #000000;
			padding: 10px 12px;
			border-radius: 50%;
		}
	}
}

.user-data {
	display: inline-block;
	vertical-align: top;
}

.user-usage {
	width: 300px;
}

.trip-setting {
	display: inline-block;
	width: 100px;
	text-align: center;
	
	i {
		display: inline-block;
		font-size: 28pt;
		padding: 15px 20px;
		border-radius: 50%;
		border: 2px solid #ffffff;
		cursor: pointer;
		
		&:hover {
			border: 2px solid #cccccc;
		}
	}
	
	&.select {
		i {
			border: 2px solid #cccccc;
		}
	}
}

.cover {
    width: 100%;
    height: 650px;
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #202124;
	
	.image {
		position: relative;
		
		.trip-image-buttons {
			width: 100%;
			text-align: center;
			position: absolute;
			top: 20px;
			
			i {
				display: inline-block;
				font-size: 24pt;
				margin: 4px;
				cursor: pointer;
				color: #ffffff;
				background-color: #000000;
				padding: 15px;
				border-radius: 50%;
			}
		}
	}

	.image > img {
		width: 100%;
		height: 600px;
		object-fit: cover;
	}
	
	.details {
		position: absolute;
		width: 100%;
		bottom: 0px;
		padding: 50px;
		z-index: 10;
		color: #ffffff;
		
		h1 {
			font-size: 24pt;
			text-shadow: 2px 2px 2px #000000;
			margin-bottom: 20px;
		}
		
		.buttons {
			line-height: 320%;
		}
	}
}

.image-container {
    position: relative;
	width: 100%;
    height: 600px;
    overflow: hidden;
	
	.left-gradient, .right-gradient, .bottom-gradient {
		position: absolute;
		pointer-events: none;
		z-index: 1;
	}

	.left-gradient, .right-gradient {
		top: 0;
		bottom: 0;
		width: 30%;
	}

	.left-gradient {
		left: 0;
		background: linear-gradient(to right, #202124, transparent);
	}

	.right-gradient {
		right: 0;
		background: linear-gradient(to left, #202124, transparent);
	}

	.bottom-gradient {
		left: 0;
		right: 0;
		height: 50%; /* Adjust the height as needed */
		bottom: 0;
		background: linear-gradient(to top, #202124, transparent);
	}
}

.user-person {
	display: inline-block;
	position: relative;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	margin-right: 5px;
	
	.caption {
		position: absolute;
		top: 50%;
		padding: 5px 0px;
		width: 100%;
		text-align: center;
		background-color: #000000;
		color: #ffffff;
		font-size: 10pt;
		transform: translateY(-50%);
		opacity: 0.8;
	}
	
	img {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}
	
	&.active, &:hover {
		outline: 3px solid #ff0000;
	}
}

@media screen and (max-width: 1366px) {

}

@media screen and (max-width: 1240px) {
	
}

@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 800px) {
	
}

/* DESKTOP */
@media screen and (min-width: 801px) {
	section {
		.wrap {
			padding: 20px;
		}
	}
	
	#menu {
		top: 10px;
		width: calc(100% - 130px);
		margin: 0px 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
		
		ul {
			list-style: none;
		}
		
		ul li {
			float: left;
		}
		
		ul li a {
			display: flex;
			padding: 10px 20px;
			font-size: 12pt;
			color: #444444;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			transition: 0.5s;
			align-items: center;
			
			i {
				margin-right: 15px;
			}
		}
		
		ul li a:hover {
			color: #000000;
			background-color: #cccccc;
		}
	}
	
	#trip-settings {
		float: right;
	}
	
	.mobile {
		visibility: hidden;
	}
}

/* MOBILE */
@media screen and (max-width: 800px) {
	header {
		position: static;
	}
	
	main {
		padding-top: 0px;
	}
	
	section {
		.wrap {
			padding: 15px;
		}
	}
	
	#menu {
		bottom: 0px;
		width: 100%;
		border-top: 1px solid #cccccc;
		background-color: #ffffff;
		padding: 5px;
		
		ul {
			list-style: none;
			display: grid;
			grid-gap: 2px;
			grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
		}
		
		ul li a {
			display: block;
			font-size: 11pt;
			color: #444444;
			text-align: center;
			
			i {
				display: block;
			}
		}
	}
	
	.cover {
		.details {
			padding: 15px;
		}
	}
	
	.desktop {
		visibility: hidden;
	}
	
	#trip-items-type {
		
	}
	
	.trip-item {
		&.image {
			width: calc(50% - 2px);
		}
	}
}

@media screen and (max-width: 450px) {
	
}

@media screen and (max-width: 380px) {
	
}

@media screen and (max-width: 330px) {

}