/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.wdg-weather{
	display: inline-block;
	position: relative;
	height: 200px;
	width: 100%;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 10px rgb(0 0 0 / 26%);
}
.content-part{
	z-index: 3;
	display:grid;
	align-content: center;
	justify-content: center;
	position: relative;
	width: 100%;
	color: #fff !important;
	height: 200px;
}
.content-part h6,
.content-part h3,
.content-part h4{
   margin: 8px 5px;
   color: #fff;
}
.wdg-weather figure{
	display: inline-block;
	position:absolute;
	width: 100%;
	height: 200px;
	left: 0;
	right: 0;
	top:0;
}
.wdg-weather figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.3;
}


.rain{
    height: 100vh;
    background-image: url(/images/img_animated/rain.png);
    animation: rain 0.3s linear infinite;
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	width: 100%;
	top:0;
}
@keyframes rain {
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 20% 100%;
    }
}
.rain::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/img_animated/lightining.png);
    top: -100px;
    transform: rotate(180deg);
    animation: lightining 4s linear infinite;
    opacity: 1;
	left: 0;
	right: 0;
	width: 100%;
	top:0;

}
@keyframes lightining {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    21%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
    30%{
        opacity: 0;
    }
    31%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}




.sunny {
	position: absolute;
	top:5px;
	left: 10px;
	width: 5rem;
	height: 5rem;
	margin-top: 4rem;
  }
  
  .sunny:before,
  .partly_cloudy__sun:before {
	content: "";
	position: absolute;
	height: 80%;
	width: 80%;
	top: 10%;
	right: 10%;
	border-radius: 50%;
	z-index: 2;
	background-color: #f1c40f;
	background-image: radial-gradient(#f1c40f, #f39c12);
	box-shadow: 0 0 25px #917508;
  }
  .sunny:after,
  .partly_cloudy__sun:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	z-index: 1;
	background-color: #f39c12;
	will-change: opacity, transform;
	animation: fadeIn 2s linear infinite reverse, scaleDown 2s linear infinite reverse;
  }
  
  .cloudy {
	position: relative;
	width: 5rem;
	height: 5rem;
  }
  
  .cloudy:before,
  .partly_cloudy__cloud:before,
  .rainy__cloud:before,
  .thundery__cloud:before {
	content: "";
	position: absolute;
	height: 40%;
	width: 40%;
	top: 30%;
	right: 0%;
	border-radius: 50%;
	border-bottom-left-radius: 0;
	z-index: 2;
	background-color: #ecf0f1;
	background-image: radial-gradient(#ecf0f1, #bdc3c7);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  }
  .cloudy:after,
  .partly_cloudy__cloud:after,
  .rainy__cloud:after,
  .thundery__cloud:after {
	content: "";
	position: absolute;
	height: 60%;
	width: 70%;
	top: 10%;
	right: 30%;
	border-radius: 50%;
	border-bottom-right-radius: 0;
	z-index: 1;
	background-color: #ecf0f1;
	background-image: radial-gradient(#ecf0f1, #bdc3c7);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  }
  
  .partly_cloudy {
	position: relative;
	width: 5rem;
	height: 5rem;
  }
  .partly_cloudy__sun {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
  }
  .partly_cloudy__cloud {
	position: absolute;
	width: 60%;
	height: 60%;
	top: 40%;
	z-index: 2;
	will-change: transform;
	-webkit-animation: translateUp 2s linear infinite alternate;
			animation: translateUp 2s linear infinite alternate;
  }
  
  .rainy,
  .thundery {
	position: relative;
	width: 5rem;
	height: 5rem;
  }
  .rainy__cloud,
  .thundery__cloud {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 2;
  }
  .rainy__cloud:before,
  .thundery__cloud:before {
	background-color: #95a5a6;
	background-image: radial-gradient(#95a5a6, #7f8c8d);
  }
  .rainy__cloud:after,
  .thundery__cloud:after {
	background-color: #95a5a6;
	background-image: radial-gradient(#95a5a6, #7f8c8d);
  }
  .rainy__rain,
  .thundery__rain {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 1;
	overflow: hidden;
  }
  .rainy__rain:before,
  .thundery__rain:before {
	content: "";
	position: absolute;
	height: 80%;
	width: 20%;
	top: 20%;
	right: 50%;
	z-index: 1;
	background-image: linear-gradient(transparent, #94cdd1);
	will-change: opacity, transform;
	-webkit-animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite;
			animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite;
  }
  .rainy__rain:after,
  .thundery__rain:after {
	content: "";
	position: absolute;
	height: 60%;
	width: 20%;
	top: 40%;
	right: 20%;
	z-index: 1;
	opacity: 0;
	background-image: linear-gradient(transparent, #94cdd1);
	will-change: opacity, transform;
	-webkit-animation: fadeIn 2s ease-out 0.4s infinite reverse, scaleUp 2s ease-out 0.4s infinite;
			animation: fadeIn 2s ease-out 0.4s infinite reverse, scaleUp 2s ease-out 0.4s infinite;
  }
  
  .thundery__cloud:before {
	background-color: #4d5656;
	background-image: radial-gradient(#4d5656, #393c3c);
	-webkit-animation: thunder 4s linear 0.02s infinite alternate;
			animation: thunder 4s linear 0.02s infinite alternate;
  }
  .thundery__cloud:after {
	background-color: #4d5656;
	background-image: radial-gradient(#4d5656, #393c3c);
	-webkit-animation: thunder 4s linear infinite alternate;
			animation: thunder 4s linear infinite alternate;
  }
  .thundery__rain:before {
	-webkit-animation: fadeIn 0.5s ease-out infinite reverse, scaleUp 0.5s ease-out infinite;
			animation: fadeIn 0.5s ease-out infinite reverse, scaleUp 0.5s ease-out infinite;
  }
  .thundery__rain:after {
	-webkit-animation: fadeIn 0.75s ease-out 0.2s infinite reverse, scaleUp 0.75s ease-out 0.2s infinite;
			animation: fadeIn 0.75s ease-out 0.2s infinite reverse, scaleUp 0.75s ease-out 0.2s infinite;
  }
  
  @-webkit-keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  @-webkit-keyframes scaleDown {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0.8);
	}
  }
  @keyframes scaleDown {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0.8);
	}
  }
  @-webkit-keyframes translateUp {
	0% {
	  transform: translatey(15%);
	}
	100% {
	  transform: translatey(0);
	}
  }
  @keyframes translateUp {
	0% {
	  transform: translatey(15%);
	}
	100% {
	  transform: translatey(0);
	}
  }
  @-webkit-keyframes scaleUp {
	0% {
	  transform: scaley(0);
	}
	100% {
	  transform: scaley(1);
	}
  }
  @keyframes scaleUp {
	0% {
	  transform: scaley(0);
	}
	100% {
	  transform: scaley(1);
	}
  }
  @-webkit-keyframes thunder {
	0% {
	  box-shadow: 0 0 25px #fff;
	}
	2% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	49% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	50% {
	  box-shadow: 0 0 25px #fff;
	}
	52% {
	  box-shadow: 0 0 25px #f7db6e;
	}
	53% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	69% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	70% {
	  box-shadow: 0 0 25px #fff;
	}
	71% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	75% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	76% {
	  box-shadow: 0 0 25px #fff;
	}
	77% {
	  box-shadow: 0 0 25px #a8d3f0;
	}
	78% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	100% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
  }
  @keyframes thunder {
	0% {
	  box-shadow: 0 0 25px #fff;
	}
	2% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	49% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	50% {
	  box-shadow: 0 0 25px #fff;
	}
	52% {
	  box-shadow: 0 0 25px #f7db6e;
	}
	53% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	69% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	70% {
	  box-shadow: 0 0 25px #fff;
	}
	71% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	75% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	76% {
	  box-shadow: 0 0 25px #fff;
	}
	77% {
	  box-shadow: 0 0 25px #a8d3f0;
	}
	78% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
	100% {
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	}
  }


  
@keyframes clouds-loop-1 {
	to {
	  background-position: -1000px 0;
	}
  }
  .clouds-1 {
	background-image: url("/images/img_animated/clouds_2.png");
	animation: clouds-loop-1 20s infinite linear;
  }
  
  @keyframes clouds-loop-2 {
	to {
	  background-position: -1000px 0;
	}
  }
  .clouds-2 {
	background-image: url("/images/img_animated/clouds_1.png");
	animation: clouds-loop-2 15s infinite linear;
  }
  
  @keyframes clouds-loop-3 {
	to {
	  background-position: -1579px 0;
	}
  }
  .clouds-3 {
	background-image: url("/images/img_animated/clouds_3.png");
	animation: clouds-loop-3 17s infinite linear;
  }
  .clouds {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
  }
  
  .clouds-1,
  .clouds-2,
  .clouds-3 {
	background-repeat: repeat-x;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 500px;
  }

  .sunny-div{
	background: #b3aeae !important;
  }
  .raing-div{
	background: #181818 !important;
  }
  .raing-div figure img{
	opacity: 0.6;
  }
  .raing-div .rain::before{
     display: none;
  }



.snow{
    height: 100vh;
    background-image: url(/images/img_animated/snow.png);
    animation: snow 3.3s linear infinite;
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	width: 100%;
	top:0;
}
@keyframes snow {
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 20% 100%;
    }
}
.snow::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/img_animated/snow.png);
    top: -100px;
    transform: rotate(180deg);
    animation: lightining 4s linear infinite;
    opacity: 1;
	left: 0;
	right: 0;
	width: 100%;
	top:0;

}












	.button-post {
		margin: 10px 0 0 0;
	}
	
	.webcam-img {
		max-height: 450px;
	}
	
	
	/*******************************************************************
						Pagina Previsioni Location 
	*******************************************************************/
		
	.weekly-div .col {
		margin-bottom: 25px;
	}
	
	.weather-day {
		background: rgb(58 157 190 / 55%);
		width: 100%;
		border-radius: 8px;
		color: #fff;
		padding: 30px 0px 0px 0px;
		justify-content: center;
		text-align: center;
		position: relative;
		box-shadow: 0 0 10px rgb(0 0 0 / 26%);
	}
	
	.weather-day h4 {
		color: #fff;
		margin: 0;
		/* margin-bottom: 25px; */
	}
	
	.weather-riep {
		/* background: rgb(58 157 190 / 55%); */
		background: rgb(58 157 190 / 11%);
		border: 3px solid rgb(58 157 190 / 55%);
		align-content: center;
		width: 100%;
		min-height: 165px;
		border-radius: 8px;
		color: #fff;
		/* padding: 0 30px; */
		padding: 0 25px;
		justify-content: center;
		text-align: center;
		position: relative;
		margin-bottom: 10px;
	}
	
	.weather-riep h5, h6 {
		margin: 0;
	}
	
	.icon-wheather-riep {
		text-align: center;
		max-height: 60px;
	}
	
	.weather-riep sup, .weather-riep sub {
		font-size: 14px;
	}

	.img-responsive .icon-tday { 
		max-height: 150px;
	}
		
	.mp-widdate {
		margin: 0;
	}
	
	.mp-widdata {
	  padding: 5px;
	  font-size: 16px;
	}
	.mp-widdata.mp-tmin {
	  background: #338BD7;
	  color: #fff;
	}
	.mp-widdata.mp-tmax {
		background-color: #ffa435;
		color: #fff;
	}

	
	
	
	/*******************************************************************
							Pagina Homepage
	*******************************************************************/
	
	.title-widget{
		letter-spacing: 1px !important;
		font-size: 18px;
		color: #444;
		line-height: 1.5;
		margin: 0 0 30px 0;
		font-family: 'Poppins', sans-serif;
		text-transform: uppercase !important;
		font-weight: 700 !important;
		margin-bottom: 0.5rem !important;
	}
	
	.title-widget-1 {
		font-size: 29px;
		margin-bottom: 0px;
		color: #fff;
		font-weight: 400;
	}
	
	.widget-1 {
		border: 2px solid #3A9DBE;
		padding: 20px 20px;
		text-align: center;
		/* border-radius: 13px; */
		margin-bottom: 40px;
		background: #3A9DBE;
		color: #fff;
	}
		
	.text-allerta {
		color: #fff;
	}	
		
	/*******************************************************************
							Pagina Webcam
	*******************************************************************/
		
	.webcam-title {
	    margin: 20px 0 5px 0 !important;
	}
		
	.webcam-img img {
		height: 230px;
		width: 100%;
		object-fit: cover;
	}
		
	.webcam-title {
		margin: 20px 0 0 0 !important;
		background: #3A9DBE;
		color: #fff;
		font-family: 'Lato', sans-serif;
		font-size: 1.2em;
		padding: 3px 11px;
	}
		
	.weather-date-ril {
		color: #444;
		font-weight: 600;
		font-size: 12px;
	}
		
	.wheather-temp {
		margin: 0;
	}

	.wheather-date-temp {
		margin-bottom: 6px;
	}


.w-fit-content { width: fit-content; }
/*@media(min-width:991px){
	.logo-datameteoedu {
		max-height: 55px;
		position: absolute;
		right: -10px;
		transform: translate(100%, -50%);
		top: 50%;
	}
}
@media(max-width:767px){
	.stazione-meteo-title { margin-bottom: 50px; }
	.logo-datameteoedu {
		max-height: 55px;
		position: absolute;
		right: -10px;
		transform: translate(100%, -50%);
		top: 50%;
	}
}*/
@media(max-width:991px){
	.breadcrumb-stazione-meteo {
		left: inherit !important;
    right: inherit !important;
    transform: inherit !important;
	}
}