/* CSS Document */ 
.box-popup { display: none; position: fixed; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%);  max-width: 90%; height: auto; max-height: 80%; background-color: rgba(255,255,255,1); background-image: url("bg-popup.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; font-size: 27px; color: rgba(0,0,0,1) !important;  z-index: 3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.box-popup >.box-popup-close-btn { position: absolute; width: 32px; height: 32px; line-height: 32px; top: 20px; right: 20px; background-color: #808080; color: #fff; font-size: 24px; text-align: center; cursor: pointer; transition: background .3s;z-index: 9  }
.box-popup >.box-popup-close-btn:hover { background-color: #333;transition: background .3s  }
@media screen and (max-width: 1439px) {
	.box-popup { width: 800px;}
}
.box-popup > .wrapper { position: relative; width: 100%; height: 100%; display: block;}

.box-popup > .wrapper > .inner {position: relative;  margin: 30px 30px; padding: 0 20px; border:0px dashed #ccc; }
.box-popup > .wrapper > .inner .titolo { border:0px dashed #ccc; margin-bottom: 20px; padding: 5px 10px; text-align: center; font-family: 'Phenomena', san serif !important; font-size: 40px; }
.box-popup > .wrapper > .inner .sottotitolo { border:0px dashed #ccc; margin-top: -20px; margin-bottom: 20px; padding: 5px 10px; text-align: center; font-family: 'Phenomena', san serif !important;font-size: 20px; }
.box-popup > .wrapper > .inner .testo {min-height: 30px; height: 27vH; max-height: 300px; border:0px dashed #ccc; margin-bottom: 20px; overflow: hidden; } 
.box-popup > .wrapper > .inner .testo > .inner-scroll { width: 100%; height: 100%; padding-right: 15px; overflow-y: scroll; font-family: 'Nunito Sans', san serif !important;font-size: 14px; }
.box-popup > .wrapper > .inner .immagine { float: left; border:0px dashed #ccc; margin-right: 35px; margin-bottom: 30px; padding: 0; text-align: center} 
.box-popup > .wrapper > .inner .immagine > img{ width: 100%; height: auto;}
.box-popup > .wrapper > .inner .immagine.no-testo { margin: 0 auto 60px auto; float: none; width: 70%;}
.box-popup > .wrapper > .inner > .wrapper-link { clear: both; text-align: right}
.box-popup > .wrapper > .inner > .wrapper-link.no-testo { text-align: center;}
.box-popup > .wrapper > .inner > .wrapper-link > .btn-link { display: inline-block; padding: 10px 14px;  background-color: #404b61; color: #fff; font-family: 'Phenomena', san serif !important;font-size: 20px; text-align: center; } 
.box-popup > .wrapper > .inner > .wrapper-link > .btn-link:hover { background-color: #000; color: #fff; text-decoration: none} 

.box-popup > .wrapper > .inner .testo > .inner-scroll::-webkit-scrollbar, div.dropdown-menu.show::-webkit-scrollbar {width: 5px;}
.box-popup > .wrapper > .inner .testo > .inner-scroll::-webkit-scrollbar-track, div.dropdown-menu.show::-webkit-scrollbar-track { background-color: transparent;;}
.box-popup > .wrapper > .inner .testo > .inner-scroll::-webkit-scrollbar-thumb, div.dropdown-menu.show::-webkit-scrollbar-thumb { background: #999; overflow-x: hidden;}
.box-popup > .wrapper > .inner .testo > .inner-scroll::-webkit-scrollbar-thumb:hover, div.dropdown-menu.show::-webkit-scrollbar-thumb:hover { background: #333;}

@media screen and (max-width: 667px) {
	.box-popup >.box-popup-close-btn {width: 22px; height: 22px; line-height: 23px; top: 10px; right: 10px;font-size: 14px; }
	 
	.box-popup > .wrapper { overflow-y: scroll;margin: 20px 0; height: 60vH; }
	.box-popup > .wrapper > .inner {margin: 0 0px; overflow-y: scroll;}
	.box-popup > .wrapper > .inner .titolo { font-size: 30px; }
	.box-popup > .wrapper > .inner .sottotitolo { font-size: 24px; }
	.box-popup > .wrapper > .inner .testo { height:auto; max-height: none; margin-bottom: 60px;}	
	.box-popup > .wrapper > .inner .immagine.no-testo { margin: 0 auto 20px auto; float: none; width: 100%;}
	.box-popup > .wrapper > .inner .immagine > img{ width: 100%;}
	.box-popup > .wrapper > .inner > .wrapper-link { text-align: center;    position: fixed;    bottom: 15px;  left: 15px; right: 15px;}
	.box-popup > .wrapper > .inner > .wrapper-link > .btn-link { width: 100%; float: none;}	
}

@media screen and (max-width: 480px) {
	.box-popup { bottom: 0; height:  77% }	
	.box-popup > .wrapper { overflow-y: scroll;margin: 20px 0; height: 90% }
	.box-popup > .wrapper > .inner {margin: 15px 0px; overflow-y: scroll;}
	.box-popup > .wrapper > .inner .titolo { font-size: 30px; }
	.box-popup > .wrapper > .inner .sottotitolo { font-size: 24px; }
	.box-popup > .wrapper > .inner .testo { height:auto; max-height: none; margin-bottom: 60px;}
	.box-popup > .wrapper > .inner .immagine { float: none; margin-right: 0;}
	.box-popup > .wrapper > .inner .immagine.no-testo { margin: 0 auto 20px auto; float: none; width: 100%;}
	.box-popup > .wrapper > .inner .immagine > img{ width: 100%;}
	.box-popup > .wrapper > .inner > .wrapper-link { text-align: center;    position: fixed;    bottom: 15px;  left: 15px; right: 15px;}
	.box-popup > .wrapper > .inner > .wrapper-link > .btn-link { width: 100%; float: none;}
}