@import "../variables";
@import "../mixins";


/**
Helper Class
*/
.hidden {
	display: none;
}
.theme-color{
	color: $theme-color;
}
.poss-relative{
	position: relative;
}
a{
	transition: 0.3s;
}
img {
 	max-width: 100%;
}
ul{
	list-style: none;
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible {
	visibility: hidden;
}
.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
.clearfix:after {
	clear: both;
}

ul{
	list-style: none;
	padding-left: 0;
}
p{
	color: #777777;
}

// scrollUp

a#scrollUp {
    background: #ffffff;
    color: #303030;
    bottom: 40px;
    right: 40px;
    border-radius: 100px;
    height: 45px;
    width: 45px;
    font-size: 25px;
    text-align: center;
    padding: 9px 0;
    box-shadow: 0 0 15px 0px rgba(50,50,50,0.2);
    &:hover{
    	background: $theme-color;
    	color: #fff;
    }
}


.pt--180{
	padding-top: 180px;
}

/* Define Colors */
.color--theme{
	color: $theme-color;
}
.color--light{
	color: #999999;
}
.color--dark{
	color: #333333;
}
.color--black{
	color: #000000;
}
.color--white{
	color: #ffffff;
}
/* Background Color */
.bg--theme{
	background: $theme-color;
}
.bg--light{
	background: #999999;
}
.bg--dark{
	background: #333333;
}
.bg--black{
	background: #000000;
}
.bg--white{
	background: #ffffff;
}
.bg__cat--1{
	background: #0095e8;
}
.bg__cat--2{
	background: #f6f6f6;
}
.bg__cat--3{
	background: #2f85d8;
}


.bg__cat--4{
	background: #b1c642;
}
.bg__cat--5{
	background: #ffc10d;
}
.bg__cat--6{
	background: #ff5d52;
}
.bg__cat--7{
	background: #68b9d8;
}
.bg__cat--8{
	background: #292929;
}
.bg__cat--9{
	background: #111111;
}
.bg__cat--10{
	background: #fe5629;
}







/* Background Image */
@for $i from 1 through 30{
	.bg-image--#{$i}{
		background-image: url(images/bg/#{$i}.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
}

/* Background Image */
@for $i from 1 through 10{
	.bg-pngimage--#{$i}{
		background-image: url(images/bg-png/#{$i}.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
}


/* Separator */

@for $i from 3 through 10{
	.mt--#{$i * 10}{
		margin-top: #{$i * 10}px;
	}
}


@for $i from 3 through 15{
	.pb--#{$i * 10}{
		padding-bottom: #{$i * 10}px;
	}
}


/* Font weights */
.fw--900{
	font-weight: 900;
}
.fw--700{
	font-weight: 700;
}
.fw--600{
	font-weight: 600;
}
.fw--500{
	font-weight: 500;
}
.fw--400{
	font-weight: 400;
}
.fw--300{
	font-weight: 300;
}

/* Text specialized */
.text--italic{
	font-style: italic;
}
.text--normal{
	font-style: normal;
}
.text--underline{
	font-style: underline;
}

/* Font specialized */
.body--font{
	font-family: $body-font;
}
.heading--font{
	font-family: $heading-font;
}

/* Height and width */
.fullscreen{
	min-height: 100vh;
	width: 100%;
}
.fixed--height{
	height: 730px;
	width: 100%;
}
.w--100{
	width: 100%;
}
.w--75{
	width: 75%;
}
.w--50{
	width: 50%;
}
.w--33{
	width: 33.33%;
}
.w--25{
	width: 25%;
}
.w--10{
	width: 10%;
}

.h--100{
	height: 100%;
}
.h--75{
	height: 75%;
}
.h--50{
	height: 50%;
}
.h--25{
	height:25%;
}
.h--33{
	height:33.33%;
}
.h--10{
	height:10%;
}

/* Section padding */
.section-padding--xlg{
	padding: 180px 0;
}
.section--padding--xlg--top{
	padding-top: 190px;
}





.section-padding--lg{
	padding: 150px 0;
}
.section-lg-padding--top{
	padding-top: 150px;
}
.section-padding--bottom{
	padding-bottom: 150px;
}



.section-padding--md{
	padding: 140px 0;
}

.section-padding--md--top{
	padding-top: 140px;
}

.section-padding--md--bottom{
	padding-bottom: 130px;
}





.section-md-padding--bottom{
	padding-bottom: 140px;
}



.section-padding--sm{
	padding: 100px 0;
}
.section-padding--xs{
	padding: 80px 0;
}



@media #{$md-layout}{
	.section-padding--xlg{
		padding: 120px 0;
	}
	.section-padding--top{
		padding-top: 150px;
	}
	.section-padding--bottom{
		padding-top: 100px;
	}
	.section-padding--lg{
		padding: 100px 0;
	}
	.section-padding--md{
		padding: 85px 0;
	}
	.section-padding--sm{
		padding: 70px 0;
	}
	.section-padding--xs{
		padding: 60px 0;
	}
	.md-mt-40{
		margin-top: 40px;
	}
	.md-mt-60{
		margin-top: 60px;
	}






}

@media #{$sm-layout}{
	.section-padding--xlg{
		padding: 90px 0;
	}
	.section-padding--lg{
		padding: 70px 0;
	}
	.section-padding--md{
		padding: 60px 0;
	}
	.section-padding--sm{
		padding: 50px 0;
	}
	.section-padding--xs{
		padding: 50px 0;
	}
	.sm-mt-40{
		margin-top:40px;
	}
	.sm-mt-60{
		margin-top:60px;
	}
	
}

@media #{$xs-layout}{

.xs-mt-60{
	margin-top: 60px;
}
.xs-mt-40{
	margin-top: 40px;
}
.xs-mt-30{
	margin-top: 30px;
}
.xs-mt-60{
	margin-top: 60px;
}


}

@media #{$xxs-layout}{

.xxs-mt-60{
	margin-top: 60px;
}

.xxs-mt-30{
	margin-top: 30px;
}


}











/* Overlay styles */
[data-overlay], [data-black-overlay]{
	position: relative;
}
[data-overlay] > div, [data-overlay] > *, [data-black-overlay] > div, [data-black-overlay] > *{
	position: relative;
	z-index: 2;
}
[data-overlay]:before, [data-black-overlay]:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}
[data-overlay]:before{
	background-color: $theme-color;
}
[data-black-overlay]:before{
	background-color: #000000;
}
@for $i from 1 through 10{
	[data-overlay="#{$i}"]:before, [data-black-overlay="#{$i}"]:before{
		opacity: #{$i * 0.10};
	}
}