@CHARSET "UTF-8";

/* Abel's layout consists of 12 columns of 6.925vw in width, with margins of 1.3vw between and to the sides */

html {
	font-size: 0.9vw;
}

body {
	height: 56.24vw;
	overflow: hidden;
}

.main {
	transition-duration: 2s;
	opacity: 0;
	
	padding: 1.3% 0 0 1.3%;
	height: 100%;
	background-color: #e6ecef;
}

.main > .row {
	padding: 0;
	margin: 0;
	height: 100%;
}

.main > .row > .col-auto { /* avoid specifying all col-* classes */
	padding-left: 1.3vw;
	padding-right: 0;
	height: 100%;
}

.main > .row > .col-auto.left {
	padding-left: 0;
	width: 64.5vw;
}

.main > .row > .col-auto.right {
	width: 32.9vw;
}

.left-cell {
	height: 50%;
	height: calc(26.17vw);
}

.left-cell:first-of-type {
	border-bottom: 1px solid black;
}

.review-cell {
	height: 65.958%;
	height: calc(37.24vw);
	width: 100%;
}

.review-cell .icon-review-cell-header {
	font-size: 1.3rem;
	top: -0.15rem;
	position: relative;
	color: #367BAB;
}

.send-cell {
	height: 29.31%;
	height: calc(15.1vw);
	width: 100%;
}

.left-cell, .review-cell, .send-cell {
	padding:1.3vw;
}

.left-cell:first-of-type, .review-cell {
	margin-bottom: calc(1.3vw);
	
}

.review-cell, .send-cell {
	border: 1px solid #367BAB;
	overflow: hidden;
	background-color: white;
}

.left-cell h2 {
	margin-left: 6.925vw;
}

#popOver {
	border-top-left-radius: 0.8rem;
	border-top-right-radius: 0.8rem;
	position: absolute;
	width: 100%;
	height: calc(100% - 1.3vw);
	background-color: #e6ecef;
	top: 0;
	display: none;
}

#popOver > div {
	height: 100%;
}

#popOver > .prev,
#popOver > .next {
	width: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

#popOver > .prev {
	float: left;
	padding-right: 1.3vw;
}

#popOver > .next {
	float: right;
	padding-left: 1.3vw;
}

#popOver > .prev a::before {
	content: '←';
}

#popOver > .next a::before {
	content: '→';
}

#popOver > .prev a,
#popOver > .next a {
	color: #367BAB;
	font-family: fribourg-exp;
	opacity: 1;
	font-size: 4rem;
	text-decoration: none;
	outline: none;
}

#popOver > .content > .cover-image {
	height: calc(26.7vw + 2.7vw) !important;
	background-color: silver;
	position: relative;
}

.bubble-slider {
	position: absolute;
	bottom: 0 !important;
	width: 100%;
	height: 2.7vw;
	display: flex;
	justify-content:  stretch;
}

.bubble-slider > div {
	height: 100%;
}

.bubble-slider > div:first-child {
	background-color: white;
	width: 64%;
}

.bubble-slider > div:last-child {
	border-style: solid;
	border-width: 0 0 2.7vw 2.7vw;
	border-color: white transparent;
	flex-grow: 1;
}

#popOver > .content {
	margin: 0 10%;
	width: 80%;
}

#popOver > .content > .description {
	padding: 1.3vw;
	height: calc(100% - 29.4vw); /* 26.7vw + 2.7vw */
	background-color: white;
}

#popOver > .content > .description > .row > .col-auto:first-child {
	width: 69%;
	border-right: 1px solid black;
}

#popOver > .content > .description > .row > .col-auto:last-child {
	width: 31%;
}

#popOver > .content > .description > .row {
	height: 100%;
}

.introduction {
	font-family: museosans-500;
	font-size: 1.2rem;
	display: flex;
	text-transform: uppercase;
	line-height: 1.2;
}

.infos {
	padding-top: 2.8rem; /* 1.8rem is title height (font-size: 1.2rem * line-height 1.5) and 1rem is margin-bottom */
}

.infos-title {
	font-family: museo-700;
	font-size: 1.2rem;
	position: absolute;
	top: 0;
}

.infos-text {
	height: 100%;
	overflow-y: auto;
}

.infos-floating-buttons {
	text-align: right;
	font-size: 3.5rem;
	line-height: 1;
	padding-top: 0.7rem;
}

.infos-floating-buttons > .icon {
	color: #367BAB;
}

/* fall-back for older browsers */
.fallback-spacing {
    height: 2.3%;
    height: calc(0px);
}

.slick-prev {
	margin-left: calc(-6.925vw / 2);
}

.slick-next {
	margin-right: calc(-6.925vw / 2);
}

.slick-prev::before, .slick-next::before {
	color: #367BAB;
}

.suggestions-container {
	
	width: 80%;
	margin: 3rem auto;
	font-size: 1em;
	height: 74%;
	width: 49.35vw;
}

.suggestions-container > .slick-list, 
.suggestions-container > .slick-list > .slick-track {
	height: 100%;
}

.suggestion {
	height:100%;
	margin-right: .65rem;
	margin-left: .65rem;
	overflow: hidden;
	position: relative;
	width: 15.15vw;
}

.cover-image {
	border-top-left-radius: 0.8rem;
	border-top-right-radius: 0.8rem;
	height: 50% !important;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.suggestion-description {
	height: 50% !important;
	padding: 0.5rem 0.5rem 0 0.5rem;
	background-color: white;
}

.pull-down-badge {
	float: right;
	width: 0;
	height: calc(100% - 3.5rem);
}

.floating-badge {
	clear: right;
	float: right;
	font-size: 3rem;
	line-height: 1;
	height: 3.5rem;
}

.floating-badge > .icon {
	color: #367BAB;
	padding-left: .5rem;
}

.floating-badge > .icon:focus {
	outline: none;
}

.subtitle {
	font-size: 1.2rem;
	margin-top: -1rem;
	display: flex;
	margin-bottom: 2rem;
}

.activity-wrapper {
	padding-top: .5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid black;
}

.activity-wrapper:first-of-type {
	border-top: 1px solid black;
}

.activity > .col:FIRST-OF-TYPE {
	padding-top: .2rem;
	padding-bottom: .2rem;
	padding-right: 0;
	width: calc(100% - 6vw);
}

.activity > .col:FIRST-OF-TYPE h5 {
	text-overflow: ellipsis;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 0;
}

.activity > .col:LAST-OF-TYPE {
	text-align: center;
	font-size: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0.8;
}

.activity .icon-del {
	color: #367BAB;
}

.form-group {
    margin-bottom: 1.3vw;
}

.form-control {
	font-size: 1.2vw;
	border-radius: 0;
	border-color:  #599DC4;
	color: #FFFFFF;
	background-color: #599DC4;
}

.form-control::placeholder {
	color: #FFFFFF;
}

.form-control:focus {
	/*background-color: #367BAB;*/
	border-color: #000000;
	/*color: #FFFFFF;*/
}

.form-control:focus::placeholder {
	color: darkgray;
}

.btn-sm {
	font-size: 1rem;
}

.btn-primary {
	min-width: 12rem;
}

#keyboard-space {
	display: none;
	width: 100%;
	height: 30%;
	background-color: #e6ecef;
}

input[type="checkbox"].form-control {
	height: 2em;
	width: 2em;
	display: inline;
	vertical-align: text-top;
}

.terms-accepted > div:first-of-type {
	float: left;
}

.terms-accepted > div:last-of-type {
	padding-left: 4em;
	line-height: 1
}