.centered {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  }
  
                  #cc-name{
                      font-size: 8vw;
                      text-align: center;
                      opacity: 0.65;
                  }
  
                  /* currently not used*/
                  .cc-animate-opacity{
                      animation:opac 0.8s
                  }
                  @keyframes opac{
                      from{
                          opacity:0
                      }
                      to{
                          opacity:0.8
                      }
                  }




/*--------------------------------------------*/
/*-------------    Preloader    --------------*/
/*--------------------------------------------*/


.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #276873;
  /*background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");  z-index: 999999;
  */
  z-index: 99999;
}

.loader img{
  border: 20px solid #292929;
  max-width: 320px;
  z-index: 99999;
}


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

  .loader img {
    width: 80%;
  }

}


.preloader-text{
  font-size:xx-large;
  text-align: center;
  margin-top: 10px;
}


.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/*
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
  z-index: 9999999;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}
*/























/*------------------------START OF NAVBAR STUFF------------------------*/
                  #nav-bar-cc-logo{
                    height: 42.4px; 
                    width: auto; 
                    padding: 0px 16px; 
                    opacity: 0.85;
                    transition: opacity 1s ease-in-out 100ms;
                  }

                  #nav-bar-cc-logo:hover{
                    opacity: 1;
                    transition: opacity 1s ease-in-out 100ms;
                  }

                  /*Controls "Christopher Cattron, EIT" font size in navbar when screen size changes"*/
                  @media (max-width: 380px) {
                    #name-in-navbar{
                      font-size: small;
                    }
                  }
                  @media (max-width: 350px) {
                    #name-in-navbar{
                      font-size: x-small;
                    }
                  }

                  /*Hides the navbar labels and icons when screen is too crowded*/
                  @media (max-width: 1233px) {
                    .nav-bar-hide-text{display:none;}

                    #home-icon:hover #home-nav-text,
                    #about-icon:hover #about-nav-text,
                    #education-icon:hover #education-nav-text,
                    #experience-icon:hover #experience-nav-text,
                    #covid-19-icon:hover #covid-19-nav-text,
                    #fun-stuff-icon:hover #fun-stuff-nav-text,
                    #contact-icon:hover #contact-nav-text{
                      display:inline!important;}
                    
                    #home-nav-text:hover,
                    #about-nav-text:hover,
                    #education-nav-text:hover,
                    #experience-nav-text:hover,
                    #covid-19-nav-text:hover,
                    #fun-stuff-nav-text:hover,
                    #contact-nav-text:hover{
                      display:inline!important;}
                  }

                  
                  @media (max-width: 784px) {
                    
                    #home-nav-text,
                    #about-nav-text,
                    #education-nav-text,
                    #experience-nav-text,
                    #covid-19-nav-text,
                    #fun-stuff-nav-text,
                    #contact-nav-text{
                      font-size: 10px;
                    }
                  }

                  @media (max-width: 749px) {
                    .nav-bar-hide{display:none!important}
                  }


                  @media (max-width: 992px) and (min-width: 749px){
                     .w3-hide-medium-cc-edit {
                      display: none!important;
                  }
                  }
                 
/*------------------------END OF NAVBAR STUFF------------------------*/



/*This is for the logos in the Affiliation section */
.affiliation-icon {
  width: 30px; 
  height: auto; /* Maintain aspect ratio */
  margin-right: 10px; /* Adjusts spacing between icon and text*/
}


/*This section of code must be added to the flaticon css whenever more icons 
are added so that the flaticon styling matches that of the font-awesome icons in the navbars*/
.flaticon-party:before{
  font-family: Flaticon;
  font-size: 16px; /*I originally had 15px, but I don't know why. I like 16px better for now.*/
  font-style: normal;
  margin-left: 0px;
}

.flaticon-party{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
} 

.flaticon-virus-1:before{
  font-family: Flaticon;
  font-size: 16px; /*I originally had 15px, but I don't know why. I like 16px better for now.*/
  font-style: normal;
  margin-left: 0px;
}

.flaticon-virus-1{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
} 

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   

margin-left: 0x;
}

/* ALSO FOR FLATICON CSS: delete the margin-left: 20px in the [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { } section. It will look like this instead: 

    [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
      font-family: Flaticon;
            font-size: 20px;
    font-style: normal;
    }



    ALSO ALSO!!!!!
    Custom icons are held in an old font css file. It's in the custom-icons folder. It is linked in the header of the index.html
    It is frankenstein's monster
*/


/* Show and Hide on Mobile Classes */

.show-on-mobile{
  display: none;
}

  
  @media screen and (max-width: 600px){
  
  .show-on-mobile {
  display: inline-block;
  }
  
  .hide-on-mobile{
  display: none;
  }
  
  }




/*RESUME & CV BUTTON*/


.cc-button-1 {
	-moz-box-shadow:inset 0px 1px 3px 0px #276873;
	-webkit-box-shadow:inset 0px 1px 3px 0px #276873;
	box-shadow:inset 0px 1px 3px 0px #276873;
	background:-moz-linear-gradient(top, #599bb3 5%, #007da7 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #007da7 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #007da7 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #007da7 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #007da7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#007da7',GradientType=0);
	background-color:#599bb3;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:1px solid #003249;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Montserrat;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #3d768a;
	
 
 }

.cc-button-1:hover {
	background:-moz-linear-gradient(top, #007da7 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #007da7 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #007da7 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #007da7 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #007da7 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007da7', endColorstr='#599bb3',GradientType=0);
	background-color:#007da7;
}


.cc-button-1:active {
	position:relative;
	top:1px;
}







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

   /* Style for logo in the about the logo section */
   #about-the-logo {
    width: 75px;
    margin: 15px auto;
    display: block;
    opacity: 0.85;
    transition: width 1s ease-in-out 100ms, opacity 1s ease-in-out 100ms;
  }
  #about-the-logo:hover {
    width: 150px;
    opacity: 1;
    transition: width 1s ease-in-out 100ms, opacity 1s ease-in-out 100ms;
  }

  /* Style for logo "line" between sections */
  #end-line-logo {
    width: 75px;
    margin: 15px auto;
    display: block;
    opacity: 0.85;
  }

  /* START Style for lines */
    #line-cg-blue{
      width:100%;
      height:10px;
      background-color: #007ea7;
      border-radius: 5px;
      margin: 0 auto;
      position: relative;
    }
    
    #line-prussian-blue{
      width:95%;
      height:8px;
      background-color: #003249;
      border-radius: 4px;
      margin: 0 auto;
      position: relative;
      top: 15px;
    }
    
    #line-777{
      width:100%;
      height: 1px;
      background-color: #777;
      margin: 15px auto;
      position: relative;
    }
  
  /* END Style for lines */



  
  /* ----------------------------------------------------------------------------- */
  /*                                                                               */
  /*                       Style from w3 Css Parallax Template                     */
  /*                                                                               */
  /* ----------------------------------------------------------------------------- */


    body,h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif;}
    body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
    }

    /* Create a Parallax Effect */
    .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-covid {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    opacity: 65%;
    }

    
    /* First image (Logo. Full height) */
    .bgimg-1 {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      background-image: url('..//images/banner-header.jpg');
      min-height: 100%;
    }

    .bgimg-1:after{
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      display: block;
      background: -webkit-linear-gradient(to bottom, rgba(204, 219, 220, 0.75), rgba(154, 209, 212, 0.75), rgba(128, 206, 215, 0.75), rgba(0, 126, 167, 0.75)/*, rgba(0, 50, 73, 0.85)*/); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(204, 219, 220, 0.75), rgba(154, 209, 212, 0.75), rgba(128, 206, 215, 0.75), rgba(0, 126, 167, 0.75)/*, rgba(0, 50, 73, 0.85)*/); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    /* Second image (Education) */
    .bgimg-2 {
      background-image: url("../images/banner-education.JPG");
      min-height: 500px;
      }
    

    /* Third image (Experience) */
    .bgimg-3 {
      background-image: url("../images/banner-experience.jpg");
      min-height: 500px;
    }

    /* Fourth image (Fun Stuff) */
    .bgimg-4 {
      background-image: url("../images/fun.jpg");
      min-height: 500px;
    }

    /* Fifth image (Contact) */
    .bgimg-5 {
      background-image: url("../images/contact-banner.jpg");
      min-height: 500px;
    }

    /* COVID image (COVID-19) */
    .bgimg-covid {
      background-image: url("../images/covid-banner.png");
      min-height: 500px;
    }


    .w3-wide {letter-spacing: 10px;}
    .w3-hover-opacity {cursor: pointer;}

    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1024px) {
      .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-covid {
          background-attachment: scroll;
          min-height: 400px;
      }

     /* .bgimg-2{
        background-image: url("../images/banner-education-crop.jpg");
      }
      */
   }


  /* --------------------------------------------------------------------- */
  /*                                                                       */
  /*                       Education Container Styling                     */
  /*                                                                       */
  /* --------------------------------------------------------------------- */

  

  /* Changes default values from user agent stylesheet for p in cont-1 */
.cont-3 p {
  display: block;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  /*font-size: 16px;*/
}

/*----------------------*/
/* "cont" level styling */
/*----------------------*/

/* cont-3 level */

.cont-3 {
  max-width: 946px;
  margin: 50px auto;
  padding: 35px;
  background-color: whitesmoke;
  -webkit-box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.43);
  box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.43);
  border-radius: 10px;
}


/* cont-3-X level */

.cont-3-1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cont-3-2{
  display: flex;
  flex-direction: column;
}

.cont-3-3{
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.cont-3-4{
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.cont-3-5{
  display: flex;
  flex-direction: column;
  padding: 15px;
}


/* cont-3-X level ALL */
.cont-3-1, .cont-3-2, .cont-3-3, .cont-3-4{
  /*margin: 5px;*/

}


/* cont-3-X-X level */

.cont-3-1-1{
  
}

.cont-3-1-2{
  text-align: left;
}

.cont-3-1-3 {
  text-align: center;
    padding: 1% 0;

}

.cont-3-2-1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cont-3-2-2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cont-3-2-3{
  
}

.cont-3-2-4{
  
}

.cont-3-3-1{
  font-size: 1.2em!important;
}

.cont-3-5-1{
  font-size: 1.2em!important;
}


/* Clear floats after the cont-3-3-2 columns (needed for two column effect) */
.cont-3-3-2:after{
  content: "";
  display: table;
  clear: both;
}

.cont-3-3-2 p{
     /*border: 1px solid black; /*display outline*/
}

.cont-3-3-3{
  font-size: 0.8em!important;
}


.cont-3-4-1{
  font-size: 1.2em!important;
}


.cont-3-4-2{

  width: 100%;
  

  font-size: 1.066666667em;
}

.cont-3-4-2 p{
   /* border: 1px solid black; /*display outline*/
}

.cont-3-4-3{
  font-size: 0.8em!important;
  margin-top: 15px;
}

.cont-3-5-3{
  font-size: 0.8em!important;
  margin-top: 15px;
}



/* cont-3-X-X level ALL */
.cont-3-1-1, .cont-3-1-2, .cont-3-1-3, 
.cont-3-2-1, .cont-3-2-2,.cont-3-2-3, .cont-3-2-4, 
.cont-3-3-1, .cont-3-3-2, /*.cont-3-3-3,*/ 
.cont-3-4-1, .cont-3-4-2, .cont-3-4-3{
  margin: 0 5px;
}

.cont-3-3-3{
  margin-top: 15px;
}



/* cont-3-X-X-X level */

.cont-3-1-1-1{
  
}

.cont-3-1-1-2{
  
}

.cont-3-1-2-1{
  
}

.cont-3-1-2-2{
  
}

/*Used for two column effect in course list*/ 
.cont-3-3-2-1, .cont-3-3-2-2, .cont-3-3-3-1{
  float: left;
  width: 50%;
 
}



/* cont-3-X-X-X level ALL */
.cont-3-1-1-1, .cont-3-1-1-2, .cont-3-1-2-1, .cont-3-1-2-2, .cont-3-2-1-1, .cont-3-2-1-2, .cont-3-2-2-1, .cont-3-2-2-2{
  /*margin: 5px;*/

}


.cont-3-4-2-1, .cont-3-4-2-2, .cont-3-4-2-3{
  width:33.33333%;
  float:left;
}


/*cont-3-X-X-X-X level */

.cont-3-4-2-X-1{
  height: 86px;
}

.cont-3-4-2-X-3{
  width: 100%;
  max-height: 200px;
  border-radius: 2px;
  height: 200px;

}

/*-----------*/
/* ID Styles */
/*-----------*/



#ed-logo{
  width: auto;
  max-height:50px;
  
}

#ed-logo-extracurricular{
  width: 100%;
  height: auto;
  padding: 5px 20px;

}

#ed-award{

  padding-left: 15px;
  
}


#ed-position{
 /* display: none; */
  font-size: 13px;
  text-align: center;
}

#ed-slideshow{

}


#ed-university-name{
  font-size: 1.666667em;
}

#ed-degree-title{
  font-size: 1.5333333333333334em;
}

#ed-gpa{
  font-size: 1.33333em;
}

#ed-location{
  font-size: 1.33333em;
}

#ed-date{
  font-size: 1.33333em;
}

#ed-highlights{
  font-size: 1.066667em;
}


#ed-course{
  font-style: italic;
  /*text-align: center;*/
}

#ed-date-expand{
  display: none;
}

#ed-GPA-show-on-desktop{
  display: inline;
}

#ed-undergrad-GPA-show-on-mobile, #ed-grad-GPA-show-on-mobile{
  display: none;
}



.ed-line-777{
  width:100%;
  height: 1px;
  background-color: #777;
  margin: 15px auto;
  position: relative;
}

.ed-line-777-appear-on-mobile{
  display: none;
  max-width: 400px;
  height: 1px;
  background-color: #777;
  margin: 15px auto;
  position: relative;
  width: 60%;

}

/* Responsive layout - when the screen is less than 950px wide, reduce size of ed-logo */
@media screen and (max-width: 950px) {
    /*  #ed-logo {
        width: auto;
        max-height: 40px;
    }
*/
}

/* Responsive layout - when the screen is less than 980px wide, reduce font-size of cont- 3-1 & 3-2 */
@media screen and (max-width: 980px) {

.cont-3-1, .cont-3-2{
  font-size: 14px;
}

}

/* Responsive layout - when the screen is less than 917px wide, reduce font-size of cont- 3-1 & 3-2 */
@media screen and (max-width: 917px) {

  .cont-3-1, .cont-3-2{
    font-size: 13px;
  }
  
  }



  /* Responsive layout - when the screen is less than 905px wide, make course names stack and center, make "coursework:" center, too*/
@media screen and (max-width: 905px) {

  /*Used for two column effect in course list*/ 
  .cont-3-3-2-1, .cont-3-3-2-2, .cont-3-3-3-1{
    float: left;
    width: 100%;
    text-align:center;
   
  }
  
  .cont-3-3-1, .cont-3-4-1, .cont-3-5-1{
    text-align: center;
  }

  }

  /* Responsive layout - when the screen is less than 560px wide, reduce text size of course names*/
  @media screen and (max-width: 560px) {

    /*Used for two column effect in course list*/ 
    .cont-3-3-2-1, .cont-3-3-2-2, .cont-3-3-3-1{
   
    }
    
    #ed-course{
     line-height: 1.25;
     margin: 2px auto;
    }

    }
  
/* Responsive layout - when the screen is less than 865px wide, start stacking elements in 3-1 and 3-2*/
  @media screen and (max-width: 865px) {
    
.cont-3-1, .cont-3-2{
  display: flex;
  flex-direction: column;
}

.cont-3-1-1, .cont-3-1-2{
  width: 100%;
}

.cont-3-1-1 {
  margin: 0 auto;
}

.cont-3-1-2, .cont-3-3-3 {
  text-align: center;
}

.cont-3-2-1, .cont-3-2-2{
  flex-direction: column;
}

.cont-3-2-1-1, .cont-3-2-1-2,
.cont-3-2-2-1, .cont-3-2-2-2{
  text-align: center;
}

#ed-date-expand{
  display: inline;
}

#ed-GPA-show-on-desktop{
  display: none;
}

#ed-undergrad-GPA-show-on-mobile, #ed-grad-GPA-show-on-mobile{
  display: inline;
  font-size: 1.1333333333333333em;
}

#ed-date{
  font-size: 1.1333333333333333em;
}

#ed-line-777-appear-on-mobile{

display: block;

}
  
  }




 /* Responsive layout - when the screen is less than 950px wide, fix column widths */

 @media (max-width: 950px){

  .w3-mobile {
      display: block;
      width: 100%!important;
  }
  
  #ed-logo-extracurricular{

  width: 180px!important;
  height: auto!important;

  }
  

  .cont-3-4-2-X-1 {
    height: auto;

  }


  .cont-3-4-2-1, .cont-3-4-2-2, .cont-3-4-2-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
}



  }








  /* ---------------------------------------------------------------------- */
  /*                                                                        */
  /*                       Experience Container Styling                     */
  /*                                                                        */
  /* ---------------------------------------------------------------------- */

/* Changes default values from user agent stylesheet for p in cont-1 */
.cont-1 p {
  display: block;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 16px;
}


.xp-misc{
  font-size: 12px;
}

/*----------------------*/
/* "cont" level styling */
/*----------------------*/

/* cont-X level */

.cont-1 {
  width: 100%;
  margin: 50px auto;
  padding: 35px;
  background-color: whitesmoke;
  -webkit-box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.43);
  box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.43);
  border-radius: 10px;
}



/* cont-X-X level */

.cont-1-1{
  display: flex;
}

.cont-1-2{
  display: flex;
  width: 100%;
}

.cont-1-3{
  padding: 15px;
}

/* cont-X-X level ALL */
.cont-1-1, .cont-1-2, .cont-1-3{
  /*margin: 5px;*/
}


/* cont-X-X-X level */

.cont-1-1-1{
  width: 75%;
}

.cont-1-1-2{
  width: 25%;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cont-1-2-1{
  /*border-radius: 5px;*/
  /*width: 450px;*/
  /*height: 375px;*/

}

.cont-1-2-2{
  width: 50%;
  font-style: italic;
}

  /* Responsive layout - when the screen is less than 600px wide, reduce padding of xp-cont */
  @media screen and (max-width: 600px) {
    
    .cont-1{
      padding: 20px;
    }
  }

    






/* 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 and reduce font size */
  @media screen and (max-width: 850px) {
    
    /* For elements in cont-1-1 */

    .cont-1-1{
      flex-wrap: wrap;
    }
  
    .cont-1-1-1{
      width: 100%;
    }

    .cont-1-1-2{
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-top: 0;
    }
  

    
    /* For elements in cont-1-2 */
    
    .cont-1-2{
      align-items: center;
      flex-direction: column;
    }
    .cont-1-2-1{
      /*width: 100%;*/
      /*height: 500px;*/
    }

    .cont-1-2-2{
      width: 100%;
    }
    
    
    #xp-slideshow-1 > div ,
    #xp-slideshow-2 > div ,
    #xp-slideshow-3 > div , 
    #xp-slideshow-4 > div {
      height: 500px;
    }


  }

  

.cont-1-2-2 ul li { padding: 5px 0px; }

/* cont-X-X-X level ALL */
.cont-1-1-1, .cont-1-1-2, .cont-1-2-1, .cont-1-2-2{
  /*margin: 5px;*/
}

/* cont-X-X-X-X level */

.cont-1-1-1-1{
  display: flex;
}

.cont-1-1-1-2{

}

.cont-1-1-2-1{

}

.cont-1-1-2-2{

}

/* cont-X-X-X-X level ALL */
.cont-1-1-1-1, .cont-1-1-1-2, .cont-1-1-2-1, .cont-1-1-2-2 {
  /*margin: 5px;*/
}

/* cont-1-X-X-X-X level */
.cont-1-1-1-1-1, .cont-1-1-1-1-2{
  /*border: 1px solid black; /*display outline*/
}


@media screen and (max-width: 720px){
  .cont-1-1-1-1 {
    text-align: center;
    flex-direction: column;
}
}


/*-----------*/
/* ID Styles */
/*-----------*/

#xp-employer-name{
  font-size: 24px;
}

#xp-job-title{
  font-size: 36px;
  /*font-variant-caps: small-caps;*/
  text-transform: uppercase;

}

#xp-location, #xp-date{
  font-size: 20px;
}

#xp-job-highlights{
  font-size: 14px;
}

#xp-logo{
  width: auto;
  max-height:50px;
  margin-right: 20px;
  
  
}


/* Responsive layout - when the screen is less than 850px wide, center text for xp-location & xp-date */
  @media screen and (max-width: 850px) {
    
    #xp-location, #xp-date{
      text-align: center;
    }

  }

  /* Responsive layout - when the screen is less than 720px wide, center text for xp-employer-name & xp-job-title */
  @media screen and (max-width: 720px) {
    
    #xp-employer-name, #xp-job-title{
    
      text-align: center;
    
    }
    
  }
  /* Responsive layout - when the screen is less than 600px wide, reduce font size of xp-job-title, xp-date, xp-location */
  @media screen and (max-width: 600px) {
    
    #xp-job-title{
    
      font-size: 26px;
    
    }
    
    #xp-date, #xp-location{
    
      font-size: 16px;
    
    }
  }



/*----------------*/
/* Slideshow code */
/*----------------*/

/*see html*/

/*----------------------------*/
/* Read More Read Less button */
/*----------------------------*/

/*standard read more read less button*/

.btn-read-more{
  margin-left:0;
  display:block;
  width:90%;
  margin: 0 auto;

  /*color:#333; */
  /*background-color:#fff; */ 
  border-color:#ccc
}

[data-toggle=buttons]>.btn-read-more input[type=checkbox],[data-toggle=buttons]>.btn-read-more input[type=radio]{
  position:absolute;
  clip:rect(0,0,0,0);
  pointer-events:none
}

.btn-read-more.focus,.btn-read-more:focus{
  color:#333;
  background-color:#e6e6e6;
  border-color:#8c8c8c
}
.btn-read-more:hover{
  color:#333;
  background-color:#e6e6e6;
  border-color:#adadad
}
.btn-read-more.active,.btn-read-more:active,.open>.dropdown-toggle.btn-read-more{
  color:#333;
  background-color:#e6e6e6;
  background-image:none;
  border-color:#adadad
}
.btn-read-more.active.focus,.btn-read-more.active:focus,.btn-read-more.active:hover,.btn-read-more:active.focus,.btn-read-more:active:focus,.btn-read-more:active:hover,.open>.dropdown-toggle.btn-read-more.focus,.open>.dropdown-toggle.btn-read-more:focus,.open>.dropdown-toggle.btn-read-more:hover{
  color:#333;
  background-color:#d4d4d4;
  border-color:#8c8c8c
}
.btn-read-more.disabled.focus,.btn-read-more.disabled:focus,.btn-read-more.disabled:hover,.btn-read-more[disabled].focus,.btn-read-more[disabled]:focus,.btn-read-more[disabled]:hover,fieldset[disabled] .btn-read-more.focus,fieldset[disabled] .btn-read-more:focus,fieldset[disabled] .btn-read-more:hover{
  background-color:#fff;
  border-color:#ccc
}
.btn-read-more .badge{
  color:#fff;
  background-color:#333
}

.btn-read-more+.btn-read-more{
  margin-top:5px
}

input[type=button].btn-read-more,input[type=reset].btn-read-more,input[type=submit].btn-read-more{
  width:100%
}


/*Read more button for xp-misc section*/

.btn-read-more-xp-misc{
  margin-left:0;
  display:block;
  margin: 20px auto;
  width: 90%;
  font-size: 12px;
  /*color:#333; */
  /*background-color:#fff; */ 
  border-color:#ccc
}

[data-toggle=buttons]>..btn-read-more-xp-misc input[type=checkbox],[data-toggle=buttons]>..btn-read-more-xp-misc input[type=radio]{
  position:absolute;
  clip:rect(0,0,0,0);
  pointer-events:none
}

..btn-read-more-xp-misc.focus,..btn-read-more-xp-misc:focus{
  color:#333;
  background-color:#e6e6e6;
  border-color:#8c8c8c
}
..btn-read-more-xp-misc:hover{
  color:#333;
  background-color:#e6e6e6;
  border-color:#adadad
}
..btn-read-more-xp-misc.active,..btn-read-more-xp-misc:active,.open>.dropdown-toggle..btn-read-more-xp-misc{
  color:#333;
  background-color:#e6e6e6;
  background-image:none;
  border-color:#adadad
}
..btn-read-more-xp-misc.active.focus,..btn-read-more-xp-misc.active:focus,..btn-read-more-xp-misc.active:hover,..btn-read-more-xp-misc:active.focus,..btn-read-more-xp-misc:active:focus,..btn-read-more-xp-misc:active:hover,.open>.dropdown-toggle..btn-read-more-xp-misc.focus,.open>.dropdown-toggle..btn-read-more-xp-misc:focus,.open>.dropdown-toggle..btn-read-more-xp-misc:hover{
  color:#333;
  background-color:#d4d4d4;
  border-color:#8c8c8c
}
..btn-read-more-xp-misc.disabled.focus,..btn-read-more-xp-misc.disabled:focus,..btn-read-more-xp-misc.disabled:hover,..btn-read-more-xp-misc[disabled].focus,..btn-read-more-xp-misc[disabled]:focus,..btn-read-more-xp-misc[disabled]:hover,fieldset[disabled] ..btn-read-more-xp-misc.focus,fieldset[disabled] ..btn-read-more-xp-misc:focus,fieldset[disabled] ..btn-read-more-xp-misc:hover{
  background-color:#fff;
  border-color:#ccc
}
..btn-read-more-xp-misc .badge{
  color:#fff;
  background-color:#333
}

..btn-read-more-xp-misc+..btn-read-more-xp-misc{
  margin-top:5px
}

input[type=button]..btn-read-more-xp-misc,input[type=reset]..btn-read-more-xp-misc,input[type=submit]..btn-read-more-xp-misc{
  width:100%
}








/*-----------------------------*/
/*  INTERESTS/SKILLS/ABILITIES */
/*-----------------------------*/

#isa{
  letter-spacing: 7px;
}


/* cont-2-X level */

.cont-2-1 {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  
  /*border: 1px solid blue; /*display outline*/
}

/* cont-2-X-X level */

.cont-2-1-1{
  width: 50%;
  font-size: 18px;
  padding: 15px;
}

.cont-2-1-2{
  width: 50%;
  font-size: 18px;
  padding: 15px;
}


/* cont-2-X-X level ALL */
.cont-2-1-1, .cont-2-1-2{
  /*margin: 5px;*/
   /* border: 1px solid green; /*display outline*/
}


    /*  Responsive layout - when the device width is less than 1334px wide, make the two columns stack on 
  top of each other instead of next to each other and reduce letter spacing  */
    @media only screen and (max-device-width: 1334px) {

      
    /* For elements in cont-2-1 */

    .cont-2-1{
      flex-wrap: wrap;
    }
  
    .cont-2-1-1{
      width: 100%;
    }

    .cont-2-1-2{
      width: 100%;
      
    }
    
    
    #isa{
      letter-spacing: normal;
    }


   }






/* Responsive layout - when the screen is less than 1175px wide, make the two columns stack on 
  top of each other instead of next to each other and center text*/
  @media screen and (max-width: 1175px) {
    
    /* For elements in cont-2-1 */

    .cont-2-1{
      flex-wrap: wrap;
      text-align: center;
    }
  
    .cont-2-1-1{
      width: 100%;
    }

    .cont-2-1-2{
      width: 100%;
      
    }
    
    



  }

  @media screen and (max-width: 600px) {
    
    /* For elements in cont-2-1 */


    #isa{
      letter-spacing: normal;
    }

    
  }

/*----------------------------------*/
/* END   INTERESTS/SKILLS/ABILITIES */
/*----------------------------------*/










  /* -------------------------------------------------------------------- */
  /*                                                                      */
  /*                       FUN ZONE Container Styling                     */
  /*                                                                      */
  /* -------------------------------------------------------------------- */


/* Create two equal columns that floats next to each other */
.cc-column {
  float: left;
  width: 50%;
  padding: 10px;
}

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




/*-----------------------------------------------*/
/*-------------------BOOKSHELF-------------------*/
/*-----------------------------------------------*/


/* START First Photo Grid Styling */

@media (min-width: 601px){

.project-item h4 {
    height: 72px;
}   

} 

.project-gallery-img{
    transition: 1000ms ease-in-out;
    width: 100%;
    border-radius: 15px;
}


.project-gallery-img:hover{
    filter: brightness(1.05);
    transform: scale(1.05);
}

/* END First Photo Grid Styling */



#bookshelf {
  position: relative;
  box-sizing: border-box;
  vertical-align: bottom;
  padding-bottom: 10px;
  /*display: table; I changed display to flex for easier centering*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;




}
#bookshelf img {
  position: relative;
  display: inline-block;
  /*width: 150px;*/
  height: 150px;
  width: auto;
  bottom: 0;
  transition: all 1000ms ease-in-out;
}

#bookshelf img:hover{
  filter: brightness(1.05);
  transform: scale(1.05);
  bottom: 20px;
}




#bookshelf a {
position: relative;
display: inline-block;
margin-top: 1em;
margin-right: -0.25em;
padding: 0 10px;
text-decoration: none;
margin-bottom: 25px;
}
#bookshelf a:after {
content:"";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
height: 10px;
background-color: #777;
}





/*-----------------------------------------------*/
/*--------------------TOOLTIP--------------------*/
/*-----------------------------------------------*/
#tooltip
{
    text-align: center;
    color: #fff;
    background: rgba(0, 50, 73, 0.95);
    position: absolute;
    z-index: 100;
    padding: 15px;
}
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(0, 50, 73, 0.95);
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid rgba(0, 50, 73, 0.95);
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }







        /*LAST UPDATED*/
        .last-updated{
          font-size: 12px;
        }