html{-webkit-box-sizing:border-box;box-sizing:border-box;}
*,
*:before,
*:after{-webkit-box-sizing:inherit;box-sizing:inherit;}
body{margin:0;padding:0;font-family:"Open Sans", "Arial", sans-serif;font-size:20px;font-weight:400;min-width:1160px;background-image:repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0px, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0px, transparent 41px);background-size:82px 47px;background-color:rgb(48, 38, 131);color:rgb(255, 255, 255);padding-left:20px;padding-right:20px;}
h1{font-size:18px;text-transform:uppercase;text-align:center;margin-top:70px;letter-spacing:3px;}
h2{font-size:36px;text-transform:uppercase;text-align:center;letter-spacing:1px;}
main{width:100%;display:flex;justify-content:center;align-items:center;flex-flow:column;}
main div{display:inline-block;}
.container{margin-right:auto;margin-left:auto;width:1160px;}
.promo-code-container{max-width:800px;justify-content:center;}
.promocode{font-size:80px;text-align:center;color:#e84e1c;}
.promocode-text{font-size:16px;margin-bottom:65px;}
.promo-text{letter-spacing:1px;margin-bottom: 40px;}
.logo{float:left;}
p{text-align:center;}
.footer{font-size:14px;text-align:center;}
a{color:rgb(255, 255, 255);font-family:"Open Sans", "Arial", sans-serif;font-size:20px;font-weight:400;}
a:hover{color:#e84e1c;}
.instruction{box-shadow:0 0 46px rgba(0, 0, 0, 0.5)}
.instruction-container{background-color:rgb(60, 51, 138);box-shadow:0 0 46px rgba(0, 0, 0, 0.5)}
.instruction-ul{margin:40px 225px 40px 250px;}
.btn {
  background-color: #db2f27;
  font-family: inherit;
  color: #fff;
  border: none;
      margin: 30px 0 0 0;
  padding: 10px 30px;
  font-size: 15px;
  line-height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.btn:focus {
  outline: none;
}

.btn:hover {
  background-color: #be2f27;
}

.btn:active {
  background: #111;
}

.tippy-backdrop {
  background: #009b00;
}

.img a:hover{  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
/*Добавим вот такой вот код*/
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
/*конец кода с transition*/}


.wikiym {display:flex;margin-top: 40px;
    margin-bottom: 20px;}
.wikiym div:first-child{padding-right:60px;padding-top: 20px;}

.thumbs {
  width: 100%;
  max-width: 550px; /* опционально */
  margin: 10px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.thumbs img {
  display: block;
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.thumbs .caption {
  width: 100%;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.thumbs .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.thumbs .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
}
.thumbs .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
  opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
  top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
  top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}