@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Light.eot');
    src: url('font/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Light.woff2') format('woff2'),
        url('font/Poppins-Light.woff') format('woff'),
        url('font/Poppins-Light.ttf') format('truetype'),
        url('font/Poppins-Light.svg#Poppins-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Trocchi';
    src: url('font/Trocchi-Regular.eot');
    src: url('font/Trocchi-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Trocchi-Regular.woff2') format('woff2'),
        url('font/Trocchi-Regular.woff') format('woff'),
        url('font/Trocchi-Regular.ttf') format('truetype'),
        url('font/Trocchi-Regular.svg#Trocchi-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --lblue:#81CBD6;
    --red:#AF4F3E;
    --blue:#5A55B7;
    --yellow:#FDED3F;
    --green:#57B853;
}

/* font */
body {font-family:'Poppins';font-weight:300}
h1, h2 {font-family:'Trocchi';font-weight:normal;}
h1, h2, h3, h4, h5, strong {font-weight:bold;}
.fs-8 {font-size: 4rem}
.fs-7 {font-size: 3.5rem}
.fs-6 {font-size: 3rem}
.fs-5 {font-size: 2.5rem}
.fs-4 {font-size: 2rem}
.fs-3 {font-size: 1.5rem}
.fs-2 {font-size: 1rem}
.fs-1 {font-size: .75rem}

/* default */
h1 {text-align:center;margin:1rem 0 .5rem;font-size:2rem;text-transform:uppercase;}
h2 {font-size:1.5rem}
.top .lead {font-size:1rem;text-align:center}
.top p {text-align:center;margin:1rem 0}
.txt-bg {
    background-image:url('img/txt-bg.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}
.txt-bg > div {width:calc(50% + 1px);padding:1.5rem 0;position:relative}
.txt-bg > div::after {content:'';background:var(--red);border-radius:50%;width:6rem;height:6rem;position:absolute;display:block;top:calc(50% - 3.5rem);border:3px solid white;outline:3px solid var(--red)}
.txt-bg h2, .txt-bg p {background:rgba(255,255,255,.8)}
.txt-bg h2 {padding-bottom:.5rem!important;margin-bottom:0}
.txt-bg p {padding-top:0!important}
.txt-bg > div:nth-child(2n + 1) {margin-right:auto;text-align:right;border-right:2px solid black}
.txt-bg > div:nth-child(2n) {margin-left:auto;border-left:2px solid black}
.txt-bg > div:nth-child(2n + 1)::after {right:-3rem}
.txt-bg > div:nth-child(2n)::after {left:-3rem}
.txt-bg > div:nth-child(2n + 1) h2, .txt-bg > div:nth-child(2n + 1) p {padding:1rem 5rem 1rem 1rem}
.txt-bg > div:nth-child(2n) h2, .txt-bg > div:nth-child(2n) p {padding:1rem 1rem 1rem 5rem}
.txt-bg > div:nth-child(2)::after {background:var(--blue);outline-color:var(--blue)}
.txt-bg > div:nth-child(3)::after {background:var(--yellow);outline-color:var(--yellow)}
.txt-bg > div:nth-child(4)::after {background:var(--green);outline-color:var(--green)}
.top-line {border-top:10px solid var(--lblue);position:relative}
.top-line::before {content:'';background:var(--lblue);border-radius:50%;width:6rem;height:6rem;position:absolute;display:block;left:calc(50% - 3rem);border:3px solid white;outline:3px solid var(--lblue);top:calc(-3rem - 5px)}
.bottom {padding:4rem 0 0 0;text-align:center}
.bottom .img-div {overflow:hidden;margin-top:3rem}
.bottom .d-flex {width:112%;margin-left:-6%}
.bottom img {width:40%;height:auto}
.bottom img:nth-child(2) {margin:0 .5rem}
.contact {padding:4rem 0;text-align:center}
.contact::before {content:url('icon/phone.svg')}
.location {padding:4rem 0;text-align:center}
.location::before {content:url('icon/location.svg')}
.services {padding:4rem 0;text-align:center}
.services::before {content:url('icon/phone.svg')}
.services h2 {margin-bottom:1rem}
.services button {text-align:left;padding-left:0;padding-top:0;padding-bottom:0;display:inline}
.services ul {list-style:none;text-align:left}
.services li {margin-bottom:.5rem}
.services li::before {
    content: "\2022";
    color: var(--lblue);
    font-weight: bold;
    display: inline!important; 
    width: 1em;
    margin-left: -1em;
    vertical-align:top;
}
.info {padding:4rem 0 0 0;text-align:center;border-bottom:3rem solid var(--lblue)}
.info::before {content:url('icon/info.svg')}

/* colors */
a, a:link, a:visited {color:var(--lblue);text-decoration:underline}
a:hover {color:var(--blue)}
.btn-white {background-color:white;border-color:white;color:var(--lblue)!important}
.btn-white:hover, .btn-white.active {color:var(--blue)!important}
.qc-cmp2-persistent-link {background:var(--red)!important;border-color:var(--red);color:white!important}

/* header */
header .container-fluid {background:var(--lblue);position:relative;height:7rem;margin-bottom:6rem}
header img {width:10rem;height:10rem;position:absolute;top:2rem;left:calc(50% - 5rem);background:white;padding:1rem;border-radius:50%;}

/* footer */
footer {background-color:white;border-top:4px solid var(--green)}
footer .container .row {padding:3rem 0}
footer .container .row > div {-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%;padding:0 1rem}
#ergo {width:3rem;margin-top:.5rem}
#ergo path, #ergo rect {fill:var(--lblue) !important}

/* cookie */
.cookie {position:fixed;bottom:1rem}
.cookie > div {background-color:var(--lblue);color:white;padding-top:1rem;padding-bottom:1rem}

@media screen and (min-width:992px){
}

@media screen and (max-width:1366px) {
}
@media screen and (max-width:1199px){
}
@media screen and (max-width:1024px) {
	.fs-5 {font-size: 2rem}
	.fs-4 {font-size: 1.5rem}
	.fs-3 {font-size: 1.25rem}
}
@media screen and (max-width:991px){
}
@media screen and (max-width:768px){
    .fs-5 {font-size: 1.75rem}
	.fs-4 {font-size: 1.5rem}
	.fs-3 {font-size: 1.25rem}
    .txt-bg {background:none;padding-top:2rem}
    .txt-bg > div {width:100%;text-align:center!important;border:0 none!important}
    .txt-bg > div::after {width:4rem;height:4rem;top:0;left:calc(50% - 2rem)!important;right:auto!important}
    .txt-bg > div h2, .txt-bg > div p {padding:4rem 1rem 1rem 1rem!important}
    .txt-bg > div p {padding-top:0!important}
    .top-line::before {width:4rem;height:4rem;left:calc(50% - 2rem);top:calc(-2rem - 5px)}
}
@media screen and (max-width:480px) {
    h1 {font-size:1.75rem}
    .fs-6 {font-size: 2rem}
	.fs-5, #cart h4 {font-size: 1.25rem}
	.fs-4 {font-size: 1.125rem}
	.fs-3 {font-size: 1rem}
	.fs-2 {font-size: .875rem}
}