* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: system-ui;
    transition-duration: 0.2s;
}

body {
    width: 100%;
    height: auto;
}



nav {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    height: 120px;
    z-index: 100;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px  rgba(0, 0, 0, .8);
}
.logo {
    float: left;
    margin-left: 1vw;
    width: 30vw;
    height: 100%;
    background: url("web_icons/ameus_logo_&_text_color.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.menu {
    display: block;
    width: calc(100% - 300px);
    height: 100%;
    margin-left: 300px;
}
input#menu-trigger {
    display: none;
}
label#menu-label {
    display: none;
}
.menu > ul {
    float: right;
    height: 100%;
    width: 650px;
    list-style-type: none;
    white-space: nowrap;
}
.menu > ul > li {
    display: inline-block;
    margin: 0;
    height: 53px;
    border-bottom: 2px solid  #3399ff;
    transition-duration: 0.2s;
}
#now {
    background: -webkit-linear-gradient(45deg, #164fdb, #16c3ab);
    border-bottom: 2px solid #3399ff;
}
li#lang {
    display: block;
    height: 45px;
    margin: 10px 0 0 calc(100% - 120px);
    width: min-content;
    border: none;
    cursor: default;
}
li#lang > input#lang-trigger {
    appearance: none;
    float: left;
}
li#lang > label#lang-label {
    color: #fff;
    padding: 10px 15px;
}
#lang > form {
    opacity: 0;
}
li#lang > input#lang-trigger:checked ~ form {
    opacity: 1;
    transition: 0.5s;
}
li#lang > input#lang-trigger:checked ~ form > ol {
    display: block;
    opacity: 1;
}
form > ol {
    display: none;
    width: 100%;
    list-style-type: none;
}
ol > li > input[type="radio"] {
    display: none;
}
ol > li > label {
    box-sizing: border-box;
    display: block;
    padding: 10px 0;
    margin: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #1671fe;
    border: 2px solid  #1671fe;
}
ol > li > label:hover {
    background: #2f84e7;
}
ol > li > input[type="radio"]:focus + label {
    border: 1px dashed #fff;
}
ol > li > input[type="radio"]:checked + label {
    font-weight: 700;
}
.menu > ul > li:hover {
    background: #1671fe;
    border-bottom: 2px solid  #1671fe;
}
.menu > ul > li > a {
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.menu > ul > li > a > p {
    color: #fff;
    font-weight: 600;
    padding: 15px 25px;
}







#header_graphics {
    width: 100%;
    height: auto;
    padding-bottom: 50px;
}
.top_design {
    width: 100%;
    height: 300px;
    background: url("photos/container-m.png");
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(150%);
}






#info-form {
    width: 100%;
    height: auto;
    text-align: center;
}
.rectangle {
    width: 800px;
    height: 500px;
    background-color: #1674d3;
    display: inline-block;
    text-align: left;
    border-radius: 5px;
    margin-bottom: 300px;
    white-space: nowrap;
    overflow: hidden;
}
.rectangle > div {
    display: inline-block;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
}
#info {
    display: inline-block;
    padding: 15px;
    box-sizing: border-box;
}
#info > h2 {
    color: #fff;
}
.lst {
    display: block;
    width: 100%;
    height: min-content;
    box-sizing: border-box;
    white-space: normal;
    margin: 20px 0;
}
.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-bottom: -5px;
}
#ic_addr {
    background: url("web_icons/my_location_black_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* add alt to the background */
}
#ic_mail {
    background: url("web_icons/alternate_email_black_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* add alt to the background */
}
#ic_phone {
    background: url("web_icons/phone_in_talk_black_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* add alt to the background */
}
#ic_vat {
    background: url("web_icons/vat_black_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* add alt to the background */
}
#contact {
    display: inline-block;
    margin-left: -4px;
    background-color: #0253a5;
    white-space: normal;
    padding: 15px;
}
h2 {
    text-align: center;
    line-height: 200%;
    font-size: 30px;
}
#info > p {
    white-space: normal;
    font-size: 17px;
    padding: 7px;
    color: #fff;
}
.box {
    display: inline-block;
    width: calc(100% - 40px);
    height: 32px;
    color: #fff;
    white-space: nowrap;
    vertical-align: top;
}
.lst > div:nth-child(n+3) {
    margin-left: 34px;
}
.box > h1 {
    display: inline-block;
    width: min-content;
    font-size: 20px;
    margin: 5px 0;
    user-select: all;
}
.box > p {
    user-select: none;
    display: none;
    margin: 7px 0;
    float: right;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.box:hover > p {
    display: block;
}
#pic {
    background: url("photos/contact-m.png");
    background-repeat: no-repeat;
    background-size: cover;
}








footer {
    display: block;
    width: 100%;
    background-color: #1674d3;
    text-align: center;
    padding: 40px 0;
}
.arrow {
    display: block;
    margin: -20px calc(50% - 20px);
    position: absolute;
    width: 60px;
    height: 60px;
    color: #fff;
    background: #2f84e7;
    border-radius: 15px;
    padding: 0;
}
.arrow > a {
    display: block;
    width: 60px;
    height: 60px;
    padding: 10px;
}
.arrow:hover {
    background: #fff;
}
.arrow:hover > a > .img {
    background: url("web_icons/north_blue_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition-duration: 0s;
}
.img {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url("web_icons/north_white_24dp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition-duration: 0s;
}
footer > div {
    display: inline-block;
    width: 250px;
    vertical-align: top;
    text-align: left;
    padding: 10px 15px;
    margin-top: 20px;
}
footer > div > p {
    margin: 5px 0;
}
footer > div > a {
    text-decoration: none;
}
footer > .icons {
    display: none;
}
.mini-title {
    color: #fff;
    font-size: 25px;
    text-align: center;
    margin: 20px 0;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 2px solid #1674d3;
}
.mini-title:hover {
    border-bottom: 2px solid #fff;
}
#note {
    width: auto;
    display: block;
    position: relative;
    bottom: 0;
    margin: 20px 30px;
}
#note > p {
    white-space: nowrap;
    color: #fff;
}

@media screen and (min-width: 1600px) {
    nav {
        position: fixed;
        width: 1600px;
        height: 120px;
        margin: 0 calc((100% - 1600px) / 2);
    }

    #header_graphics {
        width: 1600px;
        margin: 0 calc((100% - 1600px) / 2);
    }
    h1 {
        top: 530px;
        right: 250px;
    }
}




/* skorzystać z skryptu w octave i napisać po 9 punktów dpi na każde ui */
/* odstęp od lini 87,5px */
@media screen and ( ((max-width: 175px) and (min-resolution: 50dpi)) or ((max-width: 525px) and (min-resolution: 100dpi)) or ((max-width: 875px) and (min-resolution: 150dpi)) or ((max-width: 1225px) and (min-resolution: 200dpi)) or ((max-width: 1575px) and (min-resolution: 250dpi)) or ((max-width: 1925px) and (min-resolution: 300dpi)) or ((max-width: 2275px) and (min-resolution: 350dpi)) or ((max-width: 2625px) and (min-resolution: 400dpi)) or ((max-width: 2975px) and (min-resolution: 450dpi)) or ((max-width: 1325px) and (min-resolution: 500dpi)) or ((max-width: 3675px) and (min-resolution: 550dpi)) or ((max-width: 4025px) and (min-resolution: 600dpi))) {
    div.logo {
        width: 200px;
    }
    div.menu {
        margin-left: 200px;
        width: calc(100% - 200px);
    }
    div.menu > ul {
        display: none;
    }
    input#menu-trigger {
        appearance: none;
        display: inline-block;
        margin: 0;
    }
    label#menu-label {
        display: block;
        margin: 10px 10px 0 0;
        float: right;
    }
    label > div.container {
        border: 2px solid #fff;
        border-radius: 5px;
        padding: 1px;
        width: 60px;
        height: 51px;
    }
    label > div.container > span {
        display: block;
        border-top: 3px solid #fff;
        width: 40px;
        height: 2px;
        margin: 9px 7px;
    }
    input#menu-trigger:checked ~ label > div.container > span:first-child {
        border-top: 4px solid red;
        transform: translate(0,12px) rotate(0.125turn) scaleX(1.3);
    }
    input#menu-trigger:checked ~ label > div.container > span:nth-child(2) {
        display: none;
    }
    input#menu-trigger:checked ~ label > div.container > span:last-child {
        border-top: 4px solid red;
        transform:  rotate(-0.125turn) scaleX(1.3);
    }
    input#menu-trigger:checked ~ ul {
        transition: 0.5s;
        display: block;
        position: absolute;
        top: 120px;
        left: 0;
        width: 100vw;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .4);
        backdrop-filter: blur(10px);
        text-align: center;
        border: none;
    }
    ul > li {
        display: block;
        float: left;
        width: 100%;
        height: auto;
    }
    li#lang {
        margin: 0;
    }
    li#lang {
        /*color: #165bd3;*/
        background: none;
    }
    li#lang > label#lang-label {
        display: inline-block;
        margin: 0;
        width: 100vw;
        background: none;
        border: none;
        color: #165bd3;
    }
    li#lang > label#lang-label:hover{
        color: #fff;
        background: #164fdb;
    }
    li#lang > input#lang-trigger:checked ~ #lang-label{
        color: #fff;
        background: #164fdb;
    }






    #header_graphics{
        height: 200px;
    }
    .top_design{
        height: 200px;
    }






    .rectangle{
        width: 80vw;
        min-width: 260px;
        margin-top: 30px;
    }
    #pic{
        display: none;
    }
    #info{
        width: 100%;
        min-width: 250px;
    }
    .box > p {
        display: block;
        color: #16c3ab;
    }







    footer > div {
        margin-top: 0;
    }
    footer > div:nth-child(2) {
        margin-top: 40px;
    }
    .mini-title {
        margin: 0;
    }
}







@media screen and (max-width: 430px){
    .box > p {
        display: none;
    }
}