@charset "UTF-8";

body,
html {
    width: 100%;
    height: 100%;
}

body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #FFF;
    /* background: url('../img/als/herobackground.webp') no-repeat 100% 0 #0c1c36;
    background-size: auto 100%; */
    font-family: var(--thaifont);
    font-size: 16px;
}

a,
a:hover,
a:focus {
    text-decoration: none !important;
}

/**/
.herobanner {
    width: 100%;
    position: relative;
    background-color: #0c1c36;

}

.herobackground {
    /* CRUISE */
    width: 100%;
    mix-blend-mode: screen;
    opacity: 0.2;
    height: 100%;
    min-height: 800px;
}

.window-scrolled .navbar {
    background-position: 0% 0%;
}

.curvediv {
    width: 100%;

}

.curvediv img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

p {
    font-size: 1.4em !important;
}

.p0 {
    padding: 0 !important;
}

.p30 {
    padding: 30px !important;
}

/**/
.txtorenge {
    color: var(--orenge) !important;
    font-size: 1.2em !important;
}

.floatright {
    margin-right: -300px;
}

/**/
.cloudybox {
    position: absolute;
    width: 100%;
    height: 250px;
    bottom: -100px;
    left: 40%;
    transform: translate(-50%, 0);
    z-index: 11;
}

.cloudybox img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/**/
.contentsection {
    padding: 0;
    background-color: #fff;
}

.contentsection h2 {
    font-family: var(--thaifont);
    font-size: 2em;
    font-weight: 800;
    color: #ff9933;
    margin: 0 0 10px 0;
    text-shadow: none;
}

.contentsection h3 {
    font-family: var(--engfont);
    font-size: 2.5em;
    color: #33ccff;
    margin: 0 0 10px 0;
    text-shadow: none;
}

.fbar1 .contentsection h3 {
    font-family: var(--thaifont) !important;
}

.contentsection p {
    font-family: var(--thaifont);
    font-size: 1.4em !important;
    color: #333;
    margin: 0;
}

.redbg p {
    font-family: var(--thaifont);
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #FFF;
}

.redbg p {
    color: #333;
}

/**/
.imgContainerBlock {
    width: 100%;
}

.imgContainerBlock ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
}

.imgContainerBlock li {
    width: calc((100% / 3) - 20px);
    height: 350px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.imgContainerBlock li .description {
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px 0;
    font-size: 1.8em;
}

.imgContainerBlock li .description h3 {
    color: #33ccff;
    font-family: var(--engfont);

}

.imgContainerBlock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


/**/
.imgBlock {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
}

.imgBlock li {
    width: calc((100% / 4) - 10px);
    position: relative;
    overflow: hidden;

}

.imgBlock li div {
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #FFF;
    font-family: var(--engfont);
    font-size: 2em;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.imgBlock li img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all ease-in-out .3s;
}

/**/

.imgSet {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    list-style: none;
    height: 450px;
}

.imgSet li {
    width: calc((100% / 4) - 20px);
    position: relative;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
}

.imgSet .description {
    color: #FFF;
    font-family: var(--engfont);
    font-size: 2em;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 30px;
    background: #000000;
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
}

.imgSet li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all ease-in-out .3s;
}

.description h3 {
    font-family: var(--engfont);
    font-size: 1em !important;
    color: #FFF;
    margin: 0 20px;
    text-transform: lowercase;
}

.description p {
    font-family: var(--thaifont);
    font-size: 18px !important;
    color: #FFF;
    margin: 0;
}

/**/
.swapBox {
    position: absolute;
    top: 25%;
    left: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.swapBox img {
    /* logo */
    width: 100%;
    max-width: 400px;
    height: auto;
}

.swapBox .h1 {
    color: #cccc33;
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 10px;
}

.swapBox .h2 {
    color: #fff;
    font-size: 2em;
    text-align: center;
    margin: 0;
}

/* slider container */
.slideContainer {
    position: absolute;
    top: 100px;
    left: 60%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
    transition: all 0.3s ease-in-out;

}

.slideContainer .swiper-slide {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none !important;
    overflow: hidden;
}

.slideContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scrollicon {
    width: 25px;
    height: auto;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    animation: scroll .5s infinite ease-in-out;
}

@keyframes scroll {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(2px);
    }

    100% {
        transform: translateX(-50%) translateY(0);
    }
}

#herosection {
    background: transparent none;

}

@media (max-width: 1200px) {
    #herosection {
        background: #0c1d35 none;
        height: 60vh;
    }
}

.mapcontainer {
    position: relative;
    width: 100%;
    margin-top: -400px;
    display: block
}

.mapbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    z-index: 2;
    object-fit: contain;

}

section {
    position: relative !important;
}

.slogan {
    position: relative;
    font-family: var(--thaifont);
    color: #fff;
    font-size: 1.4em !important;
    line-height: 1.4em;
    text-align: center;
}

/**/
.redbg {
    background: url('../img/als/bg_rome.webp') no-repeat 0 0 #330000;
    background-size: auto 100%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 80px 30px;

}


.redbg .textswap h3 {
    font-family: var(--thaifont);
    font-weight: 600;
    font-size: 1.5em !important;
    line-height: 1.5em !important;
    color: #FFF !important;
}

.redbg .textswap p {
    font-family: var(--thaifont);
    color: #FFF !important;

}

.dicutimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (max-width: 1200px) {
    .slideContainer {
        right: auto;
        height: auto;
        left: 60%;
    }

    .swapBox {
        top: 20%;
        left: 5%;
    }

    .scrollicon {
        display: none
    }

    .slogan {
        top: 50px;

    }

    .imgSet li {
        width: calc((100% / 3) - 20px);
    }
}

@media (max-width: 768px) {

    .imglogo {
        max-width: 150px !important;
        margin: 0 auto;
    }



    .rowbox,
    .rowboxreverse {
        flex-direction: column;
        padding: 20px;
        gap: 10px;
    }

    .placetitle {
        margin-bottom: 10px;
    }

    .dflex {
        padding: 0;
    }

    .mt50 {
        margin-top: 0 !important;
    }

    .slideContainer {
        width: 100%;
        height: 100%;
        right: 0;
        left: 0;
        top: 0;
        border-radius: 0;
        mix-blend-mode: overlay;
    }


    .slideContainer .swiper-slide {
        border-radius: 0;
    }

    .avatarbox {
        padding: 0 !important;
    }

    .imgContainerBlock ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .imgContainerBlock ul li {
        width: calc(100% / 2 - 20px);
    }

    .herobackground {
        display: none;
    }

    .hero-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .hero-content img {
        width: 100%;
        height: auto;
    }

    .hero-content h1,
    .hero-content h2 {
        text-align: center;

    }

    .swapBox {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .swapBox img {
        max-width: 300px;
    }

    .swapBox .h1 {
        font-size: 3rem;
    }

}


/**/
.placeslider {
    /* Slider Container */
    position: absolute;
    bottom: 3%;
    right: 3%;
    z-index: 10;
    width: 100%;
    max-width: 550px;
    touch-action: pan-y;
}

.mapplace {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: pointer;
}

.mapplace span {
    /* Name */
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #33ccff;
    font-family: var(--engfont);
    font-size: 1.8em !important;
    line-height: 1em !important;
    text-align: center;

    transition: all ease-in-out 0.35s;
}

.mapplace span::before {
    /* Bullet */
    content: " ";
    position: absolute;
    left: -20px;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: #33ccff;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: all ease-in-out 0.35s;
}

.mapplace img {
    width: 150px !important;
    height: auto !important;
}

.mapplace img,
.mapplace .flags {
    opacity: 1;
    transition: all ease-in-out 0.35s;
    filter: brightness(0.2);
}

.mapplace.active img,
.mapplace.active .flags {
    opacity: 1;
    transition: all ease-in-out 0.35s;
    filter: brightness(1);
}

.mapplace1 span::before {
    display: none;
}

.mapplace1 span::after {
    background-color: #cc0000;
    content: " ";
    position: absolute;
    right: -40px;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
}

.legendcruise {
    position: absolute;
    width: 250px;
    height: auto;
    top: 40%;
    left: 40%;
    z-index: 2;
}

.legendcruise img {
    width: 100%;
    height: auto;
}

.navigation {
    width: 100%;
    left: 0;
}

.navigation .arrow.prev {
    left: 10px;

}

.navigation .arrow.next {
    left: auto;
    right: 10px;

}

.flagitaly {
    left: 130px;
}

.flagitaly2 {
    top: 40px;
    left: 120px;
}

.flagitaly3 {
    top: 35px;
    left: 160px;
}

.flagitaly4 {
    top: 35px;
    left: 160px;
}


/**/


.imglogo {
    max-width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/**/
.overtext {
    position: absolute;
    bottom: 100px;
    right: 5%;
    z-index: 10;
    width: 45%;

}

.francebg {
    width: 100%;
}

.wtext {
    color: #fff !important;
    font-size: 1.2em !important;
    line-height: 1.3em !important;
}

.graytext {
    color: #333 !important;
}

.herotop {
    position: relative;
}

.alignstart {
    align-items: flex-start !important;
}

.thaitext {

    font-family: var(--thaifont) !important;
    font-weight: 600 !important;
    font-size: 1.5em !important;
    color: #333 !important;

}

.circlemark {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.imagemark {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

.circlemark img,
.imagemark img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circlemark span {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -50%);
    color: #33ccff;
    font-family: var(--engfont);
    font-weight: 800;
    font-size: 2em !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.imagemark span {
    position: absolute;
    left: 30px;
    bottom: 20px;
    color: #33ccff;
    font-family: var(--engfont);
    font-weight: 800;
    font-size: 2em !important;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);

}

.justify-center {
    justify-content: center !important;
}

.bgBrowny {
    position: relative;
    background: #330000;
    width: 100%;

    height: auto;
    overflow: hidden;

}

.brownyimg {
    /* */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .1;
}

/**/
.bgsalmon {
    background-color: #a15209;

}

.wasabi {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    min-height: 500px;
}

.wasabi p {
    font-family: var(--thaifont) !important;
    font-size: 1.4em !important;
    line-height: 1.5em !important;
    padding: 30px;
    color: #fff !important;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.david {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    width: auto;
    height: 60%;
    z-index: 10;
    margin-left: 20px;
}

.bgdavid {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.contentflexbox {
    padding: 20px 50px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contentflexbox h2 {
    font-family: var(--thaifont);
    color: #FFF;
    font-size: 1.4em !important;
    line-height: 1.4em !important;
    font-weight: normal !important;
    width: 80%;
    max-width: 650px;
}

/**/
.colosseumbox {
    position: relative;
    background: url('../img/als/bg_colosseum.webp') #663300 no-repeat 0 0;
    background-size: auto 100%;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.gradientswap {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #663300;
    background: -webkit-linear-gradient(90deg, rgba(102, 51, 0, 0) 25%, rgba(102, 51, 0, 1) 49%, rgba(102, 51, 0, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(102, 51, 0, 0) 25%, rgba(102, 51, 0, 1) 49%, rgba(102, 51, 0, 1) 100%);
    background: linear-gradient(90deg, rgba(102, 51, 0, 0) 25%, rgba(102, 51, 0, 1) 49%, rgba(102, 51, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#663300", endColorstr="#663300", GradientType=1);
}

.swapbox {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    z-index: 2;
}

.swapbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    padding: 0 50px;
}

.swapbox .placename {
    display: flex;
    flex-direction: column;
    color: #FFF;
    margin-bottom: 10px;

}

.swapbox .placename .thaiName {
    font-size: 2em !important;
    margin-bottom: 10px;
}

.swapbox .placename .engName {
    font-size: 2.5em !important;

    font-family: var(--engfont) !important;
}

.swapbox p {
    font-family: var(--thaifont) !important;
    font-size: 1.4em !important;
    line-height: 1.4em !important;
}

/**/
.roboto {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 2;
}

.roboto p {
    color: #fff !important;
    font-family: var(--thaifont) !important;
    font-size: 1.4em !important;
    line-height: 1.5em !important;
    padding: 30px;
    z-index: 5;

}

.italysection {
    background: url(../img/als/bg_italy.webp) #2b4f99 no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 45%;
}


.italysection h3 {
    font-family: var(--thaifont);
    font-weight: normal;
    color: #ffcc00;
    font-size: 1.6em !important;
    line-height: 1.5em !important;
    margin: 0 0 10px 0;
    padding: 0;

}

.italysection p {
    color: #FFF;
    font-family: var(--thaifont);
    font-weight: normal;
    font-size: 1.4em !important;
    line-height: 1.5em !important;
    margin: 0 0 10px 0;
    padding: 0;

}

.romsection {
    position: relative;
    background: url("../img/als/rome_bg.webp") no-repeat 50% 0;
    background-size: cover;
    min-height: 70vh;
    width: 100%;
    color: #FFF;
    padding: 80px 0;

}

.romsection h3 {
    font-family: var(--engfont) !important;
    font-weight: 600 !important;
    font-size: 2em !important;
    line-height: 1.5em !important;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    padding: 0;
    color: #ff9933 !important;

}

.romsection p {
    font-family: var(--thaifont) !important;
    font-size: 1.4em !important;
    line-height: 1.5em !important;
    margin: 0 0 10px 0;
    padding: 0;

}

.romewindow {
    width: 80%;
    height: auto;
    float: right;

}

/**/
.naplessection {
    position: relative;
    /* background: #000000;
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.59) 62%, rgba(0, 0, 0, 0.92) 96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
    background-image: url("../img/als/bg_italy2.webp");
    background-repeat: no-repeat;
    background-position: 50% 100%; */
    min-height: 800px;
    width: 100%;
    padding: 80px 0 0 0;
}

.naplessection h3 {
    font-family: var(--thaifont) !important;
    font-weight: 600 !important;
    font-size: 2em !important;
    line-height: 1.5em !important;
    margin: 0 0 5px 0;
    padding: 0;
    color: #ff9933 !important;

}

.naplessection p {
    font-family: var(--thaifont) !important;
    font-size: 1.4em !important;
    line-height: 1.5em !important;
    margin: 0 0 10px 0;
    padding: 0;
}

/**/
.avatarbox {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    z-index: 5;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.avatartext h3 {
    font-family: var(--engfont) !important;
    font-size: 1.5em !important;
    margin: 0 !important;
    color: #FFF !important;
    margin: 0;
    padding: 0;
    letter-spacing: 1.5px;
}

.avatartext p {
    font-family: var(--thaifont) !important;
    font-size: 1.1em !important;
    margin: 0 !important;
    padding: 0;
    color: #FFF !important;
}

.avatarbox2 .avatar {
    width: 120px;
    height: auto;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.avatarbox2 .avatartext h3,
.avatarbox2 .avatartext p {
    color: #333 !important;
}

/**/
.txtyellow {
    color: #ff9933 !important;
    font-family: var(--thaifont) !important;
    font-weight: 600 !important;
    font-size: 1.2em !important;
    margin-bottom: 20px;
    display: block;
}

.dflexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/**/
.boxknowlist {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.boxknowlist ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boxknowlist li {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: #eaeaea;
    border-radius: 10px;
    overflow: hidden;
    align-items: stretch;
}

.boxknowlist li .imgknow {
    width: 400px;
    border-radius: 10px 0 0 10px;
}

.boxknowlist li .imgknow img {
    width: 400px;
    height: 100%;
    object-fit: cover;
}

.gb0 {
    display: flex;
    gap: 0 !important;

}

.boxknowlist li .boxswap {
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.boxswap h3 {
    font-family: var(--thaifont);
    font-size: 1.5em;
    color: #333;
    margin: 0 0 10px 0;
}

.boxswap p {
    font-family: var(--thaifont);
    font-size: 1.2em;
    color: #333;
    margin: 0;
    text-align: left;
}

/**/
.flags {
    width: 40px;
    height: 30px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}


.flagspain {
    left: -50px;
    top: 50px;
}

.flagspain2 {
    left: -140px !important;
    top: 80px !important;
}

/**/
.flagfrance {
    left: 130px;
    top: 40px;
}

/**/
.flagitaly {
    left: 120px;
    top: 30px;
}


.flagitaly2 {
    left: 160px;
    top: 0 !important;
}

.flagitaly3 {
    left: 140px;
    top: 0 !important;
}

.flagspain::after,
.flagfrance::after,
.flagitaly::after {
    /* name */
    left: 50px;
}

/**/

@media screen and (max-width: 1500px) {
    .herobanner {
        min-height: 850px;
    }

    #herosection {
        min-height: 750px;
    }

    .legendcruise {
        left: 55%;
        top: 40%;
        transform: translateX(-50%);
        width: 250px;
    }

    .cloudybox {
        position: absolute
    }

}

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

    /**/
    .flagspain {
        left: -80px;
        top: 50px;

    }

    .flagspain2 {
        left: -130px !important;
        top: 80px !important;
    }

    /**/
    .flagfrance {
        left: 80px;
        top: 30px;
    }

    /**/
    .flagitaly {
        left: 100px !important;
        top: 30px;
    }


    .flagitaly2 {

        top: 0 !important;
    }

    .flagitaly3 {
        left: 80px !important;
        top: 0 !important;
    }

    .flagspain::after,
    .flagfrance::after,
    .flagitaly::after {
        /* name */
        left: 40px;
    }

    .mapplace img {
        width: 80px !important;
        height: auto !important;
    }

    .hero-content {
        left: 55%;
    }

    .hero-content img {
        /* Logo*/
        width: 330px;
    }

    .placeslider {
        right: 10px;
    }

}

@media (max-width: 992px) {

    .w10,
    .w20,
    .w30,
    .w40,
    .w50,
    .w60,
    .w70,
    .w80,
    .w90,
    .w100 {
        width: 100% !important;
        height: auto;
    }

    p {
        font-size: 1.2em !important;
    }


    .romewindow {

        position: relative;
        width: 300px;

        height: auto;
        float: none;

    }

    .cloudybox {
        display: none;
    }

    .hero-content {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .redbg {
        background-blend-mode: overlay
    }

    .italysection {
        background-blend-mode: multiply;
        padding: 30px;
    }

    .circlemark {
        border-radius: 0;
    }

    .hero-content img {
        width: 100%;
        height: auto;
    }

    .boxknowlist li .imgknow {
        width: 100%;
        height: 100px;
    }

    .overtext {
        width: 90%;
        left: 20px;
        right: 20px;
        bottom: 80px;
    }

    .herotop {
        height: 80vh;
        width: 100%;
        overflow: hidden;
    }



    .francebg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% 100%;
        filter: brightness(.5);
    }

    .imgBlock li {
        width: calc(100% - 10px);
        height: 250px;
    }

    .boxknowlist li .imgknow img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .roboto {
        display: flex;
        flex-direction: column;
    }

    .roboto p {
        padding: 20px;
    }

    .avatarbox {
        width: 100%;
        padding: 20px;
    }

    .avatartext p {
        padding: 0 !important;
    }

    .romsection .dflexbox {
        gap: 0;
    }

    .romsection .dicutimg {
        /* colosium */
        padding: 30px;

    }

    .naplessection {
        padding: 0;
    }

    .imgSet {
        height: auto !important;
    }

    .imgSet li {
        width: 100%;
        height: 300px;
    }

    .italysection {
        background-size: auto 100%;
        background-position: 50% 0;
    }

    .italysection h3 {
        font-size: 1.5em !important;
        line-height: 1.4em !important;
    }

    .italysection p {
        font-size: 1.2em !important;
        line-height: 1.4em !important;
    }

    .curvediv {
        width: 100%;
        height: 40px
    }

    .imagemark span {
        left: 20px;
        bottom: 20px;
        font-size: 1.5em !important;
        line-height: 1.2em !important;

    }

    .floatright {
        /* pisa */
        display: none
    }

    .boxknowlist li {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .boxknowlist li .imgknow {
        border-radius: 10px 10px 0 0;
        width: 100%;
        height: 200px;
        min-width: 0;
    }

    .boxknowlist li .boxswap {
        width: 100%;
        padding: 20px;

    }

    .boxknowlist li .boxswap h3 {
        font-size: 1.4em !important;
        text-align: left;
    }

    .boxknowlist li .boxswap p {
        font-size: 1.4em !important;
    }

    .hero-content img {
        width: 300px;
    }

    .placeslider {
        left: auto !important;
        right: 10px !important;
        width: 80% !important;

    }

    .flags {
        width: 30px !important;
        height: 22px !important;
    }


    .mapbg {
        width: 200% !important;
        height: auto !important;
        position: absolute;
        top: 0;
    }


    .dflexbox {
        flex-direction: column;
        align-items: center;
    }

}

@media (max-width: 768px) {
    .mapbg {
        display: none;
    }

    .placeslider {
        left: 10px !important;
        right: 10px !important;
        width: 100% !important;
        top: 120px !important;
        max-width: 100%;

    }



    .cloudybox {
        position: absolute;
        width: 100%;
        height: 200px;
        bottom: -50px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 11;
    }

    .legendcruise {

        left: 50%;
        bottom: 0;
        width: 80%;
        mix-blend-mode: normal;
    }

    .placename .engName {
        font-family: var(--engfont) !important;
        font-size: 1.8em !important;
        line-height: 1.2em !important;
    }

    .blueberry {
        top: 20%;
        left: 60%;
        z-index: 1;
    }

    .naplessection {
        background: #FFF none;
        padding-bottom: 80px;
    }

    .hero-content,
    .hero-content>img {
        width: 100%;
        height: 100vh;
        margin: 0 auto;
    }

    .mapplace {
        display: none;
    }

    .mapplace span {
        font-size: 0.9em !important;
    }

    .flags {
        width: 25px !important;
        height: 19px !important;
    }
}

@media (max-width: 480px) {
    .p30 {
        padding: 30px 0 !important;
    }

    .mt30 {
        margin-top: 10px !important;
    }

    .imgSet {
        padding: 0 20px !important;
    }



    .curvediv {
        padding-bottom: 50px;
    }

    #aboutWe {
        padding: 50px 0 0 0;
    }

    .circlemark {
        border-radius: 0;
    }

    .imgContainerBlock ul li {
        width: calc(100% - 20px);
        height: 200px;
    }

    .imgContainerBlock li .description h3 {
        padding: 0;
        margin: 0;
    }


    .wasabi {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;

    }

    .bgsalmon {
        color: #fff !important;
    }

    .wasabi .contentflexbox {
        min-height: 400px;
    }

    .wasabi h2 {
        font-family: var(--thaifont) !important;
        font-size: 1.4em !important;
        line-height: 1.4em !important;
        padding: 20px;
    }

    .wasabi p {
        font-size: 1.4em !important;
        padding: 20px;
    }

    .david {
        width: 50%;
        height: auto;
        margin-left: 0;
    }

    .bgdavid {
        width: 100%;
        height: 100%;
        object-fit: 100% 100%;
    }

    .colosseumbox {
        position: relative;
        background-blend-mode: overlay;
        background-size: auto 50%;
        height: auto;
    }

    .colosseumbox .gradientswap {
        position: relative;
        background: #663300;
        height: auto;
        width: 100%;
        transform: none;
        top: 0;
        left: 0 !important;
    }

    .colosseumbox .swapbox {
        position: relative;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        padding: 80px 20px 20px 20px;
    }

    .boxknowlist ul {
        padding: 20px;
    }

    .cloudybox {
        display: none
    }

    .wttwlogo {
        width: 100%;
        max-width: 150px;
        margin: 0 auto;
    }

    .containerbox {
        margin: 30px 0;
    }

    .contentflexbox {
        padding: 0;
    }

    .rowbox {
        gap: 20px;
        padding: 0 20px;
    }

    .redbg {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 70vh;
        min-height: 800px;
        background-size: auto 100%;

    }


    .redbg .textswap h3 {
        font-size: 1.4em !important;
        font-weight: 600 !important;
    }

    .remarks {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 20px auto;
    }

    #footersec {
        margin: 0 !important;
    }

    .aboutme {
        max-width: 300px;
        margin: 0 auto;
    }

    .mapplace span {
        display: none;
    }

}