/* 
	TEXT
*/

/* Text Size */
.fs-6, .fs-6 * { font-size: 3.00rem !important; }
.fs-5, .fs-5 * { font-size: 2.00rem !important; }
.fs-4, .fs-4 * { font-size: 1.75rem !important; }
.fs-3, .fs-3 * { font-size: 1.50rem !important; }
.fs-2, .fs-2 * { font-size: 1.25rem !important; }
.fs-1, .fs-1 * { font-size: 1.10rem !important; }
.fs-0, .fs-0 * { font-size: 1.00rem !important; }
.fs-n1, .fs-n1 * { font-size: .9rem !important; }
.fs-n2, .fs-n2 * { font-size: .75rem !important; }
.fs-n3, .fs-n3 * { font-size: .50rem !important; }

/* Text Weight */
.fw-100, .fw-lighter { font-weight:100 !important; }
.fw-200, .fw-light { font-weight:200 !important; }
.fw-300, .fw-normal { font-weight:300 !important; }
.fw-400 { font-weight:400 !important; }
.fw-500, .fw-bold { font-weight:500 !important; }
.fw-600 { font-weight:600 !important; }
.fw-700, .fw-bolder { font-weight:700 !important; }
.fw-800 { font-weight:800 !important; }
.fw-900 { font-weight:900 !important; }


/* Text color */
.all-white, .all-white * { color:#FFF !important; }
.all-black, .all-black * { color:#000 !important; }

/* Text others */
.text-indent-0 { text-indent: 0; }
.text-indent, .text-indent-1 { text-indent: 1rem; }
.text-indent-1 { text-indent: 1.5rem; }
.text-indent-2 { text-indent: 2rem; }
.text-drop-cap:first-letter { float: left; font-size: 270%; line-height: 1; margin: .02em .25em 0 0; text-indent:0; transform: translateY(-1rem); }

/* Text Lines */
[class*="lines-"] { 
	display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.lines-1 { -webkit-line-clamp: 1; }
.lines-2 { -webkit-line-clamp: 2; }
.lines-3 { -webkit-line-clamp: 3; }
.lines-4 { -webkit-line-clamp: 4; }
.lines-5 { -webkit-line-clamp: 5; }

/* Text Columns */
@media screen and (min-width: 800px) {
	[class*="columns-"] { 
		padding: 15px;
	   -webkit-column-gap: 30px; -moz-column-gap: 40px; column-gap: 40px;
	   -webkit-column-rule: 1px solid #CCC; -moz-column-rule: 1px solid #CCC; column-rule: 1px solid #CCC;
	}
	.columns-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
	.columns-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}

/*
	POSITIONING & SIZING
*/

/* Absolute position */
[class*="z-"] { position: absolute; z-index:1; }
[class*="z-1"] { z-index:99; }
[class*="z-2"] { z-index:999; }
[class*="z-3"] { z-index:9999; }
[class*="z-over"] { z-index:99999; }
[class*="z-under"] { z-index:-1; }
[class*="abs-"] { position: absolute; }
[class*="abs-top"] { top:0; }
[class*="abs-top-center"] { top:0; left:50%; transform: translateX(-50%); }
[class*="abs-top-right"] { top:0; right:0; }
[class*="abs-bottom"] { bottom:0; }
[class*="abs-bottom-center"] { bottom:0; left:50%; transform: translateX(-50%); }
[class*="abs-bottom-right"] { bottom:0; right:0; }
[class*="abs-center"] { left:50%; top:50%; transform: translate(-50%, -50%); }

.translate-up-25 { transform: translateY(-25%); }
.translate-up-50 { transform: translateY(-50%); }
.translate-up-100 { transform: translateY(-100%); }
.translate-left-25 { transform: translateX(-25%); }
.translate-left-50 { transform: translateX(-50%); }
.translate-left-100 { transform: translateX(-100%); }
.translate-right-25 { transform: translateX(25%); }
.translate-right-50 { transform: translateX(50%); }
.translate-right-100 { transform: translateX(100%); }
.translate-centered { position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); }


/* Aspect Ratio */
[class*="ratio-"] { display:block; position: relative; width: 100%; padding:0; }
[class*="ratio-"] > div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; }
[class*="ratio-1-1"] { padding-top:100%; }
[class*="ratio-2-1"] { padding-top:50%; }
[class*="ratio-3-2"] { padding-top:66.66%; }
[class*="ratio-4-3"] { padding-top:75%; }
[class*="ratio-16-9"] { padding-top:56.25%; }
[class*="ratio-1-2"] { padding-top:200%; }
[class*="ratio-2-3"] { padding-top:150%; }
[class*="ratio-3-4"] { padding-top:133.33%; }
[class*="ratio-"][class*="-cover"] > *:first-child,
[class*="ratio-"][class*="-fit"] > *:first-child,
[class*="ratio-"][class*="-center"] > *:first-child
	{ position: absolute; width:100%; height:100%; top:0; object-fit: cover; }
[class*="ratio-"][class*="-cover"] > *:first-child { object-fit: cover; }
[class*="ratio-"][class*="-fit"] > *:first-child { object-fit: contain; }
[class*="ratio-"][class*="-center"] > *:first-child { object-fit: none; }

/* Fixed Height */
[class*="height-250"] { height:250px !important; overflow:hidden; position:relative; }
[class*="height-300"] { height:300px !important; overflow:hidden; position:relative; }
[class*="height-350"] { height:350px !important; overflow:hidden; position:relative; }
[class*="height-400"] { height:400px !important; overflow:hidden; position:relative; }
[class*="height-450"] { height:450px !important; overflow:hidden; position:relative; }
[class*="height-500"] { height:500px !important; overflow:hidden; position:relative; }
[class*="height-600"] { height:500px !important; overflow:hidden; position:relative; }
[class*="height-700"] { height:500px !important; overflow:hidden; position:relative; }

/*
	EFFECTS
*/

/* Blur Filter */
.blur-1 { filter: blur(1px); }
.blur-2 { filter: blur(2px); }
.blur-3 { filter: blur(4px); }
.blur-4 { filter: blur(8px); }

/* Grey scale */
.grey-scale-25 { filter: grayscale(25%); }
.grey-scale-50 { filter: grayscale(50%); }
.grey-scale-75 { filter: grayscale(75%); }
.grey-scale, .grey-scale-100 { filter: grayscale(100%); }

/* Opacity */
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.50; }
.opacity-60 { opacity: 0.60; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }
.opacity-100 { opacity: 1; }

/* Black Overlay */
[class*="overlay-"] { position:relative; }
[class*="overlay-"]:after { content: ""; position:absolute; top:0; left:0; right:0; bottom:0; }
[class*="overlay-flat"]:after { background: #000000; }
[class*="overlay-full"]:after { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}
[class*="overlay-half"]:after { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}
[class*="overlay-"][class*="-10"]:after { opacity: .1; }
[class*="overlay-"][class*="-20"]:after { opacity: .2; }
[class*="overlay-"][class*="-30"]:after { opacity: .3; }
[class*="overlay-"][class*="-40"]:after { opacity: .4; }
[class*="overlay-"][class*="-50"]:after { opacity: .5; }
[class*="overlay-"][class*="-60"]:after { opacity: .6; }
[class*="overlay-"][class*="-70"]:after { opacity: .7; }
[class*="overlay-"][class*="-80"]:after { opacity: .8; }
[class*="overlay-"][class*="-90"]:after { opacity: .9; }

/* Background */
.bg-black-10 { background: rgba(0,0,0,.1); }
.bg-black-20 { background: rgba(0,0,0,.2); }
.bg-black-25 { background: rgba(0,0,0,.25); }
.bg-black-30 { background: rgba(0,0,0,.3); }
.bg-black-40 { background: rgba(0,0,0,.4); }
.bg-black-50 { background: rgba(0,0,0,.5); }
.bg-black-60 { background: rgba(0,0,0,.6); }
.bg-black-70 { background: rgba(0,0,0,.7); }
.bg-black-75 { background: rgba(0,0,0,.75); }
.bg-black-80 { background: rgba(0,0,0,.8); }
.bg-black-90 { background: rgba(0,0,0,.9); }
.bg-white-10 { background: rgba(255,255,255,.1); }
.bg-white-20 { background: rgba(255,255,255,.2); }
.bg-white-25 { background: rgba(255,255,255,.25); }
.bg-white-30 { background: rgba(255,255,255,.3); }
.bg-white-40 { background: rgba(255,255,255,.4); }
.bg-white-50 { background: rgba(255,255,255,.5); }
.bg-white-60 { background: rgba(255,255,255,.6); }
.bg-white-70 { background: rgba(255,255,255,.7); }
.bg-white-75 { background: rgba(255,255,255,.75); }
.bg-white-80 { background: rgba(255,255,255,.8); }
.bg-white-90 { background: rgba(255,255,255,.9); }



/*
	BREADCRUMBS
	<div class="bc">
		<ul>
			<li><a href="#1">One</a></li>
			<li><a href="#2">Two</a></li>
			<li><a href="#3">Three</a></li>
		</ul>
	</div>
*/

.bc { }
.bc ul { list-style: none; display: inline-table; }
.bc ul li { display: inline-block;  }
.bc ul li a { display: block; float: left; text-align: center; position: relative; margin: 0 10px 0 0; 
	height: 36px; line-height:36px; background: navy; padding: 0 20px 0 30px; color: #fff; text-decoration:none;
}
.bc ul li a:after {
	content: ""; position: absolute; right: -18px; top: 0; z-index: 1; /* 18 = height 36 / 2 */
	border-top: 18px solid transparent; border-bottom: 18px solid transparent; 
	border-left: 18px solid navy;
}
.bc ul li a:before {
	content: ""; position: absolute; left: 0; top: 0;
	border-top: 18px solid transparent; border-bottom: 18px solid transparent;
	border-left: 18px solid #FFF; /* background color */
}
.bc ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.bc ul li:first-child a:before { display: none; }
.bc ul li:last-child a { 
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
.bc ul li:last-child a:after { display: none; }
.bc ul li a:hover { background: red; }
.bc ul li a:hover:after { border-left-color: red; }