@font-face {
    font-family: Concept-Medium;
  src: url(Concept-Medium.ttf);
}

@font-face {
  font-family: SourceCodePro;
  src: url(SourceCodePro-Medium.ttf);
}
*{
  box-sizing: border-box;

}


h3, h3 *{
  font-family: SourceCodePro,Concept-Medium !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

body{
  background-color: #ffffff;
  color: #000000;
  margin: 0;
}

header{
  background-color: #ffffff;
  color: #ffffff;
  line-height:240%;
  padding-left: 4em;
  grid-area: 1/2/2/8;
  text-align: center;

}

header h1{
  background-position: left;
  background-repeat: no-repeat;
  margin:0;
  color:#000000;
  line-height: 240%;
  margin-right: 2em;
  font-family: SourceCodePro
  !important;
  font-weight: 400 !important;
  font-style: normal !important;

}

header a{
  text-decoration:none;
  color: #000000;
}

header h1 a{
  color:#000000;
  line-height: 200%;
  font-size: 1.5em;
}

h3{
  font-size: 2em;
  
}

main{
  background-color: black;
  grid-area: 3/1/4/9;
  justify-content: center;
  
}

nav {
  font-weight: bold;
  background-color: #c0acb7;
  top: 0;
  padding: 0;
  grid-area: 2/2/3/8;
}

nav a{
  color: #000000;
  display:block;
  text-align: center;
  text-decoration: none;
  padding: 1rem 0rem;
}



nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
}


nav ul li{
  width: 100%;
  overflow:visible;
}

section{
  float:left;
  text-align: center;
  width:50%;
}

footer{
  grid-area: 5/2/6/8;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 1.5em;
  
  font-size: 1em;
  font-weight: bold;
  font-family: SourceCodePro;

}



footer a{
  text-decoration: none;
  font-family: SourceCodePro;
  color: #000000;
  display: block;
}


.box1{
  border: 2px solid #000000;
  background-color: #ff1493;
  line-height: 180%;
  margin-bottom: 0;
  margin-top: 1em;
  text-align: center;
  font-size: 1.7em;
  padding: 0;
  
}

.box2{
  text-align: left;
  background-color: #fcefef;
  margin-top: 0;
  border: 2px solid #000000;
  padding: 1em;
  font-size: 1.1em;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header {
  padding: 20px;
}



.centerup{
  text-align: center;
  margin-top: 50px;
  font-family:Georgia, 'Times New Roman', Times, serif;
}

.test{
  text-align: left;
  
}

.contact{
  font-size: 1.2em;
}

.return{
  text-align: left;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.1em;
}

.flex-container{
  display:flex;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.nodecoration{
  text-decoration: none;
  color:#ff1493;
}

table{
margin:0 auto;
width: 100%;
}

td,th{
padding: 5px;
}

th{
  font-size: 1.1em;
  
}

td{
text-align: center;
  font-size: .9em;
}


.text{
  text-align:left;
}

#nav {
  list-style: none inside;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: SourceCodePro;
  color: white;
}

#nav li {
  display: block;
  position: relative;
  float: left;
  background: black;
  /* menu background color */
}

#nav li a {
  display: block;
  padding: 0;
  text-decoration: none;
  width:100%;
  /* this is the width of the menu items */
  line-height: 240%;
  /* this is the hieght of the menu items */
  color: white;
  /* list item font color */
}

#nav li a:hover{
  color:black;
  background-color: white;
  transition: all 0.5s ease-in-out;

}

#nav li li a {
  font-size: 90%;
  color:white;
  background-color: black;
  transition: all 0.5s ease-in-out;

} 
/* smaller font size for sub menu items */

#nav li:hover {
  background-color:  black;
  color: #000000;
  transition: all 0.5s ease-in-out;

} 
/* highlights current hovered list item and the parent list items when hovering over sub menues */

#nav ul {
  padding: 0;
  left: 0;
  display: none;
  /* hides sublists */
}

#nav li:hover ul ul {
  display: none;
}

/* hides sub-sublists */

#nav li:hover ul {
  display: block;
  width: 100%;
}


/* shows sublist on hover */

#nav li li:hover ul {
  display: block;
  
  /* shows sub-sublist on hover */
  margin-left: 200px;
  /* this should be the same width as the parent list item */
}

#nav ul li{
  width:100%;
  
}

#shop{
  padding-top:4em;
  
}

#grid{
  display:grid;
  grid-auto-rows: minmax(0,auto);
grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

#whitebar{
  background-color: #ffffff;
  grid-area: 1/1/2/9;
}

#whitebar2{
  background-color: #ffffff;
  grid-area: 5/1/6/9;
}

#blackbar{
  background-color: black;
  grid-area: 2/1/3/9;
  
}




@media only screen and (max-width:992px){
  #wrapper{grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);}
  nav ul{flex-flow: column nowrap;}
}

@media only screen and (max-width:768px){
  header h1{background-image: none; text-align: center;}
 
}

@media only screen and (max-width:375px){
  header h1 a{font-size:1.2em; line-height: 230%;}
  main article{
    display: none;
  }
}
.responsive {
  max-width: 617px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*button shtuff*/
.search-box {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: inline;
    float:right;

    font-family: SourceCodePro;


  
}
.input-search {
  width: 15px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  background-color: black;
  color: rgb(255, 255, 255);
  display: inline;
  font-family: SourceCodePro;



}
.input-search::placeholder {
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
  display: inline;
  font-family: SourceCodePro;


}
.btn-search {
  width: 200px;
  height: 200px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color: #ffffff;
  background-color: transparent;
  pointer-events: painted;
  display: inline;
  float:right;
  
  font-family: SourceCodePro;

}

.btn-search:focus ~ .input-search {
  width: 300px;
  border-radius: 1px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
  display: inline;
  float:right;
  font-family: SourceCodePro;

}
.input-search:focus {
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
  display: inline;
  float:right;
  font-family: SourceCodePro;
  color: black;

}

button {
  background: transparent;
  border: transparent;
  font-size: larger;
  float:right;
  
}

/*main*/
main article{
  font-family: SourceCodePro;
  color: white;
    text-align: center;
    justify-content: center;
    padding: 15px;
  
    font-size: 25px;
    font-family: SourceCodePro;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  display: flex;
  padding: 15px;
  height: auto;
    width: auto;
    font-size: 30px;
    font-family: SourceCodePro;

}
.container {
    position: relative;
    text-align: center;
    color: white;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    grid-row: 3/4;
    grid-column: 1/9;
    clear: both;
    border-radius: 5px;
    font-family: SourceCodePro;
    

}

.leftcol {
  width:170px;
  height:auto;
  float:left;
  background-color: white;
}

 td{

text-decoration: underline;
font-style: oblique;

}

footer p{
  text-decoration: underline;
  font-style: oblique;

}

main article h4{
  text-align: center;
  text-decoration: underline;
  margin: 0;
}
 
header img{
  position: relative;
  justify-content: center;
  padding-left: 22px;

}

header img:hover{
  transition: all 0.5s ease-in-out;
  
}
main article p{
  font-size: 5pt;
}

main{
  font-size: 14px;

}

.leftered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -50%);
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  display: flex;
  padding: 15px;
  height: auto;
    width: auto;
    font-size: 60px;
    font-family: SourceCodePro;
text-align: left;
}

.lefteredarticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -50%);
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  display: flex;
  height: auto;
    width: auto;
    font-size: 30px;
    font-family: SourceCodePro;
text-align: left;
}

.slide{
  text-align: center;
}