* {color:#ffffff;font-family:'Epilogue',sans-serif;font-weight:300;
   box-sizing: border-box;
}
body,html {background:#07012e;font-size:4vw;overflow-x: hidden;}

#page {padding:8%}

.btn {
    background:#EB0287;
    text-decoration:none;
    line-height: 2.5rem;
    display:inline-block;
    padding:0 1rem;
    border-radius: 2rem;
    font-weight:400;
    font-family: 'MuseoModerno', cursive;
}

header {text-align:center}
#logo {text-decoration:none;display:inline-block;width:50%;height:3rem;
    background:transparent url(assets/ritmine.svg) 0 0 no-repeat;
    background-size:contain; 
    text-indent:-999px;overflow:hidden;
}

h1 {font-family: 'Epilogue', sans-serif;text-align:center;
    font-weight: 600;}

.title p {text-align:center}
img {width:100%;height:auto;}

.powered {padding:1rem 0}

.miami, .rockit {display:inline-block;width:6rem;
    text-indent:-999px;overflow:hidden;height:1.7rem;
    background:transparent url(assets/rockit.png) center center no-repeat;
    background-size:contain; vertical-align:bottom
}
.miami {
    background-image:url(assets/miami.png);
    height:2.5rem;width:4rem
}

.powered .rockit{position: relative;top: -.2rem;}
.powered .miami{top: -.35rem!important;}


.fullwidth {
    width: 100vw;
    transform:translateX(-8%);
}

#fixedheader {
    transition: all 0.5s ease;
    position:fixed;top:-200px;left:0;width:100%;height:5rem;overflow:hidden;background:#07012e;padding:1rem;
    }
#fixedheader.open {top:0;}
#fixedheader {z-index:2}
#fixedheader .logo img {height:1rem;width:auto;}
#fixedheader * {font-family: 'MuseoModerno', cursive;}
#fixedheader #titolo, #fixedheader #numbers .sel {color:#EB0287;font-weight: 800;}
#fixedheader #steps {display:flex;
    flex:0 0 100%;
    width:100%;
    justify-content:space-between
}

.blocchi1 h2 {text-align:center}
.blocchi1 p {text-align:center}
.blocchi1>p {font-size: 1.5rem;line-height: 1.8rem;}
.blocchi1 .textpic {text-align:center;display:flex;flex-direction:column;}
.blocchi1 .textpic>div {background:#0A1ED4;border-radius:20px;padding:1rem;margin-bottom:2rem;order:1}
.blocchi1 .textpic>img {order:0;transform: translateY(2rem);}
.blocchi1 .textpic div h2 {line-height: 1.8rem;}
.blocchi1 .textpic h2 span {display:block;width:2rem;height:2rem;text-align:center;border:1px solid #fff;line-height:2rem;border-radius:50%;margin-bottom:1rem;;margin-left:auto;margin-right:auto}
.blocchi1 .textpic.viola2>div {background:#4F11EB;}
.blocchi1 .textpic.viola3>div {background:#800CCC;}
.blocchi1 .textpic.viola4>div {background:#EB0287;}

.diama {display:block;text-align:center;margin: .5rem 0;line-height:1rem;height:1rem;font-size: 1rem;}

.blocchi2 h2 {text-align:center}
.blocchi2 p {text-align:center;/* line-height: 1.8rem; */}
.blocchi2>p {font-size:1.5rem;line-height: 1.8rem;}

p {}
.blocchi2 .textpic {text-align:center}
.blocchi2 .textpic {overflow:visible;background:#0A1ED4;border-radius:20px;padding:1rem;margin-bottom: 30%;margin-top: 30%;position:relative;padding-top: 18rem;overflow: visible;}
.blocchi2 .textpic img {position:absolute;top: -2rem;left:0;width:100%;transform:scale(1.3);}
.blocchi2 .textpic h2 {font-weight:600;position:absolute;top:0;left:0;text-align:center;width: 100%;}
.blocchi2 .textpic.fan img {top: 2rem;}
.blocchi2 .textpic.pro img {top: 4rem;left: 4rem;transform:scale(1.1);}

.chi {display: block;/* width:100%; *//* flex:0 0 100%; *//* justify-content:space-between; */padding-top:2rem;/* flex-wrap: wrap; */}
.chi a {/* display:flex; */width: 100%;flex: 0 0 100%;height: min-content;justify-content: center;line-height: 2rem;}
.chi p {padding-top: 1rem;margin-top:0;font-size:.8rem;line-height:1.3rem;}
#section-3 img.moveleft {position:relative;left:-50%;}
#section-3 img.moveright {position:relative;left:50%;}

#section-3>p {line-height:1.8rem;font-size:1.5rem;text-align:center}

#section-4 .textpic h2 {font-size:2rem;font-weight: 600;}
#section-4 .textpic {background:#0A1ED4;border-radius:20px;padding:1rem;margin-bottom: 10rem;margin-top:4rem;position:relative;text-align:center;}
#section-4 .textpic.artista:before{content:'';display:block;width: 3rem;height: 4rem;background:transparent url(assets/farf.png) 0 0 no-repeat;background-size:contain;position:absolute;top:-1rem;left:-1rem;}
#section-4 .textpic.artista:after{content:'';display:block;width: 16rem;height: 14rem;background:transparent url(assets/mic.png) 0 0 no-repeat;background-size:contain;position:absolute;bottom: -7rem;right: -4rem;z-index:1}
#section-4 .textpic.artista a.btn {position:relative;z-index:2}
#section-4 .textpic.pro {background:#EB0287}
#section-4 .textpic.pro .btn {background:#0A1ED4}
#section-4 .textpic.fan {background:#800CCC}
#section-4 .textpic.fan:before{content:'';display:block;width: 9rem;height: 4rem;background:transparent url(assets/diam.png) 0 0 no-repeat;background-size:contain;position:absolute;top:-1rem;right:-1rem;}
#section-4 .textpic.fan:after{content:'';display:block;width: 18rem;height: 11rem;background:transparent url(assets/corna.png) 0 0 no-repeat;background-size:contain;position:absolute;bottom: -8.5rem;left: -4rem;}
#section-4 .textpic.pro:before{content:'';display:block;width: 3rem;height: 4rem;background:transparent url(assets/farf.png) 0 0 no-repeat;background-size:contain;position:absolute;top:-1rem;transform: scaleX(-1);left:-1rem;opacity: .8;}
#section-4 .textpic.pro:after{content:'';display:block;width: 16rem;height: 14rem;background:transparent url(assets/pro.png) 0 0 no-repeat;background-size:contain;position:absolute;bottom: -9rem;right: -7rem;}

.blocchi1,.blocchi2,#section-4 {margin-top: 7rem;}

h2.lettore {display:none}

footer {font-size:.5rem;text-align:center;padding:0;margin:0}

@media screen and (min-width: 1024px) {
	/* width */
	::-webkit-scrollbar {
	  width: .5rem;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: #07012e;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #eb0287;
		border-radius:.25rem
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #4F11EB;
	}


	body,html {font-size: 2vw;}
	#page {max-width:1920px;margin:0 auto;padding: 4%;}

    header {text-align:left}
    h1 {text-align:left;font-size: 1.8rem;padding-top: 2rem;padding-bottom: 0;}
    .title {position:relative; }
    .title p {text-align:left;line-height: 1.2rem;padding-right: 2rem;padding-bottom: 1rem;padding-top: 0;font-size: .8rem;}
    .powered {width:50%;font-size:.7rem;line-height: 1rem;}
    .powered .rockit,.powered .miami {width:4rem;height: 1rem;vertical-align: unset;}
    .powered .miami {height:1.7rem;width:3.2rem;top: -.3rem!important;}
    .powered .rockit{top: -.1rem;}

    .gleft {width:50%;}
    #logo {height: 2.2rem;}

    .fullwidth {width:50%;
        position:absolute;right:0;top:0;
        transform: translate(0,-20%);}

    .btn {
        line-height: 1.8rem;
        font-size:.8rem;
    }


    .blocchi1 h2 {text-align:left}
    .blocchi1 p {text-align:left}
    .blocchi1>h2 {text-align:center}
    .blocchi1>p {text-align:center;padding-left: 20%;padding-right: 20%;font-size: 1.2rem;line-height: 1.5rem;}
    .blocchi1 .textpic {text-align:left;flex-direction:row;margin-top:4rem;margin-bottom:4rem;justify-content: center;font-size:.8rem;line-height:1.1rem}
    .blocchi1 .textpic p {margin-bottom: 0;margin-top: 0;}
    .blocchi1 .textpic h2 {font-size: .95rem;font-weight:600;position:relative;margin-bottom: .5rem;
        margin-top: 0;line-height:1.3rem!important}
    .blocchi1 .textpic h2 span {margin-left:0;margin-right:0;display:inline-block;font-family:'MuseoModerno',monospace;font-weight:400;margin-bottom: 0;}
    .blocchi1 .textpic h2.n2 {padding-left:3rem;}
    .blocchi1 .textpic h2.n2 span {position:absolute;top:0;left:0}
    .blocchi1 .textpic>div {width: 48%;flex: 0 0 48%;margin-bottom:0;padding: .5rem 1rem;display: flex;flex-direction: column;justify-content: center;}
    .blocchi1 .textpic>img {width: 25%;height: 25%;flex: 0 1 25%;align-self: center;justify-self: center;transform:none}
    
    .blocchi1 .textpic.right>div {order:0;}
    .blocchi1 .textpic.right>img {order:1}
  
    .blocchi2 {margin-top:5rem}
    .blocchi2 {display:flex;justify-content: space-around;flex-wrap:wrap;padding:0 1rem}
    .blocchi2 h2 {width:100%;flex:0 0 100%;}
    .blocchi2 .textpic h2 {font-size:1rem;font-weight:400}
    .blocchi2>p {width:100%;flex:0 0 100%;padding:0 20%;line-height:1.5rem;font-size: 1.2rem;}
    .blocchi2 .textpic {padding-top: 26%;width: 30%;flex: 0 0 30%;margin-top: 3rem;font-size:.6rem;}
    .blocchi2 .textpic {text-align:left;margin-bottom: 15%;}
    .blocchi2 .textpic img {top: -1rem;transform:scale(1.1);}
    .blocchi2 .textpic.fan img {top: 1rem;}
    .blocchi2 .textpic.pro img {top: 2.3rem;left: 3.1rem;}
 
    #section-3 {text-align:center}
    #section-3>p {padding:0 20%;line-height: 1.5rem;font-size: 1.2rem;}
    #section-3 .chi {text-align:left;line-height: 1.3rem;font-size: .8rem;}
   
	.chi {display: flex; width:100%;flex:0 0 100%;justify-content:space-between;  flex-wrap: wrap; }
	.chi a { display:flex; width: 45%;flex: 0 0 45%;height: min-content;justify-content: center;line-height: 2rem;}
    .chi p {display:flex;flex:0 0 55%;padding-top:0}
   
    #section-3 img.moveleft {position:relative;left:-50%;width:20%}
    #section-3 img.moveright {position:relative;left:50%;width:20%}

    #section-4 {padding:0 10%}
    #section-4>h2 {text-align:center;}
    #section-4 .textpic {height: 16rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-bottom: 0;box-sizing: border-box;margin-bottom: 8rem;}
    #section-4 .textpic h2 {margin-bottom:0;margin-top:0;padding-top: 2rem;font-size:1.9rem}
    #section-4 .textpic p {padding-bottom:2rem;margin-top:0;font-size:.8rem;padding-right:10%;padding-left:10%;line-height: 1.3rem;}

    #section-4 .textpic.fan:after {bottom:-4rem}
    #section-4 .textpic.artista:after {bottom: -3rem;}
    #section-4 .textpic.pro:after {bottom: -8rem;right: -11rem;}

    #fixedheader {display:flex;justify-content:space-between;height: 2rem;padding: .5rem 1rem;}
    #fixedheader .logo {position:absolute;top: 0.5rem;left: 1rem;}    
    #fixedheader #titolo {text-align:center;width: 100%;}
    #fixedheader #steps {position:relative;}
    #fixedheader #steps #numbers {position:absolute;top:0rem;right:0}

    

    

}