@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');

* {
    padding: 0;
    margin: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {
    border: 0;
    outline: none;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    text-rendering: optimizeLegibility;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.87);
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size:18px;
    font-style: normal;
    line-height: 1.85;
    overflow-x: hidden;
}

p {
    margin-bottom: 0px;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

::selection {
    background: #000;
    color: white;
}

ul {
}

.wow {
    visibility: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant Infant", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: rgb(6, 35, 72);
    font-size: 3rem;
    line-height: 1.18;
}

.title__fantasy {
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    text-align: center;
    padding: 50px;
    color: rgb(6, 35, 72);
}

.title {
    color: rgb(6, 35, 72);
    font-family: "Cormorant Infant", serif;
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 300;
    padding-left: 3%;
    margin-bottom: 3%;
    text-align: right;
}
.title b{ font-weight: 700}

h1 {
    font-size: 42px;
    font-weight: bold;
}

h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 35px
}

H3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: normal
}

H4 {
    font-size: 26px;
    font-weight: bold;
}

H5 {
    font-size: 22px;
    margin:0;
    padding:20px 0
}

H6 {
    font-weight: 400;
    font-size: 13px;
    margin: 12px 0 14px 0
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    color: #777777
}

a:active {
    COLOR: #444;
}

a:visited {
}

a:hover {
    color: #000;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.mb {
    margin-bottom: 50px;
}

hr {
    background: #E0E2E1;
    margin: 0;
    height: 1px;
    border: none;
    outline: none;
    width: 100%
}

.responsive, .container {
    width: 1240px;
    margin: 0 auto
}

.relative {
    position: relative;
}

.color1 {
    color: #31ADE4;
}

.color-black {
    color: #000000;
}

.container {
    width: 980px;
    margin: 0 auto;
}

.row {
    display: flex;
    align-items: center;
    gap: 30px;
}
.width50    {
    width: 50%;
}
.width70 {
    width: 70%;}
.width30 {
    width: 30%;}
#logo {
    font-size: 58px;
    color: black;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 753;
    font-style: normal;
    padding: 20px 0 10px 0;
}

#footer {
    background: black;
    padding: 50px 0;
    color: white;
}
.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer__content p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.footer__content p a {
    color: #777777;
}
.footer__content p a:hover {
    color: white;
}

.header__wrapper {
    margin-bottom: 55px;
}

.header__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#menu {
    margin-top: 0px;
    border-top: 1px solid black;
}

#menu ul {
    display: flex;
    gap: 42px;
    padding: 10px 0 0 0;
    margin: 0;
    font-size: 15px;
}

#menu ul li {
    list-style: none;
    padding: 0;
    position: relative;
}

#menu ul li a {
    font-size: 15px;
    margin: 0 0px;
    color: black;
}
#menu ul li a:hover { color:rgb(204, 186, 159)}
#menu ul li ul {
    position: absolute;
    top: 99%;
    left: 0;
    width: 300px;
    background:white;
    display: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
#menu ul li ul li {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
}
#menu ul li:hover ul {
    display: block;
}

.gallery__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "text text f11 f11 f11 f10 f8 f9"
        "text text f11 f11 f11 f10 f7 f7"
        "empty f1 f1 f2 f3 f6 f7 f7"
        "empty f1 f1 f4 f5 f6 f7 f7";
}

.ff {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.f1 {
    grid-area: f1;
}

.f2 {
    grid-area: f2;
}

.f3 {
    grid-area: f3;
}

.f4 {
    grid-area: f4;
}

.f5 {
    grid-area: f5;
}

.f6 {
    grid-area: f6;
}

.f7 {
    grid-area: f7;
}

.f8 {
    grid-area: f8;
}

.f9 {
    grid-area: f9;
}

.f10 {
    grid-area: f10;
}

.f11 {
    grid-area: f11;
}

.text {
    grid-area: text;
}

.empty {
    grid-area: empty;
}

.text-center {
    text-align: center;
}

.containerSmall {
    display: none;
}
.home__video {
    padding-top: 50px;
}

.container__apulia {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "text text f5 f5 f5 f5 f4 f4"
        "text text f5 f5 f5 f5 f4 f4"
        "empty f1 f1 f2 f2 f3 f3 f3"
        "empty f1 f1 f2 f2 f3 f3 f3";
}

.container__amer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "text text f11 f11 f11 f10 f8 f9"
        "text text f11 f11 f11 f10 f7 f7"
        "empty f1 f1 f2 f3 f6 f7 f7"
        "empty f1 f1 f4 f5 f6 f7 f7";
}

.container__cerri {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "text text f11 f11 f11 f10 f8 f9"
        "text text f11 f11 f11 f10 f7 f7"
        "empty f1 f1 f2 f3 f6 f7 f7"
        "empty f1 f1 f4 f5 f6 f7 f7";
}

.team-member {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
}
.team-member>div:last-child { width: 400px; }
.team-member img {
    width: 300px;
    height: 300px;

    object-fit: contain;
}

.blog__list { display: flex; flex-direction: column; gap: 30px}
.blog__item {border: 1px solid #cecece; display: flex; align-items: center; }
.blog__img { width: 420px; }
.blog__entry { padding: 50px;  flex: 1}
.blog__entry .post__date { font-size: 13px; letter-spacing: 2px; margin-bottom: 10px}

.design {
    background-image: url("img/bg.jpg");
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 240px 0;
    color: white;
    text-align: center;
    position: relative;
}
.design:before {
    content: ' ';
    background: rgba(0,0,0,0.4);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.design__content {
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    position: relative;
}
.design h1  { color: white; margin-bottom: 40px }
.design h1, .design p { color: white; }
#main-content {
    padding-bottom: 100px;
}

@media (min-width: 980px) and (max-width: 1200px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
}


@media (max-width: 480px) {
}