/* ========== Default Variables and Uses ========== */

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

@font-face{
	font-family: 'alternate-font';
	src: url(Futura-CondensedLight.otf);
}

:root{
	
	/* Font & Background Colors Variables */
	--basic: #fff;
	--dark: #232323;
	--info: #46b8da;
	--lighter: #eee;
	--light: #d7d7d7;
	--shadow: #cecece;
	--bordered: #929292;
	--highlight: #4f4f4f;
	--warning: #f0ad4e;
	--danger: #df4937;
	--success: #5cb85c;
	--primary: #61b3de;
	--secondary: #61b3de;
	--alternate: #9dba58;
	--default: #4298b5;
	
	/* Font Size Variables */
	--heading: 48px;
	--sub-heading: 39px;
	--title-heading: 31px;
	--largest-size: 25px;
	--larger-size: 20px;
	--caption-size: 18px;
	--large-size: 16px;
	--default-size: 15px;
	--small-size: 13px;
	--smaller-size:12px;
	
}

*{
	font-family: 'Open Sans', sans-serif;
	margin:0;
}

/* ========== 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-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;
	border-radius:7px;
}

.btn-primary{
	background-color:var(--primary);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:96px;
}
.btn-primary:hover{
	background-color:var(--primary);
	opacity:.85;
}

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

.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(--default);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-default:hover{
	background-color:var(--default);
	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;
}

/* ===== Other General Settings ===== */
.show-on-tab{
	display:none;
}



@media screen and (min-width:1900px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading:54px;
		--sub-heading: 46px;
		--title-heading: 42px;
		--largest-size: 32px;
		--larger-size: 26px;
		--caption-size: 24px;
		--large-size: 22px;
		--default-size: 20px;
		--small-size: 16px;
		--smaller-size:15px;
	}
	
	h6{
		font-size:15px;
	}
	
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		padding:12px 20px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:var(--small-size);
		padding:5px 15px;
	}

}

@media screen and (max-width: 1899px) and (min-width: 1649px){
	
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 50px;
		--sub-heading: 42px;
		--title-heading: 36px;
		--largest-size: 28px;
		--larger-size: 24px;
		--caption-size: 21px;
		--large-size: 20px;
		--default-size: 18px;
		--small-size: 14px;
		--smaller-size: 13px;
	}
	
	h6{
		font-size:14px;
	}
	
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		padding:10px 18px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:var(--small-size);
		padding:4px 12px;
	}
}

@media screen and (max-width: 1699px) and (min-width: 1401px){
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 44px;
		--sub-heading: 36px;
		--title-heading: 30px;
		--largest-size: 24px;
		--default-size: 14px;
		--small-size: 12px;
		--smaller-size:11px;
	}
	
	h6{
		font-size:11px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-weight:400;
	}
	
}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 38px;
		--sub-heading: 30px;
		--title-heading: 26px;
		--largest-size: 22px;
		--larger-size: 18px;
		--caption-size: 16px;
		--large-size: 14px;
		--default-size: 13px;
		--small-size: 11px;
		--smaller-size: 10px;
	}
	
	h6{
		font-size:10px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:12px;
		padding:2px 8px;
		height:24px;
		width:150px;
		
	}

}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 36px;
		--sub-heading: 28px;
		--title-heading: 22px;
		--largest-size: 18px;
		--larger-size: 16px;
		--caption-size: 14px;
		--large-size: 13px;
		--default-size: 12px;
		--small-size: 10px;
		--smaller-size: 9px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:11px;
		padding:2px 8px;
		height:24px;
		width:150px;
	}
}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 30px;
		--sub-heading: 24px;
		--title-heading: 16px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:11px;
		padding:2px 8px;
		height:24px;
		width:150px;
	}
}

@media screen and (max-width:767px) {
	
	/* Other General Settings Responsiveness */
	.show-on-tab{
		display:block;
	}
	
	.hide-on-tab{
		display:none !important;
	}
	
}