/*
Theme Name: Johnson Acero
Description: Catálogo Interactivo
Author: BMestudio
Template: flatsome
Version: 3.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*start GLOBAL*/
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.zoomContainer{
	z-index: 9999!important;
}

.grecaptcha-badge{
	display: none!important;
}
/*end GLOBAL*/

/*start HEADER*/
.custom-header{
	padding: 10px!important;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
	.custom-header .button.is-outline{
	    min-height: 0;
	    line-height: 1em;
	    margin: 0;
	    border-width: 1px;
	    padding: 3px 5px
	}
	.custom-header .button.is-outline:hover span{
		color: #000!important
	}

.custom-nav-items{
	text-transform: uppercase;
	font-size: 0.8em;
	position: fixed;
    width: 25%;
    max-width: 300px;
    height: 100%;
    background: #fff;
    top: 0;
    left: -301px;
    padding: 30px;
    transition:all 500ms ease-out;
	-webkit-transition:all 500ms ease-out;
	-moz-transition:all 500ms ease-out;
	-o-transition:all 500ms ease-out;
}
.custom-nav-items.active{
	left: 0;
}
	.custom-nav-items .ux-menu-link__link{
		color: #000
	}
	.custom-nav-items .ux-menu-link:hover .ux-menu-link__link{
		color: #000;
		opacity: 0.9
	}
		.custom-nav-items .ux-menu-link__link .ux-menu-link__text:after{
			content: '';
			width: 0;
			height: 1px;
			background: #000;
			display: block;
			margin-top: 5px;
			transition:All 0.5s ease;
		    -webkit-transition:All 0.5s ease;
		    -moz-transition:All 0.5s ease;
		    -o-transition:All 0.5s ease;
		}
		.custom-nav-items .ux-menu-link:hover .ux-menu-link__link .ux-menu-link__text:after{
			width: 100%
		}
/*end HEADER*/

/*start BTN MOBILE*/
/*start Button Responsive Menu*/
.c-hamburger {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0!important;
    padding: 0;
    width: 30px;
    height: 20px;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    float: left;
    transition:all 500ms ease-out;
    -webkit-transition:all 500ms ease-out;
    -moz-transition:all 500ms ease-out;
    -o-transition:all 500ms ease-out;
}
.c-hamburger:focus {
    outline: none;
}
    .c-hamburger span {
        display: block;
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        height: 3px;
        background: #fff;
        transform: rotate(-180deg);
        border-radius: 3px;
    }
        .c-hamburger span::before,
        .c-hamburger span::after {
            position: absolute;
            display: block;
            right: 0;
            width: 70%;
            border-radius: 3px;
            height: 3px;
            background-color: #fff;
            content: "";
        }
        .c-hamburger span::before {
            top: -8px;
        }
        .c-hamburger span::after {
            bottom: -8px;
        }
    .c-hamburger--htx { 
        background-color: transparent;
    }
        .c-hamburger--htx span {
            transition: background 0s 0.3s;
        }
            .c-hamburger--htx span::before,
            .c-hamburger--htx span::after {
                transition-duration: 0.3s, 0.3s;
                transition-delay: 0.3s, 0s;
            }
            .c-hamburger--htx span::before {
                transition-property: top, transform;
            }
            .c-hamburger--htx span::after {
                transition-property: bottom, transform;
            }

    /* active state, i.e. menu open */
    .c-hamburger--htx.is-active {
        background-color: transparent;
        margin-left: 320px!important;
        transition:all 500ms ease-out;
	    -webkit-transition:all 500ms ease-out;
	    -moz-transition:all 500ms ease-out;
	    -o-transition:all 500ms ease-out;
    }
        .c-hamburger--htx.is-active span {
            background: none;
        }
            .c-hamburger--htx.is-active span::before {
                top: 0;
                transform: rotate(45deg);
                background: #fff
            }
            .c-hamburger--htx.is-active span::after {
                bottom: 0;
                transform: rotate(-45deg);
                background: #fff
            }
            .c-hamburger--htx.is-active span::before,
            .c-hamburger--htx.is-active span::after {
                transition-delay: 0s, 0.3s;
            }
/*end Button Responsive Menu*/
/*end BTN MOBILE*/

/*start SLIDER*/
.custom-slider .slider-nav-light .flickity-prev-next-button{
	opacity: 1
}
.custom-slider .slider-nav-light .flickity-prev-next-button:hover{
	opacity: 0.8;
	transform: translate(5px,0)!important;
}
	.custom-slider .slider .flickity-prev-next-button:hover svg,
	.custom-slider .slider .flickity-prev-next-button:hover .arrow{
		fill: #fff
	}

.custom-slider .banner-layers{
	max-height: 100vh!important;
    height: 100vh!important;
    max-width: none!important;
    padding: 0!important;
}
	.custom-slider .banner-layers .img,
	.custom-slider .banner-layers .img img{
		width: auto!important;
    	height: 100vh;
    	max-width: none!important;
	}	
/*end SLIDER*/

/*start HOTSPOT*/
.custom-hotspot{
	z-index: 999!important;
	width: auto;
	height: auto;
}
 
.slider .custom-hotspot [data-animated="true"]{
	opacity: 0!important;
}
.slider .is-selected .custom-hotspot [data-animated="true"]{
	transition: all 0.8s 1.8s !important;
    opacity: 1!important;
}
	.kubia .custom-hotspot.video{
		top: 49%!important;
		right: 17%!important;
	}

	.kubia .banner:nth-child(7) .custom-hotspot.video{
		top: 46%!important;
	}

	.custom-hotspot a.hotspot{
		color: #000;
		background: transparent;
		width: 35px;
		height: 35px;
		line-height: 35px;
	}
	.custom-hotspot.wht a.hotspot:hover{
		background: transparent!important;
	}
	.custom-hotspot a.hotspot:hover{
		transform: scale(1.1);
	}
	.custom-hotspot a.hotspot:before {
		content: "";
		position: absolute;
		z-index: 0;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		width: 35px;
		height: 35px;
		background: #000;
		border-radius: 100%;
		animation: pulse-border 1500ms ease-out infinite;
	}
	.custom-hotspot.wht a.hotspot:before{
		background: #fff;
	}
	.custom-hotspot a.hotspot:after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		width: 35px;
		height: 35px;
		background: transparent;
		border-radius: 100%;
		transition: all 200ms;
	}
	.custom-hotspot a.hotspot:hover:after {
		background-color: #fff;
	}
	.custom-hotspot.wht a.hotspot:hover:after {
		background-color: transparent;
	}

		.custom-hotspot a.hotspot i{
			display: inline-block;
			background-repeat: no-repeat;
			background-position: center;
			background-color: transparent;
			background-size: 17px;
			width: 36px;
			height: 36px; 
			border: 1px solid #000;
			border-radius: 100%;
			position: relative;
			z-index: 99
		}
		.custom-hotspot.wht a.hotspot i{
			border: 1px solid #fff
		}
		.custom-hotspot.video a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-play.svg);
		}
		.custom-hotspot.video.wht a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-play-white.svg);
		}
		.custom-hotspot.gallery a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-gallery.svg);
		}
		.custom-hotspot.gallery.wht a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-gallery-white.svg);
		}
		.custom-hotspot.materials a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-materials.svg);
		}
		.custom-hotspot.materials.wht a.hotspot i{
			background-image: url(../../uploads/2021/05/icon-materials-white.svg);
		}
			.custom-hotspot a.hotspot i:before{
				content: '';
				display: none;
			}
/*end HOTSPOT*/

/*start POPUP*/
.mfp-container{
	padding: 0;
	width: 100vw;
	height: 100vh;
}	
	.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content{
		width: 100vw;
		text-align: center;
	}
		.lightbox-content{
			background: transparent;
			max-width: none;
			box-shadow: none!important
		}
	.mfp-container .img img{
		width: auto;
		height: 65vh
	}

.video.video-fit{
	padding-top:0!important
}
.video.video-fit .wp-video{
    width: 65vw!important;
    margin: auto;
    height: 65vh;
}
	.video.video-fit .wp-video .mejs-container.wp-video-shortcode.mejs-video{
		width: 65vw!important;
    	height: 65vh!important;
    	margin:  auto!important;
	}

/* cell number */
.mfp-bg.mfp-ready{
	opacity: 0.9!important;
}


.carousel-cell {
  counter-increment: carousel-cell;
}

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.flickity-page-dots {
	position: absolute;
	left: 10px;
	right: auto;
	top: auto;
	bottom: 10px;
	width: 70px;
	height: auto;
	color: #fff;
	background-color: transparent;
}
.mfp-container .flickity-page-dots{
	left: -10px;
	right: auto;
	top: -25px;
	bottom: auto;
}

	.flickity-page-dots:before {
		content: "/";
	}

	.flickity-page-dots .dot{
		opacity: 1;
		width: auto;
	    height: auto;
	    margin: 0;
	    text-align: left;
	    cursor: default;
	}

	.dot, 
	.dot:before, 
	.dot:after {
		float: left;
		width: 30px;
		height: 20px;
	}

	.dot:before{
		color: transparent!important;
	}
	.dot.is-selected:before{
		color: #fff!important;
	}
	.dot {
		counter-increment: carousel-cell;
		position: absolute;
		left: 0;
		margin: 0;
		opacity: 1;
		background-color: transparent!important;
		border:  none!important;
	}

		.dot.is-selected {
			z-index: 1
		}

		.dot:before {
			content: counter(carousel-cell);
			background-color: transparent!important;
			text-align: right;
		}

		.dot:last-child:after {
			content: counter(carousel-cell);
			position: absolute;
			top: 0;
			right: -40px;
			text-align: left;
		}
/*end POPUP*/

/*start WARNING MOBILE*/
.wrap-warning-mobile{
	height: 100vh!important
}
/*end WARNING MOBILE*/

/*start HOME*/
/*.custom-box-img{
	padding: 15px;
	background-color: #fff;
}
	.custom-box-img .box-text{
		padding: 0;
		margin-top: 15px;
	}*/

.section-custom{
	padding-top: 30px!important;
	padding-bottom: 0!important;
	margin: 30px auto 0!important;
	border-top: 1px solid rgb(83, 83, 83);
	border-bottom: none;
	max-width: 1050px!important;
}

.custom-wrap-img .wrap-columns{
	padding-left: 30px!important;
	margin-left: 30px!important;
	flex-basis: 77%;
    max-width: 100%;
}
	/*.custom-wrap-img > .col.large-3{
	    flex-basis: 17.1%;
	    max-width: 100%;
	}*/
		.custom-wrap-img .col-inner .custom-box-img .box-text{
			padding: 15px 0 0 0;
		}

.custom-wrap-img .wrap-columns .col.medium-6{
	padding-bottom: 0;
}
/*end HOME*/

/*start OPT-IN*/
.stul-content-locked{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 99999!important;
	max-height: none;
    min-height: auto;
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.stul-content-locked:after{
	background: rgba(0,0,0,0.8)
}

.stul-form-wrap.stul-template-3{
	max-width: 650px;
}

.stul-main-outer-wrap .stul-blur-overlay{
	position: relative;
	top: 0
}

.stul-form-wrap.stul-template-3 .stul-subscription-form,
.stul-form-wrap.stul-template-3 .stul-unlock-form-wrap{
	max-width: none;
}
.stul-form-wrap.stul-template-3 .right-holder,
.stul-form-wrap.stul-template-3 .stul-unlock-form-wrap{
	padding:60px;
}

.stul-form-wrap.stul-template-3 .right-holder h2,
.stul-form-wrap .both-fields-wrap,
.stul-unlock-code-field{
	margin: 0 0 30px 0!important
}
/*end OPT-IN*/


@media (min-width: 320px) and (max-width: 479px) {
	.custom-wrap-img > .col.large-3,
	.custom-wrap-img .wrap-columns{
		flex-basis: calc(100% - 30px);
	}
	.custom-wrap-img .wrap-columns{
		border-top: 1px solid #ececec;
		padding: 30px 0 0 0!important;
		margin: 30px 0 0 0!important;
	}

	.custom-wrap-img .wrap-columns .col.medium-6{
		padding-bottom: 30px;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.custom-wrap-img > .col.large-3,
	.custom-wrap-img .wrap-columns{
		flex-basis: calc(100% - 30px);
	}
	.custom-wrap-img .wrap-columns{
		border-top: 1px solid #ececec;
		padding: 30px 0 0 0!important;
		margin: 30px 0 0 0!important;
	}
	.custom-wrap-img .wrap-columns .col.medium-6{
		padding-bottom: 30px;
	}
}

@media (min-width: 768px) and (max-width: 959px) {
	.custom-wrap-img > .col.large-3{
		flex-basis: 27%;
	}
	.custom-wrap-img .wrap-columns{
		flex-basis: 60%;
		border-left: 1px solid #ececec;
	}
	.custom-wrap-img .wrap-columns .col.medium-6{
		padding-bottom: 30px;
	}
}


@media (min-width: 480px) and (max-width: 860px) {
	.c-hamburger--htx.is-active{
		margin-left: 230px!important;
		z-index: 99;
	}	
	.custom-nav-items{
		width: 35%;
	}
	.mfp-container .flickity-page-dots{
		top: -55px;
	}


	.custom-slider .flickity-enabled.is-draggable .flickity-viewport{
		min-height: 100vh!important;
		height: 100vh!important;
		
	}

	
}

@media (min-width: 850px) and (max-width: 960px){
	.c-hamburger--htx.is-active{
		margin-left: 300px!important;
	}	

	.custom-hotspot.video{
		right: 27%!important;
	}
	.banner:nth-child(20) .custom-hotspot.materials{
		bottom: 25%!important;
		left:  26%!important;
	}
}