@font-face {
  font-family: "Beach Ocean";
  src: url("../fonts/BeachOcean-MVGOw.otf");
  font-weight: normal;
}

body {
  background-color: #f4f4f4;
  color: #343434;
  margin: 0;
  max-width: 1400px;
  width: 1400px;
  height: auto;
  margin-left: calc( (100vw - 1400px) / 2) !important;
}


/**************** Section 1 **********************/

.Sec1h1 {
  font-family: 'Architects Daughter', cursive;
  font-size: 4.5rem;
  font-weight: bold;
  margin: 0 0 30px 0;
  padding: 0;
}

.Sec1h2 {
  font-family: 'Architects Daughter', cursive;
  font-size: 2.1rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.Section1 {
  background-color: #1c232b;
  background-repeat: no-repeat;
  height: auto; /*500px;*/ /*492px;*/
  margin: 0;
  padding: 0;
}

.Section1Background {
  width: 100%;
/*
  position: relative;
  top: -290px;
*/
}

@media screen and (max-width: 1400px)
{
  .RunnerRightClass {
    height: 300px;
    position: fixed;
    top: 520px;
    left: 1200px;
  }

  .RunnerCenterClass {
    height: 300px;
    position: fixed;
    top: 520px;
    left: calc((100vw / 2) - 60px );
  }

}

@media screen and (min-width: 1400px)
{
  .RunnerRightClass {
    height: 300px;
    position: fixed;
    top: 520px;
    left: calc((100vw / 2) + 500px);
  }

  .RunnerCenterClass {
    height: 300px;
    position: fixed;
    top: 520px;
    left: calc((100vw / 2) - 60px );
    /*left: calc((100vw / 2) + 400px);*/
  }
}

.Section1Detail {
  /*background-color: rgb(255,255,255, .4);*/
  width: 500px;
  left: calc( ( 100vw / 2 ) - 215px );
  margin: 0;
  position: absolute;
  top: 130px;
  padding: 20px;
}

.Sec1List {
  margin: 0 0 20px 50px;
  padding: 0;
}

.Sec1LIImg {
  display: inline-block;
  width: 50px;
}

.Sec1LI {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 20px;
  position: relative;
  top: 8px;
}

/**************** Section 2 **********************/

.Sec2h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 4rem;
  padding: 0;
  margin: 0;
  color: #cbcbcb;
  display: inline-block;
}

.Sec2h2 {
  font-family: 'Architects Daughter', cursive;
  font-size: 2rem;
}

.Section2 {
  background-color: #022E57; /*#1c232b;*/
  height: 500px;
  margin: 0;
  padding: 0;
}

.Section2Title {

  padding: 30px;
}

.Sec2TitleImg {
  position: relative;
  bottom: 30px;
  margin: 0 20px 0 0;
  padding: 0;
  width: 70px;
}

.Sec2Cursor {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 0.75s;
}

@keyframes blink {
    0% { opacity: 1; }
   50% { opacity: 0; }
  100% { opacity: 1; }
}

.Section2SkillList {
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #cbcbcb;
  margin: auto;
  width: 60%;
/*
  padding-top: 50px;
  padding-left: 100px;
*/
}

.Sec2LiImg {
  padding: 0;
  margin: 0;

}


.Sec2li {
  margin-bottom: 5px;
}

.Section2NavBar {
  width: 145px;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  left: 30px;
  bottom: 145px;
}

.navbar {
  background-color: #cbcbcb; /*#022E57;*/
  border-radius: 5px;
  color: *#022E57;/*#cbcbcb;*/
  height: 30px;

}

.Sec2DDClass {
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #022E57;
}

.Sec2DDClass.nav-link, .Sec2DDClass.nav-link:focus {
  color: #022E57;
}
.Section2NavBar:hover .Sec2DDClass.nav-link:hover {
  color: white;

}

.Sec2DMClass {
}

.Sec2DMClass.dropdown-menu, .Sec2DMClass.dropdown-item {
  background-color: #cbcbcb;
  color: #022E57;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
}

.Sec2DMClass.dropdown-item:hover {
  color: #022E57;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
}

/**************** Section 3 **********************/

.Sec3h1 {
  font-family: 'Beach Ocean', 'Architects Daughter',sans-serif;
  font-weight: 500;
  font-size: 5rem;
  padding: 0;
  margin: 0;
  color: #caa488;
  display: inline-block;
  text-shadow: 4px 2px #372e21;
}

.Sec3h2 {
  font-family: 'Architects Daughter', cursive;
  font-size: 2rem;
}

.Section3 {
  background-color: #d1d0b7;
  height: 500px;
  margin: 0;
  padding: 0;
  display: block;
}

.Section3Title {
  height: 140px;
  padding: 30px 30px 20px 30px;
}

.Sec3TitleImg {
  position: relative;
  bottom: 25px;
  margin: 0 20px 0 0;
  padding: 0;
  width: 90px;
}

.Sec3Img {
  display: inline-block;
  width: 500px;
  margin-right: 250px;
  float: right;
}

.Sec3Shutter {
  height: 30px;
  width: 30px;
  background-color: #33383f;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  right: 515px;
  bottom: 4px;
  animation-name: shutter;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

@keyframes shutter {
    96% { height: 0; width: 0; right: 500px; bottom: 19px;}
    2% { height: 30px; width: 30px; right: 515px; bottom: 4px; }
    2% { height: 0; width: 0; right: 500px; bottom: 19px; }
}

.Section3Detail {
  display: inline-block;
  width: 600px;
  height: 200px;  /*334px*/
  padding: 0 0 0 30px;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 1.5rem;
  color: #343434;
}

.Section3Thumbs {
  display:none; /*inline-block;*/
  width: 600px;
  height: 133px;
  padding: 15px 0 0 30px;
}

.Sec3ImgThumb {
  margin-right: 6px;
  opacity: 0.8;
}

.Sec3ImgThumb:hover {
  opacity: 1;
}

.Sec3WebLink {
  text-decoration: none;
}

.Sec3WebLink:hover {
  color: red;
}

/**************** Section 4 **********************/

.Sec4h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 4rem;
  padding: 0;
  margin: 0;
  color: #cbcbcb;
  display: inline-block;
}

.Sec4h2 {
  font-family: 'Architects Daughter', cursive;
  font-size: 2rem;
}

.Section4 {
  background-color: #312C51;
  height: 500px;
  margin: 0;
  padding: 0;
}

/*-----------------------------------------------------------------------------------------------------*/
/*Loader*/

#loadwrapper {
  display: block;
  background-color: black;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  /*opacity: 0;*/
  position: fixed;
  z-index: 1;
}

/*-----------------------------------------------------------------------------------------------------*/

#loadposition {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 20%;
}

/*-----------------------------------------------------------------------------------------------------*/
/*Loading Text Animation*/

.loadtext {
	display: block;
	padding: 0;
	margin: 0;
	color: #2187e7;
	opacity:.9;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /*Tahoma, Geneva, sans-serif;*/
    font-size:36px;
	text-align: center;
	text-shadow: -1px 1px 10px #2187e7, 1px -1px 30px #3e91bb;
}

/*-----------------------------------------------------------------------------------------------------*/
/*Circle Animation*/

.ball {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:80px;
	height:80px;
	margin:0 auto;
	animation:spin .5s infinite linear;
	/*-moz-animation:spin .5s infinite linear;*/
	/*-webkit-animation:spin .5s infinite linear;*/
}

.ball1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	position:relative;
	top:-75px;
	animation:spinoff .5s infinite linear;
	/*-moz-animation:spinoff .5s infinite linear;*/
	/*-webkit-animation:spinoff .5s infinite linear;*/
}
@keyframes spin {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}
@keyframes spinoff {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(-360deg); }
}
/*
@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}
*/

/* Second Loadin Circle */

.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:80px;
	height:80px;
	margin:0 auto;
	animation:spinPulse 1s infinite ease-in-out;
	/*-moz-animation:spinPulse 1s infinite ease-in-out;*/
	/*-webkit-animation:spinPulse 1s infinite linear;*/
}
.circle1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	position:relative;
	top:-75px;
	animation:spinoffPulse 1s infinite linear;
	/*-moz-animation:spinoffPulse 1s infinite linear;*/
	/*-webkit-animation:spinoffPulse 1s infinite linear;*/
}
@keyframes spinPulse {
	0% { transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { transform:rotate(145deg); opacity:1; }
	100% { transform:rotate(-320deg); opacity:0; }
}
@keyframes spinoffPulse {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg);  }
}

/*
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
*/

/*-----------------------------------------------------------------------------------------------------*/
/*Boxes Animation*/