.col5{position: relative;width: 100%;min-height: 1px;padding-right: 15px;padding-left: 15px;}

@media (max-width: 1280px) {

}
@media (min-width: 1171px) {
	.indicador{ margin-bottom: -120px; }

}
@media (min-width: 992px) { 
	body{ padding-left: calc(25% + 1px);}
	.navbar{ position: relative; padding: 20px 20px 20px 0}



	.navbar.scrolled{ width: 20%; height: 100vh; position: fixed; z-index: 999; left: 0; top: 0; padding: 45px 15px; text-align: center !important; background-color: #000; display: block;}
	.navbar:not(.scrolled) .c-bg-black{ width: 20%; height: 100vh; position: fixed; z-index: 999; left: 0; top: 0; padding: 45px 15px; text-align: center }


		.navbar .c-bg-black .navbar-brand{max-width: 152px; padding: 15px 0 15px 0; margin: 0px auto}
		.navbar .c-bg-black .bienvenidos{font-size: 13px; font-weight: 300; text-transform: uppercase; color: #fff; transform: rotate(-90deg); display: block; margin: 150px auto 0;letter-spacing: 5px; }
			.navbar.scrolled  .bienvenidos{opacity: 0}
			.navbar.scrolled li a{ color: #fff; }

	.navbar.scrolled #nkNav {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position: relative; margin-top: 110vh; opacity: 0;}
		.navbar.scrolled #nkNav{ margin-top: -110px; opacity: 1;margin-top: -110px; }

		.navbar.scrolled .nav-item{  display: block; width: 100%; text-align: center;}
		.navbar.scrolled navbar-expand-lg .navbar-nav .nav-link {  color: #fff; text-transform: uppercase; font-size: 18px; position: relative; line-height: 250%; display: block; }


	.navbar:not(.scrolled) .nav-link{ padding-right: 1.5rem; margin-right: 1.5rem; padding-left: 0rem; color: #000; text-transform: uppercase; font-size: 12px; position: relative;}
		.navbar:not(.scrolled) .nav-link::after {content: "/"; position: absolute; right:0; color: #000}
		.navbar:not(.scrolled) .nav-item:nth-child(3) .nav-link::after {content: "";}

	.navbar:not(.scrolled) li.social{ display:block;float:right; margin: 0 0 0 auto}
		.navbar:not(.scrolled) .social a{  }
		 
		 .navbar.scrolled li.social{ text-align: center; width: 100%}
		 .navbar.scrolled li.social .sigue{display: none;}
		 
	#intro,.overflow{ overflow: hidden }
	.introimg,.itemheader{ position: absolute; top: 0; right: 0; width: 65%; height: auto; }
	.indicador{ margin-bottom: -9vw;}
	.more{ width: 32px; height: 32px; margin: 30px auto; display: block; background: url(../images/more_icon.png) top left no-repeat;}

	
}
@media (max-width: 991px) {
	body{ padding-top: 185px;  max-width: 100vw; overflow-x:hidden }
	header{ position: fixed; top: 0; left:0; z-index: 999; width: 100%; max-width: 100vw  }
	.navbar{ position: relative; padding: 0 15px; background-color: #000; text-align: center;}
	.navbar .c-bg-black{ width: 100%; text-align: center; position: relative; z-index: 999; text-align: center;}
	.navbar .social{ text-align: center;}
	
	#nkNav {position: fixed;top: 150px;left: 0;z-index: 9;width: 100vw;height: 100vh;padding: 40px 0 0 0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;-webkit-box-shadow: 10px 0 4px 0 rgba(0,0,0,0.15);box-shadow: 10px 0 4px 0 rgba(0,0,0,0.15); background-color: #000; max-width: 100vw;}
	.navbar.scrolled #nkNav.show{ top: 110px;}
		#nkNav:not(.show) {top: -100vh;display: block; max-width: 100vw;}

		.navbar .c-bg-black .navbar-brand{width: 100%; padding: 15px 0 15px 0; margin: 0px auto; float: none; text-align: center;}
			.navbar.scrolled .navbar-brand{ width: 160px; float: left;}
		.navbar .navbar-toggler{width: 60px; height: auto; text-align: center;}
			.navbar.scrolled .navbar-toggler{width: 60px; float: right; margin: 40px 0;}

		.navbar .navbar-toggler .icon-bar{width: 100%; height: 3px;background-color: #fff; display: block; margin: 8px auto !important;border-radius: 1px; transition: all 0.2s;}

			.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform: rotate(45deg); transform-origin: 55% 0px; width: 40px; }
			.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){transform: rotate(-45deg);transform-origin: 10% -90%; width: 40px;}
			.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){opacity: 0}

			.navbar .c-bg-black .navbar-brand img{max-width: 152px;width: 100%; height: auto; }
				.navbar.scrolled .c-bg-black .navbar-brand>img{max-width: 120px;}


			/*.navbar .navbar-toggler {float: right; width: 74px; margin: 25px 15px}
			.navbar.scrolled .navbar-toggler .navbar-toggler-icon {width: 50px;height: 34px; background-size:50px 34px; }
			*/



		.navbar .c-bg-black .bienvenidos{display:none;}
	.navbar-expand-lg .navbar-nav .nav-link {  color: #fff; text-transform: uppercase; font-size: 18px; position: relative; line-height: 250%}
	.navbar-collapse{ padding: 30px 0 40px}
	.navbar .social span,
	.navbar .social a {color: #fff;}

	#intro{ overflow: hidden }
	.introimg{ position: absolute; top: 0; right: 0; width: 75%; height: auto; }
	
	.product{ overflow: hidden; position: relative }
	.caption{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10%; display: flex; align-items:center; opacity:0; background: rgba(0,0,0,0.5)}	
		.caption.active{opacity:1;}	
	.product .title{ padding: 0.75rem 1.5rem; color: #fff; position: relative; line-height: 36px}
	/*.product .title::after{ position: absolute; width: 32px; height: 32px; right: 8px; top: 8px; background: url(../images/more_icon.png) top right no-repeat; content: "";}*/
	.more{ width: 32px; height: 32px; display: block; background: url(../images/more_icon.png) top right no-repeat; float: right; z-index: 2;-webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;}
	.more.active{ transform: rotate(45deg); }
	.full-width {padding: 2rem 0;}
	footer{ padding: 0 15px; }
	/*footer .col-lg-6 p{ padding-right: 15px; }*/
}
@media (min-width: 768px){

}
/* SMALL 768 */
@media (max-width: 767px) {
	.full-width {padding: 1rem 0;}


}
@media (max-width: 576px) {		

}

@media (max-width: 480px) {

}
@media (max-width: 360px) {
	footer .col-lg-2.order-last{padding-left: 0;}	
}
.fw100{ font-weight: 100;}
.fw300{ font-weight: 300;}
.fw400{ font-weight: 400;}
.fw800,strong{ font-weight: 800;}

/* font-sizes */

.fs72{ font-size: calc(36px + (72 - 36) * ((100vw - 300px) / (1600 - 300)));}
.fs68{ font-size: calc(34px + (68 - 34) * ((100vw - 300px) / (1600 - 300)));}
.fs64{ font-size: calc(32px + (64 - 32) * ((100vw - 300px) / (1600 - 300)));}
.fs60{ font-size: calc(30px + (60 - 30) * ((100vw - 300px) / (1600 - 300)));}
.fs48{ font-size: calc(26px + (46 - 26) * ((100vw - 300px) / (1600 - 300)));}

.fs46{ font-size: calc(24px + (46 - 24) * ((100vw - 300px) / (1600 - 300)));}

.fs42{ font-size: calc(24px + (42 - 24) * ((100vw - 300px) / (1600 - 300)));}
.fs40{ font-size: calc(24px + (40 - 24) * ((100vw - 300px) / (1600 - 300)));}
.fs38{ font-size: calc(22px + (38 - 22) * ((100vw - 300px) / (1600 - 300)));}
.fs36{ font-size: calc(22px + (36 - 22) * ((100vw - 300px) / (1600 - 300)));}
.fs32{ font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (1600 - 300)));}
.fs28{ font-size: calc(16px + (28 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs27{ font-size: calc(16px + (27 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs26{ font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs24{ font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs22{ font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs20{ font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs18{ font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));}
.fs16{ font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));}
.fs15{ font-size: calc(11px + (15 - 11) * ((100vw - 300px) / (1600 - 300)));}
.fs14{ font-size: 14px;}
.fs13{ font-size: 13px;}
.fs12{ font-size: 12px;}
.fs11{ font-size: 11px;}

.lh180{ line-height: 180%;}
.lh150{ line-height: 150%;}
.lh130{ line-height: 130%;}
.lh125{ line-height: 125%;}
.lh120{ line-height: 120%;}
.lh110{ line-height: 110%;}
.lh100{ line-height: 100%;}
.lh90{ line-height: 90%;}
.lh80{ line-height: 80%;}

