/**************************************************************************/
/********************************* RESET **********************************/
/**************************************************************************/
body, h1, h2, h3, a, ul, li {
    all: unset;
}

h1, h2, h3 { display: block; }

img, .dashicons, figure { user-select: none; }


/*------------------------------------------------------------------------*/



/**************************************************************************/
/********************************* GLOBAL *********************************/
/**************************************************************************/
.container { margin-inline: 11%; }
html *, body * {
    font-family: 'Source Sans Pro', sans-serif;

}
img { overflow-clip-margin: unset; }
.link { text-decoration: underline; }
/*body { background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0b3);
    background-size: 10px 10px, 10px 10px, 100% 100%;
	background-position: 1px 1px, 0px 0px, center center; }*/
a:hover {cursor: pointer;}
p { line-height: 1.4; }
html { min-height: 100%; }
body { display: block; min-height: 100vh; background: linear-gradient(180deg, rgba(0,0,0, .65), rgba(0,0,0, .5), rgba(0,0,0,0), rgba(0,0,0,0)), url('/wp-content/uploads/2024/03/shutterstock_2089543435-scaled-e1711099649946.jpg'); background-size: cover; background-position: center; }
.reveal_bottom { position: relative; transform: translateY(-50px); opacity: 0; transition: 1s all ease; }
.reveal_bottom.active { transform: translateY(0); opacity: 1; }
.reveal_description { padding: 0; max-height: 0; background: transparent; overflow: hidden; position: relative; transform: translateY(-50px); opacity: 0; z-index: -99; }
.reveal_description.active { padding: 15px; max-height: 800px; transform: translateY(0); opacity: 1; z-index: 999; }
.reveal_description:hover.active { border: none !important; }
.reveal_right { position: relative; transform: translateX(-55%); opacity: 0; transition: 1s all ease; }
.reveal_right.active { transform: translateX(0); opacity: 1; }
.reveal_left { position: relative; transform: translateX(150px); opacity: 0; transition: 1s all ease; }
.reveal_left.active { transform: translateX(0); opacity: 1; }
.background { position: absolute; z-index: -1; width: 100%; height: 100%; }
.product-overlay { position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; }
.background-img { width: 100%; height: 100%; object-fit: cover; }
.otgs-development-site-front-end { display: none; }
.wpml-ls-legacy-dropdown-click { width: unset; }
.wpml-ls-legacy-dropdown-click a { border: none; background-color: transparent; color: transparent; padding-left: 0 !important; }
.wpml-ls-legacy-dropdown-click a:hover { color: white !important; }
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after { display: none; }
.wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover>a, .wpml-ls-legacy-dropdown-click a:focus, .wpml-ls-legacy-dropdown-click a:hover { background: transparent; }
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle { padding-right: 0; }
.banner-letters > h1 { position: relative; }
.banner-letters > h1 > span { position: absolute; font-size: 14px; bottom: -10px; right: 0; font-weight: 100; }
.button-back { position: absolute; margin-block: auto; left: 4%; top: 4%; }
.reveal_contact { position: relative; transform: translateX(150px); opacity: 0; transition: 1s all ease; }
.reveal_contact.active { transform: translateX(0); opacity: 1; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/**************************** HEADER / NAVIGATION *************************/
/**************************************************************************/
.header { position: relative; } 
.reveal_cylinderTubes_right, .reveal_chromePlated_right, .reveal_components_right { position: absolute; z-index: -99; transform: translateX(-200px); opacity: 0; transition: 1s all ease; }
.reveal_cylinderTubes-products_right, .reveal_chromePlatedTubes_right, .reveal_chromePlatedBars_right, .reveal_components-products_right { position: absolute; z-index: -99; transform: translateX(-200px); opacity: 0; transition: 1s all ease; }
.reveal_cylinderTubes-products_right.active, .reveal_chromePlatedTubes_right.active, .reveal_chromePlatedBars_right.active, .reveal_components-products_right.active { z-index: 99; transform: translateX(0); opacity: 1;  }
.reveal_cylinderTubes_right.active, .reveal_chromePlated_right.active, .reveal_components_right.active  { z-index: 99; transform: translateX(0); opacity: 1; }
.products-subCategories > div { margin-block: auto; }
.products-subCategories > div > h1 { padding: 60px; margin-block: 18px; width: fit-content; }
.products-overview > div > h1  { padding: 60px; margin-block: 18px; width: fit-content; }
.products-categories  > h1:hover { color: #add8ff; cursor: pointer; }
.chromePlatesProducts-category > h1:hover { cursor: pointer; color: #add8ff; }
/*------------------------------------------------------------------------*/

/**************************************************************************/
/********************************** Header ********************************/
/**************************************************************************/
.content-page > img { object-position: top; }
.langSwitch { position: absolute; top: 40%; right: 2%; z-index: 9999; } 
.content > img { min-width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner { position: relative; display: block; background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); background-size: cover;  margin-left: auto; z-index: 999; height: 100px; width: fit-content;  padding-left: 2%; padding-right: 5%; padding-bottom: 10px; padding-top: 20px; /*border-bottom-left-radius: 120px;*/ transform: translate(-30px, 30px); border-radius: 15px; }
.banner-letters { display: flex; justify-content: space-between; font-size: 70px; min-width: 600px;  white-space: nowrap; }
.banner-letters > h1 { font-weight: bold; }
.banner-letters > div > h1 { color: black; font-weight: bold; }
.banner-letters > div > h1 > span { font-size: 0px; transition: all .8s ease-out; }
.banner-letters > div > h1 > span.active { font-size: 26px; transition: all .8s ease-out;  }
.logo { display: block; min-width: 72px; max-height: 72px; padding-right: 10px; transform: translateY(6px); position: absolute; }
.logo > img { width: 80px;  }

.banner-text > div > h1 { font-weight: bold; font-size: 24px; margin-top: 38px; background-clip: text; background-image: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg');	color: transparent; } 
.disc-container { display: flex; justify-content: space-between; width: 100%; height: 100%; }
.D > h1 { margin-left: 110px; }
.banner-text > div > P:last-child { margin-top: 30px; }
.D-content, .I-content, .S-content, .C-content { font-size: 26px; position: absolute; left: 40px; padding-right: 11%; transform: translateY(-60px); opacity: 0; min-height: fit-content; /*text-shadow: 1px 1px 2px black;*/ }
.D-content.active, .I-content.active, .S-content.active, .C-content.active { transition: all .8s ease-out; transform: translateY(0); opacity: 1; }

.wpml-ls-legacy-list-vertical a { padding: 6px 16px; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/************************************ CTA *********************************/
/**************************************************************************/
.button-logo { width: 120px; position: absolute; top: 9px; left: 9px; opacity: 0.2; }
.button-logo-back { width: 100px; }
.cta { position: sticky; margin-left: 2%; top: 10%; z-index: 9; }
:root{
    font-family: monospace;
    font-size: 100%;
}
.wrap{ 
    bottom: 70px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-block: 30px;
}

.button{ 
    position: relative;
    flex-basis: auto;
    cursor:pointer;
    width: 140px;
    height: 140px;  
    border: 3px solid rgb(82, 82, 82);  
    border: 2px solid #add8ff;  
    border-radius: 8rem;
    /* background: linear-gradient(358deg, #999 5%, #fff 10%, #ddd 30%, #eee 50%, #ddd 70%, #fff 80%, #999 95%); */
    background: linear-gradient(rgb(0 0 0 / 32%), rgb(0 0 0 / 0%)), url('/wp-content/uploads/2024/03/side-button-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    
}
.button-back {
    width: 120px;
    height: 120px;

}

.button:hover { border: 2px solid #0155c4; }

.button::before{
    content: '';
    z-index: -1;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    box-shadow: 
    0.2rem 0.4rem 2rem 
    rgb(82, 82, 82), 
    -0.8rem -0.8rem -1.5rem
    rgba(10, 10, 10, 0.25);
}

.text{ 
	position: relative;
	z-index: +1;
    font-size: 18px;
    font-weight: bold;
     color: black;
     text-shadow: 1px 1px 2px #c2c2c4;
     text-transform: none;
}

.pushButton{
    border: 3px solid #add8ff;
}
.pushText{
    color: #add8ff;
} 

/*------------------------------------------------------------------------*/


/**************************************************************************/
/********************************* SERVICES *******************************/
/**************************************************************************/

.services-content { position: absolute; left: 0; width: 100%; display: flex; justify-content: center; height: 400px; box-shadow: rgb(0 0 0) 0px 15px 20px -20px; }
.selection-intro { text-align: center; }
.selection-intro > div > h1 { width: fit-content; font-size: 20px; margin-inline: auto; font-weight: bold; color: white; background: black; padding-inline: 20px; padding-block: 10px; box-shadow: rgb(0 0 0) 0px 15px 20px -20px; border-radius: 50px; }
.selection-intro > h2 { color: #004dc6; font-weight: bold; font-size: 30px; margin-top: 60px; text-shadow: 1px 1px 2px #00000030; }
.selection-intro > p { margin-top: 0; font-size: 20px; text-shadow: 1px 1px 2px #00000030; }
.services-text { background: black; color: white; width: 50%; position: relative; z-index: 99; font-size: 18px; /*border-top-left-radius: 400px;*/ /*border-bottom-left-radius: 400px;*/}
.services-text > div > p { margin-block: auto; }
.services-selection { font-size: 20px; text-transform: uppercase; font-weight: bold; margin-block: auto; display: flex; justify-content: center; gap: 30px; width: 100%; text-shadow: 1px 1px 2px #00000030; }
.services-selection > div { margin-top: 60px; /*background: #004dc6;*/ color: black; padding-inline: 20px; padding-block: 10px; transition: all .25s ease-in; /*border-radius: 500px;*/ }
.services-selection > div.active { color: white; background: black; transition: all .25s ease-in; box-shadow: rgb(0 0 0) 0px 15px 20px -20px; }
.services-selection > div:hover { cursor: pointer; }
.services-image { position: relative; background: black; overflow-x: hidden; width: 50%; /*border-top-right-radius: 400px; border-bottom-right-radius: 400px;*/ }
.services-image > div { position: absolute; left: 0; top: 0; display: flex; width: 100%; height: 100%; opacity: 0; transform: translateX(800px); transition: all .5s ease-in; z-index: -9; }
.services-image > div.active { opacity: 1; transform: translateX(0); transition: opacity .5s ease-out; z-index: 8; transition-delay: .5s; }
.services-image > div > img { width: 100%; object-fit: cover; object-position: center; }
.importer-text, .producer-text, .logistics-text { position: absolute; left: 24.5%; top: 0; display: flex; flex-direction: column; height: 100%; opacity: 0; transform: translateX(-800px); z-index: -9; }
.importer-text.active, .producer-text.active, .logistics-text.active { opacity: 1; transform: translateX(0); transition: all .5s ease-out; z-index: 9; } 
hr { width: 50%; margin-bottom: 20px; border: none; height: 2px; background: #004dc6; }
.services-overlay { background: linear-gradient(90deg, rgba(0,0,0), rgba(0,0,0,0), rgba(0,0,0,0)); }

/*------------------------------------------------------------------------*/

/**************************************************************************/
/********************************* PRODUCTS *******************************/
/**************************************************************************/
.title-container { position: relative; display: inline-block; text-align: center; }
.products-container { width: 100%; margin-inline: 4%; padding-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; margin-block: auto; gap: 5%; text-align: center; }
.product-block { width: 20%; min-width: 235px; height: auto; background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); position: relative; border: 2px solid #add8ff; overflow: hidden; padding-bottom: 30px; border-radius: 15px; }
.product-block:hover { cursor: pointer; border: 2px solid #0155c4; color: black; }
.product-block > h1 { margin-block: auto; font-weight: bold; font-size: 18px; }
.product-block > img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.products { text-align: center; }
.products > div > h1 { width: fit-content; font-size: 20px; font-weight: bold; color: white; background: black; padding-inline: 20px; padding-block: 10px; box-shadow: rgb(0 0 0) 0px 15px 20px -20px; border-radius: 50px; }
.products > h2 { color: #004dc6; font-weight: bold; font-size: 30px; margin-top: 60px; text-shadow: 1px 1px 2px #00000030; }
.products > p { margin-top: 0; font-size: 20px; text-shadow: 1px 1px 2px #00000030; }
.product-overlay { background: linear-gradient(90deg, rgb(0 77 198), rgb(0 77 198 / 50%), rgba(0,0,0,0.5)); opacity: 0; transform: translateX(-300px); transition: all ease-in .5s; }
.product-overlay.active { opacity: 1; transform: translateX(0); transition: all ease-out .5s; z-index: 9; }
.overlay-text { margin-block: auto; color: white; display: flex; justify-content: center; flex-direction: column; height: 100%; }
.overlay-text > h1 { font-weight: bold; font-size: 26px; margin-bottom: 30px; }

.custom-products { display: flex; justify-content: space-between; margin-block: 120px; }
.custom-text { width: 40%; text-align: left; margin-block: auto; font-size: 20px; text-shadow: 1px 1px 2px #00000030; }
.custom-text > p { margin: 0; }
.custom-form { width: 40%; }

div.wpforms-container-full { margin: 0 !important; }
.wpforms-container .wpforms-field { padding: 0 !important; margin-block: 15px; }
.wpforms-container .wpforms-field > input, .wpforms-container .wpforms-field > textarea { box-shadow: rgb(0 0 0) 0px 15px 20px -20px !important; }
#wpforms-submit-257 { box-shadow: rgb(0 0 0) 0px 15px 20px -18px; width: 100%; background: #004dc6; }
#wpforms-submit-257:hover { background: black; }
#wpforms-submit-257:focus:after { border: none !important; }
.products-wrap { position: relative; }
.products-bg { position: absolute; top: 0; background: white; height: 200px; width: 100%; }

/*------------------------------------------------------------------------*/


/**************************************************************************/
/*********************************** FOOTER *******************************/
/**************************************************************************/
/* .footer { height: 20vh; background: white; display: flex; justify-content: center; padding-top: 180px; } */
/*------------------------------------------------------------------------*/



/**************************************************************************/
/********************************** IMPRESSUM******************************/
/**************************************************************************/
.small-header-items { background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); padding: 10px; width: fit-content; position: absolute; bottom: 0; right: 0; font-size: 14px; }
.impressum { margin-inline: 2%; text-align: center; margin-top: 150px; padding-bottom: 100px; }
.offices { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.office { width: 45%; }
.impressum-content { background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); width: fit-content; padding: 30px; margin-inline: auto; }
.impressum-title { background: url('/wp-content/uploads/2024/03/shutterstock_1571126896-scaled.jpg'); width: fit-content; padding: 30px; }