/* Grid elements base */

.gutter .port {
    max-width: math($(baseTemplateWidth) - 2*$(pagePadding), px);
	margin: auto;
}

.port {

}

.boldCell {
	
}

/* Divider */

.btDivider {
	border-bottom: 1px solid $(lightBorderColor);
}

/* Row and column */

.boldRow {
    display: block;
	margin: 0 -$(innerHorizontalPadding)px;
}

.btScrollInfoRow {
	position: absolute;
    bottom: 40px;
    width: 100%;
	.sIcon {
		margin-bottom: 5px !important;
	}
	/*.btIcoHolder:before {
		margin-bottom: 10px !important;
		font-size: 30px !important;
		line-height: 30px !important;
		height: 30px !important;
	}*/
}

.rowItem {
    padding: 0 $(innerHorizontalPadding)px;
}

.rowItemContent {
	position: relative;
}

.btDoubleRowPadding {
	.boldRow {
		display: block;
		margin: 0 -math( 2*$(innerHorizontalPadding), px );
	}

	.rowItem {
		padding: 0 math( 2*$(innerHorizontalPadding), px );
	}	
}

/* Vertical align should be removed om small screens. Otherwise it won't break into the new row  */

@media (min-width: 768px) {

    .boldRowInner.btTableRow {
        display: table;
		table-layout: fixed;
		width: 101%;
		margin: 0;
    }

	.wVariable .boldRowInner.btTableRow {
		margin: 0;
		width: 100%;
	}

	.wVariable .boldRowInner.btTableRow > .rowItem {
		padding: 0;
	}
	
	.btHalfPage .boldRowInner.btTableRow {
		width: 100%;
	}

    .boldRowInner.btTableRow > .rowItem {
        float: none;
		height: 100%;
        display: table-cell;

    }

    .boldRowInner.btTableRow .rowItem.btMiddleVertical {
        vertical-align: middle;
    }

    .boldRowInner.btTableRow .rowItem.btBottomVertical {
        vertical-align: bottom;
    }

	/* Cell border, removed on c */

	.rowItem.btLeftBorder {
		border-left: 1px solid $(lightBorderColor);
	}

	.rowItem.btLeftBorder {
		border-left: 1px solid $(lightBorderColor);
	}

	.rowItem.btRightBorder {
		border-right: 1px solid $(lightBorderColor);
	}

	:darkSkinSelector .rowItem.btRightBorder {
		border-right: 1px solid $(darkBorderColor);
	}

	:darkSkinSelector .rowItem.btLeftBorder {
		border-left: 1px solid $(darkBorderColor);
	}
}

/* Grid elements spacing */

.topExtraSmallSpaced {
    padding-top:  math($(innerVerticalPadding)/4, px);
}

.topSmallSpaced {
    padding-top: $(innerVerticalPadding)px;
}

.topSemiSpaced {
    padding-top: math(2*$(innerVerticalPadding), px);
}

.topSpaced {
    padding-top: math(4*$(innerVerticalPadding), px);
}

.topExtraSpaced {
    padding-top: math(8*$(innerVerticalPadding), px);
}

.bottomExtraSmallSpaced {
    padding-bottom:  math($(innerVerticalPadding)/4, px);
}

.bottomSmallSpaced {
    padding-bottom: $(innerVerticalPadding)px;
}
 
.bottomSemiSpaced {
    padding-bottom: math(2*$(innerVerticalPadding), px);
}

.bottomSpaced {
    padding-bottom: math(4*$(innerVerticalPadding), px);
}

.bottomExtraSpaced {
    padding-bottom: math(8*$(innerVerticalPadding), px);
}

/* Horizontal padding */

.rowItem.btDoublePadding .rowItemContent {
    padding: 0 math(2*$(innerHorizontalPadding), px);
}

.btTableRow .rowItem.btDoublePadding .rowItemContent {
    padding: 0 math(4*$(innerHorizontalPadding), px);
}

.rowItem.btNoPadding {
    padding: 0;
}

.rowItem.btNoPadding {
    padding: 0;
}

/* Text indent */

.btTextIndent .rowItemContent {
	padding: 0 math($(innerHorizontalPadding)*2, px);
}

.btTextIndent .rowItemContent :any(.btImage, .bpgPhoto) {
	margin: 0 -math($(innerHorizontalPadding)*2, px);
}

/* Highlighted section */

.btHighlight > .rowItemContent {
	border: 3px solid $(accentColor);
}



/* Helpers */

.boldRow:after, .btClear:after {
    content: " ";
    display: table;
    width: 100%;
    clear: both;
}

.btClear {
	clear: both;
}

.btTextLeft {
	text-align: left;
}

.btTextRight {
	text-align: right;
}

.btTextCenter {
	text-align: center;
}

.fullScreenHeight {
	height: 100vh;
	.port {
		height: 100%;
		width: 100%;
		display: table;
		table-layout: fixed;
	}
	.boldCell {
		height: 100%;
		width: 100%;
		display: table-cell;
	}
	.boldCellInner {
		display: block;
	}
}

.btMiddleVertical .boldCell {
	vertical-align: middle;
}

.btBottomVertical .boldCell {
	vertical-align: bottom;
}

.btGhost {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: all 500ms ease-out;
}

.btGhost.btRemoveGhost {
	transform: translateY(-100%) scale(0.7);
	opacity: 0;
}

.wBackground {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.wBackground.cover {
    background-size: cover;
}

.wBackground.contain {
    background-size: contain;
}

.boldSection.video {
	position: relative;
	overflow: hidden;
}

.boldSection.video video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: opacity 1000ms;
}

.boldSection.video.video_on video {
	opacity: 1;
}

/* Animated elements */

.btParallax, .boldthemes_parallax {
	transition-property: background-position;
	transition-duration: 0ms;
	transition-delay: 0ms;
	background-attachment: fixed;
}

.animate {
	transition: all 1000ms ease-out-expo 200ms;
}

.animate-fadein {
	opacity: 0;
	transform: scale(0.98);
}

.touch .animate-fadein {
	opacity: 1;
}

.animate-moveleft {
	transform: translateX(100px);
}

.animate-moveright {
	transform: translateX(-100px);
}

.animate-moveup {
	transform: translateY(100px);
}

.animate-movedown {
	transform: translateY(-100px);
}

.animated {
  opacity: 1;
  transform: translateY(0px) scale(1);
  transition: all 1s ease-out-expo 200ms;
}

@for i in range(0, 11) {
	body:not(.btHalfPage) .rowItem:nth-child(#(i)) {
		transition-delay: math(#(i)*200, ms);
	}
}