/* Teamplate Iniziale CSS Grid */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Montaga", serif;
    font-weight: 400;
    font-style: normal;
}

.clearer {
    clear: both;
}

img {
    border: none;
}

*:focus {
    outline: none;
}

header,
nav,
article,
aside,
section,
footer,
main,
figure,
figcaption {
    display: block;
}

.clearfix::before,
.clearfix::after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix::after {
    clear: both;
}

.content {
    width: 1170px;
    margin: 0 auto;
}

.row {
    width: 100%;
    clear: both;
    display: block;
}

.col-1 {
    width: 8.33333%;
    float: left;
}

.col-2 {
    width: 16.66666%;
    float: left;
}

.col-3 {
    width: 25%;
    float: left;
}

.col-4 {
    width: 33.33333%;
    float: left;
}

.col-6 {
    width: 50%;
    float: left;
}

.col-8 {
    width: 66.66666%;
    float: left;
}

.col-10 {
    width: 83.33333%;
    float: left;
}

.divider {
    padding: 20px 0;
}

.reponsive,
.responsive img {
    width: 100%;
    height: auto;
}

.center {
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

/* Burger Button */

.button {
    float: right;
    cursor: pointer;
}

.icon-bar {
    display: block;
    width: 22px;
    height: 1px;
    margin: 5px;
    background-color: #006181;
}

.nav {
    padding-bottom: 15px;
}

.menu {
    list-style-type: none;
}

.menu li {
    display: inline;
    font-size: 15px;
    padding: 30px;
    text-transform: uppercase;
}

.menu img {
    width: 100px;
    height: 80px;
}

.menu a {
    text-decoration: none;
    color: #54aedb;
}

.menu a:hover {
    color: #006181;
}

/* Content */

.advantages p {
    font-size: 25px;
}

.voice {
    background-color: #e1e1e1;
}

.col-3 p {
    padding-top: 25px;
}

.col-3 h4 {
    padding-top: 25px;
    font-size: 20px;
}

figure h3 {
    padding-top: 20px;
    padding-bottom: 20px;
}

figure {
    border-style: inset;
    margin-right: 30px;
    background-color: white;
}

figcaption {
    text-align: center;
    margin: 0px 20px;
}

.col-4 figure img {
    width: 354px;
    height: 188px;
}

.col-2 img {
    max-width: 100%;
}

/* Services */

.services h2 {
    margin-bottom: 20px;
}

.services p {
    text-align: left;
}

.voiceservice {
    list-style-type: none;
}

.voiceservice li {
    position: relative;
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
    text-align: left;
}

.voiceservice li:before {
    content: '';
    background-color: #c00;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 6px;
    width: 3px;
}

.voiceservice li:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    height: 15px;
    width: 15px;
}

.cc_figure p {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 25px;
}

.cc_figure a {
    text-decoration: none;
    color: #006181;
}

.call_center_list {
    text-align: left;

}

.call_center_list li::marker {
    color: #006181;
}

.callcenter h3 {
    margin: 20px 0;
}

.pricelist {
    background-color: #e1e1e1;
    width: 100%;
}

.pricelist a {
    text-decoration: none;
}

.pricelist h1 {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Footer */

.footer {
    background-color: #e1e1e1;
    position: absolute;
    width: 100%;
}

.footer h3 {
    margin-bottom: 30px;
    padding-top: 20px;
}

.footer p {
    margin-bottom: 20px;
}

.footer .col-4:nth-child(3) a {
    text-decoration: none;
    color: black;
}

.footer .col-4:first-child a {
    text-decoration: none;
}

.footer .col-4:nth-child(3) a:hover {
    color: #54aedb;
}


/* Media Query */

/* Desktop High Resolution */

@media only screen and (min-width: 1281px) {
    .button {
        display: none;
    }

    .col-2 img {
        max-width: 100%;
        margin-left: 100px;
    }
}

@media only screen and (min-width: 1170px) and (max-width: 1280px) {
    .button {
        display: none;
    }

    .col-2 img {
        max-width: 100%;
        margin-left: 100px;
    }

}

/* Desktop, iPad Pro */
@media only screen and (min-width: 1024px) and (max-width: 1170px) {
    .content {
        width: 96%;
        margin: 0 2%;
    }

    .button {
        display: none;
    }
}

/* Display 12", iPad Pro portrait, iPad landscape */
@media only screen and (max-width: 1024px) {
    .content {
        width: 96%;
        margin: 0 2%;
    }
}

@media only screen and (min-width: 638px) and (max-width: 1024px) {
    .button {
        display: none;
    }
}

@media only screen and (min-width: 375px) and (max-width: 638px) {
    .menu {
        float: right;
    }

    .background img {
        width: 100%;
        height: 100%;
    }

    .col-3 i {
        margin-top: 50px;
    }

    .col-4 figure {
        margin-left: 22px;
    }

    .col-4 figure img {
        width: 316px;
        margin-right: 1px;
    }

    .button {
        display: block;
        cursor: pointer;
    }

    .nav {
        position: fixed;
        left: -100%;
        width: 260px;
        height: 100%;
        top: 0;
        z-index: 99999;
        overflow-y: scroll;
        background-color: #e1e1e1;
        transition: transform .5s ease-in-out;
        margin-right: 0;
        float: none;
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
    }

    .wide {
        transform: translate(150%);

    }

    .nav li {
        display: block;
        line-height: 50px;
    }

    .nav li:first-child {
        padding-top: 100px;
    }

    .col-2 img {
        margin-top: 50px;
        max-width: 50%;
    }

}


@media only screen and (min-width: 360px) and (max-width: 375px) {
    .menu {
        display: none;
    }

    .navbar {
        display: block;
    }
}

/* 1284×2778 pixels at 460ppi: iPhone 14 Pro Max, 15 Plus, 15 Pro Max */
@media only screen and (width: 430px) and (height: 932px) and (-webkit-device-pixel-ratio: 3) {}

/* 1179×2556 pixels at 460ppi: iPhone 14 Pro, 15, 15 Pro */
@media only screen and (width: 393px) and (height: 852px) and (-webkit-device-pixel-ratio: 3) {}

/* 1170×2532 pixels at 460ppi: iPhone 12, 12 Pro, 13, 13 Pro, 14 */
@media only screen and (width: 390px) and (height: 844px) and (-webkit-device-pixel-ratio: 3) {}

/* 1284×2778 pixels at 458ppi: iPhone 12 Pro Max, 13 Pro Max, 14 Plus */
@media only screen and (width: 428px) and (height: 926px) and (-webkit-device-pixel-ratio: 3) {}

/* 1080×2340 pixels at 476ppi: iPhone X, XS, 11 Pro, 12 Mini, 13 Mini */
@media only screen and (width: 375px) and (height: 812px) and (-webkit-device-pixel-ratio: 3) {}

/* 828×1792 pixels at 326ppi: iPhone XR, 11 */
@media only screen and (width: 414px) and (height: 896px) and (-webkit-device-pixel-ratio: 2) {}

/* 1242×2688 pixels at 458ppi: iPhone XS Max, 11 Pro Max */
@media only screen and (width: 414px) and (height: 896px) and (-webkit-device-pixel-ratio: 3) {}

/* Display 5.5", iPad portrait, iPhone 6, 6s, 7, 8 portrait and landscape, iPhone 5s landscape */
@media only screen and (max-width: 768px) {

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-6,
    .col-8,
    .col-10 {
        width: 100%;
        float: none;
    }
}

/* Display 4", iPhone 5s portrait */
@media only screen and (max-width: 320px) {}