body { margin: 0; padding: 0; background-color: #FFFFFF; font-family: 'Montserrat', Arial, sans serif; font-size: 12pt; }

a { color: #086CA2; text-decoration: none; } 
a:hover { text-decoration: underline; }
ul { list-style-type: none; margin: 0; padding: 0; }
.clear { clear: both; height: 0; border: 0 !important; }

body > header { margin: 0; padding: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #086CA2; color: #086CA2; position: sticky; top: 0; right: 0; z-index: 10; }
body > header.header_shadow { -webkit-box-shadow: 0 2px 10px #999; -moz-box-shadow: 0 2px 10px #999; box-shadow: 0 2px 10px #999;}
body > header nav.default { width: 1368px; margin: 0 auto; float: none;}
body > header nav.default .logo { float: left; width: 30%; height: 60px; margin: 0; padding: 0;}
body > header nav.default .logo img { height: 50px; margin: 0; padding: 5px 0;}
body > header nav ul { float: left; width: 70%; height: 30px; margin: 0; padding: 15px 0;}
body > header nav ul li { font-size: 120%; padding: 0 2%; font-weight: bold; float: right; text-align: right; }
body > header nav ul li a { color: #086CA2; }
body > header nav.mobile { display: none;}
body > header nav.mobile .logo { float: left; width: 466px; height: 50px; margin: 0; padding: 0;}
body > header nav.mobile .logo img { height: 50px; margin: 0; padding: 5px 0;}
body > header nav.mobile .popmenu { display: none; width: 400px; width: 100px; height: 120px; }
body > header nav.mobile .popmenu li { margin: 10px 0; }

body > header #message { margin-top: 10px; padding: 4px 0; text-align: center; background-color: #086CA2; color: #fff; display: none; }
body > header #message.alert { background-color: #ff3f00; color: #fff; }

section { margin: 0; padding: 60px 0 20px 0; width: 100%; }
section header { width: 26%; padding: 0 2%; }
section h2 { color: #086CA2; margin: 0 0 10px 0; font-size: 250%; }
section .container	{ margin: 0 auto; width: 1366px; clear: both; !important;}
section .contents { width: 66%; padding: 0 2%; }
section.left { text-align: left;}
section.right { text-align: right; }
section#home { background: url("../img/big_smile.jpg") no-repeat scroll center #fff; }
section#home header { width: 66%; padding: 0 2%; text-align: center; }
section#studio { background-color: #eaf8ff; }
section#studio header, section#studio .contents { float: right; }
section#servizi { background-color: #fff; }
section#servizi header, section#servizi .contents { float: left; }
section#staff { background-color: #eaf8ff; }
section#staff header, section#servizi .contents { float: right; }
section#contatti { background-color: #64AAD0; color: #fff; }
section#contatti a, section#contatti h2 { color: #fff; }
section#contatti header, section#contatti .contents { float: left; }
section#prenotazione { background-color: #fff; }
section#prenotazione header, section#prenotazione .contents { float: right; }

footer { width: 100%; }
footer .footer_social { width: 1368px; height: 24px; margin: 10px auto; text-align: center; } 
footer .footer_info { width: 1368px; height: 40px; margin: 10px auto; text-align: center; font-size: 70%;} 

.booking { position: fixed; bottom: 30px; right: 30px; } 
.booking a { }
.booking img { height: 60px; width: 60px; }


section#home .contents { width: 66%; padding: 0 2%; }
section#home .contents table { margin: 0 auto; width: 60%; border-collapse:collapse; }
section#home .contents table tbody { width: 100%; }
section#home .contents table tr { display: block; width: 96%; background-color: #086CA2; padding: 10px 2%; margin: 4px 0; border-radius: 25px; }
section#home .contents table tr th { padding: 0 6%; color: #FFFFFF; text-align:left; }
section#home .contents table tr td { padding: 0 6%; color: #FFFFFF; width: 100%;}

section#home .contents table.warning { margin: 0 auto; width: 60%; border-collapse:collapse; }
section#home .contents table.warning tbody { width: 100%; }
section#home .contents table.warning tr { display: block; width: 96%; background-color: #086CA2; padding: 10px 2%; margin: 4px 0; border-radius: 25px; background-color: #eaf8ff;}
section#home .contents table.warning tr th { padding: 0; color: #086CA2; width: 100%; text-align: center; display: block; }
section#home .contents table.warning tr td { padding: 0 6%; color: #086CA2; width: 88%; text-align: left; }


section#studio .gallery { text-align: center; }

section#servizi ul { padding: 0; width: 100%; list-style-type: none; margin: 0; padding: 6px 0 0 0; position: relative; }
section#servizi ul li { }
section#servizi ul li h3 { margin: 10px 0;}
section#servizi ul li .detail { display: none; font-size: 11pt; margin: 10px; padding: 10px; border: 2px solid #cbedff; background-color: #FFFFFF; position: absolute; top: 0px; left: 240px; width: 500px; height: 320px;  }
section#servizi ul li .detail.conservativa		{ background: url("../img/servizi_conservativa.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.chirurgia			{ background: url("../img/servizi_chirurgia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.endodonzia		{ background: url("../img/servizi_endodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.igiene			{ background: url("../img/servizi_igiene.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.impianti			{ background: url("../img/servizi_impianti.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.ortodonzia		{ background: url("../img/servizi_ortodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.parodontologia	{ background: url("../img/servizi_parodontologia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.pedodonzia		{ background: url("../img/servizi_pedodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.protesi			{ background: url("../img/servizi_protesi.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.radiologia		{ background: url("../img/servizi_radiologia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.sedazione			{ background: url("../img/servizi_sedazione.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail .title { display: block; font-size: 12pt; font-weight: bold; border-bottom: 2px solid #64AAD0; padding-bottom: 6px;  }

section#servizi ul li .detail .detailtext { position: absolute; width: 480px; padding: 6px 10px; bottom: 10px; display: block; background-color: #FFFFFF; border-radius: 6px; -moz-border-radius: 6px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, .7); }
section#servizi ul li .detail .detailtext .title { display: block; font-size: 12pt; font-weight: bold; border-bottom: 2px solid #64AAD0; padding-bottom: 0;  }
section#servizi ul li .detail .detailtext p { margin: 0;  }

section#staff ul li h3 {margin: 0;}
section#staff ul li p {margin: 0 0 10px 0;}

section#prenotazione form { display: block; background-color: #eaf8ff; padding: 4%; margin-bottom: 10px; margin-top: 0px; width: 92%; }
section#prenotazione form div { margin-bottom: 20px; }
section#prenotazione form div ul { width: 100%; margin-bottom: 20px; }
section#prenotazione form div ul li { padding: 0; }
section#prenotazione form input { font-size: 12pt; }
section#prenotazione form textarea { font-size: 12pt; width:300px; height: 100px; border: 1px solid #666666; }
section#prenotazione form .formcol { float: left; width: 50%; }

section#cookies .container { width: 80%; padding: 0; }
section#cookies .container header { width: 100%; }
section#cookies .container ul { list-style-type: disc; margin-left: 20px; padding: 0; }

/* Popup box BEGIN */
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
/*    display:none; */
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 80%;
    position: relative;
    border-radius: 8px;
    padding: 10px 2%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}
/* Popup box BEGIN */


@media all and (max-width: 480px) {

body > header nav.default { display: none;}
body > header nav ul { float: left; width: 20%; height: 30px; margin: 0; padding: 15px 0;}
body > header nav ul li { font-size: 100%; padding: 0; font-weight: bold; float: right; text-align: right; }
body > header nav ul li a { color: #086CA2; }
body > header nav ul li a:hover { text-decoration: underline; }
body > header nav.mobile { display: block; position: relative; }
body > header nav.mobile .logo { float: left; width: 80%; height: 50px; margin: 0; padding: 0;}
body > header nav.mobile .logo img { /* width: 100%; */ margin: 0; padding: 5px 0;}
body > header nav.mobile ul.popmenu { float: none; position: absolute; top: 40px; right: 0; width: 100px; height: 120px; border: 1px solid #000; background-color: #fff; padding: 10px; }
body > header nav.mobile ul.popmenu li { float: none; width: 98px; }

section header { width: 100%; padding: 0; }
section .container	{ margin: 0 auto; width: 300px; clear: both; !important;}
section .contents { width: 100%; padding: 0; }
section.left { text-align: left; }
section.right { text-align: right; }
section#studio header, section#studio .contents { float: none; }
section h2 { font-size: 200%; }
section#home { background-image: none; }
section#home h2 { font-size: 150%; }
section#home header { width: 100%; }
section#home table { margin: 0 auto; }
section#home .contents { width: 96%; padding: 0 2%; }
section#home .contents table { width: 100%; }
section#home .contents table.warning { width: 100%; }
section#studio .contents.gallery a { float: left; width: 50%; }
section#studio .contents.gallery a img { width: 98%; }


section#servizi ul { padding: 0; width: 300px; list-style-type: none; margin: 0; padding: 6px 0 0 0; position: relative; }
section#servizi ul li { }
section#servizi ul li h3 { display: inline; cursor: pointer; padding:0; margin: 0; text-transform: uppercase; font-size: 12pt; margin: 10px 0px 4px 0px;}
section#servizi ul li .detail { display: none; font-size: 11pt; margin: 0px; height:auto; width: auto; padding: 5px; border: 2px solid #cbedff; background: #FFFFFF none; position: relative; top: 0; left: 0; }
section#servizi ul li .detail.conservativa	{ background: url("../img/servizi_s_conservativa.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.chirurgia		{ background: url("../img/servizi_s_chirurgia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.endodonzia		{ background: url("../img/servizi_s_endodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.igiene			{ background: url("../img/servizi_s_igiene.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.impianti		{ background: url("../img/servizi_s_impianti.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.ortodonzia		{ background: url("../img/servizi_s_ortodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.parodontologia	{ background: url("../img/servizi_s_parodontologia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.pedodonzia		{ background: url("../img/servizi_s_pedodonzia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.protesi			{ background: url("../img/servizi_s_protesi.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.radiologia		{ background: url("../img/servizi_s_radiologia.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail.sedazione		{ background: url("../img/servizi_s_sedazione.jpg") no-repeat scroll 0 0 #FFFFFF; }
section#servizi ul li .detail .title { display: block; font-size: 12pt; font-weight: bold; border-bottom: 2px solid #64AAD0; padding-bottom: 6px;  }

section#servizi ul li .detail .detailtext { border-radius: 0; position: relative; margin-top: 254px; width: auto; padding: 0; display: block; background-color: #FFFFFF; }
section#servizi ul li .detail .detailtext .title { display: block; font-size: 12pt; font-weight: bold; border-bottom: 2px solid #64AAD0; padding-bottom: 0;  }
section#servizi ul li .detail .detailtext p { margin: 0;  }

footer { width: 100%; }
footer .footer_social { width: 300px; height: 24px; margin: 10px auto; text-align: center; } 
footer .footer_info { width: 300px; height: 40px; margin: 10px auto; text-align: center; font-size: 70%;} 

.booking { position: fixed; bottom: 10px; right: 10px; } 
.booking a { }
.booking img { height: 40px; width: 40px; }

section#prenotazione form { display: block; background-color: #eaf8ff; padding: 4%; margin-bottom: 10px; margin-top: 0px; width: 92%; }
section#prenotazione form div { margin-bottom: 20px; }
section#prenotazione form div ul { width: 100%; margin-bottom: 20px; }
section#prenotazione form div ul li { padding: 0; }
section#prenotazione form input { font-size: 12pt; }
section#prenotazione form textarea { font-size: 12pt; width:260px; height: 100px; border: 1px solid #666666; }

section#prenotazione form .formcol { float: none; }

.popup {
    overflow: auto;
    font-size: 10pt;
    height: 420px;
}

.hover_bkgr_fricc > div {
	top: 10px;
}

}