:root{
    --feature1-color:#38C4F2; --feature2-color:#62D791; --feature3-color:#FEBA2C;
    --feature4-color:#FD7037; --feature5-color:#CA60EF; --feature6-color:#7E7AF7;
    --text-color:#707070; --main-color:#3391CC; --second-color:#FD2F5B; --section-color:#38C4F2;
    --footer:#dddddd;
    --rotate-30:30deg; --rotate-60:60deg; --rotate-90:90deg; --rotate-120:120deg; --rotate-150:150deg;
    
    --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="112" height="115" viewBox="0 0 70 72.439"><path id="shape" d="M5167.411,3600.086c-4.986,4.535-13.518,14.885-9.277,30.353s16.451,39.854,41.492,27.117,32.882-22.762,23.572-42.911S5195.491,3575.993,5167.411,3600.086Z" transform="translate(-5156.988 -3588.674)"/></svg>');
}

body{font-family:"VAG Rounded Std" !important; margin: 0; padding: 0; }
@font-face {
    font-family: "VAG Rounded BT";
    src: url("../fonts/eba6ff471b149c188c89337749e3dc23.eot");
    /* IE9*/
    src: url("../fonts/eba6ff471b149c188c89337749e3dc23.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/eba6ff471b149c188c89337749e3dc23.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/eba6ff471b149c188c89337749e3dc23.woff") format("woff"), /* chrome、firefox */
    url("../fonts/eba6ff471b149c188c89337749e3dc23.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/eba6ff471b149c188c89337749e3dc23.svg#VAG Rounded BT") format("svg");
    /* iOS 4.1- */
}

@font-face {
    font-family: "VAG Rounded Std";
    src: url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.eot");
    src: url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.eot?#iefix") format("embedded-opentype"), url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.woff2") format("woff2"),
    url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.woff") format("woff"),
    url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.ttf") format("truetype"),
    url("../fonts/21b0e9c93e5b240b0c3b22793c0f3169.svg#VAG Rounded Std") format("svg");
}

.left{text-align: left}
.center{text-align: center}
.right{text-align: right}

.container {width: 1124px; margin: 0 auto; position: relative}

/*** Shape ***/
#shape-1 { position: absolute; max-width: 1600px; top: 0; left: 0; z-index: -999999}

#feature{background-color: #f3f8fb;}
.feature-shape{ display: block; width: 100%; margin: 0}
.primo {margin-bottom: -6px;}

.slogan {position: relative; z-index: 9}
.slogan p{width: 300px; margin: 0 auto; text-align: center; color: #7B7B7B; margin-top: 200px; line-height: 150%;}

h1{font-family:"VAG Rounded BT" !important; color: #3391CC; font-size: 65px; text-align: left;}
h1 span{color: #FD2F5B}

#sez-grafica li {list-style: none; width: 200px !important}
.download {width: 430px; display: flex; justify-content: center; left: 0; top: 330px; position: absolute;}

.cosa h4 {font-size: 36px; line-height: 56px; text-align: left; color: var(--section-color);}
.cosa h2 {font-size: 42px; line-height: 56px; text-align: left; font-family: "VAG Rounded BT" !important; color: var(--section-color);}
.cosa p, .sez-press h3 {font-size: 24px; color: var(--text-color); line-height: 44px; margin-top: 64px}

#sez-domande {margin-bottom: 150px; position: relative}
#sez-domande h2, .sez-press h1  {font-size: 48px; line-height: 56px; text-align: center; font-family: "VAG Rounded BT" !important; color: var(--main-color);}

.sez-press {padding-top: 150px; height: 800px; position: relative}
.pressbg {position: absolute; bottom: 0;  }
.pressbg-parent {left: 0px; right: 0px; width: 240px; margin-left: auto; margin-right: auto; }

#sez-cosa{margin-top: 150px;}
.faqbg{position: absolute; bottom: 0; max-width: 200px; }
.faqbg-parent{left: 210px; top: -100px}

.one, .two {width: 50%; float: left; position: relative}
.one.cosa{margin-top: 140px;}
.ipad-home { right: 0; height: 660px; position: absolute}

/*** Section ***/

#sez-feature{margin-top: -300px}

.absolute{position: absolute;}
.t100{margin-top: 100px !important}
.t500{margin-top: 500px !important}

.iphone-home {top: 330px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 936px; position: absolute}

.feature{
    max-width: 1140px;
    background-color: #f3f8fb;
    margin: 0 auto;
    display:flex;
    justify-content:space-between;
    flex-flow: row wrap;
    position: relative;
    z-index: 999;
}

.icon-s {
    width: 112px;
    height: 116px;
    -webkit-mask-size: cover;
            mask-size: cover;
    -webkit-mask-image: var(--shape);
            mask-image: var(--shape);
    margin-left: 10px;
}
.icon-1{ width: 60px; height: 47px; top: 30px; left: 35px; }
.icon-2{ width: 50px; height: 62px; top: 25px; left: 40px; }
.icon-3{ width: 59px; height: 63px; top: 25px; left: 37px; }
.icon-4{ width: 63px; height: 51px; top: 33px; left: 35px; }
.icon-5{ width: 60px; height: 60px; top: 30px; left: 38px; }
.icon-6{ width: 59px; height: 55px; top: 30px; left: 35px; }

.risultati{ background-color: var(--feature1-color); }
.color1{ color: var(--feature1-color); }
.semplicita{ background-color: var(--feature2-color); }
.color2{ color: var(--feature2-color); }
.flessibilita{ background-color: var(--feature3-color); }
.color3{ color: var(--feature3-color); }
.aggiornamenti{ background-color: var(--feature4-color); }
.color4{ color: var(--feature4-color); }
.intelligenza{ background-color: var(--feature5-color); }
.color5{ color: var(--feature5-color); }
.condivisione{ background-color: var(--feature6-color); }
.color6{ color: var(--feature6-color); }
.opacity{ opacity: 0.3 }

.degree-30{
    -webkit-transform: rotate(var(--rotate-30));
       -moz-transform: rotate(var(--rotate-30));
        -ms-transform: rotate(var(--rotate-30));
         -o-transform: rotate(var(--rotate-30));
            transform: rotate(var(--rotate-30));
            transform: rotate(var(--rotate-30));
}
.degree-60{
    -webkit-transform: rotate(var(--rotate-60));
       -moz-transform: rotate(var(--rotate-60));
        -ms-transform: rotate(var(--rotate-60));
         -o-transform: rotate(var(--rotate-60));
            transform: rotate(var(--rotate-60));
            transform: rotate(var(--rotate-60));
}
.degree-90{
    -webkit-transform: rotate(var(--rotate-90));
       -moz-transform: rotate(var(--rotate-90));
        -ms-transform: rotate(var(--rotate-90));
         -o-transform: rotate(var(--rotate-90));
            transform: rotate(var(--rotate-90));
            transform: rotate(var(--rotate-90));
}
.degree-120{
    -webkit-transform: rotate(var(--rotate-120));
       -moz-transform: rotate(var(--rotate-120));
        -ms-transform: rotate(var(--rotate-120));
         -o-transform: rotate(var(--rotate-120));
            transform: rotate(var(--rotate-120));
            transform: rotate(var(--rotate-120));
}
.degree-150{
    -webkit-transform: rotate(var(--rotate-150));
       -moz-transform: rotate(var(--rotate-150));
        -ms-transform: rotate(var(--rotate-150));
         -o-transform: rotate(var(--rotate-150));
            transform: rotate(var(--rotate-150));
            transform: rotate(var(--rotate-150));
}

.feature ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    margin: 0; padding: 0;
}

.feature li{
    font-size: 1.2em;
    line-height: 1.8em;
    color: var(--text-color);
    width: 320px;
    height: 315px;
    margin: 30px 0;
    position: relative;
}

/*** Altro ***/

#sez-domande a, .sez-press a{
    width: 100%;
    color: #fff;
    font-family: "VAG Rounded BT";
    text-decoration: none;
    display: block;
    border-radius: 90px;
    text-align: center
}

#sez-domande .store, .sez-press .store {
    background: var(--second-color);
    border-radius: 55px;
    padding: 20px 40px;
    box-shadow: 0 3px 6px  rgba(253, 47, 91, 0.2);
    width: 330px;
/*    height: 60px;*/
    margin: 0 auto;
}

#sez-grafica .store {
    background: var(--second-color);
    border-radius: 55px;
    padding: 20px 40px;
    box-shadow: 0 3px 6px  rgba(253, 47, 91, 0.2);
    width: 330px;
    height: 70px;
    margin: 0 15px;
}

div.store a {
    width: 105px;
    height: 21px;
    color: #fff;
    vertical-align:baseline;
    text-align: center;
}
.divider {height: 40px; width: 100%;}

#footer {background-color: var(--second-color); max-height: 280px; padding: 80px 0}

.brand h4{color: #fff; margin-top: 16px}
.footer-logo {width: 250px; margin-right: 100px;}
.list-wrapper h4{color: #fff; font-weight: 500; font-size: 12px; line-height: 16px; text-align: left; margin-bottom: 16px;}
.list-wrapper ul { list-style-type: none; margin: 0; padding: 0; display: block}
.list-wrapper li{font-weight: 700; font-size: 16px; line-height: 18px; margin-bottom: 8px;display: block}
.list-wrapper a{text-decoration: none; color: #fff}

#footer .list-wrapper {width: 200px}

/*** Mixins & Default Styles ***/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
/*   overflow-x: hidden; */
  overflow-y: scroll;
}

header {
/*   width: 100vw; */
/*   height: 100vh; */
  background: #5661f2;
  display: flex;
}
ul {
  list-style: none;
}
/*** Navigation Styles ***/
.h-nav {
  width: 100%;
  height: 120px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  transition: all 0.3s;
}
nav.navShadow {
    box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
    background: #fff;
    height: 100px;
    z-index: 99999
}
nav.navShadow #word-mark {
/*   opacity: 0; */
}

#brand,
#menu,
ul {
  display: flex;
  align-items: center;
}

#brand {
  padding-left: 40px;
}

#logo {
  width: 246px;
  height: 60px;
  background-image: url("../img/lgoo.png") ;
/*
  background: #fff;
  border-radius: 50%;
*/
  cursor: pointer;
}

#word-mark {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  margin-left: 20px;
  opacity: 1;
  transition: all 0.3s;
}

/*** Menu Styles ***/
#menu {
  justify-content: flex-end;
}

.nav-list li {
    margin-left: 20px
}
.nav-list li.store {
    margin-left: 20px;
    margin-right: 50px;
    background: var(--second-color);
    border-radius: 55px;
    padding: 20px 40px;
    box-shadow: 0 3px 6px  rgba(253, 47, 91, 0.2);
    color: #fff
}

.nav-list li.store a {
    width: 105px;
    height: 21px;
    color: #fff;
    vertical-align:baseline;
    text-align: center;
}

.nav-list li a {
    width: 80px;
    height: 20px;
/*    background: #fff;*/
    color: var(--main-color);
    font-family: "VAG Rounded BT";
    text-decoration: none;
    display: block;
    border-radius: 90px
}

#menu-toggle {
  width: 55px;
  height: 55px;
  background: #2ea8ee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  margin-right: 40px;
}
#menu-toggle:hover .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar:first-child {
  -webkit-transform: translateY(7px) rotate(45deg);
          transform: translateY(7px) rotate(45deg);
}
#menu-toggle.closeMenu .bar:nth-child(2) {
  -webkit-transform: scale(0);
          transform: scale(0);
}
#menu-toggle.closeMenu .bar:last-child {
  -webkit-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
}

.bar {
  width: 25px;
  height: 2px;
  background: #fff;
  transition: 0.3s ease-in-out;
}
.bar:nth-child(2) {
  width: 20px;
  margin: 5px 0;
}
.bar:last-child {
  width: 15px;
}

/*** Hero Section Styles ***/
#hero-section {
  width: 100vw;
  height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120px;
}

#head-line {
  width: 520px;
  height: 30px;
  background: #fff;
  border-radius: 90px;
  position: relative;
}
#head-line:before, #head-line:after {
  content: "";
  height: 30px;
  border-radius: 90px;
}
#head-line:before {
  width: 360px;
  background: #fff;
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#head-line:after {
  width: 200px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: -60px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/*** Section Styles ***/
section {
  width: 100vw;
/*  height: calc(100vh - 100px);*/
  display: flex;
  justify-content: center;
}
/*
section:nth-child(odd) {
  background: #fa6c98;
}
section:nth-child(even) {
  background: #fff;
}
*/

#heading {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  margin-top: 40px;
}

.footer {
  width: 100vw;
  display: flex;
  justify-content: center;
}

@media (min-width: 200px) and (max-width: 320px) {
    #logo{width: 150px; height: 44px; background-size: cover}
    .container{width: 80%;}
    
    #sez-grafica{overflow: hidden;}
    
    #sez-domande h2, .sez-press h1 {font-size: 36px; margin-top: 32px}
    .cosa p, .sez-press h3 {font-size: 18px; line-height: 34px; margin-top: 34px}
    #sez-domande .store, .sez-press .store {width: 230px; padding: 20px}
    #sez-domande {margin-top: -80px}
    .sez-press {height: 700px}
    .pressbg-parent {width: 180px}
    
    .slogan {margin-top: 130px}
    .slogan h1{ font-size: 45px; padding-top: 160px; text-align: center}
    .slogan p {margin-top: 250px; line-height: 30px; width: auto}
    #family{position: absolute; top: 0; width: 200px}
    #shape-1 {width: 300px}
    .download { display: block; justify-content: none; width: 100%; top: 380px }
    #sez-grafica .store { margin: 20px auto; }
    
    .ipad-home{height: 321px; width: 335px; margin-top: 450px}
    .iphone-home {width: 350px; display: none}
    #sez-cosa {margin-top: 100px; height: 1050px}
    
    .one{ width: 100%}
    .one.cosa {margin: 0}
    .cosa h4 {font-size: 26px; line-height: 32px}
    .cosa h2 {font-size: 32px; line-height: 48px}
    
    .faqbg {position: relative}
    .faqbg-parent { width: 150px; z-index:9999; left: 0; top: 0; left: 50%; margin-left: -65px;}
    
    .feature {padding-bottom: 50px}
    .feature li {text-align: center; width: 280px;}
    .feature h3 {padding: 30px 0 10px 0;}
    .icon-s {margin-left: -60px; left: 50%; position: relative;}
    .icon-1{ left: 110px; }
    .icon-2{ left: 110px; }
    .icon-3{ left: 108px; }
    .icon-4{ left: 105px; }
    .icon-5{ left: 108px; }
    .icon-6{ left: 105px; }
    .t500 {margin-top: 0px!important}
    
    .mob{display: none}
    
    /*** Privacy Policy ***/
    .term h2 {font-family: "VAG Rounded BT"; text-align: center}
    .term p {text-align: center}
    
    #menu-toggle {
        display: flex
    }
    .nav-list li {
        margin-left: 0
    }
    .nav-list {
        display: inline-block;
        width: 100vw;
        height: 0;
        background: #fff;
        position: absolute;
        top: 120px;
        -webkit-transform: translate(, );
        transform: translate(, );
        box-shadow: 0 5px 30px -4px rgba(0, 0, 0, .2);
        transition: all .3s
    }
    ul.showMenu {
        height: auto
    }
  .nav-list li {
    opacity: 0;
    visibility: hidden;}
    ul.showMenu li {
        opacity: 1;
        visibility: visible;
        padding: 10px 0;
        transition: all .3s .1s;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ddd
    }
    .nav-list li a {
        margin: 0 auto
    }
    #head-line {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    #logo{width: 150px; height: 44px; background-size: cover}
    .container{width: 80%;}
    
    #sez-grafica{overflow: hidden;}
    
    #sez-domande h2, .sez-press h1 {font-size: 38px; margin-top: 32px}
    .cosa p, .sez-press h3 {font-size: 18px; line-height: 34px; margin-top: 34px}
    #sez-domande .store, .sez-press .store {width: 270px}
    #sez-domande {margin-top: -80px}
    .sez-press {height: 700px}
    .pressbg-parent {width: 180px}
    
    .slogan {margin-top: 130px}
    .slogan h1{ font-size: 45px; padding-top: 160px; text-align: center}
    .slogan p {margin-top: 250px; line-height: 30px; width: auto}
    #family{position: absolute; top: 0; width: 200px}
    #shape-1 {width: 350px}
    .download { display: block; justify-content: none; width: 100%; }
    #sez-grafica .store { margin: 20px auto; }
    
    .ipad-home{height: 321px; width: 335px; margin-top: 450px}
    .iphone-home {width: 350px; display: none}
    #sez-cosa {margin-top: 100px; height: 1050px}
    
    .one{ width: 100%}
    .one.cosa {margin: 0}
    .cosa h4 {font-size: 26px; line-height: 32px}
    .cosa h2 {font-size: 32px; line-height: 48px}
    
    .faqbg {position: relative}
    .faqbg-parent { width: 150px; z-index:9999; left: 0; top: 0; left: 50%; margin-left: -65px;}
    
    .feature {padding-bottom: 50px}
    .feature li {text-align: center}
    .feature h3 {padding: 30px 0 10px 0;}
    .icon-s {margin-left: -60px; left: 50%; position: relative;}
    .icon-1{ left: 125px; }
    .icon-2{ left: 130px; }
    .icon-3{ left: 127px; }
    .icon-4{ left: 125px; }
    .icon-5{ left: 128px; }
    .icon-6{ left: 125px; }
    .t500 {margin-top: 0px!important}

    .mob{display: none}
    
    /*** Privacy Policy ***/
    .term h2 {font-family: "VAG Rounded BT"; text-align: center}
    .term p {text-align: center}
    
    #menu-toggle {
        display: flex
    }
    .nav-list li {
        margin-left: 0
    }
    .nav-list {
        display: inline-block;
        width: 100vw;
        height: 0;
        background: #fff;
        position: absolute;
        top: 120px;
        -webkit-transform: translate(, );
        transform: translate(, );
        box-shadow: 0 5px 30px -4px rgba(0, 0, 0, .2);
        transition: all .3s
    }
    ul.showMenu {
        height: auto
    }
  .nav-list li {
    opacity: 0;
    visibility: hidden;}
    ul.showMenu li {
        opacity: 1;
        visibility: visible;
        padding: 10px 0;
        transition: all .3s .1s;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ddd
    }
    .nav-list li a {
        margin: 0 auto
    }
    #head-line {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    
    .slogan { margin-top: 150px; text-align: center}
    .slogan h1 { width: 500px; margin-top: 120px}
    .slogan p { width: 100%; line-height: 40px; font-size: 23px; margin-top: 50px}
    .slogan img { clear: both; }
    
    .download{position: static; width: 100%; margin: 50px 0}
    
    .ipad-home{ margin-top: 450px}
    .iphone-home {width: 350px; display: none}
    #sez-cosa {height: 1250px}
    .t500 {margin-top: 0px!important}
    .one {width: 100%}
    .one.cosa {margin-top: 0}
    
    .feature {padding-bottom: 50px}
    .feature li {text-align: center}
    .feature h3 {padding: 30px 0 10px 0;}
    .icon-s {margin-left: -60px; left: 50%; position: relative;}
    .icon-1{ left: 125px; }
    .icon-2{ left: 130px; }
    .icon-3{ left: 127px; }
    .icon-4{ left: 125px; }
    .icon-5{ left: 128px; }
    .icon-6{ left: 125px; }
    .t500 {margin-top: 0px!important}
    
    .faqbg-parent {top: -360px; left:250px; z-index: 9999}
    #sez-domande {margin: 250px 0 150px 0}

    .mob{display: none}
}

@media (min-width: 769px) and (max-width: 1024px) {
    
    .ipad-home{height: 500px; width: 522px; margin-top: 450px}
    .iphone-home {width: 350px; display: none}
    #sez-cosa {margin-top: 100px; height: 1050px}
    .cosa p {width: 650px}
    .t500 {margin-top: 0px!important}
    .one {width: 100%}
    .one.cosa {margin-top: 0}
    
    .slogan { margin-top: 150px; text-align: center}
    .slogan h1 { width: 370px; font-size: 55px; float: left; margin-top: 64px}
    .slogan p { width: 650px; line-height: 40px; font-size: 23px;}
    .slogan img {margin-top: -260px; width: 300px; margin-left: 350px; clear: both}
    
    .feature {padding-bottom: 50px}
    .feature li {text-align: center}
    .feature h3 {padding: 30px 0 10px 0;}
    .icon-s {margin-left: -60px; left: 50%; position: relative;}
    .icon-1{ left: 125px; }
    .icon-2{ left: 130px; }
    .icon-3{ left: 127px; }
    .icon-4{ left: 125px; }
    .icon-5{ left: 128px; }
    .icon-6{ left: 125px; }
    .t500 {margin-top: 0px!important}
    
    .faqbg-parent {top: -360px; left:390px; z-index: 9999}
    #sez-domande {margin: 250px 0 150px 0}

    .mob{display: none}
}

@media (min-width: 1024px) {
    
    .ipad-home{ width: 470px; height: 450px; margin-top: 130px}
/*    .ipad-home{ margin-top: 20px}*/
    .iphone-home {width: 350px; display: none}
    #sez-cosa {margin-top: 100px; height: 1050px}
    .t500 {margin-top: 0px!important}
    
    .slogan { margin-top: 150px; text-align: center}
    .slogan h1 { width: 430px; font-size: 65px; float: left; margin-top: 64px}
    .slogan p { width: 650px; line-height: 40px; font-size: 23px;}
    .slogan img { width: 420px; clear: both}
    
    /* .feature {margin: 0 80px} */
    #sez-feature {margin-top: -550px;}
    
}