/*--reset--*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

.ban-head .name-first-letter {
	font-weight: bold
}

.keys {
	font-family: monospace;
	padding: 5px;
	border-radius: 5px;
	text-align: left;
	overflow-x: scroll;
	white-space: nowrap;
}

.keys-block {
	font-family: monospace;
	padding: 5px;
	border-radius: 5px;
	overflow-x: scroll;
}

.keys-block pre {
	padding: 5px 5px 5px 5px;
	font-size: 15px;
	text-align: left;
}

.privacy {
	overflow-x: hidden;
	margin-top: 20px;
}

.privacy table {
	margin: 30px 0 30px 0;
}

.privacy table tbody tr th {
	text-align: center;
	font-size: 18px;
	padding: 10px;
}


.privacy table tbody tr td li {
	text-align: center;
}

.privacy p {
	padding: 5px 5px 5px 5px;
	font-size: 15px;
	text-align: left;
}

.privacy ul li {
	padding: 5px 5px 5px 5px;
	font-size: 15px;
	text-align: left;
}

.privacy h1 {
	font-size: 1.2em;
	text-align: left;
	padding: 10px 0 10px 5px;
}

.privacy-content h6 {
	font-size: 18px;
	text-align: left;
	padding: 5px 5px 5px 5px;
}

.keys p {
	padding: 5px 5px 5px 5px;
	font-size: 15px;
}

a {
	text-decoration: none;
}

.txt-rt {
	text-align: right;
}

.txt-lt {
	text-align: left;
}

.txt-center {
	text-align: center;
}

.float-rt {
	float: right;
}


/* float right */

.float-lt {
	float: left;
}


/* float left */

.clear {
	clear: both;
}


/* clear float */

.pos-relative {
	position: relative;
}


/* Position Relative */

.pos-absolute {
	position: absolute;
}


/* Position Absolute */

.vertical-base {
	vertical-align: baseline;
}


/* vertical align baseline */

.vertical-top {
	vertical-align: top;
}


/* vertical align top */

nav.vertical ul li {
	display: block;
}


/* vertical menu */

nav.horizontal ul li {
	display: inline-block;
}


/* horizontal menu */

img {
	max-width: 100%;
}


/*--end reset--*/

body {
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	background-attachment: fixed;
	text-align: center;
	overflow-x: hidden;
}

body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

/*--banner--*/

.banner,
.banner-oth {
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 850px;
	background-size: 100%;
}

.ban-head {
	overflow-x: hidden;
}

.ban-head h2 {
	font-size: 2.5em;
	letter-spacing: 1px;
}

.ban-head h1 {
	font-size: 4em;
	letter-spacing: 10px;
	font-family: 'Roboto', sans-serif;
}

.ban-head h3 {
	font-size: 1.27em;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
}

.about-me {
	padding-bottom: 20px;
	overflow-x: hidden;
	margin-top: 20px;
}

.about-me h3,
.my-projects h3,
.my-keys h3,
.privacy-content h3 {
	font-size: 2em;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
}

.my-keys h4 {
	font-size: 1.5em;
	letter-spacing: 1px;

}

.my-keys p {
	text-align: left;
	font-size: 15px;
}

#workexperience h2,
#my-talks h2 {
	font-size: 2em;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
}

.spaced-title {
	padding: 30px;
}

.main-section {
	min-height: 100vh;
	display: grid;
}

.my-profile-pic {
	margin-bottom: 25px;
	max-width: 100%;
	border-radius: 50%;
}


/*--//banner--*/


/*-- social-icons --*/

.agileinfo-social-grids {
	z-index: 999;
	text-align: center;
	margin-top: 0;
	padding-bottom: 30px;
}

.agileinfo-social-grids ul {
	padding: 0;
	margin: 0;
}

.agileinfo-social-grids ul li {
	display: inline-block;
	margin: .5em 0;
}

.agileinfo-social-grids ul li a {
	text-align: center;
}

.agileinfo-social-grids ul li a i.fa.fa-twitter,
.agileinfo-social-grids ul li a i.fa.fa-instagram,
.agileinfo-social-grids ul li a i.fa.fa-github,
.agileinfo-social-grids ul li a i.fa.fa-medium,
.agileinfo-social-grids ul li a i.fa.fa-linkedin {
	width: 30px;
	height: 30px;
	margin: 6px;
	font-size: 20px;
	line-height: 27px;
	text-decoration: none;
	text-shadow: none;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	border: 2px solid transparent;
}


/*-- //social-icons --*/

/* -- offline -- */

.offline {
	position: absolute;
	top: 50%;
	left: 50%;
	align-items: center;
	justify-content: center;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.offline h1 {
	font-weight: bold;
	font-size: 50px;
	letter-spacing: 5px;
	line-height: 1rem;
}

.offline h4 {
	font-weight: 300;
	font-size: 16px;
	padding-top: 40px;
	padding-bottom: 20px;
}

.offline .button {
	display: block;
	margin: 20px 0 0;
	padding: 15px 30px;
	letter-spacing: 5px;
	border-radius: .4rem;
	text-decoration: none;
}

/*-- //offline --*/


/*-- footer --*/

.footer {
	padding: 1em 1em 1em 1em;
	margin-top: auto;

}

* {
	box-sizing: border-box;
}

.column {
	float: left;
	text-align: left;
	width: 25%;
	padding: 30px 30px 30px 30px;
}

.row {
	margin-left: 10px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

a {
	color: #000;
}


/*-- //footer --*/


/*-- /responsive design --*/
@media(max-width:2560px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -19em;
	}

	.banner {
		height: 990px;
	}

	.banner-oth {
		height: 1050px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 30%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 20px;
	}

	.my-projects h3,
	.my-keys h3 {
		font-size: 30px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 40px;
	}

	.about-me h3 {
		font-size: 40px;
	}

	.about-me p {
		font-size: 30px;
	}

	.ban-head h2 {
		font-size: 50px;
	}

	.ban-head h3 {
		font-size: 40px;
	}

	.ban-head .name-first-letter {
		font-size: 60px;
	}

	.ban-head p {
		font-size: 30px;
	}
}

@media(max-width:1920px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -23em;
	}

	.banner {
		height: 840px;
	}

	.banner-oth {
		height: 580px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 18%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 20px;
	}

	.my-projects h3,
	.my-keys h3 {
		font-size: 30px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 30px;
	}

	.about-me h3 {
		font-size: 30px;
	}

	.about-me p {
		font-size: 20px;
	}

	.ban-head h2 {
		font-size: 30px;
	}

	.ban-head h3 {
		font-size: 25px;
	}

	.ban-head .name-first-letter {
		font-size: 40px;
	}

	.ban-head p {
		font-size: 20px;
	}
}

@media(max-width:1680px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -25em;
	}

	.banner {
		height: 860px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 17%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 20px;
	}

	.my-projects h3,
	.my-keys h3 {
		font-size: 30px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 30px;
	}

	.about-me h3 {
		font-size: 30px;
	}

	.about-me p {
		font-size: 20px;
	}

	.ban-head h2 {
		font-size: 30px;
	}

	.ban-head h3 {
		font-size: 25px;
	}

	.ban-head .name-first-letter {
		font-size: 40px;
	}

	.ban-head p {
		font-size: 20px;
	}
}


@media(max-width:1440px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -11em;
	}

	.banner {
		height: 550px;
	}

	.banner-oth {
		height: 500px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 17%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 20px;
	}

	.my-projects h3,
	.my-keys h3 {
		font-size: 30px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 30px;
	}

	.about-me h3 {
		font-size: 30px;
	}

	.about-me p {
		font-size: 20px;
	}

	.ban-head h2 {
		font-size: 30px;
	}

	.ban-head h3 {
		font-size: 25px;
	}

	.ban-head .name-first-letter {
		font-size: 40px;
	}

	.ban-head p {
		font-size: 20px;
	}
}

@media(max-width:1366px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -9em;
	}

	.banner {
		height: 500px;
	}

	.banner-oth {
		height: 470px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 16%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 40px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:1280px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -8em;
	}

	.banner {
		height: 450px;
	}

	.banner-oth {
		height: 450px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 17%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:1080px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -10.2em;
	}

	.banner {
		height: 425px;
	}

	.banner-oth {
		height: 370px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 20%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:1024px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -6.5em;
	}

	.banner {
		height: 350px;
	}

	.banner-oth {
		height: 330px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 20%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:991px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -5.5em;
	}

	.banner {
		height: 330px;
	}

	.banner-oth {
		height: 330px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 23%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:800px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -8.5em;
	}

	.banner {
		height: 330px;
	}

	.banner-oth {
		height: 270px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 20%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}

	.examples {
		width: 80%;
	}
}

@media(max-width:768px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -9.5em;
	}

	.banner {
		height: 330px;
	}

	.banner-oth {
		height: 250px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 20%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:736px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -4.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 250px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 18%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:667px) {
	.ban-head h1 {
		font-size: 3.5em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -6.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 220px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 22%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media(max-width:640px) {

	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -6em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 220px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 18%;
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head .name-first-letter {
		font-size: 35px;
	}

	.ban-head p {
		font-size: 18px;
	}
}

@media screen and (max-width: 600px) {
	.column {
		width: 100%;
	}

	.body {
		overflow-x: hidden;
	}

	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -7em;
	}

	.banner {
		height: 255px;
	}

	.banner-oth {
		height: 200px;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 18%;
		overflow-x: hidden;
	}

	.agileinfo-social-grids {
		margin-top: 0;
	}

	.footer p {
		font-size: 18px;
	}

	.my-projects h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me h3 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head p {
		font-size: 18px;
	}
}


@media(max-width:540px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -7.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 180px;
	}

	.ban-head h1 {
		font-size: 3em;
		letter-spacing: 7px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}


	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head p {
		font-size: 18px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 12px;
	}
}


@media(max-width:480px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -9em;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 25%;
		overflow-x: hidden;
	}

	.banner {
		height: 240px;
	}

	.banner-oth {
		height: 160px;
	}

	.ban-head h1 {
		font-size: 2.8em;
		letter-spacing: 2px;
	}

	.footer p {
		font-size: 18px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 28px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 28px;
	}

	.about-me p {
		font-size: 18px;
	}

	.ban-head h2 {
		font-size: 28px;
	}

	.ban-head h3 {
		font-size: 23px;
	}

	.ban-head p {
		font-size: 18px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}
}

@media(max-width:425px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -9.5em;
	}

	.banner {
		height: 245px;
	}

	.banner-oth {
		height: 140px;
	}

	.ban-head h1 {
		font-size: 2.8em;
		letter-spacing: 2px;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}

	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}
}

@media(max-width:414px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -9.5em;
	}

	.banner {
		height: 240px;
	}

	.banner-oth {
		height: 140px;
	}

	.ban-head h1 {
		font-size: 2.5em;
		letter-spacing: 2px;
	}

	.ban-head h1 {
		font-size: 2.2em;
		letter-spacing: 2px;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}

	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}
}


@media(max-width:384px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -10.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 130px;
	}

	.body {
		overflow-x: hidden;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}

	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}

}

@media(max-width:375px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -11em;
	}

	.my-profile-pic {
		margin-bottom: 15px;
		max-width: 30%;
		overflow-x: hidden;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 130px;
	}

	.body {
		overflow-x: hidden;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}

	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}
}

@media(max-width:320px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -11.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 110px;
	}

	.body {
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 2em;
		letter-spacing: 2px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}


	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 10px;
	}

}

@media(max-width:280px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -12.5em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 110px;
	}

	.body {
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 2em;
		letter-spacing: 2px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 15px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 25px;
	}

	#workexperience h2,
	#talks h2 h2 {
		font-size: 25px;
	}


	.about-me p {
		font-size: 15px;
	}

	.ban-head h2 {
		font-size: 25px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head .name-first-letter {
		font-size: 30px;
	}

	.ban-head p {
		font-size: 15px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 7px;
	}

}

@media(max-width:240px) {
	.ban-head {
		padding-bottom: 20px;
		overflow-x: hidden;
		margin-top: -13em;
	}

	.banner {
		height: 250px;
	}

	.banner-oth {
		height: 110px;
	}

	.body {
		overflow-x: hidden;
	}

	.ban-head h1 {
		font-size: 2em;
		letter-spacing: 2px;
		overflow-x: hidden;
	}

	.footer p {
		font-size: 10px;
	}

	.about-me h3,
	.my-projects h3,
	.my-keys h3,
	.privacy-content h3 {
		font-size: 20px;
	}


	#workexperience h2,
	#talks h2 h2 {
		font-size: 20px;
	}


	.about-me p {
		font-size: 10px;
	}

	.ban-head h2 {
		font-size: 20px;
	}

	.ban-head h3 {
		font-size: 20px;
	}

	.ban-head p {
		font-size: 10px;
	}

	#mode-toggler {
		width: 25%;
		font-size: 7px;
	}

}

/*-- /responsive design --*/