/****************************************
* Font                                  *
****************************************/

@font-face {
    font-family: 'Roboto Condensed Bold';
    src: url("../font/RobotoCondensed-Bold.e38804ae070b.ttf");
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url("../font/RobotoCondensed-Regular.0134dd8fe6fe.ttf");
}


/****************************************
* Global                                *
****************************************/

html, body {
    margin: 0;
    font-family: 'Roboto Condensed';
    scroll-behavior: smooth;
}

textarea {
    font-family: 'Roboto Condensed';
}

b, strong {
    font-family: 'Roboto Condensed Bold';
}

.pro_plast_banner {
    background-color: #1b458e;
    padding: 8px 15px;
    color: #FFFFFF;
}

.pro_plast_headline {
    text-transform: uppercase;
    background-color: #dddbdb;
    padding: 5px;
    font-size: 16px;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}

a, a:focus, a:visited, a:hover {
    color: #014a8f;
    text-decoration: none;
}

th {
    white-space: nowrap;
}

.center {
    text-align: center;
}

.language-select {
    text-transform: capitalize;
}

/****************************************
* Icons & Colors                        *
****************************************/
.fa-truck {
    color: red;
}
.fa-truck-fast {
    color: green;
}
.red {
    color: red;
}

/****************************************
* Contact                               *
****************************************/

.pro_plast_header .pro_plast_header_contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #014a8f;
}

.pro_plast_header .pro_plast_header_contact .pro_plast_header_contact_item {
    width: 33%;
    text-align: center;
    color: #FFFFFF;
}

.pro_plast_header .pro_plast_header_contact .pro_plast_header_contact_item p,
.pro_plast_header .pro_plast_header_contact .pro_plast_header_contact_item i {
    margin: 5px;
    font-size: 18px;
}

.pro_plast_header .pro_plast_header_contact .pro_plast_header_contact_item.socialmedia .socialmedia_icons {
    color: #FFFFFF;
}

.pro_plast_header .pro_plast_header_contact .pro_plast_header_contact_item p {
    font-family: 'Roboto Condensed Bold';
}

/****************************************
* Navigation                            *
****************************************/

.pro_plast_header .pro_plast_header_navigation {
    height: 120px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_logo .toggleNavigation {
    margin: 5px;
    padding: 5px 10px;
    border: 2px solid #555555;
    border-radius: 4px;
    display: none;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_logo {
    width: 20%;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_logo img {
    width: 60%;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text {
    width: 60%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text a {
    text-decoration: none;
    color: #303030;
    cursor: pointer;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text a:hover {
    color: #FFFFFF;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text #login_popup {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background-color: #FFFFFF;
    width: 200px;
    border: 1px solid #dddddd;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 100;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text #login_link:hover > #login_popup {
    display: block;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text #login_popup h2 {
    margin: 0 0 15px 0;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text #login_popup input {
    width: 96%;
    height: 28px;
    margin-bottom: 15px;
}

.pro_plast_header .pro_plast_header_navigation .pro_plast_header_navigation_text #login_popup button {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border: none;
    background-color: #014a8f;
    color: #FFFFFF;
    font-family: 'Roboto Condensed Bold';
}

/****************************************
* Search                                *
****************************************/

.pro_plast_header_search {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fdd101;
    justify-content: center;
    align-items: center;
}

.pro_plast_header_search h2,
.pro_plast_header_search h3 {
    margin: 5px;
    color: #014a8f;
    font-family: 'Roboto Condensed Bold';
}

.pro_plast_header_search h2 {
    font-size: 1.8rem;
}

.pro_plast_header_search p {
    margin: 5px;
}

.pro_plast_header_search p a {
    color: #014a8f;
    text-decoration: none;
}

.pro_plast_header_search input {
    width: 350px;
    line-height: 42px;
}

.pro_plast_header_search button {
    height: 48px;
    margin: 0;
    padding: 0 10px;
    float: right;
    border: none;
    background-color: #014a8f;
    color: #FFFFFF;
    font-family: 'Roboto Condensed Bold';
}

.alert {
    color: white;
    background-color: red;
    padding: 20px;
}

.alert.success {
    color: white;
    background-color: green;
    padding: 1px 20px;
}

/****************************************
* Colors                                *
****************************************/
.color1 {
    color: transparent;
    border: 1px solid black;
    border-radius: 50%;
}
.color2 {
    color: black;
}
.color3 {
    color: white;
}
.color4 {
    color: lightgrey;
}
.color5 {
    color: pink;
}
.color6 {
    color: beige;
}
.color7 {
    color: yellow;
}
.color8 {
    color: blue;
}
.color9 {
    color: violet;
}
.color10 {
    color: green;
}
.color11 {
    color: red;
}
.color12 {
    color: orange;
}
.color13 {
    color: brown;
}


/****************************************
* Drawer                                *
****************************************/

#drawer {
    width: 0;
    height: fit-content;
    padding-top: 60px;
    padding-bottom: 20px;
    text-align: center;
    position: fixed;
    z-index: 99999999;
    top: 30%;
    right: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.5s;
}

#drawer.open {
    width: 20%;
}

#drawer a {
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    display: block;
    transition: 0.3s;
}

#drawer .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 36px;
}

#drawer label,
#drawer input,
#drawer textarea {
    width: 85%;
    margin: 0 25px;
}

#drawer input {
    margin: 5px 25px 25px 25px;
    height: 2rem;
}

#drawer .g-recaptcha div {
    margin: auto;
}


#drawer textarea {
    resize: none;
}

#drawer button {
    margin: 5px 25px;
    background-color: #1b458e;
    border: none;
    padding: 8px 15px;
    color: #FFFFFF;
}

#open_drawer {
    padding: 20px;
    position: fixed;
    top: 50%;
    right: 0px;
    background-color: #014a8f;
    color: #FFFFFF;
}

@media screen and (max-height: 450px) {
    #drawer {
        width: 80%;
        padding-top: 15px;
    }

    #drawer a {
        font-size: 18px;
    }
}

@media screen and (min-height: 2000px) {
    #drawer {
        top: 40%;
    }

    #drawer label, #drawer input, #drawer textarea {
        width: 90%;
    }
}

/****************************************
* Tooltip                               *
****************************************/

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid #000000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/****************************************
* image banner                          *
****************************************/

.image-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.image-banner img {
    width: 30%;
    height: 200px;
    object-fit: cover;
}

@media screen and (max-width: 650px) {
    .image-banner {
        display: none;
    }
}

/****************************************
* Cookie                                *
****************************************/

#cookie_banner {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
    background-color: #1b458e;
}

#cookie_banner .cookie_banner_wrapper {
    width: 70%;
    margin: auto;
    color: #FFFFFF;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
} 

#cookie_banner .cookie_banner_wrapper .cookie_banner_text {
    width: 80%;
}

#cookie_banner .cookie_banner_wrapper .cookie_banner_button {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    text-align: center;
}

#cookie_banner .cookie_banner_wrapper p {
    margin: 10px 0;
}

#cookie_banner .cookie_banner_wrapper p a {
    color: #FFFFFF;
}

#cookie_banner .cookie_banner_wrapper .cookie_banner_button button {
    margin: 5px 20px;
    padding: 5px 10px;
    background-color: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
}

#cookie_banner .cookie_banner_wrapper .cookie_banner_button button.accept_cookies {
    border: 1px solid #27A844;
    background-color: #27A844;
}

#cookie_banner .cookie_banner_wrapper .cookie_banner_button button.functional_cookies {
    border-bottom: 1px solid #FFFFFF;
}

/****************************************
* Footer                                *
****************************************/

footer {
    padding: 25px 0;
}

footer .footer_main {
    background: linear-gradient(0deg,#f4f2f3 80%,#FFFFFF 20%);
}

footer .footer_main .footer_wrapper {
    width: 70%;
    margin: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #f4f2f3;
    box-shadow: 4px 0 4px -4px #e6e6e6, -4px 0 4px -4px #e6e6e6;
}

footer .footer_main .footer_wrapper .footer_item {
    width: 16%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

footer .footer_main .footer_wrapper .footer_item svg {
    font-size: 2.5rem;
    padding-right: 10px;
}

footer .footer_main .footer_wrapper .footer_item p {
    color: #014a8f;
    font-size: 1.1rem;
}

footer .footer_links {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
}

footer .footer_links p a {
    margin-left: 15px;
    text-decoration: none;
    color: darkgray;
}