/*LOADING*/
.aero-loading {
	display: none; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 21; 
}

.aero-loading.on {
	display: flex;
}

.bg-aero-loading {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 1;
}

.aero-loading-content {
	position: relative;
	z-index: 2;
	
}

.aero-loading-text {
	margin-top: 10px; margin-bottom: 10px;
	    font-weight: bold;
    font-style: italic;
}

.aero-loading-image {
	text-align: center;
}

.aero-loading-image img {
	height: 70px;
}






/*ALERT*/
.aero-alert {
	display: flex;
	position: fixed; top: 0; left: 0; opacity: 0; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 20;
	pointer-events: none;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-alert.on {
	/*display: flex;*/
	opacity: 1;
	pointer-events: all;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.bg-aero-alert {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #FFF; opacity: 0;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-alert.on .bg-aero-alert {
	opacity: 0.5;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}


.aero-alert .window-aero-alert {
	background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 1%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eeeeee 1%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eeeeee 1%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	width: 300px; height: 200px; position: relative; z-index: 2; top: -500px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-alert.on .window-aero-alert {
	top: 0;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}





#aero-alert-title {
	background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #333333 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #333333 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ color: #FFF; padding: 10px;
}

#aero-alert-content {
	padding: 10px;
} 

.aero-alert-buttons {
	bottom: 10px; right: 10px; width: 100%; position: absolute; text-align: right;
}

#bt-cancel-aero-alert {
	display: none;
}

#bt-cancel-aero-alert.on {
	display: inline-block;
}










/*MODAL*/
.aero-modal {
	display: flex;
	position: fixed; top: 0; left: 0; opacity: 0; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 19;
	pointer-events: none;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-modal.on {
	/*display: flex;*/
	opacity: 1;
	pointer-events: all;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.bg-aero-modal {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #FFF; opacity: 0;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-modal.on .bg-aero-modal {
	opacity: 0.5;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}


.aero-modal .window-aero-modal {
	background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 1%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eeeeee 1%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eeeeee 1%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	
	width: 450px; min-height: 350px; position: relative; z-index: 2; top: -500px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-modal.on .window-aero-modal {
	top: 0;
	transition: all 0.3s;
	transition-timing-function: ease-in;
}





#aero-modal-title {
	background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #333333 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #333333 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ color: #FFF; padding: 10px;
}

#aero-modal-content {
	padding: 10px 20px 20px 20px;
} 

.aero-modal-buttons {
	bottom: 10px; right: 10px; width: 100%; position: absolute; text-align: right;
}

#bt-cancel-aero-modal {
	display: none;
}

#bt-cancel-aero-modal.on {
	display: inline-block;
}


















/*AERO LEFT*/
.aero-site-left, .aero-site-right {
	position: fixed; height: 100vh; width: 320px; background-color: aqua; top: 0; z-index: 20; 
}



.aero-site-left {
	left: -350px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-site-right {
	right: -350px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-site-left.on {
	left: 0; 
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-site-right.on {
	right: 0; 
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}








.site-container {
	transition: all 0.3s;
	transition-timing-function: ease-in;
}

.aero-bk-site-right {
	position: fixed; height: 100vh; width: 350px; background-color: rgba(255,255,255,0.42); top: 0; z-index: 20;
	right: -350px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}
.aero-bk-site-right.on {
	right: 0; 
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}


.site-container.bk-site-right-on {
	margin-left: -350px; 
	margin-right: 350px; 
	
	
	-webkit-box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
	box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}


header.bk-site-right-on {
	margin-left: -350px;
	
	-webkit-box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
	box-shadow: 4px 1px 6px 0px rgba(0,0,0,0.39);
}






.aero-bk-site-left {
	position: fixed; height: 100vh; width: 350px; background-color: rgba(255,255,255,0.42); top: 0; z-index: 20;
	left: -350px;
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}
.aero-bk-site-left.on {
	left: 0; 
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}



.site-container.bk-site-left-on {
	margin-left: 350px; 
	margin-right: -350px; 
	
	
	-webkit-box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
	box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
	
	transition: all 0.3s;
	transition-timing-function: ease-in;
}


header.bk-site-left-on {
	margin-left: 350px;
	
	-webkit-box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
	box-shadow: -4px 1px 6px 0px rgba(0,0,0,0.39);
}




.window-aero-alert .bt-close-aero, .window-aero-modal .bt-close-aero, .aero-site-left .bt-close-aero, .aero-site-right .bt-close-aero {
	float: right;
	filter: invert(100%);
    -webkit-filter: invert(100%);
}

.aero-bk-site-left .bt-close-aero, .aero-bk-site-right .bt-close-aero {
	float: right;
	filter: invert(0);
    -webkit-filter: invert(0);
}


.aero-site-left .bt-close-aero:before, .aero-site-right .bt-close-aero:before {
	filter: invert(0);
    -webkit-filter: invert(0);
}

.aero-bk-site-left .bt-close-aero:before, .aero-bk-site-right .bt-close-aero:before {
	filter: invert(0);
    -webkit-filter: invert(0);
}









.modal-image-view {
	width: 100%; height: 100%; z-index: 1031; position: fixed; align-items: center; top: 0;
}

.modal-image-bg {
	background-color: #000; width: 100%; height: 100%; opacity: 0.5; position: absolute; z-index: 1; 
}

.modal-image-full {
	height: 85%; width: 100%; border-bottom: 1px solid #FC0; position: relative; text-align: center; padding: 0 0 0 0;
}


.modal-image-full-img {
	z-index: 2;
}

.modal-image-full img {
	width: auto; height: 100%; display: inline-block; flex: none;
}

.bt-modal-image-close {
	float: right; margin: 20px 20px 0 0; right: 0; position: absolute; color: #FFF; z-index: 2;
}

.modal-image-left {
	position: absolute; width: 50%; height: 100%; left: 0; cursor: pointer;
}

.modal-image-right {
	position: absolute; width: 50%; height: 100%; right: 0; cursor: pointer;
}

.modal-image-left .btn  {
	position: absolute; width: 40px; height: 40px; top: 48%; left: -40px;
}

.modal-image-right .btn  {
	position: absolute; width: 40px; height: 40px; top: 48%; right: -40px;
}

.modal-image-left:hover .btn {
	color: #FFF;
}

.modal-image-right:hover .btn {
	color: #FFF;
}
	


.modal-image-view-thumbs {
	height: 15%; width: 100%; position: relative; background-color: rgba(0, 0, 0, 0.8);
}

.modal-carrosel-view-thumbs {
	white-space : nowrap; /* this does the trick */
    overflow-y: hidden;
	overflow-x: auto;
	transition: all 0.5s ease;
}



.col-thumb-item {
	max-width: 200px; display: inline-block; margin: 10px; text-align: center; font-size: 13px; cursor: pointer;
	transition: all 0.5s ease;
}

.col-thumb-item.sel {
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 2px solid #FF0;
	transition: none;
	
}

.thumb-item-img {
	width: 100%; height: 80px; 
	background-size: auto 100%; background-position: center center; background-repeat: no-repeat; /*margin-bottom: 5px;*/
}


.col-thumb-item:hover .historico-item-img {
	background-size: auto 120%;
}


.bt_close_thumb {
	position: absolute; width: 40px; height: 40px; top: -20px; left: 49.5%; right: 0; bottom: 0; z-index: 2;
	background-image: url(../images/system/bt_hide_thumb.png);
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}