/* ===================================================
	FONTS LOADING
   ===================================================	*/
	
@font-face {
   font-family: 'AubreyPro';
   src: url('fonts/AubreyPro.eot');
   src: url('fonts/AubreyPro.woff') format('woff'),
      	url('fonts/AubreyPro.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: 'Angst-50';
   src: url('fonts/Angst-50.woff2') format('woff2'),
      	url('fonts/Angst-50.otf') format('truetype');
   font-weight: 50;
   font-style: normal;
}

@font-face {
   font-family: 'Gropled-Bold';
   src: url('fonts/Gropled-Bold.woff') format('woff'),
      	url('fonts/Gropled-Bold.otf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');

/* ===================================================
	CONSTANTS DEFINING
   ===================================================	*/
:root {
	--display-font: 'Gropled-Bold';	
	--basic-font: sans-serif;
}

/* ===================================================
	AUXILARY CLASSES
   ===================================================	*/
   
.invisible {display: none !important;}
.desktopOnly { display: block; }
.mobileOnly {display: none;}

.inplace, .noframe {
	border-radius: 5px;
	border: 1px solid transparent;
	background-color: transparent;
}

.editing {
	border-radius: 5px;
	border: 1px solid #0070d6;
	background-color: white !important;
}

select.inplace {
	color: #0070d6;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}


body {
	font-family: 'FiraSans';
	overflow-y: visible;
	overflow-x: hidden;
}

h1, p {
	color: #322f2f;
}

.title {
	background: linear-gradient(to bottom, #300000 0%, #65030a 100%);
	height: 95vh;
}

.logo-container {
	width: 100%;
	padding: 10pt 10pt 20pt 10pt;
	position: relative;
	display: flex; align-items: center;
}

.logo-container div {
	display: inline-block;
}


.logo-container img {
	max-width: 30%;
}

.add-hero {
	display: inline-block;
	position: absolute;
	right: 10pt;
	white-space: nowrap;
	color: white;
	border-bottom: 1px dotted;
	text-decoration: none;
	height: 1em;
	line-height: 1.05em;
	text-align: right;	
}

.title-image-container {
	height: 70%; 
	margin:0;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
}


.carousel-inner {
	text-align: center;
}

.carousel-item {
	height: 100%;
}

.carousel-item img, .carousel-item canvas {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

#solo-item-0 canvas {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
}

.carousel-indicators button {
	height: 6pt !important;
	width: 6pt !important;
	border-radius: 3pt !important;
}

.strut {
	height: 15vw; 
	width: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(to bottom, #fce0ca 0%, #fdf1e7 100%);
}

.upload {
	background: linear-gradient(to bottom, #fdf1e7 0%, #ffffff 50%);
	min-height: 50vh;
	padding: 0 5vw 10vh 5vw;
}

.faded-biege-background {
	background: linear-gradient(to bottom, #fdf1e7 0, #ffffff 200px);
}

#gb {
	padding: 0;
	z-index: 2000;
	position: relative;
	height: auto;
	transform: translate(0, -10vw);
}


#gb img {
	display: block;
	width: 110%;
	height: auto;
	margin: 0; padding: 0;
	position: absolute;
	top: 0;
}

.add-hero-box {
	min-height: 60vh;
	position: relative;
}

.image-upload-section {
	border: 2px solid rgba(103, 3, 10, 0.1);
	border-radius: 10pt;
	height: 60%;
	text-align: center;
	margin: 0pt 20pt 0pt 0pt;
	cursor: pointer;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
}

.image-upload-section + input[type="file"] {
	display: none;
}

.image-upload-section-draggin {
	border: 2px dashed #65030a;
	cursor: -webkit-grabbing;
} 

.image-upload-section i, .image-upload-section .image-upload-section-image-container {
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	font-size: 40pt;
	padding: 10pt;
	color: rgba(103, 3, 10, 0.5);

}

.image-upload-section span.description {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: large;
	color: rgba(103, 3, 10, 0.5);
}

#imagePreview {
	max-height: 90%;
	max-width: 100%;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	display: block;
	text-align: center;
	border: 10px solid white;
	outline: 1px solid gray;
	position: absolute;
	top:50%; left: 50%;
	transform: translate(-50%, -55%);
}

#imageFinalPreview, .hero-photo {
	max-height: 70%;
	max-width: 100%;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	border: 10px solid white;
	outline: 1px solid gray;
}

.button-panel {
	position: absolute;
	width: 100%;
	height: 10%;
	bottom: 0;
	text-align: center;
	padding-top: 10pt;
}


.upload button {
	background: linear-gradient(to bottom, #300000 0%, #65030a 30%, #300000 100%);
	color: white;
	padding: 10pt 20pt 6pt 20pt;
	border: 1px solid white;
	border-radius: 5pt;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.upload button:disabled, .upload button[disabled] {
	background: none !important;
	cursor: not-allowed;
	border: 1px solid gray;
	color: gray;
	opacity: 0.5;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 10pt 20pt 6pt 20pt;
	border: 1px solid gray;
	border-radius: 5pt;
}

.button-back, .button-cancel {
	background: none;
	background-color: transparent;
	border: 1px solid #300000;
	color: #300000;
	padding: 10pt 10pt 6pt 10pt;
	margin-right: 20pt;
}
.button-crop, .button-save {
	padding-left: 20pt;
	padding-right: 20pt;
}



input[type="text"], input[type="email"] {
	padding-left: 10pt !important;
}

.contact-description {
	padding-top: 20pt;
	color: #300000;
	opacity: 0.5;
	line-height: 1.5;
	font-size: smaller;
}

.agreement {
	padding-top: 30pt;
	padding-bottom: 20pt;
}

#logout {
	display: inline-block;
	z-index: 3000;
	padding: 0.2em 2em;
	position: fixed;
	top: 0;
	right: 1%;
	background-color: rgba(255, 255, 255, .8);
	color: black;
	font-size: 1em;
	border: 1px solid #999;
	border-bottom-left-radius:  1em;
	border-bottom-right-radius: 1em;
}

.content div.rowhovered:hover {
	background-color: rgba(200, 200, 200, 0.1);
}

.content div.row .bi-trash3 {
	display: none;
	cursor: pointer;
	padding: 7pt 0pt 0pt 10pt;
	color: black;
}

.content div.rowhovered:hover .bi-trash3  {
	display: inline-block;
}

.inplace, .inplace2field, .noframe, .inplace-no-field {
	border-radius: 5px;
	border: 1px solid transparent;
	background-color: transparent;
}
.content div.rowhovered i {
	display: inline-block;
	padding-top: 8pt;
	cursor: pointer;
}


.footer {
	border: none;
	border-top: 8px solid rgb(var(--article-color));
	margin: 3em auto;
	padding-top: 2em;
}

.footer a {
	display: inline-block;
	font-variant: small-caps;
	color: #bbb;
	text-decoration: none;
	margin: 1em auto;
	position: relative;
	font-size: smaller
}

.footer a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ddd;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.footer a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.bi-key {
	display: inline-block;
	cursor: pointer;
	opacity: 0.3;
	font-size: 1em;
	padding-top: 1em;
}

.image-downloaded:after, .badge-printed:after,  .sticker-downloaded:after {
	content: " ";
	font-size: 4pt;
	color: white;
	background-color: #0aaa00;
	border-radius: 3pt;
	display: inline-block;
	width: 10pt;
	height: 10pt;
	padding: 1pt 2pt;
	position: relative;
	left: 2pt;
	top: 4pt;
	overflow: visible;
	width: 6pt;
	height: 6pt;
	margin-left: -6pt;	
 }
 
 .badge-printed:after {
	background-color: #ff9a00;
 }
 

#image-container {
	position: fixed;
	width: 60%;
	height: 100%;
	right: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 2000;
	overflow: hidden;
}

#image-container .img-wrapper {
	width: 90%;
	height: 80%;
	border: 4px dashed transparent;
	border-radius: 10pt;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin: 5%;
}

.img-wrapper-drag-over {
	border: 4px dashed rgba(255, 255, 255, 0.5) !important;
	cursor: -webkit-grabbing;
}


#image-container .img-wrapper img{
	max-height: 95%;
	max-width: 95%;
	border: 10px solid white;
	outline: 1px solid gray;
}

#image-container .toolpan {
	height: 10%;
	width: 100%;
	vertical-align: top;
}

#image-container .toolpan i {
	display: inline-block;
	width: 15%;
	height: 100%;
	color: white;
	cursor: pointer;
	margin: 0;
	font-size: x-large;
	text-align: center;
	padding-top: 7pt;
	font-weight: bold;
	vertical-align: top;
}

#image-container #crop-tool-panel {
	display: none;
}

#image-container .toolpan i:first-child {
	width: 60%;
	font-size: small;
	text-align: left;
	font-weight: 100;
	padding: 5pt 7pt 0 20pt;
}



.mark {
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
	border-radius: 0.8em 0.3em;
	background: transparent;
	background-image: linear-gradient(to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-left: none !important;
}

.hero-list {
	padding-top: 180pt; 
	padding-bottom: 100pt;
}

.rowhovered {
	padding-left: 10pt;
	border-left: 10px solid white;
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.selected {
	border-left: 10px solid #bcdfff;
}

.selected-red {
	border-left: 10px solid #810024 !important;
}



.tools {
	border-radius: 10px 0px 0px 10px;
	background-color: #ffe6aa;
	padding: 2pt;
	margin-left: 40pt;
	display: flex;
	align-items: flex-start;
	align-content: flex-start;	
}

.tools span {
	display: inline-block;
	color: #8f6721;
	font-size: xx-small;
	cursor: pointer;
	text-align: center;
	width: 70pt;
	height: 50pt;
	padding: 5pt 2pt;
	border-radius: 2pt;
	position: relative;
}

.tools span i {
	display: block;
	width: 70pt;
	font-size: 28pt;
	text-align: center;
}

.tools span i.smaller-icon {
	font-size: 24pt;
	margin-top: 0.5pt;
	padding-bottom: 3pt;
}

.tools span i.add-icon {
	position: absolute;
	font-size: large;
	width: 12pt;
	height: 12pt;
	left: 38pt;
	top: 20pt;
	overflow: visible;
	background-color: #ffe6aa;
	padding: 2pt;
}

.new-group {
	margin-left: 40pt;
}

.pressed {
	background-color: #db9c07 !important;
	color: white !important;
}

.disabled {
	color: gray;
	opacity: 0.3;
	cursor: not-allowed !important;
}


.hero-card {
	border: 1px solid #390404;
	text-align: center;
	margin: 5pt;
	background: linear-gradient(to bottom, #300000 0%, #65030a 100%);
	color: white;
	cursor: pointer;
}

.hero-card .img-wrapper {
	height: 220px;
	text-align: center;
	position: relative;
	padding: 10pt;
}


.hero-card .img-wrapper img{
	display: block;
	max-width: 92%;
	max-height: 92%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid white;
	
}

.hero-card span {
	display: block;
	height: 24pt;
}

.hero-card span.card-lastname {
	font-size: 12pt;
	font-weight: 600;
}

.hero-card span.card-firstname {
	font-size: 10pt;
	font-weight: 400;
}

.hero-card span.card-years {
	font-size: 8pt;
	font-style: italic;
	font-weight: 100;
	height: 32pt;
}

.marker_point {
	display: inline-block;
	width: 0;
	padding: 0;
	margin: 0;
}

.found {
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
    margin-left: 20pt;
    border: 1px solid transparent;
    padding: 2pt;
    border-radius: 2pt;
    white-space: nowrap;
}

.found:hover {
	border: 1px solid rgba(102, 3, 3, 0.59);
}

.found img {
	max-width: 40pt; 
	max-height: 40pt;
	border: 2px solid white;
	outline: 1px solid silver;
}

#similar {
	position: relative;
	overflow-x: hidden;
}

#similar .bi-x-square-fill {
	position: absolute;
	top: 0;
	right: 10pt;
	z-index: 2000;
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;	
    opacity: .5;
}

/* ===================================================
	XL
===================================================	*/
@media only screen and (max-width: 1400px) {

}

/* ===================================================
	LG
===================================================	*/
@media only screen and (max-width: 1200px) {

}

/* ===================================================
	MD
===================================================	*/
@media only screen and (max-width: 992px) {

}

/* ===================================================
	SM
===================================================	*/
@media only screen and (max-width: 768px) {
	.desktopOnly { display: none; } .mobileOnly {display: block;}
	.title {height: 86vh;}
	.hero-card { color: #390404; text-align: left; background: none; border: none;}
	.hero-card span { display: inline; padding-right: 3pt;}
	.hero-card span.card-lastname {font-size: 1em;}
	.hero-card span.card-firstname {font-size: 1em;}
	.hero-card span.card-years {display: none;}

}

/* ===================================================
	XS
===================================================	*/
@media only screen and (max-width: 576px) {
	.desktopOnly { display: none; } .mobileOnly {display: block;}
	.title {height: 70vh;}
	.logo-container img {max-width: 40%; max-height: none;}
	#gb img {width: 200%;}
	.strut {heigh: 20vh;}
	.carousel-item img, .carousel-item canvas, #solo-item-0 canvas {margin-top: 40pt;}
}


@media only screen {
	.no-screen, .printOnly { display: none !important; }
}

@media only print {
	.no-print, .screenOnly { display: none !important; }
	.hero-list {padding-top: 10pt;}
	.rowhovered {padding: 0; font-size: 11pt;}
	.faded-biege-background {background: none;}
	.strut {display: none;}
}