html{
	font-family:'Roboto',sans-serif;
	box-sizing:border-box;
	font-size:12px;
}
*,:after,:before{
	box-sizing:inherit
}
body,h1,h2,h3,h4,h5,h6,ol,p,ul{
	margin:0;
	padding:0;
	font-weight:400
}
ol,ul{
	list-style:none
}
img{
	max-width:100%;
	height:auto
}
@font-face{
	font-family:'Reem Kufi';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url(../fonts/reemkufi/reemkufi_600.woff) format('woff');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
	unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
	font-family:'gerw_icons';
	src:url(../fonts/gerw_icons/gerw_icons.eot?2860963);
	src:url('../fonts/gerw_icons/gerw_icons.eot?2860963#iefix') format('embedded-opentype'),url(../fonts/gerw_icons/gerw_icons.woff2?2860963) format('woff2'),url(../fonts/gerw_icons/gerw_icons.woff?2860963) format('woff'),url(../fonts/gerw_icons/gerw_icons.ttf?2860963) format('truetype'),url('../fonts/gerw_icons/gerw_icons.svg?2860963#gerw_icons') format('svg');
	font-weight:400;
	font-style:normal
}
[class^="icon-"]:before,[class*=" icon-"]:before{
	font-family:"gerw_icons";
	font-style:normal;
	font-weight:400;
	speak:never;
	display:inline-block;
	text-decoration:inherit;
	height:1em;
	text-align:center;
	text-rendering:auto;
	line-height:1;
	font-variant:normal;
	text-transform:none;
	line-height:1em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
.icon-behance:before{
	content:'\e800'
}
.icon-linkedin:before{
	content:'\e801'
}
.icon-facebook:before{
	content:'\e802'
}
.icon-twitter:before{
	content:'\e803'
}
.icon-telegram:before{
	content:'\e807'
}
.icon-github:before{
	content:'\e805'
}
.icon-envelope:before{
	content:'\e806'
}
.fab{
	display:inline-block
}

.icons-social{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin:60px auto 0
}
.icons-social i{
	display:block;
	line-height:0;
	font-size:3em
}
.block-wh{
	display:block;
	height:1px!important;
	overflow:hidden;
	opacity:0;
	padding-right:5px
}
main{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	justify-content:center;
	padding:0 20px;
	text-align:center;
	background:#303F9F;
	color:#FAFAFA
}
main>.intro{
	font-family:'Reem Kufi',sans-serif;
	font-size:3.75em;
	font-weight:600;
	min-height:137px
}
main>.tagline{
	font-size:1.5rem;
	line-height:1.9rem;
	margin:1.5rem 0;
	font-weight:300
}
.icons-social i{
	padding:10px
}
.icons-social a{
	color:#FAFAFA;
	margin-right:5px
}
.icons-social a:nth-last-child(1){
	margin-right:0
}
.icons-social a svg path{
	fill:#FAFAFA
}
.devto{
	margin-bottom:-.2rem
}
.devto svg{
	margin-bottom:-.2rem;
	margin-left:.675rem;
	;
	width:2.65rem;
	height:2.65rem
}
.addit-contact-info a{
	display:inline-block;
	padding:5px;
	color:#fff;
	text-decoration:none
}
.addit-contact-info i{
	display:inline-block;
	transform:translateY(3px);
	margin-right:8px
}
.intro{
	text-align:center;
	margin:0 auto
}
#changingText{
	color:#fff;
	padding-right:5px;
	border-right:1px solid rgb(255,255,255);
	animation:cursoranim 1.5s linear infinite
}
@keyframes cursoranim{
	50%{
			border-right:1px solid rgba(0,0,0,0)
	}
}

.g2-hover a{
	display:block;
	position:relative;
	border-radius:25px;
	transition:0.1s ease-in
}
a.g2-hover__ld i{
	margin-left:5px;
	margin-right:5px
}
.g2-hover a i{
	transform:translateY(1px)
}
.g2-hover a:hover{
	background-color:rgba(0,0,0,.2);
	box-shadow:rgba(0,0,0,.17) 0 -23px 25px 0 inset,rgba(0,0,0,.15) 0 -36px 30px 0 inset,rgba(0,0,0,.1) 0 -79px 40px 0 inset,rgba(0,0,0,.06) 0 2px 1px,rgba(0,0,0,.09) 0 4px 2px,rgba(0,0,0,.09) 0 8px 4px,rgba(0,0,0,.09) 0 16px 8px,rgba(0,0,0,.09) 0 32px 16px
}
a.g2-hover__gh:hover{
	background-color:rgb(255 255 255 / 25%)
}
a.g2-hover__tg:hover{
	background-color:rgb(97 153 255)
}
a.g2-hover__tw:hover{
	background-color:rgba(38,150,255,.651)
}
a.g2-hover__fb:hover{
	background-color:rgb(41 128 217 / 37%)
}
a.g2-hover__ld:hover{
	background-color:rgba(0,0,0,.2)
}
a.g2-hover__bh:hover{
	background-color:rgb(255 51 51 / 48%)
}




@media (min-width:576px){
	html{
			font-size:14px
	}
	a.g2-hover__ld i{
			margin-left:3px;
			margin-right:3px
	}
}
@media (min-width:768px){
	html{
			font-size:16px
	}
	main>.intro{
			text-align:left!important
	}
}
@media (min-width:992px){
	html{
			font-size:18px
	}
}
@media (min-width:1200px){
	html{
			font-size:20px
	}
}
@media (max-width:390px){
	main>.intro{
			text-align:left;
			font-size:3.6em;
			font-weight:600;
			letter-spacing:0em
	}
	.addit-contact-info i{
			transform:translateY(1px)
	}
	.g2-hover a{
			border-radius:15px!important
	}
	a.g2-hover__ld i{
			margin-left:3px!important;
			margin-right:3px!important
	}
}
@media (max-width:330px){
	main>.intro{
			font-size:3em;
			min-height:118px
	}
}