@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html {-webkit-text-size-adjust:none;}
body {margin:0; padding:0; border:0; -webkit-font-smoothing:antialiased; -webkit-user-modify:read-plaintext-only; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); font-family:'Poppins', sans-serif; font-weight: 400; color: #fff;background-image: url(../images/back-sfere.webp);background-position: left bottom; background-size: cover; background-color:#000000;background-attachment: fixed;} 
:focus {outline-style:none;}
* {margin:0; padding:0;}
p, h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight: normal;}

header {width: 100%; height: 90px; background-color: #000000; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); position: fixed; top: 0; left: 0; z-index: 2; display: table;}
header .wrapper {display: table-cell; vertical-align: middle; position: relative;}
header .container {max-width: 1200px; margin: auto; padding: 0 36px;}
header .logo {height: 35px;}
header ul {list-style: none; padding: 0; float: right;}
header ul li {list-style: none; display: inline-block; padding: 0 8px;}
header ul li:last-child { padding: 0 0 0 25px;}
header ul li a {color: #fff; text-decoration: none; display: block; height: 35px; position: relative; line-height: 35px; font-size: 14px;transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s}
header ul li a:after {content: ""; width: 0; height: 1px; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: #fff; transition: width 0.4s;}
header ul li a .fas {font-size: 28px; vertical-align: middle; margin-right: 4px;}
header ul li a:hover::after { width: 100%;}
header ul li:last-child a:hover::after { width: 0;}
header ul li a:hover .fas {-webkit-animation:jello-horizontal 1.3s infinite both;animation:jello-horizontal 1.3s infinite both}
header .burgr-icon {display: none; cursor: pointer; float: right;}
header .bar1, header .bar2, header .bar3 {width: 28px;height: 2px;background-color: #fff; margin: 6px 0;transition: 0.4s;}
header .change .bar1 {-webkit-transform: rotate(-45deg) translate(-3px, 6px);transform: rotate(-45deg) translate(-3px, 6px);}
header .change .bar2 {opacity: 0;}
header .change .bar3 {-webkit-transform: rotate(45deg) translate(-4px, -9px);transform: rotate(45deg) translate(-4px, -9px);}

.sidenav {height: 100vh; width: 0; position: fixed; z-index: 1; top: 0;left: 0; background-color:#000000;overflow-x: hidden;transition: 0.5s; padding-top: 100px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);}
.sidenav a {padding: 0 20px; color: #fff; text-decoration: none; display: block; height: 46px; line-height: 46px; font-size: 14px;}
.sidenav a .fas {font-size: 28px; vertical-align: middle; margin-right: 4px;}

.section-login {width: 100%; height: 100vh; display: table;-webkit-animation:color-change-3x 4s linear infinite alternate both;animation:color-change-3x 4s linear infinite alternate both }
.section-login .wrapper {display: table-cell; vertical-align: middle; position: relative;}
.section-login .container {max-width: 400px; margin: auto; padding: 36px; text-align: center;}
.section-login h1 {font-weight: 500; font-size: 35px; line-height: 1; -webkit-animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both}
.section-login h1 strong {font-weight:700 }
.section-login p {font-size: 14px;}
.section-login .logo {width: 60%;}
.section-login .logo-small {height: 16px;}
.section-login .box {width: 90%; background: #FFFFFF; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);border-radius: 45px; padding: 40px 5%; margin: 15px 0; display: block; color:#313131}
.section-login .box input {width: 92%; margin-bottom: 10px; border: 1px solid #5A5A5A; background-color: #fff; height:40px; line-height:40px; border-radius:40px; color:#5A5A5A; font-size: 14px; padding: 0 4%;  font-family: 'Poppins', sans-serif; transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s;}
.section-login .box input:hover {box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.section-login .box input:focus {box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.section-login .box input[type="button"] {background-color: #000000 !important;color: #fff !important; text-transform: uppercase; margin-top: 10px; cursor: pointer;transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s; width: 100%;}
.section-login .box input[type="button"]:hover {background-color: #5A5A5A !important; color: #fff !important;}

.section-header {width: 100%; height: 30vh; min-height: 200px; margin-top: 90px; display: table;background-image: url(../images/back-quadri.webp); background-size: cover; }
.section-header .wrapper {display: table-cell; vertical-align: middle; position: relative;}
.section-header .container {max-width: 1200px; margin: auto; padding: 36px; text-align: center;}
.section-header h1 {font-weight: 500; font-size: 45px; line-height: 1; color: #5A5A5A; -webkit-animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both}
.section-header h1 strong {font-weight:700 }

.section-body  {width: 100%;-webkit-animation:color-change-3x 4s linear infinite alternate both;animation:color-change-3x 4s linear infinite alternate both}
.section-body .wrapper-header {position: relative; display: block; border-bottom: 1px solid #fff;}
.section-body .wrapper-header .row {margin-bottom: 0 !important;}
.section-body .wrapper {position: relative; display: block;}
.section-body .container {max-width: 1200px; margin: auto; padding: 36px; position: relative;}
.section-body .row {width: 100%; position: relative; margin-bottom: 35px;}
.section-body .titolo {font-weight: 600; font-size: 35px; line-height: 1; display: inline-block;}
.section-body .titoletto {font-weight: 600; font-size: 25px; line-height: 1; display: inline-block;}
.section-body .sottotitolo {font-weight: 300; font-size: 14px; opacity: 0.8; line-height: 1; display: block;}
.section-body .sottotitolo-principale {font-weight: 300; font-size: 14px; opacity: 0.8; line-height: 1; display: block;}
.section-body .testo {font-weight: 400; font-size: 16px; line-height: 1.4; }
.section-body .testo p {font-weight: 400; font-size: 16px; line-height: 1.4;}
.section-body .label {font-weight: 300; font-size: 12px; opacity: 0.8; line-height: 1; display: block;position: absolute; right:13px; top:-20px;}
.section-body select {border: 1px solid #fff; background-color: transparent; height:40px; line-height:40px; border-radius:40px; color:#fff; position: absolute; right:0; top:0; cursor: pointer; font-size: 14px; padding: 0 50px 0 20px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #fff, #fff); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em;background-repeat: no-repeat;font-family: 'Poppins', sans-serif; transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s;}
.section-body select option { color:#5A5A5A;font-family: 'Poppins', sans-serif;}
.section-body select:hover { background-color: rgba(255,255,255,0.15)}
.section-body select:focus { background-color: rgba(255,255,255,0.15)}

.section-body .box {width: 94%; background: #FFFFFF; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); border-radius: 45px; padding: 25px 3%; margin: 15px 0 0 0; display: block; color:#313131}
.section-body .box .grafico {height: 350px; width: 100%;}
.section-body .box .grafico-big {height: 500px; width: 100%;}

.section-body .box .barra {width: 98%; height: 13px; border-radius: 3px; background: linear-gradient(270deg, #C8453A 0%, rgba(200, 69, 58, 0.4) 100%);}
.section-body .box .barra-valori {width: 100%; display: flex; position: relative;}
.section-body .box .barra-valori p { width: 9.5%; padding-left: 0.5%; position: relative; text-align: left; font-size: 11px; letter-spacing: -1px; color:#898989; padding-bottom: 23px; padding-top: 2px;} 
.section-body .box .barra-valori p::before {content:""; position: absolute; left: 0; top: 0; border-left: 1px dotted #ccc; height: 100%;}
.section-body .box .barra-valori p:last-child {position: absolute; right:-8%; padding-right: 1px;}
.section-body .box .barra-valori .valore-top {position: absolute; top: 23px; left: 0; text-align: center; width: 30px; margin-left: -15px; z-index: 1}
.section-body .box .barra-valori .valore-down {position: absolute; bottom: -32px; left: 0;text-align: center; width: 30px; margin-left: -15px; z-index: 1}
.section-body .box .barra-valori .valore-top i {color:#000000; position: absolute;bottom: -6px;left: 10px;}
.section-body .box .barra-valori .valore-down i {color:#000000; position: absolute;top: -6px;left: 10px;}
.section-body .box .barra-valori .valore-top span {width:100%; display: block; font-size:10px; color:#fff; background-color:#000000; border-radius: 3px; padding: 1px 0; text-align: center;}
.section-body .box .barra-valori .valore-down span {width:100%; display: block; font-size:10px; color:#fff; background-color:#000000; border-radius: 3px; padding: 1px 0; text-align: center;}

.section-body .nav-tab {width: 100%;margin: 10px 0 0 0; display: inline-table; border-bottom: 1px solid #fff}
.section-body .nav-tab button {width: 50%; text-align: center; border: 0;  border-bottom: 5px solid trasparent; background-color: transparent; text-transform: uppercase; font-size: 14px; color: #fff; padding: 5px 0; cursor: pointer; opacity: 0.5; transition: opacity 0.4s;}
.section-body .nav-tab button:hover {opacity: 1}
.section-body .nav-tab button.tabcurrent {border-bottom: 5px solid #fff; opacity: 1;}
.section-body .tab {position:relative;} 
.section-body .tab-animate-right {position:relative;animation:animateright 0.6s} 
.section-body .tab-animate-left {position:relative;animation:animateleft 0.6s}
.section-body .tab ul {list-style: none; padding: 0; margin: 0; width: 100%;}
.section-body .tab ul li {list-style: none; padding: 0; margin: 0; width: 100%; margin-bottom: 15px; padding-bottom: 15px; border-bottom:1px solid #ccc}
.section-body .tab ul li:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom:0}
.section-body .tab .titolo-quote {width: 100%;font-weight: 600; font-size: 22px; line-height: 1; color: #5A5A5A; margin-bottom: 8px;}
.section-body .tab .dati-quote {width: 33%; line-height: 1.4; font-size: 14px; display: inline-block; vertical-align: text-top;}
.section-body .tab .dati-quote span {color: #5A5A5A; font-weight:700; }

.section-body .accordion {cursor: pointer; width: 100%; max-width: 1272px; padding: 36px; border: none;  text-align: left; outline: none; transition: 0.4s; background-color: transparent;margin: auto;display: block;font-weight: 600; font-size: 30px; line-height: 1; color: #fff; } 
.section-body .active, .section-body .accordion:hover {}
.section-body .accordion:after {content: '\002B'; font-weight: 300; float: right;margin-left: 5px;}
.section-body .active:after {content: "\2212";}
.section-body .panel {border-top: 1px solid #fff; max-height: 0; overflow: hidden;transition: 0.2s ease-out;}
.section-body .panel .box {background:rgba(255,255,255,0.20);  margin: 0 0 15px 0;color:#fff}
.section-body .panel .box .titolo-mercato {width: 100%; font-weight: 600; font-size: 22px; line-height: 1; margin-bottom: 15px;}
.section-body .panel .box .dati-mercato {width: 19%; line-height: 1.4; font-size: 14px; display: inline-block; vertical-align: text-top;font-weight: 300;}

.section-news {background-image: url(../images/back-quadri.webp); background-size: cover;}
.section-news .wrapper {position: relative; display: block;}
.section-news .container {max-width: 1200px; margin: auto; padding: 36px; position: relative; text-align: center;}
.section-news .titolo {font-weight: 600; font-size: 35px; line-height: 1; display: block; color: #5A5A5A; margin-bottom: 36px;}
.section-news .box-news {width: 30%; background: #FFFFFF; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);border-radius: 45px; margin: 15px 1%; display: inline-block; color:#313131; text-align: left; position: relative;}
.section-news .box-news img {width: 100%;border-radius: 45px 45px 0 0;object-fit: cover;height: 190px;}
.section-news .box-news a {text-decoration: none;}
.section-news .box-news .titolo-news {font-weight: 600; font-size: 20px; line-height: 1; margin: 30px; margin-bottom: 10px; color: #5A5A5A; height: 95px; text-decoration: none;}
.section-news .box-news .testo-news {font-weight: 300; font-size: 14px; margin: 30px; margin-top: 0; margin-bottom: 60px;}
.section-news .box-news .pulsante-news {width: 60px; height: 60px; line-height: 60px; font-weight: 100; border-radius: 100%; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); background-color:#5A5A5A; font-size: 42px; text-align: center; position: absolute; bottom: -30px; left: 50%; margin-left: -30px; color: #fff; text-decoration: none;}
.section-news .box-news .pulsante-news:hover {-webkit-animation:rotate-in-center .6s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-in-center .6s cubic-bezier(.25,.46,.45,.94) both}

footer {background-color: #000000}
footer .wrapper {position: relative; display: block;}
footer .container {max-width: 400px; margin: auto; padding: 36px; position: relative; text-align: center; font-size: 14px;}
footer p {font-size: 14px;}
footer .logo {width: 47%; padding: 1%; margin-top: 10px; display: inline-block;}
footer  .logo-small {height: 16px;}

@-webkit-keyframes color-change-3x{0%{background:rgba(90,90,90,0.40)}50%{background:rgba(150,150,150,0.20)}100%{background:rgba(0,0,0,0.70)}}
@keyframes color-change-3x{0%{background:rgba(90,90,90,0.40)}50%{background:rgba(150,150,150,0.20)}100%{background:rgba(0,0,0,0.70)}}

@-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

@-webkit-keyframes rotate-in-center{0%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);opacity:1}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotate-in-center{0%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);opacity:1}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

@media screen and (min-width: 960px) {
/* SCROLLBAR */
::-webkit-scrollbar{width:8px; cursor:pointer;}
::-webkit-scrollbar-track{ background:#000000;}
::-webkit-scrollbar-thumb{border-radius:0px;background:#92B2E1; cursor:pointer;/* -webkit-box-shadow:0 0 8px rgba(0,0,0,0.3);*/ }	
}


@media screen and (max-width: 959px) {
header {height: 60px;}
header .container {padding: 0 20px;}		
header .logo {height: 25px;}	
header ul {display: none;}	
header .burgr-icon {display: inline-block;}	
.section-login h1 {font-size: 25px;}	
.section-login .container {padding: 20px;}		
.section-login .box input {font-size: 14px;}	
.section-header .container {padding: 20px;}	
.section-header {margin-top: 60px;}
.section-header h1 {font-size: 24px;}
.section-body .container {padding: 20px;}	
.section-body .row {width: 100%; position: relative; margin-bottom: 25px;}	
.section-body .titolo {font-size: 20px;}
.section-body .titoletto {font-size: 17px;}
.section-body .sottotitolo {font-size: 11px;}
.section-body .sottotitolo-principale {font-size: 11px;}	
.section-body .testo {font-size: 12px; }
.section-body .testo p {font-size: 12px;}
.section-body .label {position: relative;top: auto;right: auto;}
.section-body select {margin-top: 10px; font-size: 12px; width: 100%; position: relative;}	
.section-body .box {border-radius: 17px;}
.section-body .box .grafico {height: 250px;}
.section-body .box .barra-valori p {font-size: 10px;} 	
.section-body .nav-tab button {font-size: 11px;}	
.section-body .tab .titolo-quote {font-size: 17px; margin-bottom: 0px;}
.section-body .tab .dati-quote {width: 100%; font-size: 12px; display:block; margin-top: 8px;}
.section-body .accordion {padding: 20px;font-size: 17px;} 
.section-body .panel .box .titolo-mercato {font-size: 17px;margin-bottom: 0px;}
.section-body .panel .box .dati-mercato {width: 100%; font-size: 12px; display: block; margin-top: 8px;}
.section-news .container {padding: 20px;}	
.section-news .titolo {font-size: 20px; margin-bottom: 20px;}
.section-news .scroll {overflow: auto; white-space: nowrap; padding-bottom: 20px;}
.section-news .box-news {width:70%; border-radius: 25px; margin: 15px 1%; margin-bottom: 20px; white-space: normal;}	
.section-news .box-news img {width: 100%;border-radius: 25px 25px 0 0;}
.section-news .box-news .titolo-news {font-size: 17px; margin: 20px; margin-bottom: 10px;height: 60px;}
.section-news .box-news .testo-news {font-size: 12px; margin: 20px; margin-top: 0;margin-bottom: 65px;}	
.section-news .box-news .pulsante-news {bottom: -20px;}	
footer .container {padding: 20px;}	
footer .container p {font-size: 12px;}	
}