/* Webfont: Gilroy-Bold */
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../font/Gilroy-Bold/Gilroy-Bold.eot'); /* IE9 Compat Modes */
    src: url('../font/Gilroy-Bold/Gilroy-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/Gilroy-Bold/Gilroy-Bold.woff') format('woff'), /* Modern Browsers */ url('../font/Gilroy-Bold/Gilroy-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../font/Gilroy-Bold/Gilroy-Bold.svg#Gilroy-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: Gilroy-Heavy */
@font-face {
    font-family: 'Gilroy-Heavy';
    src: url('../font/Gilroy-Heavy/Gilroy-Heavy.eot'); /* IE9 Compat Modes */
    src: url('../font/Gilroy-Heavy/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/Gilroy-Heavy/Gilroy-Heavy.woff') format('woff'), /* Modern Browsers */ url('../font/Gilroy-Heavy/Gilroy-Heavy.ttf') format('truetype'), /* Safari, Android, iOS */ url('../font/Gilroy-Heavy/Gilroy-Heavy.svg#Gilroy-Heavy') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: Gilroy-Light */
@font-face {
    font-family: 'Gilroy-Light';
    src: url('../font/Gilroy-Light/Gilroy-Light.eot'); /* IE9 Compat Modes */
    src: url('../font/Gilroy-Light/Gilroy-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/Gilroy-Light/Gilroy-Light.woff') format('woff'), /* Modern Browsers */ url('../font/Gilroy-Light/Gilroy-Light.ttf') format('truetype'), /* Safari, Android, iOS */ url('../font/Gilroy-Light/Gilroy-Light.svg#Gilroy-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Gilroy-Medium */
@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../font/Gilroy-Medium/Gilroy-Medium.eot'); /* IE9 Compat Modes */
    src: url('../font/Gilroy-Medium/Gilroy-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/Gilroy-Medium/Gilroy-Medium.woff') format('woff'), /* Modern Browsers */ url('../font/Gilroy-Medium/Gilroy-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ url('../font/Gilroy-Medium/Gilroy-Medium.svg#Gilroy-Medium') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Gilroy-Regular */
@font-face {
    font-family: 'Gilroy-Regular';
    src: url('../font/Gilroy-Regular/Gilroy-Regular.eot'); /* IE9 Compat Modes */
    src: url('../font/Gilroy-Regular/Gilroy-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/Gilroy-Regular/Gilroy-Regular.woff') format('woff'), /* Modern Browsers */ url('../font/Gilroy-Regular/Gilroy-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../font/Gilroy-Regular/Gilroy-Regular.svg#Gilroy-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Gilroy-Regular', sans-serif;
    color: white;
    text-align: center
}

h1 {
    font-size: 60px;
    font-family: Gilroy-Heavy;
}

h2 {
    line-height: 1.05em;
    font-family: Gilroy-Bold;
}

p {
    font-size: 24px;
}


#last_animation, #last_animation_mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    display: none;
    background: #fff;
}

#iscrizione .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 0.5; /* Firefox */
}

#iscrizione .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
    opacity: 0.5; /* Firefox */
}

#iscrizione .form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
    opacity: 0.5; /* Firefox */
}

#introLoop {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.feedback{font-weight: 900;font-size: 14px}

#_1intro button, #goDomanda1, .download button {
    color: white;
    font-family: Gilroy-Bold;
    border-radius: 18px 18px 0 18px;
    padding: 3px 30px;
    background-color: transparent;
    border: solid white 3px;
    transition: 0.3s;
}

#_1intro button {
    font-size: 1.4rem;
}

#_1intro button:hover, #goDomanda1:hover, .download button:hover {
    background-color: white;
    color: #6297F2;
    transition: 0.3s;
}

.squarcle {
    border-radius: 50px 50px 0 50px;
}

#titleCard {
    text-align: right;
    color: #6297F2;
    background-color: white;
    padding: 30px;
    border-radius: 50px 0 0 50px;
}

#titleCard h1 {
    font-family: Gilroy-Bold;
}

#_2data {
    display: none;
}

#dataCard {
    background-color: #6297F2;
    padding: 60px 30px;
    border-radius: 0 50px 0 0;
}

#titleCard p {
    font-size: 20px;
}

.form-control {
    margin: 10px 0 30px 0;
    color: white;
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    border-radius: 0;
}

.formNotes {
    text-align: left;
    font-size: 12px;
    font-style: italic;
    padding-top: 30px;
}

#dataCard h5 {
    padding: 30px 0 0 0
}

.form-check {
    padding: 10px 0
}

.register {
    text-align: left;
}

.form-control:focus {
    color: white;
    background-color: transparent;
    border-color: white;
    border-bottom: solid 2px #ee3300;
    outline: 0;
    box-shadow: none;
    transition: ease-in 0.3s;
}

.questionsContainer {
    color: white;
    height: 100vh;
    padding: 0;
}

.questionsContainer a:hover {
    color: white;
}

.question {
    height: 33.5%;
    position: absolute;
    z-index: 999;
    width: 100%;
    margin: 0;
}

.swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 60%;
}

.question h2 {
    font-size: 60px;
}

.h-1 {
    padding-top: 33vh;
}


.answers {
    height: 100vh;
    flex-wrap: initial;
    width: 100%;
    margin: 0;
    color: white
}

.answers h3 {
    font-weight: 600;
}

.answers a {
    position: relative;
    color: white
}

.graphContainer svg {
    max-width: 80%;
    margin: auto;
}

/* #domanda2 svg {
    max-width: 50%;
}

#domanda2m svg {
    max-width: 45%;
} */

/* #domanda2m .graphContainer, #domanda2 .graphContainer {
    bottom: 0;
} */

.fb-share-button{
    margin-top: 10px;
    margin-bottom: 50px;
}

.box-share{
    margin-top: 20px;
}

/*link highlight animation*/
.formNotes .form-check a {
    position: relative;
    z-index: 1;
}

.formNotes .form-check a::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    background-color: hsla(341, 97%, 59%, 0.75);
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

.formNotes .form-check a:hover::before {
    transform: scaleX(1);
    transform-origin: center left;
}

/*answers color overlay*/
.answers .c1:hover {
    text-decoration: none;
    background-color: #019ca1;
    transition: 0.3s
}

.answers .c2:hover {
    text-decoration: none;
    background-color: #370a3d;
    transition: 0.3s
}

.answers .c3:hover {
    text-decoration: none;
    background-color: #5aabda;
    transition: 0.3s
}

.answers .c4:hover {
    text-decoration: none;
    background-color: #0f65e6;
    transition: 0.3s
}

.answers .c5:hover {
    text-decoration: none;
    background-color: #0b1057;
    transition: 0.3s
}

.answers .c6:hover {
    text-decoration: none;
    background-color: #1fc9b2;
    transition: 0.3s
}

.answers .c7:hover {
    text-decoration: none;
    background-color: #6403b4;
    transition: 0.3s
}

.answers .c8:hover {
    text-decoration: none;
    background-color: #592c83;
    transition: 0.3s
}

#domanda1 {
    background-color: #23617a;
}

/* .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{transition: all 1s;} */

#domanda2 {
    display: none;
}

#domanda3 {
    display: none;
}

#domanda4 {
    display: none;
}

#domanda5 {
    display: none;
}


.tasty {
    background-color: #fcc01a;
    padding-top: 50px;
}

.tasty #introLoop {
    left: 0;
}

.wild {
    background-color: #cc368b;
    padding-top: 50px;
}

.wild #introLoop {
    left: 0;
}

.cult {
    background-color: #b77447;
    padding-top: 50px;
}

.cult #introLoop {
    right: 0;
}

.smart {
    background-color: #4cad3b;
    padding-top: 50px;
}

.smart #introLoop {
    left: 0;
}

.card {
    color: #777;
    padding: 0;
    border: none;
}

.card p {
    font-size: 14px;
    min-height: 9em;
}

.card h5 {
    font-weight: 900;
}

.mobileSect {
    display: none;
}

.mobileSect .card .card-title{
    min-height: 3.6em;
}

* {
    box-sizing: border-box;
}


@media all and (min-width: 900px) {
    .graphContainer {
        position: absolute;
        bottom: 10%;
    }
}

.carousel h3 {
    font-family: 'Gilroy-Bold';
    color: white;
    padding: 4%;
    line-height: 1.05em;
}

.pagina_2 .carousel-cell {
    width: 60%;
}

.carousel {
    /*padding-bottom: 50px;*/
}

.flickity-page-dots {
    display: none;
}

body:not(.pagina_4) .carousel-cell .graphContainer {
    position: absolute;
    bottom: 20%;
}
body:not(.pagina_4) .swiper-domanda-4 .carousel-cell .graphContainer {
    position: absolute;
    bottom: 0;

}

#domanda4m .graphContainer svg{
    max-width: 50%;}


.carousel-cell {
    width: 100%;
    margin: 40px 12px;
    height: 50vh;
    position: relative;
    border-radius: 5px;
    counter-increment: carousel-cell;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.resCar {
    height: auto;
}

.download a {
    color: white;
    text-decoration: none;
}

.download a:hover {
    transition: all 0.25s ease-in-out
}

.download {
    padding: 25px;
}


.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-control-placeholder {
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
    transition: all 200ms;
    opacity: 0.5;
}

.form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

.result_footer{
    margin-top: 10px;
}

#bottomdiv{position:fixed; width:100%; bottom:0; padding:10px 0;}
@media screen and (max-width: 1200px) {#bottomdiv
  {position:relative; width:100%; bottom:0; padding:10px 0;}
}

@media screen and (max-width: 1200px) {
    #titleCard {
        border-radius: 50px 50px 0 0;
    }

    #dataCard {
        border-radius: 0 0 0 50px;
    }
}

@media screen and (max-width: 900px) {
    .desktopSect {
        display: none;
    }

    .mobileSect {
        display: block;
    }

    .question {
        position: relative;
        color: #6297F2
    }

    /* .answers a {position: relative;padding: 20px 10px;}
    .answers h3 {color:white;font-size: 1.6rem;}
    .question h2{color:white;font-size:40px;}
    #domanda1 .question{background-color: #e2ba86;}
    .h-1{height: 33.5vh;padding-top:0;}
    .answers{flex-wrap: wrap;position: absolute;bottom: 0;height: 67vh;} */
    .c1 {
        text-decoration: none;
        background-color: #29548b;
    }

    .c2 {
        text-decoration: none;
        background-color: #706ac9;
    }

    .c3 {
        text-decoration: none;
        background-color: #18a6e7;
    }

    .c4 {
        text-decoration: none;
        background-color: #a447da;
    }

    .c5 {
        text-decoration: none;
        background-color: #414797;
    }

    .c6 {
        text-decoration: none;
        background-color: #00aaa2;
    }

    .c7 {
        text-decoration: none;
        background-color: #e23d9d;
    }

    .c8 {
        text-decoration: none;
        background-color: #183779;
    }

    /* #q2a1 svg,#q2a2 svg,#q2a3 svg,#q2a4 svg{max-width: 33%;} */
}