@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  color: black;
  letter-spacing: 0.05em;
  /* padding: 1em; */
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.col5-10 {
  width: 50%;
  height: auto;
}

.showButton {
  display: none;
  float: right;
  width: 5%;
  margin-right: 5%;
  margin-top: 4em;
}

.DropArrowImage {
  width: 100%;
  opacity: 0.6;
}

.topBar {
  position: fixed;
  z-index: 2;
  display: block;
  width: 100%;
  /* background-color: #FFFAF6; */
  background-color: white;
  height: 10em;
  /* margin-top: -10em; */
  /* box-shadow: 0px 0px 25px #EBE3DD; */
  box-shadow: 0px 0px 25px #EEEEEE;
  transition: all ease .5s;
}

.shrink {
  height: 5em;
  transition: all ease .5s;
  /* all ease .5s; */
}

.shrink .kclogo {
  margin-top: 1em;
  position: relative;
  float: left;
  margin-left: 5%;
  transition: all ease .5s;
}

.shrink .logoImage {
  width: 3em;
  height: 3em;
  transition: all ease .5s;
}

.shrink .container {
  margin-top: 1em;
  transition: all ease .5s;
  width: 35%;
  font-size: 0.7em;
  /* margin-left: 30%; */
  margin-right: 3%;
  /* justify-content: center; */
  /* align-self: stretch; */
}

.container {
  position: relative;
  float: right;
  display: flex;
  flex-direction: row;
  margin-top: 6em;
  /* border-style: solid; */
  flex-wrap: wrap;
  width: 40%;
  font-size: 0.8em;
  /* margin-left: 30%; */
  margin-right: 5%;
  /* justify-content: center; */
  /* align-self: stretch; */
  transition: all ease .5s;
  /* text-shadow: 8px 6px 8px #FFFFFFF; */
}

.shrink .Name {
  position: relative;
  /* display: inline-block; */
  /* height: 100%; */
  /* width: 10%; */
  min-width: 6%;
  float: left;
  /* background-color: grey; */
  align-items: center;
  /* padding-top: 2em;
  padding-bottom: 2em; */
  margin-top: 3em;
  line-height: 1em;
  margin-left: 1em;
  max-width: 30%;
  font-size: 0.7em;
  transition: all ease .5s;
}

.Name {
  position: relative;
  /* display: inline-block; */
  /* height: 100%; */
  /* width: 10%; */
  min-width: 6%;
  max-width: 5em;
  float: left;
  /* background-color: grey; */
  align-items: center;
  /* padding-top: 2em;
  padding-bottom: 2em; */
  margin-top: 3.1em;
  line-height: 2em;
  margin-left: 1em;
  letter-spacing: 0.4em;
  transition: all ease .5s;
}

.Name h1 {
  /* text-align: center; */
  margin: 0em;
  padding: 0em;
}

.item1 a:hover {
  border-bottom: 2px solid #A8A79F;
  padding-bottom: 6px;
}

.item2 a:hover {
  border-bottom: 2px solid #A8A79F;
  padding-bottom: 6px;
}

.item3 a:hover {
  border-bottom: 2px solid #A8A79F;
  padding-bottom: 6px;
}

.item4 a:hover {
  border-bottom: 2px solid #A8A79F;
  padding-bottom: 6px;
}

.item5 a:hover {
  border-bottom: 2px solid #A8A79F;
  padding-bottom: 6px;
}

.item1 {
  flex-shrink: 1;
  /* default 1 */
  top: 12em;
  /* left:0%; */
  width: 5%;
  min-width: 5em;
  height: 5em;
  line-height: 5em;
  /* z-index:5; */
  /* padding:1.9em; */
  /* border: none 0px solid; */
  color: black;
  text-align: center;
  /* background-color:#404040; */
  flex-grow: 1;
}

.item2 {
  flex-shrink: 2;
  /* default 1 */
  top: 12em;
  /* left:0%; */
  width: 5%;
  min-width: 5em;
  height: 5em;
  line-height: 5em;
  /* z-index:5; */
  /* padding:1.9em; */
  /* border: none 2px solid; */
  color: black;
  text-align: center;
  /* background-color:#404040; */
  flex-grow: 1;
}

.item3 {
  flex-shrink: 3;
  /* default 1 */
  top: 12em;
  /* left:0%; */
  width: 5%;
  min-width: 5em;
  height: 5em;
  line-height: 5em;
  /* z-index:5; */
  /* padding:1.9em; */
  /* border: none 2px solid; */
  color: black;
  text-align: center;
  /* background-color:#404040; */
  flex-grow: 1;
}

.item4 {
  flex-shrink: 4;
  /* default 1 */
  top: 12em;
  /* left:0%; */
  width: 5%;
  min-width: 5em;
  height: 5em;
  line-height: 5em;
  /* z-index:5; */
  /* padding:1.9em; */
  /* border: none 2px solid; */
  color: black;
  text-align: center;
  /* background-color:#404040; */
  flex-grow: 1;
}

.item5 {
  flex-shrink: 4;
  /* default 1 */
  top: 12em;
  /* left:0%; */
  width: 5%;
  min-width: 5em;
  height: 5em;
  line-height: 5em;
  /* z-index:5; */
  /* padding:1.9em; */
  /* border: none 2px solid; */
  color: black;
  text-align: center;
  /* background-color:#404040; */
  flex-grow: 1;
}

.blank {
  /* position:absolute; */
  top: 12em;
  /* left:0%; */
  width: 100%;
  height: 5em;
  z-index: 1;
  /* padding:1.9em; */
  /* border: none 2px solid; */
  /* background-color:#404040; */
}

a {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
}

a:active, a:hover {
  color: #6E6E6E;
  /* text-decoration: underline; */
}

#Content a:link {
  color: #1C1C1C;
}

#Content a:visited {
  color: #1C1C1C;
}

#Content a:hover {
  color: #6E6E6E;
}

.logo {
  /* position:absolute; */
  position: relative;
  top: 0px;
  left: 10.5%;
  z-index: 2;
  float: left;
}

.kclogo {
  margin-top: 1.8em;
  position: relative;
  float: left;
  margin-left: 5%;
  transition: all ease .5s;
}

.logoImage {
  transition: all ease .5s;
}

.header-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 174px;
}

#searchform {
  width: 90%;
}

.pic1 {
  position: relative;
  width: 65%;
}

#buttons {
  text-align: center;
}

#footer {
  position: relative;
  float: left;
  left: 0px;
  width: 100%;
  height: 3em;
  z-index: 1;
  /* padding: 20px; */
  border: none 2px solid;
  font-size: 0.8em;
  color: white;
  text-align: center;
  background-color: #FFFFFF;
}

.line {
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

hr {
  /* width:4em;  */
  /* height: 0.1em;
	background: black;
	border: 0px; */
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

.submitButton {
  width: 100%;
  height: 4em;
  margin-top: 1em;
  border-radius: 4px;
  border-color: #F2F2F2;
  background-color: #F2F2F2;
  border-width: 2px;
}

.submitButton:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.generalImages {
  transition: all 0.25s ease-in-out;
  transform: scale(1.0, 1.0);
}

.generalImages:hover{
  transition: all 0.25s ease-in-out;
  transform: scale(1.05, 1.05);
}

/* .button {
        background-color: #444444;
        padding:12px;
        color: white;
    } */

.buttonBuy {
  border-radius: 6px;
}

@media (min-width: 990px) {
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #E3DBD3
  }
  .dropdown:hover .dropdown-content {
    /* display: block; */
  }
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  /* .show {display:block;} */
}

@media (max-width: 989px) {
  .showButton {
    /* display: block; */
  }
}

@media (max-width: 580px) {
  .topBar {
    height: 6em;
    transition: all ease .5s;
  }
  .container {
    width: 65%;
    margin-top: 2em;
    transition: all ease .5s;
    font-size: 0.7em;
  }
  .kclogo {
    margin-top: 1em;
    margin-left: 5%;
    transition: all ease .5s;
  }
  .logoImage {
    width: 4em;
    height: 4em;
    margin-top: 0em;
    transition: all ease .5s;
  }
  .Name {
    display: none;
    transition: all ease .5s;
  }
}