:root {
    --c-dark-1: #191919;
    --c-dark-2: #1B1B1B;
    --c-dark-3: #1E1E1E;
    --c-dark-4: #212121;
    --c-dark-5: #242424;
    --c-light-1: #696969;
    --c-light-2: #5A5A5A;
    --c-light-3: #4A4A4A;
    --c-light-4: #383838;
    --c-lblue: #a1c7ff;
    --c-dblue: #0066ff;
    --c-azure: #00c292;
    --c-text: #ffffff;
}

html {
    
}

body {
    margin: 0px;
    color: var(--c-text);
    background-color: var(--c-dark-5);
}

.body::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
::-webkit-scrollbar
{
  width: 14px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

/*.menu {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    background-color: #999;
    padding: 10px;
}*/

.navbar {
    z-index: 99;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bolder;
}

.navbar-brand img {
    /*position: relative;*/
    width: 151px;
    height: 74px !important;
    /*top: 0px;*/
    margin-top: -1rem;
    margin-bottom: -1rem;
}

.nav-link {
    color: #d6d7d9;
}
.nav-link:focus {
    color: #fff;
}
.nav-item span {
    margin-left: 5px;
}
/*.nav-item span.nav-link-submenu.active {
    background-color: transparent !important;
}*/

.nav-link-submenu {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.0625em;
    padding: 0.5rem 0.5rem;
    display: block;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#mainNav.navbar-shrink {
    background-color: var(--c-dark-1);
}

#mainNav .navbar-nav .nav-item .nav-link, .nav-link-submenu {
    border-radius: 10px;
    padding-left: 10px;
    color: var(--c-lblue);
}
#mainNav .navbar-nav .nav-item .nav-link:hover, .nav-link-submenu:hover, .nav-link:hover {
    /*color: #75787A;
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border-radius: 10%;*/
    color: var(--c-dblue);
    /*background-color: #191C1F;*/
}

.navbar-shrink .nav-item .nav-link:hover, .navbar-shrink .nav-item .nav-link-submenu:hover {
    /*background-color: #474B4E !important;*/
}

#mainNav .navbar-nav .nav-item .nav-link.active, 
.nav-link-submenu.active, 
.nav-link.active, 
.nav-pills .nav-link.active {
    color: var(--c-dblue);
    /*background-color: #474B4E;*/
}

.nav-submenu {
    background-color: var(--c-dark-1);
}
.nav-submenu a {
    /*white-space: normal; for mobile and small devices */
    
    font-weight: bolder;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.95rem;
    color: var(--c-lblue);
    letter-spacing: 0.0625em;
    display: block;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-submenu a:active, .nav-submenu a:hover {
    background-color: var(--c-dark-5);/*#35393c;*/
    color: var(--c-dblue);
}

.dropdown-item.active {
    /*background-color: #474B4E;*/
    background-color: var(--c-dark-5);/*#35393c;*/
    color: var(--c-dblue);
}

.about {
    padding: 0px;
    margin-bottom: 0px;
}

.page-section.about {
    padding-bottom: 0px;
}

.about .container {
    padding-bottom: 4rem;
    /*background-color: var(--c-dark-5);*/ /*#191C1F;*/
}

.about .container {
    height: 70vh; /*100vh;*/
}

.about .container .cards {
    top: 25%;
}

.about .container .cards .card-center,
.about .container .cards .card-left,
.about .container .cards .card-right {
    opacity: 0;
    animation-duration: 0.5s;
    animation-delay: 2.4s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.about .container .cards .card-center {
    animation-name: fade-right;
    max-width: 800px;
    position: absolute;
    top: 80px;
    right: 0px;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: var(--c-light-4);
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
    z-index: 5;
    transition: 1s;
}
.about .container .cards .card-left {
    animation-name: fade-left;

    width: 300px;
    left: 30px;
    /*color: #d6d7d9;*/
    background-color: var(--c-light-4); /*#35393c;*/
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
    z-index: 5;
    transition: 1s;
}
.about .container .cards .card-right {
    animation-name: fade-right;

    width: 600px;
    position: absolute;
    top: 80px;
    right: 30px;
    padding: 20px;
    /*color: #d6d7d9;*/
    background-color: var(--c-light-4); /*#35393c;*/
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
    z-index: 5;
    transition: 1s;
}

.footer {
    background-color: var(--c-dark-1); /*#191C1F;*/
    color: #fff;
}

.ad {
    background-color: var(--c-dark-1); /*#191C1F;*/
    color: #fff;
    text-align: center;
}

.map-container {
    padding: 0px;
    margin-bottom: -6px;
}

.map {
    width: 100%;
    height: 400px;
    border: none;
    border-top: 2px solid #191C1F;
    border-bottom: 1px solid #191C1F;
    
    /*filter: invert(90%);*/
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.right {
    margin-right: auto;
}

.text-justify {
    text-align: justify;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.advantage {
    position: relative;
}

.advantage-offset {
    color: #585b5e;
    position: absolute;
    right: 0px;
    margin-top: -20px;
}

.page-section {
    /*background-color: var(--c-dark-5);*/ /*#212529;*/
    padding-bottom: 20rem;
}

.bg-darker {
    background-color: var(--c-dark-3);
}

.bg-light {
    background-color: var(--c-light-4);
}

.section-heading {
    color: #d6d7d9;
}

.img-logo-single {
    margin-bottom: 10px;
}

.reveal {
    position: relative;
    opacity: 0;

    animation-duration: 0.5s;
    /*animation-delay: 0.5s;*/
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    transform: perspective(500px) translateZ(-100px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

.cards {
    height: 500px;
    position: relative;
    padding: 50px 0px;
    /*text-align: justify;*/
    word-break: break-word;
}
.card-left {
    width: 700px;
    position: absolute;
    top: 80px;
    padding: 20px;
    color: #d6d7d9;
    background-color: var(--c-light-4); /*#35393c;*/
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    z-index: 5;
    transition: 1s;
}
.active.card-left {
    animation-name: fade-left;
}

.card-right {
    width: 800px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    /*transition: 1s;*/
}
.active.card-right {
    animation-name: fade-right;
}
.card-right img {
    width: 100%;
}
/*.card-right:hover + .card-left {
    opacity: 0;
}*/

.tab-content {
    background-color: var(--c-dark-4);
    padding: 60px 40px;
    width: 80%;
    min-height: 100vh;
}

.tab-content-services, .tab-content-rental {
    min-height: 300px;/*1400px;*/ /*900px;*/
}
/*.tab-content-rental {
    min-height: 1000px;
}*/
.tab-pane .card-left {
    text-align: left;
}
.tab-pane .smaller-card {
    width: 450px;
}
.tab-pane .card-fullsize {
    width: 100%;
}
.tab-pane .earthwork {
    width: 400px;
    top: 80px;
}
.tab-pane .earthwork img {
    width: auto;
}

.tab-content-rental .price-info-right {
    left: auto;
    right: 0px;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.tab-content-rental .price-info-right li {
    padding-left: 1em;
    text-indent: -1em;
}
.tab-content-rental .price-info-right li:before {
  content: "-";
  padding-right: 5px;
}

#pills-constructions {
    height: 650px;
}
#pills-design {
    height: 450px;
}
#pills-budgeting {
    height: 700px;
}
#pills-supervision {
    height: 600px;
}
#pills-earthwork {
    height: 1400px;
}
#pills-materials {
    height: 400px;
}

#pills-containers {
    height: 400px;
}
#pills-mechanization {
    height: 600px;
}
#pills-trailers {
    height: 500px;
}
#pills-scaffolding {
    height: 700px;
}

#pills-earthwork .card-left-mobile {
    display: none;
}

#pills-containers .card-right {
    top: 300px;
}
#pills-mechanization .card-right, #pills-scaffolding .card-right {
    width: 600px;
    /*transition: 0.5s ease-in-out;*/
}
/*#pills-mechanization .card-right:hover {
    z-index: 10;
}*/
.nav-pills {
    justify-content: center;
    padding-left: auto;
    position: sticky;
    top: 75px;
}
.nav-pills .nav-item {
    flex-basis: 30%;
    padding-bottom: 10px;
}
.nav-pills .nav-link {
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    padding-top: 15px;
    padding-bottom: 15px;
    color: var(--c-lblue);
    text-align: left;
    text-transform: uppercase;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
}
.nav-pills .nav-link:hover {
    color: var(--c-dblue);
    background-color: var(--c-dark-4);
}
#pills-tab-rental.nav-pills .nav-item {
    flex-basis: 35%;
}
.nav-pills .nav-item .nav-link {
    vertical-align: middle;
    text-align: left;
    border: 2px solid #474B4E;
    border-radius: 10px;
    width: 90%;
}
.nav-pills .nav-item .nav-link .svg-inline--fa {
    font-size: 2.5em;
    margin-right: 20px;
}
.nav-pills .nav-item .nav-link .nav-name {
    display: inline-block;
    vertical-align: top;
}
.nav-pills .nav-item .nav-link .nav-more {
    display: block;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.nav-pills .nav-item .nav-link .nav-more .svg-inline--fa {
    font-size: 1em;
    margin-right: 5px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--c-dark-4);
}

.price-info-separated {
    position: relative;
    /*padding: 10px 0px;*/
}

.price-info-left, .price-info-right {
    width: 49%;
    margin-bottom: 5px;
    vertical-align: top;
    display: inline-block;
}

.price-info-right {
    /*position: absolute;*/
    top: 0px; /*10px;*/
    left: 250px;
    display: inline-block;
}

/*gallery*/
.card-right .picture {
    height: 200px;
    margin: 10px;
    /*border: 1px solid #ffc800;*/
    border-bottom: 25px solid #191C1F;/*#ffc800;*/
    transition: 0.5s;
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0);
}

.contact {
    width: 100%;
    height: 700px;
    position: relative;
}
.contact-card {
    width: 500px;
    min-height: 500px;
    position: absolute;
    top: 80px;
    left: 0px;
    right: 550px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 20px;
    color: #d6d7d9;
    background-color: var(--c-light-4);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    z-index: 5;
}
.active.contact-card {
    animation-name: fade-in;
}

.contact-input {
    stroke: none;
    border-left-width: 0;
    border-left-style: none;
    border-right-width: 0;
    border-right-style: none;
    border-top-width: 0;
    border-top-style: none;
    border-color: #d6d7d9;
    border-width: 2px;
    border-radius: 0;
    
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    background-image: none;
    background-clip: padding-box;
    background-color: transparent;
    height: auto;
    color: #d6d7d9;
    
    outline: none;
}
.contact-input[type="submit"] {
    background-color: #191C1F;
    border-style: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-image: none;
    width: 100%;
    font-size: 1.125rem;
    border-radius: 50px;
    margin-top: 40px;
}
.contact-input[type="number"]::-webkit-outer-spin-button,
.contact-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}

.contact-textarea {
    resize: none;
    height: 220px;
}

.contact-card-form {
    margin-top: 30px;
}

.contact-info {
    width: 500px;
    min-height: 500px;
    position: absolute;
    top: 80px;
    left: 550px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 20px 40px 20px;
    color: #d6d7d9;
    /*background-color: #212529;*/
    background-color: var(--c-light-4);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    z-index: 5;
}
.active.contact-info {
    animation-name: fade-in;
    animation-delay: 0.3s;
}
.contact-info p, .contact-card p {
    line-height: 10px;
}
.contact-info h6 {
    color: #c4c5c7;
}

.contact-info-item {
    margin-bottom: 40px;
}

.contact-info-separated {
    position: relative;
    /*padding: 10px 0px;*/
}

.contact-info-left {
    display: inline-block;
}

.contact-info-right {
    display: inline-block;
    /*position: absolute;*/
    top: 0px; /*10px;*/
    left: 100px;
    margin-left: 25px;
}

a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
a:hover{
    color: #bebfc1;
}

.text-muted {
    color: #cecfd1 !important;
    font-size: 15px;
}

h1, h2, h3, h4 {
    color: var(--c-lblue);
}

b {
    color: var(--c-azure);
}

u {
    text-decoration: none;
    font-weight: bold;
    color: var(--c-lblue);
}

.pdf-view {
    width: 100%;
    height: 100vh;
}

/*.timeline > li.active {
    animation-name: fade-in;
}*/
.timeline > li .timeline-image {
    border: 7px solid var(--c-light-3);
    background-color: var(--c-light-4);
    z-index: 1;
}
.timeline > li .timeline-image .img-fluid {
    cursor: default;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.timeline:before {
    background-color: var(--c-light-3);
    width: 3px;
}

.timeline > li:last-child:after {
    clear: none;
}

.timeline > li .timeline-panel,
.timeline > li.timeline-inverted > .timeline-panel {
    text-align: left;
    word-wrap: break-word;
    hyphens: auto;
}
.timeline > li .timeline-panel.active,
.timeline > li.timeline-inverted > .timeline-panel.active {
    animation-name: fade-in;
}

.timeline > li .timeline-panel {
    background-color: var(--c-light-3);
    padding: 20px 60px 20px 40px;
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
}

.timeline > li.timeline-inverted > .timeline-panel {
    padding: 20px 40px 20px 60px;
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
}

.timeline > li .timeline-panel .triangle {

}
.timeline > li .timeline-panel .triangle-left {
    position: absolute;
    left: -100px;
}
.timeline > li .timeline-panel .triangle-right {
    position: absolute;
    right: -100px;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid var(--c-light-3);
    margin:20px auto;
}
.triangle-left {
    border-left:none;
    border-right: 100px solid var(--c-light-3);
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}
.triangle-right {
    border-right:none;
    border-left: 100px solid var(--c-light-3);
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

.block {
    background-color: var(--c-light-3);
}
.block-light {
    background-color: var(--c-light-4);
}
.shadow {
    box-shadow: 0px 10px 2px rgb(0 0 0 / 10%) !important;
}

.collapse-buttons {
    background-color: var(--c-dark-5);
    /*margin-bottom: 0px;*/
}
.collapse-buttons a {
    padding: 5px 25px;
    background-color: var(--c-dark-5);
    color: var(--c-text);
}
.collapse-buttons a:hover {
    background-color: var(--c-dark-4);
}
.collapse .card, .collapsing .card {
    background-color: var(--c-dark-5);
    margin-bottom: 25px;
    border: 0px;
}

/* Optimization for lower resolution devices */
@media screen and (max-width: 1920px) {
    .about {
        padding-bottom: 20rem !important;
    }
}