@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Acme|Cardo|Nanum+Myeongjo|Old+Standard+TT&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');






html, body, section {
  block-size: 100%;
}

html {
  overflow: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}


h1{
	font-size:35px;
	font-family: 'Dancing Script';
	margin-bottom: 30px;
	/*color: rgba(73, 88, 125, 1);*/
}

h2{
	font-size: 30px;
	font-family: 'Dancing Script';
}

i{
	font-size: 30px;
	font-family: 'Dancing Script';
}


section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gradientScreen 6s ease;
  
  width: 100%;
}

body {
  margin: 0;
  font-size: 15px;
  font-family: "optima";
  color: #fff;
  background-color: #235;
  scroll-snap-type: x block;
}












/*COMPONENTI GENERALI*/

/*RIGHE BOOTSTRAP*/
.row{
	/*display: inline-block;*/
	text-align: center;	
	vertical-align:middle;
}


/*COLONNE BOOTSTRAP*/
.col{
	position:relative;
	font-size: 17px;
	padding:2%;

	text-align:center;
	/*color: #1d1d1f;*/


	filter: blur(5px);
	transform: scale(0.7);
	opacity:0;
	transition: all 1s;
}

.show{
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
}

.col-align-right{
	display: inline-block;
  float: right;
}


/*TITOLO*/
.title{
	text-align:center;
	font-size:40px;
	font-family: 'Dancing Script';
	margin-bottom: 50px;
	/*color: rgba(73, 88, 125, 1);*/
}













/*latorale*/
.laterale{
	position: fixed;
	bottom: 5%;
	right: 0px;
	z-index: 12;
	padding: 7px;
	margin-right: 10px;

	border-radius: 5px;

	background: rgba(255, 255, 255, 0.6);

	transition: all 0.2s;
}

.sezionelat{
	background-size: cover;
	background-position: center;
	border-radius: 5px;


	width: 40px;
	height: 35px;

	filter:  grayscale(30%) contrast(60%) drop-shadow(0 0 0 #fff);
	transition: all 0.2s;

	opacity: 1;
}

.bandiera{
	background-image: url("langflag/eng.png");
}

.bandierait{
	background-image: url("langflag/it.png");
}

.bandiera:hover, .bandierait:hover{
	filter:  grayscale(0%) contrast(60%) drop-shadow(0 0 0 #fff);
	height: 55px;
	width: 60px;
}




/*.mail{
	background-image: url("langflag/mail.jpeg");
}

.mail:hover{
	filter:  grayscale(0%) contrast(60%) drop-shadow(0 0 0 #fff);
	background: rgba(255, 255, 255, 1.0);
	width: 310px;
	height: auto;

}

.chatmail{
	padding: 10px;
	padding-right: 20px;
	display: none;
	opacity: 1;
}

.chatmail p{
	color: #235;
}

.mail:hover .chatmail{
	display: block;
}

.mail textarea, .mail input{
	margin-bottom: 10px;
	width:90%;

	color: #235;
}

.mail textarea{
	height:200px;

	resize:none;
}*/












/*COLORS*/
#colors1{
	background:  linear-gradient(25deg , #235 23% , #356 23%  , #356 53% , #685 53% , #685 83% , #574 83%);
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
	background-size: 100% 100%;
	animation: gradientcolor 4s ease;
	left: 0px;
}

@keyframes gradientcolor {
	0% {
		opacity: 0;
		background-size: 900% 900%;
	}
	50%{
		opacity: 1;
	}
	100% {
		background-size: 100% 100%;
	}
}

#colors2{
	background-color:   #235;
	background-attachment: fixed;

	width: 100%;
	height: 100%;
}

#colors3{
	background: linear-gradient( 140deg ,#685 0%, #685 30% , #796 30% , #796 70%, #235 70% , #235 100%);
	background-attachment: fixed;
}

#colors4{
	background:  linear-gradient(90deg ,#685 0%, #685 25% , #796 25% , #796 50%, #235 50%, #235 75% , #356 75% , #356 100%);
	background-attachment: fixed;
}

#colors5{
	background:  linear-gradient(100deg ,#796 0%, #796 25% , #356 25% , #356 50%, #685 50%, #685 75% , #235 75% , #235 100%);
	background-attachment: fixed;
}

#colors6{
		background:  linear-gradient(20deg ,#346 0%, #235 100%);
		padding: 0px;
		margin-bottom: 0px;
	}









/* NAVBAR MENU */

.navbar-default{
	margin: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	z-index: 5;
	border: 0px;
	background: rgba(239, 239, 239, 0);
	opacity: 1;
}

.navbar-nav{
  display: inline-block;
  float: none;
  vertical-align: top;
  z-index: 5;
}


.stick{
  z-index: 5;
	/*position: -webkit-sticky; /* Safari */
  position: fixed;
  top: 0px;
  padding: 0px;
  width: 100%;
  animation: stickmenuAnimation 5s ease;
}

@keyframes stickmenuAnimation{
		0% {
			top: -70px;
		}
		70%{
			top: -70px;
		}
		100% {
			top: 0px;
		}
	}


.navbar-collapse {
  text-align: center;
	background: linear-gradient(90deg , #eefa 0% , #fffd 20% ,#fffd 80% , #eefa 100%);

	z-index: 5;
}


/*NAVBAR TESTO*/
.navbar li{
	padding-right: 5px;
	padding-left: 5px;
}


/*NAVBAR LOGO*/
.navbar .librand{
	background: rgba(239, 239, 239, 0);
}












/*Visitare*/
.visitare-cellulare{
	display: none;
}


.visitare-computer{
	width: 100%;
	height: 100%;
}

.visitare-computer .row{
	height: 50%;

  display:block;
}

.visitare-computer .col{
	height: 100%;

  position: relative;

	background-position: center;
	background-size: cover;
}

.visitare-computer .green{
	background-color: #685;
}

.visitare-computer .col div{
	margin: 0;
  position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.visitare-computer h2{
	font-size: 27px;
}


#imgGM{
	background-image: url("img/home/gabicce01.jpg");
}
#imgSB{
	background-image: url("img/home/sanbartolo01.jpg");
}
#imgUR{
	background-image: url("img/home/urbino01.jpg");
}
#imgRN{
	background-image: url("img/home/rimini1.jpg");
}
#imgGR{
	background-image: url("img/home/gradara01.jpg");
}
#imgSI{
	background-image: url("img/home/sirolo1.jpg");
}









/*LOGO PAGINA*/
.header{
	position:relative;
	top:0px;
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom:0px;

	transform: scale(1.0);

	text-align: center;
	animation: gradientLogo 4s ease;
}
@keyframes gradientLogo {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	40%{
		transform: scale(0.7);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		transform: scale(1.0);
	}
}

.header .row{
	display: inline-block;
}

.header img{
	margin-bottom: 50px;
}








/*DESCRIZIONE GABICCE*/
.descrizioneGabicce{
	opacity: 1;
	transform: scale(1.0);
	border-style: solid;
	border-color: #ddd;
	border-bottom-width: 0px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	animation: gradientDesc 5s ease;
}

@keyframes gradientDesc {
	0% {
		opacity: 0;
		transform: scale(0.0);
	}
	40%{
		transform: scale(0.8);
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		transform: scale(1.0);
	}
}







/*CAROUSEL*/

.carousel{
  transition: 0.5s;
  transition-timing-function: ease-in;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.carousel-inner .item img{
	width: 100%;
}

.carousel:hover{
	transform: scale(1.1);
}

/*CAROUSEL BLU
.container-back .carousel{
	border-style: solid;
	border-width: 5px;
	border-color: #fff;
}*/


/*CAROUSEL FRECCE*/
.glyphicon{
	z-index: 3;
}

.carousel-control.left, .carousel-control.right {
	 transition: 0.5s;
	 transition-timing-function: ease-in;

	 background-image:none !important;
	 filter:none !important;
	 z-index: 3;
}


/*CAROUSEL IMMAGINE*/
.carousel-inner{
	z-index: 2;
}




















/*SEZIONE BLU*/


/*.container-back .col{
	margin-bottom: 0px;
}*/

.container-back h1{
	text-align: center;

	margin-bottom: 30px;
	margin-top: 0px;
	/*background: linear-gradient(90deg , #eef0 13% , #eeea 20% ,#eeea 75% , #eef0 85%);*/	
}

.container ul{
	text-align: left;
}

.container-back .col{
	padding-top: 0px;
}


















/*FOOTER*/
.container-footer{
	padding-top: 30px;
	padding-bottom: 20px;
	padding-left: 50px;
	padding-right: 50px;
	color: #000;

	align-items: center;
  justify-content: center;

	width: 100%;
	background: radial-gradient( #fffe , #eefc);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.container-footer p{
	color: #000;
	text-align: center;
}

.rowsito{
	margin-top: 20px;
}

.righafinale p{
	margin-top: 20px;
}