body {
  font-family: sans-serif;
  background-color: #eeeeee;
}

.file-upload {
  background-color: #ffffff;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #e85e19;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #e85e19;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #383737;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 4px dashed #e85e19;
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: #e85e19;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

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

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: #e85e19;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}





/* For the new header, all text shall be black around the intro section 
	 Will hopefully be easier to read.
*/
.text-black {
	color: white;
}

.text-small {
  font-size: 100%;
}

.text-italic {
  font-style: italic;
}

/* Changing the Navbar text color to be darker - easier to read on a light background header image. */

/* Making the "text-muted" class smaller, seems a bit too large. */
.text-muted {
  font-size: 97%;
}

/* Removing the bottom margin in the Languages and Skills area */
#about > div > div:nth-child(2) > div:nth-child(3) > p.text-faded.no-margin {
    margin-bottom: 0;
}
#about > div > div:nth-child(2) > div:nth-child(4) > p.text-faded.no-margin {
  margin-bottom: 0;
}

/*  For the GitHub Section link
    These styles make the GitHub Section header appear white all the time,
    unless hovered on, in which case they turn blue. I like this style better.

    I also decided to use borders instead of underlines since the J in Jason gets cut
    off by an underline, but not by a border (which looks exactly like an underline only
    I can control it better). This resulted in a MUCH nicer looking underline!
    I used this link from Stackoverflow for this:
    https://stackoverflow.com/questions/9586596/control-underline-position-on-text-decoration-underline

    These links were also helpful:
    https://www.w3schools.com/css/css_link.asp
    https://www.w3schools.com/css/tryit.asp?filename=trycss_link2
*/
.text-blue {
  color: blue;
  border-bottom: 1px solid currentColor;
}
  /* 6/15/2018: Renamed because Bootstrap's CSS ALSO has a text-white class,
                and my own text-white class was adding a border on the H2 'Education'
                header text. */
.text-white-link {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color when it is unvisited */
a.text-blue:link  {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white-link:link  {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color after being clicked on and visited */
a.text-blue:visited {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white-link:visited {
  color: white;
  border-bottom: 1px solid currentColor;
}

/* Link color while being hovered on */
a.text-blue:hover {
  color: blue;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
a.text-white-link:hover {
  color: blue;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* Link color the moment it is clicked */
a.text-blue:active {
  color: blue;
  border-bottom: 1px solid currentColor;
}
a.text-white-link:active {
  color: white;
  border-bottom: 1px solid currentColor;
}

.min-padding {
  padding-top: 2em;
  padding-bottom: 2em;
}


/* Edit thiyfgyuewbfuewvyufvey0vfyewvfvefvegvfgewvfvewovfgewvgyfewgs */
.min-padding-top {
  padding-top: 2em;
  padding-bottom: 2em;
}

/*
    This class is a fix for a bug I noticed on certain screen resolutions.
    When the width was between ~768px and ~991px (small devices) I noticed that
    the 2x2 rows were not looking right - the first row of 2 squares looked fine
    but the the next row was all messed up, one square was higher than the other.

    It turns out if 2 or 3 squares share the same height but one square doesn't,
    then the alignment is thrown off on the grid.

    This small padding increase fixes the issue by making all 4 squares the same
    height.
*/
.div-padding-fix {
  padding-bottom: 2em;
}

/* Adding some background color options */
.bg-green {
	/* Spotify Green - hex code from: https://brandpalettes.com/spotify-color-codes/ */
	background-color: #1DB954 !important;
}

/* Black button to go with the Spotify Green. The active/focus/etc stuff is for when you
   hover / click on the button. */
.btn-black {
	color: #fff;
	background-color: #000000 !important;
}
.btn-black:active, .btn-black:focus, .btn-black:hover {
	color: #fff;
	background-color: #262626 !important;
}
.btn-black:active, .btn-black:focus {
	box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important;
}

/* Black hrefs & hrs too */
.href-black {
	color: #000000;
}
hr.black {
	border-color: #000000;
	color: #000000;
}

/* 	Vertically center the images on the "Fun Stuff" section
		https://stackoverflow.com/a/37163431
*/
.images-vcenter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* 	Add border to the images on the "Fun Stuff" section 
		https://www.w3schools.com/csS/css3_images.asp
*/
.images-border {
	border: .5em solid #000000;
	border-radius: 3em;
}

.images-border-skiing {
	border: .5em solid #000000;
	border-radius: 50%;
}

/* 
		https://stackoverflow.com/a/2711996 
*/
.images-size-mtb {
	width: 70%;
	height: auto;
}

.images-size-skiing {
	width: 90%;
	height: auto;
}

/* Rl Red Color */
.RlRed {
	color: #E61231 !important;
	font-weight: bold;
}





#loading-circle {



  display: flex;
  justify-content: center;
  align-items: center;

  /* position: fixed; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #f3f3f3;
  border-top: 3px solid #636568;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  z-index: 9999;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




.loading-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}




.my-text
{
  font-size: 50px;
}