Notes

/* CSS

____________________________________________________________
| |
| ENGINE + Complic { http://complic.eu } |
| DESIGN + Complic Studio { http://complicstudio.com } |
| DATE + 2018 Maggio |
| CREDITS + Complic |
| COPYRIGHT + Copyright Estetistella 2018 |
|____________________________________________________________|

*/

* {
margin: 0;
padding: 0;
outline: 0;
font-family: 'JosefinSans-SemiBold';
}
ul,ol,li {
list-style: none;
position: relative;
}
body,a,input {
color: #3E3E3E;
font-size: 15px;
margin: 0;
padding: 0;
}
img,fieldset {
border: 0;
}

a:link, a:visited {
text-decoration: none;
}
#page .container_mobile{
display: none;
}
body {
width: 100vw;
height: 100vh;
background-image: url(../images/glicine.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
overflow-x: hidden;
}

.logo {
position: absolute;
right: 10px;
z-index: 100;
}

.logo_svg {
fill : #ffffff;
width: 200px;
height: 120px;
}

.menu {
width: 100%;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
color: #7f7f7f;
z-index: 200;
}
ul.menu li {
height: auto;
display: inline;
}
ul.menu li a {
text-decoration: none;
color: #7f7f7f;
display: inline-block;
padding: 50px 50px 10px 50px;
font-size: 25px;
z-index: 9999;
}
ul.menu li a:hover, ul.menu li.current a {
display: inline-block;
cursor: pointer;
color: #6cddc7;
}

#wrapper .container_testo {
background-color: #6cddc7;
height: 150px;
width: 880px;
color: #ffffff;
font-size: 30px;
position: absolute;
bottom: 300px;
}

#page .container_inclinato {
position: absolute;
width: 700px;
height: 150vh;
top: -150px;
right: 700px;
content: "";
overflow: hidden;
background-color: #000;
-webkit-clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(40% 0%, 100% 0%, 60% 100%, 0% 100%);
}
#page .container_inclinato #gallery {
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-1.71deg) rotateY(-2.25deg) scale3d(1, 1, 1);
width: 100%;
height: 100%;
}
#page .container_inclinato .photo {
width: 100%;
height: 100%;
display: block;
background-color: #000;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

#page .container{
width: max-content;
height: max-content;
/* position: absolute; */
margin-top: 120px;
}

#page .container .descrizione_container {
padding: 20px;
color: #7f7f7f;
font-size: 18px;
width: 600px;
}

#page .title_container{
width: max-content;
background-color: #6cddc7;
color: #ffff;
height: 90px;
font-size: 25px;
text-align: center;
line-height: 95px;
padding: 0px 20px 0px 20px
}

#page .servizi_container .servizi {
display: inline-block;
vertical-align: top;
margin-left: 50px;
}

#page .servizi_container {
font-family: 'JosefinSans-Regular';
margin-top: 50px;
background-color: #e5e5e5;
width: 100vw;
height: 300px;
padding: 50px 0px 20px 0px;
}

#page .container .form_container {
padding: 60px;
width: 400px;
}

#page .container .form_container input[type=text]{
border: none;
border-bottom: 1px solid #7f7f7f;
background-color: rgba(0,0,0,0);
width: 100%;
margin-top: 30px;
}

#page .container .form_container .checkbox .termini{
margin-top: 30px;
font-size: 10px;
}

#page .container .form_container .checkbox .form_checkbox{
display: inline-block;
vertical-align: middle;
}

#page .container .form_container .checkbox a:link{
font-size: 10px;
text-decoration: underline;
}

#page .container .form_container .checkbox {
margin-top: 25px;
}

#page .container .form_container .form_submit{
background-color: #6cddc8;
width: 90px;
height: 30px;
text-align: center;
line-height: 30px;
margin-top: 25px;
border-radius: 10px;
}

#page .container .form_container .form_submit input{
color: #ffff;
border: none;
background-color: rgba(0,0,0,0);
cursor: pointer;
}

#page .container_inclinato .map {
position: initial !important;
}

.testo_frase {
padding: 40px;
}

.footer_text {
position: fixed;
bottom: 0;
font-size: 8px;
}

.footer_text a {
font-size: 8px;
}

.custom-marker {
width: 100px;
height: 100px;
overflow: visible !important
}

.marker-is-light-blue .custom-marker:before {
background: #60C2E4
}
.marker-is-light-blue .custom-marker:after {
background: rgba(96, 194, 228, 0.1)
}

.custom-marker:before {
content: '';
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 20px;
height: 20px;
position: absolute;
top: 40px;
left: 40px;
border-radius: 50%;
background: #60C2E4;
border: 1px solid #FFF;
z-index: 207
}
.custom-marker:after {
content: '';
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
display: block;
background: rgba(96, 194, 228, 0.1);
border-radius: 50%;
opacity: 0;
z-index: 206;
-webkit-animation: pulsate 2400ms ease-out infinite;
animation: pulsate 2400ms ease-out infinite
}
.marker-invisible .custom-marker {
display: none !important
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0
}
}
@keyframes pulsate {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0
}
}


.testo_privacy {
background-color: #e5e5e5;
margin-top: 80px;
padding: 50px;
width: 80vw;
z-index: 200;
position: absolute;
}

#hamburger {
left: 50vw;
position: fixed;
width: 40px;
height: 40px;
z-index: 9999;
padding-top: 12px;
display: none;
transform: translate(-50%);
}

#hamburger .line {
border: 0px;
transition: 200ms;
margin-top: 8px;
margin-bottom: 8px;
border-radius: 30px;
border-bottom: 5px solid #6cddc7;
background: #6cddc7;
height: 0px;
width: 100%;
display: block;
}



@media screen and (max-width: 1960px) {
#page .container_inclinato {
right: 200px;
}

}

@media screen and (max-width: 1960px) {
/*#page .container_inclinato {
right: 600px;
}
*/
}

@media screen and (max-width: 1740px) {
#page .servizi_container .servizi {
width: 300px;
}

#page .servizi_container {
padding-bottom: 50px;
}
}

@media screen and (max-width: 1400px) {
ul.menu li:first-child{
padding-left: 25px;
}
ul.menu li a{
padding-left: 0px;
}
#page .container_inclinato {
right: 100px;
-webkit-clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
}
#page .servizi_container .servizi{
margin-left: 20px;
}

}

@media screen and (max-width: 1300px) {
#page .servizi_container{
font-size: 12px;
}
#page .servizi_container .servizi {
width: 215px;
}
#page .container_inclinato {
right: 50px;
}
}
@media screen and (max-width: 1200px) {
ul.menu li a{
padding-right: 15px;
}

#page .container .form_container{
padding: 20px;
}
#page .container_inclinato {
right: -75px;
}

}

@media screen and (max-width: 1110px) {
/*ul.menu li:last-child a{
color:white;
}*/

ul.menu li:last-child a:hover, ul.menu li:last-child.current a {
color:#6cddc7;
}

#page .container .form_container{
width: 200px;
}

#page .container_inclinato {
right: -185px;
}

.contatti #page .container {
top:360px;
}

}

@media screen and (max-width: 1024px){
#page .container .descrizione_container{
background-color: rgba(0,0,0,0.2);
color: #fff;
}
}
@media screen and (max-width: 950px) {
#page .servizi_container .servizi{
margin-left: 10px;
}

#page .servizi_container{
font-size: 10px;
}

}
@media screen and (max-width: 900px) {
ul.menu li:nth-child(3) a{
color:white;
}

#page .servizi_container .servizi{
width: 180px;
}
}

@media screen and (max-width: 850px) {
#page .container_inclinato {
right: 400px;
}
}

@media screen and (max-width: 800px) {
/* smartphone da qui */

body{
overflow: visible;
}


.body:before {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0px;
content: "";
background-image: url(../images/glicine_mobile.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
overflow: hidden;
}

.wrapper {
width: 100vw;
height: 100vh;
background-color: rgba(108,221,199,0.5);
}

#wrapper .container_testo {
background-color: #ffffff;
height: 190px;
width: 80vw;
color: #6cddc7;
font-size: 26px;
}

#menu {
display: none;
}

ul.menu li a {
padding: 50px 0px 0px 0px;
}
ul.menu li:first-child {
padding-left: 0px;
}
ul.menu li:nth-child(3) a{
color: #7f7f7f;
}

ul.menu li:nth-child(4) a{
color: #7f7f7f;
}

ul.menu li:nth-child(3) a:hover, ul.menu li:nth-child(3).current a{
color: #6cddc7;
}

ul.menu li:nth-child(4) a:hover, ul.menu li:nth-child(4).current a{
color: #6cddc7;
}

#hamburger {
display: block;
z-index: 9998;
}

.body.menuClose #hamburger .line:nth-child(1) {
transform: rotate(45deg) translate(9px, 10px);
-webkit-transform: rotate(45deg) translate(0px, 10px);
}

.body.menuClose #hamburger .line:nth-child(2) {
transform: rotate(-45deg) translate(9px, -10px);
-webkit-transform: rotate(-45deg) translate(0px, -10px);
}

.hamb-container {
width: 100vw;
height: 60px;
background-color: #ffffff;
position: fixed;
bottom: 0;
z-index: 9000;
}

.body.menuClose .header:before {
opacity: 1;
content: "";
}

.body .header:before {
position: fixed;
width: 100vw;
left: 0px;
top: 0px;
bottom: 0px;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
background-color: #ffffff;
z-index: 5000;
}

.body.menuClose #menu {
position: fixed;
left: 50vw;
transform: translate(-50%);
right: 0px;
top: 0px;
z-index: 8000;
height: 100vh;
display: table;
}

.body.menuClose #menu .menu {
display: table-cell;
vertical-align: middle;
text-align: center;
}

.body.menuClose #menu li {
display: block;
}

.body.menuClose .logo{
z-index: 10000;
position: fixed;
}

.body.menuClose .logo_svg {
fill: #6cddc7;
}

.logo_svg {
width: 100px;
}

.logo {
top: -25px;
}

#page .container_inclinato{
display : none;
}

#page .container_mobile{
display: block;
width: 100%;
height: 200px;
margin-top: 20px;
margin-bottom: 100px;
}

.container_mobile #gallery {
width: 100%;
height: 200px;
}

.container .photo {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

#page .container {
top: 50px;
}

#page .title_container {
font-size: 15px;
}

#page .servizi_container{
width: 80vw;
left: 50vw;
position: absolute;
transform: translate(-50%);
height: max-content;
padding: 20px;
padding-bottom: 100px;
font-size: 15px;
}

#page .servizi_container .servizi{
display: block;
width: 100%;
margin-bottom: 20px;
}

.servizi{
overflow: auto;
}

.footer {
-webkit-transform: rotate(-90deg) translate(100%,0%);
-moz-transform: rotate(-90deg) translate(100%,0%);
-ms-transform: rotate(-90deg) translate(100%,0%);
-o-transform: rotate(-90deg) translate(100%,0%);
transform: rotate(-90deg) translate(100%,0%);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
position: fixed;
right: 5px;
bottom: 65px;
width: 100vh;
}

.footer_text {
position: inherit;
font-size: 7px;
color: #ffffff;
}

.footer_text a {
color: #ffffff;
}

#page .title_container {
background-color: #FFFFFF;
color: #6cddc7;
}

.contatti #page .container {
top: 50px;
}

#page .container .form_container {
width: 80vw;
position: absolute;
left: 50vw;
transform: translate( -50%);
}

.contatti #page .form {
height: 480px;
}

#page .container .form_container input[type=text] {
border-bottom: 1px solid #ffffff;
color : #ffffff;
}
.contatti #page .container_mobile{
margin-top: 0;
}

.contatti #page .container_mobile .map {
height: 200px;
}

#page .container .form_container input::placeholder {
color : #ffffff;
}

#page .container .form_container .checkbox {
color: #ffffff;
}

#page .container .form_container .checkbox a:link {
color: #ffffff;
}

#page .container .form_container .form_submit input {
color: #6cddc8;
}

#page .container .form_container .form_submit {
background-color: #ffffff;
}
}

@media screen and (max-width: 500px) {

#wrapper .container_testo {
font-size: 22px;
}

#page .container .descrizione_container{
background-color: rgba(0,0,0,0);
width: 90vw;
height: 100vh;
}

}

@media screen and (max-width: 500px) {

#wrapper .container_testo {
font-size: 20px;
bottom: 100px;
}

}

@media screen and (max-width: 400px) {

/*#page .container_inclinato {

bottom: 70px !important;

}
*/
}

/* end of css */