@font-face {
    font-family: "Waku";
    src: url("./fonts/Multicolore.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
}

.waku-font {
	font-family: Waku;
}

#slides {
	cursor: default;
}

.splash {
	position: absolute;
	border-radius: 25px;
	padding: 3vh 5vw 1vh;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 1px 3px rgb(255, 255, 255);
	text-align: center;
	z-index: 5;
	width: 80vmin;
	left: 50%;
	margin: 50vh 0 0 -40vmin;
	transform: translateY(-50%);
    transition: all 2s ease;
}
.splash img {
	max-height: 10vh;
	transition: all 2s ease;
}
.splash p {
	margin-top: 25px;
	color: #636363;
	font-size: 18px;
	transition: all 2s ease;
}

.splash-end {
	/* background-color: #069;	 */
	background-color: rgba(255, 255, 255, 0.2);
}
.splash-end img {
	max-height: 20vh;
}
.splash-end .title {
	color: #000000;
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
	0px -5px 35px rgba(255,255,255,0.3);
}
.splash p {
	color: #ffffff;
}

.down-arrow.page-scroll img {
	opacity: 0.5;
	transition: all .5s ease;
}
.slides-navigation .prev, 
.slides-navigation .next {
	display: none;
	border-radius: 100%;
	padding: 8px;
	opacity: 0.3;
	transition: all .5s ease;
}
.down-arrow.page-scroll img:hover,
.slides-navigation .prev:hover, 
.slides-navigation .next:hover {
	opacity: .5;
}

.slide-content {
	opacity: 0;
	height: 100%;
	display: block;
	transition: all .5s ease;
}
.slide-content.display {
	opacity: 1;
}

.slide-container {    
	width: 100%;
    height: 100%;
	background: #069;
	padding: 2%;
	transition: all .5s ease;
}

.slide-container.after-animation {
	padding-top: 50px;
}

#slide-text {
	position: absolute;
	font-size: 10vmin;
	text-align: center;
	display: none;
	font-family: Waku;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
	margin: 5% 5%;
	width: 90%;
	color: #FFF;
	z-index: 2 !important;
	top: 0;
	left: 0;
	transition: all .5s ease;
}

.after-animation #slide-text {
	font-size: 25px;
	margin-top: 5px;
	font-size: 25px;
	height: 40px;
	float: right;
	top: 0;
	right: 2%;
	max-width: calc(100vw - 250px);
	overflow: hidden;
	margin: 5px 0 0;
	left: auto;
	padding-right: 5px;
	text-align: right;
}
.after-animation #slide-text.overflow {
	overflow: hidden auto;
}


#slide-item {    
	display: none;
	box-shadow: 0px 0px 3vmin rgb(0, 50, 100);
	max-height: 100%;
	height: 100%;
	/* overflow-y: auto !important; */
	position: relative;

	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#slide-item img {
	image-orientation: from-image;
}

#slide-item > * {   
	width: 100% !important;
	height: 100%!important;
	z-index: 1 !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	object-fit: contain !important; 
}

.button {
	color: #069;
	cursor: pointer;
	box-shadow: 0px 0px 3vmin rgb(202, 202, 202);
	background-color: rgba(255, 255, 255, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.342);
	border-radius: 15px;
	padding: 4px 10px;
	transition: all .5s ease;
	font-weight: bold;
}
.button:hover {
	box-shadow: 0px 0px 5vmin rgb(255, 255, 255);
	border: 2px solid #FFF;
	color: #FFF;
	background-color: #069;
}
.round-button {
	display: inline-block;
	border-radius: 100%;
	padding: 0;
	width: 30px;    
	height: 30px;
	text-align: center;
	font-size: 25px;
}
.button i {
	vertical-align: top;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
	transition: all .5s ease;
}
.pin-button {
	display: none;
	position: absolute;
	top: 55px;
	left: 55px;
	z-index: 3;
	transition: all .5s ease;
	box-shadow: 0px 0px 3vmin rgb(0, 65, 100);
}
.after-animation .pin-button {
	top: 10px;
	left: 155px;
	box-shadow: 0px 0px 3vmin rgb(202, 202, 202);
}
.open-item-button {
	display: none;
	position: absolute;
	z-index: 3;
	opacity: 0;
	top: 10px;
	left: 195px;
	transition: all .5s ease;
}
.after-animation .open-item-button {
	opacity: 1;
	box-shadow: 0px 0px 3vmin rgb(202, 202, 202);
}

.top-logo {
	opacity: 0;
	z-index: 3;
	color: #FFF;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
	font-size: 18px;
	font-family: Waku;
	position: absolute;
	top: 10px;
	left: 5px;
	transition: all .5s ease;
}
.after-animation .top-logo {
	opacity: 0.5;
}
.after-animation .top-logo:hover {
	opacity: 1;
}

.slide-error {
	display: none;
	color: #FFF;
	font-size: 20px;
	width: 100%;
	text-align: center;
}

.header-icon {
	width: 270px;
}

.color-black {
	color: #000;
}

.terms {
	color: #636363;
	font-size: 12px;
	margin-bottom: 15px
}

#get-the-app .section-heading, 
#get-the-app p {
	text-shadow: 0px 0px 5px rgba(74, 74, 74, 0.44);
}


.milestone .count {
	color: rgb(50, 79, 100);
	text-shadow: 0 0 3px rgba(255,255,255,0.5);
}
.milestone h4 {
	color: rgb(153, 157, 160);
}
.milestone h5 {
	font-size: 12px;
	color: rgb(112, 137, 149);
}

.back-to-top a,
.nav-menu-content li > a.active {
	background-color: #bfdce8;
}

.footer-logo-text {
	font-family: Waku;
	font-size: 25px;
}


.no-preview-available {
	margin: auto;
	font-size: 30px;
	text-align: center;
}


.no-preview-available i {
	cursor: pointer;
	opacity: 0.7;
	margin-top: 35vmin;
	color: #FFF;
	font-size: 30vmin;
	transition: all .5s ease;
}

.no-preview-available i:hover {
	opacity: 1;
}

.no-preview-available .file-extension {
	font-family: Waku;
	color: #069;
	font-size: 5vmin;
	width: 30vmin;
	margin: -8vmin 50% 0;
	font-weight: bold;
	overflow: hidden;
	position: absolute;
	left: -15vmin;
}

.no-preview-available .message {
	color: #FFF;
	margin-top: 3vmin;
}
.no-preview-available .sub-message {
	color: #6a92aa;
}

.no-preview-available .error-message {
	color: rgb(212, 194, 194);
	padding-top: 40vh;
}

.col-md-3 img {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.459);
}

.row {
	padding: 5px 10px;
}


.footer {
	position: relative;
}

.report-button {
	position: absolute;
	top: 5px;
	right: 10px;
	color: rgb(255, 0, 0);
}