html, body {
	font-family: 'Meister', sans-serif;
  /*color: #ece4c8;*/
	color: #e9e3c7;
	background-color: rgb(5,13,5);
	height: 100%;
}

/*
*
* ==========================================
* MODAL STYLE
* ==========================================
*
*/

/*
.modal-dialog {
	top: 50% !important;
	transform: translateY(-50%) !important;
}
*/

.modal-header,
.modal-body {
	padding: 0;
}

.modal-header {
	background-image: url('../img/content_background.png');
	background-size: cover;
}
.modal-header .close {
  color: inherit;
  font-size: 0.7rem;
  padding: 1rem;
  margin: 0;
  text-shadow: none;
}

.modal-content {
	border-color: transparent;
	border-radius: 1rem;
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.fullscreen-bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

.position-absolute {
  position: absolute !important;
}

.position-relative {
  position: relative !important;
}

.top-0 {
	top: 0;
}

.left-0 {
	left: 0;
}

.overflow-hidden {
	overflow: hidden;
}

.fit-cover {
  object-fit: cover !important;
}

.page1-content {
  height: 85%; /* You must set a specified height */
  max-width: 370px;

  background-image: url(../img/content_background_merged.png); /* The image used */
  background-color: transparent; /* Used if the image is unavailable */
  background-position: bottom; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%; /* Resize the background image to cover the entire container */
  padding: 65px;



}

img.cerb {
  width: 50%;
  max-width: 130px;
  position: absolute;
  top: 1rem;
  left: 0;
  margin-left: 50%;
  transform: translate(-50%, 0%);
}

.page1-content img.under-title {
  width: 60%;
}

.curba-orange {
  height: 80% !important; 
  margin-bottom: 12rem; 
  opacity: 0.6;
}

.page5-content-image {
  background-color: transparent; /* Used if the image is unavailable */
  background-position: bottom; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%; /* Resize the background image to cover the entire container */
  bottom: 0; 
  filter: blur(14px);
  object-fit: cover;
}

.page6-content {
	/* background-image: url(../img/art_orange_glow_merged.png); */
	/* background-size: 117vw 100vh; */
	/* background-position: center center; */
	/* background-repeat: no-repeat;  */
	width: 100%;
	height: 100%;
	position: absolute;
}

.page6-glow {
  box-shadow: 0px 0px 20px 4px #dd5a12;
}

.page7-content {
  height: auto; /* You must set a specified height */
  max-height: 98vh; 
  max-width: 340px; /*280px*/
  /*margin-top: 2.5rem;*/

  background-image: url(../img/content_background_merged.png); /* The image used */
  background-color: transparent; /* Used if the image is unavailable */
  background-position: bottom; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%; /* Resize the background image to cover the entire container */

  font-size: 0.7rem; 
  line-height: 1; 
  padding: 3.5rem; /*2.5rem*/
  position: relative;
  top: 2rem; /*2.5rem*/
}
.page7-content img.under-title {
  width: 60%;
  z-index: 15;
  position: relative;
  margin-top: -1.35rem;
}
.page7-title {
  margin-top: 4rem !important;
}
.page7-title > h3 {
	position: relative;
	z-index: 16;
}

.page7-top-pic {
  width: 85px; 
  height: 151px; 
  top: 1vh; 
  left: 50%; /*23vw*/ 
  border: 1px solid black; 
  border-radius: 5px;
  transform: translate(-50%, 0%);
}

.page8-content {
  height: 100%; /* You must set a specified height */
  max-width: 375px;

  background-image: url(../img/final_background_merged.png); /* The image used */
  background-color: transparent; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%; /* Resize the background image to cover the entire container */
  padding: 10px 0px 10px 20px;
  font-size: 0.6rem;
}

.glow {
	box-shadow: 0px 0px 5px 0px #dd5a12;
}

.display-5 {
	font-size: 0.8rem;
}


.display-6 {
	font-weight: 600;
	line-height: 0.9;
}







input.toggle1 {
  -webkit-appearance: none;
  position: relative;
  width: 55px;
  height: 31px;
  background-image: url(../img/toggle_background.png);
  background-size: cover;
  border-radius: 25px;
  outline: none;
  transition: background-image .40s;
  /*box-shadow: 0px 2px 5px 1px gray;*/
}

input.toggle1:before {
  content: "";
  position: absolute;
  top: 25%;
  left: 17%;
  height: 50%;
  width: 29%;
  background-color: navy;
  border-radius: 25px;
  transition: all .4s;
  background-color: #DD5A12;
}

input.toggle1:checked {
  /*background-image: url(../img/toggle_background_off.png);*/
  /*transition: background-image .90s;*/

}

input.toggle1:checked:before {
  transform: translate(130%);
  transition: all .4s;
  background-color: #618C03;
}



input.text1, select.text1 {
  -webkit-appearance: none;
  position: relative;
  width: 100% !important;
  background-image: url(../img/form_field_inner.png) !important;
  background-size: cover !important;
  outline: none;
  border-width: 6px !important; 
  border-image: url(../img/form_field_background.png) 20 !important;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
  color: #90AF7B;
}


.font-0-6 {
	font-size: 0.6rem;
}

.padding-30-10 {
	padding: 30px 30px 30px 10px;
}


.btn-next.inactive {
	background-image: url('../img/next_button_inactive.png');
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 20px;
	font-size: 10px;
	font-weight: bold;
	opacity: 1 !important;
}

.btn-next.active {
	background-image: url('../img/next_button_active.png');
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 20px;
	font-size: 10px;
	font-weight: bold;
	opacity: 1 !important;
}

.btn-back.active {
	background-image: url('../img/back_button_active.png');
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 20px;
	font-size: 10px;
	font-weight: bold;
	opacity: 1 !important;
}


.wrapper2 {
	height: 100%; /* You must set a specified height */

  background-image: url(../img/content_background.png); /* The image used */
  background-color: transparent; /* Used if the image is unavailable */
  background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  /*background-size: 100% 100%;  */

  border-image: url(../img/camera_bottom_background_line.png) 100% 0 0 0 / 2px 0 0 0 repeat;
}

.band1 {
	position: absolute; 
	top: calc(100vh - 210px); !important;
	overflow: hidden; 
	pointer-events: none;
}

.band2 {
	position: absolute; 
	top: calc(100vh - 96px); !important; 
	overflow: hidden;
}

.band11 {
	position: absolute; 
	bottom: 105px !important;
	overflow: hidden; 
	pointer-events: none;
	z-index: 2001;
}

.band12 {
	position: absolute; 
	bottom: 0 !important; 
	overflow: hidden;
	z-index: 2001;
}

.carousel-caption {
	right: 0;
	left: 0;
	bottom: 0;
	text-align: left;
	color: inherit;
	height: 100%;
}


.person-face {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%,-50%); 
	max-width: 100%; 
	height: auto; 
	overflow: hidden; 
	pointer-events: none;
	z-index: 2000;
}



#carouselControls2 {
  position: fixed;
  height: 100%;
  min-height: -webkit-fill-available;
  width: 100%;
  overflow: hidden;
}

#carouselControls2 .carousel-inner,
#carouselControls2 .carousel-item {
	height: 100%;
}







.btn-camera {
	background-image: url('../img/camera_button.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 30px;
	font-size: 0.5rem;
	font-weight: bold;
	opacity: 1 !important;
}




#camera,
#camera-view,
#camera-sensor,
#camera-output {
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: stroke;
}

#camera-output {
  display: none;
}

#camera-view,
#camera-sensor,
#camera-output {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  /*filter: FlipH;*/
}
	  
.taken2 {
  height: 100px !important;
  width: 100px !important;
  transition: all 0.5s ease-in;
  border: solid 3px white;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  top: 20px;
  right: 20px;
  z-index: 2;
  user-select: none;
}

.center-cropped {
	position:absolute;
	width:100%;
	height:100%;
  	/*background: url('../img/silueta2.png') no-repeat center center ;*/
  	background-size: cover;
	pointer-events: none;
}

.custom-top-border {
	border: solid 4px #dd5a12;
	border-bottom:0;
	border-left:0;
	border-right:0;
}

.counter {
	position:absolute;
	width:100%;
	height:100%;
  	background-color: transparent;
	pointer-events: none;
	font-size: 25rem;
}

.flash {
	position:absolute;
	width:100%;
	height:100%;
  	background-color: white;
	z-index: 99999;
}


@media (min-width:400px) and (max-width:375px) {
    .foo {
        display:none;
    }
}​



/* For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini */
/* 1080×2340 pixels at 476ppi */
@media only screen 
    and (max-width: 390px)
    /*and (height: 667px) */
    /*and (-webkit-device-pixel-ratio: 2)*/ { 
	
	.display-5 {
	  font-size: 0.6rem !important;
	  line-height: 1.3 !important;
	}
	.page1-content {
	  max-height: 540px !important;
	}
	#pdfviewer {
	  /*max-height: 550px !important;*/
	}
	.page7-content {
	  top: 3rem; /*5rem*/
	  line-height: 1;
	  max-height: 650px !important;
	}
	.page7-top-pic {
	  width: 63px;
	  height: 113px;
	  top: 1vh;
	  left: 50%; /*23vw*/
	  border: 1px solid black; 
	  border-radius: 5px;
	  transform: translate(-50%, 0%);
	}
	.page7-title {
	  margin-top: 3.5rem !important;
	}
}

/* For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini */
/* 1080×2340 pixels at 476ppi */
@media only screen 
    and (max-width: 375px)
    /*and (height: 667px) */
    /*and (-webkit-device-pixel-ratio: 2)*/ { 
	html, body {
		overflow: scroll !important;
	}
	.container-fluid {
		margin-top: 0 !important;
	}
	.display-5 {
	  font-size: 0.6rem !important;
	  line-height: 1.3 !important;
	}
	.page1-content {
	  max-height: 540px !important;
	  height: auto !important;
	}
	.curba-orange {
	  margin-bottom: 6rem; 
	}
	#pdfviewer {
	  /*max-height: 550px !important;*/
	}
	.page7-content {
	  top: 3rem; /*5rem*/
	  line-height: 1;
	  max-height: 650px !important;
	}
	.page7-top-pic {
	  width: 80px;
	  height: 142px;
	  top: 1vh;
	  left: 50%; /*23vw*/
	  border: 1px solid black; 
	  border-radius: 5px;
	  transform: translate(-50%, 0%);
	}
	.page7-title {
	  margin-top: 10vh !important;
	}
}

/* For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini */
/* 1080×2340 pixels at 476ppi */
@media only screen 
    and (max-width: 320px)
    /*and (height: 667px) */
    /*and (-webkit-device-pixel-ratio: 2)*/ { 
	.font-0-6 {
		font-size: 0.5rem;
	}
	.page7-content {
	  top: 10rem; /*5rem*/
	}
}