:root {
	--main-color: #7ACCC7;
	--main-color-light: #A7DDDA;
	--main-color-dark: #0D8880;
	--accent-color: #ff5b58;
	--accent-color-light: #f9a0a0;

	--form-border-color: var(--main-color-dark)
}

body { margin:0; /*font-size:100%;*/ font-size:16px; font-family:Verdana, sans-serif; background-color:var(--main-color); }

header, section, footer, aside, nav, main, article, figure { display: block; }

a { text-decoration:none; cursor:pointer; }
a, a:hover { -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; }

h1, h2 { font-size:/*22px;*/ 137%; }

nav ul, nav li { display: inline; margin: 0; padding: 0; list-style: none; }

img { max-width:100%; height:auto; width:auto\9; /* ie8 */ }

#header { position:fixed; top:0; left:0; width:100%; background-color:var(--main-color);}
#header > div.top { border-top:5px solid var(--main-color-dark); width:100%; overflow:hidden; }
#header > nav.main { position:relative; height:52px; background-color:#555555;}
#header > nav.main > ul { margin:0 auto; width:100%; height:100%; display:block; max-width:1024px; text-align:center; white-space:nowrap; }
#header > nav.main > ul > li { position:relative; width:20%; display:inline-block; height:100%; text-align:center; }
#header > nav.main > ul > li.sel:after { content:'';  position:absolute; left:0; bottom:0; display: block; width:100%; height:6px; background-color:var(--accent-color); }
#header > nav.main > ul > li > a { color:var(--main-color); height:100%; line-height:52px; padding:0 6px; display:block; font-size:81%; }
#header > nav.main > ul > li > a:hover { background-color:var(--main-color-light); color:var(--main-color-dark); }
#header > nav.main > ul > li.hide { display:none; }
#header > nav.main.m6 > ul > li { width:16%; }
#header > nav.main.m6 > ul > li:nth-last-child(0) { width:20%; }
#header > nav.main.dentists > ul { text-align:left; }

#header span { display:inline-block; vertical-align:middle; white-space:nowrap; }
#header span.picture {  width:50px; height:50px; margin:0 10px 0 0px; background-position:0 0; background-size:100%; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; border-radius:50%; }
#header span.picture.fairy { background-image: url(../images/logo.png); }
#header span.appname {  line-height:50px; font-family: 'Henny Penny', cursive; font-size:150%; color:#000000; text-overflow:ellipsis; overflow:hidden;}

a[name]:before { content:''; display:block; margin-top:-109px; height: 109px; visibility: hidden; }

section { width:100%; }

div.wrap { margin:0 auto; width:100%; max-width:1024px; }

.nav-mobile { float:right; text-align:right; font-size:125%; }
.nav-mobile > a { text-decoration: none; }

#content-image { width:100%; text-align:center; }
#content-image:before { content:''; display:block; height:109px;}
#content-image > img { vertical-align:bottom; }

#content-description { width:100%; padding:25px 0; background-color:#ffffff; }
#content-description .descri, #content-description h1 { font-size:/*16px;*/100%; font-weight:normal; }
.content-unsubscribe { background-color: var(--main-color-light) !important; }

#content-download { width:100%; padding:25px 0; background-color:var(--main-color); }
#content-download h2 { display:block; margin:0 auto; margin:0 0 20px 0; text-align:center; }
#content-download div.logo, #content-download p { text-align:center; }

#content-download>div.wrap>div {
  /*position: relative;*/
  width:100%; max-width:1000px; margin:auto; }

#content-gallery { width:100%; padding:25px 0; background-color:var(--main-color-light); text-align: center;}
/*#content-gallery { margin:20px 0px;}*/
#content-gallery ul { margin:0px; padding:0px; list-style-type:none; }
#content-gallery ul li { display:inline; padding:0px; }
#content-gallery ul li img { margin:0px 10px 10px 0px; outline: 1px solid var(--main-color-dark);}

#content-contact { width:100%; padding:25px 0; background-color:var(--main-color); }
#content-contact > div.wrap > div:after { content:''; display:block; clear:both; }

#content-confirmed { width:100%; padding:25px 0; background-color: #ffffff; }
#content-confirmed > div.wrap > div:after { content:''; display:block; clear:both; }
#content-confirmed h1, #content-confirmed h2 { display:block; margin:0 auto; margin:0 0 20px 0; text-align:center; }

#content-confirmed-gallery { width:100%; padding:25px 0; background-color: var(--main-color-light); }
#content-confirmed-gallery > div.wrap > div:after { content:''; display:block; clear:both; }
#content-confirmed-gallery h1, #content-confirmed-gallery h2 { display:block; margin:0 auto; margin:0 0 20px 0; text-align:center; }
#content-confirmed-gallery div.logo, #content-confirmed-gallery p { text-align:center; }
#content-confirmed-gallery div.logo { margin-bottom:10px; }
#content-confirmed-gallery div.howto { width:100%; margin:0 auto; }
#content-confirmed-gallery div.howto-child { width:45%; float:left; margin:0 auto; padding:5px;}
#content-confirmed-gallery div.howto-child > span { display:block; min-height:70px; font-size:80%; text-align:center; }
#content-confirmed-gallery a img.ss { outline: 1px solid var(--main-color-dark);}

#content-dentist-description { width:100%; padding:25px 0; background-color:var(--main-color); }
#content-dentist-description:before { content:''; display:block; height:109px;}
#content-dentist-description a { text-decoration: underline; color:#000000;}

#content-professional { width:100%; background-color:var(--main-color); text-align:center; color:#000000;}
#content-professional:before { content:''; display:block; width:100%; height:5px; background-color:var(--main-color-dark); }
#content-professional div.wrap { padding:25px 0; }
#content-professional a { font-size: 110%; text-decoration: none; color:#000000;}
#content-professional a:hover { text-decoration: underline;}

#footer { position:relative; width:100%; text-align:center; color:#ffffff; background-color:#555555; }
#footer:before { content:''; display:block; width:100%; height:5px; background-color:var(--main-color-dark); }
#footer div.wrap { padding:25px 0; }


._1of3 { width:33.3%; display:inline-block; box-sizing:border-box; }
._1of2 { width:49%; margin:0; /*auto;*/ padding-bottom:20px; display:inline-block; vertical-align:top; box-sizing:border-box; }
._1of1 { width:100%; margin:0 auto; display:inline-block; box-sizing:border-box; }
._1of5 { width:20%; display:inline-block; box-sizing:border-box; }
._3of5 { width:60%; display:inline-block; box-sizing:border-box; }

/* stili per la definizione delle form */
form  { display:block; position: static; margin:10px; }

div.row { clear:both; padding-top:8px; }
div.row span.label, div.row span.label-err { display:block; width:100%; text-align:left; /*padding: 0px 10px 5px 0;*/ line-height: 28px; height: 28px; /*margin:6px 0px 6px 0px;*/ color: #000000de; font-size: 0.75rem; font-family: Verdana; }
div.row span.label-err { color: #FFFFFF; background-color: #FF0000; }
div.row span.formfield { display:block; width:100%; text-align: left; font-size: 80%;}
div.row span.formfield > label { margin-right: 10px;}
div.row span.formfield label.doctor > span { min-width: 100px;}
div.row span.formfield.prof1 { padding-bottom: 10px; }
div.row span.formfield.prof2 { padding-bottom: 5px; }
div.row div.separator { position:relative; display: block; font-size: 0.75rem; border-top: 2px solid var(--main-color-dark); margin-top:15px; height: 15px;}
div.row div.separator span { position: absolute; content: ''; text-align:center; left:0; right:0; margin:0 auto; top:-8px;  width:200px; z-index:1; background-color: var(--main-color);}
div.row > span.legend { display: block; width: 100%; color: var(--main-color-dark); font-style: italic; font-weight: bold; font-size: 0.75rem;}
div.spacer { clear: both; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {box-sizing: border-box; border:none; border-radius:6px; outline: 2px solid var(--form-border-color); padding:4px; background: white; font-size: 0.75rem; color: #404040; line-height: 28px; min-height: 28px; width:100%; font-family: Verdana;}
input[type=number] { width: calc(50% - 3px)}
input[disabled] {background: #EBEBEB;}
/*input[type=checkbox] { box-sizing: content-box; border:1px solid #333333; background: white; vertical-align: middle; } */
input[type=checkbox] { position: relative; cursor: pointer; }
input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0;
	outline: 2px solid var(--main-color-dark); border: none; border-radius: 4px; background-color: white;
}
input[type=checkbox]:checked:before { background-color: var(--main-color-light); }
input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 9px; border: solid var(--main-color-dark);
	border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
	position: absolute;	top: 1px; left: 5px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=number]:focus, select:focus, textarea:focus { background: var(--main-color-light); }
input[type=radio] { display: inline-flex; justify-content: center; align-items: center; appearance: none; background-color: #fff;
	margin: 0; font: inherit; color: var(--main-color-dark); width: 14px; height: 14px;	border: none; outline: 2px solid var(--main-color-dark);
	border-radius: 50%;	cursor: pointer; vertical-align: text-bottom;
}
input[type=radio]:checked {	background-color: var(--main-color-light); }
input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--main-color-dark); }

/*._input-1of2 { width:calc(49% - 2px) !important; } */
/*._input-1of3 { width:calc(33%) !important; } */

input, textarea { -moz-transition:all .3s ease; -webkit-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; }
button, input, textarea { -moz-transition:all .3s ease; -webkit-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; }
button { border:none; border-radius:4px; outline: 1px solid var(--accent-color); background-color: var(--accent-color-light); height:29px; line-height:29px; font-size:90%;  color:#555555;  white-space: nowrap; padding:0 25px; text-align:center; }
button:hover { background-color:var(--accent-color); color:#000000; }
button:disabled { border-color: #cccccc; box-shadow:unset; }
button:hover:disabled { background-color: var(--main-color-light); color: #555555;} 

#logo-img { height:auto; width:220px; }
#logo-img2 { height:auto; width:155px; }


@media screen and (max-width: 1024px) {
		._1of3 { width:50%; }
}
@media screen and (max-width: 700px) {
	
	#header > nav.main { display:none; }
	
	#header:after { content:''; display:block; width:100%; height:5px; background-color:#555555; }
	
	a[name]:before { display:none; }
	/*
	#content-image:before { height:57px; }
	*/

	#content-gallery ul li:nth-child(16)  { display:none; }
	#content-gallery ul li:nth-child(15) { display:none; }
	#content-gallery ul li:nth-child(14) { display:none; }
	#content-gallery ul li:nth-child(13) { display:none; }
	#content-gallery ul li:nth-child(12) { display:none; }
	#content-gallery ul li:nth-child(11) { display:none; }
	#content-gallery ul li:nth-child(10) { display:none; }
	#content-gallery ul li:nth-child(9) { display:none; }

	div.wrap { max-width:90%; }

	/* vanno in verticale */
	div.row span.formfield label.doctor,
	div.row span.formfield label.func,
	div.row span.formfield label.loc { display:block; margin-bottom: 7px;}
	div.row span.formfield.prof1 { padding-bottom: 0px; }
}

/* TAB GALLERY STYLES */
.tabs-nav {
	display: flex;
	margin-bottom: 30px;
	border-bottom: 2px solid var(--main-color);
}

.tab-btn {
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 16px;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
	text-decoration: none;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

.tab-btn:hover { color: var(--main-color-dark); background-color: unset; }
.tab-btn.active { color: var(--main-color-dark); background-color: var(--main-color); }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* VERSION TOGGLE (Mobile/Desktop) */
.webapp-version-toggle {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
	justify-content: center;
}

.version-btn {
	width: 40px;
	height: 40px;
	background: var(--main-color-light);
	border-radius: 50%;
	color: var(--main-color-light);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.version-btn:hover { background: var(--main-color); cursor: pointer; }
.version-btn.active { background: var(--main-color); }

@media screen and (max-width: 480px) {
	/* regole applicate per width <= 480px; */
	#content-gallery ul li:nth-child(8) { display:none; }
	#content-gallery ul li:nth-child(7)  { display:none; }

	div.row div.separator { display: none; }

	._1of3 { width:100%; }
	._1of2 { width:100%; }

	._1of5 { width:3%; }
	._3of5 { width:94%; }

	.tab-btn { max-width: 50%; flex: 1; word-wrap: break-word; font-size: 75%; white-space: normal; line-height: 1; }
}

@media screen and (max-width: 320px) {
	#content-gallery ul li:nth-child(6)  { display:none; }
	#content-gallery ul li:nth-child(5) { display:none; }
	#content-gallery ul li:nth-child(4)  { display:none; }
	#content-gallery ul li:nth-child(3) { display:none; }
}

@media screen and (max-width: 240px) {
	#header { display:none; }
	#content-image:before { height:7px; }
}