@import url(//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300&subset=latin-ext);
*,
::after,
::before {
	box-sizing: border-box
}


.position-dot {
	width: 37px;
	height: 37px;
	background: #f15a24;
	position: absolute;
	border-radius: 100%
}

.container {
	margin: 0 auto;
	height: 100%;
	border-radius: 10px !important;
	/*width: 1080px;
	height: 1920px;*/
	border-radius: 2px;
	position: relative;
	/*padding-top: 120px;*/
	text-align: center;
	overflow: hidden
}

.container .bg-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	animation: bg-loop 15s infinite linear
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../img/container_bg_shadow.png);
	background-repeat: repeat;
	opacity: .8;
	z-index: 4
}

.content-wrap {
	width: 100%;
	height: 1800px;
	position: relative;
	z-index: 5
}
.today-weather {
	margin-top: -69px;
}

.today-weather .icone_meteo {
	background-size: contain;
	background-position: center bottom;
	position: relative
}

.today-weather .icone_meteo .livicon-evo-holder {
	top: -12px;
	left: 0;
	position: absolute
}

.town-info {
	width: 100%;
	margin-top: 30px
}
.ljubljana {
	height: 300px;
	border-radius: 10px;
}

.date {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 1.2px;
	text-align: center;
	margin-bottom: 5px
}

.time {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 160px;
	font-weight: 100;
	text-align: center;
	line-height: 120px
}

.city-title {
	font-size: 40px;
	letter-spacing: 1.5px;
	line-height: 80px;
	color: #fff;
	font-family: Roboto, sans-serif;
	text-align: center;
	font-weight: 300;
	margin-bottom: 74px
}

.city-weather-temperature {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 140px;
	line-height: 1em !important;
	font-weight: 100;
	letter-spacing: -8.7px;
	display: inline-block;
	line-height: 255px
}

.icone_meteo {
	position: center, top;
	margin-bottom: -10px;
	width: 160px;
	height: 128px;
	z-index: 1;
	display: inline-block;
	margin-right: -20px;
	background-size: 100%;
	margin-top: 8px;
}

.city-weather-description {
	font-size: 40px;
	width: 250px;
	margin: auto;
	text-align: center;
	display: block
}

.bottom-container {
	background: url(../img/bottom_shadow_gradient.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 1080px;
	height: 670px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 6
}

.sunrise {
	top: 235px;
	left: 20px;
	position: absolute;
	padding-bottom: 60px;
	background: url(../img/sunrise.png);
	background-position: center bottom;
	background-repeat: no-repeat
}

.sunrise span {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 1.4px;
	display: block
}

.sunset {
	top: 235px;
	right: 20px;
	position: absolute;
	padding-bottom: 60px;
	background: url(../img/sunset.png);
	background-position: center bottom;
	background-repeat: no-repeat
}

.sunset span {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 1.4px;
	display: block
}

.next-days {
	width: 100%;
	position: absolute;
	bottom: 110px;
	left: 50%;
	transform: translate(-50%, 0)
}

.days-wrap {
	float: left;
	width: 100%
}

.day-single .icone_meteo {
	width: 100%;
	height: 120px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	margin-right: 0;
	margin-bottom: 30px;
	position: relative
}

.day-single .icone_meteo .livicon-evo-holder {
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	position: absolute
}

.day-single {
	width: 33.3%;
	float: left;
	text-align: center
}

.day-name {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 48px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	display: block;
	margin-bottom: 5px
}

.day-temperatures span {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 48px;
	font-weight: 100;
	letter-spacing: 1.2px;
	display: inline-block;
	padding: 0 15px
}

.copy {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 300;
	position: absolute;
	bottom: 26px;
	right: 21px;
	z-index: 3
}

.content-wrap,
.copy {
	display: none
}

.main {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center
}

.sc-canvas {
	padding: 50px 55px 55px;
	position: relative;
	height: 1920px;
	width: 1080px;
	overflow: hidden
}

.screen {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}

.slider {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0
}

.slider .content {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 1413px;
	width: 970px
}

.slider .content:before {
	background-color: rgba(0, 0, 0, .08)
}

.text1 {
	font-size: 65px;
	line-height: 1.2em;
	position: absolute;
	left: 65px;
	bottom: 214px;
	opacity: 0
}

.screen2bg {
	background: no-repeat scroll center top/cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0
}

.text2 {
	font-size: 50px;
	line-height: 1.2em;
	text-align: center;
	position: absolute;
	left: 80px;
	bottom: 322px;
	z-index: 3;
	opacity: 0
}


/*# sourceMappingURL=app.css.map */