/* roboto-regular */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-v30-latin-regular.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-regular.woff') format('woff'); 
}
/* roboto-italic */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/roboto-v30-latin-italic.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-italic.woff') format('woff'); 
}
/* roboto-500 */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/roboto-v30-latin-500.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-500.woff') format('woff'); 
}
/* roboto-500italic */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/roboto-v30-latin-500italic.woff2') format('woff2'),
       url('./fonts/roboto-v30-latin-500italic.woff') format('woff');
}
/* roboto-700 */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-v30-latin-700.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-700.woff') format('woff'); 
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/roboto-v30-latin-900.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-900.woff') format('woff'); 
}
/* roboto-900italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('./fonts/roboto-v30-latin-900italic.woff2') format('woff2'), 
       url('./fonts/roboto-v30-latin-900italic.woff') format('woff'); 
}

/* roboto-condensed-regular */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'),
       url('./fonts/roboto-condensed-v25-latin-regular.woff') format('woff'); 
}
/* roboto-condensed-italic */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/roboto-condensed-v25-latin-italic.woff2') format('woff2'),
       url('./fonts/roboto-condensed-v25-latin-italic.woff') format('woff'); 
}
/* roboto-condensed-700 */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), 
       url('./fonts/roboto-condensed-v25-latin-700.woff') format('woff'); 
}
/* roboto-condensed-700italic */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/roboto-condensed-v25-latin-700italic.woff2') format('woff2'), 
       url('./fonts/roboto-condensed-v25-latin-700italic.woff') format('woff'); 
}


/* Definizione variabili css */
:root {
  --body-color: #333;
  --body-background: #fafafa;
  --h1-color: #224E8B;
  --h2-color: #FE831C;
  --h3-color: #54BAE2;
  --h4-color: #2D6987;
  --title-color: #7EC242;
  --footer-background: #021646; /* #021a3f; */
  --footer-color: #fff;
  --footer-social-color: #fff;
  --footer-social-hover-color: #39f;
  --footer-line-color: #6bb5ff;
  --padding-left: 10%;
  --padding-right: 10%;
  --lesson-title-color: #2d296b;
  --lesson-title-background: transparent;

  /* NAVBAR */
  --navbar-font-family: "Roboto", Arial;
	--nav-background: none;
	--nav-li-color: #2D296B;
	--nav-li-hover-color: #fff;
	--nav-li-hover-background: #2D296B;
	--nav-attivo-background: #2D296B;
	--nav-attivo-color: #fff;
	--navbar-inner-background: none;
	--nav-dropdown-menu-li-a-hover-background: #649f5e;
	--nav-dropdown-menu-li-attivo-a-color: #fff;
	--nav-ul-dropdown-menu-border-bottom: 0px solid #2D296B;
	--nav-dropdown-toggle-caret-border-top-color: #2D296B;
	--nav-dropdown-toggle-caret-border-bottom-color: #2D296B;
}

html{scroll-behavior: smooth;}

* {margin: 0; padding: 0; box-sizing: border-box;}
.clearer {clear: both;}
img {border: none;max-width: 100%;height: auto;}
*:focus{outline: none;}
body, header, nav, article, aside, section, footer, main, figure, figcaption {display: block;}
.clearfix::before, .clearfix::after {content: "\0020"; display: block; height: 0; overflow: hidden;}
.clearfix::after {clear: both;}

.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}

body {margin: 0; padding: 0; font-family: "Roboto", Arial, sans-serif; font-size: 16px; color: var(--body-color); background-color: var(--body-background);}
img {width: 100%; height: auto;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; margin-bottom: 20px;}
h1 { font-size: 2.1em; color: var(--h1-color); }
h2 { font-size: 1.7em; color: var(--h2-color); }
h3 { font-size: 1.4em; color: var(--h3-color); }
h4 { font-size: 1.2em; color: var(--h4-color); }

a, a:hover, a:focus{text-decoration: none;}
.content {padding-left: 10%;padding-right: 10%;}

/* ----------------------------------------------------------------------------------------------------------------------
 * grid system 
 */
.mcp-row {width: 100%; clear: both; display: block;}
.mcp-col {box-sizing: border-box;}
.mcp-col-1 {width: 8.33333%; float: left;}
.mcp-col-2 {width: 16.6666%; float: left;}
.mcp-col-3 {width: 25%; float: left;}
.mcp-col-4 {width: 33.33333%; float: left;}
.mcp-col-6 {width: 50%; float: left;}
.mcp-col-8 {width: 66.666666%;float: left;}
.mcp-col-10 {width: 83.3333%; float: left;}
.pl18{padding-left: 18px;}
.pr18{padding-right: 18px;}
.pl24{padding-left: 24px;}
.pr24{padding-right: 24px;}
.pt18{padding-top: 18px}
.pb18{padding-bottom: 18px}
@media (max-width: 768px) {
  .mcp-col-1, .mcp-col-2, .mcp-col-3, .mcp-col-4, .mcp-col-6, .mcp-col-8, .mcp-col-10 {
    width: 100%;
  }
  .pl18{padding-left: 0 !important;}
  .pr18{padding-right: 0 !important;}
  .page-title {font-size: 40px !important;}
  #header-main .content {padding-left: 10px; padding-right: 10px;}
  #header-main .content > div {flex-direction: column-reverse;}
  .header-buttons {padding-top: 18px !important;}
  .navbar-inner {background: #b4b7c0 !important;}
  .brand {display: none !important;}
  .main {padding-left: 10px !important; padding-right: 10px !important;}
}
.divider{height: 40px;}
.space70{height: 70px;}
.img-polaroid{padding: 2px;}

/* ----------------------------------------------------------------------------------------------------------------------
 * header
 */
.header {height: 100vh; width: 100%; padding-top: 0px; border-bottom: 1px solid #ccc; position: absolute; top: 0;}
.header-menu{display:flex; justify-content:space-between;}
.navbar-padding-top{padding-top: 44px;}
@media screen and (max-width: 979px) {
  .header{height: 100%;}
  .content{padding-left: 10px; padding-right: 10px;}
  .container{min-width: 450px; padding: 2px;}
  .nav-collapse .nav {background-color: #ccc;}
}
@media screen and (max-width: 768px) {
  .navbar-padding-top{padding-top: 10px;}
  .space70{height: 12px;}
  .divider{height: 12px;}
  .vai-su{left: -1000px !important;}
  .header-menu{flex-direction: column;}
  .content{padding-left: 10px; padding-right: 10px;}
  .header{height: 100%;}
  .container{min-width: 0;}
}

/* ----------------------------------------------------------------------------------------------------------------------
 * CTA HOME
 */
.cta{display:flex; justify-content:space-evenly; padding: 36px 10% 48px; position: relative;}
.cta-questy, .cta-login {border: 2px solid #234075; padding: 20px; background: #adadad90; width: 100%; text-align: center;}
.cta-questy{margin-right: 12px; margin-left: 12%;}
.cta-login{margin-left: 12px; margin-right: 12%;}
.cta .btn-blu,
.cta .btn-blu-verde{padding:10px 18px; border-radius: 20px; font-size: 1rem; border-width: 1px;text-shadow: none; border: none;}
@media (max-width: 768px) {
  .cta{padding: 0px 4% 18px; text-align: center; margin-top: -24px;}
  .cta-questy{display: none;}
  .cta-login .btn{width: 100%;}
  .cta-login img{width: 180px;}
}


/* ----------------------------------------------------------------------------------------------------------------------
 * footer
 */
.footer {color: var(--footer-color); background: var(--footer-background); font-size: 16px; width: 100%; position: relative; float:left;}
.footer-top {
  padding-left: var(--padding-left); padding-right: var(--padding-right); padding-top: 60px;
  padding-bottom: 36px; font-size: 1.1em; display: flex; justify-content: space-between; width: 100%;
}
.footer-bottom {padding: 20px 0 10px 0; font-size: 14px; text-align: center;}
.footer-top .social .fa{margin-right: 30px; font-size: 2em; transition: .3s; color: var(--footer-social-color);}
.footer-top .social .fa:hover{color: var(--footer-social-hover-color)}
@media (max-width: 768px) {
  .footer-top{padding: 12px !important; display: block; text-align: center;}
  .footer-top .social{display:none;}
  .footer-menu{display: none;}
}


/* ----------------------------------------------------------------------------------------------------------------------
 * cards
 */
.cards{width: 100%; padding: 0 10%; margin: 0px auto}
.card{width: 30%; margin:0 1.5%; background: #fff; float:left; 
	border:1px solid #ccc;
	transition: .3s;
	box-shadow: 1px 1px 5px 1px #cccccc;}
.card:hover{transform: scale(1.02);}
.card__image{width:100%; height: 180px; object-fit: cover;}
.card__copy{padding:5px 20px; text-align: center;}
.card__copy h3{margin-bottom:0}
.card__copy-gray{background-color: #333; color: #fff;}
.card__copy .btn-link{
  border: 2px solid #39f; padding: 6px 18px; font-size: 1.1rem; font-weight: 500; text-decoration: none;
  background-color: transparent; box-shadow: none; text-shadow: none; color: #fff;
}
.card__copy .btn-link:hover{
  border-color: #fff;
  color: #39f;
}
@media screen and (max-width: 979px) {
  .cards {padding: 0px 10px !important;}
  .card {width: 45%; margin: 0 2%; margin-bottom: 12px;}
}
@media screen and (max-width: 768px) {
  .cards{padding: 12px 24px 12px 12px !important; margin: 12px auto;}
  .card{width: 100%; margin-bottom: 12px !important;}
}


/* ----------------------------------------------------------------------------------------------------------------------
 * banner home
 */
.banner{background: transparent; height:40%;}
.banner__image{
  width:50%; float:left; height:auto;
	background-size: cover;	-o-background-size: cover; -moz-background-size: cover;
	background-position: center center;
  min-height: 320px;
}
.banner__copy{width:50%; float:left;height:320px;display: table; background-color: #fafafa;}
.banner__copy--left{border-left: 8px solid #2D296B;}
.banner__copy--right{border-right: 8px solid #2D296B;}
.banner__copy__right{display: table-cell; vertical-align: middle; padding: 24px 20px 0 36px}
.banner__copy__left{display: table-cell; vertical-align: middle; padding: 24px 36px 0 20px; text-align: right;}
.banner__copy__text h3{font-size: 36px;margin-bottom:0;}
.banner__copy__text h4{font-size: 22px;line-height: 36px !important; margin: 20px 0; color: #333;}
.banner__copy__button{margin-top: 24px; margin-bottom: 12px;}
@media (max-width: 768px) {
  .banner__image{width: 100%;}
  .banner__copy{width: 100%; margin-bottom: 30px;}
}

/* ----------------------------------------------------------------------------------------------------------------------
 * card news
 */
.card-news{display: flex; justify-content: space-between; flex-wrap:wrap;}
.card-news__box{flex-basis: 23%; border: 1px solid #999; border-bottom-width: 4px; background: #f2f2f2; transition: .3s;}
.card-news__image{height: 200px; object-fit: cover;}
.card-news__copy{padding:12px; text-align: center;}
.card-news__copy h3{font-size: 20px; line-height: 1.1; font-weight:400; margin-bottom: 0px; color:#069;}
.card-news__box:hover h3{color: red;}
.card-news__box:hover{border-color: rgb(202, 3, 3); border-bottom-width: 4px;}
.card-news__box{margin-bottom: 24px !important;}
@media (max-width: 979px) {
  .card-news {padding-left: 2% !important; padding-right: 2% !important; }
  .card-news__box{flex-basis: 47%;}
}
@media (max-width: 768px) {
  .card-news{flex-direction:column;}
  .card-news__image{height: 220px; object-fit: cover;}
  .card-news__box{margin-bottom: 24px !important;}
}


/* ----------------------------------------------------------------------------------------------------------------------
 * Intestazione delle pagine
 */
.page-title {font-size: 54px; font-weight: 700; background-image: linear-gradient(to right,var(--h1-color), var(--title-color));
             color: transparent; background-clip: text; -webkit-background-clip: text; line-height: 1.2; 
             margin-top: 6px; margin-bottom: 30px;}

.lesson-title {font-family: 'Roboto Condensed', Roboto, Arial;	font-size: 1.8rem;	font-weight: 600;
	            background-color: var(--lesson-title-background); color: var(--lesson-title-color);	
              margin-left: 0px;	padding: 0px;	line-height: 1.8rem; margin-bottom: 20px; margin-top: 20px;}

.accordion-heading {background: #ececec;}
.accordion a:hover, a:focus, a:active {text-decoration: none;	color: #B94A48;}

/* intestazione corso nel catalogo */
.media-title {font-family: "Roboto Condensed", Roboto, Arial;	font-size: 1.7em; font-weight: normal; 
	            padding-top: 0px; line-height: 33px; margin-bottom: 10px; color: #2D6987;}
.media-title a:hover, a:active, a:focus {color: #B94A48;	text-decoration: none;}

.label-wide {font-size: 1em; padding-left: 12px; padding-right: 12px;	padding-top: 6px;	padding-bottom: 6px;}
.label-big {font-family: "Roboto Condensed", Roboto, Arial;	padding-left: 6px;	padding-right: 6px;
            padding-top: 3px;	padding-bottom: 4px; font-weight: 400; margin-bottom: 1px;}

.quiz-question {color: #006699; font-size: 1.2em; line-height: 1.2em; font-family: "Roboto Condensed", Roboto, Arial;}
.quiz-answer {font-size: 1.1 em; line-height: 1.2em; font-family: "Roboto Condensed", "Roboto", Arial;}

.approval-question, .approval-question p {
  color: #006699; font-size: 1.2em; line-height: 1.2; font-family: "Roboto", Arial;	margin-bottom: 6px;
}

/* BOX STILE METRO */
.box_metro { font-family: Roboto, "Roboto Condensed", Arial; font-size: 1.4em; padding: 12px 6px 12px 6px; margin-bottom: 4px; }
.row_metro { padding: 0px; margin-bottom: 12px; min-height: 4px; background: #ccc; }
.box_metro_icon { float:right; margin-top: -36px; margin-right: -6px; height: 48px; width: 48px; overflow: hidden; margin-bottom: 6px; }
.box_metro_p { line-height: 1.2; font-size: 1em; }

.orange { background: #F09609; color: #FFF; text-shadow: none;}
a.orange:hover { background: #aa6806;}
.blue { background: #1BA1E2; color: #FFF; text-shadow: none;}
.green { background: #339933; color: #FFF; text-shadow: none;}
.brown { background: #A05000; color: #FFF; text-shadow: none;}
a.brown:hover { background: #552b00;}
.red { background: #E51400; color: #FFF; text-shadow: none;}
.purple { background: #A200FF; color: #FFF; text-shadow: none;}
.magenta { background: #FF0097; color: #FFF; text-shadow: none;}
.teal { background: #00ABA9; color: #FFF; text-shadow: none;}
.pink { background: #E671B8; color: #FFF; text-shadow: none;}
.lime { background: #8CBF26; color: #2e2e2e; text-shadow: none;}
a.lime:hover { background: #6f951e; color: #FFF;}
.gray { background: #dbdbdb; color: #FFF; text-shadow: none;}

.boxHtml {height: 100px; overflow: auto; padding: 4px; border: 1px solid #ccc;}
	
.widget {background: #fafafa; border: 1px solid #999; box-shadow: none; margin-bottom: 0.618em; padding: 8px 8px 6px 8px;	border-radius: 4px;}
.widget > h3 {border-bottom: 1px solid #E6E6E6; padding: 0 0 4px; color: #444; font: 300 1.3em/1em 'Roboto Condensed',sans-serif; margin-bottom: 4px;}
.widget > a {font-size: 0.75em;}
.widget > a:hover {color: #B94A48; text-decoration: none;}
.lesson-button-bar { border-bottom: 2px solid #ccc; text-align: right; padding: 0px; padding-bottom:8px; margin-bottom: 12px;display:flex;justify-content:space-between;}
.course-list-purchased {display:flex; flex-wrap:wrap; justify-content:space-between;}
.course-list-purchased-child {
  width: 49%;
  border: 1px solid #999; 
  border-top: 2px solid #999; 
  border-radius: 6px; 
  padding: 6px 10px 8px; 
  margin-bottom: 26px; 
  background: #fff;
}
@media screen and (max-width: 979px) {
  .course-list-purchased {flex-direction: column;}
  .course-list-purchased-child {width: 100%;}
}
.course-list-purchased-title {margin-bottom: 8px; color: #333; padding: 4px 6px 4px; text-align: center; font: 500 1.4rem 'Roboto Condensed',sans-serif;}

/* PAGE -----------------------------------------------------------------------------------------*/
#page {background: #fff;}

/* WRAPPER --------------------------------------------------------------------------------------*/
#wrapper {padding-top: 20px; padding-bottom: 20px; background: #fff; height: 80vh;}
#strollerx{padding-left: 10%; padding-right: 10%; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc;}

/* LOGO -----------------------------------------------------------------------------------------*/
#logo {position: absolute; top: 10px; left: 10px; overflow: hidden; width:  200px; height: 80px;}

/* NAVIGATOR ------------------------------------------------------------------------------------*/
#navigator {margin: 0px; height: 42px; opacity: 0.8; z-index: 10000; padding-top: 2px; background: #6961a8;}
#top-header-cx1 {padding-top: 24px; display:flex; flex-direction:column;}
#social {margin: 0px; height: 44px; padding-top: 6px;}

/* CONTENITORE BOX PAGINE -----------------------------------------------------------------------*/
#bloxContainer {
	padding-left: 1.70%; 
	padding-right: 1.90%; 
	padding-top: 36px; 
	padding-bottom: 36px; 
	border-bottom: 1px solid #ccc;
}

#slider {
	margin-top: 12px;
	margin-bottom: 12px;
	padding-left: 10%; 
	padding-right: 10%; 
	padding-top: 4px; 
	padding-bottom: 1px;
} 
@media (max-width: 979px) {
  #slider { display: none; }
}

/* ----------------------------------------------------------------------------------------------------------------------
 * CONTAINER 
 */
#contenuto { min-height: 400px;	padding: 12px 0px;}
#info{flex-direction:coloumn; margin-top:3%;}


/* ----------------------------------------------------------------------------------------------------------------------
 * Loader
 */
#div-loader {position:absolute; top:0; left:0; width:100%; height:100%; z-index:5000;}
.div-loader-inside {
  position: absolute; left: 50%; top: 50%;  margin-left: -150px; margin-top: -35px; display: block;   
	width: 300px; height: 70px; background-color: #3f3f3f; opacity: .8;
} 
.div-loader-image {width: 60px; height: 60px;	margin-left: 125px;	margin-top: 5px; 
  background: transparent url('/media/ajax-loader.gif') no-repeat top center;}

 
/* ----------------------------------------------------------------------------------------------------------------------
 * grigio 
 */
.grigio {-webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.grigio > a > img,
.grigio > img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
.grigio > a > img:hover,
.grigio > img:hover {opacity: 0.7; filter: alpha(opacity=70); -webkit-filter: grayscale(100%);}
.grigio > a {text-decoration: none;}


/* ----------------------------------------------------------------------------------------------------------------------
 * Modifica Bottoni Bootstrap
 */
.btn {
    user-select: none;
    background-image: none;
    border: 1px solid ;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-family: "Open Sans", Arial;
}
.btn-default {color: #333; background-color: #fff; border: 1px solid #ccc;}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {color: #333; background-color: #e6e6e6; border-color: #ccc;}
.btn-success {color: #fff; background-color: #5cb85c; border-color: #5cb85c;}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {color: #fff; background-color: #449d44; border-color: #398439;}
.btn-info {color: #fff; background-color: #5bc0de; border-color: #5bc0de;}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {color: #fff; background-color: #31b0d5; border-color: #31b0d5;}
.btn-warning {color: #fff; background-color: #f0ad4e; border-color: #f0ad4e;}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {color: #fff; background-color: #ec971f; border-color: #ec971f;}
.btn-danger {color: #fff; background-color: #d9534f; border-color: #d9534f;}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {color: #fff; background-color: #c9302c; border-color: #c9302c;}
.btn-primary {color: #fff; background-color: #428bca; border-color: #428bca;}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {color: #fff; background-color: #3071a9; border-color: #3071a9;}


/* ----------------------------------------------------------------------------------------------------------------------
 * Altri bottoni
 */
.btn-viola {color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #cb3de4; border-color: #cb3de4;}
.btn-viola:hover,
.btn-viola:focus,
.btn-viola:active,
.btn-viola.active,
.btn-viola.disabled,
.btn-viola[disabled] {color: #FFFFFF;	background-color: #9f22d5;	border-color: #9f22d5;}

.btn-porpora {color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);	background-color: #f12792;	border-color: #f12792;}
.btn-porpora:hover,
.btn-porpora:focus,
.btn-porpora:active,
.btn-porpora.active,
.btn-porpora.disabled,
.btn-porpora[disabled] {color: #FFFFFF;	background-color: #bc0c68;	border-color: #bc0c68;}

.btn-oro {color: #FFFFFF;	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);	background-color: #D6A93E;	border-color: #D6A93E;}
.btn-oro:hover,
.btn-oro:focus,
.btn-oro:active,
.btn-oro.active,
.btn-oro.disabled,
.btn-oro[disabled] {color: #FFFFFF;	background-color: #9f7a22;	border-color: #9f7a22;}

.btn-blu {color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #211c66; border-color: #211c66;}
.btn-blu:hover,
.btn-blu:focus,
.btn-blu:active,
.btn-blu.active,
.btn-blu.disabled,
.btn-blu[disabled] {color: #FFFFFF; background-color: #2b20c4; border-color: #2b20c4;}

.btn-blu-verde {color: #FFFFFF; text-shadow: none;	background-color: #0099CC;	border-color: #0099CC;}
.btn-blu-verde:hover,
.btn-blu-verde:focus,
.btn-blu-verde:active,
.btn-blu-verde.active,
.btn-blu-verde.disabled,
.btn-blu-verde[disabled] {color: #FFFFFF;	background-color: #008C46;	border-color: #008C46;}
.btn-blu-verde.disabled,
.btn-blu-verde[disabled] {color: #FFFFFF;	background-color: #0082ac;	border-color: #0082ac;}

/* Timer */
.days{float: left;margin-right: 4px;}
.hours{float: left;font-weight: bold;}
.minutes{float: left;font-weight: bold;}
.seconds{float: left;font-weight: bold;}
.title{float: left;}
.clearDiv{clear: both;}

/* ----------------------------------------------------------------------------------------------------------------------
 * Vai su
 */
#vai-su{position: fixed;bottom: 10px;right: 10px;cursor: pointer;display: none;width: 36px;height: 36px;z-index: 16000;
    background: #ccc url("media/gotop.png");opacity: .9;
}
#vai-su:hover {
	background: #ccc url("media/gotop_blue.png");
}


/* ----------------------------------------------------------------------------------------------------------------------
 * Panel
 */
.panel {padding: 15px; margin-bottom: 20px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);}
.panel-heading {padding: 10px 15px; margin: -15px -15px 15px; font-size: 17.5px; font-weight: 500; background-color: #f5f5f5; border-bottom: 1px solid #dddddd; border-top-right-radius: 3px; border-top-left-radius: 3px;}
.panel-footer {padding: 10px 15px; margin: 15px -15px -15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
.panel-primary {border-color: #428bca;}
.panel-primary .panel-heading {color: #ffffff; background-color: #428bca; border-color: #428bca;}
.panel-success {border-color: #d6e9c6;}
.panel-success .panel-heading {color: #468847; background-color: #dff0d8; border-color: #d6e9c6;}
.panel-warning {border-color: #fbeed5;}
.panel-warning .panel-heading {color: #c09853; background-color: #fcf8e3; border-color: #fbeed5;}
.panel-danger {border-color: #eed3d7;}
.panel-danger .panel-heading {color: #b94a48; background-color: #f2dede; border-color: #eed3d7;}
.panel-info {border-color: #bce8f1;}
.panel-info .panel-heading {color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1;}


/* Nasconde quando si riduce la finestra (per mobile) */
@media (max-width: 979px) {
	#bloxContainer {padding: 5px 0px;}
	#slider {padding: 5px 0px;}
	#strollerx{padding:5px 0px;}
	#top-header-cx1 {display:none;}
	#top-header-cx2 {display:none;}
	#loginreg{margin-top:0px;}
	#info{flex-direction:row;	margin-top:0%;}
}

@media (max-width:768px){
	#slider {display:none;}
	#twenty {padding:0px 35%;}
	#empty{display:none;}
	#top-header-cx {display:none;} 
	#loginname{display:block;}

}


/** */

.hero {
	height: 100vh;
  padding: 100px 10% 20px 10%;
  background-image: linear-gradient(rgba(148, 159, 179, 0.4), rgba(54, 104, 184, 0.31)), url(media/hero.jpg);
  background-size: cover;	-o-background-size: cover; -moz-background-size: cover;
	background-position: center center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #afafaf;
}
@-webkit-keyframes gradientAnimationTopBottom {
	from {background-position: center 0;}
	to {background-position: center calc(100% - 60vh);}
}
@keyframes gradientAnimationTopBottom {
	from {background-position: center 0;}
	to {background-position: center calc(100% - 60vh);}
}
@-webkit-keyframes gradientAnimationLeftRight {
	from {background-position: center 0;}
	to {background-position: calc(100% - 60vh) center;}
}
@keyframes gradientAnimationLeftRight {
	from {background-position: center 0;}
	to {background-position: calc(100% - 60vh) center ;}
}
@-webkit-keyframes gradientAnimationRightLeft {
	from {background-position: calc(100% - 60vh) center;}
	to {background-position: center 0;}
}
@keyframes gradientAnimationRightLeft {
	from {background-position: calc(100% - 60vh) center;}
	to {background-position: center 0;}
}

.hero .b1 {
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  height: 50vh;
  position: relative;
  background: url(media/menu_concorsi.jpg) 0 0 / cover repeat-x; 
  background-position: center top;
  -webkit-animation: gradientAnimationLeftRight 40s linear infinite;
  animation: gradientAnimationLeftRight 40s linear infinite; 
  animation-direction:reverse;
}
.hero .b2 {
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  height: 50vh;
  position: relative;
  background: url(media/menu_arcadia.jpg) 0 0 / cover repeat-y; 
   background-position: center top;
  -webkit-animation: gradientAnimationTopBottom 40s linear infinite;
	animation: gradientAnimationTopBottom 40s linear infinite;
  -webkit-box-shadow: 1px 5px 20px -6px #000000;
  -moz-box-shadow: 1px 5px 20px -6px #000000;
  -o-box-shadow: 1px 5px 20px -6px #000000;
  box-shadow: 1px 5px 20px -6px #000000;
}
.hero .b3 {
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  height: 50vh;
  position: relative;
  background: url(media/menu_espansione.jpg) 0 0 / cover repeat-x; 
  -webkit-animation: gradientAnimationRightLeft 40s linear infinite;
  animation: gradientAnimationRightLeft 40s linear infinite; 
  animation-direction:reverse;
}
.hero h1 {color: #ffffff; font : normal 900 70px/1 'Roboto', sans-serif; text-align: center; padding-bottom: 50px;}
.hero h2 {color: #4380fa; margin-top: 1rem; margin-bottom: 3rem; font : normal 700 50px/1 'Roboto', sans-serif; text-align: center;}
.hero-box-main {
  width: 86%;
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  height: 50vh;
  position: relative;
  background: url(media/menu_hero.jpg) 0 0 / cover repeat-y;
  background-position: center top;
  -webkit-animation: gradientAnimationTopBottom 40s linear infinite;
	animation: gradientAnimationTopBottom 40s linear infinite;
  -webkit-box-shadow: 1px 5px 20px -6px #000000;
  -moz-box-shadow: 1px 5px 20px -6px #000000;
  -o-box-shadow: 1px 5px 20px -6px #000000;
  box-shadow: 1px 5px 20px -6px #000000;
}

.hero .button {padding: 10px 40px; font-size: 1.2rem; font-weight: 500; color: #fff; background-color: #0099CC; border: 2px solid #0082ac; border-radius: 8px; text-align: center;}
.hero .button:hover {color: #fff; background-color: #0082ac; border: 2px solid #fff;}
.hero-box-main-content{display: none; position: absolute; top: 0; border-radius: 0px;	background: #0082ac90; width: 100%; text-align:center; padding: 24px; height: 100%;}
.hero-box-main-content p {display: block; font-size: 2rem; line-height: 2.3rem; color: #fff;}
.hero-box {
  width: 28%;
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  height: 50vh !important;
  position: relative;
  padding: 20px;
  text-align: center;
  -webkit-box-shadow: 1px 5px 20px -6px #000000;
  -moz-box-shadow: 1px 5px 20px -6px #000000;
  -o-box-shadow: 1px 5px 20px -6px #000000;
  box-shadow: 1px 5px 20px -6px #000000;
}

.hero-box-content {
  position: absolute;
	bottom: 0;
  left: 0;
  border-radius: 0px;
	background: #11111180; 
	width: 100%; 
	text-align:center; 
	height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

.hero-box-content p {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: 500;
  display: block;
  font-size: 1.5rem; 
  line-height: 1.7rem; 
  color: #fff;
}
.burger-menu { padding-top: 44px ;}
.burger-menu span {display: block; width: 36px; border: 1px solid #fff; margin-bottom: 6px; transition: .3s;}
.burger-menu:hover span {border: 1px solid #39f;}
.burger-menu-inverse span {border: 1px solid #333;}
.header-menu {position: absolute; width: 100%; top: 0; left: 0; padding-left: 10%; padding-right: 10%; background-color: #021646;}
.hero-menu {display:flex; justify-content:space-between; width: 100%;}

@media screen and (max-width: 979px) {
  .hero-box { width: 100%; margin-bottom: 20px;}
  .hero { height: 100%; padding-left: 20px; padding-right: 20px;}
  .header-menu { padding-left: 20px; padding-right: 20px;}
  .hero h1 { font-size: 50px; padding: 30px 0px;}
}

.vertical-menu { text-align: center; width: 100%; font-size: 1.1rem; font-weight: 400; font-family: "Roboto Condensed", "Roboto", sans-serif; list-style-type: none;}
.vertical-menu li { padding: 0px; margin-bottom: 12px; width: 100%; display: inline-block;}
.vertical-menu li a{ display: block; padding: 10px 6px;}
.vertical-menu li { color: #2D296B; border: 2px solid #2D296B;}
.vertical-menu li a { color: #2D296B;}
.vertical-menu li:hover, .vertical-menu li:hover a { color: #fff; background: #2D296B;}
.vertical-menu .active { color: #fff; background: #2D296B;}
.vertical-menu .active a { color: #fff; }