/* GENERIC */
	/* Titles */
	/* Underline animation */
/* SLIDER */
/* INTRO */
/* CITY ROADS */
/* FEATURES */
	/* Features map */
/* CATALOG */
	/* Product */
/* ANIMATIONS */
	/* Show on scroll */
/* MEDIA QUERIES */



/* -------------------------------------------------- SWITCHER TABS SPECS ---------- */

.tab-slider--nav {
    width: 100%;
    display: flex;
    margin: auto;
    justify-content: center;
}

.tab-slider--tabs{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	border-radius: 35px;
	overflow: hidden;
	background: #fff;
	height: 35px;
	user-select: none; 
	&:after{
		content: "";
		width: 50%;
		background: #417a50;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 250ms ease-in-out;
		border-radius: 35px;
	}
	&.slide:after{
		left: 50%;
	}
}

.tab-slider--trigger {
    font-size: 15px;
    font-family: 'Gotham-Bold';
    line-height: 1;
    font-weight: bold;
    color: #78a884;
    text-align: center;
    padding: 15px 6px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: inline-block;
    transition: color 250ms ease-in-out;
    user-select: none;
    width: 110px;
}
li.tab-slider--trigger.active {
    color: #fff;
}
.tab-slider--body{
}

/* -------------------------------------------------- GENERIC ---------- */
body#fabric-e-stepcity *,
body#fabric-e-stepcity *:before,
body#fabric-e-stepcity *:after{
	font-family: Gotham;
	line-height: initial;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* Layout */
body#fabric-e-stepcity,
#fabric-e-stepcity #center_column{font-size: 1em !important;}

body#fabric-e-stepcity,
#fabric-e-stepcity #vp_wapper_head{background: #000;}

#fabric-e-stepcity #vp_wapper_head > .vp_container.clearfix{font-size: 12px;}

#fabric-e-stepcity #vp_wapper_head > #vp_waper_columns{
	/*background: url(styles/breadcrumb_style1.jpg) left top repeat-x #fff;*/
	background: #000;
	padding-top: 0;
}
#fabric-e-stepcity #vp_wapper_head > #vp_waper_columns > #columns{
	width: 100% !important;
	padding: 0;
}
#fabric-e-stepcity #menu-option span{background: url(../img/nav.png) 6px 4px no-repeat;}

/* Tags */
#fabric-e-stepcity section,
#fc-slider > .swiper-container{
	position: relative;
	background-color: #000;
	padding-top: 15vh; /* 10em */
	padding-bottom: 15vh;
}
#fabric-e-stepcity section p,
#fabric-e-stepcity section a{
	line-height: 1.8em;
	letter-spacing: 0.07em;
	margin-bottom: 1.5em;
}
#fabric-e-stepcity section p{
	font-size: 1.1em;
	padding: 0;
}

#fabric-e-stepcity section a{
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
#fabric-e-stepcity section ul{position: relative;}

#fabric-e-stepcity section li{list-style: none;}

/* Section content */
#fabric-e-stepcity section .section-content{
	width: 1200px;
	margin: auto;
}

/* Unselectable */
#fabric-e-stepcity .unselectable{
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Language selector */
#fabric-e-stepcity #languages_block_top #countries .countries_ul_hover{box-sizing: initial;}
#fabric-e-stepcity #languages_block_top #countries .countries_ul_hover > li{line-height: 25px;}

/* Live chat */
#fabric-e-stepcity .mylivechat_inline{display: none;}

/* --------------------------------- GENERIC - TITLES */
#fabric-e-stepcity section h1,
#fabric-e-stepcity section h2,
#fabric-e-stepcity section h3,
#fabric-e-stepcity section h4{
	display: inline-block;
	width: 100%;
	font-weight: bold;
    letter-spacing: 0.05em;
	line-height: 1.5em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1em 0;
}
#fabric-e-stepcity section h1{font-size: 3em !important;}
#fabric-e-stepcity section h2{font-size: 2.5em !important;}
#fabric-e-stepcity section h3{font-size: 2em !important;}
#fabric-e-stepcity section h4{font-size: 1.5em !important;}

/* --------------------------------- GENERIC - UNDERLINE ANIMATION */
#fabric-e-stepcity .underline-animation{
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
}
#fabric-e-stepcity .underline-animation > span{display: inline-block;}

#fabric-e-stepcity.underline-animation > span > span{
	display: block;
	font-size: 1em;
	line-height: 1.8em;
	letter-spacing: 0.15em;
	margin: 0;
}
#fabric-e-stepcity .underline-animation > span:after{
	content: '';
	display: block;
	border-bottom: 2px solid;
	opacity: 0.5;
	margin-top: 0.5em;
}
#fabric-e-stepcity .underline-animation > span > span,
#fabric-e-stepcity .underline-animation > span:after{
	transition:
		transform 0.3s cubic-bezier(0.5, 0.6, 0.3, 1),
		opacity 0.3s cubic-bezier(0.5, 0.6, 0.3, 1);
    -webkit-transition:
		transform 0.3s cubic-bezier(0.5, 0.6, 0.3, 1),
		opacity 0.3s cubic-bezier(0.5, 0.6, 0.3, 1);
    -moz-transition:
		transform 0.3s cubic-bezier(0.5, 0.6, 0.3, 1),
		opacity 0.3s cubic-bezier(0.5, 0.6, 0.3, 1);
}
#fabric-e-stepcity .underline-animation:hover > span > span,
#fabric-e-stepcity a:hover > .underline-animation > span > span{
	transform: translateY(0.25em);
	-webkit-transform: translateY(0.25em);
	-moz-transform: translateY(0.25em);
}
#fabric-e-stepcity .underline-animation:hover > span:after,
#fabric-e-stepcity a:hover > .underline-animation > span:after{
	opacity: 1;
	transform: translateY(-0.25em);
	-webkit-transform: translateY(-0.25em);
	-moz-transform: translateY(-0.25em);
}

/* -------------------------------------------------- SLIDER ---------- */
section#fc-slider{padding: 0 !important;}

#fc-slider .swiper-container{
    width: 100%;
    height: calc(100vh - 170px);
	min-height: 300px;
}
#fc-slider .swiper-container:after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

/* Slides wrapper */
#fc-slider .swiper-wrapper{
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
}
#fc-slider .swiper-wrapper > .swiper-slide{opacity: 1;}

#fc-slider #first-slide{background: url(https://fabricbike.com/themes/fabricbivp_handbag/img/fabric-e-stepcity/slide1-bici-paseo-hombre.jpg) no-repeat center center / cover;}
#fc-slider #second-slide{background: url(https://fabricbike.com/themes/fabricbivp_handbag/img/fabric-e-stepcity/slide2-bici-paseo-hombre.jpg) no-repeat center center / cover;}
#fc-slider #third-slide{background: url(https://fabricbike.com/themes/fabricbivp_handbag/img/fabric-e-stepcity/slide3-bici-paseo-hombre.jpg) no-repeat center center / cover;}

/* Progress bar */
#fc-slider .swiper-pagination-progress{
	z-index: 100;
	height: 8px;
	background-color: rgba(201, 241, 232, 0); /* +20pt */
}
#fc-slider .swiper-pagination-progress > span{background-color: rgba(0, 0, 0, 0);}

/* Info */
#fc-slider .slider-info{
	position: relative;
	z-index: 100;
}
#fc-slider .slider-info > article{
	width: 100%;
	max-width: 25em;
}
#fc-slider .slider-info > article > *{color: #fff;}

#fc-slider .slider-info > article > h1{
	text-align: left;
	margin-bottom: 0.5em;
}
#fc-slider .slider-info > article > h1:after{content: '.';}

#fc-slider .slider-info > article > p{
	font-size: 1.5em;
    font-style: italic;
	margin-bottom: 1em;
}

/* Controllers */
#fc-slider .prev-button,
#fc-slider .next-button{
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 5em;
	height: 100%;
	text-align: center;
	stroke: rgba(255,255,255,0.3);
	transition: stroke 0.5s ease;
    -webkit-transition: stroke 0.5s ease;
    -moz-transition: stroke 0.5s ease;
}
#fc-slider .next-button{
	left: auto;
	right: 0;
}
#fc-slider .prev-button:hover,
#fc-slider .next-button:hover{stroke: rgba(255,255,255,1);}

#fc-slider .prev-button > svg,
#fc-slider .next-button > svg{width: 100%;}

/* Show more */
#fc-slider .show-more{
	position: absolute;
	bottom: 0;
	left: calc(50% - 5em);
	z-index: 100;
	display: inline-block;
	width: 10em;
	height: 10em;
	margin: auto;
}
#fc-slider .show-more:after{
	content: '';
	display: block;
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	width: 60%;
	height: 60%;
	background: url(../img/fabric-e-stepcity/logo-city-classic.png) no-repeat center center / 100% auto;
	transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
}
#fc-slider .show-more:hover:after{
	animation: zoomBounce 0.8s linear;
	-webkit-animation: zoomBounce 0.8s linear;
	-moz-animation: zoomBounce 0.8s linear;
}

/* -------------------------------------------------- INTRO ---------- */
section#fc-intro{}

/*#fc-intro article{text-align: center;}*/

#fc-intro img {
    width: 100%;
    display: block;
    max-width: 800px;
    margin: 0px auto 0em auto;
    position: relative;
    padding-top: 5vh;
    padding-bottom: 0vh;
    background: #00000000;
}

img.mini-bike {
    margin-top: -38px !important;
}

#fc-intro p.quote{
	position: relative;
	width: 100%;
	max-width: 26em;
	font-size: 1.3em;
	font-style: italic;
	text-align: center;
	color: #767688;
	padding: 1.5em;
	margin-left: auto;
	margin-right: auto;
}
#fc-intro p.quote:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 1.5em;
	z-index: -1;
	width: 2em;
	height: 1.2em;
	background: url(../img/fabric-e-stepcity/quotes.png) no-repeat center center / auto 100%;
	opacity: 0.5;
}
#fc-intro .info{
	overflow: hidden;
	text-align: center;
	padding-bottom: 40px;
	padding-top: 30px;
}
#fc-intro .info > p{
	text-align: left;
	color: #5d5941;
}
#fc-intro .info > p > a{
	display: inline-block;
	position: relative;
	color: #9797a5;
	margin: 0;
	transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
}
#fc-intro .info > p > a:after{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	border-bottom: 1px solid #dddde3;
	transition:
		border-color 0.3s ease,
		transform 0.3s ease;
    -webkit-transition:
		border-color 0.3s ease,
		transform 0.3s ease;
    -moz-transition:
		border-color 0.3s ease,
		transform 0.3s ease;
}
#fc-intro .info > p > a:hover{color: #767688;}
#fc-intro .info > p > a:hover:after{
	border-color: #767688;
	transform: translateY(-0.1em);
	-webkit-transform: translateY(-0.1em);
	-moz-transform: translateY(-0.1em);
}

#fc-intro .underline-animation{
	color: rgba(193, 193, 193, 0.62);
	margin: 3em 6em 0 0;
}
#fc-intro .underline-animation:last-of-type{margin: 1em 0;}

/* -------------------------------------------------- CITY ROADS ---------- */
#fabric-e-stepcity #city-roads{
	position: relative;
	z-index: 100;
	width: 100%;
	background: url(../img/fabric-e-stepcity/pattern.png) repeat-x top rgba(0, 0, 0, 0);
	background-size: 20% auto;
	opacity: 1 !important;
}

div#city-roads {
    position: relative;
    z-index: 100;
    width: 100%;
    background: url(/themes/ayon/img/fabric-e-stepcity/pattern.png) repeat-x top;
    background-size: 15% auto;
    opacity: 1 !important;
    display: block;
    margin-top: 60px;
}

/* -------------------------------------------------- FEATURES ---------- */
section#fc-features{
	background-color: rgba(0, 0, 0);
	text-align: center;
	padding-top: 0px;
	/*background: url(../img/fabric-e-stepcity/city18.png) no-repeat bottom rgba(193, 193, 193, 0.62) / 100% auto;*/
}
section#fc-features h2 {
    color: #147b8a;
    font-size: 33px !important;
}

/* --------------------------------- FEATURES - FEATURES MAP */
#fc-features .features-map{
	margin: auto;
	width: 50%;
	}

@media (max-width:768px){
	
	#fc-features .features-map{
		margin: auto;
		width: 100%;
	}
	section#fc-features h2{
		font-size: 20px !important;
	}

}
/* Controllers */
#fc-features .features-map > .controllers{
	position: relative;
	margin: 5vh 0 0;
}
#fc-features .features-map > .controllers > ul{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	opacity: 0;
}
#fc-features .features-map[data-show="true"] > .controllers > ul{
	opacity: 1;
	transition: opacity 0.6s ease 1.2s;
	-webkit-transition: opacity 0.6s ease 1.2s;
	-moz-transition: opacity 0.6s ease 1.2s;
}
#fc-features .features-map > .controllers > ul > li{
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: rgba(68, 68, 68, 0.33);
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: 999em;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transition:
		border 0.3s ease,
		background-color 0.3s ease,
		transform 0.3s ease;
	-webkit-transition:
		border 0.3s ease,
		background-color 0.3s ease,
		transform 0.3s ease;
	-moz-transition:
		border 0.3s ease,
		background-color 0.3s ease,
		transform 0.3s ease;
}
#fc-features .features-map > .controllers > ul > li:hover,
#fc-features .features-map > .controllers > ul > li.active{
	border-color: #fff;
	background-color: rgba(245, 245, 245, 0.33);
	transform: translateX(-50%) translateY(-50%) scale(1.3);
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1.3);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1.3);
}
#fc-features .features-map > .controllers > ul > li.active{}

#fc-features .features-map > .controllers > ul > li[data-target="feature1"]{top: 51%;left: 53%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature2"]{top: 67%;left: 20%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature3"]{top: 7%;left: 66%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature4"]{top: 51%;left: 40%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature5"]{top: 64%;left: 76%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature6"]{top: 27%;left: 35%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature7"]{top: 33%;left: 76%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature8"]{top: 27%;left: 70%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature9"]{top: 34%;left: 20%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature10"]{top: 66%;left: 35%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature11"]{top: 81%;left: 22%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature12"]{top: 4%;left: 69%;}
#fc-features .features-map > .controllers > ul > li[data-target="feature13"]{top: 60%;left: 87%;}

#fc-features .features-map > .controllers > img{width: 100%;}

/* Info */
#fc-features .features-map > .info{
	position: relative;
	width: 440px;
	margin: auto;
}
#fc-features .features-map > .info *{
    color: #208999;
}

#fc-features .features-map > .info > .info-controllers{
	position: relative;
	width: 16em;
	height: 3em;
	margin: 0 auto 1em auto;
}
#fc-features .features-map > .info > .info-controllers > *{
	float: left;
	height: 100%;
	text-align: center;
}
#fc-features .features-map > .info > .info-controllers > .position{
	position: absolute;
	top: 0;
	left: calc(50% - 1.5em);
	width: 3em;
}
#fc-features .features-map > .info > .info-controllers > .position:before{
	content: '';
	display: block;
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 3em;
	border-bottom: 2px solid #208999;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#fc-features .features-map > .info > .info-controllers > .position > span{
	position: absolute;
	width: 50%;
	font-weight: bold;
	color: #208999;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
}
#fc-features .features-map > .info > .info-controllers > .position > span.fade-out{opacity: 0;}

#fc-features .features-map > .info > .info-controllers > .position > span:first-of-type{
	top: -0.5em;
    left: 0;
    display: block;
}
#fc-features .features-map > .info > .info-controllers > .position > span:last-of-type{
	bottom: -0.5em;
    right: 0;
    display: initial;
    z-index: 1000;
 
}
#fc-features .features-map > .info > .info-controllers > .prev-button,
#fc-features .features-map > .info > .info-controllers > .next-button{
	width: 6em;
	height: 3em;
	padding: 0 1em;
	transition: padding 0.3s cubic-bezier(0.9, 0, 0.3, 1);
	-webkit-transition: padding 0.3s cubic-bezier(0.9, 0, 0.3, 1);
	-moz-transition: padding 0.3s cubic-bezier(0.9, 0, 0.3, 1);
}
#fc-features .features-map > .info > .info-controllers > .next-button{float: right;}

#fc-features .features-map > .info > .info-controllers > .prev-button > svg,
#fc-features .features-map > .info > .info-controllers > .next-button > svg{
	stroke: #208999; /* +40pt */
	position: relative;
	top: 0.9em;
	transition: stroke 0.3s cubic-bezier(0.9, 0, 0.3, 1);
	-webkit-transition: stroke 0.3s cubic-bezier(0.9, 0, 0.3, 1);
	-moz-transition: stroke 0.3s cubic-bezier(0.9, 0, 0.3, 1);
}
#fc-features .features-map > .info > .info-controllers > .prev-button:hover{padding-left: 0;}
#fc-features .features-map > .info > .info-controllers > .next-button:hover{padding-right: 0;}

#fc-features .features-map > .info > .info-controllers > .prev-button:hover > svg,
#fc-features .features-map > .info > .info-controllers > .next-button:hover > svg{stroke: #000;}

#fc-features .features-map > .info > ul > li{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-25px);
	-webkit-transform: translateY(-25px);
	-moz-transform: translateY(-25px);
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease, transform 0.3s ease;
	-moz-transition: opacity 0.3s ease;
}
#fc-features .features-map > .info > ul > li.largest{position: relative;}

#fc-features .features-map > .info > ul > li.active{
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	pointer-events: initial;
	transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
}
#fc-features .features-map > .info > ul > li.fade-out{
	opacity: 0;
	transform: translateY(25px);
	-webkit-transform: translateY(25px);
	-moz-transform: translateY(25px);
}
#fc-features .features-map > .info > ul > li > h4 {
    margin: 1em 0px 0.5em 0;
    font-size: 20px;
    color: #147b8a;
}

#fc-features .features-map > .info > ul > li > p{
	font-size: 1em;
    color: #0a4f59;
    line-height: 1.4em;
	margin: 0px 40px;
}

/* -------------------------------------------------- GALLERY ---------- */
section#fc-gallery{
	overflow: hidden;
	padding: 0 !important;
}

section#fc-gallery > img{
	float: left;
	width: 50%;
}
section#fc-gallery > img:first-of-type{width: 100%; display: none;}

/* -------------------------------------------------- CATALOG ---------- */

section#fc-catalog {
    background: #ffdda4;
}

h3.tallas {
    color: #fe6b19;
}

/* --------------------------------- CATALOG - PRODUCT LIST */
#fc-catalog .product-list{
	width: 90%;
	margin: 5vh auto 0 auto;
	padding-bottom: 50px;
}
#fc-catalog .product-list > .product{
	display: inline-block;
	position: relative;
	width: 50%;
	text-align: center;
	padding: 2em 2.5vw;
}
#fc-catalog .product-list > .product > a{
	display: block;
	position: relative;
	padding: 2em 2.5vw;
}

/* Image wrapper */
#fc-catalog .product-list > .product > a > .image-wrapper{
	transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
    -moz-transition: transform 0.5s linear;
}
#fc-catalog .product-list > .product > a:hover > .image-wrapper{
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
}
#fc-catalog .product-list > .product > a > .image-wrapper > img{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.7, 0.2, 0.8, 1);
    -webkit-transition: opacity 0.4s cubic-bezier(0.7, 0.2, 0.8, 1);
    -moz-transition: opacity 0.4s cubic-bezier(0.7, 0.2, 0.8, 1);
}
#fc-catalog .product-list > .product > a > .image-wrapper > img:first-of-type{
	position: relative;
	opacity: 1;
	transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
}
#fc-catalog .product-list > .product > a:hover > .image-wrapper > img:first-of-type{opacity: 0;}

#fc-catalog .product-list > .product > a > .image-wrapper > img:last-of-type{opacity: 0;}
#fc-catalog .product-list > .product > a:hover > .image-wrapper > img:last-of-type{
	opacity: 1;
	transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
}

/* Product name */
#fc-catalog .product-list > .product > a > p{
	position: relative;
	z-index: 100;
	color: #9e9e9e;
	margin: 2em 0 1em 0;
}
#fc-catalog .product-list > .product > a > p.underline-animation > span:after{opacity: 0;}
#fc-catalog .product-list > .product > a:hover > p.underline-animation > span:after{opacity: 1;}

#fc-catalog .product-list > .product > a > p.underline-animation > span > span, #fc-catalog .product-list > .product > a > p.underline-animation > span:after {
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    color: #333;
    line-height: 2.8em;
    letter-spacing: 0.0em;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    padding: 28px 38px 19px 38px;
    background-color: #191919;
    color: #fff;
    border-radius: 30px;
    font-family: gotham-book;
	box-shadow: 2px 6px 12px -6px #bfab7a;
}

/* -------------------------------------------------- ANIMATIONS ---------- */
/* --------------------------------- ANIMATIONS - FADE IN/OUT */
.dir-top{
	opacity: 0;
	transform: translateY(-25px);
	-webkit-transform: translateY(-25px);
	-moz-transform: translateY(-25px);
}
.dir-right{
	opacity: 0;
	transform: translateX(25px);
	-webkit-transform: translateX(25px);
	-moz-transform: translateX(25px);
}
.dir-bottom{
	opacity: 0;
	transform: translateY(25px);
	-webkit-transform: translateY(25px);
	-moz-transform: translateY(25px);
}
.dir-left{
	opacity: 0;
	transform: translateX(-25px);
	-webkit-transform: translateX(-25px);
	-moz-transform: translateX(-25px);
}
.trans-in{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transition:
		transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition:
		-webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition:
		-webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.trans-out{
	opacity: 0;
	pointer-events: none;
	transition:
		transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
		opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
	-webkit-transition:
		-webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
		opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
	-moz-transition:
		-webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
		opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Show on scroll */
.dir-top[data-show]{
	transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
}
.dir-right[data-show]{
	transform: translateX(100px);
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
}
.dir-bottom[data-show]{
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
}
.dir-left[data-show]{
	transform: translateX(-100px);
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
}
.dir-top[data-show="true"],
.dir-right[data-show="true"],
.dir-bottom[data-show="true"],
.dir-left[data-show="true"]{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transition:
		transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition:
		-webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition:
		-webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.dir-top[data-show="false"],
.dir-right[data-show="false"],
.dir-bottom[data-show="false"],
.dir-left[data-show="false"]{
	opacity: 0;
	pointer-events: none;
	transition:
		transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition:
		-webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition:
		-webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --------------------------------- ANIMATIONS - KEYFRAMES */
/* Zoom bounce */
@keyframes zoomBounce{
	25%{transform: scale(1.2) rotate(10deg);}
	55%{transform: scale(1.1) rotate(-5deg);}
	85%{transform: scale(1.05) rotate(5deg);}
	40%, 70%{transform: scale(1);}
	100%{transform: scale(1) rotate(0);}
}
@-webkit-keyframes zoomBounce{
	25%{-webkit-transform: scale(1.2) rotate(10deg);}
	55%{-webkit-transform: scale(1.1) rotate(-5deg);}
	85%{-webkit-transform: scale(1.05) rotate(5deg);}
	40%, 70%{-webkit-transform: scale(1);}
	100%{-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes zoomBounce{
	25%{-moz-transform: scale(1.2) rotate(10deg);}
	55%{-moz-transform: scale(1.1) rotate(-5deg);}
	85%{-moz-transform: scale(1.05) rotate(5deg);}
	40%, 70%{-moz-transform: scale(1);}
	100%{-moz-transform: scale(1) rotate(0);}
}

/* Blink */
@keyframes blink{
	50%{opacity: 0;}
	0%, 100%{opacity: 1;}
}
@-webkit-keyframes blink{
	50%{opacity: 0;}
	0%, 100%{opacity: 1;}
}
@-moz-keyframes blink{
	50%{opacity: 0;}
	0%, 100%{opacity: 1;}
}

h3.title-final {
    font-size: 28px;
    font-family: 'Gotham-bold';
    line-height: 1.1em;
    text-align: center;
    width: 300px;
    margin: auto;
    margin-top: 20px;
    color: #fff;
}

p.btn-final {
    color: #fff;
    width: 260px;
    margin: auto;
    text-align: center;
    letter-spacing: 0.0em;
    margin-bottom: 0.5em;
    margin-top: 10px;
    font-size: 1em;
    padding: 18px 28px 10px 28px;
    border-radius: 30px;
    border: 2px solid;
    text-transform: uppercase;
    font-family: 'Gotham-bold';
}



/* -------------------------------------------------- MEDIA QUERIES ---------- */
@media screen and (max-width: 1500px){
	/* -------------------------------------------------- GENERIC ---------- */	
	/* Layout */
	body#fabric-e-stepcity,
	#fabric-e-stepcity #center_column{font-size: 0.95em !important;}
	
	/* Section content */
	#fabric-e-stepcity section .section-content{
		width: 80%;
		max-width: 980px;
	}
	
	/* -------------------------------------------------- FEATURES ---------- */
	/* --------------------------------- FEATURES - FEATURES MAP */
	/* Controllers */
	#fc-features .features-map > .controllers > ul > li{
		width: 40px;
		height: 40px;
	}
	
	/* -------------------------------------------------- CATALOG ---------- */	
	/* --------------------------------- CATALOG - PRODUCT LIST */
	#fc-catalog .product-list > .product{padding: 0 2.5vw;}
}
@media screen and (max-width: 980px){
	/* -------------------------------------------------- GENERIC ---------- */
	/* Section content */
	#fabric-e-stepcity section .section-content{
		width: 82%;
		max-width: 750px;
	}
	
	/* -------------------------------------------------- SLIDER ---------- */
	#fc-slider .swiper-container{height: calc(100vh - 155px);}
	
	/* Controllers */
	#fc-slider .prev-button,
	#fc-slider .next-button{width: 4em;}
	
	#fc-slider .prev-button > svg,
	#fc-slider .next-button > svg{height: 30px;}
	
	/* -------------------------------------------------- INTRO ---------- */
	#fc-intro img {
        max-width: 600px;
        position: relative;
    }
	
	/* -------------------------------------------------- CITY ROADS ---------- */
	div#city-roads{background-size: 19% auto;}
	
	/* -------------------------------------------------- FEATURES ---------- */
	/* --------------------------------- FEATURES - FEATURES MAP */
	#fc-features .features-map > .controllers > ul > li{
		width: 30px;
		height: 30px;
	}
	
	/* Info */
	#fc-features .features-map > .info{width: 80%}
}


@media screen and (min-width: 768px){
	#fc-intro > div > div > p.mini-text {
		width: 60%;
  		margin-left: 20%;	
}
}

@media screen and (max-width: 768px){
	/* -------------------------------------------------- GENERIC ---------- */	
	/* Layout */
	body#fabric-e-stepcity,
	#fabric-e-stepcity #center_column{font-size: 0.9em !important;}
	

	/* Tags */
	#fabric-e-stepcity section,
	#fc-slider > .swiper-container{
		padding-top: 9em;
		padding-bottom: 9em;
	}
	
	/* Section content */
	#fabric-e-stepcity section .section-content{
		width: 80%;
		max-width: 475px;
	}
	
	/* --------------------------------- GENERIC - UNDERLINE ANIMATION */
	#fabric-e-stepcity .underline-animation:hover > span > span,
	#fabric-e-stepcity a:hover > .underline-animation > span > span{
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
	}
	#fabric-e-stepcity .underline-animation.tapping > span > span,
	#fabric-e-stepcity a.tapping > .underline-animation > span > span{
		transform: translateY(0.25em);
		-webkit-transform: translateY(0.25em);
		-moz-transform: translateY(0.25em);
	}
	#fabric-e-stepcity .underline-animation:hover > span:after,
	#fabric-e-stepcity a:hover > .underline-animation > span:after{
		opacity: 0.5;
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
	}
	#fabric-e-stepcity .underline-animation.tapping > span:after,
	#fabric-e-stepcity a.tapping > .underline-animation > span:after{
		opacity: 1;
		transform: translateY(-0.25em);
		-webkit-transform: translateY(-0.25em);
		-moz-transform: translateY(-0.25em);
	}
	
	/* -------------------------------------------------- SLIDER ---------- */
	#fc-slider .swiper-container{height: calc(100vh - 234px);}
	
	/* Info */
	#fc-slider .slider-info > article{
		max-width: 100%;
		text-align: center;
		margin: auto;
	}
	#fc-slider .slider-info > article > h1{text-align: center;}
	
	#fc-slider .slider-info > article > h1:after,
	#fc-slider .slider-info > article > a{display: none;}
	
	/* Controllers */
	#fc-slider .prev-button,
	#fc-slider .next-button{
		top: auto;
		bottom: 0;
		width: calc(50% - 5em);
		height: 10em;
		stroke: #fff;
	}
	#fc-slider .prev-button > svg,
	#fc-slider .next-button > svg{height: 25px;}
	
	/* Show more */
	#fc-slider .show-more:hover:after{
		animation: none;
		-webkit-animation: none;
		-moz-animation: none;
	}
	#fc-slider .show-more.tapping:after{
		transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
	}
	
	/* -------------------------------------------------- INTRO ---------- */
    #fc-intro img {
        display: block;
        margin: 0 auto -4em auto;
        padding-top: 4vh;
        padding-bottom: 5vh;
    }
	
	#fc-intro .info > p > a:hover{color: #c071ae;}
	#fc-intro .info > p > a.tapping{color: #bf50a6;}
	
	#fc-intro .info > p > a:hover:after{
		border-color: #dddde3;
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
	}
	#fc-intro .info > p > a.tapping:after{
		border-color: #c2c2c2;
		transform: translateY(-0.2em);
		-webkit-transform: translateY(-0.2em);
		-moz-transform: translateY(-0.2em);
	}
	
	#fc-intro .underline-animation{margin: 1em 4em 1em 0;}
	
	/* -------------------------------------------------- CITY ROADS ---------- */
	div#city-roads{background-size: 25% auto;}
	
	img.transition {
		width: 147%;
		overflow: auto;
		display: block;
		margin: 0 auto -4em auto;
		padding-bottom: 6vh;
		max-width: 1000px;
		margin-left: -20%;
	}
	
	/* -------------------------------------------------- FEATURES ---------- */
	/* --------------------------------- FEATURES - FEATURES MAP */
	/* Controllers */
	#fc-features .features-map > .controllers{margin: 3em 0;}
	
	#fc-features .features-map > .controllers > ul > li{
		opacity: 0;
		pointer-events: none;
		transition:
			border 0.3s ease,
			background-color 0.3s ease,
			opacity 0.3s ease,
			transform 0.3s ease;
		-webkit-transition:
			border 0.3s ease,
			background-color 0.3s ease,
			opacity 0.3s ease,
			transform 0.3s ease;
		-moz-transition:
			border 0.3s ease,
			background-color 0.3s ease,
			opacity 0.3s ease,
			transform 0.3s ease;
	}
	#fc-features .features-map > .controllers > ul > li.active{opacity: 1;}

	/* Info */
	#fc-features .features-map > .info{width: 100%}
	
	#fc-features .features-map > .info > .info-controllers > .prev-button > svg,
	#fc-features .features-map > .info > .info-controllers > .next-button > svg{
		transition: padding 0.2s ease;
		-webkit-transition: padding 0.2s ease;
		-moz-transition: padding 0.2s ease;
	}
	#fc-features .features-map > .info > .info-controllers > .prev-button:hover,
	#fc-features .features-map > .info > .info-controllers > .next-button:hover{padding: 0 1em;}
	#fc-features .features-map > .info > .info-controllers > .prev-button.tapping{padding-left: 0;}
	#fc-features .features-map > .info > .info-controllers > .next-button.tapping{padding-right: 0;}
	
	#fc-features .features-map > .info > .info-controllers > .prev-button > svg,
	#fc-features .features-map > .info > .info-controllers > .next-button > svg{
		transition: stroke 0.2s ease;
		-webkit-transition: stroke 0.2s ease;
		-moz-transition: stroke 0.2s ease;
	}
	#fc-features .features-map > .info > .info-controllers > .prev-button:hover > svg,
	#fc-features .features-map > .info > .info-controllers > .next-button:hover > svg{stroke: #424242;}
	#fc-features .features-map > .info > .info-controllers > .prev-button.tapping > svg,
	#fc-features .features-map > .info > .info-controllers > .next-button.tapping > svg{stroke: #fff;}
	
	/* -------------------------------------------------- CATALOG ---------- */
	/* --------------------------------- CATALOG - PRODUCT LIST */
	#fc-catalog .product-list{
		width: 80%;
		max-width: 475px;
	}
	#fc-catalog .product-list > .product{
		width: 100%;
		padding: 0;
	}
	#fc-catalog .product-list > .product > a{padding: 2em 0vw;}
	
	/* Image wrapper */
	#fc-catalog .product-list > .product > a:hover > .image-wrapper{
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
	}
	#fc-catalog .product-list > .product > a.tapping > .image-wrapper{
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
	}
	#fc-catalog .product-list > .product > a:hover > .image-wrapper > img:first-of-type{opacity: 1;}
	#fc-catalog .product-list > .product > a.tapping > .image-wrapper > img:first-of-type{opacity: 0;}
	
	#fc-catalog .product-list > .product > a:hover > .image-wrapper > img:last-of-type{
		opacity: 0;
		transition-delay: initial;
		-webkit-transition-delay: initial;
		-moz-transition-delay: initial;
	}
	#fc-catalog .product-list > .product > a.tapping > .image-wrapper > img:last-of-type{
		opacity: 1;
		transition-delay: 0.1s;
		-webkit-transition-delay: 0.1s;
		-moz-transition-delay: 0.1s;
	}
	
#fc-catalog > h2.dir-bottom {
	color: #fff;
    font-family: gotham-bold;
    font-size: 2.5em !important;
    display: inline;
    width: 100%;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    margin: 0px 0 0em 0;
    opacity: 1;
    line-height: 76px;
	}
	
	/* Product name */
	#fc-catalog .product-list > .product > a:hover > p.underline-animation > span:after{opacity: 0;}
	#fc-catalog .product-list > .product > a.tapping > p.underline-animation > span:after{opacity: 1;}
}
@media screen and (max-width: 480px){
	/* -------------------------------------------------- GENERIC ---------- */	
	/* Layout */
	body#fabric-e-stepcity,
	#fabric-e-stepcity #center_column{font-size: 0.9em !important;}
	
	/* Tags */
	#fabric-e-stepcity section,
	#fc-slider > .swiper-container{
		padding-top: 6em;
		padding-bottom: 6em;
	}
	
	/* Section content */
	#fabric-e-stepcity section .section-content{
		width: 100%;
		max-width: none;
		padding: 0 2em;
	}
	
	/* --------------------------------- GENERIC - TITLES */
	#fabric-e-stepcity section h1{font-size: 2.5em !important;}
	#fabric-e-stepcity section h2{font-size: 2em !important;}
	#fabric-e-stepcity section h3{font-size: 1.6em !important;}
	#fabric-e-stepcity section h4{font-size: 1.3em !important;}
	
	/* -------------------------------------------------- SLIDER ---------- */
	#fc-slider .swiper-container{height: calc(100vh - 223px);}
	
	/* -------------------------------------------------- INTRO ---------- */
	#fc-intro img{width: 100%; }
	
	#fc-intro img.mini-bike {
        width: 122%;
        overflow: auto;
        margin-left: -12%;
    }
	
	#fc-intro p.quote{font-size: 1.1em;}
	
	#fc-intro .underline-animation{
		width: 50%;
		float: left;
		font-size: 0.85em;
		margin: 1em 0;
	}
	#fc-intro > div > div > p {
       font-size: 1.2em !important;
	}
	#fc-intro > div > div > h2.mini-text {
		text-align: left;
	}
	
	/* -------------------------------------------------- FEATURES ---------- */
	
	div#city-roads {
    background-size: 28% auto;
}
	/* --------------------------------- FEATURES - FEATURES MAP */
	/* Controllers */
	#fc-features .features-map > .controllers{margin: 0px 0px 2em 0px;}
	
	/* -------------------------------------------------- CATALOG ---------- */
	/* --------------------------------- CATALOG - PRODUCT LIST */
	#fc-catalog .product-list{
		width: 100%;
		max-width: none;
		padding: 0 3em;
	}
	
	section#fc-gallery > img {
    width: 100%;
}

#fc-intro > div > div > a > span {
	display: inline-block;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
	color: rgba(193, 193, 193, 0.62);
    font-family: gotham-bold;
}

#fc-intro > div > div > a > span:after {
	content: '';
    display: block;
    border-bottom: 2px solid;
    opacity: 0.5;
    margin-top: 0.5em;
    font-family: Gotham-bold;
    line-height: initial;
    box-sizing: border-box;
    text-transform: uppercase;
}


#fc-intro > div > div > h2.step-text {
    color: #fff;
    font-family: gotham-bold;
    font-size: 2.5em !important;
    display: inline-block;
    width: 100%;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    margin: 30px 0 1em 0;
	
	
}
}


						<!----------------------------------------------------- CSS FABRICBIKE  --------------------------------------------------->

					/*************************** CSS PERSONALIZADO PARA FABRICBIKE mini ***************************/

.btn-mini {
    border: 2px solid #ea5b20;
    border-radius: 0px;
    padding: 21px 20px 11px 20px;
    letter-spacing: 0.1em;
    margin: 10px;
    color: #ea5b20;
    font-family: gotham-bold;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    font-size: 1em;
    bottom: 4em;
    text-transform: uppercase;
}


@media (min-width: 480px){
    #fc-intro > div > div > a > span.btn-mini {
        border: 2px solid;
        border-radius: 0px;
        padding: 22px 30px 12px 30px;
        margin: 10px;
        color: #5d5941;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        display: inline-block;
        font-size: 12px;
        bottom: 4em;
        text-transform: uppercase;
        border-radius: 30px;
    }
}

@media (max-width: 480px) { 
#fc-intro > div > img.mini-img {
		max-width: 190px !important;
}

#fc-intro > div > img.mini-logo {
		max-width: 80% !important;
		background-color: #ffffff00;
		margin-top: -180px !important;

}

    #fc-intro > div > div > p.mini-text {
        text-align: center;
        line-height: 1.7em;
        margin-bottom: 1.4em;
        font-size: 1.3em;
		text-align: left;
    }


    #fc-intro > div > div > a > span.btn-mini {
        border: 2px solid;
        border-radius: 0px;
        padding: 22px 30px 12px 30px;
        margin: 10px 40px;
        color: #5d5941;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        font-size: 12px;
        bottom: 4em;
        text-transform: uppercase;
        border-radius: 30px;
        justify-content: space-around;
    }
}

@media (min-width: 480px) { 
	#fc-intro > div > img.mini-img {
			max-width: 230px;
			background-color: #ffffff00;
	}

	#fc-intro > div > img.mini-logo {
			width: 90% !important;
			margin-top: -44px !important;
			background-color: #ffffff00;
	}

    #fc-intro > div > div > p.mini-text {
        text-align: center;
        color: #5d5941;
        line-height: 1.7em;
        margin-bottom: 1.4em;
        font-size: 1.3em;
    }

}

#fc-intro > div > div > a > span.btn-mini:after {
		display: none;
}

div#mini-roads{
	position: relative;
	z-index: 100;
	width: 100%;
	background: url(/themes/ayon/img/fabric-e-stepcity/pattern.png) repeat-x top #3abcd2;
	background-size: 20% auto;
	opacity: 1 !important;
	display: block;
	margin-top: 60px;
} 

#idTab15 > div.mini-roads {
    display: none;
}

#fc-intro > div > div > h2.mini-text {
    font-family: 'Gotham-Bold';
    display: inline-block;
    line-height: 1em;
    max-width: 700px;
    font-size: 44px;
	color: #797561;
}

@media (max-width: 768px){
    #fc-intro > div > div > h2.mini-text {
        font-size: 30px;
        width: 80%;
        margin-top: 30px;
    }
}


#idTab15 > div.mini-roads > img {
    position: relative;
    z-index: 100;
    width: 100%;
    background-size: 20% auto;
    opacity: 1 !important;
    display: block;
    margin-top: 10px;
    padding-bottom:6%;
}

@media (min-width: 768px){
#banner-1 {
	display: block;
}

#banner-2 {
	display: none;
}	
	
#banner-green-1 {
	display: block;
}

#banner-green-2 {
	display: none;
}	
}

@media (max-width: 768px){
#banner-1 {
	display: none;
}
#banner-2 {
	display: block;
}
	
#banner-green-1 {
	display: none;
}
#banner-green-2 {
	display: block;
}
	
}


#banner-1 > div {
	position: relative;
    text-align: center;
}

#banner-1 > div > div{
    position: absolute;
    bottom: 22%;
    left: 7%;
	text-align: left;
}

#banner-1 > div > div > p {
    text-align: left;
    color: #ffffff;
    line-height: 1.8em;
    letter-spacing: 0.0em;
    margin-bottom: 0.5em;
    font-size: 1.3em;
    padding: 0;
	width: 400px;
    margin-bottom: 25px;
}

#banner-1 > div > div > h3 {
	color: #fff;
    font-family: 'Gotham-bold';
    font-size: 40px !important;
    letter-spacing: -0.02em;
    line-height: 1em;
    width: 370px;
    text-align: left;
    margin: 20px 0px 0px 0;
}

#banner-1 > div > div > a {
    background-color: #fff;
    border-radius: 30px;
    padding: 17px 45px 12px 45px;
    letter-spacing: 0em;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    bottom: 4em;
    text-transform: uppercase;
}

#banner-2 > div {
	position: relative;
    text-align: center;
}

#banner-2 > div > div{
    position: absolute;
    top: 6%;
    left: 7%;
    text-align: left;
}

#banner-2 > div > div > p {
    color: #ffffff;
    line-height: 1.8em;
    letter-spacing: 0.0em;
    margin-bottom: 1.5em;
    font-size: 1.2em;
}

#banner-2 > div > div > h3 {
    color: #fff;
    font-family: 'Gotham-bold';
    font-size: 29px;
    line-height: 1.1em;
    width: 300px;
    text-align: left;
    margin: 0px 0px 10px 0;
}

#banner-2 > div > div > a {
    color: #333;
    line-height: 2.8em;
    letter-spacing: 0.0em;
    margin-bottom: 0.5em;
    font-size: 1em;
    padding: 18px 45px 16px 45px;
    background-color: #fff;
    border-radius: 30px;
    text-transform: uppercase;
}

span.btn-banner {
    font-family: 'Gotham-bold';
	font-weight: bold;
}


#banner-green-1 > div {
	position: relative;
    text-align: center;
}

#banner-green-1 > div > div{
    position: absolute;
    bottom: 22%;
    left: 12%;
    text-align: left;
}

#banner-green-1 > div > div > p {
    color: #ffffff;
    line-height: 1.4em;
    letter-spacing: 0.0em;
    font-size: 1.2em;
    font-family: 'Gotham-Light';
    width: 333px;
}

#banner-green-1 > div > div > h3 {
    color: #fff;
    margin-top: 24px !important;
    font-family: 'Gotham-bold';
    font-size: 37px;
    line-height: 1em;
    width: 355px;
    margin: 0px;
}

#banner-green-1 > div > div > a {
    background-color: #fff;
    border-radius: 30px;
    padding: 17px 45px 12px 45px;
    letter-spacing: 0em;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    bottom: 4em;
    text-transform: uppercase;
}

#banner-green-2 > div {
	position: relative;
    text-align: center;
}

#banner-green-2 > div > div {
    position: absolute;
    bottom: 7%;
    left: 8%;
    text-align: left;
}

#banner-green-2 > div > div > p {
    color: #ffffff;
    letter-spacing: 0.0em;
    font-size: 1.2em;
    line-height: 1.6em;
    margin-bottom: 30px;
    width: 90%;
}

#banner-green-2 > div > div > h3 {
    color: #fff;
    font-family: 'Gotham-bold';
    font-size: 30px;
    line-height: 1.1em;
    width: 320px;
    text-align: left;
    margin: 0px 0px 6px 0;
}

#banner-green-2 > div > div > a {
    color: #333;
    line-height: 2.8em;
    letter-spacing: 0.0em;
    margin-bottom: 0.5em;
    font-size: 1em;
    padding: 28px 50px 19px 50px;
    background-color: #fff;
    border-radius: 30px;
    text-transform: uppercase;
    font-family: 'Gotham-bold';
}

span.btn-banner-black {
    font-family: gotham-light;
	font-weight: bold;
	color: #fff;
}

p.mini-logo-green {
    width: 45px;
}
#banner-green-1 > div > div > p.mini-logo-green {
    width: 45px;
	
}

ul.conmutador {
    display: flex;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


p.btn-tutorial {
    position: relative;
    height: 50px;
    border-radius: 25px;
    width: 200px;
    margin: auto;
    color: #000;
    margin-bottom: 40px;
    margin-top: -25px;
    text-align: center;
    padding-top: 21px;
    font-size: 1.3em;
    font-family: gotham-book;
    text-decoration: none;
    border: 3px solid #000;
}