.bgdarkblue {
    background:#023e48;
}
.ptitle {
    color: #023e48;
    font-weight: 900;
}
.navText {
background-image: url(img/wall-4-light.png) !important;
background-repeat:repeat;
/*padding: 100px;*/
box-shadow: 5px 1px 4px 8px #a64511;
}
.navText2 {
background-image: url(/img/wall-4-light.png) !important;
background-repeat:repeat;
/*padding: 100px;*/
box-shadow: 5px 1px 4px 8px #a64511;
}

.textureOne{
    background-image: url(img/asfalt-dark.png);
    background-repeat:repeat;
    padding: 100px;
    background-color:#fff;
    color:#0e3308;
    padding-top: 50px;
}

.textureTwo{
    /*border-top: thick double #fff;*/
    background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png");
    background-repeat:repeat;
    padding: 50px;
    /*background-color: #023e48;*/
    padding-top: 50px;
}

.textureOne > h2,h4 {
    color:#eee;
    font-weight: 700;
}
.textureOne > h4, h1 {
    color:#fff;
}
.textureOne > h1, .textureTwo > h1 {
     font-weight: 900;
     /*border-bottom: 1px solid;*/
}
.textureTwo > h1{
    color:#eee;
}



    .responsive-img{
          width: 12%;
  max-width: 400px;
  height: auto;
  margin-left: -618px;
    
    margin-top: -26px;
}
    
    .iframmobil {
        width:600px;
        height:450px;
    }
    .mobilec{
        display:none;
    }
    @media only screen and (max-width: 768px) {
         .mobilec{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 70px;
            justify-content: center;
    }
    .iframmobil {
        width:300px;
        
    }
    .textureTwo{
        padding:10px;
    }
    .responsive-img{
            margin-left: 86px;
    margin-top: -16px;
        width: 26%;
    }
    
    
   .title{
    font-size: 6.3vw !important;        
        }
        
    }
    .active {
        background: #ffa948 !important;
        color:#fff !important;
    }
  
  
  
  
  
  
.load {
  position: absolute;
  width: 50vw;
  height: 156px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}



/* Paint */

.paint {
  position: absolute;
  height: 155px;
  width: calc(100% - 349px);
  overflow: hidden;
  animation: animate-paint 10s ease-in-out infinite alternate;
}

.stroke, .stroke:before, .stroke:after {
  position: absolute;
  height: 20px;
  width: calc(100% + 5px);
  border-radius: 5px;
  background-color: var(--paint-color);
  z-index: 1;
}

.stroke {
  top: 17px;
  box-shadow: 10px 20px var(--paint-color);
}

.stroke:before {
  content: '';
  top: 40px;
  left: 5px;
  box-shadow: 5px 20px var(--paint-color);
}

.stroke:after {
  content: '';
  top: 80px;
  left: 5px;
  box-shadow: -5px 20px var(--paint-color);
}




/* Roller */

.roller {
  position: absolute;
  width: 361px;
  height: 161px;
  animation: animate-roller 10s ease-in-out infinite alternate;
  z-index: 3;
}

.roller-top {
  position: absolute;
  height: 60px;
  width: 60px;
  border-left: 5px solid #666666;
  border-bottom: 5px solid #666666;
  border-right: 5px solid #666666;
  top: 96px;
  left: 31px;
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%;
}

.roller-top:before {
  position: absolute;
  content: '';
  background-color: #666666;
  width: 25px;
  height: 153px;
  border-radius: 5px;
  left: -14px;
  top: -96px;
}

.roller-top:after {
  content: '';
  position: absolute;
  height: 135px;
  width: 60px;
  background-color: #fcf4e9;
  border-radius: 10%;
  top: -92px;
  left: -36px;
  border: 5px solid #f1e7da;
}

.roller-handle {
  position: absolute;
  width: 100px;
  height: 40px;
  border-top: 5px solid #666666;
  border-left: 5px solid #666666;
  border-top-left-radius: 30px;
  top: 70px;
  left: 96px;
}

.roller-handle:before {
  position: absolute;
  content: '';
  width: 200px;
  height: 40px;
  background-color: #999999;
  border: 5px solid #666666;
  left: 50px;
  top: -27px;
  border-radius: 10%;
}

.roller-handle:after {
  position: absolute;
  content: '';
  width: 180px;
  height: 40px;
  background-color: sandybrown;
  border: 5px solid #a6593b;
  left: 60px;
  top: -27px;
  border-radius: 5%;
}



/* Animations */

@keyframes animate-paint {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes animate-roller {
  0% { left: 0px; }
  100% { left: 100%; }
}

.modal-overlay{
    opacity: 1 !important;
    background: #ffa948 !important;
}




/* slode styles*/


.containersld {
  display: flex;
  justify-content: center;
  align-items: center;
  
  overflow: hidden;
  transform: skew(5deg);
}
.containersld .card {
  flex: 1;
  transition: all 2.5s ease-in-out;
  height: 60vmin;
  position: relative;
}
.containersld .card .card__head {
  color: black;
  background: rgba(255, 30, 173, 0.75);
  padding: 0.5em;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  transition: all 0.5s ease-in-out;
  min-width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}
.containersld .card:hover {
  flex-grow: 10;
}
.containersld .card:hover img {
  filter: grayscale(0);
}
.containersld .card:hover .card__head {
  text-align: center;
  top: calc(100% - 2em);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  transform: rotate(0deg) skew(-5deg);
}
.containersld .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 2.5s ease-in-out;
  filter: grayscale(100%);
}
.containersld .card:not(:nth-child(5)) {
  margin-right: 1em;
}

.qscontainer {
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    transition: all ease 0.6s;
    border-left: 10px solid #fff;
}

.qscontainer:hover {
    background:#4caf50c9 !important;    
}
.qsactive {
    background:#4caf50 !important;
}


iframe {
     
    border-left: 3px solid #ffa949 !important;
    border-top: 3px solid #a64511 !important;
    border-right: 3px solid #ffa949 !important;
    border-bottom: 3px solid #a64511 !important;
}