candidate mobile

+<!doctype html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Выборы в Совет депутатов Савёловского района</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/main.js"></script>
+</head>
+<body>
+
+
+<div class="header ">
+    <div class="header__container">
+        <div class="header__row">
+            <a href="#" class="header__logo ">
+                <div class="icon icon__logo"></div>
+            </a>
+
+            <div class="header__nav ">
+                <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
+
+                <div class="header__nav__wrapper">
+                    <ul class="nav nav--header">
+                        <li><a href="about.html">О совете депутатов</a></li>
+                        <li><a href="candidates.html">Кандидаты</a></li>
+                        <li><a href="help.html">Как помочь</a></li>
+                        <li><a href="volunteer.html">Стать волонтёром</a></li>
+                        <li><a href="vote.html">Как проголосовать</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
+
+            <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
+
+            <div class="header__do">
+                <button type="button" class="btn btn-default btn__attention">Поддержать</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="content">
+    <div class="content__container">
+
+        <div class="candidate">
+            <div class="candidate__img">
+                <img src="http://xn--2017-43dma2cjij0b9af0v.xn--p1ai/assets/images/2_vihoreva.jpg" alt="">
+            </div>
+
+            <div class="candidate__description">
+                <h1 class="head-h1">Кто-то там</h1>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, porro?</p>
+
+                <br>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis debitis dicta dolor esse, hic ipsam maiores officiis quaerat repudiandae voluptatem?</p>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<div class="footer">
+    <div class="footer__container">
+        <div class="footer__left">
+            <p>Следите за кампанией</p>
+
+            <ul class="social">
+                <li><a href="#">Вконтакте</a></li>
+                <li><a href="#">Фейсбук</a></li>
+                <li><a href="#">Твиттер</a></li>
+                <li><a href="#">Одноклассники</a></li>
+            </ul>
+
+            <p>Оставьте нам свой мобильный телефон. Мы отправим вам сообщение перед выборами</p>
+
+
+            <form class="form-inline" role="form">
+                <div class="form-group">
+                    <input type="email" class="form-control" placeholder="">
+                </div>
+                <button type="submit" class="btn btn-default">Напомнить о выборах</button>
+            </form>
+        </div>
+
+        <div class="footer__right">
+            <p>Пообщаться с кандидатами</p>
+
+            <ul class="social">
+                <li><a href="#">Телеграм</a></li>
+                <li><a href="#">Электронная почта</a></li>
+                <li><a href="#">Телефон</a></li>
+            </ul>
+        </div>
+
+        <div class="col-xs-24 text-center">
+            <br>
+
+            <h4 class="">Приходите на выборы 10 сентября 2017 года <br> и голосуйте за независимую команду</h4>
+
+            <br>
+
+            <button type="button" class="btn btn-default btn__attention">Как проголосовать</button>
+        </div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file

@@ -7739,6 +7739,7 @@ This must be run when you have at least 2 sprites.
 }
 }
 .head-h1 {
 .head-h1 {
   font-size: 28px;
   font-size: 28px;
+  margin-top: 0;
 }
 }
 h1,
 h1,
 h2,
 h2,
@@ -7930,6 +7931,8 @@ label {
   }
   }
 }
 }
 .header__do {
 .header__do {
+  float: left;
+  width: 100%;
   position: relative;
   position: relative;
   min-height: 1px;
   min-height: 1px;
   padding-left: 10px;
   padding-left: 10px;
@@ -7937,20 +7940,22 @@ label {
   margin-top: 15px;
   margin-top: 15px;
   text-align: right;
   text-align: right;
 }
 }
-@media (min-width: 797px) {
+@media (min-width: 990px) {
   .header__do {
   .header__do {
     float: left;
     float: left;
-    width: 100%;
+    width: 14.58333333%;
   }
   }
 }
 }
-@media (min-width: 990px) {
+@media (max-width: 989px) {
   .header__do {
   .header__do {
-    float: left;
-    width: 14.58333333%;
+    text-align: center;
   }
   }
 }
 }
-.header__do .btn {
+@media (max-width: 989px) {
+  .header__do .btn {
     width: 100%;
     width: 100%;
+    max-width: 200px;
+  }
 }
 }
 .mobile-menu {
 .mobile-menu {
   position: absolute;
   position: absolute;
@@ -8386,6 +8391,50 @@ label {
   height: 100%;
   height: 100%;
   text-align: center;
   text-align: center;
 }
 }
+.candidate {
+  margin: 0px -10px;
+}
+.candidate__img {
+  float: left;
+  width: 100%;
+  position: relative;
+  min-height: 1px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+@media (min-width: 550px) {
+  .candidate__img {
+    float: left;
+    width: 33.33333333%;
+  }
+}
+.candidate__img img {
+  width: 100%;
+}
+.candidate__description {
+  float: left;
+  width: 100%;
+  position: relative;
+  min-height: 1px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+@media (min-width: 550px) {
+  .candidate__description {
+    float: left;
+    width: 62.5%;
+  }
+}
+@media (min-width: 550px) {
+  .candidate__description {
+    margin-left: 4.16666667%;
+  }
+}
+@media (max-width: 549px) {
+  .candidate__description {
+    padding-top: 20px;
+  }
+}
 .promo {
 .promo {
   text-align: center;
   text-align: center;
   padding: 30px 0px;
   padding: 30px 0px;
@@ -8411,6 +8460,7 @@ label {
 }
 }
 .promo__title {
 .promo__title {
   font-size: 28px;
   font-size: 28px;
+  margin-top: 0;
 }
 }
 @media (max-width: 989px) {
 @media (max-width: 989px) {
   .promo__title {
   .promo__title {

+//= _head.html
+
+//= _header.html
+
+<div class="content">
+    <div class="content__container">
+
+        <div class="candidate">
+            <div class="candidate__img">
+                <img src="http://xn--2017-43dma2cjij0b9af0v.xn--p1ai/assets/images/2_vihoreva.jpg" alt="">
+            </div>
+
+            <div class="candidate__description">
+                <h1 class="head-h1">Кто-то там</h1>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, porro?</p>
+
+                <br>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis debitis dicta dolor esse, hic ipsam maiores officiis quaerat repudiandae voluptatem?</p>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+//= _footer.html

+
+.candidate {
+  margin: 0px -10px;
+
+  &__img {
+    .make-xs-column(24);
+    .make-sm-column(8);
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &__description {
+    .make-xs-column(24);
+    .make-sm-column(15);
+    .make-sm-column-offset(1);
+    @media(@xs){
+      padding-top: 20px;
+    }
+  }
+}
\ No newline at end of file

@@ -5,6 +5,7 @@ body, html{
 
 
 .head-h1 {
 .head-h1 {
   font-size: 28px;
   font-size: 28px;
+  margin-top: 0;
 }
 }
 
 
 h1, h2, h3 {
 h1, h2, h3 {

@@ -43,13 +43,19 @@
   }
   }
 
 
   &__do {
   &__do {
-    .make-md-column(24);
+    .make-xs-column(24);
     .make-lg-column(3.5);
     .make-lg-column(3.5);
     margin-top: 15px;
     margin-top: 15px;
     text-align: right;
     text-align: right;
+    @media(@md){
+      text-align: center;
+    }
 
 
     .btn {
     .btn {
+      @media(@md){
         width: 100%;
         width: 100%;
+        max-width: 200px;
+      }
     }
     }
   }
   }
 }
 }

@@ -14,6 +14,7 @@
 @import "footer";
 @import "footer";
 
 
 @import "content";
 @import "content";
+@import "candidate";
 
 
 @import "promo";
 @import "promo";
 @import "vote";
 @import "vote";