/* ========== Default Variables, Classes and Uses ========== */

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap'); */

/* Font Family Styles */
@font-face{
	font-family: 'font-regular';
	src: url(../web-fonts/OpenSans-Regular.ttf);
}

@font-face{
	font-family: 'font-semi';
	src: url(../web-fonts/OpenSans-SemiBold.ttf);
}

@font-face{
	font-family: 'font-bold';
	src: url(../web-fonts/OpenSans-Bold.ttf);
}

@font-face{
	font-family: 'font-ex-bold';
	src: url(../web-fonts/OpenSans-ExtraBold.ttf);
}

@font-face{
	font-family: 'font-light';
	src: url(../web-fonts/OpenSans-Light.ttf);
}

@font-face{
	font-family: 'font-alternate';
	src: url(../web-fonts/MyriadPro-Regular.otf);
}


:root{
	
	/* Font & Background Colors Variables */
	--basic: #fff;
	--darker: #000;
	--dark: #232323;
	--dim: #323943;
	--info: #46b8da;
	--lighter: #eee;
	--light: #d7d7d7;
	--shadow: #cecece;
	--bordered: #929292;
	--washout: #666;
	--highlight: #4f4f4f;
	--warning: #f0ad4e;
	--success: #5cb85c;
	--primary: #e14920;
	--secondary: #acb0b3;
	--alternate: #9dba58;
	
	/* Font Size Variables */
	--main-heading: 68px;
	--sub-heading: 64px;
	--title-heading: 34px;
	--ex-large-size: 28px;
	--largest-size: 26px;
	--larger-size: 24px;
	--caption-size: 21px;
	--large-size: 18px;
	--alternate-size: 15px;
	--default-size: 14px;
	--small-size: 13px;
	--smaller-size:12px;
	--smallest-size:10px;
	
}

/* ========== General Pages Styles & Settings ========== */
.margin-top-10 { margin-top:10px; }
.margin-top-20 { margin-top:20px; }
.margin-top-30 { margin-top:30px; }
.margin-top-40 { margin-top:40px; }
.margin-top-50 { margin-top:50px; }
.margin-top-60 { margin-top:60px; }
.margin-top-70 { margin-top:70px; }
.margin-top-80 { margin-top:80px; }
.margin-top-90 { margin-top:90px; }
.margin-top-100 { margin-top:100px; }
.margin-top-120 { margin-top:120px; }
.margin-top-150 { margin-top:150px; }
.margin-top-180 { margin-top:180px; }
.margin-top-200 { margin-top:200px; }

.margin-bottom-10 { margin-bottom:10px; }
.margin-bottom-20 { margin-bottom:20px; }
.margin-bottom-30 { margin-bottom:30px; }
.margin-bottom-50 { margin-bottom:50px; }
.margin-bottom-60 { margin-bottom:60px; }
.margin-bottom-80 { margin-bottom:80px; }
.margin-bottom-100 { margin-bottom:100px; }

/* ===== Defalut Buttons Settings ===== */
.btn{
	transition:all .3s ease-in-out;
	font-size:var(--default-size);
	text-transform:uppercase;
	font-family:"font-bold";
	letter-spacing:3px;
	border-radius:35px;
	padding:17px 30px;
	text-align:center;
	outline:none;
	border:none;
}

.btn::after{
    box-shadow: 0 5px 5px 1px #666;
	border-radius:20px;
    position:relative;
    display:block;
    content:'';
    width:85px;
    left:15px;
    top:20px;
	visibility:hidden;
}

.btn-primary{
	background-color:var(--primary);
	color:var(--basic);
}
.btn-primary:hover{
	background-color:var(--primary);
	color:var(--basic);
	margin-top:-5px;
}

.btn-secondary{
	background-color:var(--dim);
	color:var(--basic);
	width:275px;
}
.btn-secondary:hover{
	background-color:var(--dim);
	color:var(--basic);
	margin-top:-5px;
}

.btn-alternate{
	background-color:var(--alternate);
	color:var(--basic);
	border-radius:3px;
	padding:2px 10px;
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-alternate:hover{
	background-color:var(--alternate);
	text-decoration:none;
	color:var(--basic);
	opacity:.85;
}

.btn-default{
	background-color:var(--bordered);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-default:hover{
	background-color:var(--bordered);
	text-decoration:none;
	color:var(--basic);
	opacity:.85;
}

.btn-transparent{
	background-color:transparent;
	border:1px solid var(--basic);
	text-transform:uppercase;
	color:var(--basic);
	padding:10px 16px;
	font-weight:600;
	outline:none;
}
.btn-transparent:hover{
	background-color:var(--basic);
	color:var(--primary);
}

/* ===== Flex Box Settings ===== */
.flex-box{
	display:flex;
}

.flex-1{
	flex:1;
}

.flex-2{
	flex:2;
}

.flex-3{
	flex:3;
}

.flex-4{
	flex:4;
}

.flex-5{
	flex:5;
}

.flex-6{
	flex:6;
}

/* ========== Media Queries For Responsiveness ========== */
@media screen and (max-width:1700px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 60px;
		--sub-heading: 52px;
		--title-heading: 28px;
		--ex-large-size: 28px;
		--largest-size: 26px;
		--larger-size: 22px;
		--caption-size: 21px;
		--large-size: 18px;
		--alternate-size: 15px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:10px;	
	}
	
	/* Buttons Responsiveness */
	.btn{
		letter-spacing:3px;
		padding:15px 25px;
	}
	
	
	
}

@media screen and (max-width:1600px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 48px;
		--sub-heading: 44px;
		--title-heading: 24px;
		--ex-large-size: 28px;
		--largest-size: 22px;
		--larger-size: 20px;
		--caption-size: 19px;
		--large-size: 18px;
		--alternate-size: 15px;
		--default-size: 13px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:10px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		letter-spacing:2px;
	}
		
}

@media screen and (max-width:1440px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 42px;
		--sub-heading: 38px;
		--title-heading: 20px;
		--ex-large-size: 18px;
		--largest-size: 22px;
		--larger-size: 18px;
		--caption-size: 17px;
		--large-size: 16px;
		--alternate-size: 14px;
		--default-size: 10px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:10px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:15px 20px;
	}
		
}

@media screen and (max-width:1366px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 50px;
		--sub-heading: 46px;
		--title-heading: 28px;
		--ex-large-size: 18px;
		--largest-size: 20px;
		--larger-size: 17px;
		--caption-size: 16px;
		--large-size: 15px;
		--alternate-size: 12px;
		--default-size: 11px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:10px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:13px 18px;
	}
		
}

@media screen and (max-width:1280px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 42px;
		--sub-heading: 40px;
		--title-heading: 20px;
		--ex-large-size: 18px;
		--largest-size: 18px;
		--larger-size: 16px;
		--caption-size: 15px;
		--large-size: 14px;
		--alternate-size: 11px;
		--default-size: 10px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:10px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:12px 15px;
	}
		
}

@media screen and (max-width:1024px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 38px;
		--sub-heading: 32px;
		--title-heading: 16px;
		--ex-large-size: 16px;
		--largest-size: 17px;
		--larger-size: 16px;
		--caption-size: 15px;
		--large-size: 13px;
		--alternate-size: 11px;
		--default-size: 10px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:8px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:12px 15px;
	}
		
}

@media screen and (max-width:767px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 32px;
		--sub-heading: 28px;
		--title-heading: 15px;
		--ex-large-size: 16px;
		--largest-size: 15px;
		--larger-size: 15px;
		--caption-size: 14px;
		--alternate-size: 11px;
		--default-size: 10px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:7px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:10px 12px;
	}
		
}

@media screen and (max-width:575px) {
	
	:root{
	
		/* Font Size Variables */
		--main-heading: 24px;
		--sub-heading: 20px;
		--title-heading: 14px;
		--ex-large-size: 16px;
		--larger-size: 15px;
		--caption-size: 15px;
		--large-size: 12px;
		--alternate-size: 11px;
		--default-size: 10px;
		--small-size: 13px;
		--smaller-size:12px;
		--smallest-size:6px;
		
	}
	
	/* Buttons Responsiveness */
	.btn{
		padding:8px 10px;
	}
		
}