/* ==========================================================================
	Base styles
	========================================================================== */
html { color: #FFFFFF; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #83BAA6; color:#000000; text-shadow: none; }
::selection { background: #83BAA6; color:#000000; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
a:active, a:focus { outline: none; }
img { vertical-align: middle; max-width: 100%; }

/* ==========================================================================
	Media Queries
/* ========================================================================== */
@media (min-width: 576px)  {  /* sm - small tablet portrait and landscape phone (600x800) */
}
@media (min-width: 768px)  {  /* md - small tablet landscape (800x600)(768x1024) */
}
@media (min-width: 992px)  {  /* lg - tablet landscape (1024x786) */
}
@media (min-width: 1200px) {  /* xl - desktop */
}
@media (min-width: 1560px)  {  /* xxl - big desktop */
}

/* ==========================================================================
	Custom styles
	========================================================================== */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { font-size: 16px; font-family:'Open Sans', sans-serif; font-weight: 400; color: #FFFFFF; }
a, a:active, a:focus, a:visited { color: #FFFFFF; text-decoration: none; }
a:hover { background: #83BAA6; color:#000000; }

.background {
	background-image: url(img/sfondo.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #00655C;
	width: 100vw;
	height: 100vh;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position the div in center */
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}
.logo { width: 250px; min-height: 100px; }
.logo img { max-width: 250px; height: auto; }

@media (min-width: 576px)  {  /* sm - small tablet portrait (600x800) */
	.logo { width: 250px; top: 45%; transform: translate(-50%, -45%); }
	.logo img { max-width: 250px; }
}
@media (min-width: 768px)  {  /* md - small tablet landscape (800x600)(768x1024) */
	.logo { width: 250px; }
	.logo img { max-width: 250px; }
}
@media (min-width: 992px)  {  /* lg - tablet landscape (1024x786) */
	.logo { width: 250px; }
	.logo img { max-width: 250px; }
}
@media (min-width: 1200px) {  /* xl - desktop */
	.logo { width: 300px; }
	.logo img { max-width: 300px; }
}
@media (min-width: 1560px)  {  /* xxl - big desktop */
	.logo { width: 400px; }
	.logo img { max-width: 400px; }
}

.info {
  width: 300px;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* position the div in center */
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -5%);
}
.info { width: 300px; text-align: center; margin: auto; padding: 0; }
.info ul { list-style: none; text-align: center; padding: 0; margin: 0 auto; }
.info ul li { font-size: 14px; line-height: 30px; text-align: center; }
.info ul li a, .info ul li span { padding: 0 6px; }

@media (min-width: 576px)  {  /* sm - small tablet portrait (600x800) */
	.info { width: 500px; bottom: 5%; transform: translate(-50%, -5%); }
	.info ul li { font-size: 16px; line-height: 30px; }
}
@media (min-width: 768px)  {  /* md - small tablet landscape (800x600)(768x1024) */
	.info { width: 500px; }
}
@media (min-width: 992px)  {  /* lg - tablet landscape (1024x786) */
	.info { width: 800px; }
}
@media (min-width: 1200px) {  /* xl - desktop */
	.info { width: 800px; }
}
@media (min-width: 1560px)  {  /* xxl - big desktop */
	.info { width: 800px; }
}

/* ==========================================================================
	Helper classes
	========================================================================== */
.hidden, [hidden] { display: none !important; }
.visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ }
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }
.invisible { visibility: hidden; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

/* ==========================================================================
	Print styles.
	Inlined to avoid the additional HTTP request:
	https://www.phpied.com/delay-loading-your-print-css/
	========================================================================== */
@media print {
	*, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href]::after { content: " (" attr(href) ")"; }
	abbr[title]::after { content: " (" attr(title) ")"; }
	a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
	pre { white-space: pre-wrap !important; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	tr, img { page-break-inside: avoid; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
}