@font-face {
	font-family: 'Jost';
	src: url(font/Jost-Regular.ttf);
	font-weight: 400;
}

@font-face {
	font-family: 'Jost';
	src: url(font/Jost-Bold.ttf);
	font-weight: 700;
}

:root {
	--primary-color: linear-gradient(57.74deg, #82FAD9 13.78%, #6ABCFE 86.1%);
	--primarytext-color: #FFFFFF;
	--background-color: #191716;
}

.body {
	background-color: var(--background-color);
	transition: 0.3s;
}
.emptyspace {
	display: block;
	margin: 300px auto;
}

.header {
	display: flex;
	justify-content: space-between;
	padding-top: 1vw;
	padding-left: 1vw;
	max-width: 70vw;
	margin: 0 auto;
	font-family: 'Jost';
}

.togglehamburger {
	display: none;
}

.globalmiddletext {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 700;
	font-size: 65px;
	text-transform: uppercase;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: var(--primary-color);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	padding-top: 95px;
	
	position: relative;
	
	line-height: 100%;
}

.globalsmalltext {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: white;
    margin: 2em auto;
	text-align: center;
	
	position: relative;
}

.logotransparentphone {
	display: none;
}

.wrapphone {
	display: none;
}

.header_navigation {
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 1vw;
}

.header_navigation a {
	text-decoration: none;
	margin-left: 2vw;
	margin-right: 2vw;
	color: var(--primarytext-color);
}

.logonametransparent {
	width: 20vw;
	height: auto;
}

.header .menu-ico,
.header .close-ico {
	display: none;
}

.wrapper {
	display: block;
	align-items: center;
	color: white;
	justify-content: space-between;
	object-fit: contain;
	object-fit: cover;
	overflow: hidden;
	
}

.winpcimage {
	width: 100%;
	max-width: auto;
}

.winpc {
	display: block;
	position: relative;
	text-align: center;
	
}

.middletext1 {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 700;
	font-size: 3.8vw;
	text-transform: uppercase;
	
	background: var(--primary-color);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	line-height: 100%;
}

.middletext2 {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 1.5vw;
	padding-top: 1vw;
	
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.button_contactus {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 2vw;
	color: var(--primarytext-color);
	
	box-sizing: border-box;

	position: absolute;
	left: 50%;
	top: 50%;
	
	text-shadow: 0px 2px 2px #00000040;
	
	transform: translate(-50%, -10%);
	background: var(--primary-color);
	border-radius: 2vw;
	border: none;
	
	padding: 1vw 3vw;
	
	box-shadow: 0px 0px 0px 1px transparent;
	
	max-width: 50vw;
	
	transition: 0.3s;
}

.button_contactus:hover {
	box-shadow: 0px 0px 68px 1px #6abcfe;
	cursor: pointer;
}

/*-------------------------------------------------------------------------------

			Nav Panel

--------------------------------------------------------------------------------*/

.homenav:hover, .aboutusnav:hover, .paymentnav:hover, .enterprisenav:hover, .contactusnav:hover {
	transition: 0.2s;
	opacity: 100% !important;
	text-shadow: 0px 0px 15px #6abcfe, 0px 0px 15px #6abcfe, 0px 0px 15px #6abcfe;
	
}

.homenavgradient, .aboutusnavgradient, .paymentnavgradient, .enterprisenavgradient, .contactusnavgradient {
	justify-content: center !important;
	text-align: center !important;
	margin: 0.4rem;
	background: linear-gradient(11deg, rgba(130, 250, 217, 0) 0%, rgba(106, 188, 254, 0) 100%) padding-box,
				linear-gradient(11deg, rgba(130, 250, 217, 0) 0%, rgba(106, 188, 254, 0) 100%) border-box;
	
	border-radius: 0em;
	border: 0px solid transparent;
	padding: 10px 0px;
	text-shadow: 0px 4px 4px #00000040;
	border-radius: 23px !important;
	cursor: pointer;
	
}

.homenavgradient:active, .aboutusnavgradient:active, .paymentnavgradient:active, .enterprisenavgradient:active, .contactusnavgradient:active {
	transition: 0.2s;
	text-shadow: 0px 0px 15px #6abcfe, 0px 0px 20px #6abcfe, 0px 0px 20px #6abcfe;
	
}


/*-------------------------------------------------------------------------------- 

			Contact us page section

--------------------------------------------------------------------------------*/

.contactus_container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(0%, 5%);
}

.contactus_middletext {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 700;
	font-size: 65px;
	text-transform: uppercase;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: var(--primary-color);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	padding-top: 95px;
	
	position: relative;
	
	line-height: 100%;
}

.contactus_form {
	display: flex;
	flex-direction: column;
	padding: 0vw 0vw;
	width: 90%;
	max-width: 800px;
	
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300;
	
	border-radius: 15px;
}

.contactus_name {
	flex-direction: row !important;
}

.contactus_phonenum {
	flex-direction: row !important;
}

.contactus_form input, .contactus_form textarea{
	background: linear-gradient(#191716, #191716) padding-box, var(--primary-color) border-box;
	border-radius: 1em;
	border: 2px solid transparent;
	
	color: white;
	
	margin: 5px 0;
	padding: 15px;
	outline: 0px;
	font-size: 16px;
	
}

.contactus_submit {
	align-items: center;
	justify-content: center;
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	color: var(--primarytext-color);
	
	box-sizing: border-box;

	width: 230px;
	
	background: var(--primary-color);
	border-radius: 150px;
	border: none;
	
	padding: 10px 10px;
	
	cursor: pointer;
	
	margin: 30px auto 0;
	
	box-shadow: 0px 0px 0px 1px transparent;
	transition: 0.3s;
	
}

.contactus_submit:hover {
	box-shadow: 0px 0px 25px 1px #6abcfe;
	cursor: pointer;
	
}

.emaillogo, .phonelogo {
	height: auto !important;
	max-width: 3% !important;
	align-items: center;
	justify-content: center;
}

.footercontactus {
	display: hidden !important;
	margin: 35px 300px;
	padding: 5px 5px;
	align-items: center;
	justify-content: center;
}

/*-------------------------------------------------------------------------------- 

			404 page section

--------------------------------------------------------------------------------*/

.errortext {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 28px;
	color: white;
	width: 400px !important;
    margin: 2em auto !important;
	text-align: center !important;
	
	position: relative !important;
	display: flex !important;
}

/*-------------------------------------------------------------------------------- 

			About Us page section

--------------------------------------------------------------------------------*/

.Aboutuscontent {
	width: 900px !important;
    margin: 2em auto !important;
	text-align: center !important;
	
	position: relative !important;
	display: flex !important;
}


/*-------------------------------------------------------------------------------- 

			Payment page section

--------------------------------------------------------------------------------*/
.paymentdivone {
	align-items: right;
	justify-content: center;
	
	position: relative !important;
	display: flex !important;
}


.paymenttext {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 23px;
	color: white;
	width: 400px !important;
    margin: 3em auto !important;
	text-align: center !important;
	
	position: relative !important;
	display: flex !important;
}

.paymentbutton {
	align-items: center;
	justify-content: center;
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	color: var(--primarytext-color);
	
	margin: 0em auto !important;
	box-sizing: border-box;

	width: 230px;
	
	background: var(--primary-color);
	border-radius: 150px;
	border: none;
	
	padding: 10px 10px;
	
	cursor: pointer;
	
	margin: 30px auto 0;
	
	box-shadow: 0px 0px 0px 1px transparent;
	transition: 0.3s;
}

.paymentbutton:hover {
	box-shadow: 0px 0px 25px 1px #6abcfe;
	cursor: pointer;
}

.paymentbuttondiv {
	align-items: center !important;
	justify-content: center !important;
	padding-top: 5em;
	padding-left: 6em;
}

.payment_container {
	padding-top: 3em;
	
}

/*-------------------------------------------------------------------------------

			Enterprise page section

--------------------------------------------------------------------------------*/
.enterpriseimgcontainer {
	position: relative;
	max-height: 700px !important;
	max-width: auto !important;
	margin-top: 50px;
	padding: 50px 10%;
	display: flex !important;
	justify-content: center !important;
}

.phonesysbox, .itsolbox {
	display: flex !important;
	justify-content: center !important;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 500px;
	box-shadow: inset 0 0 50px #000000;
	box-shadow: 0px 0px 0px 1px #6abcfe;
	border-radius: 1em;
	z-index: 1 !important;
	
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: white;
	text-align: center;
	
	transition: 0.3s
}

.enterprisephonesysimg, .enterpriseitsolutions {
	width: 100%;
	position: relative;
	height: auto;
	object-fit: cover;
	object-position: center bottom;
	z-index: -1 !important;
	opacity: 80%;
	
	
	transition: 0.3s
}

.enterprisephonesysimg:hover {
	opacity: 100%;
}

.phonesysbox:hover {
	box-shadow: 0px 0px 68px 1px #6abcfe;
	cursor: pointer;
}

.enterpriseitsolutions:hover {
	opacity: 100%;
}

.itsolbox:hover {
	box-shadow: 0px 0px 68px 1px #6abcfe;
	cursor: pointer;
}

/*-------------------------------------------------------------------------------

			Phone Systems page section

--------------------------------------------------------------------------------*/

a.phonesystoptext {
	font-family: 'Jost';
	font-style: normal !important;
	font-weight: 400;
	font-size: 22px;
	color: white;
    margin: 1em auto;
	margin-top: 4em;
	text-align: center;
	
	max-width: 1200px !important;
	display: block !important;
}

.leftpanelphonesys {
	display: block !important;
	justify-content: left !important;
	max-width: 400px;
	text-align: left;
	margin: auto;
	padding-left: 50px;
}

.rightpanelphonesys {
	display: block !important;
	justify-content: right !important;
	max-width: 400px;
	text-align: left;
	margin: auto;
}

.centerdivphonesys {
	position: relative;
	max-height: 700px !important;
	max-width: 1300px !important;
	margin-top: 50px;
	padding: 10px 10%;
	display: flex !important;
	justify-content: center !important;
	
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: white;
    margin: 2em auto;
	text-align: center;
}

.phonesysimagebox {
	display: flex !important;
	justify-content: center !important;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 500px;
	
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: white;
	text-align: center;
}

.phonesysimageleft {
	width: 100%;
	position: relative;
	height: auto;
	object-fit: cover;
	object-position: center bottom;
	opacity: 100%;
}
#phonesysbottomtextdiv {
	position: relative;
	max-height: 700px !important;
	max-width: 1300px !important;
	margin-top: 20px;
	margin-bottom: 300px;
	padding: 0px 10%;
	display: flex !important;
	justify-content: center !important;
	
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: white;
    margin: 2em auto;
	text-align: center;
}

.button_contactusphonesys {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 40px;
	color: var(--primarytext-color);
	
	box-sizing: border-box;

	position: absolute;
	
	text-shadow: 0px 2px 2px #00000040;
	
	transform: translate(0%, 250%);
	background: var(--primary-color);
	border-radius: 150px;
	border: none;
	
	padding: 16px 60px;
	
	box-shadow: 0px 0px 0px 1px transparent;
	
	max-width: 315px;
	
	transition: 0.3s;
}

.button_contactusphonesys:hover {
	box-shadow: 0px 0px 68px 1px #6abcfe;
	cursor: pointer;
}

/*-------------------------------------------------------------------------------

			IT Solutions page section

--------------------------------------------------------------------------------*/

.rightpanelitsol {
	display: block !important;
	justify-content: right !important;
	max-width: 600px;
	text-align: center;
	margin: auto;
}

.button_contactusitsolutions {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-size: 40px;
	color: var(--primarytext-color);
	
	box-sizing: border-box;

	position: absolute;
	
	text-shadow: 0px 2px 2px #00000040;
	
	transform: translate(0%, 150%);
	background: var(--primary-color);
	border-radius: 150px;
	border: none;
	
	padding: 16px 60px;
	
	box-shadow: 0px 0px 0px 1px transparent;
	
	max-width: 315px;
	
	transition: 0.3s;
}

.button_contactusitsolutions:hover {
	box-shadow: 0px 0px 68px 1px #6abcfe;
	cursor: pointer;
}



/*

		Cellphone Optimization
		
*/

@media screen and (max-width: 1200px) {
	.errortext {
		font-size: 3vw;
		justify-content: center !important;
		width: 50vw !important;
	}
	
	.winpc {
		display: flex;
		width: 170%;
		max-width: auto;
		object-position: center bottom;
		transform: translate(-20.5%, 0%);
	}
	
	.winpcimage {
		transform: scale(110%)
	}
	
	.logonametransparent {
		width: 50vw;
		height: auto;
	}
	
	.middletext1 {
		font-size: 7vw;
		padding-bottom: 10vw;
	}
	
	.middletext2 {
		font-size: 3vw;
	}
	
	.button_contactus {
		font-size: 5vw;
		
		text-shadow: 0px 2px 2px #00000040;
		
		transform: translate(-50%, 20%);
		background: var(--primary-color);
		border-radius: 20vw;
		border: none;
		
		padding: 2vw 9vw;
		
		box-shadow: 0px 0px 0px 1px transparent;
		
		max-width: 50vw;
		
		transition: 0.3s;
	}

	.button_contactus:hover {
		box-shadow: 0px 0px 68px 1px #6abcfe;
		cursor: pointer;
	}
	
	.togglehamburger {
		display: flex;
		flex-direction: column;
		font-size: 30px;
		color: white;
		line-height: 45px;
		cursor: pointer;
		padding-left: auto;
		position: relative;
		justify-content: space-between;
		width: 30px;
		height: 20px;
	}
	
	.togglehamburger .bar {
		height: 3px;
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		
	}
	
	.header {
		width: 90%;
		padding-top: 20px;
		padding-left: 0;
		max-width: 1400px;
		flex-direction: column;
	}
	
	.header_navigation {
		line-height: 0vw;
		display: none;
		flex-direction: column;
		width: 100%;
		
		transition: 0.3s;
	}
	
	.header_navigation.active {
		display: flex;
		line-height: 5vw;
		transition: 0.3s;
	}
	
	.divnav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		background-color: #191716;
		align-items: center;
		position: relative;
		z-index: 3;
	}
	
	.logonametransparent {
		max-width: 150px;
	}
	
	.header_navigation div {
		background: var(--primary-color);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		
		font-size: 30px;
		text-align: center;
		font-weight: 400;
	}
	
	.globalmiddletext {
		font-size: 8vw;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		padding-top: 10vw;
		
		position: relative;
		
		line-height: 100%;
	}

	.globalsmalltext {
		font-size: 3vw;
		color: white;
		margin: 1vw auto;
		text-align: center;
		display: flex;
		
		position: relative;
	}
	
	.Aboutuscontent {
		width: 80vw !important;
		margin: 2em auto !important;
		text-align: center !important;
		
		position: relative !important;
		display: flex !important;
	}
	
	.enterpriseimgcontainer {
		position: relative;
		max-height: 60vw !important;
		max-width: auto !important;
		margin-top: 5vw;
		padding: 5vw 10%;
		display: flex !important;
		justify-content: center !important;
	}
	
	.phonesystoptext {
		display: flex !important;
		justify-content: right !important;
		max-width: 5vw !important;
		text-align: center;
		padding-left: 3vw;
		padding-right: 3vw;
		font-size: 2.5vw !important;
	}
	
	.centerdivphonesys {
		position: relative;
		max-height: 700px !important;
		max-width: 1300px !important;
		margin-top: 2vw;
		padding: 10px 10%;
		display: flex !important;
		justify-content: center !important;
		
		font-size: 2.2vw;
		color: white;
		margin: 2em auto;
		text-align: center;
	}
	
	#phonesysbottomtextdiv {
		position: relative;
		max-height: 700px !important;
		max-width: 1300px !important;
		margin-top: 20px;
		margin-bottom: 300px;
		padding: 0px 10%;
		display: flex !important;
		justify-content: center !important;
		
		font-size: 2.2vw;
		color: white;
		margin: 2em auto;
		text-align: center;
	}
	
	.button_contactusphonesys {
		font-size: 5vw;
		
		text-shadow: 0px 2px 2px #00000040;
		
		background: var(--primary-color);
		border-radius: 20vw;
		border: none;
		
		padding: 2vw 9vw;
		
		box-shadow: 0px 0px 0px 1px transparent;
		
		max-width: 50vw;
		
		transition: 0.3s;
		
		transform: translate(0%, 250%);
		background: var(--primary-color);
		border-radius: 150px;
		border: none;
		
	}
	
	.phonesysimagebox {
		display: flex !important;
		justify-content: center !important;
		margin-left: 0;
		margin-right: 0;
		max-width: 30vw;
		padding-right: 2vw;
		object-fit: scale-down;
		object-position: 50% 50%;
	}
	
	#phoneimgop {
		object-fit: scale-down;
		object-position: 50% 50%;
	}
	
	.leftpanelphonesys {
		padding-left: 0;
		padding-right: 3vw;
	}
	
	.button_contactusitsolutions{
		font-size: 5vw;
		
		text-shadow: 0px 2px 2px #00000040;
		
		background: var(--primary-color);
		border-radius: 20vw;
		border: none;
		
		padding: 2vw 9vw;
		
		box-shadow: 0px 0px 0px 1px transparent;
		
		max-width: 50vw;
		
		transition: 0.3s;
		
		transform: translate(0%, 150%);
		background: var(--primary-color);
		border-radius: 150px;
		border: none;
		
		box-shadow: 0px 0px 0px 1px transparent;
		
		transition: 0.3s;
	}
	
	.payment_container {
		display: flex;
		flex-direction: column;
	}
	.paymentdivone {
		display: flex;
		flex-direction: column;
	}
	
	.paymentbuttondiv {
		flex-direction: row !important;
		padding: 2vw 2vw;
	}
	
	.paymenttext {
		flex-direction: row !important;
		font-size: 3vw;
		max-width: 150vw !important;
		width: 80vw !important;
		justify-content: center !important;
	}
	
	.paymentbutton {
		display: flex;
		flex-direction: row !important;
		padding: 2vw 9vw;
		border-radius: 20vw;
		font-size: 5vw;
		width: 50vw !important;
		word-break: keep-all !important;
	}

}