*{
  margin: 0;
 
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: white;
   padding-top: 73px;
 
   
}

.wrapper{
  display: flex;
  position: relative;
	min-height: 1000px;
}

.wrapper .sidebar{
  width: 250px;
  min-height: 100%;
  background: #4964B1;
  padding: 30px 0px;
  position: relative;
  
}

.wrapper .sidebar h2{
  color: white;
	/*font-family: monospace;*/
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
	overflow-wrap:break-word;
	font-size: 1.3em;
	margin-left: 10%;
	
}

.wrapper .sidebar ul p{
  padding-top: 20px;
  text-align: center;
  opacity: .8;
	
} 

.wrapper .sidebar ul p a{

	color: #CBD9FF;
} 

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 2px solid #A5BDFF;
  border-bottom: 2px solid rgba(0,0,0,0.05);
  border-top: 2px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #CBD9FF;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #7492E7;
	
}
    
.wrapper .sidebar ul li:hover a{
  color: white;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #594f8d;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #bdb8d7;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
  width: 100%;
	min-height: 750px;
	background: white;
  /*margin-left: 250px;*/
}

.wrapper .main_content .header{
  padding: 7px;

  background: #f3f5f9;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

#blue-header{
  padding: 7px;
	min-height: 35px;
  background: #4964B1;
  color: #4964B1;
  
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
min-height: 750px;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}

#viewtable{
	border: 1px solid #999;
	padding: 0.5rem;
	width: 100%;
	
	border-collapse: collapse;
	
}
#viewtable tr td{
	padding: 0.25rem;
	text-align: left;
	border: 1px solid #ccc;
	
}

#message-notfilled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#inner-message {
    margin: 0 auto;
}




















.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
  z-index: 9999;
}

/* Callout header */
.callout-header {
  padding: 12px 15px;
  background: #00700d;
  font-size: 25px;
  color: white;
}

/* Callout container/body */
.callout-container {
  padding: 15px;
  background-color: white;
  color: black
}

/* Close button */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
  color: lightgrey;
}

/*  END OF POPUP STUFF*/
.navbar {
	resize:none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  min-height: 73px;
  
  color:#f0f9ff;
  background-color: #282d32;
	overflow: visible;
  padding: 0rem 1rem;
}

.navbar ul li{
  width: 130px;
	
  
	overflow: hidden;
}
.dropdown{
  width: 130px;
  color: rgba(0,0,0,.5);
}
.dropdown:hover{
  background-color: #d5dee2;
}

.nav-link{
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
  color:#f0f9ff;

}
.navbar ul li:hover{

  background-color: #d5dee2;

}
/*end of navbar stuff*/

input[type=number]{
	background-image: xf155;
}
#rm-fi{
	  border: 1px solid #ccc;
      background-color: #f4f4f4;
      padding: 20px;
      margin-bottom: 10px;
}
span {
    display: inline-block;
    vertical-align: middle;
}


.page-footer{
	z-index: -999;
	width:auto; 
	
}
.footer-dark {
	
padding:40px 0;

color:#f0f9ff;
background-color:#282d32;

position: relative;
bottom: 0px;
width: 100%;
}



.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}

.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}

.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}

.footer-dark ul a:hover {
opacity:0.8;
}

@media (max-width:767px) {
.footer-dark .item:not(.social) {
  text-align:center;
  padding-bottom:20px;
}
}

.footer-dark .item.text {
margin-bottom:36px;
}

@media (max-width:767px) {
.footer-dark .item.text {
  margin-bottom:0;
}
}



.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}

.footer-dark .item.social {
text-align:center;
}

@media (max-width:991px) {
.footer-dark .item.social {
  text-align:center;
  margin-top:20px;
}
}

.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}

.footer-dark .item.social > a:hover {
opacity:0.9;
}

.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}

.black-border{
  border-color: black;
  border-width: 1px;
  border-style: solid;

}

.row{
  margin-right: 0px;
  margin-left: 0px;
}
/*new stuff*/
.card-img-top{
  height: 285px;
  object-fit: cover;
  
}
.card-img-left{
  min-height: 285px;
  object-fit: cover;
 
    
  padding-left: 0px;
  padding-right: 0px;
}
.card{
  border-radius: 15px;
}
.round{
  border-radius: 15px;
}
.top-rounded{
  border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.left-rounded{
  border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
shadow{
  box-shadow: 0px 7px 29px -2px rgba(0,0,0,0.33);
  -webkit-box-shadow: 0px 7px 29px -2px rgba(0,0,0,0.33);
  -moz-box-shadow: 0px 7px 29px -2px rgba(0,0,0,0.33);
}
.col-sm-12{
  padding-left: 6px;
  padding-right: 6px;
}

.mW{
 width: 75%;
left: 0px;
right: 0px;
}

.hero{
  width: 100%;
  height: 600px;
  background-color: black;
  

  
}

.jumbotron{
  background-color: #282d3200;
  color: white;
}

.altsection{
  background-color: #f3f4f5;
}


.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
  
  
}

.tag-list li {
  padding: 1rem;
  background: var(--secondary-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--main-color);
}
.scroller {
  min-width: 550px;
  overflow: hidden;
 -webkit-mask: linear-gradient(
  90deg,
  transparent,
  white 20%,
  white 80%,
  transparent
);
mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller-inner {
  width: max-content;
  padding-block: 1rem;
  display: flex;
  position: relative;
  flex-wrap: nowrap;

  gap: 4rem;
   animation: skillScroll 65s linear infinite; 
}
@keyframes skillScroll{
  to{
      transform: translate(calc(-50% - 1.8rem));
  }
}

.ws{
  max-width: 300px;
}

.noborder{
  border: none;
}

.bold{
  font-weight: bold;
}

.review-name{
 display: flex;
 justify-content: end;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.min100{
  min-height: 100px;
}
.min210{
  min-height: 250px;
}
.o-h{
 overflow: hidden;
}
.circle{
  border-radius: 100%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.unstyled-link{
  color: black;
  text-decoration: none;
  display: contents;
  position: relative;
  
}

a > span.linkOverlay {
  position: absolute;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
a > button.hiddenbutton {
  position: absolute;
  opacity: 0;;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.popup{
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999999999999999999999999;
}

.myflex{
  flex-direction: row;
}
.myflex2{
  flex-direction: column;
}
@media  (max-width: 991px) {
  .myflex{
    flex-direction: column;
  }
  .left-rounded{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
  }
  .myflex2{
    flex-direction: row;
  }
}
.green{
  color: green;
}

.hover-bounce:hover{
  transform: translateY(-7px);
 
}
.hover-bounce{
  transform: translate(0px);
  transition: transform .2s ease-in-out;
}

ul.showdisc > li{
  display: list-item;
  list-style-type: disc !important;
}
.aboutpic{
  width: 100%; 
  object-fit: contain; 
  margin-bottom: 5px;
}