@import '../Headers/Header_02/header_02.css';
@import '../Moduli/SliderScorrimento/news-stripe_2.css';
@import "../Moduli/SliderScorrimento/carousel-big.css";

.services-grid {
	border: 1px solid var(--color-main---);
}
.index-list a {
    display: block;
    background: var(--color-pure-white);
    padding: .7em 1.4em;
    border-radius: 2.604vw;
    border: 1px solid var(--color-pure-white);
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.08);
    font-family: var(--md-font);
    color: var(--color-main-);
    margin: 0 .5em
}

a.index-btn:hover {
    color: var(--color-main)!important;
    background-color: white!important;
    border-color: var(--color-main)!important;
    box-shadow: unset!important
}
.tag p {
    padding: .5rem 1rem;
    border-left: 1px solid var(--color-main---);
    min-width: 6.25vw;
    text-align: center;
}
.tag p.tag-home {
    background: var(--color-main-);
}
.tag p.tag-agency {
    background: var(--color-main);
}
.services-grid .col-content-title {
    max-width: 80%;
}
/* 1920x1080
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    .tag p {
        min-width: 120px;
    }
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1620px) {

}


/* Standard Laptops - Ok until 1440px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1599px) {
    .services-grid .bg-btn {
        margin-top: 30px;
    }
    .services-grid .img-size_00 img {
        min-height: 360px;
    }
    .tag p {
        font-size: 9px;
        min-width: 100px;
        padding: .4rem 1rem;
    }
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1279px) {
    .services-grid .col-content-title {
        max-width: 100%;
    }
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
    .index-list a {
        font-size: 9px;
        padding: .7em;
    }
    .services-grid .img-size_00 img {
        min-height: 320px;
    }
    .services-grid .bg-btn {
        margin-top: 25px;
    }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
    #archive-services_arteidro .stripe-container {
        padding-top: 3em;
    }
	.index-list {
        flex-flow: wrap;
        gap: 1em;
        padding-bottom: 0;
    }
    .index-list a {
        font-size: 11px;
    }
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    .services-grid .col {
        width: 100%;
    }
    .services-grid .col-img img {
        min-height: unset;
        height: 15em;
    }
    #archive-services_arteidro .stripe-container-inner.apply-pad-2 {
        padding-left: 0;
        padding-right: 0;
    }
    .services-grid .col-2 .col-content-inner {
        padding: 1.5em;
    }
    .tag {
        z-index: 1;
    }
    .tag p {
        border-left: 0;
    }
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .index-list {
        gap: .5em;
        justify-content: flex-start;
    }

    .index-list a {
        font-size: 9px;
        border-radius: 100px;
    }
    .services-grid .bg-btn {
        width: 100%;
        padding: 16px;
    }
}