html {
    background: url("images/grid.png") repeat;
    cursor: crosshair;
}
.caption {
    padding: 2%;
    border: 2px solid #30eed6;
    border-top: #30eed6;
    border-left: #30eed6;
    border-right: #30eed6;
    border-radius: 15px;
    margin: 1%;
    font-size: 1.2vw;
    text-align: center;
}
.desc {
    margin: 3% 12%;
}
.descr {
  margin: 3% 19%;
  font-size: 1.2vw;
}
body {
    padding-top: 3%;
    padding-bottom: 3%;
}
header {
  background-color: rgba(255, 255, 255, 0.12);
  margin-top: .5%;
  margin-bottom: 4%;
  padding: 2.4%;
}
form {
  background-color: #b7b7b712;
}
label {
  color: #0072bb;
}
input {
  background-color: #0073bb16
}
h1 {
    background-color rgba(240, 248, 255, 0.116);
    color: #f6831f;
    opacity: 93%;
    font-family: 'montserrat';
    text-transform: uppercase;
    font-size: 3.2vw;
    text-align: left;
    margin: 0% 3.9%;
}
h2 {
  background-color rgba(240, 248, 255, 0.116);
  border: 2px dashed #0073bb00;
  color: #f6831f;
  opacity: 93%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 1.4vw;
  text-align: center;
  margin: 2%;
  padding: 1.2%;
}
h3 {
    background-color rgba(240, 248, 255, 0.116);
    color: #f6831f;
    opacity: 93%;
    font-family: 'montserrat';
    text-transform: uppercase;
    font-size: 1.8vw;
    text-align: left;
    margin: 0% 3.9%;
}
h4 {
    background-color rgba(240, 248, 255, 0.116);
    border: 2px dashed #0073bb00;
    color: #f6831f;
    opacity: 93%;
    font-family: 'montserrat';
    text-transform: uppercase;
    font-size: 1.4vw;
    text-align: center;
    margin: 2%;
    padding: 1.2%;
}
h4:hover {
  color: #fdb818;
  border: 2px dashed #0072bb;
}
h5 {
    background-color rgba(240, 248, 255, 0.116);
    color: #b7b7b7;
    opacity: 93%;
    font-family: 'montserrat';
    font-size: 1.2vw;
    text-align: center;
    margin: 2%;
    padding: 1.2%;
}
.box {
    padding: 1% 14.9%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    opacity: 88%;
   }
.box_shop {
    padding: 1% 14.9%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    opacity: 100%;
   }
.thumbnail {
    position: relative;
    padding: .5%;
    height: 12vw;
    border: 2px solid #30eed6;
    border-radius: 15px;
}
.mitems {
    background-color rgba(117, 116, 114, 0.39);
    margin: auto 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}
.mitems2 {
    background-color rgba(117, 116, 114, 0.39);
    margin-top: -.5%;
    margin-bottom: 2%;
    margin-left: 33.3%;
    margin-right: 15%;
}
.aboutbox {
  margin: 3% 14.9%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background-color: rgba(247, 20, 79, .07);
  border: 2px solid #f83a6b;
  border-radius: 15px;
}
.me {
  border-radius: 15px;
  width: 48%;
  height: 48%;
}
.metext {
  padding-right: .5%;
  font-size: 1.06vw;
  text-align: justify;
  border-radius: 15px;
  width: 48%;
}
.buttons {
  margin: 0% 14.9%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  align-items: flex-start;
}

.button {
  margin-top: -2%;
  color: #fee2ea;
  opacity: 88%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 1.8vw;
  text-align: center;
  border 2px solid #f83a6b;
  border-radius: 15px;
  padding 1% 2.4%;
  text-align: center;
}
.metext2 {
  background-color: rgba(247, 20, 79, .12);
  padding: 1%;
  font-size: 1.06vw;
  text-align: justify;
  border-radius: 15px;
  width: 100%;
}
.pages {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}
.page {
  width: 70%;
}
footer {
    position: fixed;
    bottom: 3%;
    right: 4%;
}
.hidden {
    position: fixed;
    bottom: 3%;
    left: 3%;
    opacity: 9%;
}
.fb {
    opacity: 94%;
}
.sm {
    margin: 3%;
    height: 5vw;
}
.footer {
    opacity: 77%;
    display: flex;
    flex-direction: column;
}
a:link, a:visited {
    opacity: 93%;
    color: #f6831f;
    text-decoration: none;
}
a:hover {
    opacity: 93%;
    color: #fdb818;
    text-decoration: none;
}
.cage {
    opacity: 93%;
    margin: 1% 0 0 0;
    padding: 3% auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}


/* scrollbar */

body::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #0c171f;
  border-radius: 3px;
  background-color: #0c171f;
}

body::-webkit-scrollbar
{
  width: 9px;
}

body::-webkit-scrollbar-thumb
{
  border-radius: 3px;
  background-color: #0072bb;
  background-image: -webkit-linear-gradient(65deg,
                        transparent,
                        #0c171f 100%,
                        transparent,
                        transparent)
}

/* scrollbar */





/* colors:

main logo: f7144f

*/

@media all and (max-width: 777px) {
  header {
    background-color: rgba(255, 255, 255, 0.12);
    margin-top: 1.8%;
    margin-bottom: 5%;
    padding: 2.5%;
  }
  h1 {
    font-size: 3.6vw;
}
  h3 {
    font-size: 2.3vw;
}
  h4 {
    font-size: 2.1vw;
    margin: 4%;
}
.sm {
  height: 7vw;
}