﻿/* GENERAL - RESET */
.clear { clear: both; }
.inline {display:inline;}
.f-right {float: right;}
*{ margin: 0; }


/* Catamaran */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/css/Catamaran-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/css/Catamaran-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/css/Catamaran-Bold.woff2') format('woff2');
}



body{font-family:Catamaran !important; background-color: #FAFAFA}

/* container */
.container-md {max-width: 1100px;}
.container-md.container-minh {min-height: 700px} /* per fissare minimo di altezza */
@media screen and (max-width: 576px) {
	.container-md.container-minh {min-height: 550px}
}


/*header*/
.bg-header{background:#A8DADC}
header .navbar .nav-link {color: #2B5973}
header .navbar .nav-link:hover {color: #2A6F97;text-decoration: none;}
header .navbar-toggler {color: white!important}
header .navbar-nav hr{background: #555!important}
header img.logo {max-width: 300px; width: 100%; height: auto;}
@media screen and (max-width: 576px) {
	header img.logo {max-width: 200px; width: 100%; height: auto;}
}

/*Footer*/
.bg-footer {background: #2B5973}





/* font */
h1{font-size: 28px; color: #028B95; font-weight: bold}
h2{font-size: 24px; color: #028B95; line-height: 140%;}
h3{font-size: 20px; color: #444; line-height: 140%; font-weight: bold;}
h4{font-size: 14px; color: #E27222; font-weight: bold; text-transform: uppercase; line-height: 140%}
h5{font-size: 20px; color: #444; line-height: 140%; font-weight: bold; margin-top:30px}

.font-10 {font-size: 10px; line-height: 130%} 
.font-11 {font-size: 11px; line-height: 130%} 
.font-12 {font-size: 12px; line-height: 130%} 
.font-13 {font-size: 13px; line-height: 130%} 
.font-14 {font-size: 14px}
.font-15 {font-size: 15px}
.font-16 {font-size: 16px}
.font-17 {font-size: 17px}
.font-18 {font-size: 18px} 
.font-20 {font-size: 20px; color:#555} 
.font-25 {font-size: 25px;} 
.truncate {text-overflow: ellipsis; overflow: hidden; width: 160px; height: 1.2em; white-space: nowrap;}
.NumberFont {font-family: 'Arial'!important;}
.fw-500{font-weight:500}

@media screen and (max-width: 576px) {
	h1{font-size: 20px;}
	h2{font-size: 20px;}
	p {font-size: 15px;}
}



/* Link */
a {color: #059DA6; text-decoration: none}
a:not(.btn):hover {color: #057980; text-decoration: underline;}



/* Icona */
.remix {
  stroke: currentColor;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: currentColor;
  width: 1.2em;
  height: 1.2em;
}

.MyIcon {
  /*width: 20px;
  height: 20px;*/
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;  
  flex-shrink: 0;
}

.MyIcon.pulse {
  animation: pulse-once 1200ms ease-out 1;
  transform-origin: center;
}
@keyframes pulse-once {
  0% {transform: scale(0.8);}
  40% {transform: scale(1.8);}
  70% {transform: scale(0.8);}
  100% {transform: scale(1);}
}




/* Primary */
.text-primary {color: #059DA6 !important}
.text-primary-dark {color: #057980 !important}
.border-primary {border-color: #059DA6!important}
.bg-primary{background-color: #059DA6!important}
.bg-primary-light{background-color: #E0ECEC!important}
.bg-primary-dark{background-color: #057980!important}
.btn-primary {background-color: #059DA6; border: 0}
.btn-primary:hover {background-color: #057980; border: 0}
.btn-primary.active {background-color: #057980!important; border: 0 }
.btn-outline-primary {border-color: #059DA6; color: #059DA6}
.btn-outline-primary:hover {border-color: #057980; background-color: #057980; color: #fff}


/* White/Light */
.bg-white {background-color: #FFF !important}
.bg-light {background-color: #F1F4F4 !important}
.bg-very-light {background-color: #FBFBFB}

/* Yellow/Warning */
.yellow {color: #FFC900}
.bg-yellow {background-color: #FFFAC1 !important}
.bg-warning-light {background-color: #FFFBE5!important}

/* Gray */
.text-gray {color: #ccc !important}
.text-gray-dark {color: #444 !important}
.bg-gray  {background-color: #ccc !important}

/* Orange */
.text-orange {color: #E27222 !important}
.bg-orange {background-color: #FF9727!important}
.bg-orange-light {background-color: #FFE68B}
.btn-orange{background-color: #F5901A; color:#fff}
.btn-orange:hover{background-color: #E27222; color:#fff}

.btn-outline-orange{background-color: transparent; border:1px solid #FF9727; color:#fff}
.btn-outline-orange:hover{background-color: #FF9727; color:#fff}




/* Altri */

.text-nome {color: #057980 !important}
.btn-facebook {background-color: #4267b2; color: white}
.btn-facebook:hover {background-color: #365492; color: white}
.bg-soccer {background-image: url('../images/bg-tile.png');}
.bg-soccer-dark {background-image: url('../images/bg-tile-dark.png');}


.btn-circle {width: 60px; height: 60px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 30px;}
.shadow-button {box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);}
.icon-toggle[aria-expanded=false] .text-expanded {display: none;}
.icon-toggle[aria-expanded=true] .text-collapsed {display: none;}


.btn-form  {background-color: #E9ECEF; border-top: 1px solid #DEE2E6; border-right: 1px solid #DEE2E6; border-bottom: 1px solid #DEE2E6; border-left: none; border-radius 0 5px 5px 0}
.btn-form:hover  {color: #A0A0A0; background-color: #E9ECEF; border-top: 1px solid #DEE2E6; border-right: 1px solid #DEE2E6; border-bottom: 1px solid #DEE2E6; border-left: none; border-radius 0 5px 5px 0}			

/* tables */
.hiddenRow {padding: 0 !important;}
    
/* effects */
.centered-and-cropped { object-fit: cover }
.shadow {box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.60);}
.shadow-light {box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.40);}
.blurr {opacity: 0.75; color: rgba(0, 0, 0, 0.75); -webkit-filter: blur(2px); -moz-filter: blur(2px); filter: blur(2px);}
.blurrMore {-webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px);}
.blurrMax {-webkit-filter: blur(7px); -moz-filter: blur(7px); filter: blur(7px);}
.capitalize-first::first-letter {text-transform: uppercase;}
.clipped {}
@media (max-width: 768px)  {
	.clipped {height: 500px; clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 90%, 0 80%);}
	}

.imgFade{
  opacity: 0;
  animation: fadeIn 2s forwards;
	}
	@keyframes fadeIn {
	    to {opacity: 1;}
	}
.clamp1 {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}
.clamp3 {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}
.clamp2 {
  overflow: hidden;
  display: block;
  line-height: 1.4em;
  max-height: 2.8em;   /* 2 righe */
  text-overflow: ellipsis;
}


/* form */
.form-control::placeholder {color: #aaa; opacity: 1;font-style: italic}
.form-control:-ms-input-placeholder {color: #aaa;font-style: italic}
.form-control::-ms-input-placeholder {color: #aaa;font-style: italic}
.bootstrap-select  {border: 1px solid #CED4DA !important;}
.border-form {color: #CED4DA !important}

input[readonly], textarea[readonly], select[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed; 
    color: #495057;
    opacity: 1;
}


/* DEFAULT */

/*header*/
.hero-header {min-height: 40vh;}
.hero-img {object-fit: cover; object-position: center 90%;   height: 100%;  }
.hero-overlay {background: rgba(0, 0, 0, 0.55);}
.HomePage header h1 {font-size: 26px; color: #fff; font-weight:bold}
.HomePage header p {font-size: 20px; color: #fff; font-weight:500}
.HomePage header .btn-outline-orange{background-color:rgba(0, 0, 0, 0.5);font-weight:500;}
.HomePage header .btn-outline-orange:hover{background-color:#FF9727}

.HomePage .home-flag {min-height: 100px;}
 
@media (max-width: 768px) {
  .hero-header {min-height: 30vh;}
  .hero-img {object-position: center 80%;}
  .HomePage header .btn-outline-orange{font-size: 14px; padding:3px 2px 2px 7px }
  .HomePage header h1{font-size:24px}
  .HomePage header p{font-size:18px}  
  
  .HomePage .home-flag {min-height: 20px;}
}

.div-mix {
  position: relative;
  background-color: #ff0000;
  overflow: hidden;
}

.div-mix img {
  position: absolute;
  top:-50px;
  right: -10px;
  width: 150px;
  height: 150px;
  object-fit: fit;
  mix-blend-mode: color-burn; /* o screen, overlay, soft-light… */
  opacity: 0.2;
  object-position: right;
}
/*

.HomePage .copsign{background: url('../images/default.webp') center center no-repeat;background-size: cover;min-height: 400px;}
.HomePage .copertina {background: url('../images/header.webp') bottom center no-repeat;background-size: cover;margin-top:-16px;min-height: 200px;}
.HomePage .copertina .darken {background: rgba(0, 0, 0, 0.4);}
.HomePage .copertina h3 {color: #eee}
.HomePage .cop-bottom .media {font-size: 14px}
.HomePage .cop-bottom .media_body {vertical-align: middle}
*/


/*In page*/


/* PAGE LISTING  */
.PageListing {} /* sul main */
.PageListing h1{font-size: 26px; color: #fff; font-weight:500}
.PageListing h2{font-size: 19px; color: #fff; font-weight:500; margin-top:10px}
.PageListing h3{font-size: 19px; color: #444; font-weight:500}
.PageListing .badge a {color:#444}
.PageListing .badge a:hover {text-decoration:none; color:#ddd!important}
@media screen and (max-width: 576px) {
	.PageListing h1{font-size: 22px;}
	.PageListing h2{font-size: 16px; margin-top:10px}
	.PageListing p {font-size: 14px;}
}

.ossBox .img-thumbnail, .calBox .img-thumbnail {width:120px;height:120px}



.PageListing .ossBox {}
.PageListing .calBox {}
.PageListing .txtRole {color:#555 ;font-size:13px; font-weight:500; text-transform: uppercase;}
.PageListing .txtSubRole {color:#888 ;font-size:13px;}


.PageListing .insBox {}
.PageListing .insBox p {color:#444; font-size:16px; line-height:110%}
@media screen and (max-width: 576px) {
	.PageListing .ossBox h3, .PageListing .calBox h3 {font-size: 17px;}
	.PageListing .ossBox .img-thumbnail, .PageListing .calBox .img-thumbnail {width:80px;height:80px}
	.PageListing .ossBox .txtRole, .PageListing .calBox .txtRole {font-size:10px}
	.PageListing .profBox-slider .img-thumbnail {width:120px;height:120px}
}



/*Page listing - ruoli */
.PageListing .ulscheda li {border-color: #888!important; color:#eee; background-color: rgba(0, 0, 0, 0.7); padding:5px 12px 5px 12px }


/* PROFILI  */

.PageProfile {} /* sul main */
.PageProfile h1{color: #fff;font-weight:500}

/* Header profili */
.PageProfile .prof-header {min-height: 350px;}
.PageProfile .prof-overlay {background-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.8),rgba(0,0,0,0.8))}
.PageProfile .ContenitoreVetrinaItems h2{font-size:18px; text-transform:uppercase; font-weigth:500}

@media screen and (max-width: 576px) {
	.PageProfile .prof-overlay {background-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.5),rgba(0,0,0,0.7),rgba(0,0,0,0.8))}
	.PageProfile .prof-header h1 {font-size:24px;}
	.PageProfile .prof-header p {font-size:14px;}
	.PageProfile .prof-header .breadcrumb {font-size:14px;}
	.PageProfile .ContenitoreVetrinaItems h2{font-size:14px; text-transform:uppercase; font-weigth:500}	
}


/* Profilo utente */
.main-blocco {background: url('../images/stadio.webp') no-repeat center; background-size: cover;}
/* .main-blocco .carosel-container{background: rgba(255, 255, 255, 0.3); box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.9); padding:30px;}  */
.main-blocco .carosel-container{background: black;}  
.main-blocco .carosel-container .VideoItem {box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);} 
.main-blocco .container-md {background: rgba(0, 0, 0, 0.5)}  
.main-blocco .blocco{background: #eee; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.30); padding: 20px; margin-top: 20px;}  
.main-blocco .blocco h2 {margin:0; font-size: 20px;}
.main-blocco ul li {color: #333; border: 0px; padding: 10px; background: rgba(255, 255, 255, 0.5)}  


/* PAGINE BLOG  */
.PageArticle {} /* sul main */
.PageArticle h1 {font-size: 28px; color: #028B95;}
.PageArticle h2 {font-size: 24px; color: #028B95; line-height: 140%;}

.PageArticle .p-sopra {margin-bottom:0; color: #E27222;font-weight :500; font-size:16px; text-transform: uppercase;}
.PageArticle .p-sotto {font-style:italic; color:#444;line-height: 135%;}
.PageArticle .p-autore {font-size:15px;; color:#444}
/* faq */
.PageArticle .faq-list li {font-size: 16px; line-height: 140%}
.PageArticle .faq-list h3 {font-size: 18px}
/* destra */
.PageArticle .destra small{font-size: 14px;}
.PageArticle .destra h2 {font-size: 18px;}
.PageArticle .BoxDestra h3 {font-size: 14px; font-weight:bold}
.PageArticle .destra a {color:#444}
/* Record Articolo */
.PageArticle .RecordArticle h2{font-size:20px}

.BoxVetrina h3{font-size:18px}

@media screen and (max-width: 576px) {
	.PageArticle h1{font-size: 24px;}
	.PageArticle h2{font-size: 22px;}
	.PageArticle .p-sopra {font-size:15px;}
	.PageArticle .p-sotto {font-size:15px;}
	.PageArticle .faq-list li {font-size: 15px;}
	.PageArticle .faq-list h3 {font-size: 16px}
}

/* PAGINE STATICHE  */
.PageStatic {} /* sul main */
.PageStatic h1{font-size: 28px; color: #028B95;}
.PageStatic h2{font-size: 24px; color: #028B95; line-height: 140%; margin-top:30px}
.PageStatic .p-sopra {margin-bottom:0; color: #E27222;font-weight :500; font-size:16px; text-transform: uppercase;}
.PageStatic .p-sotto {font-style:italic; color:#444;line-height: 135%;}

@media screen and (max-width: 576px) {
	.PageStatic h1{font-size: 24px;}
	.PageStatic h2{font-size: 22px;}
	.PageStatic .p-sopra {font-size:15px;}
	.PageStatic .p-sotto {font-size:15px;}
	.PageStatic p {font-size:15px;}
}



/* Record video */
.VideoCell h5{margin: 7px 0 0 0; line-height: 100%}
.VideoCell small{line-height: 100%;}



/* DASHBOARD */
#navdash .active:not(.no-active) {background-color: white !important; color: #17A2B8 !important}
#navdash .nav-link {color: white; border-radius: 4px 4px 0 0 !important;}

.select2-container--Select2DropDown .select2-selection {
    height: auto;              
    padding: 0.30rem 0.10rem;  
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    position: relative; /* necessario per freccetta */
}

.select2-container--Select2DropDown .select2-selection__arrow {
    disoplay: block;
    height: 100%;  /* freccetta riempie verticalmente il box */
    top: 0;
    right: 0.75rem;
}

/* Dashbard templates */
.dash_premium p {font-size:16px}
.dash_premium .ulComp li{min-height: 55px}
.dash_premium .ulIntro li {line-height:18px}

@media screen and (max-width: 576px) {
	.dash_premium p {font-size:14px}
	.dash_premium ul {font-size:14px}
	.dash_premium li {font-size:14px}
	.dash_premium .ulComp li {min-height: 45px}

}



/* list */
ul {font-size: 16px; color: #333; line-height: 160%}
.list-group-item {border-color: #C6DBDC!important;}
.nobullet{list-style-type: none;}




/* campo general */
.IconPlayer{color: #16764A; border-radius:50%; border: 2px solid #16764A; padding:7px}
.IconPlayer:hover {border: 2px solid #1C985E; color:#1C985E ;padding:7px}
.IconPlayerChecked{color: white!important; border-radius:50%; background-color:#1C985E;border : 2px solid #fff; padding:7px}
.IconPlayerDisabled{color: #177F4F; border-radius:50%; ;border: 2px solid #177F4F; padding:7px}
.LabelDisabled{cursor: not-allowed; pointer-events: none;}
  

/* modals */
#submit_modal .modal-dialog {max-width: 400px; margin-top:100px}
#modal_login .modal-dialog {max-width: 400px; margin-top:100px}

/* altro */
.breadcrumb{background-color: transparent!important;}
.breadcrumb-item + .breadcrumb-item::before {content: ">";color: #bbb;}
.max30 {max-width: 30rem;}
label {font-size: 13px; margin-bottom:5px}




/* Stripe */

.BoxProdCkd {
	border-radius: 10px!important;
	border: 4px solid #057980!important;
	cursor: pointer; 
	color: #fff!important; 
	background-color: #057980!important;
	}
	
.BoxProdUnckd {
	border: 2px solid #057980!important;
	border-radius: 15px!important;;
	cursor: pointer; 
	color: #057980!important; 
	background-color: #fff!important;}

.BoxProdCkd .PriceSpace {color: #fff!important}
.ProdOpt {display: none}

