/*
 Theme Name:     Soap Studio Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Soap studio témája
 Author:         Szappanos Ádám EV
 Author URI:     
 Template:       Divi
 Version:        1.0.0
*/

.soap-button-default{
	position: relative;
}

html body #page-container .et_pb_section .soap-button-default:before{
	content: ""!important;
    display: block!important;
    background: #AA4D37;
    position: absolute;
    left: 0;
    margin: 0;
    width: 100%;
    opacity: 1;
    z-index: -1;
}

html body #page-container .et_pb_section .soap-button-default:before{
    top: 0;
    height: calc(100% - 4px);
    transition: all .3s ease-in-out;
}

html body #page-container .et_pb_section .soap-button-default:hover:before{
	width: 0!important;
}

.et_menu_container *{
	font-weight: 300;
}

#top-menu-nav .menu-item>a{
	position: relative;
}

#top-menu-nav .menu-item>a:not(.menu-image-title-hide)::after{
	content: "";
	position: absolute;
	width: 0;
	height: 5px;
	background: rgb(170, 77, 55);
    top: calc(1em + 5px);
	transition: all .3s ease-in-out;
	left: 0;
	display: block;
}

#top-menu-nav .menu-item.current-menu-item:not(.menu-image-title-hide)>a::after{
	width: 60%;
}

#top-menu-nav .menu-item:not(.menu-image-title-hide):hover>a::after{
	width: 100%;
}

#mobile_menu .menu-item:nth-last-child(2){
	margin-left: 14px;
	margin-right: 10px;
}

#mobile_menu .menu-item:last-child, #mobile_menu .menu-item:nth-last-child(2){
	display: inline-block;
}

.et_mobile_menu{
	border-top-color: #aa4d37;
}

.row-center, .special-section-center>.et_pb_row{
	display: flex;
	align-items: center;
}

.dtq-carousel .slick-track{
	padding: 11px 0px!important;
}

.soap-list ul{
	padding-inline-start: 40px;
}

.soap-list li{
	position: relative;
	margin-bottom: 30px;
}

.soap-list li::before{
	content: "";
	display: block;
	background: #af9424;
	height: 18px;
	width: 18px;
	position: absolute;
	top: 4px;
	transform: translateX(-100%);
	left: -18px;
}

.dtq-carousel .slick-arrow:before{
	top: 50%;
	position: absolute;
	transform: translateY(-50%)!important;
}

.slick-next:before{
	left: 0;
}

.slick-prev:before{
	right: 0;
}

.soap-header-color-background h3{
	background-color: #AA4D37;
    padding-right: 52px;
    display: inline-block;
    padding: 9px 15px 7px 15px;
}

.soap-gallery .et_pb_gallery_item.et_pb_grid_item{
	margin-right: 2.5%;
	margin-bottom: 2.5%;
	width: 23.125%;
}

.soap-gallery .et_pb_gallery_image a>img{
	box-shadow: 2px 2px 11px 1px #00000033
}

#soap-custom-z-index-column-with-image{
	z-index: 3;
}

#soap-custom-z-index-separator::after{
	position: absolute;
	top: 0;
	left: -150%;
	width: 101vw;
	background: #c3c3c3;
	height: 38px;
}

.ba_image_carousel .slick-track{
	display: flex;
	align-items: center;
}

footer ul.et-menu.nav:not(#menu-footer-social){
	display: block;
}

#menu-footer-informacio>li.menu-item:first-child{
	margin-top: 4px;
}

.soap-blurb .et_pb_blurb_content{
	display: flex;
}

.soap-blurb .et_pb_blurb_content .et_pb_main_blurb_image{
	margin-bottom: 0px!important;
	width: 60px;
}

.soap-blurb .et_pb_blurb_content .et_pb_blurb_container{
    display: flex;
    align-items: center;
}

.soap-blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header{
	padding-bottom: 0;
}

@media all and (max-width: 980px){
	.row-center, .special-section-center>.et_pb_row{
		display: block;
	}

	footer .et_pb_menu__menu{
		display: block!important;
	}

	footer .et_mobile_nav_menu{
		display: none!important;
	}

	footer .et_pb_menu__wrap{
		justify-content: flex-start!important;
	}

	.soap-gallery .et_pb_gallery_item.et_pb_grid_item{
		margin-right: 5.5%;
	    margin-bottom: 7.5%;
	    width: 29.6%;
	    clear: none;
	    float: left;
	}

	.soap-gallery .et_pb_gallery_item.et_pb_grid_item.last_in_row{
	    margin-right: 0;
	}
}

@media all and (max-width: 767px){
	.soap-gallery .et_pb_gallery_item.et_pb_grid_item{
		margin-right: 5.5%;
	    margin-bottom: 7.5%;
	    width: 47.25%;
	    clear: none;
	    float: left;
	}

	.soap-gallery .et_pb_gallery_item.et_pb_grid_item.last_in_row{
	    margin-right: 0;
	}

	.ba_image_carousel .slick-prev{
	    left: -39px;
	}
}

@media all and (min-width: 981px){
	.et_fullwidth_nav #main-header .container {
		width: 90%;
	    max-width: 1200px;
	    padding-right: 0;
	    padding-left: 0;
	}
}