/*** MEDIA QUERY ***/
/*******************/
/*
fino a 600px  : Extra small devices (phones)
fino a 772px  : Small devices
fino a 992px  : Medium devices (landscape tablets)
fino a 1200px : Large devices (laptops/desktops)
*/

:root {
  --border-radius-image: 10px;
	--color-koobcamp: #2BB5B6;
  --color-primary: #7FB525;
  --color-primary-dark: #197244;
  --color-secondary: #0178C8;
	--color-text: #424242;
	--color-text-light: #707070;
	--color-background: #ffffff;
	--color-red: rgb(182, 29, 29);

	--wrapper-big: 1300px;
	--wrapper-small: 900px;

	--font-title: Lato, Geneva, sans-serif;
	--font-body: Lato, Geneva, sans-serif;

	--transition: all 300ms ease-out;

	--padding-x: 2rem;
	--column-space: 2rem;
	--page-padding-top: 110px;
}


* {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
}

html {
	font-size: 15px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	padding: 0;
	margin: 0;
}

hr {
	margin: 2.5rem 0;
	border-top: 1px solid #ddd;
}



div[itemscope] {
	display: none;
}

.ci-hide { display: none;		}
.ci-show { display: block;	}

.px-1rem	{ padding-left: 1rem; padding-right: 1rem;	}
.px-2rem	{ padding-left: 2rem; padding-right: 2rem;	}
.px-xrem	{ padding-left: var(--padding-x); padding-right: var(--padding-x);	}


.ci-img-cover {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}



/*** PRELOADER ***/
/*****************/

.no-js #loader {
	display: none;

}
.js #loader {
	display: block;
	position: absolute;
	left: 100px;
	top: 0;
}

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(/static/slick/loading.gif) center no-repeat rgba(255, 255, 255, 0.85);
	overflow: hidden;
}

.no-scroll {
	overflow: hidden;
 }

/*** WRAPPER ***/
/***************/

section {
	background-color: var(--color-background);
	z-index: 10;
	position: relative;
	padding: 1rem 0;
}

.ci-page-content {
	padding-top: var(--page-padding-top);
}
.ci-sticky {
	position: sticky;
	top: var(--page-padding-top);
}

.ci-full-width:not(.ci-filter-item) {
	width: 100%;
	margin: 0 auto 5rem;
}
.ci-full-width.ci-full-width--margin {
	padding-left: 3rem;
	padding-right: 3rem;
}

.ci-wrapped {
	width: 100%;
	max-width: var(--wrapper-big);
	margin: 0 auto 2.5rem;
	padding: 0 var(--padding-x);
}
.ci-wrapped--small {
	max-width: var(--wrapper-small);
	margin-left: auto;
	margin-right: auto;
}
@media screen and (min-width: 992px) {
	.ci-wrapped {
		margin: 0 auto 3rem;
	}
}

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

.ci-spacer {
	height: 3rem;
}

.ci-split-2 {
	-webkit-column-count: 2; /* Saf3, Chrome*/
	-webkit-column-gap: 4%; /* Saf3, Chrome*/
	-moz-column-count: 2; /* FF3.5+ */
	-moz-column-gap: 4%; /* FF3.5+ */
	column-count: 2; /* Opera 11+*/
	column-gap: 4%; /* Opera 11+*/
}

.ci-split-1 a,
.ci-split-2 a {
	display: block;
}

#crew {
	scroll-margin-top: 5rem;
}



/*** STRUCTURE ***/
/*****************/

.ci-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	justify-content: space-between;
}

.ci-col {
	display: flex;
	flex-direction: column;
}

.ci-col.ci-col--1on2 {	width: calc(50% - var(--column-space) / 2); }
.ci-col.ci-col--1on3 {	width: calc(100% / 3 - var(--column-space) / 3); }
.ci-col.ci-col--2on3 {	width: calc(100% / 3*2 - var(--column-space) / 3); }
.ci-col.ci-col--1on4 {	width: calc(25% - var(--column-space) / 4); }
.ci-col.ci-col--1on5 {	width: calc(20% - var(--column-space) / 5); }



/*** TYPOGRAPHY ***/
/******************/

.ci-colored {
  color: var(--color-primary);
}
.ci-white {
  color: #FFFFFF;
}
.ci-date-error {
	color: #444;
}

h2 {
	color: var(--color-text);
}

p, label {
	color: var(--color-text-light);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 300;
}
strong {
	color: var(--color-primary);
}



/*** BUTTON ***/
/**************/

.ci-button {
  color: white;
  background-color: var(--color-primary);
  border-radius: 3px;
  width: fit-content;
  padding: 1rem 2rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
	font-size: 0.9rem;
	transition: var(--transition);
	border: none;
	cursor: pointer;
}
.ci-button:hover {
	transition: var(--transition);
	border-radius: 20px;
}

.ci-button.ci-button--white {
	color: var(--color-primary);
	background-color: white;
}
.ci-button.ci-button--disabled {
	color: #333;
	background-color: #ddd;
}

.ci-button.ci-button--outstock {
	color: #ccc;
	background-color: transparent;
	border: 1px #ccc solid;
	cursor: default;
}
.ci-button.ci-button--outstock:hover {
	border-radius: 0;
}

a.ci-button {
  text-decoration: none;
}

.ci-link-text {
	color: var(--color-secondary);
	text-decoration: underline;
}

.ci-anchor-link {
	scroll-margin-top: 6rem;
}




/*** MENU ***/
/************/

section.ci-menu {
	background-color: #ffffff;
	box-shadow: 0px 3px 6px #00000029;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	padding: 0.5rem 0;
}
.ci-menu .ci-wrapped {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	margin-bottom: 0;
}
@media screen and (min-width: 992px) {
	section.ci-menu {
		padding: 1rem 0;
	}
}

.ci-menu-hidden {
	display: none;
		animation-name: sticky-up;
		animation-iteration-count: 1;
		animation-duration: 0.3s;
		animation-delay: 0s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
}
@keyframes sticky-up {
	from { transform: translateY(0); }
	to { transform: translateY(-100%); }
}

.ci-sticky-down {
	display: flex;
		animation-name: sticky-down;
		animation-iteration-count: 1;
		animation-duration: 0.3s;
		animation-delay: 0s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
}
@keyframes sticky-down {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}


.ci-menu .ci-logo {
	width: 150px;
	padding-right: 1rem;
}
@media screen and (min-width: 500px) {
	.ci-menu .ci-logo {
		width: 200px;
	}
}
@media screen and (min-width: 600px) {
	.ci-menu .ci-logo {
		width: 50%;
	}
}

.ci-menu .ci-form {
	display: none;
}
.ci-menu .ci-form--mobile {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	box-shadow: 0px -3px 6px #00000029;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
}
@media screen and (min-width: 992px) {
	.ci-menu .ci-form {
		display: flex;
		align-items: center;
		width: 70%;
	}

	.ci-menu .ci-form--mobile {
		display: none;
	}
}

.ci-menu .ci-form .ci-select {
	margin: 0.5rem;
	background-color: #F6F7F7;
	border: none;
}

.ci-menu .ci-form .ci-select .select2-selection--single {
	background-color: transparent;
}

.ci-menu .ci-form .ci-button {
	box-shadow: none;
	width: fit-content;
	padding: 0.65rem 2rem;
	margin: 0 0.5rem;
}

.ci-menu .ci-form--mobile a.ci-button {
	width: 100%;
	text-align: center;
}



/*** TRANSLATE ***/
/*****************/

.ci-languages {
	display: flex;
	align-items: center;
}
.ci-hero-banner .ci-languages {
	margin: 0 0 0 auto;
}

.ci-languages a {
	background-color: transparent;
	color: var(--color-text-light);
	padding: 0 0.5rem;
	border-radius: 0;
	text-decoration: none;
}
.ci-hero-banner .ci-languages a {
	color: white;
}
.ci-languages a:not(:last-child) {
	border-right: 1px #ddd solid;
}




.ci-menu .ci-contact-bar p strong {
	color: var(--color-secondary);
}
.ci-menu .ci-contact-bar .ci-button {
	background-color: transparent;
	color: var(--color-secondary);
	text-transform: uppercase;
	padding: 0;
	margin-left: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0;
}
@media screen and (min-width: 992px) {
	.ci-menu .ci-contact-bar .ci-button {
		background-color: var(--color-secondary);
		color: white;
		margin: 0 1rem;
		padding: 0.75rem 1rem;
		font-size: 1rem;
		letter-spacing: 1px;
	}
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--color-primary) !important;
}

.daterangepicker td.in-range {
	background-color: #b9e4ae !important;
}

#date-range-picker-structure input[type="text"] {
	color: #999;
	font-size: 1rem;
	background: transparent;
	border: 0;
	height: 28px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: var(--color-primary) !important;
}
.drp-selected {
	display: none !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
	font-family: var(--font-body);
	font-size: 0.85rem;
}

.daterangepicker .calendar-table th.month {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-secondary);
}

/* REMOVE SECOND CALENDAR */
.drp-calendar.right thead>tr:nth-child(2) {
	display: none;
}
.drp-calendar.right tbody {
	display: none;
}
.daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
	float: none !important;
}
.daterangepicker .drp-calendar.right .daterangepicker_input {
	position: absolute;
	top: 45px;
	left: 8px;
	width: 230px;
}
.drp-calendar.left .drp-calendar-table {
	margin-top: 45px;
}
/* REMOVE SECOND CALENDAR */



/*** HERO BANNER ***/
/*******************/

.ci-hero-banner {
	height: 100vh;
	background-color: rgba(0,0,0,0.25);
	background-image: url(../assets/herobanner2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: top;
	background-blend-mode: darken;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1rem 2rem;
	margin-bottom: 4rem;
}

.ci-error-page .ci-hero-banner {
	justify-content: flex-end;
	height: 80vh;
}
@media screen and (min-width: 772px) {
	.ci-hero-banner {
		padding: 2rem 2rem 5rem;
	}
}
@media screen and (min-width: 992px) {
	.ci-hero-banner {
		padding: 3rem 3rem 5rem;
	}
}
@media screen and (min-width: 772px) {
	.ci-hero-banner:after {
		content: "";
		position: absolute;
		bottom: -20px;
		height: 50px;
		width: 100%;
		background-image: url(../assets/pennellata\ herobanner.png);
		background-size: contain;
		background-position-x: center;
		background-position-y: bottom;
		background-repeat: repeat-x;
	}
}
@media screen and (min-width: 992px) {
	.ci-hero-banner:after {
		bottom: -20px;
		height: 80px;
	}
}

.ci-error-page .ci-hero-banner .ci-wrapped--small {
	width: 100%;
	max-width: var(--wrapper-small);
	background: var(--color-primary);
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.ci-hero-banner .ci-col.ci-col--1on3:first-child {
	display: none;
}
.ci-hero-banner .ci-col.ci-col--1on3 {
	width: 35%;
}
.ci-hero-banner .ci-col.ci-col--1on3:last-child {
	width: 65%;
}
@media screen and (min-width: 772px) {
	.ci-hero-banner .ci-col.ci-col--1on3:first-child {
		display: block;
	}
	.ci-hero-banner .ci-col.ci-col--1on3,
	.ci-hero-banner .ci-col.ci-col--1on3:last-child {
		width: calc(100% / 3 - var(--column-space) / 3);
	}
}

.ci-logo {
	width: 100%;
	max-width: 260px;
	order: 2;
}
.ci-error-page .ci-logo {
	margin: 40px auto;
}

.ci-contact-bar {
	display: none;
}
@media screen and (min-width: 600px) {
	.ci-contact-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		order: 1;
		width: 100%;
		border-bottom: 1px #ddd solid;
		padding-bottom: 4px;
		margin-bottom: 4px;
	}
}


.ci-contact-bar p {
	font-size: 0.75rem;
}

.ci-languages {
	order: 3;
}

.ci-menu .ci-wrapped {
	flex-wrap: wrap;
}

@media screen and (min-width: 992px) {
	.ci-menu .ci-wrapped {
		flex-wrap: nowrap;
	}

	.ci-logo {
		order: 1;
		width: 260px;
		min-width: 260px;
		margin: 0 auto;
	}

	.ci-contact-bar {
		justify-content: flex-end;
		order: 2;
		width: 100%;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.ci-contact-bar p {
		font-size: 1rem;
	}

	.ci-languages {
		order: 3;
		width: fit-content;
		display: flex;
    align-items: center;
    justify-content: flex-end;
	}
}

.ci-hero-banner h1 {
	font-family: var(--font-title);
	font-size: 3rem;
	font-weight: 300;
	margin: 0;
	text-shadow: 0 0 20px rgba(0,0,0,0.75);
	text-align: left;
}
.ci-hero-banner h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.25rem;
	margin: 1rem 0 2rem;
	font-weight: 200;
	text-shadow: 0 0 10px rgba(0,0,0,1);
	text-align: left;
}
@media screen and (min-width: 772px) {
	.ci-hero-banner h1 {
		font-size: 4rem;
	}
	.ci-hero-banner h3 {
		font-size: 1.5rem;
	}
}

.ci-error-page .ci-hero-banner h1 {
	font-size: 6rem;
}
.ci-error-page .ci-hero-banner h3 {
	font-size: 2rem;
}

/** form di ricerca **/
.ci-hero-banner .ci-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media screen and (min-width: 772px) {
	.ci-hero-banner .ci-form {
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media screen and (min-width: 992px) {
	.ci-hero-banner .ci-form {
		background: white;
    padding: 0 1rem;
    border-radius: 50px;
		flex-wrap: nowrap;
	}
}

.ci-form .select2-container {
	width: 100% !important;
}

.ci-form .ci-button {
	width: 100%;
	padding: 0.5rem;
	margin: 1rem;
	height: calc(28px + 1rem);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	border: none;
	background-color: var(--color-secondary);
}

.ci-form .ci-select {
	text-align: left;
	box-sizing: border-box;
	border: 1px #ddd solid;
	margin: 0.5rem;
	background-color: white;
	border-radius: 50px;
	width: 100%;
	padding: 0.5rem 1.2rem;
	height: fit-content;
}
@media screen and (min-width: 772px) {
	.ci-form .ci-select,
	.ci-form .ci-button {
		width: calc(50% - 2rem);
	}
}
@media screen and (min-width: 992px) {
	.ci-form .ci-select {
		width: 25%;
		background-color: white;
    border-radius: 0;
		border-width: 0;
		margin: 0;
	}

	.ci-form .ci-select + .ci-select {
		border-left: 1px #ddd solid
	}

	.ci-form .ci-button {
		width: 25%;
	}
}

.ci-form .ci-select .select2-selection {
	border: none;
}

.ci-form .ci-select select {
	width: 100%;
}


/* la freccia della select */
.ci-form .ci-select .select2-selection {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	width: 1rem !important;
	height: 1rem !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	display: block;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	width: 1rem !important;
	height: 1rem !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	border: none !important;
	background-image: url(../assets/select.svg);
	background-size: cover;
}

/** scroll mouse **/
.scroll-mouse {
  display: none;
}
@media screen and (min-width: 992px) {
	.scroll-mouse {
		width:32px;
		height:56px;
		border:2px solid #FFF;
		border-radius: 24px;
		display:flex;
		justify-content:center;
		position: relative;
	}
}

.scroll-mouse-point {
  position: absolute;
  width:6px;
  height:6px;
  border-radius: 6px;
  background-color: #FFF;
  animation: mousemove 2s infinite;
}

@keyframes mousemove {
	from  { top: 10px; opacity:0; }
	to 		{ top: 44px; opacity:1; }
}


/*** animazione titolo ***/
.ci-hero-banner-words {
	display: inline;
	text-indent: 0.5rem;
}

.ci-hero-banner-words span {
	position: absolute;
	opacity: 0;
	color: var(--color-primary);
	font-weight: 600;
}

/*** TITLE ***/
/*************/

.ci-title {
	text-align: center;
	margin-bottom: 2.5rem;
}
.ci-title.ci-title--left {
	text-align: left;
}

.ci-title h1, h3 {
	font-family: var(--font-title);
	font-weight: 600;
	margin: 0;
}

h2 {
	font-size: 1.5rem;
	color: var(--color-primary);
	margin-bottom: 1.5rem;
}

.ci-title h3 {
	font-size: 1.15rem;
	font-weight: 300;
	color: var(--color-primary);
	font-style: italic;
}
@media screen and (min-width: 1200px) {
	.ci-title h3 {
		font-size: 1.5rem;
	}
}

.ci-title h1 {
	font-size: 1.75rem;
	color: var(--color-secondary);
}
@media screen and (min-width: 1200px) {
	.ci-title h1 {
		font-size: 2rem;
	}
}

/*** HOME PAGE INTRO ***/
/***********************/

section.ci-home-intro {
	background-color: #e7e7e7;
	padding-top: 4rem;
	margin-bottom: 4rem;
}

.ci-home-intro .ci-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ci-home-intro .ci-home-intro-box {
	display: flex;
	width: 100%;
	margin-bottom: 2rem;
}
@media screen and (min-width: 772px) {
	.ci-home-intro .ci-home-intro-box {
		width: calc(50% - 1rem);
	}
}

.ci-home-intro .ci-home-intro-box img {
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 1rem;
}

.ci-home-intro h4 {
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 0.25rem;
}

.ci-home-intro p {
	color: var(--color-text-light);
}

.ci-background {
	padding: 3rem var(--padding-x);
}


.ci-background > img {
	display: none;
}
@media screen and (min-width: 992px) {
	.ci-background > img {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}


.ci-loc-tourist-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.ci-loc-tourist-list + div.ci-loc-tourist-list {
	margin-top: 1.5rem;
}

.ci-loc-tourist-list a {
	color: var(--color-text-light);
	text-decoration: none;
	margin-right: 1rem;
	transition: var(--transition);
}
.ci-loc-tourist-list a:hover {
	color: var(--color-koobcamp);
	text-decoration: underline;
	transition: var(--transition);
}


/*** SLICK SLIDER ***/
/********************/

.slick-track {
	padding-bottom: 2rem;
}

.slick-slide {
	margin: 0 1rem;
}

.slick-prev:before,
.slick-next:before {
	font-size: 0px !important;
	color: transparent !important;
	width: 1.5rem;
	height: 0.75rem;
	opacity: 1;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.slick-next:before {
	background-image: url(../assets/arrow-next.svg);
}
.slick-prev:before {
	background-image: url(../assets/arrow-prev.svg);
}

button.slick-arrow {
	width: 3rem;
	height: 3rem;
	opacity: 1;
	display: block;
	padding: 8px;
	background-color: white !important;
	background-image: url(../assets/arrow.svg) !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 6px rgba(66, 66, 66, 0.6);
	border-radius: 50px;
	z-index: 3;
	transition: var(--transition);
}
button.slick-arrow:hover,
button.slick-arrow:focus {
	padding: 8px;
	background-color: white !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	box-shadow: 0 0 12px rgba(44, 44, 44, 0.8);
	border-radius: 50px;
	z-index: 3;
	transition: var(--transition);
}

button.slick-arrow.slick-prev {
	background-image: url(../assets/arrow-prev.svg) !important;
	left: 2rem;
}
button.slick-arrow.slick-next {
	background-image: url(../assets/arrow-next.svg) !important;
	right: 2rem;
}

button.slick-arrow.slick-prev:before,
button.slick-arrow.slick-next:before {
	background-image: none;
}


a[target="_new"] {
	display: none !important;
}

/* temporanea Stefano da modificare */
input[type=button], input[type=submit] {
	background-color: #7FB525;
	border: none;
	border-radius: 50px;
	color: white;
	padding: 10px 20px;
	text-decoration: none;
	margin: 2px 2px;
	cursor: pointer;
}




/*** BANNER TRAVEL SAFE MAN ***/
/******************************/

section.ci-travelsafe-man {
	background-color: #E7E7E7;
}
section.ci-travelsafe-man.ci-full-width {
	margin: 2rem 0 3rem;
	padding-bottom: 2rem;
}


section.ci-travelsafe-man p,
section.ci-travelsafe-man strong,
section.ci-travelsafe-man h4 {
	color: var(--color-text-light);
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}
section.ci-travelsafe-man--simple p {
	font-size: 0.8rem;
	line-height: 1rem;
}

.ci-travelsafe-man:after,
.ci-travelsafe-man:before {
	content: "";
	position: absolute;
	left: 0;
	height: 50px;
	width: 100%;
	background-image: url(../assets/pennellata\ herobanner.png);
	background-size: contain;
	background-position-x: center;
	background-repeat: repeat-x;
}
.ci-travelsafe-man:after {
	bottom: 0;
	background-position-x: center;
	background-position-y: bottom;
}
.ci-travelsafe-man:before {
	top: -30px;
	background-position-x: center;
	background-position-y: top;
	-webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.ci-travelsafe-man .ci-wrapped {
	margin-bottom: 0;
	flex-direction: column;
}

.ci-travelsafe-man .ci-col.ci-col--2on3 {
	width: 100%;
}
@media screen and (min-width: 992px) {
	.ci-travelsafe-man .ci-col.ci-col--2on3 {
		width: calc(100% / 3 *2);
	}
}

.ci-travelsafe-man .ci-travelsafe-main-col,
.ci-travelsafe-man .ci-travelsafe-text-col {
	width: 100%
}
@media screen and (min-width: 772px) {
	.ci-travelsafe-man .ci-travelsafe-main-col,
	.ci-travelsafe-man .ci-travelsafe-text-col {
		width: 50%
	}
}

.ci-travelsafe-man .ci-main-col {
	padding: calc(80px + 1rem) 0 0;
	flex-direction: column;
}
.ci-travelsafe-man--simple .ci-main-col {
	padding: 3rem 0 0;
	margin: 0;
}
@media screen and (min-width: 772px) {
	.ci-travelsafe-man .ci-main-col {
		flex-direction: row;
	}
	.ci-travelsafe-man--simple .ci-main-col {
		flex-direction: column;
	}

	.ci-travelsafe-man--simple .ci-main-col {
		padding: 3rem 0 0;
	}
}


/* elenco dei punti */
.ci-travelsafe-man .ci-travelsafe-list {
	margin-top: 2rem;
	border-top: 1px var(--color-text-light) solid;
	padding-top: 1rem;
	padding-bottom: calc(80px + 1rem);
	flex-direction: column;
}
.ci-travelsafe-man--simple .ci-travelsafe-list {
	margin-top: 1rem;
	padding-bottom: 3rem;
}

.ci-travelsafe-man .ci-travelsafe-list .ci-col--1on4 {
	width: 100%;
}
@media screen and (min-width: 600px) {
	.ci-travelsafe-man .ci-travelsafe-list {
		flex-direction: row;
	}
	.ci-travelsafe-man .ci-travelsafe-list .ci-col--1on4 {
		width: 25%;
		padding-right: 1rem;
	}
	.ci-travelsafe-man .ci-travelsafe-list .ci-col--1on4:last-child {
		padding-right: 0;
	}
}


/* titolo e bottone */
.ci-travelsafe-man .ci-travelsafe-main-col p {
	font-weight: 300;
}

.ci-travelsafe-man .ci-travelsafe-title {
	text-align: left;
}
.ci-travelsafe-man--simple .ci-travelsafe-title {
	text-align: center;
}

.ci-travelsafe-man .ci-travelsafe-title h4 {
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 400;
	line-height: 3rem;
}
.ci-travelsafe-man--simple .ci-travelsafe-title h4 {
	line-height: 2.2rem;
}

.ci-travelsafe-man .ci-travelsafe-title h4 strong {
	font-size: 3.5rem;
	line-height: 3rem;
	font-weight: 900;
	letter-spacing: 2px;
	color: var(--color-secondary);
}
.ci-travelsafe-man--simple .ci-travelsafe-title h4 strong {
	font-size: 1.65rem;
	line-height: 1.8rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--color-secondary);
}
@media screen and (min-width: 600) {
	.ci-travelsafe-man--simple .ci-travelsafe-title h4 strong {
		font-size: 2rem;
		line-height: 2rem;
	}
}

.ci-travelsafe-man .ci-button {
	margin-top: 1rem;
}
.ci-travelsafe-man--simple .ci-button {
	display: block;
	margin: 1rem auto;
}

.ci-travelsafe-man--simple .ci-link-text {
	display: block;
	margin: 1rem auto;
	color: var(--color-primary);
}

.ci-travelsafe-logo small {
	display: flex;
	align-items: flex-end;
	color: var(--color-text-light);
	margin-bottom: 1rem;
}
.ci-travelsafe-man--simple .ci-travelsafe-logo small {
	justify-content: center;
}

.ci-travelsafe-logo small img {
	width: 80px;
	margin-left: .5rem;
}
@media screen and (min-width: 772px) {
	.ci-travelsafe-logo small {
		margin-bottom: 0;
	}
}


/* testo  */
.ci-travelsafe-man .ci-travelsafe-text-col {
	justify-content: center;
}

.ci-travelsafe-man .ci-travelsafe-text-col p {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 300;
}
.ci-travelsafe-man .ci-travelsafe-text-col strong {
	font-size: 2rem;
	line-height: 2.5rem;
	font-weight: 600;
	padding-top: .5rem;
	color: #222222;
}


/* immagine */
.ci-travelsafe-man .ci-travelsafe-img-col  {
	display: none;
}
@media screen and (min-width: 992px) {
	.ci-travelsafe-man .ci-travelsafe-img-col  {
		display: block;
		background-image: url('/static/assets/safe-man-circle.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}











/*** BANNER TRAVEL SAFE 2 ***/
/****************************/

/*
section.ci-travelsafe2 {
	background-color: var(--color-primary);
	padding: calc(80px + 1rem) 1rem;
}

section.ci-travelsafe2 p,
section.ci-travelsafe2 strong,
section.ci-travelsafe2 h4 {
	color: white;
}

.ci-travelsafe2:after,
.ci-travelsafe2:before {
	content: "";
	position: absolute;
	left: 0;
	height: 50px;
	width: 100%;
	background-image: url(../assets/pennellata\ herobanner.png);
	background-size: contain;
	background-position-x: center;
	background-repeat: repeat-x;
}
.ci-travelsafe2:after {
	bottom: 0;
	background-position-x: center;
	background-position-y: bottom;
}
.ci-travelsafe2:before {
	top: 0;
	background-position-x: center;
	background-position-y: top;
	-webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.ci-travelsafe2 .ci-wrapped {
	margin-bottom: 0;
}


.ci-travelsafe2 .ci-travelsafe-list {
	margin-top: 2rem;
	border-top: 1px white solid;
	padding-top: 1rem;
}

.ci-travelsafe2 .ci-travelsafe-list p {
	font-weight: 400;
}


.ci-travelsafe2 .ci-travelsafe-main-col p {
	font-weight: 300;
}

.ci-travelsafe2 .ci-travelsafe-title h4 {
	text-transform: uppercase;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: 2px;
}
.ci-travelsafe2 .ci-travelsafe-title h4 strong {
	font-size: 3rem;
	font-weight: 900;
}

.ci-travelsafe2 .ci-travelsafe-main-col a {
	margin-top: 2rem;
}


.ci-travelsafe2 .ci-travelsafe-text-col {
	justify-content: center;
}

.ci-travelsafe2 .ci-travelsafe-text-col p {
	font-size: 1.25rem;
	line-height: 2rem;
	font-weight: 300;
}
.ci-travelsafe2 .ci-travelsafe-text-col strong {
	font-size: 2rem;
	line-height: 2.85rem;
	font-weight: 600;
	padding-top: 1rem;
}


.ci-travelsafe2 .ci-travelsafe-img-col  {
	background-image: url('/static/assets/safe-man.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
*/




/*** BANNER TRAVEL SAFE ***/
/**************************/

/*

section.ci-travelsafe {
	background-color: var(--color-primary);
	padding: calc(80px + 1rem) 1rem;
}

section.ci-travelsafe p,
section.ci-travelsafe strong,
section.ci-travelsafe h4 {
	color: white;
}

.ci-travelsafe:after,
.ci-travelsafe:before {
	content: "";
	position: absolute;
	left: 0;
	height: 50px;
	width: 100%;
	background-image: url(../assets/pennellata\ herobanner.png);
	background-size: contain;
	background-position-x: center;
	background-repeat: repeat-x;
}
.ci-travelsafe:after {
	bottom: 0;
	background-position-x: center;
	background-position-y: bottom;
}
.ci-travelsafe:before {
	top: 0;
	background-position-x: center;
	background-position-y: top;
	-webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.ci-travelsafe .ci-wrapped {
	margin-bottom: 0;
}


.ci-travelsafe .ci-travelsafe-list {
	margin-top: 2rem;
	border-top: 1px white solid;
	padding-top: 1rem;
}

.ci-travelsafe .ci-travelsafe-list p {
	font-weight: 400;
}


.ci-travelsafe .ci-travelsafe-main-col p {
	font-weight: 300;
}

.ci-travelsafe .ci-travelsafe-title h4 {
	text-transform: uppercase;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: 2px;
}
.ci-travelsafe .ci-travelsafe-title h4 strong {
	font-size: 3rem;
	font-weight: 900;
}

.ci-travelsafe .ci-travelsafe-main-col a {
	margin-top: 2rem;
}


.ci-travelsafe .ci-travelsafe-text-col {
	justify-content: center;
}

.ci-travelsafe .ci-travelsafe-text-col p {
	font-size: 1.25rem;
	line-height: 2rem;
	font-weight: 300;
}
.ci-travelsafe .ci-travelsafe-text-col strong {
	font-size: 2rem;
	line-height: 2.85rem;
	font-weight: 600;
	padding-top: 1rem;
}


.ci-travelsafe .ci-travelsafe-img-col  {
	background-image: url('/static/assets/safe2021.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
*/



/*** RELAX ***/
/*************/

.ci-page-relax {
	padding-top: 2rem;
}

.ci-hero-banner--relax {
	background-color: white;
	background-image: url(../assets/relax.jpg);
	background-position-y: center;
	height: 60vh;
	margin: 0 auto 3rem;
}
.ci-hero-banner--confirm {
	background-color: white;
	background-image: url(../assets/confirm.jpg);
	background-position-y: center;
	height: 60vh;
	margin: 0 auto 3rem;
}

.ci-page-relax p {
	padding-top: 1rem;
}
.ci-page-relax a:not(.ci-button) {
	padding-top: 1rem;
	text-decoration: underline;
	color: var(--color-secondary);
	display: block;
}
.ci-page-relax a.ci-button {
	margin-top: 2rem;
	display: block;
}

.ci-page-relax ul {
	list-style: none;
}
.ci-page-relax ul li {
	color: var(--color-text-light);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 300;
}
.ci-page-relax ul li:before {
	content:  "\2713 ";
	color: var(--color-secondary);
	margin-right: 0.25rem;
	display: inline-block;
}









.ci-insurance-faq .ci-accordion-header:after {
	content: "+";
	display: inline-block;
	position: absolute;
	right: .5rem;
}

.ci-insurance-faq .ci-accordion-container + .ci-accordion-container {
	border-top: 1px #ddd solid;
}

.ci-insurance-faq .ci-title {
	margin-top: 4rem;
	margin-bottom: 1rem;
}

.ci-insurance-faq .ci-accordion {
  background-color: white;
  color: var(--color-text);
  cursor: pointer;
  padding: 1rem 0;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
	font-weight: 500;
	font-size: 1rem;
}

.ci-insurance-faq .ci-accordion-container p {
  padding-top: 0;
  padding-bottom: 1rem;
	padding-left: 0;
}

/* Style the accordion panel. Note: hidden by default */
.ci-accordion-panel {
  padding: 0;
  background-color: white;
  display: none;
  overflow: hidden;
}



/*** FORM INSURANCE ***/
/**********************/

form.ci-form-insurance {
	width: 100%;
}
@media screen and (min-width: 772px) {
	form.ci-form-insurance {
		width: 66%;
	}
}

form.ci-form-insurance .ci-form--half {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

form.ci-form-insurance label,
form.ci-form-insurance input[type="submit"] {
	position: relative;
	display: block;
	width: 100%;
}
form.ci-form-insurance .ci-form--half label {
	width: calc(50% - .5rem);
}

form.ci-form-insurance input {
	display: block;
	width: 100%;
	padding: 1rem;
	border: 1px #dddddd solid;
	border-radius: 8px;
	outline: none;
	transition: all 0.2s ease-in-out;
}
form.ci-form-insurance select {
	display: block;
	width: 100%;
	padding: 1rem;
	border: 1px #dddddd solid;
	border-radius: 8px;
	outline: none;
	transition: all 0.2s ease-in-out;
}

form.ci-form-insurance input[readonly] {
	border: none;
	background-color: #f0f0f0;
}

form.ci-form-insurance input:not([type="submit"]) {
	margin-bottom: 1rem;
	font-size: 1rem;
	color: var(--color-text-light);
	font-weight: 300;
}
form.ci-form-insurance  input[type=submit].ci-button-ghost {
	background-color: transparent;
	border: 1px var(--color-secondary) solid;
	color: var(--color-secondary);
	text-transform: none;
	width: auto;
}

form.ci-form-insurance input::placeholder {
	font-size: 1rem;
	color: #ccc;
	transition: all 0.2s ease-in-out;
}

form.ci-form-insurance input:not([type="submit"]):focus,
form.ci-form-insurance input:not([type="submit"]).populated,
form.ci-form-insurance input[type="text"]:not(:placeholder-shown) {
	padding-top: 28px;
	padding-bottom: 12px;
}

form.ci-form-insurance input:focus + span,
form.ci-form-insurance input.populated + span,
form.ci-form-insurance input[type="text"]:not(:placeholder-shown) + span {
	opacity: 1;
	top: 10px;
}

form.ci-form-insurance span {
	color: var(--color-secondary);
	font-size: 0.75rem;
	position: absolute;
	top: 0px;
	left: 1rem;
	opacity: 0;
	transition: all 0.2s ease-in-out;
}

form.ci-form-insurance hr {
	margin: 2.5rem auto 1rem;
	border-top: 1px solid #bbb;
	width: 35%;
	min-width: 200px;
}

.ci-form-error {
	border: 1px red solid !important;
}

.ci-insurance-confirm span {
	font-weight: 600;
	color: var(--color-secondary);
}
.ci-insurance-confirm span.ci-primary {
	color: var(--color-primary);
	font-size: 1.2rem
}

.ci-insurance-confirm-alert {
	background-color: #f2caca;
	border-radius: 10px;
	padding: 1rem 2rem;
	margin: 1rem 0;
	width: fit-content;
	width: intrinsic;
	color: black;
}
.ci-insurance-confirm-alert strong {
	color: black;
}

.ci-insurance-confirm-trip {
	background-color: #f0f0f0;
	border-radius: 10px;
	padding: 1rem 2rem;
	margin: 1rem 0;
	width: fit-content;
	width: intrinsic;
}
.ci-insurance-confirm-alert p,
.ci-insurance-confirm-trip p {
	padding-top: 0;
}
.ci-insurance-confirm-trip p + p {
	padding-top: 0.5rem;
}



/************************/
/*** HOMEPAGE REGIONS ***/
/************************/

.ci-regions {
	display: flex;
	flex-direction: column;
}

.ci-regions .ci-regions-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-right: -1rem;
}

.ci-regions .ci-regions-list a.ci-single-region {
	width: calc(50% - 1rem);
	margin-bottom: 5rem;
	margin-right: 1rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s linear;
}
.ci-regions .ci-regions-list a.ci-single-region:hover {
	border-radius: var(--border-radius-image);
	transition: all 0.3s linear;
	box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
@media screen and (min-width: 600px) {
	.ci-regions .ci-regions-list a.ci-single-region {
		width: calc(100%/3 - 1rem);
	}
}
@media screen and (min-width: 800px) {
	.ci-regions .ci-regions-list a.ci-single-region {
		width: calc(20% - 1rem);
	}
}
@media screen and (min-width: 900px) {
	.ci-regions .ci-regions-list a.ci-single-region {
		width: calc(20% - 1rem);
	}
}

.ci-regions .ci-regions-list .ci-single-region p {
	margin-top: .5rem;
	cursor: pointer;
	transition: all 0.3s linear;
}
.ci-regions .ci-regions-list a.ci-single-region:hover p {
	color: var(--color-secondary);
	font-weight: 600;
	transition: all 0.3s linear;
}

.ci-regions .ci-regions-list a.ci-single-region .img-cover {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: var(--border-radius-image);
}



/**********************/
/*** FOOTER REGIONS ***/
/**********************/

.ci-footer-structures {
	margin-bottom: 3rem;
}

.ci-footer-regions .ci-regions-list,
.ci-footer-structures .ci-structures-list {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
}
@media screen and (min-width: 600px) {
	.ci-footer-regions .ci-regions-list,
	.ci-footer-structures .ci-structures-list {
		justify-content: center;
	}
}

.ci-footer-regions .ci-regions-list a.ci-single-region,
.ci-footer-structures .ci-structures-list a {
	display: flex;
	width: fit-content;
}

.ci-footer-regions .ci-regions-list a.ci-single-region p,
.ci-footer-structures .ci-structures-list a {
	color: var(--color-text-light);
	text-decoration: none;
	font-weight: 300;
	line-height: 1.5rem;
	transition: var(--transition);
}

.ci-footer-regions .ci-regions-list a.ci-single-region:hover p,
.ci-footer-structures .ci-structures-list a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
	transition: var(--transition);
}

.ci-footer-regions .ci-regions-list a.ci-single-region:after,
.ci-footer-structures .ci-structures-list a:after {
	content: "-";
	display: inline-block;
	margin: 0 .4rem;
	color: var(--color-text-light);
}
.ci-footer-regions .ci-regions-list a.ci-single-region:last-child:after,
.ci-footer-structures .ci-structures-list a:last-child:after {
	content: "";
}

@media screen and (min-width: 600px) {
	.ci-footer-regions .ci-regions-list a.ci-single-region:after,
	.ci-footer-structures .ci-structures-list a:after {
		content: "";
		margin: 0;
	}

	.ci-footer-regions .ci-regions-list a.ci-single-region + a.ci-single-region:before,
	.ci-footer-structures .ci-structures-list a + a:before {
		content: "•";
		margin: 0 .75rem;
		color: var(--color-text-light);
		display: inline-block;
	}
}
@media screen and (min-width: 992px) {
	.ci-footer-regions .ci-regions-list a.ci-single-region + a.ci-single-region:before,
	.ci-footer-structures .ci-structures-list a + a:before {
		margin: 0 1rem;
	}
}



/**************/
/*** NATALE ***/
/**************/

img.ci-natale {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	height: intrinsic;
}

img.ci-natale.ci-natale--desktop {
	display: none;
}
img.ci-natale.ci-natale--mobile {
	display: block;
}

@media screen and (min-width: 772px) {
	img.ci-natale.ci-natale--desktop {
		display: block;
	}
	img.ci-natale.ci-natale--mobile {
		display: none;
	}
}




/*** CI SELECT solo checkbox ***/
/*******************************/

.ci-select label {
	display: flex;
	align-content: center;
}

.ci-select label input {
	margin-right: .5rem;
}

.ci-select label strong {
	color: var(--color-secondary);
	font-size: 1rem;
}



/*** LINK TESTUALI SOTTO AL FORM DI RICERCA ***/
/**********************************************/

.search-text-link {
	display: none;
}
@media screen and (min-width: 772px) {
	.search-text-link {
		display: block;
		margin-top: 1rem;
		text-align: center;
	}

	.search-text-link a {
		color: white;
	}
	.search-text-link a + a {
		margin-left: 1rem;
	}
}




.ci-title + .ci-no-dispo {
	margin-top: 0;
}

.ci-no-dispo h3 {
	color: var(--color-text-light);
	font-weight: 500;
	font-size: 1.5rem;
	margin-top: 3rem;
}
.ci-no-dispo p {
	color: var(--color-text-light);
	font-weight: 300;
	margin-bottom: 2rem;
}




/*** FORM CONTATTI ***/
/*********************/

#ci-contact-form {
	display: flex;
	flex-direction: column;
}

.ci-form-item {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}

.form-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.form-row .ci-form-item {
	width: calc(50% - 1rem);
}
@media screen and (max-width: 599px) {
	.form-row .ci-form-item {
		width: 100%;
	}
}

.ci-form-item + .ci-form-item,
#ci-age-box + .ci-form-item,
.form-row + .ci-form-item,
.ci-form-item + .form-row,
.form-row + .form-row {
	margin-top: 1.5rem;
}

.form-row .ci-form-item {
	margin-top: 0 !important;
}
@media screen and (max-width: 599px) {
	.form-row .ci-form-item + .ci-form-item {
		margin-top: 1.5rem !important;
	}
}

.ci-form-item + .ci-form-item.ci-floating {
	margin-top: 2.5rem;
}

.ci-form-item input,
.ci-form-item textarea {
	font-family: 'Lato';
	padding: 0.75rem 1.25rem;
	width: 100%;
	border: solid 1px #ddd;
	border-radius: 6px;
}

.ci-form-item input::placeholder,
.ci-form-item textarea::placeholder {
	font-family: 'Lato';
	font-weight: 300;
}

.ci-form-item label {
	font-size: .85rem;
}

.ci-form-item.ci-floating label {
	display: none;
	position: absolute;
	top: -22px;
	animation: zoomLabel 0.5s;
}

.ci-form-item.ci-floating label.active {
	display: block;
}

@keyframes zoomLabel {
	from {
		font-size: 0;
	}

	to {
		font-size: .85rem;
	}
}



/** input number **/

.ci-input-number {
	display: flex;
}

.ci-input-number input,
.ci-input-number .btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 40px;
	line-height: 40px;
	padding: 0;
	margin: 0;
	border: 0px;
	outline: 0;
}

.ci-input-number input {
	font-size: 1rem;
	font-weight: 700;
	z-index: 1;
	border: solid 1px #ddd;
	border-radius: 0;
}
.ci-input-number input:focus {
	outline: 0;
	box-shadow: 0px;
}

.ci-input-number .btn {
	width: 40px;
	font-size: 18px;
	cursor: pointer;
	user-select: none;
	transition: all 250ms ease;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	background-color: #f9f9f9;
}

.ci-input-number .btn.btn-add {
	border-right: solid 1px #ddd;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.ci-input-number .btn.btn-min {
	border-left: solid 1px #ddd;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.ci-input-number .btn.disabled {
	cursor: default;
	opacity: .3;
}

input[type="number"].ci-number::-webkit-outer-spin-button,
input[type="number"].ci-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/** age box **/
#ci-age-box {
	padding: 1.5rem 1.25rem;
	width: 100%;
	border: solid 1px #ddd;
	border-radius: 6px;
	margin-top: 1rem;
	display: none;
}

#ci-age-box.show {
	display: block;
}



/** toggle **/

.container-onoff {
	display: flex;
	align-items: center;
}

.container-onoff input[type=checkbox] {
	height: 0;
	width: 0;
	visibility: hidden;
}

.container-onoff label {
	cursor: pointer;
	text-indent: -9999px;
	width: calc(15px * 3);
	height: calc(15px + 10px);
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

.container-onoff label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

.container-onoff input:checked+label {
	background: green;
}

.container-onoff input:checked+label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

.container-onoff label:active:after {
	width: 10px;
}



#panel-right {
	width: 100%;
	max-width: 500px;
	position: fixed;
	bottom: 0;
	right: 0;
	overflow: scroll;
	height: calc(100vh - 70px);
	z-index: 200;
	display: none;
}
#panel-right.show {
	display: block;
	-webkit-animation: fadein .5s;
	-moz-animation: fadein .5s;
	-ms-animation: fadein .5s;
	-o-animation: fadein .5s;
	animation: fadein .5s;
}
	
@keyframes fadein {
	from	{ opacity: 0;	}
	to 		{ opacity: 1;	}
}

@media screen and (max-width: 771px) {
	#panel-right {
		width: 100%;
		max-width: 100%;
	}
}


#panel-right #panel-cover {
	background: rgba(0, 0, 0, 0.75);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	z-index: 100;
}

#panel-right .ci-col {
	z-index: 400;
	background: white;
	padding: 40px 20px 30px;
	-webkit-animation: comingFromRight .5s;
	-moz-animation: comingFromRight .5s;
	-ms-animation: comingFromRight .5s;
	-o-animation: comingFromRight .5s;
	animation: comingFromRight .5s;
	height: 100%;
	overflow: scroll;
}

@keyframes comingFromRight {
	0%		{ right: -100%;	}
	100%	{ right: 0;		}
}

#panel-right form {
	width: 100%;
}

#panel-right form .ci-select a {
	color: var(--color-secondary);
}

#panel-right form button {
	margin-top: 2rem;
}

#panel-col-form.hide 		{ display: none; }
#panel-col-feedback.hide 	{ display: none; }

#panel-col-feedback #panel-close2 {
	margin-top: 2rem;
}