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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

html, body{
	font-family: 'Open Sans', sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
}

.txtarea, body::-webkit-scrollbar {
  width: 1px;
}

.txtarea, body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.txtarea, body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

/* Colors - Backgrounds */

.ips-dgray{
	color:#fff!important;
	background-color: #2F2F2F!important;
}

.ips-mgray{
	color:#fff!important;
	background-color: #979797!important;
}

.ips-lgray{
	color:#fff!important;
	background-color: #676767!important;
}

.ips-hlghts{
	color:#000!important;
	background-color: #D2D2D2!important;
}

.ips-sred{
	color:#000!important;
	background-color: #F03E41!important;
}

.ips-sgreen{
	color:#000!important;
	background-color: #57AD68!important;
}

.ips-sblue{
	color:#000!important;
	background-color: #39BAF0!important;
}

.ips-black{
	color:#999999!important;
	background-color: #000000!important;
}

.copy-des{
	background-color: #141414; 
}

/* Colors - Text */

.ips-text-lgray{
	color:#676767!important;
}

.ips-text-hlghts{
	color:#D2D2D2!important;
}

.ips-text-sblue{
	color: #39BAF0!important;
}

/* Button Classes */

.ips-but-gry{
	background: #454545;
	color: #D2D2D2;
}

.ips-but-gray-dsbld{
	color: #454545;
	background: #2F2F2F;
}

.ips-but-sblue{
	color: #FFFFFF;
	background: #39BAF0;
}

.ips-but-sblue-dsbld{
	color: #FFFFFF;
	background: #2B6A84;
}

/* Pseudo Classes */

.ips-but-gry:hover{
	background: #676767;
}

.ips-but-gry:active{
	background: #2F2F2F;
}

.ips-but-sblue:hover{
	background: #67D2FF;
}

.ips-but-sblue:active{
	background: #3397C0;
}

.ips-inp:focus{
	border: 2px solid #39BAF0;
}

.ips-inp:disabled{
	background-color: #2F2F2F;
}

.ips-inp-3:focus{
	border-bottom: 2px solid #39BAF0;
}

.txtarea:focus{
	border: 2px solid #39BAF0;
}

.txtarea:disabled{
	background-color: #2F2F2F;
}

/* Rigid Designs */

.ips-inp, .ips-inp-2, .ips-inp-3, .txtarea{
	caret-color:#39BAF0;
	color: #FFFFFF;
	outline: none;
	border: none;
}

.ips-inp{
	height: 35px;
	width: 250px;
	background: #454545;
	border-radius: 6px;
	padding: 5px 25px 5px 20px; /*top right bottom left*/
}

.ips-inp-3{
	height: 35px;
	width: 290px;
	background: transparent;
	border-bottom: 2px solid #727272;
	padding: 5px 25px 5px 0px; /*top right bottom left*/
}

.ips-inp-req{
	border-left: 3px solid #F03E41;
}

.ips-inp-2:focus{
	border: 2px solid #39BAF0;
}

.ips-inp-2:disabled{
	background-color: #2F2F2F;
}

.txtarea{
	resize: none;
	height: 180px; 
	width: 100%;
	background: #454545;
	border-radius: 6px;
	padding: 5px 25px 5px 20px; /*top right bottom left*/
}

.ips-but, .ips-but-4{
	outline: none;
	border:none;
	vertical-align:middle;
	overflow:hidden;
	font-feature-settings: 'pnum' on, 'onum' on;
	text-decoration:none;
	letter-spacing: 0.05em;
	text-align: center;
	font-size: 14px;
	font-style: normal;
}

.ips-but-4{
	box-sizing: border-box;
	font-weight: bold;
	line-height: 25px;
	display: inline-block;
	align-items: center;
	color: #4EB4FF;
	padding: 4px 32px;
	background-color: rgba(0,0,0,0);
	box-shadow: none; /* ips-but4 */
	position: relative;
	transition: 0.2s;
	letter-spacing: 0.17em;
}

.ips-but-4:hover{
	color: #FFF;
	background: #39BAF0;
	box-shadow: 0 0 10px #39BAF0, 0 0 40px #39BAF0, 0 0 80px #39BAF0;
	transition-delay: 1s;
}

.ips-but-4:active{
	color: #39BAF0;
	background-color: #000000;
	box-shadow: 0 0 10px #39BAF0, 0 0 40px #39BAF0, 0 0 80px #39BAF0;
	transition: 0.1s;
}
.ips-but-4 span{
	position: absolute;
	display: block;
	}

.ips-but-4 span:nth-child(1){
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #2196f3); 
}

.ips-but-4:hover span:nth-child(1){
	left: 100%;
	transition: 1s;
}

.ips-but-4 span:nth-child(3){
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(270deg, transparent, #2196f3); 
}

.ips-but-4:hover span:nth-child(3){
	right: 100%;
	transition: 1s;
	transition-delay: 0.5s;
}

.ips-but-4 span:nth-child(2){
	top: -100%;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, transparent, #2196f3); 
}

.ips-but-4:hover span:nth-child(2){
	top: 100%;
	transition: 1s;
	transition-delay: 0.25s;
}

.ips-but-4 span:nth-child(4){
	bottom: -100%;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(360deg, transparent, #2196f3); 
}

.ips-but-4:hover span:nth-child(4){
	bottom: 100%;
	transition: 1s;
	transition-delay: 0.75s;
}

.ips-hide{
	display: none;
}

.wrng{
	background-image: url('assets/svgs/cross.svg');
	background-position: 98% 65%;
	background-repeat: no-repeat;
}

.rgt{
	background-image: url('assets/svgs/check-mark.svg');
	background-position: 97% 58%;
	background-repeat: no-repeat;
}

.caps, .ips-mitem{
	text-transform: uppercase;
}

.ips-center{
	justify-content: center; 
	text-align: center;
	align-items: center;
}

.ips-left{	
	text-align: left;
}

.menu-btn, .ips-nav-item, .close-button, .blogheader{
	cursor: pointer;
}

.close-button{
	width: 24px;
	float: right;
}

.ips-link{
	text-decoration: none;
}

.modal-container{
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden;
	background-color: rgb(0,0,0); /* Fallback color */
}

.modal-container-loader{
	display: block; /* Hidden by default */
}

.modal-container-gal{
	display: none; /* Hidden by default */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	opacity: 0;
}

.stopscroll{
	overflow: hidden;
}

.ips-h1, .ips-h2, .ips-h3, .ips-h4, .ips-mitem, .ips-subtxt, .ips-para, .ips-ttext, .ips-smtexto, .ips-smtextt, .fornotfor{
	font-style: normal;
}

.ips-h1, .ips-h2, .ips-h3, .ips-h4, .ips-subtxt, .fornotfor{
	letter-spacing: 0.05em;
	color: #FFFFFF;
}

.ips-h2, .ips-h3, .ips-h4, .ips-mitem, .ips-subtxt, .fornotfor{
	display: flex;
	align-items: center;
	font-feature-settings: 'pnum' on, 'onum' on;
}

.ips-h2, .ips-h3, .ips-h4, .ips-mitem, .ips-subtxt, .ips-smtexto, .ips-smtextt, .fornotfor{
	font-weight: normal;
}

/* Animations */

@keyframes spin {
	from {
		transform: rotate(0);
	}
	to{
		transform: rotate(359deg);
	}
}

.spinner-box {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
}

/* SOLAR SYSTEM */

.solar-system {
	display: flex;
}

.orbit {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ffffffa5;
	border-radius: 50%;
}

.earth-orbit {
	width: 165px;
	height: 165px;
	-webkit-animation: spin 12s linear 0s infinite;
}

.venus-orbit {
	width: 120px;
	height: 120px;
	-webkit-animation: spin 7.4s linear 0s infinite;
}

.mercury-orbit {
	width: 90px;
	height: 90px;
	-webkit-animation: spin 3s linear 0s infinite;
}

.planet {
	position: absolute;
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #3ff9dc;
}

.sun {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: #ffab91;
}

/* Display Specific Designs - Large Display*/

@media only screen and (min-width: 1367px) {

	.navstyle{
		background-image: url('assets/imgs/n-menu-3.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;
		overflow: none;
	}

	.ips-but{
		padding:8px 38px;
		display:inline-block;
		border-radius: 6px;
		font-weight: normal;
		line-height: 22px;
	}

	.ips-h1{
		font-weight: bold;
		font-size: 62px;
		line-height: 84px;
	}

	.ips-h2{
		font-size: 42px;
		line-height: 57px;
	}

	.ips-h3{
		font-size: 28px;
		line-height: 38px;
	}

	.ips-h4{
		font-size: 20px;
		line-height: 27px;
	}

	.ips-mitem{
		font-size: 42px;
		line-height: 57px;
		letter-spacing: 0.7em;
		color: #FFFFFF;
	}

	.ips-subtxt{
		font-size: 18px;
		line-height: 25px;
	}

	.ips-para, .ips-para-2{
		font-weight: 300;
		font-size: 24px;
		line-height: 33px;
		color: #FFFFFF;
	}

	.ips-ttext{
		font-weight: 300;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 0.2em;
	}

	.ips-smtexto{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #999999;
	}

	.ips-smtextt{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #D2D2D2;
	}

	.ips-inp-2{
		height: 35px;
		width: 420px;
		background: #454545;
		border-radius: 6px;
		padding: 5px 25px 5px 20px; /*top right bottom left */
	}
}

/* Display Specific Designs - Small Display*/

@media only screen and (min-width: 768px) and (max-width: 1366px) {

	.navstyle{
		background-image: url('assets/imgs/n-menu-3.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;
		overflow: none;
	}

	.ips-but{
		padding:4px 22px;
		display:inline-block;
		border-radius: 6px;
		font-weight: normal;
		line-height: 22px;
	}

	.ips-h1{
		font-weight: bold;
		font-size: 52px;
		line-height: 84px;
	}

	.ips-h2{
		font-size: 32px;
		line-height: 57px;
	}

	.ips-h3{
		font-size: 28px;
		line-height: 38px;
	}

	.ips-h4{
		font-size: 20px;
		line-height: 27px;
	}

	.ips-mitem{
		font-size: 36px;
		line-height: 57px;
		letter-spacing: 0.7em;
		color: #FFFFFF;
	}

	.ips-subtxt{
		font-size: 16px;
		line-height: 25px;
	}

	.ips-para{
		font-weight: 300;
		font-size: 20px;
		line-height: 33px;
		color: #FFFFFF;
	}

	.ips-ttext{
		font-weight: 300;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 0.2em;
	}

	.ips-smtexto{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #999999;
	}

	.ips-smtextt{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #D2D2D2;
	}

	.ips-h4-18{
		font-size: 16px;
	}

	.ips-inp-2{
		height: 35px;
		width: 290px;
		background: #454545;
		border-radius: 6px;
		padding: 5px 25px 5px 20px; /*top right bottom left*/
	}
}

/*Mobile*/

@media screen and (max-width: 767px) {

	.ips-but{
		padding:4px 22px;
		display:inline-block;
		border-radius: 6px;
		font-weight: normal;
		line-height: 22px;
	}

	.ips-h1{
		font-family: Open Sans;
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 49px;
		letter-spacing: 0.05em;
	}

	.ips-h2{
		font-family: Open Sans;
		font-size: 24px;
		line-height: 33px;
	}

	.ips-h2-m{
		font-family: Open Sans;
		font-style: normal;
		font-weight: bold;
		font-size: 35px;
		line-height: 48px;
		display: flex;
		align-items: center;
		letter-spacing: 0.05em;
		font-feature-settings: 'pnum' on, 'onum' on;
		color: #FFFFFF;
	}

	.ips-h3{
		font-size: 28px;
		line-height: 38px;
	}

	.ips-h4{
		font-size: 20px;
		line-height: 27px;
	}

	.ips-mitem{
		font-size: 29px;
		line-height: 39px;
		letter-spacing: 0.5em;
		color: #FFFFFF;
		/*display: flex;
		align-items: center;
		text-align: right;*/
	}

	.ips-subtxt{
		font-family: Open Sans;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
		line-height: 14px;
		display: flex;
		align-items: center;
		letter-spacing: 0.05em;
		font-feature-settings: 'pnum' on, 'onum' on;
	}

	.ips-subtxt-2{
		font-family: Open Sans;
		font-style: normal;
		font-weight: normal;
		font-size: 18px;
		line-height: 25px;
		letter-spacing: 0.05em;
		font-feature-settings: 'pnum' on, 'onum' on;
		color: #FFFFFF;
	}

	.ips-subtxt-3{
		font-family: Open Sans;
		font-style: normal;
		font-weight: 300;
		font-size: 17px;
		line-height: 23px;
	}

	.ips-para{
		font-family: Open Sans;
		font-style: normal;
		font-weight: 300;
		font-size: 17px;
		line-height: 23px;
	}

	.ips-ttext{
		font-weight: 300;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 0.2em;
	}

	.ips-smtexto{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #999999;
	}

	.ips-smtextt{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		line-height: 14px;
		color: #D2D2D2;
	}

	.ips-h4-18{
		font-size: 16px;
	}

	.ips-inp-2{
		height: 35px;
		width: 290px;
		background: #454545;
		border-radius: 6px;
		padding: 5px 25px 5px 20px; /*top right bottom left*/
	}

	.navstyle{
		background-image: url('assets/imgs/nmenu-small.png');
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: 100%;
	}

}