*{
	/* box-sizing:border-box; */
}
body{
	width: 1080px;
	margin:auto;
	font-family:Dosis;
	font-size: 30px;
	/* padding: 0 10%; */
	text-align:center;
	color:#03608d;
    background-image: url(img/bg.jpg);
}
	

h2{
	color:grey;
	font-weight:300;
	font-size: 30px;
}
	
a{
	text-decoration:none;
	color:#3f87a8;
}


.page{
	/*background-image:url('img/bg.jpg');*/ /*Rimosso Aprile 2025*/
    background-size: 200%;
    background-position: top center;
    font-size: 30px;
}

.page-wrap {
    background: hsl(0deg 0% 100% / 50%);
}

.menuarea{
	width:80%;
	margin:auto !important;
}

.menuelement{
	float:left;
	width:25%;
}

.menuelement img{
	max-width:70%;
}

.menu{
	display:inline-block;
    width: 80%;
    padding: 10px 10%;
    margin-top: 20px;
    background-color: #03608d !important;
    color: #fff;
    font-size: 30px;
    font-weight: 100;
}

.menu a{
	color:#fff;
	text-decoration:none;
}

button{
	background-color:#03608d !important;
	color:#fff;
	width: 200px;
	font-size: 20px;
	font-weight:300;
	border-radius: 10px;
	border:none;
	padding:5px 0;
	display:block;
	font-family:Dosis;
	margin-left:200px !important;
    transition: all .5s;
    transition-delay: .1s;
}

button a{
	color:#fff;
	text-decoration:none;
}

.buttonarea{
	width:80%;
	margin:auto !important;
	opacity:0;
	transition: all .5s;
	transition-delay: .5s;
}
.buttonarea.active{
	opacity:1;
}


/*--------Classes for unchecked and checked buttons"----------*/

.checked button{
	background-color:#06aeef !important;
	margin-left:333px !important;
    pointer-events: none;

}
/*--------------------------------------*/



/*-------------space between 1st and 2nd level choice-----*/
.firstlevel_choice , 
.secondlevel_choice {
	margin:100px 0;
}
/**---------------------------*/

/*-------Form elemnts style--------*/
input, textarea {
    border: 1px solid #5491ac;
    font-size: 20px;
    color: #5491ac;
    font-family:Dosis;
    background-color: #f4f2f08f;
    padding: 5px 10px;
	box-sizing:border-box;
}

input[type="text"],
input[type="email"] 
 {
	width: 246px;
}

/* input placeholder color  */
input::placeholder,
textarea::placeholder 
{
	color: #5491ac;
}

textarea {
    margin-top: 10px;
    width: 500px;
}

label {
    font-size: 20px;
}

/*------------------------------*/



/*--------hidden class--------*/
.hidden {
  visibility: hidden;
}
/**-------------------------------------*/





.selected-line-wrap {
    width: 60%;
    margin: 0 auto;
    height: 100px;
	opacity:0;
	transition: all .5s;
}


.selected-line-wrap.active{
	opacity:1;
}

.selected-line.active {
    display: flex;
}

.selected-line {
    display: none;
}

.selected-line i {
    flex: 1;
    display: block;
    height: 100px;
    border-width: 2px;
    border-color: #06aeef;
    border-style: none;
    border-radius: 0 10px;
}



.selected-line[data-selected="skincare"] i:nth-child(1),
.selected-line[data-selected="haircare"] i:nth-child(3)
{
    border-style: none none solid solid; 
}


.selected-line[data-selected="suncare"] i:nth-child(4),
.selected-line[data-selected="makeup"] i:nth-child(2) 
{
    border-style: none solid solid none; 
    border-radius: 10px 0;
}


.btn-wrap {
    width: calc(50% - 1px);
    padding: 10px 0;
    border-right: 2px solid #06aeef;
	transition: all .3s;
	opacity: 0;
}

.btn-wrap.visible {
	opacity: 1;
}

.btn-wrap.checked {
	border-color: transparent;
}

.level-1 .btn-wrap:nth-child(1) {
    padding-top: 10px;
}
.level-2 .btn-wrap:nth-child(1) {
    padding-top: 40px;
}

.results-wrap {
	opacity: 0;
	transition: all .5s;
    margin-top: 70px;
}

.results-wrap.active {
	opacity: 1;
}




div#results img {
	transition: all .5s;
	opacity: 1;
}

div#results img[src=""] {
    opacity: 0;
	transition: all 0s;
}

div#results.loading img {
    opacity: 0;
	transition: all 0s;
}

div#results.loading {
    position: relative;
    height: auto;
	min-height: 600px;
    width: 100%;
}

div#results.loading:before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 5px solid #015f8b;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    left: 0;
    right: 0;
    transform: translate(50%, 50%);
    top: 0;
    bottom: 0;
    margin: auto;
}


@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
/*MODIFICHE APRILE 2024*/

body {
    background-image: url('img/bg.jpg') !important;
    background-size: cover !important;
}

.page-wrap {
    background: hsl(0deg 0% 0% / 0%) !important;
}

button {
    font-size: 30px;
}