/*
Theme Name: Dejong
Theme URI: https://www.marketingoveproadenstvo.sk/
Author: MP
Author URI: https://www.marketingoveproadenstvo.sk/
Description: Taylor-made Theme for DeJong company.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: dejong
*/

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "./css/back-to-top.css";

/* Variables */
:root {
  /* my colors */
  --black: #121212;
  --red: #eb697b;
  --lightgray: #f5f5f5;
  --darkred: #E6223D;
  /*other variables*/
  --padding-top-webpage: 30px;
}

.black {
  background-color: black;
}

/* CSS RESET */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6, 
.navbar {
  overflow-wrap: break-word;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 300;
  padding: 10px 0;
}

/* p {
  font-size: 1.1em;
} */
/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

.label {
  color: #86a85b;
  font-size: 16px;
  font-weight: regular;
}

main > article {
  /* Here is the main margin of a website updated */
  margin: 0 var(--main-margin);
  /* Global article padding! Change if needed */
  margin-top: var(--article-gap);
}

main > footer {
  /* Here is the main margin of a website updated */
  padding: 0 var(--main-margin);
}

/* Auxillary classes */
.resize-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.txt-green {
  color: var(--clr-green);
}

.txt-gray2 {
  color: var(--clr-txt-gray2);
}

.txt-gray3 {
  color: var(--clr-txt-gray3);
}

.txt-blue {
  color: var(--clr-blue);
}

.m-main {
  margin: 0 var(--main-margin);
  margin-top: var(--article-gap);
}

.mt-main {
  margin-top: var(--article-gap);
}

.no-margin {
  margin-inline: 0 !important;
}

.red-button {
  padding: 10px !important;
  margin-top: 10px !important;
  border-top-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  max-width: 200px;
}

.red-arrow {
  color: white !important;
  font-size: 20px !important;
  border: 5px solid var(--red) !important;
  border-top-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  pointer-events: none;
}

.red-arrow-div {
  text-align: center;
  z-index: 3;
  margin-top:-28px;
  position: relative;
}

row {
  padding-left: 0;
  padding-right: 0;
}

.btn:has(i):focus-visible, .btn:has(i):hover, .btn:has(i):focus, .btn:has(i):active {
    box-shadow: none !important;
    color: var(--darkred);
}

.nezobrazovat {
  display: none;
}

/* ######################## */


/* Start of content CSS */
.btn-danger {
  background-color: var(--darkred);
}

.carousel {
  position: relative;
}

.hp_carousel_1 {
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 70vh !important;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 20px;
  padding-top: var(--padding-top-webpage);
}

.nav-link {
  color: white !important;
}

/* Hover animation */
.nav-link:hover {
  font-weight: bold;
  color: white;
}

.nav-link:active {
  font-weight: bold;
}

/* Top section */
.top-section {
  position: relative;
 /* isolation: isolate; */
}

/* Topbar */
.top-section > .top-bar {
  position: absolute;
  top: var(--padding-top-webpage);
  left: 0;
  width: 100%;
  padding: 0 3rem;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: start;
  color: white;
}

/* Navbar css */
.top-bar > nav {
  background-color: transparent !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 1.5rem;
  flex: 1 1 70%;
}

/* Navbar logo */
.top-bar .navbar-brand > img {
  width: 250px;
}

/* Make navbar toggler white */
.navbar-toggler {
  border-color: white;
}

.navbar-toggler > span {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(94deg)
    brightness(104%) contrast(101%);
}

/* .top-section > .carousel {
  z-index: -1;
} */

/* Media queries for navbar */
/* bootstrap-md */
@media (max-width: 768px) {
  .nav-link:hover.nav-link::after {
    display: none;
  }
}

/* Carousel */
.carousel-caption {
  height: 100%;
  /* width: 100%; */
  justify-items: start;
  grid-template-rows: repeat(3, 1fr);
  margin: 0 2rem;
}

.carousel-main-content {
  padding-top: 10rem;
  text-align: left;
  grid-row: 2 / 3;
  align-self: center;
  margin-bottom: 5%;
}

.carousel-footer {
  grid-row: 3 / 4;
  text-align: left;
  align-self: flex-end;
  width: 100%;
  display: flex;
  justify-content: start;
  gap: 3rem;
  border-top: 1px solid white;
  padding-top: 2rem;
}

.carousel-footer > a {
  cursor: pointer;
  color: white;
}

.carousel-title {
  font-size: 3.5rem;
}

/* boostrap-sm */
@media (max-width: 576px) {
  /* turn off carousel on small resolutions */
  .top-section .carousel {
    display: none;
  }

  .top-section .header-image {
    display: none !important;
  }
}

/* COMMON */

.future h2, .respect h2, .about h2 {
  color: var(--darkred);
  padding-top: 50px;

}

/* FUTURE BLOCK */
.future, .career {
  background-color: var(--black);
  color: white;
  margin-top: -24px;
  --bs-gutter-x: 0;
}

.future-outer, .career {
  background-color: var(--black);
  color: white;
  padding: 50px 0 !important;  
}

.future-outer h2 {
  padding-bottom: 20px;
}

.future-inner_inner {
  display: flex;
  justify-content: space-between;  
}

.future-inner_inner a{
  color: white;
  padding: 0 20px;
}

.future-inner h4 {
  color: var(--darkred);
  font-weight: bold;
}

.future-images, .respect-images, .career-images, .community-images, .story-images {
  display: flex;
  justify-content: flex-end;  
  padding: 0;
}

.community-images-2 {
  padding: 0;
}

.community-images img, .community-images-2 img {
  width: 100%;
}

/* Mission block */
.mission {
  padding: 50px;
  text-align: center;
}

.mission-inner {
  padding: 0 50px;
}

.mission-inner i {
  font-size: 2rem;
}

.mission-inner i:hover {
  color: var(--darkred);
}

.mission-inner h4 {
  padding: 10px 0;
  font-weight: bold;
}

.mission-inner a {
  color: var(--black);
}

/* Respect block */
.respect {
  padding: 50px 0 !important;  
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(18,18,18,1) 65%, rgba(18,18,18,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(65%, rgba(255,255,255,1)), color-stop(65%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(18,18,18,1) 65%, rgba(18,18,18,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(18,18,18,1) 65%, rgba(18,18,18,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(18,18,18,1) 65%, rgba(18,18,18,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(18,18,18,1) 65%, rgba(18,18,18,1) 100%);
}

.viditelne {
  display: block;
  background-color: white;
  padding: 0 10px;
}

.skryte {
  display: none;
}

.respect-hlavny {
  background-color: white;
  padding: 0 5px;
}
*

/* career block */
.career {
  padding-top: 100px !important;
}
.career h2 {
  padding-bottom: 20px;
}

/* people block */
.video-container {
  display: flex; flex-wrap: wrap
}
.video-text {
  background-color: var(--lightgray);
  height: 12rem;
  overflow-y: hidden;
}

.video-text h4 {
  font-weight: bold;
}

/* community block */
.community {
  margin-top: 80px;
  background-color: var(--lightgray);
  padding: 150px 0;
}
.community-line {
  display:flex;  
}

.community-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.community-block-1, .community-block-2 {
  display: flex !important;
}

/* blog block */
.blog {
  background-color: var(--black);
}

.blog h2 {
  color: var(--darkred);
  text-align: center;
}

.blog-post-inner {
  display: flex;
  justify-content: center;
}

.blog-post img{
  width: 100%;
}

.blog-text {
  background-color: white;
  padding: 5px;
}

.blog-text h4 {
  font-weight: bold;
}

.blog-post a {
  text-decoration: none;
  color: black;
}

.blog-text:hover {
  background-color: var(--darkred);
  color: white;
}

.blog-post > .blog-text h4 {
  font-weight: bold;
}

.pagination {
  color: white;
  gap: 10px;
}

.pagination a {
  text-decoration: none;
  color: white;
}

.pagination a:hover {
  color: var(--darkred);
}

/* faq block */
.faq, .accordion-header {
  background-color: var(--lightgray);
}

.accordion-button {
  background-color: white;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: white;
}

.faq-header {
  color: var(--darkred);
}

.accordion-header {
  margin-top: 10px;
}

.form-control {
  border-radius: 0 !important;
  padding: 15px;
}

/* footer */
footer {
  background-color: black;
  color: white;
}

footer a {
  text-decoration: none;
  color: white;
}

footer h5 {
  color: var(--darkred);
  font-weight: bold;
}

.social img {
float: left;
margin: 5px;
}

.copyright {
  display: flex;
  align-items: center;
}

/* hero */
.hero .row{
  min-height: 500px;
  background-size: cover;
 
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #5245;
}


/* hero */
.hero-inner {
  /*display: flex;
  flex-wrap: wrap;*/
  align-content: center;
  height: 100%;
  align-items: center;
  color: white;
}

.hero-inner h1 {
  font-size: 3.5rem;
}
/* .hero-inner p {
  font-size: 1.5rem;
} */

/* about block */
.about {
  padding-bottom: 50px;
}

/* story block */
.story {
  background: black;
  color: white;
  padding: 50px 0 !important;  
}

.story-inner {
  display: flex;
  align-items: center;
}

/* about mission */
.about-mission, .about-vision, .about-values {
  padding: 50px 0;
  color: white;
}

.about-mission h2, .about-vision h2, .about-values h2, .competent h2, .improve h2 {
  font-size: 2rem;
  font-weight: normal;
  word-break: break-word !important;
}

/* improve block */
.red-stripe {
  background-color: var(--darkred);
  color: white;
} 

.black-stripe {
  background-color: white;
  color: var(--darkred);
}

.red-stripe-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}

.red-stripe h2, .red-stripe-inner h2 {
  font-weight: 400;
  overflow-wrap:break-word;
  hyphens: auto;
}

.odrazka {
  display: block;  
}

.odrazka p::before {
  content: '>  ';
  color: var(--darkred);
}

.improve-left {
  padding: 100px 50px;
}

/* about vision block */


/* about-values block */
.about-values {
  color: white;
  background: none;
}

.black-stripe h2 {
  font-weight: 400;
}

/* competent block */
.competent {
  background-color: var(--black);
  color: white;
}

/* boostrap-sm */
@media (max-width: 576px) {
  .container-fluid {
    padding-right: 5px;
  }

  .top-bar {
    width: auto !important;
  }

  .top-section > .top-bar {
    padding: 0 1rem;
  }

  .top-bar .navbar-toggler {
    padding: 2px 6px;
  }

  .mission {
    padding: 5px;
  }

  .respect {
    background: white !important;
  }

  .respect .row, .career .row {
    flex-direction: column-reverse !important;
  }

  /* make navbar without image on small resolutions */
  .top-bar {
    position: static !important;
    top: 0;
    padding-top: var(--padding-top-webpage) !important;
    padding-bottom: var(--padding-top-webpage) !important;
    background-color: black;
    min-height: 15vh !important;
    margin: 0;
  }
  .community-block-1 {
    flex-direction: column-reverse;
  }
}

@media (max-width: 780px) {
  .future-images {
    display: none;
  }
}

/* KONTAKT */
#kontakt{
  background-color: var(--lightgray);
}

.kontakt-mapa, footer {
  --bs-gutter-x: 0; 
}

#kontakt iframe {
  margin-top: 1rem !important;
}

.kontakt-body {
  margin-top: -6px;
  background-color: var(--lightgray );
}

/* BLOG */
#blog {
  background-color: black;
}

/* CLANKY / BLOG */
.blog-body h2 {
  color: var(--darkred);
  margin-top: 10rem !important;
}

.clanky {
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
}

.clanky .card {
  margin-right: 2rem;
  border-radius: 0;
  border: 0;
  margin-bottom: 2rem;
}

.clanky .card a:hover {
  background-color: var(--darkred);
  color: white;
}

.clanky .card a {
  text-decoration: none;
  color: var(--black);
}

/* KARIERA */
.positions {
  padding: 2rem 0 2rem 0;
  background-color: var(--black);
  color: white;
  text-align: center;
}

.positions h2, .career-opportunities h2 {
  color: var(--darkred);
}

.positions .card:hover, .positions .card:active {
  background-color: var(--darkred);
  color: var(--black);
}

.sipka::before {
  content: "\2713";
  padding-right: 10px;  
  color: var(--darkred);
}

.sipka {
  margin-bottom: 0 !important;
}

.career-opportunities {
    padding: 50px 0 !important;  
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(18,18,18,1) 85%, rgba(18,18,18,1) 85%,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(85%, rgba(0,0,0,1)), color-stop(85%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(18,18,18,1) 0%, rgba(18,18,18,1) 85%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(18,18,18,1) 0%, rgba(18,18,18,1) 85%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(18,18,18,1) 0%, rgba(18,18,18,1) 85%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(18,18,18,1) 0%, rgba(18,18,18,1) 85%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);  
    color: white;
}

.optimal-collaboration {
  background-color: white;
  color: var(--black);
}

.optimal-collaboration-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.position-icons {
  display: flex;
  justify-content: space-between;
}

.position-icons i {
  font-style: normal;
}

/* COMMUNITY */
.community-nadpis {
  color: var(--darkred);
}

.community-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.neutral-company-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.community-page {
  background-color: var(--lightgray);
}

.black-placeholder {
  background-color: var(--black);
}

.community-page-text {
  padding: 80px 0;
}

/* blog post */
#blogpost header {
  background-color: var(--black);
  height: 180px;
}

.article-info {
  display: flex;
  justify-content: space-between;
}

.article-info i {
  color: blue;
}

.article-body {
  border-top: 1px solid gray;
  padding: 3 0px 0;
}

.article-body h4 {
  font-weight: bold;
  color: var(--darkred);
}

.paginacia {
  border-top: 1px solid grey;
  margin: 20px 0;
}

.paginacia-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid gray;
  padding: 20px 20px;
  color: gray;
}

.paginacia-inner:nth-child(1) {
  text-align: end;
}

.paginacia .paginacia-inner:nth-child(2) {
  flex-direction: row-reverse;
}

.paginacia a {
  text-decoration: none;
  color: gray;
  font-size: 1.5rem;
}

/* Adjust Bootstrap Guttenbert */
.future {
  position: static !important; 
}

.community, .hero, .innovation_technologies, .community-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.community-images, .community-images-2 {
  height:50rem; 
}

/* ENG comming soon */
.lang_announcement {
  background-color: var(--darkred);
  color: white;
  font-size: 0.9rem;
}

.lang_annoncement_inner  {
  display: flex;
  justify-content: center;
}

.lang_annoncement_inner p {
  margin: 0 !important;
  font-weight: 500;
}

.lang_annoncement_inner a {
 color: white;
}

.lang_annoncement_inner a:hover {
  color: var(--black);
 }

 /* Widget translation workaround */
 body.en .widget-sk {
  display: none;
  }
  body.sk .widget-en {
  display: none;
  }