html{
	background: #10101A;
	font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

.hidden-scroll::-webkit-scrollbar{display: none;}
body{
	font-family: 'Poppins', sans-serif;
}
.footer{
	background: #10101A;
	border-top: 2px solid #707070;
}

#nav{
	padding-top: 3%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#nav ul{
	background: rgba(255, 255, 255, 0.02);
	border: solid 2px #97979847;
	border-radius: 15px;
}

.active{
	background: linear-gradient(90deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
	border-radius: 15px;
	filter: blur(22px);
}

#nav ul li{
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	position: relative;
}
#nav ul li span, .grdbtn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#nav ul li div{
	padding: 3vh 4vw;
}

.title{
	font-weight: 700;
}
.gradient-word{
	background: -webkit-linear-gradient(0deg,rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.v-gradient-word{
	background: -webkit-linear-gradient(90deg,rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.underline{
	padding-bottom: 5px;
	border-bottom: solid #fff 2px;
}
.v-socials{
	position:absolute;
	right: 0;
	top: 0;
	font-size: 1.5rem;
}
.socials{
	font-size: 1.5rem;
}
.socials i{
	margin: 0 7px;
}

#links{
	font-family: 'Poppins', sans-serif;
}
#links li{
	display: inline-block;
}
#links a{
	color: rgba(226, 226, 243, 0.5);
}

#copyright{
	color: rgba(226, 226, 243, 0.5);
	font-family: 'Poppins', sans-serif;
}

.vignette{
	width: 18vw;
	border: solid 2px #97979847;
	border-radius: 45px;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 10px 10px 15px #9a9a9a40;
}
.inline{display: inline-block;}

.gradientbtn{
	background: linear-gradient(90deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);;
	border: none;
}

.containerproject{
	margin: 5vh 15vw 25vh 15vw ;
}

.projectbox{
	border: solid 2px #97979847;
	border-radius: 45px;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 10px 10px 15px #9a9a9a40;
	padding: 2rem;
}

.img2{
	transition: .5s;
}

.vtext{
	writing-mode: tb-rl;
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%) rotate(-180deg);
}

.grd45deg{
	background: linear-gradient(180deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
}
#psps{
	background: linear-gradient(270deg, #10101a 55%, transparent 65%);

	border: solid 2px #525158;
}

#grd2{
	background: linear-gradient(270deg, #10101a 65%, transparent 75%);
	border: solid 2px #525158;
}

.float-label-field {
  border: none;
  outline: none;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
  box-sizing: border-box;
}

.float-label-field input {
  border: none;
  outline: none;
  padding: 5px 5px 8px 0px;
  width: 100%;
  font-size: 18px;
  border-bottom: solid 1px #efefef;
  background: transparent;
  color: white;
}

.float-label-field label {
  opacity: 0.5;
  position: absolute;
  top: 10px;
  left: 0px;
  transition: all 0.2s ease;
  font-size: 18px;
  color: white;
}

.float-label-field.focus label {
  color: Grey;
}
.float-label-field.focus input {
  border-bottom: solid 1px grey;
}
.float-label-field.float label {
  opacity: 1;
  top: -8px;
  font-size: 60%;
  transition: all 0.2s ease;
  font-weight: bold;
}

input[type=checkbox]{
	margin-right: 10px;
}

  input[type="date"] {
    -webkit-appearance: none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.textarea{background-color: #47474F;color: white;border-radius: 15px;border: none}

::placeholder {
  color: #9D9DA1!important;
}

.pl-6-tablet{
	padding-left: 3rem;
}
#uneideebox{
	position:relative;margin-top:10vh
}
.grd135deg{
	background: linear-gradient(135deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);	

	height: 100%;
		border-radius: 20px;
	width: 100%;
}
	.ml-6-tablet{margin-left: 3rem}

@media only screen and (max-width: 768px){
	#nav {
		padding-top: 8%;
	}
	#nav ul li div{
		padding: 2vh 8vw;
	}
	.is-medium{
		height: 100vh;
	}
	.hero-foot img, .column img{
		width: 25%;
	}
	.pl-6-tablet{
		padding-left: 0;
	}
	.mt-6-mobile{
		margin-top: 3rem;
	}
	.ml-6-tablet{margin-left: 0}
	.vignette{
		width: 50vw;
		border-radius: 20px;
		padding: 2vh 2vw;
		margin-right: 5vw;
	}
	#uneideebox{
		margin-top: 5vh;
	}
	.mobileproject{
		width: 75vw;
		padding: 1.5rem;
		margin: 0 auto;
		border-radius: 40px;
		transition: .7s;
	}
	.contactmobile{
		width: 90vw;
		margin: 10vh auto;border: 2px solid #707070;
		padding: 0;
	}
	.mobilecontactcontent{
	background: linear-gradient(180deg, #10101a 75%, transparent 100%);
	height: 100%;
	width: 100%;	
		border-radius: 20px;	
	}
	.mobilecontactcontent img{
		border-radius: 20px;}
	.mobilecenter{
		text-align: center;
	}
	.float-label-field input {
	  width: 80%;
	}
}
@media only screen and (max-width: 720px){
	body{
		font-size: 0.7em!important
	}
	.title{
		font-size: 1.5rem!important
	}
	.is-size-6{
		font-size: 0.75rem!important;
	}
	.is-size-5{
		font-size: 1rem!important;
	}
	.is-size-2{
		font-size: 2rem!important;
	}
	.has-text-left .fa-github{
		font-size: 1.7rem!important
	}
}