html {
  scroll-behavior: smooth;
  overflow-y: scroll !important ;
}


body{
	/* overflow-y: scroll !important ; */
	/* font-family: 'Poppins', serif; */
	/* font-family: 'Segoe UI'; */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  	"Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
  	"Segoe UI Emoji", "Segoe UI Symbol";

	/* background-color: #30343a; */
	background-color: rgba(209, 209, 209, 0.8);
	/* background-color: rgba(255,255,255,0.6); */
    /* background-blend-mode: lighten; */
	/* background-image: url("../img/lights.jpg"); */
	/* background-attachment: fixed; */
  	/* background-position: center; */
 	/* background-repeat: no-repeat; */
  	background-size: cover;
	margin: 0px;
	/* width: 100%; */
    /* height: 100%; */
    /* margin: 0px; */
    /* padding: 0px; */
     
}


/* .modal-open {
    overflow-y: scroll !important;
} */

/* .animatedModal{
	padding-right: 0 !important;
	overflow-y: auto;
   } */

/* .underCon{
	display: block;
	height: 1200px;
	width: 2000px;
	background-color: black;
	z-index: 100;
	position: fixed;
	color: white;
	text-align: center;
	line-height: 350%;
	font-size: 30px;
	padding-top: 280px;
	background-image: linear-gradient(black, #111111, black);

} */

.cS{
	font-size: 100px;
	font-weight:bold;
	color: rgb(224, 224, 224);
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	max-width: 500px;
	margin: auto;
	padding: 50px 0px 50px 0px;
}

.BME{
	font-size: 25px;
	font-style: italic;
	color: rgb(167, 0, 0);
}

.sizeControl{
	width: 100%;
	height:100%;
	position: fixed;
	min-width: 200px;
}

.wrapper{
	 /* Using em for uptimal browser zoom*/
	/*min-width: 400px;*/
	margin: auto;
	width: 100%;
	/* max-width: 105em; */

}

.section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 margin: 70px;
 /* width: 75%; */
 width: 100%;
 /* width: 85em; */
 /* max-width: 105em; */

}

.header-content-wrapper{
	 /* Using em for uptimal browser zoom*/
	/*min-width: 400px;*/
	display: flex;
	margin: auto;
	width: 80%;

}

.header-wrapper{
	width: 100%;
	/* max-height: 100px; */
	display: flex;
	justify-content: center;
	position: fixed;
	height: 90px;
	/* margin: auto; */
	width: 100%;
	/* background-color: rgb(22, 22, 22); */
	background-color: black;
	z-index: 99;
}

#main-header{
	/* background-color: #202020; */
	background-image: linear-gradient(rgb(25, 25, 25), rgb(25, 25, 25), rgb(25, 25, 25));
	min-height: 90px;
	font-size: 20px;
	color: ghostwhite;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-bottom: 4px solid sandybrown; */
	display: flex;
	/*flex-wrap: wrap;*/
	align-items: center;
	/*margin-top: 70px;*/
	position: fixed;
	/* width: 85.8em; */
	width: 100%;
	/* transform: translateX(-16px); */
	/* margin: 0px auto; */
	/*min-width:400px;*/
	z-index: 99;
	-webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 8px -2px rgb(20, 20, 20);
}


.header-img-container{
	/*width: 8%;*/
	/* margin: 0px 30px 0px 45px; */
	/*max-height: 98px;*/
}

.myNavbar .header-img-container a{
	float: left;
	/* margin: 0px 30px 0px 45px; */
	/*max-height: 98px;*/
	display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 10px 12px 0px;
  text-decoration: none;
  font-size: 17px;
}

.myNavbar .icon-container a{
	padding: 12px 0px 12px 10px;
}

.icon-container{
	/*width: 8%;*/
	/* margin: 0px 30px 0px 45px; */
	/*max-height: 98px;*/
	height: 90px;
}

.header-img{
	/*max-width: 100%;*/
	height: auto;
    width: auto;
    max-height: 65px;
    max-width: 250px;
    display: block;
    /* border-radius: 100px; */
}



.header-text{
	min-width: 200px;
		/* border-right: solid 4px rgb(221, 221, 255); */

}

.name{
	font-size: 30px;
	color: ghostwhite;
	margin: 0;
	line-height: 40px;
	margin-right: 10px;
}

.occupation{
	/* font-size: 20px; */
	margin: 0;
	font-style: italic;
	color: rgb(40, 255, 40);
}

.occupation a:hover{
	/* color:rgba(124, 213, 255, 0.2); */
	filter:brightness(120%);
	transition: 0.5s;
}

.occupation a:not(:hover){
	/* color:rgba(124, 213, 255, 0.2); */
	filter:brightness(100%);
	transition: 0.5s;
}

.occupation a{
	text-decoration: none;
	font-size: 17px;
	margin: 0;
	font-style: italic;
	/* font-weight: 700; */
	color: darkgray;
}

.myNavButtons{
	display: inline-flex;
    float: right;
    height: 90px;
    margin: auto;
}

.myNavButtons a{
	margin: auto;
}


.myNavbar {
  overflow: hidden;
	/* background-color: rgb(22, 22, 22); */
	background-color:black;
	height: 90px;
	width: 75%;
		/* width: 85em; */
    position: fixed;
    z-index: 99;
}

/* .myNavbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 10px;
  text-decoration: none;
	font-size: 17px;
} */

.myNavbar .myNavButtons a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0px;
  text-decoration: none;
  font-size: 14px;
}

.myNavbar .myNavButtons a:not(:last-child) {
	/* padding: 12px 10px; */
	margin-right: 30px;
}

.myNavbar .myNavButtons a:hover {
  color: rgb(110, 134, 146);
  transition: 0.5s;
}
.myNavbar .myNavButtons a:not(:hover) {
  color: #f2f2f2 ;
  /* transition: 0.5s; */
}

.myNavbar .myNavButtons a.active {
	color: rgb(110, 134, 146);
}


.myNavbar .icon {
  display: none;
}

@media screen and (max-width: 1200px) {
  .myNavbar .myNavButtons a {
		display: none;
	}
  .myNavbar a.icon {
    float: right;
	display: block;
	color: white;
	line-height: 50px;
	font-size: 20px;
	}
	
}

@media screen and (max-width: 1200px) {
  .myNavbar.responsive {
		position: fixed;
		width: 100%;
		height: initial;
	}
	.myNavbar.responsive .header-img-container{
		width: 75%;
		display: flex;
		margin: auto;
	}

	.myNavbar.responsive .icon-container{
		width: 75%;
		display: flex;
		margin: auto;
		position: absolute;
		top: 0px;
		right: 0px;
		left: 0px;
		height: 0px;
		margin: 0 auto;
	}
	
  .myNavbar.responsive .icon {
    position: absolute;
    right: 0;
		top: 0;
		/* width: 80%; */
		display: flex;
		color: #878787;
		color: white;
    line-height: 50px;
    padding: 28px 0px 0px 0px;
    text-decoration: none;
	}
	.myNavbar.responsive .icon-container .a i:hover {
    
		color: #878787;
	}
	/* .navbar.responsive .navButtons a:first-child { */

    /* display: block; */
		/* margin: auto; */

		/* border-bottom: 0.5px solid dimgray;  */
	/* } */
	/* .navbar.responsive .navButtons a:last-child { */

    /* display: block; */
		
		/* border-bottom: 0.5px solid dimgray;  */
	/* } */
  .myNavbar.responsive .myNavButtons a{
    float: none;
    display: block;
		text-align: center;
		border-bottom: 0.5px solid rgb(65, 65, 65);
		font-size: 14px;
		padding: 10px 10px;
		margin-right: 0px;
		background-color: #222222; 
	}
	.myNavbar.responsive .myNavButtons{
		display: block;
		float: none;
		height: auto;
		
	}
	/* .navbar.responsive .navButtons a:not(:first-child):not(:last-child) { */
		/* border-bottom: 0.5px solid dimgray; */
	/* } */
	/* .navbar.responsive .navButtons a:nth-child(2) { */
    /* margin-top: 90px */
  /* } */
}

/*
.navbar{

	margin: auto;
	margin-right: 30px;
	max-width: 800px;

}

.navbar ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
		margin: auto;

    padding: 0;
}

.navbar li{
	list-style-type: none;
	color: white;
	margin: 2px 0px;
	padding: 2px 0px;
	display: flex;
}


.navbar li a{
	font-size: 17px;
	color: rgb(255, 255, 255);
	text-decoration: none;
	padding: 0px 15px 0px 15px;
	margin: 0px 5px;

}

.navbar li a:hover{

	  border-radius: 30px;
		color: rgb(110, 134, 146);

    transition: 0.5s;

}

.navbar li a.active{

	color: rgb(110, 134, 146);
} */

/*.anchor .main-section{
  position: absolute;
  left: 0px;
  top: -110px;
}

.anchor {
  position: relative;
}*/

/*h2{ position:relative; }
h2 #one{ position:absolute; top:-200px;}*/

p span {
  margin-top: -220px;        /* Size of fixed header */
  padding-bottom: 100px;
  display: block;
}

.page-section{

}

.portfolio-sub-page-section{
	/* width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgb(252, 252, 252);
	padding: 0px 0px 100px 0px;
	margin: auto; */
	/* margin-top: 1px; */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 4px 0px rgb(150, 150, 150); */
	/* z-index: 7; */
	/* position: relative; */
}

.first-sub-page-section{
	/* background-image: url('../img/studentProjects/project6/cut05.JPG'); */
	/* width: 100%; */
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgb(252, 252, 252);
	/* padding: 0px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: -45px;
	/* margin-bottom: 25px; */
	/* margin-top: 1px; */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 4px 0px rgb(150, 150, 150); */
	z-index: 7;
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	/* position: relative; */
}

.secStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* margin-bottom: 25px; */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 3px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	z-index: 6;
}
/* .secStPro-sub-page-section .section-content-wrapper{
	flex-direction: column-reverse;
} */


.thirdStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	z-index: 6;
}

.fourthStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	z-index: 6;
}

.fifthStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	z-index: 6;
}

.sixthStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	z-index: 6;
}

.gameNAppsStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	/* background-color: rgb(23, 23, 28); */
	/* padding: 100px 0px 0px 0px; */
	margin: auto;
	margin-top: 20px;
	/* padding-top: 60px;  */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	/* z-index: 6; */
}

.gameNAppsStPro-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 /* margin: 0px 50px; */
 /* width: 75%; */
 width: 100%;
 /* width: 85em; */
 /* max-width: 105em; */

}

.gamesNApp-BarOne{
	width: 49.27%;
	/* margin-right: 20px; */
	display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(23, 23, 28); */
  background-color: rgba(10, 10, 17, 0.9);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);

}
.gamesNApp-BarTwo{
	width: 49.27%;
	display: flex;
	flex-direction: column;
  align-items: center;
  background-color: rgba(10, 17, 10, 0.9);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);

}
.gamesNApp-BarThree{
	width: 49.27%;	
	display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(20, 27, 20, 0.63);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}
.gamesNApp-BarFour{
	width: 49.27%;	
	display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(23, 23, 28); */
  background-color: rgba(20, 20, 27, 0.65);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}
.gamesNApp-BarFive{
	width: 49.27%;	
	display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(23, 23, 28); */
  background-color: rgba(20, 20, 27, 0.65);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}
.gamesNApp-BarSix{
	width: 49.27%;	
	display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(23, 23, 28); */
  background-color: rgba(20, 20, 27, 0.65);
  background-color: white;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}

.gamesNApp-slideshow-container {
	/* width: 100%; */
	width: 250px;
	height: 350px;
  position: relative;
	/* margin: auto; */
	display: flex;
	justify-content: center;
	/* transform: skew(0deg,-10deg); */
	/* background-color: blue; */
	margin-top: 90px;
	/* margin: 50px 10px 0px 10px; */ 
}

.gamesNApp-slideshow-container img{
	/* max-width: 1000px;
	max-height: 500px; */
	/* transform: skew(0deg,10deg); */
	width: 100%;
	height: 100%;
	align-content: center;
	border-radius: 2px;
	/* -webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
	/* -moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
	/* box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
}

/* Next & previous buttons */
.gamesNApp-prev, .gamesNApp-next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
	margin-top: -22px;
  /* padding: 16px; */
  color: rgb(189, 189, 189);
  font-weight: normal;
  font-size: 55px;
  transition: 0.6s ease;
  /* border-radius: 0 3px 3px 0; */
}

.gamesNApp-prev{
	left: 0;
	margin-left: -160px; /*Comment this*/
	padding: 20px 20px;
}

/* Position the "next button" to the right */
.gamesNApp-next {
  right: 0;
	/* border-radius: 3px 0 0 3px; */
	margin-right: -160px; /*Comment this*/
	padding: 20px 20px;

}

/* On hover, add a black background color with a little bit see-through */
.gamesNApp-prev:hover, .gamesNApp-next:hover {
	/* background-color: rgba(95, 95, 95, 0.8); */
	filter: brightness(70%);
}

/* Caption text */
.gamesNApp-text {
	display: none;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom:20px;
  width: 100%;
  text-align: center;
}
.gamesNApp-mySlides {
  display:none;
}
.gamesNApp-active-slide {
	display:block;
	z-index: 4;
	/* filter: drop-shadow(0px 2px 2px rgb(60, 60, 60)); */
	-webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	 -moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	 box-shadow: 1px 2px 8px -2px rgb(23, 23, 23);
	 transition: filter 0.3s;
	 /* max-width: 250px; */
	 /* max-height: 350px; */
}
.gamesNApp-active-slide:hover {
	/* filter: brightness(110%) drop-shadow(1px 2px 4px rgb(32, 32, 32));; */
	/* -webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	 -moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	 box-shadow: 0px 0px 10px -1px rgb(35, 35, 35); */
	 filter: brightness(115%);
	transition: filter 0.3s;
}
/* Number text (1/3 etc) */
.gamesNApp-numbertext {
	display: none;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.gamesNApp-dot {
	display: none;
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
	border-radius: 50%;
  /* display: inline-block; */
	transition: background-color 0.6s ease;
}



.gamesNAppTitleText{
	margin: 0;
	border-bottom: 1px solid darkgray;
	padding-bottom: 10px;
	font-style: normal;
	font-size: 28px;
	text-align: center;
	color: black;
}

.gamesNAppTextDateSemester{
	display: flex;
  justify-content: space-between;
	color: rgb(169, 169, 169);
	/* color: rgb(132, 209, 186); */
	font-weight: 300;
}

.gamesNAppTextDateSemester-right{
	text-align: right;
}

.gamesNAppTextDateSemester p{
	margin-top: 5px;
	width: 50%;
}
.gamesNAppMainText{
	color: black;
	text-align: center;
	margin-top: -22px;
}

.gamesNAppKeywords{
	color: darkgray;
	font-weight: 300;
}

#gamesNApp-Text{
	width: 60%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 70px;
	/* margin: auto; */
	/* z-index: 5; */
	/* margin-left: 40px; */
}

.gamesNAppTextPad_unEven{
	margin-left: 40px;
}

.gamesNAppTextPad_Even{
	margin-right: 40px;
}

.nextSibStyle{
	display: block;
	z-index: 3;
	position: absolute;
	/* right: 100px; */
	right: -100px;
	left: 100px; /*Comment this*/
	margin-top: 22px;
	height: 88%;
	max-width: 100%;
	/* max-width: 30%; */
}
.nextSibStyle:hover {
	filter: brightness(110%);
}

.prevSibStyle{
	display: block;
	z-index: 3;
	position: absolute;
	right: 100px; /*Comment this*/
	left: -100px;
	/* left: 100px; */
	margin-top: 22px;
	height: 88%;
	max-width: 100%;
	/* max-width: 30%; */
}
.prevSibStyle:hover {
	filter: brightness(110%);
}



#gamesNAppHeaderText{
	/* transform: skew(0deg, 2deg); */
	/* background-color: rgb(252, 252, 252); */
	position: relative;
	top: 45px;
	font-size: 60px;
	font-weight: 500;
	color:rgb(50, 50, 50);
	font-family: 'Fredericka the Great';
	letter-spacing: 10px;
}
#gamesNAppHeaderTextLower{
	/* transform: skew(0deg, 2deg); */
	/* background-color: ghostwhite; */
	position: relative;
	top: 36px;
	font-size: 18px;
	font-weight: 500;
	color:rgba(50, 50, 50, 0.4);
	letter-spacing: 1.5px;
}

#gamesNAppImg{
	max-width: 500px;
	margin: auto;
	z-index: 5;
}

#gamesNAppheader{
	/*max-width: 500px;*/
	/* background: linear-gradient(#77cce6, #cef4ff); */
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#111111, #242424); */
	/* transform: skew(0deg, -2deg) translateY(-32px) scale(1.02); */
	width: 75%;
	height: 200px;
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	/* font-size: 38px; */
	font-style: normal;
	/* font-weight: bold; */

	margin: auto;
	margin-top: 50px;
	/* margin-top: 50px; */
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-bottom: -50px; */
	/* border-bottom: solid 2px darkgray; */
	/* margin-bottom: 20px; */
	/* border-top: 2px solid rgba(169, 169, 169, 0.2); */
	z-index: 5;

}

.rigOneStPro-sub-page-section{
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	background-color: rgb(252, 252, 252);
	/* padding: 100px 0px 100px 0px; */
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 4px solid #ff8f3f; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(150, 150, 150); */
	z-index: 6;
}

.rigOne-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 /* margin: 70px; */
 /* width: 75%; */
 width: 100%;
 /* width: 85em; */
 /* max-width: 105em; */

}

.video-container-one {
	width: 900px;
	height: 600px;
  position: relative;
	margin: auto; 
	display: flex;
	justify-content: center;
	/* transform: skew(0deg,-10deg); */
	 background-color: black; 
}

#btn-close-modal {
	width: 100%;
    height: 90%;
    margin-top: 90px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    color: #fff;
}



.sub-page-section{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: ghostwhite;
	padding: 100px 0px 100px 0px;
	margin: auto;
	margin-top: 1px;
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 1px solid white; */
	-webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(160, 160, 160);
  z-index: 6;
}

.about-first-sub-page-section{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	padding: 50px 0px 0px 0px;
	margin: auto;

	/* background-image: url("../img/copenhagen04.jpg"); */
	/* background-attachment: fixed; */
	/* background-color: rgba(255,255,255,0.95); */
    /* background-blend-mode: lighten; */
	/* background-size: cover; */
	/* background-position: center; */
	/* background-repeat: no-repeat; */

	background-color: rgb(50, 55, 58);

	/* margin-top: 25px; */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 1px solid white; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(160, 160, 160); */
  z-index: 6;
}


.about-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 margin: 70px auto 0px auto;
 /* width: 75%; */
 width: 75%;
 /* width: 85em; */
 /* max-width: 105em; */

}

.about-second-sub-page-section{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	padding: 0px 0px 0px 0px;
	margin: auto;
	background-color: white;
	/* margin-top: 25px; */
	/* border-bottom: 4px solid #ff8f3f; */
	/* border-top: 1px solid white; */
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(160, 160, 160); */
  z-index: 6;
}

.about-secSub-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
/*min-width: 400px;*/
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/* margin: auto; */
/* margin-top: 0px; */
margin: 70px auto;
/* width: 75%; */
width: 75%;
/* width: 85em; */
/* max-width: 105em; */

}


.about-secSub-sidebarOne{
	width: 23%;
	margin: auto;
	margin-left: 0px;
	height: 90%;
}
.about-secSub-sidebarOne ul{
	list-style: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0px;
	padding: 0px;
	/* text-align: center; */
}
.about-secSub-sidebarOne li{
	padding: 5px 0px;
    font-weight: 300;
    font-size: 20px;
}
.about-secSub-sidebarOne li p{
	margin: 0px;
}
.about-secSub-sidebarOne li:first-child{
	padding: 10px 0px;
    font-weight: 300;
	font-size: 28px;
	color: rgb(90, 90, 90);
}


.about-secSub-sidebarTwo{
	width: 23%;
	margin: auto;
	margin-right: 0px;
	height: 90%;
}
.about-secSub-sidebarTwo ul{
	list-style: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0px;
	text-align: right;
	/* text-align: center; */
	padding: 0px;
}
.about-secSub-sidebarTwo li{
	padding: 5px 0px;
    font-weight: 300;
    font-size: 20px;
}
.about-secSub-sidebarTwo li p{
	margin: 0px;
}
.about-secSub-sidebarTwo li:first-child{
	padding: 10px 0px;
    font-weight: 300;
	font-size: 28px;
	color: rgb(90, 90, 90);
}


.about-secSub-img{
	display: flex;
	justify-content: center;
	/* width: 400px; */
	/* height: 400px; */
	z-index: 5;
	border-radius: 300px;
	margin: auto;
	width: 45%;
	/* filter: grayscale(1.0); */
	
	filter: hue-rotate(0deg) saturate(0.8);
}




.about-third-sub-page-section{
	width: 100%;
	min-height: 700px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: ghostwhite; */
	padding: 0px 0px 70px 0px;
	margin: auto;
	background-color: white;
	/* margin-top: 25px; */
	/* border-bottom: 4px solid #ff8f3f; */
	 border-top: 1px solid #f1f1f1;
	/* -webkit-box-shadow: 0px 0px 8px 0px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 2px 0px rgb(160, 160, 160); */
  z-index: 6;
  
}

.about-thirdSub-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
/*min-width: 400px;*/
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/* margin: auto; */
/* margin-top: 0px; */
margin: 70px auto;
/* width: 75%; */
width: 75%;
/* width: 85em; */
/* max-width: 105em; */

}


.about-thirdSub-sidebarOne{
	width: 23%;
	margin: auto;
	margin-left: 0px;
	height: 90%;
}
.about-thirdSub-sidebarOne ul{
	list-style: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0px;
	padding: 0px;
	/* text-align: center; */
}
.about-thirdSub-sidebarOne li{
	padding: 5px 0px;
    font-weight: 300;
    font-size: 20px;
}
.about-thirdSub-sidebarOne li p{
	margin: 0px;
}
.about-thirdSub-sidebarOne li:first-child{
	padding: 10px 0px;
    font-weight: 300;
	font-size: 28px;
	color: rgb(90, 90, 90);
}


.about-thirdSub-sidebarTwo{
	width: 23%;
	margin: auto;
	margin-right: 0px;
	height: 90%;
}
.about-thirdSub-sidebarTwo ul{
	list-style: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0px;
	text-align: right;
	/* text-align: center; */
	padding: 0px;
}
.about-thirdSub-sidebarTwo li{
	padding: 5px 0px;
    font-weight: 300;
    font-size: 20px;
}
.about-thirdSub-sidebarTwo li p{
	margin: 0px;
}
.about-thirdSub-sidebarTwo li:first-child{
	padding: 10px 0px;
    font-weight: 300;
	font-size: 28px;
	color: rgb(90, 90, 90);
}


.about-thirdSub-img{
	display: flex;
	justify-content: center;
	/* width: 400px; */
	/* height: 400px; */
	z-index: 5;
	border-radius: 300px;
	margin: auto;
	width: 45%;
	/* filter: grayscale(1.0); */
	
	filter: hue-rotate(0deg) saturate(0.8);
}

#myChart-container{
	display: flex;
    flex-direction: column;
    justify-content: center;
    width: 85%;
    height: 100%;
	position: relative;
	margin: auto;
}



.main-section{
	/* height: 10000px; */
	/* background-color: rgba(26, 26, 26, 0.9); */
	/* background-color: #ececf3; */
	background-color: ghostwhite;
	/* background-color: rgb(246, 246, 246); */
	background-color: rgb(236, 236, 240);
	-webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
}


#section1 {
  /* height: 800px; */
  height: 750px; 
  background-color: rgb(22, 22, 22);
  /* padding-top: 110px; */
	/* background-image: url(../img/lights.jpg); */
	/* background-image: url(../img/ZombieImg.png); */
	/* filter: hue-rotate(190deg); */
  /* background-attachment: relative; */
  background-position: 50% 150px;
  background-repeat: no-repeat;
	background-size: 500px;
  color: white;
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
  align-items: center;
  /* flex-wrap: wrap; */
	/* min-height: 700px; */
	/* margin-bottom: -100px; */
	-webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
	box-shadow: 0px 0px 8px -2px rgb(150, 150, 150);
}

#section1Text{
	max-width: 80%;
	/* margin: auto; */
	z-index: 5;
	text-align: center;
}

#section1Img{
	max-width: 500px;
	margin: auto;
}

#section1header{
  /* max-width: 500px; */
  /* width: 1200px; */
  height: 90px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 72px;
  font-style: normal;
  color: ghostwhite;
  /* margin: auto; */
	margin-top: 0px;
	font-weight: 600;
  margin-bottom: 0px;
  z-index: 5;
}

.slidingImgWrapper {
	width: 100%;
	height: 100%;
  /* margin: 0 auto; */
}

.leftSideImage{
	position: relative;
	display: inline-block;
	width: 60%;

}
.leftSideImage img{
	position: absolute;
	bottom: 0px;
	right: 0px;
	max-height: 95%;
	max-width: 95%;
}

.leftSideImg{
	width: 50%;
	/* height: 610px; */
	height: 660px;
	float: left;
	position: relative;
	left: 0px;
	animation-name: slideInLeft;
	animation-duration: 1.3s;
	animation-timing-function: cubic-bezier(0.3, 0.5, 0.1, 1);
	/* background-color: blue; */
	 background-image: url(../img/futurecityBackground.jpg); 
	/* background: url(../img/ZombieImg_03_ShouldersDecreased_Half_Left_normal.png) ; */
	/* background-position: 50% 150px; */
	background-color: rgb(230, 233, 248);
  /* background-repeat: no-repeat; */
  
	/* background-size: 25%; */
	/* background-position: right; */
	opacity: 1;
	display: flex;
	justify-content: center;


	

	background-image: url(../img/FuturisticImg.jpg); 
	/* background: url(../img/ZombieImg_03_ShouldersDecreased_Half_Left_normal.png) ; */
	background-position: 50% 45%;
	background-color: rgb(230, 233, 248);
	  background-repeat: no-repeat;
	  background-size: cover;
  	/* background-size: 100% 230%; */
	/* background-size: 25%; */
	/* background-position: right; */

}

.break {
  flex-basis: 100%;
  height: 0;
}

.leftSideImgText{
	width: 70%;
	height: 100%;
	color: black;
	font-size: 78px;
	font-weight: 500;
	/* margin: auto; */
	/* position: relative;
	top: 20%;
	left: 250px; */
	letter-spacing: -2.5px;
	animation: fadeIn 0.5s normal forwards;
	/* -webkit-animation-delay: 5s; */
	animation-delay: 1.3s;
	/* transition: 2s; */
	opacity: 0;
	display: flex;
	flex-wrap: wrap;
}

.leftSideImgText-upper{
	display: flex;
	/* color: black; */
	color: black;
	font-size: 78px;
	font-weight: 500;
	letter-spacing: -2.5px;
	position: relative;
	left: 55%;
	top: 18%;
}

.leftSideImgText-symbol{
	width: 35%;
	margin: 0px;
  float: right;
	font-weight: 500;
	font-size: 28px;
	letter-spacing: -2px;
	height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.leftSideImgText-lower{
	width: 60%;
	height: 100%;
	/* color: black; */
	font-size: 19px;
	font-weight: 400;
	/* margin: auto; */
	text-align: left;
	position: relative;
	top: 19%;
	left: 55%;
	letter-spacing: initial;
	animation: fadeIn 0.5s normal forwards;
	/* -webkit-animation-delay: 5s; */
	animation-delay: 1.3s;
	/* transition: 2s; */
	opacity: 0;
	/* color: black; */
	color: black;
}

.rightSideImage{
	position: relative;
	display: inline-block;
	width: 60%;

}
.rightSideImage img{
	position: absolute;
	bottom: 0px;
	left: -1px;
	max-height: 95%;
	max-width: 95%;
}


.rightSideImg{
	width: 50%;
	height: 660px;
	float: right;
	position: relative;
	right: 0px;
	animation-name: slideInRight;
	animation-duration: 1.3s;
	animation-timing-function: cubic-bezier(0.3, 0.5, 0.1, 1);
	/* background-color: rgb(0, 255, 179); */
	 background-image: url(../img/zombieBackground.jpg);

	/* background-position: 50% 150px; */
	background-color: rgb(30, 33, 41);
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
	/* background-size: 25%; */
	/* background-position: left; */
	opacity: 1;
	display: flex;
	justify-content: center;
	
	background-image: url(../img/ApocalypseImg02.jpg);
	 background-position: 50% 45%;
	background-color: rgb(30, 33, 41);
  	background-repeat: no-repeat;
	background-size: cover; 
	/* background-size: 100% 230%;   */
	/* background-size: 25%; */
	/* background-position: left; */
	
	
}

.rightSideImgText{
	width: 70%;
	height: 100%;
	/* color: black; */
	font-size: 78px;
	font-weight: 500;
	/* margin: auto; */
	/* margin-left: 340px; */
	/* text-align: center; */
	/* position: relative; */
	/* top: 18%;
	right: -80px; */
	letter-spacing: -2.5px;
	animation: fadeIn 0.5s normal forwards;
	/* -webkit-animation-delay: 5s; */
	animation-delay: 1.3s;
	/* transition: 2s; */
	opacity: 0;
	color: ghostwhite;
}

.rightSideImgText-upper {
	display: flex;
	color: white;
	font-size: 78px;
	font-weight: 500;
	letter-spacing: -2.5px;
	position: relative;
    left: -10%;
	top: 18%;
	width: 250px;
}

.rightSideImgText-upper p{
	margin: 0px;
}

.rightSideImgText-lower{
	width: 60%;
	/* height: 100%; */
	/* color: black; */
	font-size: 19px;
	font-weight: 400;
	margin: 0px;
	text-align: left;
	position: relative;
	top: 19%;
	left: -10%;
	letter-spacing: initial;
	animation: fadeIn 0.5s normal forwards;
	/* -webkit-animation-delay: 5s; */
	animation-delay: 1.3s;
	/* transition: 2s; */
	opacity: 0;
	color: ghostwhite;
}

.rightSideImgText-symbol{
	width: 35%;
	margin: 0px;
  float: right;
	font-weight: 500;
	font-size: 42px;
	height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes slideInLeft{
	0%   {left:-950px; opacity: 0;}
	/* 25%  {left:-712.5px;} */
	10%  {opacity: 0;}
  /* 50%  {left:-475px;} */
	/* 75%  {left:-237.5px;} */
	100% {left: 0px; opacity: 1;}
}

@keyframes slideInRight{
	0%   {right:-950px; opacity: 0;}
  /* 25%  {left:-712.5px;} */
	/* 50%  {left:-475px;} */
	10%  {opacity: 0;}
	/* 75%  {left:-237.5px;} */
	100% {right: 0px; opacity: 1;}
}

 .fadeIn {
  -webkit-animation-name: fadeIn;
  /* -webkit-animation-duration: 1.5s; */
	animation-name: fadeIn;

  /* animation-duration: 1.5s; */
}

 @-webkit-keyframes fadeIn {
	/* 0% {opacity: 0;} */
	/* 60% {opacity: 0;} */
	/* 100%{opacity: 1;} */
  from {opacity: .0}
  to {opacity: 1}
}

@keyframes fadeIn {
	/* 0% {opacity: 0;} */
	/* 60% {opacity: 0;} */
	/* 100%{opacity: 1;} */
  from {opacity: .0}
  to {opacity: 1}
}

* {box-sizing: border-box}
.myAutoSlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.autoSlideshow-container {
	width: 500px;
	height:500px;
  position: relative;
	/* margin: auto; */
	z-index: 5;
	display: flex;
	justify-content: center;
}

.autoSlideshow-container img{
	max-width: 500px;
	max-height: 500px;
	align-content: center;
}

/* Caption text */
.autoSlide-text {
	display: none;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.autoSlide-numbertext {
	display: none;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.autoSlide-dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}


/* -- ordinary slideshows -- */

/* #myOrdSlides {display: none}*/
 /* img {vertical-align: middle;}  */

/* Slideshow container */
/* .ordSlideshow-container {
	max-width: 500px;
	height: 500px;
  position: relative; */
  /* margin: auto; */
/* } */

/* Next & previous buttons */
/* #ordSlide-prev, #ordSlide-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
} */

/* Position the "next button" to the right */
/* #ordSlide-next {
  right: 0;
  border-radius: 3px 0 0 3px;
} */

/* On hover, add a black background color with a little bit see-through */
/* #ordSlide-prev:hover, #ordSlide-next:hover {
  background-color: rgba(0,0,0,0.8);
} */

/* Caption text */
/* #ordSlide-text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
} */

/* Number text (1/3 etc) */
/* #ordSlide-numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
} */

/* The dots/bullets/indicators */
/* #ordSlide-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
} */

/* .active, #ordSlide-dot:hover {
  background-color: #717171;
} */

/* Fading animation */
/* .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
} */

/* @-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
/*@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
} */

.playVideoBtn{
	text-decoration: none;
	/* color: rgb(60, 64, 69); */
	color: rgb(86, 158, 136);
	text-align: center;
	/* width: 35%; */
	width: 65%;
	display: flex;
	justify-content: center;
	margin: auto;
	margin-top: 30px;
}

.playVideoBtn p{
	font-family: 'Segoe UI';
	display: flex;
    flex-direction: column;
	justify-content: center;
	/* color: rgb(100, 100, 100); */
	color: rgb(66, 138, 116);
	font-size: 16px;
	margin: auto;
	margin-left: 12px;
	margin-right: 12px;
}
/* .playVideoBtn p:hover{
	filter: brightness(50%);
} */

.playVideoBtn .fa{
	display: flex !important;
    justify-content: center;
    /* flex-direction: column; */
    /* padding: 20px; */
    font-size: 32px;
    /* font-size: xx-large !important; */
	/* width: 140px; */
	width: 65%;
    height: 30px;
    /* text-align: center; */
    text-decoration: none;
    margin: 0px 0px;
    border-radius: 100px;
    /* border: 2px solid ghostwhite; */
	/* filter: hue-rotate(190deg); */

	transition: all 0.5s;
}

/* .playVideoBtn .fa:hover::before {
    filter: brightness(100%);
} */
.playVideoBtn .fa:hover{
    filter: brightness(30%);	
}
.playVideoBtn .fa:hover::after {
	filter: brightness(100%);
	/* Transition set in .playVideoBtn .fa class (it cannot be done in pseudo-elements (after&before)) */
}


 
#animatedModal{
	/* background-color: rgba(0,0,0,0.85) !important;  */
	overflow: visible !important;
	
}
/*
#animatedModal2{
	background-color: rgba(0,0,0,0.85) !important; 
} */

.videoModal{
	visibility: hidden;
	/* display: none; */
}

.myImg {
  /* border-radius: 5px; */
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
}

.myVid-stP {
	/* border-radius: 5px; */
	cursor: pointer;
	display: none;
	/* transition: 0.3s;
	text-align: center; */
  }
  
  .myVid-pw{
	/* border-radius: 5px; */
	cursor: pointer;
	/*display: none;*/
	/* transition: 0.3s;
	text-align: center; */
  }

  .myVid-hm{
	/* border-radius: 5px; */
	cursor: pointer;
	/*display: none;*/
	/* transition: 0.3s;
	text-align: center; */
  }

/* .myImg:hover { */
  /* opacity: 0.7; */
  /* z-index: 1; */
/* } */

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
	/* width: 100%; */
  margin-top: 130px;
  /* max-width: 580px; */
  /*max-width: 1000px;*/
  max-height: 750px;
  /* image-orientation: from-image; */
  border-radius: 5px;
}

.vid-modal-content {
	margin: auto;
	display: block;
	max-width: 1200px;
	max-height: 700px;
	margin-top: 150px;
	/* max-width: 580px; */
	/* image-orientation: from-image; */
  }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 8; /* Sit on top */
  /* padding-top: 200px;  */
  /* left: 0; */
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
}



/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
	height: 150px;
	z-index: 6;
}

/* Add Animation */
.modal-content, #caption, .vid-modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  /* top: 185px; */
	/* right: 485px; */
	width: 100%;
	height: 100%;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  /* cursor: pointer; */
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* 100% Video Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.vid-modal-content {
	  max-width: 100%;
	  max-height: 40%;
	}
  }

/* /--------/ */
/* .skewBlock{
	display: block;
	background-color: black;
	width: 100%;
	height: 10%;
	transform: skew(0deg,-5deg);
	position: fixed;
} */

.slideshow-container {
	width: 550px;
	height: 500px;
  position: relative;
	margin: auto; 
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/* transform: skew(0deg,-10deg); */
	/* background-color: blue; */
}

.slideshow-container img{
	/* max-width: 1000px;
	max-height: 500px; */
	/* transform: skew(0deg,10deg); */
	width: 100%;
	height: 100%;
	align-content: center;
	border-radius: 2px;
	/* -webkit-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
	/* -moz-box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
	/* box-shadow: 0px 0px 8px -2px rgb(150, 150, 150); */
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  /* width: auto; */
	/* margin-top: -22px; */
  /* padding: 16px; */
  /* color: rgb(189, 189, 189); */
  color: rgb(232, 232, 232);
  font-weight: 600;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 3px;
  background-color: rgba(122, 209, 186, 0.6);
  /* border-radius: 0 3px 3px 0; */
}

.prev{
	left: 0;
	/* margin-left: -60px;
	padding: 20px 20px; */
	margin-left: 7px;
	padding: 7px 7px 5px 5px;
	height: 55px;
	width: 40px;
	display: flex;
	justify-content: center;
	opacity: 1;
	z-index: 6;
}

/* Position the "next button" to the right */
.next {
  	right: 0;
	/* border-radius: 3px 0 0 3px; */
	/* margin-right: -60px;
	padding: 20px 20px; */
	margin-right: 7px;
	height: 55px;
	width: 40px;
	padding: 7px 5px 5px 7px;
	display: flex;
	justify-content: center;
	opacity: 1;
	z-index: 6;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	/* background-color: rgba(95, 95, 95, 0.8); */
	/* filter: brightness(70%); */
	/* opacity: 1; */	
}

.slideshow-container .links{
	z-index: 5;
	opacity: 0;
	transition: 0.5s;
}

.slideshow-container:hover .links{
	opacity: 1;
}

/* Caption text */
.text {
	display: none;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom:20px;
  width: 100%;
  text-align: center;
}
.mySlides {
  display:none;
  width: 100%; 
  height: 500px;
}
.active-slide {
  display:block;
}
/* Number text (1/3 etc) */
.numbertext {
	display: none;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
	/* display: none; */
  cursor:pointer;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* .active, .dot:hover { */
	/* background-color: rgba(255, 100, 75, 0.8); */
	/* background-color: #ff8f3f; */
	/* background-color: sandybrown; */
	/* color: sandybrown; */
	/* background: rgba(124, 213, 255, 0.5); */
	/* border-radius: 30px; */
/* } */

/* Fading animation */
.slideshowFade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



/*.active {
  background-color: #717171;
}*/

/* Fading animation */
#fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
	.autoSlide-text {font-size: 11px}
	.prev, .next,.text {font-size: 11px}
}

#gotoNextPro{
  margin-top: -250px;        /* Size of fixed header */
  padding-bottom: 300px;
  display: block;
}

#gotoHeader2{
  margin-top: -10px;
  padding-bottom: 50px;
  display: block;
}





#section2{
	/*height: 800px;*/
  color:white;
  display: flex;
	/*background-color: yellow;*/
	/* background-color: rgb(16, 16, 18); */
	/* background-color: rgb(23, 23, 23); */
	/* background-color: rgb(35, 37, 40); */
	background-color: rgb(25, 27, 30);
  /*padding-top: 110px;*/
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
	min-height: 800px;
	z-index: 8;
	/* margin-bottom: -100px; */
}


#section2Text{
	max-width: 500px;
	/* margin: auto; */
	z-index: 5;
}

#section2Img{
	max-width: 500px;
	margin: auto;
	z-index: 5;
}

#section2Header{
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#027fb9, #fdda99);  */
	width: 75%;
	height: 70px;
	display: flex;
	justify-content: center;
	/* flex-direction: column; */
	/* align-items: center; */
	text-align: center;
	font-size: 15px;
	font-style: normal;
	letter-spacing: 5px;
	font-weight: 200;
	/* font-weight: bold; */
	color:rgb(200,200,200);
	margin: auto;
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-bottom: 20px; */
	z-index: 7;
	/* border-bottom: 2px solid rgba(169, 169, 169, 0.2); */
	/* border-bottom: 2px solid rgb(20, 21, 23); */
	/* border-bottom: 2px solid rgb(45, 47, 50); */
}

#section2Header a{
	/* background: ghostwhite; */
	/* background: rgb(16, 16, 20); */
	/* background-color: rgb(23, 23, 28); */
	/* background-color: rgb(35, 37, 40); */
	background-color: rgb(25, 27, 30);

	position: relative;
	/* top: 185px; */
	top: 56px;
	width: 500px;
	height: 20px;
	/* color:rgb(200,200,200); */
	/* color: rgb(142, 219, 196); */
	color: rgb(130,130,130);
}

.section2HeaderLink{
	text-decoration: none;
	color:ghostwhite;
}

.section2HeaderLink:hover{
	color: rgb(29, 39, 53);
	transition: 0.5s;
}

.section2HeaderLink:not(:hover){
	color:rgb(90, 90, 90);
	transition: 0.5s;
}

#backToPortTextLink a{
	text-decoration: none;
	color: ghostwhite;
	background-color: sandybrown;
	padding: 4px 15px;
	border-radius: 30px;
}

#backToPortTextLink a:hover{
	background-color: lightskyblue;
	transition: 0.5s;
}

#backToPortTextLink a:not(:hover){
	background-color: sandybrown;
	transition: 0.5s;
}


.gridwrapper{
	width: 75%;
	/* width: 85em; */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  /* grid-template-rows: 350px 350px;
  grid-template-columns: 350px 350px 350px;
  grid-gap: 80px; */
	/* background-color: ghostwhite; */
	/* background-color: rgb(20, 21, 23); */
  color: #444;
	z-index: 6;
	/* height: 750px; */
	margin: auto;
	margin-top: 30px;
	margin-bottom: 100px;
	/* padding-top: 40px; */
	/* padding-bottom: 60px; */
	padding: 0px 50px 50px 50px;
}

.gridViewtip{
	height: 100%;
  /* margin: -10px -10px -10px -10px; */
}
.gridtext{

}

.gridViewtip .gridtext{
	visibility: hidden;
	text-decoration: none;
	display: flex;
  flex-direction: column;
  /* height: 100%; */
	justify-content: flex-end;
	text-align: left;
	font-size: 16px;
	/* font-weight: 600; */
	width: 100%;
	height: 100%;
	 margin: auto;
	 z-index: 10;
	 /* margin-top: 30px;  */
}

.gridtext .lower{
	width: 50%;
	margin: 0px auto;
	border-radius: 0px;
	padding: 10px 0px 10px 0px;
}

.gridViewtip:hover .gridtext{
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
	/* background-color: rgba(30, 30, 30, 0.5); */

}

.gridViewtip:hover{
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
	/* background-color: rgba(30, 30, 30, 0.5); */

}

.gridTextStyle{
	/* background-color: rgb(208, 208, 215); */
	background-color: white;
	/* border-radius: 50px; */
	padding: 10px 10px 10px 10px;
	z-index: 10;
}

/*trigger gridviewtip on hover in index*/
.box:hover .gridViewtip .gridtext{
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
	/* background-color: rgba(30, 30, 30, 0.5); */

}

.box {
	width: 426px;
	height: 340px;
	/* margin: 50px 0px 0px 30px; */
	margin: 15px 0px 5px 0px;
	/* margin-right: 50px; */
	/* margin-bottom: 25px; */
  	background-color: ghostwhite;
  	color: #fff;
  	/*border-radius: 5px;*/
  	font-size: 150%;
  	cursor: pointer;
  	display: flex;
 	justify-content: center;
	align-items: center;
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(100, 100, 100);
	-moz-box-shadow: 0px 0px 10px 0px rgb(100, 100, 100);
	box-shadow: 0px 0px 5px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 10px 5px rgb(0 0 0 / 10%);

}

.box:hover {
	/* animation: boxFadeOut 6s; */
	/* filter: hue-rotate(180deg); */
	/* opacity: 0.6; */
	text-decoration: none;
	/* width: 465px; */
	width: 431px;
	height: 345px;
	animation: easeUpBoxSize 0.2s ease;
	/* animation: boxBackColFadeIn 0.2s ease; */
	/* background-color: rgba(68, 143, 255, 0.5); */
}

.box a:hover {
	text-decoration: none;

}

.box:not(:hover){
	animation: easeDownBoxSize 0.2s ease;
}

.box1:hover ,.box2:hover ,.box3:hover ,.box4:hover ,.box5:hover ,.box6:hover  {
	/* animation: boxFadeOut 0.2s ease; */
	/* filter: hue-rotate(180deg); */
	/* opacity: 0.8; */
	filter:brightness(120%);
}

.boxBackColFadeIn {
  -webkit-animation-name: boxBackColFadeIn;
  -webkit-animation-duration: 1.5s;
  animation-name: boxBackColFadeIn;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxBackColFadeIn {
  from {background-color: ghostwhite;}
  to {background-color: rgba(68, 143, 255, 0.5);}
}

@keyframes boxBackColFadeIn {
  from {background-color: ghostwhite;}
  to {background-color: rgba(68, 143, 255, 0.5);}
}


.boxBackColFadeOut {
  -webkit-animation-name: boxBackColFadeOut;
  -webkit-animation-duration: 1.5s;
  animation-name: boxBackColFadeOut;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxBackColFadeOut {
  from {background-color: rgba(68, 143, 255, 0.5);}
  to {background-color: ghostwhite;}
}

@keyframes boxBackColFadeOut {
  from {background-color: rgba(68, 143, 255, 0.5);}
  to {background-color: ghostwhite;}
}


.boxFadeIn {
  -webkit-animation-name: boxFadeIn;
  -webkit-animation-duration: 0.2s;
  animation-name: boxFadeIn;
  animation-duration: 0.2s;
}

@-webkit-keyframes boxFadeIn {
  from {opacity: .0}
  to {opacity: 1}
}

@keyframes boxFadeIn {
  from {opacity: .0}
  to {opacity: 1}
}


.boxFadeOut {
  -webkit-animation-name: boxFadeOut;
  -webkit-animation-duration: 1.5s;
  animation-name: boxFadeOut;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxFadeOut {
  from {opacity: 1;}
  to {opacity: 0.8; filter:brightness(120%);}
}

@keyframes boxFadeOut {
  from {opacity: 1;}
  to {opacity: 0.8; filter:brightness(120%);}
}

.easeUpBoxSize {
  -webkit-animation-name: easeUpBoxSize;
  -webkit-animation-duration: 1.5s;
  animation-name: easeUpBoxSize;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeUpBoxSize {
  from {width: 426px; height: 340px;}
  to {width: 431px; height: 345px;}
}

@keyframes easeUpBoxSize {
  from {width: 426px; height: 340px;}
  to {width: 431px; height: 345px;}
}

.easeDownBoxSize {
  -webkit-animation-name: easeDownBoxSize;
  -webkit-animation-duration: 1.5s;
  animation-name: easeDownBoxSize;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeDownBoxSize {
  from {width: 431px; height: 345px;}
  to {width: 426px; height: 340px;}
}

@keyframes easeDownBoxSize {
  from {width: 431px; height: 345px;}
  to {width: 426px; height: 340px;}
}

/* -- Small ---*/
.easeUpBoxSize-small {
  -webkit-animation-name: easeUpBoxSize-small;
  -webkit-animation-duration: 1.5s;
  animation-name: easeUpBoxSize-small;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeUpBoxSize-small {
  from {width: 200px; height: 200px;}
  to {width: 205px; height: 205px;}
}

@keyframes easeUpBoxSize-small {
  from {width: 200px; height: 200px;}
  to {width: 205px; height: 205px;}
}

.easeDownBoxSize-small {
  -webkit-animation-name: easeDownBoxSize-small;
  -webkit-animation-duration: 1.5s;
  animation-name: easeDownBoxSize-small;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeDownBoxSize-small {
  from {width: 205px; height: 205px;}
  to {width: 200px; height: 200px;}
}

@keyframes easeDownBoxSize-small {
  from {width: 205px; height: 205px;}
  to {width: 200px; height: 200px;}
}

.box video{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
	top: 0%;
}

.box .box1 {
	/* background: url(../img/studentProjects/project6/cut05.JPG); */
	/*background: url(../img/personalWork/shield/shield.jpg);*/
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	background-color: rgb(10, 10, 10);
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	object-fit: contain;
	position: relative;
}

.box .box2 {
	/* background: url(../img/studentProjects/project5/SceneUnity.JPG); */
	/*background: url(../img/personalWork/sunGlasses/TintedSunglasses02.jpg);*/
	background: url(../img/personalWork/shield/shield.jpg);
	
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
}


.box .box3 {
	/*background: url(../img/personalWork/isometric/FreeLand.jpg);*/
	background: url(../img/personalWork/locomotive/Locomotive.jpg);
	/* background: url(../img/studentProjects/project4/Cut03.JPG); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
}

.box .box4 {
	background: url(../img/studentProjects/project6/cut05.JPG);
	
	/* background: url(../img/studentProjects/project3/Cut05.JPG); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
}

.box .box5 {
	background: url(../img/studentProjects/project5/SceneUnity.JPG);
	
	/* background: url(../img/studentProjects/project2/cut08.png); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
}

.box .box6 {
	background: url(../img/studentProjects/project4/Cut03.JPG);
	/* background: url(../img/studentProjects/project3/Cut05.JPG); */
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	/*border-radius: 2px;*/
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
}


.nextProBtn{
	width: 75%;
	height: 100px;
	/* border-bottom: 2px solid rgba(169, 169, 169, 0.2); */
	margin: auto;
}

.nextStProGoTo{
	position: relative;
	top: -200px;
	height: 0px;
	width: 100%;
}

.portfolioGoTo{
	position: relative;
	top: -80px;
	height: 0px;
	width: 100%;
}

.studProGoTo{
	position: relative;
	top: -180px;
	height: 0px;
	width: 100%;
}

.personalGoTo{
	position: relative;
	top: -45px;
	height: 0px;
	width: 100%;
}

.aboutGoTo{
	position: relative;
	top: -160px;
	height: 0px;
	width: 100%;
}

.contactGoTo{
	position: relative;
	top: -100px;
	height: 0px;
	width: 100%;
}


.hl1{
	/* border-bottom: 12px solid dimgrey; */
	/* background-color: rgb(70, 80, 80); */
	/* background-image: url("/img/arrow-down.jpg"); */
	/* border-radius: 10px;
	height: 7px; */
	/* margin-top: 100px; */
	/* background-image: url(../img/lights.jpg); */
	/* background-blend-mode: overlay; */
	/* background-attachment: fixed;
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	filter: hue-rotate(200deg); */
	/* background-color: rgb(124, 176, 255); */
	/* background-color: #3bc1ff; */
	width: 100%;
	height: 100%;
	 margin: auto;
	/*margin-top: 120px;
	margin-bottom: 120px; */
	/* border-radius: 500px; */

	display: flex;
	justify-content: center;
	/* padding: 20px auto 20px auto; */
	padding-top: 20px;
	padding-bottom: 20px;
	/* padding-left: auto;
	padding-right: auto; */
	/* visibility: hidden; */
	z-index: 7;
}

.nextProBtn:hover .hl1{
	/* visibility: visible; */
	background-color: sandybrown;
	-webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10);
	-moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	transition: 0.5s;
}


/* .hl1:hover{
	/* background-color: rgb(255, 187, 124); */

	/* background-color: sandybrown;
	-webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10);
	-moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	transition: 0.5s; */
/*} */

.hl1:not(:hover){
	/* background-color: rgba(201, 201, 250, 0.5); */
	/* background-color: rgba(135, 206, 250, 0.5); */
	transition: 0.5s;

}

.emptyHeader{
	margin-top: -125px;
}



#section3 {
  /*height: 800px;*/
  color:rgb(0, 0, 0);
  display: flex;
  /*background-color: yellow;*/
  /*padding-top: 110px;*/
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  min-height: 800px;
}

.section3TitleText{
	margin: 0;
	border-bottom: 1px solid darkgray;
	padding-bottom: 20px;
	font-style: normal;
	font-size: 28px;
}

.section3TextDateSemester{
	display: flex;
  justify-content: space-between;
	color: rgb(169, 169, 169);
	/* color: rgb(102, 179, 156); */
	font-weight: 300;
}
.section3TextDateSemester p{
	margin-top: 5px;
}
.section3MainText{
	color: black;
}

.section3Keywords{
	color: darkgray;
	font-weight: 300;
}

#section3Text{
	width: 45%;
	/* margin: auto; */
	z-index: 5;
	/* margin-left: 40px; */
}

.section3TextPad_unEven{
	margin-left: 40px;
	margin-right: 30px;
}

.section3TextPad_Even{
	margin-right: 40px;
	margin-left: 30px;
}




#section3HeaderText{
	/* transform: skew(0deg, 2deg); */
	/* background-color: rgb(252, 252, 252); */
	position: relative;
	top: 45px;
	font-size: 60px;
	font-weight: 500;
	color:rgb(50, 50, 50);
	font-family: 'Fredericka the Great';
	letter-spacing: 10px;
}
#section3HeaderTextLower{
	/* transform: skew(0deg, 2deg); */
	/* background-color: ghostwhite; */
	position: relative;
	top: 36px;
	font-size: 18px;
	font-weight: 500;
	color:rgba(50, 50, 50, 0.4);
	letter-spacing: 1.5px;
}

#section3Img{
	max-width: 500px;
	margin: auto;
	z-index: 5;
}

#section3header{
	/*max-width: 500px;*/
	/* background: linear-gradient(#77cce6, #cef4ff); */
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#111111, #242424); */
	/* transform: skew(0deg, -2deg) translateY(-32px) scale(1.02); */
	width: 75%;
	height: 200px;
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	/* font-size: 38px; */
	font-style: normal;
	/* font-weight: bold; */

	margin: auto;
	margin-top: 50px;
	/* margin-top: 50px; */
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-bottom: -50px; */
	/* border-bottom: solid 2px darkgray; */
	/* margin-bottom: 20px; */
	/* border-top: 2px solid rgba(169, 169, 169, 0.2); */
	z-index: 5;

}

/* #lastStPr{ */
	/* z-index: 6; */
	/* margin-bottom: 30px */
/* } */


#section4 {
  /*height: 800px;*/
  color:rgb(0, 0, 0);
  display: flex;
  /*background-color: yellow;*/
  /*padding-top: 110px;*/
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  min-height: 800px;
  margin-top: 55px;
}

#section4Text{
	max-width: 500px;
	/* margin: auto; */
	z-index: 5;
}
/*
#section3HeaderText{
	transform: skew(0deg, -2deg);
} */

#section4Img{
	max-width: 500px;
	margin: auto;
	z-index: 5;
}

/* #section3header{


	background: linear-gradient(#111111, #242424);
	transform: skew(0deg, 2deg) translateY(-32px) scale(1.02);
	vertical-align: top;
	width: 105%;
	height: 200px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	border-radius: 3px;

	font-size: 38px;
	font-style: normal;
	font-weight: bold;
	color:ghostwhite;
	margin: auto;
	margin-bottom: -50px;
	-webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10);
	-moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);

	z-index: 5;
} */

#section4HeaderText{
	/* transform: skew(0deg, 2deg); */
	/* background-color: rgb(252, 252, 252); */
	position: relative;
	top: 45px;
	font-size: 60px;
	font-weight: 500;
	color:rgb(50, 50, 50);
	font-family: 'Fredericka the Great';
	letter-spacing: 10px;
}
#section4HeaderTextLower{
	/* transform: skew(0deg, 2deg); */
	/* background-color: ghostwhite; */
	position: relative;
	top: 36px;
	font-size: 18px;
	font-weight: 500;
	color:rgba(50, 50, 50, 0.4);
	letter-spacing: 1.5px;
}


#section4header{
	/*max-width: 500px;*/
	/* background: linear-gradient(#77cce6, #cef4ff); */
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#111111, #242424); */
	/* transform: skew(0deg, -2deg) translateY(-32px) scale(1.02); */
	width: 75%;
	height: 200px;
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	/* font-size: 38px; */
	font-style: normal;
	/* font-weight: bold; */

	margin: auto;
	margin-top: 50px;
	/* margin-top: 50px; */
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-bottom: -50px; */
	/* border-bottom: solid 2px darkgray; */
	/* margin-bottom: 20px; */
	/* border-top: 2px solid rgba(169, 169, 169, 0.2); */
	z-index: 5;

}


#section5 {
  /*height: 800px;*/
  color:rgb(0, 0, 0);
  display: flex;
  /*background-color: yellow;*/
  /*padding-top: 110px;*/
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
	/* min-height: 800px; */

	/* background-image: url("../img/copenhagen04.jpg");
	background-attachment: fixed;
	background-color: rgba(255,255,255,0.9);
  background-blend-mode: lighten;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; */
	
	margin-top: 40px;
}


.section5TitleText{
	margin: 0;
	/* border-bottom: 1px solid darkgray; */
	padding-bottom: 20px;
	font-style: normal;
	font-size: 50px;
	/* color: white; */
	color: rgb(132, 219, 196);
}

.section5TitleText-lower{
	margin: 0;
	/* color: rgb(90, 90, 90); */
	color: white;
	/* border-bottom: 1px solid darkgray; */
	padding-bottom: 10px;
	/* font-style: normal; */
	font-size: 28px;
	font-weight: 300;
}
.section5MainText p{
	color: white;
}


#section5Text{
	max-width: 500px;
	/* margin: auto; */
	z-index: 5;
}
/*
#section4HeaderText{
	transform: skew(0deg, 2deg);
} */

/* #section4Img{
	max-width: 500px;
	margin: auto;
	z-index: 5;
} */


#section5Img{
	display: flex;
	justify-content: center;
	width: 500px;
	height: 500px;
	/* margin: auto; */
	 z-index: 5;
	/* border-radius: 300px; */
	/* margin: 50px 0px; */
	/* filter: grayscale(0.9); */
	/* filter: saturate(0.5) brightness(1.05) drop-shadow(2px 8px 4px rgb(150,150,150)); */
	/* filter: saturate(0.7) brightness(1.0) drop-shadow(5px 5px 4px rgb(170,170,170)); */
	/* filter: saturate(0.7) brightness(1.0) drop-shadow(5px 5px 4px rgb(200,200,200)); */
	filter: saturate(0.7) brightness(1.0) drop-shadow(5px 5px 4px rgb(45,45,45));

	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10);
	-moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
}

#section5Img img{
	/* max-width:400px; */
	 max-height: 500px;
		/* border-radius: 300px; */
		/* border: 5px solid ghostwhite; */
}

#section5HeaderText{
	/* transform: skew(0deg, 2deg); */
	/* background-color: rgb(252, 252, 252); */
	position: relative;
	top: 45px;
	font-size: 60px;
	font-weight: 500;
	color:rgb(50, 50, 50);
	font-family: 'Fredericka the Great';
	letter-spacing: 10px;
}
#section5HeaderTextLower{
	/* transform: skew(0deg, 2deg); */
	/* background-color: ghostwhite; */
	position: relative;
	top: 36px;
	font-size: 18px;
	font-weight: 500;
	color:rgba(50, 50, 50, 0.4);
	letter-spacing: 1.5px;
}


#section5header{
	/*max-width: 500px;*/
	/* background: linear-gradient(#77cce6, #cef4ff); */
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#111111, #242424); */
	/* transform: skew(0deg, -2deg) translateY(-32px) scale(1.02); */
	width: 75%;
	height: 150px;
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	/* font-size: 38px; */
	font-style: normal;
	/* font-weight: bold; */

	margin: auto;
	/* margin-top: 50px; */
	/* margin-top: 50px; */
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-bottom: -50px; */
	/* border-bottom: solid 2px darkgray; */
	/* margin-bottom: 20px; */
	/* border-top: 2px solid rgba(169, 169, 169, 0.2); */
	z-index: 5;

}




/* #section4header{

	background: linear-gradient(#111111, #242424);
	transform: skew(0deg, -2deg) translateY(-32px) scale(1.02);
	vertical-align: top;
	width: 105%;
	height: 200px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	border-radius: 3px;

	font-size: 38px;
	font-style: normal;
	font-weight: bold;
	color:ghostwhite;
	margin: auto;
	margin-bottom: -40px;
	-webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10);
	-moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);
	box-shadow: 0px 0px 10px -2px rgb(10, 10, 10);

	z-index: 5;
} */
.contact-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 margin: 70px auto;
 /* width: 75%; */
 width: 75%;
 /* width: 85em; */
 /* max-width: 105em; */

}

#section6 {

  /*height: 800px;*/
  color:white;
  display: flex;
  /*background-color: yellow;*/
  /*padding-top: 110px;*/
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
	min-height: 800px;
	width: 100%;
	background-color: #232528;
	/* margin-top: 40px; */
}

#section6Text{
	max-width: 500px;
	/* margin: auto; */
	z-index: 5;
}

#section6Img{
	max-width: 500px;
	margin: auto;
	z-index: 5;
}

#section6HeaderText{
	/* transform: skew(0deg, 2deg); */
	/* background-color: rgb(252, 252, 252); */
	position: relative;
	top: 45px;
	font-size: 38px;
	font-weight: 500;
	color:rgb(224, 224, 224);
	font-family: 'poppins';
	letter-spacing: 2px;
}
#section6HeaderTextLower{
	/* transform: skew(0deg, 2deg); */
	/* background-color: ghostwhite; */
	position: relative;
	top: 36px;
	font-size: 18px;
	font-weight: 500;
	color:rgba(50, 50, 50, 0.4);
	letter-spacing: 1.5px;
}


#section6header{
	/*max-width: 500px;*/
	/* background: linear-gradient(#77cce6, #cef4ff); */
	/* background: linear-gradient(#3bc1ff, #fdda99); */
	/* background: linear-gradient(#111111, #242424); */
	/* transform: skew(0deg, -2deg) translateY(-32px) scale(1.02); */
	width: 75%;
	height: 100px;
	display: flex;
	color: ghostwhite;
	/* justify-content: center; */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	font-size: 38px;
	font-style: normal;
	/* font-weight: bold; */
	margin: auto;
	z-index: 5;
}


/* #section5header{
	border-radius: 3px;
	vertical-align: top;
	width: 100%;
	height: 150px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;

	font-size: 38px;
	font-style: normal;

	color:ghostwhite;
	margin: auto;
	z-index: 5;
} */

#gotoSec6{
	margin-top: -10px;
	padding-bottom: 50px;
	display: block;
}

* {
  box-sizing: border-box;
}


.form-title{
	width: 100%;
	text-align: left;
	margin-bottom: 15px;
	font-size: 25px;
	letter-spacing: 1.5px;
	color: rgb(132, 219, 196);
}

.form-alert{

}

.error{
	/* background-color: red; */
	color: red;
	font-size: 16px;
}

/* Style inputs */
input[type=text], select, textarea {
  /* width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
	resize: vertical; */

	width: 100%;
  /* padding-bottom: 12px; */
	/* background-color: transparent; */
	background-color: #33353A;
  border: 1px solid transparent;
  /* margin-top: 10px; */
	margin-bottom: 10px;
	padding: 6px 13px 6px 13px;
  resize: vertical;
  /* border-bottom: 2px solid rgb(133, 133, 133); */
  font-size: 15px;
	font-family: "poppins";
	color: ghostwhite;

}

input[type=submit] {
	/* background-color: #4CAF50; */
	background-color: transparent;
  color: ghostwhite;
	padding: 10px 20px;
	max-width: 30%;
	min-width: 30%;
  border: 2px solid ghostwhite;
	cursor: pointer;
	/* border-radius: 25px; */
	font-family: "Poppins";
	text-transform: uppercase;
	font-size: 17px;
	margin: auto;

}

input[type=submit]:hover {
	/* background-color: #45a049; */
	background-color: #33A58E;
	transition: 0.5s ease;
}

/* Style the container/contact section */
.contact-container {
	/* transform: scale(1.02); */
	/* transform: scale(1.02); */
	/* transform: scale(0.98); */
  /* border-radius: 5px; */
	background-color: #232528;
	/* background-image: linear-gradient(#1b1b1b, #1b1b1b, #0c0c0c); */
	/* background-image: linear-gradient(#141414, #202020, #141414); */
	/* padding: 10px 100px 100px 100px; */
	z-index: 5;
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(10, 10, 10); */
	/* -moz-box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* box-shadow: 0px 0px 10px -2px rgb(10, 10, 10); */
	/* margin-top: 8px; */
}

/* iframe.maps{
	border-radius: 50px;
} */

/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 40%;
  /* margin-top: 6px; */
	/* padding-top: 25px; */
	font-size: 17px;
	display: flex;
	justify-content: flex-end;

}

.column2 {
  float: left;
  width: 28%;
  margin-top: 10px;
	/* padding-top: 25px; */
	font-size: 17px;
	display: flex;
	justify-content: flex-end;

}

.row{
	/* transform: scale(.98); */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* Clear floats after the columns */
/* .row:after {
  content: "";
  display: table;
  clear: both;
} */

.contact-form{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* width: 80%; */
}


::placeholder{
	color: rgb(200, 200, 200);
}


.contactInfo-bar{
	/* float: left; */
	list-style: none;
	display: flex;
	justify-content: center;
	width: 25%;
	/* border-bottom: 2px solid gray; */
	/* text-align: center; */
	/* margin-top: 20px; */
	/* margin-left: 30px; */
	/* margin-right: 140px; */
}

.contactInfo-bar ul{
	padding: 0px;
	margin: 0px;
	/* list-style: none; */
}

.contactInfo-bar li{

	list-style: none;
}

.contactInfo-bar li p{
	margin-top: 0px;
	margin-bottom: 5px;
}

.contactInfo-bar ul h1{
	font-weight: normal;
	font-size: 25px;
	margin-bottom: 15px;
	margin-top: 0px;
	letter-spacing: 1.5px;
	color: rgb(132, 219, 196);
	/* border-bottom: 2px solid gray; */
}



/* --- Social media icons --- */

.socialIcons-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* float: left; */
	text-align: center;
	width: 100%;
	/* margin-top: 10px; */
	/* border-top: 2px solid rgb(39, 39, 39); */
	/* display: flex;
	flex-wrap: wrap;
	justify-content: center; */
	margin-top: 80px;
	padding: 10px;
	border-top: 2px solid rgb(41, 43, 48);
	/* border-bottom: 2px solid #33353A; */
	/* margin-right: 20px; */
}


.socialIcons-container-text{
	width: 100%;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 30px 0px 20px 8px;
	/* margin-left: 8px; */
	/* color: darkgray; */
	color: rgb(132, 219, 196);
}


.socialIcons-container .fa {
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    /* padding: 20px; */
    font-size: 30px;
    font-size: xx-large !important;
    width: 65px;
    height: 65px;
    /* text-align: center; */
    text-decoration: none;
    margin: 0px 0px;
    border-radius: 100px;
    /* border: 2px solid ghostwhite; */
    /* filter: hue-rotate(190deg); */
}

.fa:hover {
		/* opacity: 0.9; */
		-webkit-filter: brightness(200%);
}

.fa-facebook {
	/* background: #3B5998; */
	/* background: rgb(30, 30, 30); */
  color: rgb(200, 200, 200);
}

.fa-google {
  background: #dd4b39;
	/* color: white; */
	color: rgb(200, 200, 200);
}

.fa-linkedin {
	/* background: #007bb5; */
	/* background: rgb(30, 30, 30); */
  color: rgb(200, 200, 200);
}

.fa-youtube {
	/* background: #bb0000; */
	/* background: rgb(30, 30, 30); */
  color: rgb(200, 200, 200);
}

.fa-skype {
  background: #00aff0;
  color: rgb(200, 200, 200);
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1570px) {
  
}





.footer-section-content-wrapper{
	/* Using em for uptimal browser zoom*/
 /*min-width: 400px;*/
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 /* margin: auto; */
 /* margin-top: 0px; */
 margin: 0px auto;
 /* width: 75%; */
 width: 75%;
 /* width: 85em; */
 /* max-width: 105em; */

}

.footer{
	/* display: flex; */
	width: 100%;
	background-color: black;
	/* min-height: 130px; */
	color:gray;
}

.footer-text-left{
	margin: auto;
	margin-left: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	height: 130px;
}

.footer-text-middle{
	/* margin: auto; */
	display: flex;
	/* flex-direction: column; */
	justify-content: center;
	align-items: center;
	width: 3%;
	height: 30px;
	font-size: 40px;
	margin: auto;
	margin-right: 0px;
	/* height: 100px; */
}

.footer-text-middle:hover{
	filter: brightness(150%);
	cursor: pointer;
}

.footer-text-right{
	margin: auto;
	margin-right: 0px;
	display: flex;
	/* flex-direction: column; */
	justify-content: flex-end;
	align-items: center;
	width: 35%;
	height: 130px;
}

#floatingBtn {
	/* display: none; */
	opacity: 0;
  position: fixed;
  bottom: -70px;
  right: 20px;
  z-index: 99;
	/* font-size: 25px; */
  border: none;
	outline: none;
  /* background-color: rgba(51, 53, 58, 0.8); */
  background-color: rgba(15, 15, 15, 0.8);
  color: white;
  cursor: pointer;
	padding: 0px;
	border-radius: 4px;
	width: 60px;
	height: 60px;
	border-radius: 50px;
	/* transform: rotate(-90deg); */
	text-align: center;
	/* line-height: 0px; */
	transition: opacity 0.8s, bottom 0.8s, background-color 0.3s;
	/* transition: 0.8s; */
	/* transition: filter 0.5s; */
}

#floatingBtn:hover {
	/* background-color: #555; */
	/* filter: brightness(350%); */
	background-color: rgba(70, 70, 70, 0.8);
}



.btn{

}


/* Style the active class, and buttons on mouse-over */
.active {
	/* background-image: linear-gradient(red #ff4848, red); */
  /* background-color: darkred; */
  /* color: white; */
  background-color: rgba(112, 199, 176, 1);
}

/* Style the active class, and buttons on mouse-over */
.nav-active {
	/* background-image: linear-gradient(red #ff4848, red); */
  /* background-color: darkred; */
  /* rgb(110, 134, 146); */
   color: rgb(110, 134, 146) !important; 
}


@media screen and (max-width: 1857px) {
  .gridwrapper{
		justify-content: space-evenly;
	}
}

@media screen and (max-width:1740px){
	#section3Text{
		width: 80%;
		margin: 50px auto 70px auto;
	}
	.secStPro-sub-page-section .section-content-wrapper{
		flex-direction: column-reverse;
	}
	.fourthStPro-sub-page-section .section-content-wrapper{
		flex-direction: column-reverse;
	}
	.sixthStPro-sub-page-section .section-content-wrapper{
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 1568px) {
  .gridwrapper{
		justify-content: space-evenly;
	}
	.slideshow-container{
		max-width: 450px;
		max-height: 400px;
		display: flex;
		justify-content: center;
		margin: 0px auto;
		margin-bottom: 90px;
		line-height: 50%;
	}
	.slideshow-container img{
		/* max-width: 450px; */
		 max-height: 400px;
	}
	.mySlides{
		height: 400px;
	}
	.prev, .next{
		top: 45%;
		transition: none;
		align-items: center;
		padding-bottom: 10px;
	}
}

@media screen and (max-width: 1500px) {
  #section3Text{
		width: 80%;
		margin: 0px auto 70px auto;
	}
	
	.gameNAppsStPro-sub-page-section .gameNAppsStPro-section-content-wrapper{
		 /* flex-direction: column; */
		/* align-items: center;  */
	}
	.gamesNApp-BarOne{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 25px;
	}
	.gamesNApp-BarTwo{
		width: 100%;
		margin-right: 0px;
	}
	.gamesNApp-BarThree{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 25px;
	}
	.gamesNApp-BarFour{
		width: 100%;
		margin-right: 0px;
	}
	.gamesNApp-BarFive{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 25px;
	}
	.gamesNApp-BarSix{
		width: 100%;
		margin-right: 0px;
	}
	#section5Img{
		max-width: 350px;
		max-height: 350px;
		margin: auto;
	}
}



@media screen and (max-width: 1500px) {
	.column, input[type=submit] {
    width: 100%;
		margin-top: 0;
		display: flex;
    justify-content: center;
	}
	.main-section{
  	/* height: 5000px; */
	}
	.contactInfo-bar ul{
		display: flex;
    flex-direction: column;
    justify-content: center;
	}
  #main-header {
    flex-wrap: wrap;
    justify-content: center; /* The width is 100%, when the viewport is 800px or smaller */
  }
   .main-section{
  	/* height: 16000px; */
	}
	p span{
		padding-bottom: 310px;
	}
	.underCon{
		max-width: 1450px;
	}
	.header-img{
		max-width: 65px;
	}
	.name{
		font-size: 25px;
	}
	.occupation{
		font-size: 12px;
	}
	.header-text{
		min-width: 180px;
		line-height: 50%;
	}
	.navbar li{
		margin: 0px;
		padding: 0px;
	}
	.maps{
	    width: 250px;
		height: 250px; 
	}
	/* .leftSideImg {
		height: 500px;
		transition: 0.5s;
	}
	.rightSideImg {
		height: 500px;
		transition: 0.5s;
	} */

}

@media screen and (max-width: 1500px) {
	.underCon{
		max-width: 1200px;
	}
	.maps{
	    width: 250px;
		height: 250px; 
	}
	.leftSideImg {
		height: 500px;
		transition: 0.5s;
	}
	.rightSideImg {
		height: 500px;
		transition: 0.5s;
	}

	.leftSideImgText-upper {
		font-size: 65px;
		left: 12%;
		top: 28%;
		height: 60px;
		margin: 0 auto;
		width: 60%;
	}
	.leftSideImgText-symbol {
		font-size: 18px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		top: 34%;
		left: 13%;
		/* text-align: center; */
		font-size: 15px;
		margin: 0 auto;
	}

	.rightSideImgText-upper {
		font-size: 65px;
		left: 19%;
		top: 28%;
		height: 60px;
		width: 60%;
	}
	.rightSideImgText-symbol {
		font-size: 18px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		top: 34%;
		left: 20%;
		/* text-align: center; */
		font-size: 15px;
	}
	#section1{
		height: inherit;
	}
	
}

  @media screen and (max-width: 1200px) {
	/* .underCon{
		max-width: 1200px;
	}
	.maps{
	    width: 250px;
		height: 250px; 
	} */
	/* .leftSideImg {
		height: 500px;
		transition: 0.5s;
	}
	.rightSideImg {
		height: 500px;
		transition: 0.5s;
	} */

	.leftSideImgText-upper {
		font-size: 50px;
		left: 12%;
		top: 28%;
		height: 60px;
		margin: 0 auto;
		width: 60%;
	}
	.leftSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		top: 32%;
		left: 13%;
		
		font-size: 13px;
		margin: 0 auto;
	}

	.rightSideImgText-upper {
		font-size: 50px;
		left: 19%;
		top: 28%;
		height: 60px;
		width: 60%;
	}
	.rightSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		top: 32%;
		left: 20%;
		
		font-size: 13px;
	}
	#section1{
		height: inherit;
	}
	
}  


@media screen and (max-width: 1100px) {
	.underCon{
		max-width: 1000px;
	}
	.maps{
		width: 250px;
		height: 250px; 
	}
	.leftSideImg {
		height: 400px;
		transition: 0.5s;
	}
	.rightSideImg {
		height: 400px;
		transition: 0.5s;
	}
	/* .leftSideImage img{
		height: 393px;
    min-width: 150px;
	}
	.rightSideImage img{
		height: 393px;
    min-width: 150px;
	} */


	
}


@media screen and (max-width: 900px) {
	.underCon{
		max-width: 900px;
	}
	.row{
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	.contactInfo-bar{
		margin-top: 50px;
	}
	.contactInfo-bar ul{
		margin: 0px;
		padding: 0px;
		font-size: 14px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}
	.footer-text-left{
		font-size: 14px;
	}
	.footer-text-right{
		font-size: 14px;
	}
	.footer-text-middle{
		font-size: 38px;
	}
	.leftSideImg {
		height: 270px;
	}
	
	.rightSideImg {
		height: 270px;
	}
	.leftSideImage img{
		height: 252px;
        min-width: 155px;
	}
	.rightSideImage img{
		height: 252px;
    min-width: 155px;
	}
	.leftSideImgText-upper {
		font-size: 50px;
		left: 12%;
		top: 28%;
		height: 60px;
		margin: 0 auto;
		width: 60%;
	}
	.leftSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		/* top: 32%;
		left: 13%;
		
		font-size: 13px;
		margin: 0 auto; */
		display: none;
	}
    .rightSideImgText{

	}
	.rightSideImgText-upper {
		font-size: 50px;
		left: 19%;
		top: 28%;
		height: 60px;
		width: 60%;
	}
	.rightSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		/* top: 32%;
		left: 20%;
		
		font-size: 13px; */
		display: none;
	}

	.section3TextDateSemester-right{
		text-align: right;
		width: 50%;
	}
	.slideshow-container{
		max-width: 350px;
		max-height: 350px;
	}
	


}

@media screen and (max-width: 750px) {
	.gamesNApp-slideshow-container{
		width: 150px;
		height: 250px;
	}
	.nextSibStyle{
		margin-top: 18px;
	}
	.prevSibStyle{
		margin-top: 18px;
	}

	.leftSideImgText-upper {
		font-size: 30px;
		left: 19%;
		top: 28%;
		height: 60px;
		margin: 0 0;
	}
	.leftSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		top: 26%;
		left: 20%;
		/* text-align: center; */
		font-size: 11px;
		margin: 0 0;
	}
	.leftSideImgText{
		width: 40%;

	}
	.rightSideImgText{
		width: 40%;

	}
	.rightSideImgText-upper {
		font-size: 30px;
		left: 0%;
		top: 28%;
		height: 60px;
	}
	.rightSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		top: 26%;
		left: 20%;
		/* text-align: center; */
		font-size: 11px;
	}

}

@media screen and (max-width: 720px) {
	.main-section{
  	/* height: 16000px; */
	}
	p span{
		padding-bottom: 310px;
	}
	.underCon{
		max-width: 720px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}
	.footer-text-left{
		font-size: 12px;
	}
	.footer-text-right{
		font-size: 12px;
	}
	.section3TextDateSemester-right{
		text-align: right;
		width: 50%;
	}

	.gridwrapper{
		padding: 0px;
		/* padding-top: 0px; */
		
	}

}

@media screen and (max-width: 673px) {
	.main-section{
  	/* height: 16000px; */
	}
	p span{
		padding-bottom: 260px;
	}
	.underCon{
		max-width: 670px;
		padding-top: 50px;
	}
	.cS{
		font-size: 25px;
	}
	.BME{
		font-size: 16px;
	}
	.wrapper{
		max-width: 100%;
	}
	/* .navbar{
		max-width: 1000px;
		width: 100%;
	}
	.navbar li a{
		font-size: 13px;
	} */
	#main-header{
		width: 100%;
	}
	.autoSlideshow-container {
		max-width: 210px;
		max-height: 210px;
	}
	.autoSlideshow-container img{
		max-width: 250px;
		max-height: 250px;
	}
	.slideshow-container{
		width: 100%;
		max-height: 250px;
		display: flex;
		justify-content: center;
		margin: auto;
		line-height: 50%;
	}
	.slideshow-container img{
		max-width: 250px;
		max-height: 241px;
	}
	.slideshow-container .links{
		opacity: 1;
	}
	.prev{
		top: 40%;
		left: -55px;
		line-height: 120%;
		color: rgb(110, 110, 110);
	}
	.next{
		top: 40%;
    	right: -55px;
    	line-height: 120%;
    	color: rgb(110, 110, 110);
	}
	.mySlides{
		height: 250px;
		width: auto;
	}
	.section-content-wrapper{
		margin: 50px;
		margin-bottom: 0px;
		margin-top: 70px;
	}
	#section3Img{
		max-width: 200px;
	}
	#section4Img{
		max-width: 200px;
	}
	#section5{
		flex-direction: row-reverse;
	}
	#section5Img{
		max-width: 250px;
		max-height: 250px;
		margin: auto;
	}
	/* #section5Img img{
		max-width: 300px;
		max-height: 300px;
	} */
	#section6Img{
		max-width: 200px;
	}
	#section2Text{
		max-width: 350px;
		margin-top: 20px;
	}
	#section3Text{
		max-width: 350px;
		/* margin-top: 20px; */
		/* margin: 0px; */
		margin-top: 50px;
		margin-bottom: 15px;
		line-height: 25px;
	}
	.section3MainText{
		display: none;
	}
	#section4Text{
		max-width: 350px;
		margin-top: 20px;
	}
	#section5Text{
		max-width: 350px;
		margin-top: 20px;
	}
	.section5MainText{
		line-height: 19px;
	}
	.gamesNAppMainText{
		line-height: 19px;
		font-size: 14px;
	}
	.gamesNAppTitleText{
		font-size: 22px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}
	.footer-text-left{
		width: 40%;
	}

	.leftSideImgText-upper {
		font-size: 30px;
		left: 19%;
		top: 28%;
		height: 60px;
		margin: 0 0;
	}
	.leftSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		top: 26%;
		left: 20%;
		/* text-align: center; */
		font-size: 11px;
		margin: 0 0;
	}
	.leftSideImgText{
		width: 40%;

	}
	.rightSideImgText{
		width: 40%;

	}
	.rightSideImgText-upper {
		font-size: 30px;
		left: 0%;
		top: 28%;
		height: 60px;
	}
	.rightSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		top: 26%;
		left: 20%;
		/* text-align: center; */
		font-size: 11px;
	}
	.section3TextDateSemester-right{
		text-align: right;
		width: 50%;
	}

	.about-first-sub-page-section{
		width: 100%;
	}
	.about-second-sub-page-section{
		width: 100%;
	}
	.about-secSub-section-content-wrapper{
		margin: 0px;
		width: 100%;
		flex-wrap: nowrap;
	}
	.about-secSub-sidebarOne{
		/* margin-top: 20px; */
		margin: 20px 0px 0px 15px;
		height: 350px;
	}
	.about-secSub-sidebarOne ul li:not(:first-child){
		display: none;
	}
	.about-secSub-sidebarOne ul li:first-child{
		font-size: 24px;
		text-align: center;
	}
	.about-secSub-sidebarTwo{
		/* margin-bottom: 20px; */
		margin: 0px 25px 20px 0px;
	}
	.about-secSub-sidebarTwo ul li:not(:first-child){
		display: none;
	}
	.about-secSub-sidebarTwo ul li:first-child{
		font-size: 24px;
		text-align: center;
	}
	.about-secSub-img{
		height: 170px;
	}

	.about-third-sub-page-section{
		display: none;
	}

}

@media screen and (max-width: 600px){
	.gamesNApp-slideshow-container{
		width: 120px;
		height: 200px;
	}
	.nextSibStyle{
		right: -30px;
		left: 30px;
	}
	.prevSibStyle{
		right: 30px;
		left: -30px;
	}
	.gamesNApp-next{
		margin-right: -100px;
	}
	.gamesNApp-prev{
		margin-left: -100px;
	}

}

@media screen and (max-width: 560px){
	#section3HeaderText{
		font-size: 40px;
	}
	#section3HeaderTextLower{
		font-size: 14px;
		margin-top: 5px;
	}
	#section4HeaderText{
		font-size: 40px;
	}
	#section4HeaderTextLower{
		font-size: 14px;
		margin-top: 5px;
	}
}

@media screen and (max-width: 500px){
    .box{
		
		width: 200px;
		height: 200px;
		transition: 0.5s;
	}
	.box:hover {
		width: 205px;
	  height: 205px;
		animation: easeUpBoxSize-small 0.2s ease;
		/* animation: boxBackColFadeIn 0.2s ease; */
		/* background-color: rgba(68, 143, 255, 0.5); */
	}		
	.box:not(:hover){
		animation: easeDownBoxSize-small 0.2s ease;
	}
	#section1header{
		height: 65px;
	}
	#section2Header{
		font-size: 14px;
		width: 60%;
	}
	.section3TitleText{
		font-size: 22px;
		text-align: center;
		border: none;
	}
	.section3MainText p{
		font-size: 14px;
	}
	.section3TextDateSemester {
		font-size: 11px;
		display: none;
	}
	.section3TextDateSemester-right{
		text-align: right;
	}
	/* #section3Text p{
		font-size: 12px;
	} */
	.section4MainText p{
		font-size: 14px;
	}
	.section5TitleText{
		font-size: 38px;
	}
	.section5TitleText-lower{
		font-size: 18px;
	}
	.section5MainText p{
		font-size: 14px;
	}
	.gridwrapper{
		width: 56%;
	}
	/* .gameNAppsStPro-section-content-wrapper{
		width: 100%;
	} */
	.first-sub-page-section{
		width: 100%;
	}
	.secStPro-sub-page-section{
		width: 100%;
	}
	.gameNAppsStPro-sub-page-section{
		width: 100%;
	}
	.thirdStPro-sub-page-section{
		width: 100%;
	}
	.fourthStPro-sub-page-section{
		width: 100%;
	}
	.fifthStPro-sub-page-section{
		width: 100%;
	}
	.sixthStPro-sub-page-section{
		width: 100%;
	}	
	.portfolio-sub-page-section{
		width: 100%;
	}
	.header-wrapper{
		width: 100%;
		height: 65px;
	}
	.myNavbar{
		height: 65px;
	}
	.myNavButtons{
		height: 65px;
	}
	.icon-container{
		height: 65px;
	}
	.header-img{
		max-width: 45px;
	}
	.myNavbar a.icon{
		line-height: 35px;
	}
	
}

@media screen and (max-width: 487px) {
	.main-section{
	  /* height: 16000px; */
	  width: 100%;
	}
	.autoSlideshow-container{
		max-width: 210px;
		max-height: 210px;
	}
	.autoSlideshow-container .img{
		max-width: 210px;
		max-height: 210px;
	}
	p span{
		padding-bottom: 260px;
	}
	.underCon{
		max-width: 490px;
		padding-top: 50px;
	}
	.cS{
		font-size: 25px;
	}
	.BME{
		font-size: 16px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}

	.leftSideImgText-upper {
		font-size: 25px;
		left: 19%;
		top: 31%;
		height: 60px;
		margin: 0 0;
	}
	.leftSideImgText-symbol {
		font-size: 11px;
		justify-content: start;
	}
	.leftSideImgText-lower {
		top: 22%;
		left: 20%;
		/* text-align: center; */
		font-size: 10px;
		margin: 0 0;
		line-height: 11px;
	}

	.rightSideImgText-upper {
		font-size: 25px;
		left: -40%;
		top: 31%;
		height: 60px;
	}
	.rightSideImgText-symbol {
		font-size: 14px;
		justify-content: start;
	}
	.rightSideImgText-lower {
		top: 22%;
		left: 20%;
		/* text-align: center; */
		font-size: 10px;
		line-height: 11px;
	}
}

@media screen and (max-width: 414px) {
	p span{
		padding-bottom: 260px;
	}
	.underCon{
		max-width: 400px;
		padding-top: 50px;
	}
	.cS{
		font-size: 25px;
	}
	.BME{
		font-size: 16px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}
	#section3HeaderText{
		font-size: 30px;
	}
	#section3HeaderTextLower{
		font-size: 12px;
		margin-top: 7px;
	}
	#section4HeaderText{
		font-size: 30px;
	}
	#section4HeaderTextLower{
		font-size: 12px;
		margin-top: 7px;
	}
	.gamesNApp-next{
		margin-right: -85px;
	}
	.gamesNApp-prev{
		margin-left: -85px;
	}

}

@media screen and (max-width: 400px) {
	p span{
		padding-bottom: 260px;
	}
	.underCon{
		max-width: 400px;
		padding-top: 50px;
	}
	.cS{
		font-size: 25px;
		max-width: 400px;
	}
	.BME{
		font-size: 16px;
	}
	.column2 {
		justify-content: center;
		margin-top: 50px;
	}
	



}

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

.flex-wrapper{

}


.skills{
	width: 100%;
    max-width: 1200px;
    height: 1120px;
    margin: auto;
    position: relative;
}

.lines{
	height: 100%;
    position: relative;
}

.skills ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

.line{
	height: inherit;
    width: 2px;
    position: absolute;
    background: rgba(238, 238, 238, 0.6);
}

.lines li{
	list-style: none;
	display: inline-block;
	margin: 0;
    padding: 0;
}

.line.l--0 {
    left: 0;
}
.line__label.title {
    text-transform: uppercase;
    font-weight: bold;
}

.line__label {
    display: block;
    width: 100px;
    text-align: center;
    position: absolute;
    bottom: -20px;
	right: -50px;
}

.line.l--25 {
    left: 25%;
}

.line.l--50 {
    left: 50%;
}
.line.l--75 {
    left: 75%;
}
.line.l--100 {
    left: calc(100% - 1px);
}

.charts {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.chart {
    margin: 30px 0 0;
}

.chart:first-child {
    margin: 0;
}

.chart__title {
    display: block;
    margin: 0 0 10px;
    font-weight: bold;
    opacity: 0;
    animation: 1s pop-in ease forwards;
}

.chart__label {
    padding-left: 10px;
    line-height: 30px;
    color: white;
    display: flex;
}

.chart--horiz {
    overflow: hidden;
}
.chart--horiz ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.chart__bar {
    height: 30px;
    margin-bottom: 10px;
    background: linear-gradient(to left, #f8bc13, #f08522);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    opacity: 0;
    animation: 1s anim-lightspeed-in ease forwards;
    display: block;
}
.chart--dev .chart__bar:nth-of-type(1) {
    animation-delay: 0.2s;
}
.chart--dev .chart__bar:nth-of-type(2) {
    animation-delay: 0.4s;
}
.chart--dev .chart__bar:nth-of-type(3) {
    animation-delay: 0.6s;
}
.chart--dev .chart__bar:nth-of-type(4) {
    animation-delay: 0.8s;
}
.chart--dev .chart__bar:nth-of-type(5) {
    animation-delay: 1.0s;
}
.chart--dev .chart__bar:nth-of-type(6) {
    animation-delay: 1.2s;
}
.chart--dev .chart__bar:nth-of-type(7) {
    animation-delay: 1.4s;
}
.chart--dev .chart__bar:nth-of-type(8) {
    animation-delay: 1.6s;
}
.chart--dev .chart__bar:nth-of-type(9) {
    animation-delay: 1.8s;
}
.chart--dev .chart__bar:nth-of-type(10) {
    animation-delay: 2.0s;
}
.chart--dev .chart__bar:nth-of-type(11) {
    animation-delay: 2.2s;
}


.chart--prod .chart__title {
    animation-delay: 2.0s;
}
.chart--prod .chart__bar:nth-of-type(1) {
    animation-delay: 2.5s;
}
.chart--prod .chart__bar:nth-of-type(2) {
    animation-delay: 2.7s;
}
.chart--prod .chart__bar:nth-of-type(3) {
    animation-delay: 2.9s;
}


.chart--design .chart__title {
    animation-delay: 2.6s;
}
.chart--design .chart__bar:nth-of-type(1) {
    animation-delay: 3.1s;
}
.chart--design .chart__bar:nth-of-type(2) {
    animation-delay: 3.3s;
}
.chart--design .chart__bar:nth-of-type(3) {
    animation-delay: 3.5s;
}
.chart--design .chart__bar:nth-of-type(4) {
    animation-delay: 3.7s;
}
.chart--design .chart__bar:nth-of-type(5) {
    animation-delay: 3.9s;
}
.chart--design .chart__bar:nth-of-type(6) {
    animation-delay: 4.1s;
}
.chart--design .chart__bar:nth-of-type(7) {
    animation-delay: 4.3s;
}
.chart--design .chart__bar:nth-of-type(8) {
    animation-delay: 4.5s;
}
.chart--design .chart__bar:nth-of-type(9) {
    animation-delay: 4.7s;
}


@keyframes anim-lightspeed-in {
	0% { transform: translateX(-200%); opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}

@-webkit-keyframes anim-lightspeed-in {
	0% { transform: translateX(-200%); opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}

@-moz-keyframes anim-lightspeed-in {
	0% { transform: translateX(-200%); opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}

@-o-keyframes anim-lightspeed-in {
	0% { transform: translateX(-200%); opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}

@keyframes pop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes pop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes pop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-o-keyframes pop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* *, html
{
	margin: 0px;
	padding: 0px;
} */


/* DEBUG STYLE */
/* * {
	background: #000 !important;
	color: #0f0 !important;
	outline: solid #f00 1px !important;
  } */






#studentWorkHeader{
	/* max-width: 500px; */
  /* width: 1200px; */
  height: 180px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 72px;
  font-style: normal;
  color: ghostwhite;
  /* margin: auto; */
	margin-top: 0px;
	font-weight: 600;
  margin-bottom: 0px;
  z-index: 5;
}

#studentWorkSection{
	/*height: 800px; */
    color: rgb(0, 0, 0);
    display: flex;
    /* background-color: yellow; */
    /* padding-top: 110px; */
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
	min-height: 800px;
	margin-bottom: 100px;
}

#personalWorkHeader{
	/* max-width: 500px; */
  /* width: 1200px; */
  height: 90px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 72px;
  font-style: normal;
  color: ghostwhite;
  /* margin: auto; */
	margin-top: 0px;
	font-weight: 600;
  margin-bottom: 0px;
  z-index: 5;
}

#personalWorkSection{
	min-height: 500px;
    color: rgb(0, 0, 0);
    display: flex;
    /* background-color: yellow; */
    /* padding-top: 110px; */
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
	min-height: 800px;
	margin-bottom: 100px;
}


.personalWorkGoTo{
	position: relative;
	top: -90px;
	height: 0px;
	width: 100%;
}

.personalWorkGoTo02{
	position: relative;
	top: -200px;
	height: 0px;
	width: 100%;
	/* background-color: violet; */
}

.personalWorkGoTo03{
	position: relative;
	top: -250px;
	height: 0px;
	width: 100%;
	/* background-color: violet; */
}

.personalWorkGoTo04{
	position: relative;
	top: -300px;
	height: 0px;
	width: 100%;
	/* background-color: violet; */
}


.personalWorkGridwrapper{
	width: 75%;
	min-height: 670px;
	/* width: 85em; */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  /* grid-template-rows: 350px 350px;
  grid-template-columns: 350px 350px 350px;
  grid-gap: 80px; */
	/* background-color: ghostwhite; */
	/* background-color: rgb(20, 21, 23); */
  color: #444;
	z-index: 6;
	/* height: 750px; */
	margin: auto;
	margin-top: 30px;
	margin-bottom: 100px;
	/* padding-top: 40px; */
	/* padding-bottom: 60px; */
	/* padding: 0px 50px 50px 50px; */
	padding: 0px 0px 50px 0px;
}


.pwGridViewtip{
	height: 100%;
  /* margin: -10px -10px -10px -10px; */
  visibility: hidden;
}


.pwGridtext{
	/* visibility: hidden; */
	text-decoration: none;
	display: flex;
  	flex-direction: column;
  /* height: 100%; */
	justify-content: flex-end;
	text-align: left;
	font-size: 16px;
	/* font-weight: 600; */
	width: 100%;
	height: 100%;
	 margin: auto;
	z-index: 10;
	 /* margin-top: 30px;  */
}

.pwGridtext .lower{
	width: 50%;
	margin: 0px auto;
	border-radius: 0px;
	padding: 10px 0px 10px 0px;
}

 .pwBox:hover .pwGridViewtip{
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
	
} 

.pwBox:not(:hover) .pwGridViewtip{
	/* color: rgba(0, 0, 0, 1); */
	/* visibility: hidden; */
	/* animation: boxFadeIn 0.2s ease-in; */
	/* text-decoration: none; */
	/* background-color: rgba(30, 30, 30, 0.5); */

}

.pwGridViewtip:hover {
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
	/* background-color: rgba(30, 30, 30, 0.5); */

}

/* .pwGridViewtip:hover .pwGridTextStyle{
	color: rgba(0, 0, 0, 1);
	visibility: visible;
	animation: boxFadeIn 0.2s ease-in;
	text-decoration: none;
} */

.pwGridTextStyle{
	/* background-color: rgb(208, 208, 215); */
	background-color: white;
	/* border-radius: 50px; */
	padding: 10px 10px 10px 10px;
	z-index: 10;
}

.pwBox {
	width: 462px;
	height: 347px;
	/* margin: 50px 0px 0px 30px; */
	margin: 15px 0px 5px 0px;
	/* margin-right: 50px; */
	/* margin-bottom: 25px; */
  	background-color: ghostwhite;
  	color: #fff;
  	/* border-radius: 5px; */
  	font-size: 150%;
  	cursor: pointer;
  	display: flex;
  	justify-content: center;
	align-items: center;
	/* -webkit-box-shadow: 0px 0px 10px 0px rgb(100, 100, 100);
	-moz-box-shadow: 0px 0px 10px 0px rgb(100, 100, 100);
	box-shadow: 0px 0px 5px 0px rgb(150, 150, 150); */
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}

.pwBox:hover {
	/* animation: boxFadeOut 6s; */
	/* filter: hue-rotate(180deg); */
	/* opacity: 0.6; */
	text-decoration: none;
	/* width: 465px; */
	/* width: 431px; */
	/* height: 325px; */
	width: 467px;
	height: 352px;
	animation: pwEaseUpBoxSize 0.2s ease;
	/* animation: boxBackColFadeIn 0.2s ease; */
	/* background-color: rgba(68, 143, 255, 0.5); */
}

.pwBox a:hover {
	text-decoration: none;

}

.pwBox:not(:hover){
	animation: pwEaseDownBoxSize 0.2s ease;
}

.box1:hover ,.box2:hover ,.box3:hover ,.box4:hover ,.box5:hover ,.box6:hover  {
	/* animation: boxFadeOut 0.2s ease; */
	/* filter: hue-rotate(180deg); */
	/* opacity: 0.8; */
	filter:brightness(100%);
}

.boxBackColFadeIn {
  -webkit-animation-name: boxBackColFadeIn;
  -webkit-animation-duration: 1.5s;
  animation-name: boxBackColFadeIn;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxBackColFadeIn {
  from {background-color: ghostwhite;}
  to {background-color: rgba(68, 143, 255, 0.5);}
}

@keyframes boxBackColFadeIn {
  from {background-color: ghostwhite;}
  to {background-color: rgba(68, 143, 255, 0.5);}
}


.boxBackColFadeOut {
  -webkit-animation-name: boxBackColFadeOut;
  -webkit-animation-duration: 1.5s;
  animation-name: boxBackColFadeOut;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxBackColFadeOut {
  from {background-color: rgba(68, 143, 255, 0.5);}
  to {background-color: ghostwhite;}
}

@keyframes boxBackColFadeOut {
  from {background-color: rgba(68, 143, 255, 0.5);}
  to {background-color: ghostwhite;}
}


.boxFadeIn {
  -webkit-animation-name: boxFadeIn;
  -webkit-animation-duration: 0.2s;
  animation-name: boxFadeIn;
  animation-duration: 0.2s;
}

@-webkit-keyframes boxFadeIn {
  from {opacity: .0}
  to {opacity: 1}
}

@keyframes boxFadeIn {
  from {opacity: .0}
  to {opacity: 1}
}


.boxFadeOut {
  -webkit-animation-name: boxFadeOut;
  -webkit-animation-duration: 1.5s;
  animation-name: boxFadeOut;
  animation-duration: 1.5s;
}

@-webkit-keyframes boxFadeOut {
  from {opacity: 1;}
  to {opacity: 0.8; filter:brightness(120%);}
}

@keyframes boxFadeOut {
  from {opacity: 1;}
  to {opacity: 0.8; filter:brightness(120%);}
}

.pwEaseUpBoxSize {
  -webkit-animation-name: pwEaseUpBoxSize;
  -webkit-animation-duration: 1.5s;
  animation-name: pwEaseUpBoxSize;
  animation-duration: 1.5s;
}

@-webkit-keyframes pwEaseUpBoxSize {
  from {width: 462px; height: 347px;}
  to {width: 467px; height: 352px;}
}

@keyframes pwEaseUpBoxSize {
  from {width: 462px; height: 347px;}
  to {width: 467px; height: 352px;}
}

.pwEaseDownBoxSize {
  -webkit-animation-name: pwEaseDownBoxSize;
  -webkit-animation-duration: 1.5s;
  animation-name: pwEaseDownBoxSize;
  animation-duration: 1.5s;
}

@-webkit-keyframes pwEaseDownBoxSize {
  from {width: 467px; height: 352px;}
  to {width: 462px; height: 347px;}
}

@keyframes pwEaseDownBoxSize {
  from {width: 467px; height: 352px;}
  to {width: 462px; height: 347px;}
}

/* -- Small ---*/
.easeUpBoxSize-small {
  -webkit-animation-name: easeUpBoxSize-small;
  -webkit-animation-duration: 1.5s;
  animation-name: easeUpBoxSize-small;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeUpBoxSize-small {
  from {width: 200px; height: 200px;}
  to {width: 205px; height: 205px;}
}

@keyframes easeUpBoxSize-small {
  from {width: 200px; height: 200px;}
  to {width: 205px; height: 205px;}
}

.easeDownBoxSize-small {
  -webkit-animation-name: easeDownBoxSize-small;
  -webkit-animation-duration: 1.5s;
  animation-name: easeDownBoxSize-small;
  animation-duration: 1.5s;
}

@-webkit-keyframes easeDownBoxSize-small {
  from {width: 205px; height: 205px;}
  to {width: 200px; height: 200px;}
}

@keyframes easeDownBoxSize-small {
  from {width: 205px; height: 205px;}
  to {width: 200px; height: 200px;}
}



.pwBox .box1 {
	/* background: url(../img/studentProjects/project6/cut05.JPG); */
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	object-fit: contain;
	position: relative;
}

.pwBox img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
}

.box10 img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
	object-fit: cover;
}

.pwBox video{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
	top: 0%;
}


.pwBox .box2 {
	/* background: url(../img/studentProjects/project5/SceneUnity.JPG); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}


.pwBox .box3 {
	/* background: url(../img/studentProjects/project4/Cut03.JPG); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box4 {
	/* background: url(../img/studentProjects/project3/Cut05.JPG); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box5 {
	/* background: url(../img/studentProjects/project2/cut08.png); */
	background-position: center;
  	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box6 {
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box7 {
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box8 {
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	background-color: rgb(15,15,15);
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box9 {
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox .box10 {
	/* background: url(../img/studentProjects/project1/Background1.jpg); */
	background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	z-index: 5;
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* line-height: 300px; */
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: ghostwhite;
	position: relative;
}

.pwBox:last-child
{
	visibility: hidden;
	visibility: visible;
}













#aboutHeader{
	/* max-width: 500px; */
  /* width: 1200px; */
  height: 90px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 72px;
  font-style: normal;
  color: ghostwhite;
  /* margin: auto; */
	margin-top: 0px;
	font-weight: 600;
  margin-bottom: 0px;
  z-index: 5;
}

#aboutSection{
	/*height: 800px; */
    color: rgb(0, 0, 0);
    display: flex;
    /* background-color: yellow; */
    /* padding-top: 110px; */
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
	min-height: 800px;
	/* margin-bottom: 100px; */
}




@media screen and (max-width: 1864px){
	.personalWorkGridwrapper{
		justify-content: space-evenly;
	}
}

@media screen and (max-width: 1570px){
	#myChart-container{
		width: 100%;
	}
}

@media screen and (max-width: 1000px){
	.about-third-sub-page-section{
		display: none;
	}
}

@media screen and (max-width: 650px){
	.pwBox{
		width: 400px;
		height: 300px;
	}
	.pwBox:hover{
		animation: none;
		 width: 400px;
		height: 300px; 
	}
	.pwBox:not(:hover){
		animation: none;
		 width: 400px;
		height: 300px; 
	}
	.pwGridViewtip{
		
		color: rgba(0, 0, 0, 1);
		visibility: visible;
		animation: boxFadeIn 0.2s ease-in;
		text-decoration: none;
	}
	.pwGridTextStyle{
		font-size: 11px;
	}
	/*.pwBox:last-child .pwGridTextStyle{
		visibility: hidden;
		cursor: default;
	}
	.pwBox:last-child{
		visibility: hidden;
		cursor: default;
	}*/
	

}



@media screen and (max-width: 555px){
	.pwBox{
		width: 300px;
		height: 225px;
	}
	.pwBox:hover{		
		 width: 300px;
		height: 225px; 
	}
	.pwBox:not(:hover){		
		 width: 300px;
		height: 225px; 
	}
	
}

@media screen and (max-width: 500px){
	#studentWorkHeader{
		height: 110px;
	}
	#aboutHeader{
		height: 65px;
	}
	.about-section-content-wrapper{
		margin: 0px auto 0px auto;
	}
	.about-first-sub-page-section{
		padding-top: 0px;
	}
	
}

@media screen and (max-width: 400px){
	.pwBox{
		width: 250px;
		height: 188px;
	}
	.pwBox:hover{		
		width: 250px;
	   height: 188px; 
   }
   .pwBox:not(:hover){		
		width: 250px;
	   height: 188px; 
   }
}

@media screen and (max-width: 340px){
	.pwBox{
		width: 225px;
		height: 169px;
	}
	.pwBox:hover{		
		width: 225px;
	   height: 169px; 
   }
   .pwBox:not(:hover){		
		width: 225px;
	   height: 169px; 
   }
}