.wide_box.dark .box
{
border: 0px dotted green;
display: flex;
flex-direction: column;
}
.wide_box.dark .box #main_offer {border: 0px dotted yellow; text-align: left;}
.wide_box.dark .box .slider_home {border: 0px dotted orange;}

#sistema
{
border: 1px solid #6600CC;
background: #420085;
color: #FFFFFF;
margin: 0;
padding: 0.5em 0 0.25em 0;
}
#sistema h2, .sistema_flex .sistema_box h3, .sistema_flex .sistema_box .h3 {text-align: center;}
.sistema_flex
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.sistema_flex .sistema_box
{
border: 0px dotted red;
width: 100%;
text-align: center;
padding: 1em 0;
}


#ucheniki_foto, #ucheniki_video
{
width: 100%;
text-align: center;
margin: 0;
}
#ucheniki_foto
{
padding: 0.5em 0 0em 0;
}
#ucheniki_video
{
padding: 0em 0 0.25em 0;
}
#video_do_i_posle
{
padding: 0.5em 0 0em 0;
}
#ucheniki_foto .h2, #ucheniki_video .h2, #video_do_i_posle .h2 {width: 100%; text-align: center; margin-bottom: 0.5em;}
#ucheniki_video .h2, #video_do_i_posle .h2 {margin: 0 0 1em 0;}
.ucheniki_flex
{
width: 100%;
display: flex;
/*flex-direction: column;*/
flex-wrap: wrap;
justify-content: center;
}
.ucheniki_flex div {border: 0px dotted red; width: 100%;}
.ucheniki_flex div img {margin: 0em auto;  width: 100%;}

.ucheniki_foto img, .ucheniki_foto a img, .ucheniki_video img, .ucheniki_video a img
{
border: 0px dotted blue;
width: 100%;
height: auto;
float: left;
/*-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;*/
}
.ucheniki_foto, .ucheniki_foto img, .ucheniki_video
{
-moz-transition: all 1.5s ease-out; -o-transition: all 1.5s ease-out; -webkit-transition: all 1.5s ease-out;
}
.ucheniki_foto img:hover, .ucheniki_foto a img:hover, .ucheniki_video:hover, .ucheniki_video img:hover, .ucheniki_video a img:hover
{
-webkit-transform: scale(1.2); -moz-transform: scale(1.2);-o-transform: scale(1.2);
}
.ucheniki_video iframe {border: 0;}

#video_do_i_posle .uchenik_video, #ucheniki_video .uchenik_video, #ucheniki_foto .uchenik_foto {
border: 0px dotted red;
background: #000000;
width: 300px;
height: 200px;
text-align: center;
}
#video_do_i_posle .ucheniki_video iframe, #ucheniki_video .ucheniki_video iframe, #ucheniki_foto .ucheniki_foto img {
width: 100%;
height: 100%;
}

.video1 {
border: 1px solid #000; border: 1px dotted yellow !important;
/*width: 300px;
height: 200px;*/
position: relative;
top: 0;
height: 0;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
margin-bottom: 15px;
background-position: center;
background-size: cover; background-size: auto;
transition: all 200ms ease-out;
overflow: hidden;
}
.video1-play {
border: 1px dotted red !important;
background-image: url(../img/youtube-play-btn.png);
background-position: bottom;
background-repeat: no-repeat;
/*background-size: cover;*/
height: 49px; height: 49px;
width: 90px; width: 90px;
/*top: 50%; top: 40%;*/
/*left: 50%; left: 35%;
margin-left: -45px; margin-left: -70%;*/
margin-top: -30px;  margin-top: 19%;
position: absolute; position: relative;
/*border-radius: 21px;*/
cursor: pointer;
}
.video2 {
border: 0px solid #000; border: 0px dotted yellow !important;
width: 100%;
position: relative;
top: 0;
height: 0;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
margin-bottom: 15px;
background-position: center;
background-size: cover;
transition: all 200ms ease-out;
overflow: hidden;
}
.video2 div {
border: 0px dotted red !important;
background-image: url(../img/icons/play_grey.png);
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
cursor: pointer;
}
.video2-play:hover {background-image: url(../img/icons/play_red.png);}
.video2 div:hover {background-image: url(../img/icons/play_red.png);}

.video1-play:hover {/*box-shadow: 0 0 12px 0 #000;*/ background-position: top;}
.video1_:hover {transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);}
.video1 iframe
{
border: 0px dotted green !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 0;
outline-width: 0;
}
.video2 iframe
{
border: 0px dotted green !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 0;
outline-width: 0;
}

#preim
{
border: 0px dotted red;
background: #FFFFFF;
color: #000000;
font-size: 1.1em;
font-family: Tahoma, Arial, sans-serif;
padding: 0.2em 0 0.75em 0;
margin: 0;
}
#preim h2 {color: #000000 !important; text-align: center; line-height: 140%;}
#preim ul {border: 0px dotted green; padding: 0; margin: 0; list-style-position: inside;}
#preim ul li {border: 0px dotted green; text-align: left; margin-bottom: 0.5em;}


#offers
{
border: 1px solid #3E3771;
width: 100%;
margin: 0;
padding: 0px 0;
background: #3E3771; background: #420085;
color: #FFFFFF;
font-family: Tahoma, Arial, sans-serif;
text-align: center;
}
#offers h2
{
border: 0px dotted blue;
width: 100%;
margin: 0;
padding: 20px 0;
color: #FFFFFF;
text-shadow: 0 2px 2px #000000;
text-align: center;
}
.offers_flex
{
display: flex;
justify-content: space-evenly; justify-content: center;justify-content: space-around;
flex-wrap: wrap;
padding-left: 0%;
margin: 0 10px 0 10px;
}
.offer
{
border: 1px solid #240047;
border-radius: 8px;
width: 100%;
padding: 0px 0;
margin: 0 0 1em 0;
text-align: left;
font-size: 1.1em;
line-height: 150%;
color: #000000;
background: #FFFFFF;
box-shadow: 1px 2px 2px 1px #262626;
display: flex;
}
.offer:hover {border: 1px solid #660000; box-shadow: none;}
.offer h3, .offer div.h3
{
border: 0px dotted black;
border-bottom: 1px solid #8F8F8F;
border-top-left-radius: 8px; border-top-right-radius: 8px;
background: #DDDDDD;
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #EEEEEE), color-stop(1, #CCCCCC));
background-image: -o-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -moz-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -webkit-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: linear-gradient(to bottom, #EEEEEE, #CCCCCC);
text-align: center;
text-shadow: 0 1px 1px #000000;
color: #990000 !important;
font-size: 1.2em;
line-height: 170%;
padding: 0.75em;
margin: 0 0 0.6em 0;
}
.offer .price {font-weight: bold; color: #990000; font-family: "Open Sans Condensed", Tahoma, Arial, sans-serif; font-size: 1.25em; margin-right: 0.2em;}
.offer .price span {font-weight: normal; color: #000000;  font-family: Tahoma, Arial, sans-serif; font-size: 0.9em;}
.offer ul
{
border: 0px dotted red;
margin: 0 0 0 28px;
padding: 0 0 0 0;
list-style-image: url(../img/icons/galka_blue.png);
}
.offer .flex_box_button_parent
{
border: 0px dotted red;
display: flex;
flex-direction: column;
align-content: stretch;align-content: space-between;
justify-content: space-between;
height: 100%;
width: 100%;
}
.offer .flex_box_button_child {border: 0px dotted green; margin: 0px 0 0px 0; text-align: left;}
.offer .flex_box_button_child ul li {text-align: left;}
.offer .flex_box_button_child .button_box {border: 0px dotted green; padding: 25px 0 25px 0; text-align: center;}


#obo_mne
{
border: 0px dotted #0054A8; border-top: 1px solid #0054A8; border-bottom: 1px solid #008DF2;
width: 100%;
padding: 0.5em 0 1em 0;
margin: 0px 0 0 0;
background: #008DF2;
background-image: -webkit-linear-gradient(top, #008DF2, #0054A8);
background-image: linear-gradient(to bottom, #008DF2, #0054A8)
}
#obo_mne .h2
{
width: 100%;
color: #FFFFFF;
text-shadow: 0 1px 1px #000000;
text-align: center;
margin-bottom: 0.75em;
}
#obo_mne_flex
{
display: flex;
justify-content: space-around; justify-content: space-evenly;
flex-wrap: wrap;
flex-direction: column;
}
#marina_foto
{
border: 0px dotted red;
width: 100%;
margin: 0;
padding: 0px;
}
#marina_foto img
{
width: 100%;
height: auto;
float: left;
margin: 0 0 0em 0;
}
#marina_text
{
border: 0px dotted red;
width: 100%;
margin: 0;
padding: 0px;
color: #FFFFFF;
font-style: italic;
font-size: 1.1em;
line-height: 140%;
text-align: left;
text-shadow: 0 1px 1px #000000;
}
#marina_text .fm {padding: 0px;}


@media only screen and (min-width: 360px)
{
  .video1-play {margin-top: 22%;}
}

@media only screen and (min-width: 480px)
{
  .sistema_flex {flex-direction: row; justify-content: space-between;}
  .sistema_flex .sistema_box {width: 48%;}
  .video1-play {margin-top: 24%;}
}

@media only screen and (min-width: 550px)
{
  .ucheniki_flex {flex-direction: row; justify-content: space-between;}
}

@media only screen and (min-width: 600px)
{
  .sistema_flex .sistema_box {width: 49%;}
  #ucheniki_foto .ucheniki_flex div {width: 49%; margin: 10px 0;}
  #ucheniki_video .ucheniki_flex .video1 {width: 32.5%; width: 49%; padding-bottom: 34%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */}
  #ucheniki_video .ucheniki_flex .video1 .video1-play {width: 100%;}
  #video_do_i_posle .ucheniki_flex .video1 {width: 32.5%; width: 49%; padding-bottom: 34%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */}
  #video_do_i_posle .ucheniki_flex .video1 .video1-play {width: 100%;}
  .video1-play {margin-top: 26%;}
  #ucheniki_video .video2, #video_do_i_posle .video2  {width: 49%; padding-bottom: 27.56%;}
  .offer
  {
  width: 48%;
  margin: 0 0 15px 0;
  font-size: 1.1em;
  line-height: 150%;
  }
}


@media only screen and (min-width: 720px)
{
  .video1-play {margin-top: 28%;}
}

@media only screen and (min-width: 800px)
{
  .video1-play {margin-top: 29%;}
}

@media only screen and (min-width: 900px)
{
  .sistema_flex .sistema_box {width: 32.5%;}
  #ucheniki_foto .ucheniki_flex div {width: 32.5%;}
  #ucheniki_video .ucheniki_flex .video1 {width: 32.5%; padding-bottom: 27%;}
  .video1-play {margin-top: 33%;}
}

@media only screen and (min-width: 1000px)
{
  .wide_box.dark .box {border: 0px dotted green; flex-direction: row;}
  .wide_box.dark .box #main_offer {width: 50%;}
  .wide_box.dark .box .slider_home {width: 50%;}
  /*.ucheniki_flex div {width: 24%;}*/
  #video_do_i_posle .fm, #ucheniki_video .fm {width: 100%;}
  #video_do_i_posle .ucheniki_flex .video1 {width: 49%; width: 32.5%; padding-bottom: 34%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */}
  #ucheniki_video .video2, #video_do_i_posle .video2 {width: 32.5%; padding-bottom: 18.28%;}
  .offer
  {
  width: 32%;
  margin: 0 0 15px 0;
  font-size: 1.1em;
  line-height: 150%;
  }
  #obo_mne_flex
  {
  justify-content: space-evenly; justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  }
  #marina_foto {border: 0px dotted red; width: 50%;}
  #marina_text {border: 0px dotted red; width: 50%; font-size: 1em;}
  #marina_text .fm {margin: 5px 10px 0px 5px;}
}

@media only screen and (min-width: 1200px)
{
  .sistema_flex {justify-content: space-evenly; justify-content: space-around;}
  .sistema_flex .sistema_box {width: 31.5%;}
  #ucheniki_video .ucheniki_flex .video1 {width: 32.5%; padding-bottom: 27%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */}
  #marina_text {border: 0px dotted red; font-size: 1.1em;}
}