body {
    margin: 0px;
    padding: 0px;
    font-family: Sora, sans-serif;
}

header {
    position: fixed;
    width: 100%;
    background-color: white;
    z-index: 250;
}
a {
    text-decoration: none;
    color: black;
}

a.callToAction, button.callToAction {
    text-transform: uppercase;
    padding: 14px 40px;
    background-color: #2997aa;
    font-size: 14px;
    color: white;
    border: 0px;
}
a.active {
    color:#2997aa;
}

a:hover {
    color: #3aa6b9;
}


a.callToAction:hover, button.callToAction:hover {
    color: white;
    background-color: #3aa6b9;
}

hr {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    display: block;
    height: 1px;
    width: 100%;
}

h2 {
    font-family: "Noto Serif", serif;
    font-size: 48px;
    margin-top: 80px;
}

.price {
    font-family: SoraBold, sans-serif;
    font-size: 1.375rem;
    font-weight: bold;
    margin: 6px 5px;
    white-space: nowrap;
}

.insideContainer {
    margin-left: auto;
    margin-right: auto;
    padding: 0px 35px;
    max-width: 1240px;
}


header .insideContainer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-column-gap: 0px;
    overflow-wrap: anywhere;
}
header .headerSection {
    height: 100%;
    min-height: 0;
    align-items: center;
    display: flex;
}
header .mainMenu {
    justify-content: center;
}
.logo {
    font-size: 39px;
    position: relative;
    top: 20px;
    font-family: "Noto Serif", serif;
    line-height: 80%;
    white-space: nowrap;
}
.logo a .name {
    color: #2997aa;
}
.logo a .suffix {
    color: #666666;
}
.logo .suffix {
    font-size: 20px;
    text-transform: uppercase;
    font-family: Sora, sans-serif;
}
.logo .suffix.second {
    font-size: 14px;
    line-height: 100%;
    margin-top: 5px;
    color: white;
}
header .userMenu {
    justify-content: flex-end;
    display: flex;
}


.userMenu .cart a {
    position: relative;
}

.userMenu .cart .counter {
    background-color: red;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    bottom: -8px;
    right: -10px;
    line-height: 150%;
    color: white;
    text-align: center;
    font-size: 14px;
}
header ul {
    display: inline-block;
    list-style: none;
}
header ul li {
    line-height: 50px;
    display: block;
    text-transform: uppercase;
    font-family: Sora, sans-serif;
    margin: 0px 15px;
    white-space: nowrap;
}
header ul li a {
    text-decoration: none;
}
header ul li a .aLabel {
    display: none;
}
header ul li a .icon svg, header ul li a .icon img {
    width: 1em;
    height: 1em;
    font-size: 28px;
}

.topPanel {
    background-color: #b3e0e6;
}

.topPanel .insideContainer {
    padding-top: 160px;
    padding-bottom: 100px;
    font-family: "Noto Serif", serif;
    font-size: 20px;
    text-align: center;
}

.topPanel .insideContainer h1 {
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
}

.topPanel .subtitle {
    color: #2997aa;
}

.content {
    background-color: #eaf9f9;
    min-height: 900px;
}
.content .insideContainer {
    padding: 30px 20px 110px 20px;
}

.footer {
    padding: 40px 0px 60px 0px;
}
.footer .insideContainer {

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 10px;

}
.footer h5 {
    font-size: 17px;
    margin-bottom: 10px;
    color: #2997aa;
}
.footer p {
    margin-top: 0px;
}
.footer .insideContainer aside a {
    display: block;
    line-height: 170%;
}

.bottom {
    background-color: black;
    color: white;
    padding: 40px 0px;
}

.specialNotice {
    background-color: #2a97ab;
    padding: 10px 20px 10px 180px;
    min-height: 39px;
    border-top: 0px solid white;
    color: white;
}
.specialNotice .insideContainer {
    display: grid;
    grid-template-columns: 80px auto;
    margin-top: 5px;
    margin-bottom: 5px;
}
.specialNotice .insideContainer div, .specialNotice .insideContainer h4, .specialNotice .insideContainer p {
    margin: 0px !important;
    padding: 0px !important;
    line-height: 144%;
}

.specialNotice .specialIcon {
    place-items: center;
    display: grid;
}
.specialNotice img {
    width: 40px;
}


header .headerSection.mobileMenu {
    display: none;
}
.mobileMenu .screenReaderText {
    display: none;
}

.mobileMenu button {
    background: none;
    border: 0px;
}
.mobileMenu .menuIconClose {
    display: none;
}
.mobileMenu button {
    padding-top: 30px;
}

.shadowContainer {
    margin-bottom: 1.25rem;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

.shadowContainer .shadow {
    max-width: 150px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.shadowContainer .shadow img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    display: block !important;
    min-height: 1px !important;
}

.shadow, .callToAction {
    transition: box-shadow .2s ease 0s;
    border-radius: .25rem;
    box-shadow: 4px 7px 11px 0 rgba(0, 0, 0, .22);
}

a:hover .shadow, .callToAction:hover, a.shadow:hover {
    box-shadow: 2px 5px 5px 0 rgba(0, 0, 0, .22);
}

.social {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.social a:hover img {
    opacity: 66%;
}

.social img {
    width: 32px;
    margin: 0px 4px 10px 8px;
}
.social .hn img {
    border: 1px solid #173261;
    border-radius: 2px;
}

.promoCompany {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 50% 50%;
}
.promoCompany img {
    max-width: 600px;
    width: 100%;
}
.promoCompanySection {
    background-color: #3aa6b9;
    padding: 40px 0px;
}
.promoText {
    font-size: 20px;
    line-height: 170%;
    padding: 0px;
    color: white;
}

@media (max-width: 1000px) {
    .promoCompany {
        grid-template-columns: 30% 70%;
    }
    .promoText {
        font-size: 14px;
    }
}

@media (max-width: 660px) {
    .promoCompany {
        grid-template-columns: none;
        grid-template-rows: auto auto;
    }

    .promoText {
        font-size: 14px;
    }
}

@media (max-width: 800px) {
    header .headerSection.mobileMenu {
        display: grid;
    }
    .mainMenu.headerSection {
        display: none;
    }
    header .insideContainer {
        grid-template-columns: 1fr auto 0.2fr;
    }

}

@media (max-width: 590px) {
    .footer .insideContainer {
        grid-template-columns: none;
        grid-template-rows: auto auto auto auto;
    }
    .specialNotice {
        padding-left: 20px;
    }

}