/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/


/* верстка блока с кваркодом */
#qrkod
{
 
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}


.qrkod-item
{
border: 1px solid #333;
border-radius: 3px;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
margin-bottom: 35px;
height: 265px;
background-image: url('/upload/iblock/5b8/2x5elq1oigdng9lts5u7y5aj8kw88232.png');
width: 75%;

}


.qrkod-title
{
font-family: 'Roboto', Arial, sans-serif;
    font-size: 17px;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 20px;
  /*  margin-left: -25px; */
}

.qrkod-title-small
{
font-family: 'Roboto', Arial, sans-serif;
text-align: center;
font-size: 16px;
font-weight: 600; /* Полужирный с помощью численного значения */
color: #ffffff;
margin-bottom: 40px;
/* margin-left: -25px; */
}



.qrkod-title-small-1
{
font-family: 'Roboto', Arial, sans-serif;
text-align: center;
font-size: 16px;
font-weight: 600; /* Полужирный с помощью численного значения */
color: #ffffff;
/* margin-left: -25px; */

}



.qrkod-center
{
width: 380px;
height: 240px;
margin-left: auto;
margin-right: auto;
}


.qrkod-center2
{
/* width: 430px; */
height: 240px;
/* margin-left: auto;
margin-right: auto; */
float: left;
margin-left: -50px;
}



.qrkod-center1
{
width: 220px;
height: 240px;
margin-left: auto;
margin-right: auto;
}

/* конец блока верстки кода с кваркодом  */



.container-main-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

}

.block1{
border: 1px solid #333;
border-radius: 3px;
box-shadow: 8px 8px 5px #444;
float: left;
/* padding-left: 35px; */
margin: 20px;
background-color: #01aae3;
/* background-image: url('/upload/iblock/5b8/2x5elq1oigdng9lts5u7y5aj8kw88232.png');*/
/*height: 430px; */
/* width: 550px; */
height: 370px;
width: 470px;
font-family: 'Roboto', Arial, sans-serif;
text-align: left;
font-size: 14px;
font-weight: 600; /* Полужирный с помощью численного значения */
color: #ffffff;
}

.block2{
border: 1px solid #333;
border-radius: 3px;
box-shadow: 8px 8px 5px #444;
float: right;
/* padding-left: 35px; */
margin: 20px;
background-color: #01aae3;
/* background-image: url('/upload/iblock/5b8/2x5elq1oigdng9lts5u7y5aj8kw88232.png'); */
height: 370px;
width: 470px;
font-family: 'Roboto', Arial, sans-serif;
text-align: left;
font-size: 14px;
font-weight: 600; /* Полужирный с помощью численного значения */
color: #ffffff;
}


.block3{
border: 1px solid #333;
border-radius: 3px;
box-shadow: 8px 8px 5px #444;
margin: 20px;
/* padding-left: 35px; */
background-color: #01aae3;
/* background-image: url('/upload/iblock/5b8/2x5elq1oigdng9lts5u7y5aj8kw88232.png'); */
height: 370px;
width: 470px;
font-family: 'Roboto', Arial, sans-serif;
text-align: left;
font-size: 14px;
font-weight: 600; /* Полужирный с помощью численного значения */
color: #ffffff;
}


/* делаем верстку блока картинка товара и кнопка купить БПЛА     */

#f-0
{
position:relative;
margin-bottom: 30px;
}

.f-b
{
display: flex;
flex-wrap: wrap;
width: 370px; /* макс ширина */
margin: 0 auto; /* выровняем по центру */
}

.i-1
{
margin: 10px;
/* font-size: 100%; */
/* text-align: center; */
color: #000000;
width: auto;
height: 70px;
}

/*       */


/* делаем верстку для первого блока где выбор надписей на крылья    */


.f-boks1
{
display: flex;
flex-wrap: wrap;
max-width: 490px; /* макс ширина */
margin: 0 auto; /* выровняем по центру */
}

.item-f
{
flex:1 1 calc(33.33% - 30px); /* отнимем margin и скажем растягиваться */
margin: 18px;
box-sizing:border-box; /* чтобы внутренний отступ не влиял когда там будет текст... */
min-width: 80px; /* мин. ширина блока, чтобы переносились на другой ряд */
padding: 10px 20px; 
font-size: 100%; 
text-align:center; 
background:#ffff; /* для красоты */
color: #000000;
/* flex-basis: 33.33%; */ /* позволяет регулировать размеры и положения блоков относительно друг друга   */
}

/*      */






/* располагаем блоки друг под другом */

.parent-inside {
 display: flex;
 flex-wrap: wrap;
}

.itembpl
{
  flex-basis: 100%;
}

/* конец блока кода */

.otstup
{
margin-top: 290px;

}

/*   */
.knopka-byu
{

}

/*    */


/* верстка кода кнопки */

.button {
  padding: 10px 22px;
  border-radius: 3px;
  box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);
  line-height: 1.25;

  text-decoration: none;
  user-select: none;
  color: white;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
  transition: background-color .6s ease;
  overflow: hidden;
  &:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    top: var(--mouse-y);
    left: var(--mouse-x);
    transform-style: flat;
    transform: translate3d(-50%,-50%,0);
    background: rgba(white,.1);
    border-radius: 100%;
    transition: width .3s ease, height .3s ease;
  }
  &:focus,
  &:hover {
      background: darken(#FC6E51,7%);
  }
  &:active {
    &:after {
      width: 300px;
      height: 300px;
    }
  }
}

/* конец блока    */