/*1.1 GENERAL STYLES*/
body,
button,
input,
select,
textarea {
	color: $color-body;
	font-family: $font-body;
	font-weight: 400;
	font-size: 15px; 
	line-height: 1.5;
	position: relative;
	background-color: $body-bg;
}

html, body {
	width: 100%;
	height: 100%;
}

/* 1.3. ANCHOR */

a {
    color: $color-body;
    text-decoration: none;

    &:hover{
    	color: $color_primary;
    	text-decoration: none;
    }
}

/* 1.4. HEADING & PARAGRAPH */
p{
	margin: 0 0 20px 0;
}
h1,
h2,
h3, 
h4, 
h5 {
	font-family: $font_heading;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 20px;
}

h1{
	font-size: 3.571em; //50px
	line-height: normal;
}
h2{
	font-size: 2.857em; // 40px
	line-height: normal;
}
h3{
	font-size: 1.714em; // 24px
	line-height: normal;
}
h4{
	font-size: 1.286em; // 18px
	line-height: normal;
}
h5{
	font-size: 14px;
	line-height: 22px;
}
h6{
	font-size: 13px;
}
strong, b{
	font-weight: 700;
}


ol{
	margin-left: 24px;	
}
 ul {
	list-style: initial;
    margin-left: 24px;	

    li{
    	margin: 8px 0;
    }
}

/* CUSTOM GLOBAL */
$content-padding: 80px;

.content-wrap {
    padding: $content-padding 0;
}
.content-wrap-60 {
    padding: 60px 0;
}
.content-wrap-40 {
    padding: 40px 0;
}
.spacer-content{
	height: $content-padding;
	@include clearfix;
}

.uk16{
	font-size: 16px;
}
.uk18{
	font-size: 18px;
}
.uk21{
	font-size: 21px;
}
.uk24{
	font-size: 24px;
}
.uk36{
	font-size: 36px;
}
.uk48{
	font-size: 48px;
}
.uk60{
	font-size: 60px;
}
.uk72{
	font-size: 72px;
}
.spacer-10{
	height: 10px;
	@include clearfix;
}
.spacer-30{
	height: 30px;
	@include clearfix;
}
.spacer-50{
	height: 50px;
	@include clearfix;
}
.spacer-70{
	height: 70px;
	@include clearfix;
}
.spacer-90{
	height: 90px;
	@include clearfix;
}
.spacer-110{
	height: 110px;
	@include clearfix;
}
.spacer-content{
	height: $content-padding;
	@include clearfix;
}
.section {
	position: relative;
}
.section-heading{
	font-size: 40px;
	line-height: 1em;
	margin-bottom: 20px;
	/*padding-top: 0; */
	margin-top: 0; 
	padding-bottom: 5px; 
	position: relative;
	color: $color-primary;
	
	&.light{
		color: $color_primary;
		span{
			color: $white;
		}
		&:after{
			background: $white;
		}
	}
	
	&.text-center{
		text-align: center;
		&:after{
			margin-left: auto;
			margin-right: auto;
		}
	}
	@media (max-width: 767px) {
		font-size: 32px;
 	}
}
.supheading{
	font-size: 24px;
	font-weight: 700;
	color: lighten($black, 20%);
	&:before, &:after{
		content: " - ";
	}
}
.subheading{
	margin-top: -20px;
	margin-bottom: 30px;
	color: darken($color-body, 20%);
	font-family: $font-secondary;
	font-size: 18px;
	&.text-center{
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
}
.title-heading{
	font-size: 24px;
	font-family: $font-heading;
	font-weight: 700;
}
.section-border {
    border-bottom: 1px solid lighten($color-body, 20%);
}
.font-primary{
	font-family: $font-primary;
}
.font-secondary{
	font-family: $font-secondary;
}
.bgi-cover-center{
	background-size: cover;
    background-position: center;
}

.bgi-cover-center{
	background-size: cover;
    background-position: center;
}
.bgi-cover-fixed{
	background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bgi-repeat{
	background-repeat: repeat;
}
.bgi-right{
    background-position: right;
    background-size: auto;
    background-repeat: no-repeat;
}
.bgi-left{
    background-position: left;
    background-size: auto;
    background-repeat: no-repeat;
}
.bgi-overlay{
	position: relative;
	background-position: center;
	&:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba($black, .5);
	}
}
blockquote{
    padding: 15px 20px;
    background-color: #f6f6f6;
    margin: 0 0 20px;
    border-left: 5px solid $color-primary;
    font-style: italic;
}
blockquote.quote{
    padding: 15px 0;
    background-color: transparent;
    margin: 0 0 20px;
    border-left: 0;
    font-family: $font-secondary;
    font-style: italic;
    font-size: 24px;
    color: $white;
    .blockquote-footer{
       color: $color-primary;
    }
    cite{
    	display: block;
    	font-family: $font-primary;
    	font-size: 15px;
    	font-style: normal;
    	color: $white;
    }
}
@media (max-width: 767px) {
	.bgi-hide-xs{
		background-image: none !important;
	}
}


/* OWL */
.owl-theme {
	.owl-dots{
		.owl-dot {
			span {
			    width: 7px;
			    height: 7px;
		        background: gray;
		        margin: 5px 3px;
			}
			&.active{
				span {
					width: 40px;
					background-color: $color-primary;
				} 
			} 
			&:hover{
				span {
					background-color: $color-primary;
				}
			}
		}
	} 
	.owl-controls {
	    margin-top: 50px;
	}
}
.owl-light {
	.owl-dots{
		.owl-dot {
			span {
			    width: 7px;
			    height: 7px;
		        background: $white;
		        margin: 5px 3px;
			}
			&.active{
				span {
					width: 40px;
					background-color: $color-secondary;
				} 
			} 
			&:hover{
				span {
					background-color: $color-secondary;
				}
			}
		}
	} 
	.owl-controls {
	    margin-top: 50px;
	}
}

/* END OWL */

.font-primary{
	font-family: $font_primary;
}
.bg-primary{
	background-color: $color_primary !important;
}
.bg-secondary{
	background-color: $color-secondary !important;
}
.bg-tertiary{
	background-color: $color-tertiary !important;
}
.bg-gray{
	background-color: #222222;
}

.bg-gray-light{
	background-color: #f9f9f9;
}
.bg-overlay-primary{
	position: relative;
	&:before{
	    content: '';
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    background-color: $color-primary;
	    opacity: .8;
    }
}
.bg-overlay-secondary{
	position: relative;
	&:before{
	    content: '';
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    background-color: $color-secondary;
	    opacity: .6;
    }
}

.lh-1{
	line-height: 1.3;
}

.text-primary{
	color: $color_primary !important;
	a{
		color: $color-primary;
		&:hover{
			color: $color-body;
		}
	}
}
.text-secondary{
	color: $color-secondary !important;
}

.text-white{
	a{
		color: $white;
	}
}
.text-black{
	color: $black !important;
	a{
		color: $black;
	}
}

.pos-relative {
    position: relative;
}

.banner-page{
	display: block;
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	position: relative;
    background-position: center;
	&:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba($black, .4);
	}
	.content-wrap{
		padding: 60px 0;
	}
	.title-page{
		text-align: center;
		@extend h2;
		margin-bottom: 0;
		color: $white;
	}
	.breadcrumb-container{
		background-color: transparent;
	}
	.breadcrumb{
		padding: 0;
		margin: 0;
		text-align: center;
	    background-color: transparent;
	    font-size: 13px;
	    font-weight: 400;
	    color: $white;
    	> .active,
	    a{
	    	color: white;
	    	&:hover{
	    		color: $color-primary;
	    	}
	    }
	}

}
.overlap{
	background-color: $white;
	margin-top: -180px;
	margin-bottom: -50px;
	position: relative;
	z-index: 2;
	@media (max-width: 767px) {
		margin-top: 0;
	}
}
.gutter-5{
  	margin-right: 0;
  	margin-left: 0;
	> [class^="col-"],
	> [class*=" col-"],
	[class*='col-'],
	[class*=" col-"]{
	  padding-right:5px;
	  padding-left:5px;
	}
}

.pagination{
	margin-left: 0;
	.page-item{
		.page-link{
			@include border-radius(10px);
			padding: 15px 20px;
			margin-right: 5px;
			margin-bottom: 5px;
			color: $color-body;
			display: inline-block;
			border-color: 1px solid lighten($color-body, 30%);
			background: $white;
			&:hover,
			&.active{
				color: $white;
				background: $color-primary;
			}
		}
		&:first-child, &:last-child{
			.page-link{
				@include border-radius(10px);
				
			}
		}
		&.active{
			.page-link{
				color: $white;
				background: $color-primary;
				border-color: $color-primary;
			}
		}
	}
}

.p-check{
	padding-left: 40px;
	position: relative;
    margin-bottom: 0.25rem;
    font-size: 18px;
	&:before{
		content: "\f00c";
		font-family: $font-icon;
		padding-top: 2px;
		position: absolute;
		color: $color-tertiary;
		left: 0;
		width: 30px;
	    height: 30px;
	    background: $white;
	    @include border-radius(50%);
	    text-align: center;
	}
}