* {
    padding: 0;
    margin: 0;
}

html, body {
	width: 100%;
	height: 100%;
    top:0px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;

    background-color: white;
    background-repeat: no-repeat;
    color:#000;
    font-family: "Verdana";
    font-size: 5vw;
	line-height: 1.2;
}

div.safe_area {
    position: relative;
    left: 0; top: 0; width: 100%; height: 100%;
    border: solid 0px #FF0004;
	/* background-image:url(images/Ljubljana.jpg);
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100%; */
}

#logo_left {
	background-image: url("images/ebtt.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 11% auto;
    height: 50%;
    left: 1%;
    position: absolute;
    top: 2%;
    width: 50%;
}

#logo_right {
	background-image:url(images/lmmfe-logo.png);
	background-repeat: no-repeat;
	background-position:right top;
	background-size: 30%;
	position:absolute;
	right:2%;
	top:2%;
	width:50%;
	height:50%;
}

/* ------------------- DETAILS ------------------- */

#footer {
  display: none;
	width: 100%;
	height: 18%;
	position: absolute;
	bottom: 0;
	background-image:url(images/movie.png);
	background-repeat: repeat-x;
	background-size:100% 100%;
	background-position: center bottom;
}

#image_gallery {
	width:100%;
	height:100%;
	z-index:1000;
}

#image_gallery img {
	width:100%;
	height:100%;
	z-index:1000;
	position:absolute;
}
#details {
	width: 55%;
	height: 80%;
	position: absolute;
	right: 2%;
	top: 7%;
	text-align: center;
}

#lecture {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
}

#logo {
	height:10%;
	background:url(images/logoltfe.png) no-repeat;
	background-size:contain;
	position:absolute;
	bottom:10px;
	right:10px;
	width:165px;
}

#lecture .content {
	position: relative;
	width: 100%;
}

#lecture span.lecture {
	font-size: 4vw;
	font-weight: bold;
	display:block;
}

#lecture span.lecturer {
	font-size:3vw;
	display:block;
	margin-top:3%;
}

#lecture span.next {
	font-style:italic;
	font-size:2.5vw;
	display:block;
	margin-top:5%;
}

#lecture span.warning {
	font-size:2.3vw;
	display:block;
	margin-top:5%;
	color:#FF0000;
	font-weight: bold;
}

#image_gallery .gallery .gallery-item {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:none;
}


/* ------------------- CLOCKS ------------------- */


/* ------------------- DIGITAL CLOCK ------------------- */
#clocks_digital{
	width: 100%;
	height: 12%;
	position:absolute;
	left:0;
	bottom:2%;
}

#digital_count_down {
	text-align:center;
	font-style:italic;

}
#digital_count_down .title {
	font-size: 5.5vw;
    left: 0;
    position: absolute;
	width:50%
}
#digital_count_down .clock {
	font-size: 6vw;
    right: 2%;
    position: absolute;
	width:50%
}

#digital_count_down .clock.alarm {
	color:#FF0000;
}


/* ------------------- ANALOG CLOCK ------------------- */
#clocks {
	width: 55%;
	height: 70%;
	position:absolute;
	left:0;
	top:0;
}

#analog_clock {
	height:100%;
	width:100%;
}
/*#clock {
	position: absolute;
	width: 100%;
	height: 0;
    padding-bottom: 70%;
	margin: 10% 0 1% 5%;
	background: url(images/clockface1.png) no-repeat;
	background-size: auto 100%;
	list-style: none;
	}*/

#clock {
    background: rgba(0, 0, 0, 0) url("images/clockface2.png") no-repeat scroll 0 0 / auto 95%;
    height: 0;
    list-style: outside none none;
    margin: 1% 0 1% 10%;
    padding-bottom: 70%;
    position: absolute;
    width: 100%;
}

#sec, #min, #hour {
	position: absolute;
	width: 3.5%;
	height: 95%;
	top: 0;
	left: 31.5%;
	}

#sec {
	background: url(images/sechand.png);
	background-size: auto 100%;
	z-index: 3;
	}

#min {
	background: url(images/minhand-2.png);
	background-size: auto 100%;
	z-index: 2;
	}

#hour {
	background: url(images/hourhand-2.png);
	background-size: auto 100%;
	z-index: 1;
	}

p {
	text-align: center;
	padding: 10px 0 0 0;
	}