*{          margin: 0px;
            padding: 0px;}
html, body{ width: 100%;
            height: 100%;
            font-family: 'Roboto', sans-serif;
            font-weight: lighter;
            font-size: 16px;
            line-height: 20px;
            color: black;
            background: white;
            cursor: default;
            -webkit-overflow-scrolling: touch;}
a img{      border: none;}
a{          text-decoration: none; color: inherit; display: block; width: 100%; height: 100%;}
ul{         list-style: none;}
.isotope-item{                  z-index: 2;}
.isotope-hidden.isotope-item{   pointer-events: none; z-index: 1;}

            /* MENU */

#home{      position: fixed; bottom: 0px; left: 50%; margin-left: -345px;
            width: 690px;}
#menu{      position: fixed; margin: 20px; z-index: 999; background-color: white;           /* BLUR FALLBACK */
            width: 168px; height: auto; overflow: hidden;}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
            #menu{background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
}

#logo{      position: relative; height: 30px; margin-bottom: 20px;}
.title{     position: relative; font-weight: bold; font-size: 24px; margin-bottom: 2px;}
.subtitle{  position: relative; font-weight: normal;}
#menu ul{   position: relative; margin-top: 20px;}
#menu li{   position: relative; cursor: pointer;}
#menu li:hover, .click{color: #AA3F61; font-weight: normal;}                                   /* HOVER COLOR */
a:hover{    color: #AA3F61;}
#menu #social li {margin-bottom: 10px;}
#menu #social li:last-child{display: none; margin-top: 20px; font-weight: bold;}
#menu .title{font-family: 'Amatic SC', cursive; font-size: 30px;}
#menu .subtitle{font-family: 'Amatic SC', cursive; font-size: 20px;}

            /* GALLERY */

#gallery{   position: absolute; left: 50%; margin-left: -350px;
            width: 690px; height: auto; padding: 5px;
            -webkit-transition: height 0.5s;
            -moz-transition: height 0.5s;
            transition: height 0.5s;}
.item{      position: relative; float: left; margin: 5px; overflow: hidden;
            background-size: cover; background-position: center; background-repeat: no-repeat;}
.s{         height: 220px; width: 220px;}
.o{         height: 220px; width: 450px;}
.v{         height: 450px; width: 220px;}
.b{         height: 680px; width: 680px; margin-top: 105px; margin-bottom: 105px; overflow: visible; background-size: contain;}
.w{         height: 105px; width: 680px;}
.wo{        height: 220px; width: 450px;}
.ws{        height: 680px; width: 450px;}

            /* STYLE */

.hover {    width: 100%; height: 100%; z-index: 999; display: none;}
.item:hover .hover{background: rgba(255,255,255,0.2); display: block;}
.dida{      position: absolute; bottom: -95px; width: 100%; overflow: hidden;}
.dida p{    width: 100%; white-space: nowrap; text-overflow: clip;}
.ita{       position: absolute; display: block;}
.en{        position: absolute; display: none;}
.ws>div{    margin-top: 105px;}
.wo>div{    position: absolute; width: 50%; right: 0px; top: 80px;}
.me img{    width: 100%; height: auto;}
.fa-envelope-o{position: relative; bottom: 1px;}
.fa-facebook{padding-left: 2px; font-size: 18px !important;}
.fa-instagram{font-size: 18px !important;}

            /* MEDIA QUERIES */

@media screen and (max-width: 1080px){                                  /* TOP MENU */
#menu{      width: 100%; height: 50px; margin: 0px; padding-top: 20px;
            -webkit-transition: height 0.5s;
            -moz-transition: height 0.5s;
            transition: height 0.5s;}
.menuhover{ height: 170px !important;}
#menu #logo{margin-left: -60px; left: 45%;}
#menu .title{margin-top: -59px; left: 45%;}
#menu .subtitle{left: 45%;}
#menu #option{margin-bottom: 20px; padding-top: 5px;}
#menu #option li p{position: relative; left: 45%;}
#menu #social{position: absolute; right: 10px; top: 5px;}
#menu #social li{float: left; margin-right: 20px;}
#menu #social li:last-child{margin-top: 0px;}
#gallery{   padding-top: 65px;}
.hover{     display: none !important;}
}
@media screen and (max-width: 700px){                                   /* DOUBLE MODULE */
#menu #logo{margin-left: 30px; left: 0%;}
#menu .title{margin-left: 90px; left: 0%;}
#menu .subtitle{margin-left: 90px; left: 0%;}
#menu #option li p{margin-left: 90px; left: 0%;}
#home{      width: 460px; margin-left: -230px;}
#gallery{   width: 460px; margin-left: -235px;}
.b{         height: 450px; width: 450px;}
.w{         height: 105px; width: 450px;}
.wo{        height: 220px; width: 220px;}
.wo>div{    width: 100%; left: 0px;}
}
@media screen and (max-width: 460px){                                   /* SINGLE MODULE */
#gallery{width: 100%; left: 0%; margin-left: 0px; padding: 0px; padding-top: 65px;}
#menu #logo{      height: 20px; margin-left: 20px; margin-top: 4px;}
#menu .title{margin-left: 60px; margin-top: -45px;}
#menu .subtitle{display: none;}
.title{     font-size: 20px;}
#menu #social{right: 0px;}
#menu #option li p{margin-left: 60px;}
.item{      margin: 5px 0px; width: 100% !important;}
.b{         margin-bottom: 105px;}
.s, .o{     height: 450px;}
.ws{        height: 900px;}
.wo>div{    width: 70%; left: 30%;}
.item p{    padding-left: 5%; padding-right: 5%; width: 90%;}
}
@media screen and (max-width: 320px){                                   /* SMALL SMARTPHONES FIX */
#menu #logo{      display: none;}
#menu .title{margin-left: 20px; margin-top: 4px;}
#menu #option li p{margin-left: 20px;}
}