/* Custom CSS */

html,
body {
  height: 100%;
  font-family: 'Libre-Franklin' , sans-serif;
  widows: 3;
  orphans: 3;
  line-height: 1.75;
  background-image: linear-gradient(#f9f7f7, white);
  background-repeat: no-repeat;
  margin: 0;
  background-attachment: fixed;
  color: #2B2B2B;
  /*font-size: .85em;*/
}


#nav-main{
  font-family: 'Libre-Franklin', sans-serif;  
  position: static;
  padding-top: 2em;
  padding-bottom: 2em;
  
}

#nav-main .navbar-brand{
  font-family: 'Libre-Franklin', sans-serif;
  font-weight: medium;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}

#nav-main .navbar-brand2{
  font-family: 'Libre-Franklin', sans-serif;
  font-weight: medium;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  color: black;
}

/* @media (min-width: 992px) { 
  /*#nav-main .navbar-brand {font-size:2rem;}
  .section-content {padding: 3em 2em;}
  
} */

.navbar-toggler{
    padding: 0.25em;
}

img {
	max-width: 100%;

}

.wojo-grey {
    background-color: transparent;
    color: #e5e5e5;
}


.btn-light{
  background-color: #2B2B2B;
  color: white;
  border: none;
/*  position: fixed;
  bottom: 0;
  
  */
}

.btn-light:hover{
  background-color: #4d4d4d;
  color: white;
/*  position: fixed;
  bottom: 0;
  
  */
}

#cover-caption {
	width: 100%;
}

#audio{
    width: 5em;
}


#portfolio{
  
}

.card {
	margin: 1em 1em;
	/* padding: .2em .2em;
	   border: 0px; */
  background-color: transparent;
	
}

h5.card-title{
  margin-bottom: 0em;

}

ol.carousel-indicators{
margin-bottom: 0.3em;

}

#portfolio .card {
  padding: .1em .1em;
  border: 1px;
  border-color: black;
  margin: 0.25em;
}

.section-content {

  padding: 0em 2em;
  min-height: 100%;
  border: 1px;
  
  
}

a {
    color: #4A88BA;
}

a:hover{
    color: #0A4C7F;
}

.dropdown-menu{
    font-size: .95em;
    line-height: 1.85em;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    
}

.dropdown-item:hover{
    background-color: #7c7c7c;
    color: white;
}

a:disabled{
    color: #7c7c7c;
}


.dropdown-divider{
    margin: 0;
}

#portfolio .section-content {
  padding: 2rem 0 4rem 0;

  
}

#portfolio .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

#portfolio .image-text {
  transition: .0s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

#portfolio .card:hover .image{
  filter: grayscale(100%) brightness(50%);
}

#portfolio .card:hover .img-fluid{
  filter: grayscale(100%) brightness(50%);
  /*opacity: .5;*/
}


#portfolio .card:hover .image-text {
  opacity: 1;
  text-decoration: none;
  font-size: 1.25em;
  font-family: 'Libre-Franklin', 'sans serif';
  font-weight: 600;
  color: white;
  line-height:1.5em; 
}

#portfolio .img-link:hover{
    background: rgba(0,0,0,0.8);
}

#designquote .card {
  padding: .2em .2em;
  ;
}

#designquote h4{
  margin-bottom: 1.7em;
}

#designquote h5{
  margin-top: 0.8em;
}

#designquote hr{
  margin-top: 0.1em;
}



#about .card {
  padding: .2em .2em;
  
}

#about .btn:hover, .btn:focus {
    color: white;
    background-color:#4d4d4d;
} 


#resume .btn:hover, .btn:focus {
    color: white;
    background-color:#4d4d4d;
}
    
#h4{
font-family: 'Libre-Franklin' , sans-serif;
/*font-size: 1.25em;*/
color: red;
}

#h6{
 font-family: 'Libre-Franklin' , sans-serif;
}

#resume .resume_title {
padding: 0 0 0 1em;
}

#contact{
line-height: 3pt;
padding-top: .75rem;
}

#iam{
line-height: 3pt;
}

#that{
font-size: .65em;
}

.nocardborder{
  border: 0px;
  margin: 0;
}

.cardborder{
  border: .25px;
  border-color: red;
  border-style: solid;
}



/*dots on bottom*/
.carousel-indicators li {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: #cecece;
  
}

.carousel-control-next{
  width: 10%;
  /*top: 102%;*/
  left: 93%;
}

.carousel-control-prev{
  width: 10%;
  /*top: 102%;*/
  left: -3%;
}

.carousel-control-next-icon{
/*filter: invert(1);*/
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' stroke='%23fff' stroke-width='.5pt' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/*.carousel-control-next-icon:hover{*/

/*  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' stroke='%23fff' stroke-width='.5pt' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");*/
/*}*/

.carousel-control-prev-icon{
/*filter: invert(1);*/
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' stroke='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");

}




.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}





#footer-main {
    width:100%;
    background: none;
    color: black;
    font-size: 0.9rem;
    padding: 1vh;
    padding-left: 2.5rem;
    font-size: .75rem;
    font-weight: 400;
    height: 50px;
    
    }

#footer-main .footer_btn{
    color: black;
    padding: 0 2.5em 0 0;

}

#footer-main .btn:hover{
    color: black;
    background-color:#CBCBCB;
}  

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 0px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0 1em 0 0;
  color: black;
  /*padding: 15px; /* Some padding */
}

#myBtn .a {
	display: inline-block;
}

#myBtn .btn:hover{
    color: white;
    background-color:#4d4d4d;
    border: none;
}