/* 
 Theme Name:     SteamPunk Fit Out
 Author:         SteamPunk Fit Out
 Author URI:     https://brandwell.agency
 Template:       Divi
 Version:        V2.0
*/ 


#logo {-webkit-transform: initial;}

/* Setting the breakpoint of the mobile menu */
@media only screen and ( max-width: 1170px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}
}

/* Mobile header and Drop Down styling */
@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
}



/* ------------Scrolling Image Carousel-------------- */

/*Stops the browser creating a horizontal scrollbar*/
.ds-carousel-section {
    overflow: hidden;
    max-height: 300px;
}
/*Reduces the section height on mobiles*/
@media only screen and (max-width: 567px) {
.ds-carousel-section {
    max-height: 140px;
    padding: 30px 0 -1px 0;
    }
}

@media only screen and (max-width: 567px) {
.ds-carousel-logo {
    padding: 0 10px 0 10px;
    }
}

/*Sets the width of the image modules and floats them so they are next to each other*/
.ds-carousel-logo {
    width: 20%;
    float: left;
}
/*Sets the layout for the first row*/
.ds-image-carousel-first {
    width: 100% !important;
    max-height: 200px;
    height: 200px;
    background: #fff;
    animation: 15s first 1 linear;
    animation-fill-mode: forwards;
    
}
/*Sets the layout for the second row*/
.ds-image-carousel-second {
    z-index: 2;
    height: 200px;
    background: #fff;
    width: 100% !important;
    float: left;
    display: inline-block;
    top: -200px;
    animation: 30s second infinite linear;    
}
/*Sets the layout for the third row*/
.ds-image-carousel-third {
    z-index: 1;
    height: 200px;
    background: #fff;
    width: 100% !important;
    float: left;
    display: inline-block;
    top: -400px;
    animation: 30s third infinite linear;
    animation-delay: 15s;
    opacity: 0;
}
/*Animation for the continuous scrolling effect*/
@keyframes first {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 3;
  }
  99.99% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 3;
  }
  100% {
    z-index: -1;
  }
}
@keyframes second {
  0% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes third {
  0.1% {
    opacity: 0;
  }
  0.2% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}
/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*-----------------------------------------------*/


/* Dropdown menu fix for last item */
.drop_menu ul {
right: 0px !important;
}


/* Contact Form 7 Customisation */

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #828282 !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover { 
background-color: transparent; 
border-color:#cc3366; 
color:#cc3366 !important; 
padding: 6px 20px !important; 
}