@import url(../font/Playfair/stylesheet.css);
@import url(../font/SanFrancisco/stylesheet.css);
@import url(../font/Montserrat/stylesheet.css);

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html{
	height: 100%;
	overflow: hidden;
}

body{
	font-size: 10px;
}

*:focus {
	outline: none;
}

*
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input
{
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
}

.row{
	padding: 0;
	margin: 0;
}

/* MENU OPENING */

.main-box div.menu-items .item.open .item-header{
	box-shadow: 0px 20px 60px 0px rgba(0,0,0,0.4);
}

/* MENU OPENING */

.main-box .menu{
	position: fixed;
	height: 100%;
	width: 25em;
	background-color: #f4f4f4;
}

.main-box div.menu-items{
	position: relative;
	width: 100%;
	height: calc( 100% - 8em - 5em);
	margin-top: 4em;
	/* font-family: SF Pro Display; */
	font-family: Montserrat;
	font-weight: normal;
	color: #ffffff;
	overflow-y: scroll;
}

.main-box div.menu-items > .wrapper{
	height: auto;
	position: relative;
}

.main-box div.menu-items .item .item-header{
	width: 100%;
	height: 10em;
	position: relative;
}

.main-box div.menu-items .item div.menu-content{
	display: block;
	height: auto;
	display: none;
	width: 100%;
	overflow: hidden;
	background-color: #707070;
	color: #ffffff;
	padding: 3em 0 1em 2em;
}

.main-box div.menu-items *{
	transition: box-shadow .3s ease-in-out;
}

/* 22/03/2019 */

.main-box div.menu div#download-msg{
	position: absolute;
	bottom: 0;
	height: 11em;
	width: 100%;
	background-color: #f4f4f4;
	z-index: 100;
	display: none;
}

.main-box div.menu div#download-msg .main-msg{
	font-size: 1.2em;
	text-align: center;
	margin-top: 1.8em;
	font-weight: 600;
}

.main-box div.menu div#download-msg div.bar-wrapper{
	width: 100%;
	height: 3px;
	background-color: #e9e7ec;
	margin-top: 1.3em;
}

.main-box div.menu div#download-msg div.bar-wrapper div.bar{
	width: 60%;
	height: 3px;
	background-color: #7f7f86;
}

.main-box div.menu div#download-msg .sub-msg{
	font-size: 1.2em;
	text-align: center;
	margin-top: 1.3em;
	font-weight: 400;
	color: #9fa7bf;
}

/******************************************************/

.main-box div.menu-items .item div.menu-content >*{
	letter-spacing: 1px;
}

.selected-item{
	text-decoration: underline;
}

.main-box div.menu-items div.menu-content .sub-1.no-box:hover{
	text-decoration: underline;
}

.main-box div.menu-items div.menu-content .sub-2:hover{
	text-decoration: underline;
}

.main-box div.menu-items div.menu-content .sub-1{
	font-size: 1.4em;
	margin-left: 1.3em;
	margin-bottom: 1em;
}

.main-box div.menu-items div.menu-content .sub-box{
	width: 100%;
	height: auto;
	padding: 1em 1em 0.3em 1em;
	display: none;
}

.main-box div.menu-items div.menu-content .sub-box-name{
	width: 100%;
}

.main-box div.menu-items div.menu-content .sub-box-name span{
	float: right;
	margin-right: 1em;
	margin-top: -3px;
	font-size: 1.5em;
}

.main-box div.menu-items div.menu-content .sub-box .sub-2{
	font-size: 1em;
	font-weight: 150;
	margin-bottom: 1em;
}

.main-box div.menu-items::-webkit-scrollbar {
	width: 0;
}

.main-box div.menu-items .item{
	width: 100%;
	height: auto;
}

.main-box div.menu-items .item .icon{
	width: 30%;
	height: 100%;
	float: left;
	text-align: center;
	border-right: solid 1px rgba(255, 255, 255, 0.5);
}

.main-box div.menu-items .item .icon span{
	font-size: 3em;
	line-height: 3.4em;
}

.main-box div.menu-items .item .icon img{
	width: 60%;
	margin-top: 40%;
}

.main-box div.menu-items .item .title{
	height: 100%;
	width: 70%;
	float: right;
	color: #ffffff;
	font-size: 1.5em;
	padding-left: 1.5em;
	letter-spacing: 1px;
}

.main-box div.menu-items .item .title div.sub-title{
	margin-top: 2.1em;
	display: block;
	height: auto;
	font-weight: 150;
	font-style: italic;
	font-size: 0.9em;
}

.main-box div.menu-items .item .title div.main-title{
	font-weight: normal;
	display: block;
	height: auto;
	margin: 0;
	font-size: 0.9em;
}

.main-box div.menu-items .item .title div.single-title{
	font-weight: normal;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
}

#logo{
	width: 20em;
	margin: 2em 2.5em 0 2.5em;
}

.main-box .content {
	width: calc( 100% - 250px );
	float: right;
	margin-left: 25em;
} 

.main-box .content .header{
	width: calc( 100% - 250px );
	height: auto;
	position: fixed;
	z-index: 10;
	background-color: #ffffff;
	font-family: SF Pro Display;
}

.main-box .content .row{
	padding-top: 3em;
}

.main-box .content h1.title{
	font-family: Montserrat;
	font-weight: 200;
	font-size: 3.4em;
	color: #aaaaaa;
	margin-left: 0.85em;
}

hr.title-line{
	width: 5em;
	color: #aaaaaa;
	margin: 0 0 0 3em;
	padding: 0;
	border-width: 2px;
}

.main-box .content .search{
	margin-top: 0.4em;
	width: 20em;
	float: right;
}

.main-box .content .search .input-group-addon{
	border-radius: 0 1.2em 1.2em 0;
	background-color: #f4f4f4;
	border-style: none;
	font-size: 1.5em;
}

.main-box .content .search .input-group-addon i{
	margin-top: 0.7em;
	margin-right: 0.8em;
}

.main-box .content .search input[type=text]{
	border-radius: 1.2em 0 0 1.2em;
	background-color: #f4f4f4;
	border-style: none;
	box-shadow: none;
	font-size: 1.4em;
	height: 2.5em;
}

.main-box .content div.notification{
	float: right;
	margin: 0em 2em 0 2em;
	width: 4em;
	height: 4em;
	border-radius: 1em;
	background-color: #dc045c;
	text-align: center;
}

.main-box .content div.notification span{
	color: #ffffff;
	font-size: 1.5em;
	line-height: 2.6em;
}

.main-box .content .header span.preferiti-btn{
	float: right;
	color: #dc045c;
	font-size: 3.5em;
	margin-right: 0.5em;
}

.main-box .header div.user{
	float: right;
	background-color: #ffffff;
	padding: 0em 2em 2.5em 0em;
}

.main-box .header div.refresh{
	float: right;
	background-color: #ffffff;
	padding: 0.3em 2em 2.5em 0em;
}

.main-box .header div.refresh img{
	height: 3.4em;
	border-radius: 1em;
}

.main-box .header div.user img{
	height: 4em;
	border-radius: 1em;
}

.main-box .header div.user span.user-name{
	font-size: 1.3em;
	margin-left: 0.8em;
}

.main-box .header div.user span.user-options{
	display: inline-block;
	font-size: 1.5em;
	margin-left: 0.8em;
	color: #c4c4c4;
}

.main-container{
	margin-top: 5em;
}

/* 15/03/2019 */

.main-box .splash{
	position: absolute;
	top: 10em; 
	padding-left: 0em;
	height: calc(100% - 10em);
	width: calc(100% - 3.6em);
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.8);
}

.main-box .cards{
	position: relative;
	margin-top: 2.5em; 
	padding-left: 0em;
	height: calc(100% - 10em) !important;
	width: calc(100% - 3.6em);
	overflow-y: auto;
	overflow-x: hidden;
	transition: all 1s ease-in-out;
}

.main-box .cards .info{
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 2.5em 0 0;
	font-family: Montserrat;
	font-weight: 200;
}

.main-box .cards .info *{
	float: left;
}

.main-box .cards .total-contents{
	font-weight: 200;
	color: #aaaaaa;
	font-size: 1.2em;
}

.main-box .cards .download-all{
	font-weight: 300;
	color: #dc045c;
	font-size: 1.2em;
	height: 3em;
}

.main-box .cards div.card{
	margin-left: 4.7em;
	margin-bottom: 4em;
	height: 30em;
	border-radius: 1em;
	border: none;
	box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.49);
	background-size: 101% 101%;
	background-position-y: -1px;
	background-position-x: -1px;
	background-repeat: no-repeat;
	padding: 0;
	width: 20em;
	transition: background-size 1s ease-in-out;
	overflow: hidden;
}

.main-box .cards div.card div.download{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.55);
	z-index: 100;
	opacity: 0;
}

.main-box .cards div.card div.download img{
	width: 5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.main-box .cards div.card div.shade{
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 1em;
	background: linear-gradient(180deg, rgba(0, 53, 96,0) 34%, rgba(0, 53, 96,0.4) 65%, rgba(0, 53, 96,0.6) 73%, rgba(0, 53, 96,0.8) 95%);
}

.main-box .cards div.card div.shade div.icons{
	position: absolute;
	top: 0;
	padding: 1em 1em 0 0;
	height: 4em;
	width: 100%;
	border-radius: 1em 1em 0 0;
}

.main-box .cards div.card div.shade div.icons i{
	float: right;
	color: #ffffff;
	font-size: 2em;
}

.main-box .cards div.card div.shade div.icons img{
	float: right;
	width: 2em;
	margin-right: 1em;
}

.main-box .cards div.card div.shade div.icons img:first-child{
	margin-right: 0.5em;
}

.main-box .cards div.card div.shade div.icons img.preferiti{
	float: left;
	width: 2.2em;
	margin-left: 1em;
}

.main-box .cards div.card div.shade div.icons i:not(:first-child){
	margin-right: 0.5em;
}

.main-box .cards div.card div.shade div.title{
	position: absolute;
	bottom: 1em;
	min-height: 7em;
	width: 85%;
	border-radius: 0 0 1em 1em;
	text-align: left;
	margin-left: 7.5%;
	font-weight: 500;
	font-size: 1em;
}

.main-box .cards div.card div.shade div.title span{
	color: #ffffff;
	/* font-family: Playfair Display; */
	font-family: Montserrat;
	font-size: 1.8em;
	position: absolute;
	bottom: 0;
}

.main-box .cards div.card:hover{
	box-shadow: 0px 0px 30px -1px rgba(0,0,0,0.49);
	background-size: 120% 120%;
}

.main-box .cards div.card, .main-box .content div.notification, .main-box .items span:hover, span.user-options, div.menu-items div.item div.icon,
div.menu-items div.item div.title, .modal-notification .modal-dialog .modal-content .modal-body .msg, .main-box .content .header span.preferiti-btn, 
#logo, .main-box .header div.user img, .main-box .header div.refresh img, .main-box div.menu-items div.menu-content .sub-1 div.sub-box-name, .main-box div.menu-items div.menu-content .sub-1.no-box,
.main-box div.menu-items div.menu-content .sub-2, .main-box .cards .download-all{
	cursor: pointer;
}

/* Notification popup */

.modal-notification .modal-dialog{
	width: 30em;
	top: 0em;
	font-family: "SF Pro Display";
	position: absolute;
	right: 14.8em;
}

.modal-header .close{
	width: 2.1em;
	padding-top: 0.8em;
}

.modal-title{
	line-height: 1em;
}

.modal-notification .modal-dialog .modal-content{
	box-shadow: none;
	border-radius: 1em;
}

.modal-notification .modal-dialog .modal-header{
	height: 4em;
	padding-top: 0.7em;
}

.modal-notification .modal-dialog .modal-header h4.modal-title{
	font-size: 1.8em;
	line-height: 1.4em;
}

.modal-notification .modal-dialog .modal-header button{
	margin-top: 0;
}

.modal-backdrop.show.hidden{
	opacity: 0;
}

.modal-notification .modal-dialog .modal-content .modal-body{
	min-height: 15em;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg{
	width: 100%;
	height: auto;
	background-color: #f6f6f6;
	padding: 1em;
	border-left-color: #dc045c;
	border-left-style: solid;
	border-left-width: 2px; 
}

.modal-notification .modal-dialog .modal-content .modal-body.archive .msg{
	background-color: #ffffff;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg:not(:first-child){
	margin-top: 1.3em;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg span{
	display: block;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg .title{
	font-size: 1.45em;
	font-weight: bold;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg .description{
	margin-top: 0.4em;
	font-size: 1.3em;
	font-weight: normal;
}

.modal-notification .modal-dialog .modal-content .modal-body .msg .time{
	margin-top: 0.5em;
	font-size: 1.1em;
	font-weight: normal;
	font-style: italic;
}

/* Menu Hover */

#competition .item-header:hover{
	background-color: #668196 !important;
}

#leisure .item-header:hover{
	background-color: #f7ab80 !important;
}

#hospitality .item-header:hover{
	background-color: #8ed5dc !important;
}

#preferiti .item-header:hover{
	background-color: #d76a99 !important;
}

#preferiti_page .item-header:hover{
	background-color: #d76a99 !important;
}

#myrtha_technology .item-header:hover{
	background-color: #808080 !important;
}

#technical_details .item-header:hover{
	background-color: #a6a6a6 !important;
}

#projects_layouts .item-header:hover{
	background-color: #cccccc !important;
}

/* Scrollbar */

div.cards::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0px; background-color: #e6e6e6; } 
div.cards::-webkit-scrollbar-thumb{ background-color: #dc045c; border-radius: 0.5em; } 
div.cards::-webkit-scrollbar-track{ background-color: #e6e6e6; border-radius: 0.5em; } 
div.cards::-webkit-scrollbar{ width: 5px; }

div.cover{
	width: 3em;
	height: 2em;
	position: fixed;
	bottom: 0;
	right: 2em;
	z-index: 100;
	background-color: #ffffff;
}

/* Helper */

/* Responsive */


.main-box-navigator
{
	z-index:1100;
	position:absolute;
	top:0;
	display: block;
	width:100%;
	height:18px;
	background-color:#5c6060;
	font-weight: bold;
	font-size: 1.2em;
	color:white;
	padding-left:30px;
	padding-right:30px;
	height:20px !important;

	-webkit-box-shadow: 0 4px 20px -6px black;
	   -moz-box-shadow: 0 4px 20px -6px black;
	        box-shadow: 0 4px 20px -6px black;
}

.main-box-navigator .back-button
{
	float:right;
	cursor: pointer;
}

.main-box-navigator .next-button
{
	margin-left:30px;
	float:right;
	cursor: pointer;
}

.main-box-navigator .close-button
{
	float:left;
	cursor: pointer;
}

.main-box-navigator .title-centered
{
	position:absolute;
	width: 60%;
	text-align: center;
	left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

/*Viewer-media*/

.viewer-media { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 100%;
    min-height: 100%;
}

.viewer-media img{
    object-fit: cover;
    width:100%;
    height: 100%;
}

.viewer-media .preview{
	position:absolute;
	top:2em;
	left:44px;
	font-size:1.6em;
	background-color: rgba(255, 255, 255, 0.0);
	font-family: Montserrat;
	font-weight: 400;
    color: #666666;
	max-width: 400px;
	padding:20px;
}

.viewer-media .preview span
{
	display: inline-block;
	line-height: 1.6em;
	/*padding:20px;*/
}

.viewer-video { 
    min-width: 100%;
    min-height: 100%;;
    z-index:1050;
}

.viewer-video video { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viewer-3d,
.viewer-html { 
    min-width: 100%;
    min-height: 100%;;
    z-index:1050;
}

.viewer-3d iframe,
.viewer-html iframe  { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Loader*/
#loader-tutto-schermo{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    background-color: rgba(255, 255, 255, 0.6);
    display: block;
}
#gif-loader{
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.nodata
{
	height: 100%;
	width: 100%;
	text-align: center;
	font-size: 60px;color: #777;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
view-loader-tutto-schermo
*/