@charset "UTF-8";
/* font-family: "RalewayRegular"; */
@font-face {
    font-family: "RalewayRegular";
    src: url("../fonts/Raleway/RalewayRegular.eot");
    src: url("../fonts/Raleway/RalewayRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayRegular.woff") format("woff"),
    url("../fonts/Raleway/RalewayRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayThin"; */
@font-face {
    font-family: "RalewayThin";
    src: url("../fonts/Raleway/RalewayThin.eot");
    src: url("../fonts/Raleway/RalewayThin.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayThin.woff") format("woff"),
    url("../fonts/Raleway/RalewayThin.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayExtraLight"; */
@font-face {
    font-family: "RalewayExtraLight";
    src: url("../fonts/Raleway/RalewayExtraLight.eot");
    src: url("../fonts/Raleway/RalewayExtraLight.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayExtraLight.woff") format("woff"),
    url("../fonts/Raleway/RalewayExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayLight"; */
@font-face {
    font-family: "RalewayLight";
    src: url("../fonts/Raleway/RalewayLight.eot");
    src: url("../fonts/Raleway/RalewayLight.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayLight.woff") format("woff"),
    url("../fonts/Raleway/RalewayLight.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayMedium"; */
@font-face {
    font-family: "RalewayMedium";
    src: url("../fonts/Raleway/RalewayMedium.eot");
    src: url("../fonts/Raleway/RalewayMedium.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayMedium.woff") format("woff"),
    url("../fonts/Raleway/RalewayMedium.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewaySemiBold"; */
@font-face {
    font-family: "RalewaySemiBold";
    src: url("../fonts/Raleway/RalewaySemiBold.eot");
    src: url("../fonts/Raleway/RalewaySemiBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewaySemiBold.woff") format("woff"),
    url("../fonts/Raleway/RalewaySemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayBold"; */
@font-face {
    font-family: "RalewayBold";
    src: url("../fonts/Raleway/RalewayBold.eot");
    src: url("../fonts/Raleway/RalewayBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayBold.woff") format("woff"),
    url("../fonts/Raleway/RalewayBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayExtraBold"; */
@font-face {
    font-family: "RalewayExtraBold";
    src: url("../fonts/Raleway/RalewayExtraBold.eot");
    src: url("../fonts/Raleway/RalewayExtraBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayExtraBold.woff") format("woff"),
    url("../fonts/Raleway/RalewayExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "RalewayBlack"; */
@font-face {
    font-family: "RalewayBlack";
    src: url("../fonts/Raleway/RalewayBlack.eot");
    src: url("../fonts/Raleway/RalewayBlack.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Raleway/RalewayBlack.woff") format("woff"),
    url("../fonts/Raleway/RalewayBlack.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
* {
	box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'RalewayRegular';
}
header {
  position: relative;
  height: 100vh;
  min-height: 500px;
}
.intro {
  width: 1000px;
  margin: 0 auto;
}
.intro.intro--tabled {
  display: table;
  height: 100%;
  table-layout: fixed;
}
.intro__table-cell {
  display: table-cell;
  vertical-align: middle;
}
.intro.intro--table-celled {
  display: table-cell;
  vertical-align: middle;
}
nav .logo-block {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  width: 10%;
}
.logo {
  display: block;
  min-width: 50px;
  height: 50px;
  background: url(../images/logo.png) no-repeat left center;
  background-size: contain;
}
header nav, nav.headernav {
  width: 100%;
    height: 71px;
    background: #007BAD;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.intro__nav {
  display: table;
  height: 100%;
}
nav .menu-block {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
header ul.menu {
  margin: 0;
  padding: 0;
  text-align: right;
}
ul.menu li.menu-item {
  display: inline-block;
  margin-left: 15px;
}
ul.menu li.menu-item:first-child {
  margin-left: 0;
}
nav .right-block {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  width: 20%;
  text-align: right;
}
nav .right-lnk {
  background: rgba(0, 0, 0, 0.08);
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 10px;
  font-size: 13px;
  font-family: 'RalewaySemiBold';
  border-radius: 3px;
}
ul.menu li.menu-item a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 10px;
  font-size: 13px;
  font-family: 'RalewaySemiBold';
  transition: background .25s ease;
  -webkit-transition: background .25s ease;
  border-radius: 3px;
}
ul.menu li.menu-item a:hover, ul.menu li.menu-item a:active, ul.menu li.menu-item a:focus, ul.menu li.menu-item.active a {
  background: rgba(0, 0, 0, 0.06);
}
.header-content {
  background: #E2E5E8 url(../images/header-bg.png) repeat top left;
  height: 100%;
  padding-top: 71px;
  display: table;
  width: 100%;
  position: relative;
}
.header-content__laptop {
  background: url(../images/obj_laptop.png) no-repeat center;
  width: 529px;
  height: 261px;
  position: absolute;
  z-index: 0;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  opacity: .8;
}
.header-content__coffee {
  background: url(../images/obj_coffee.png) no-repeat center;
  width: 226px;
  height: 224px;
  position: absolute;
  z-index: 0;
  bottom: 5%;
  right: 5%;
  opacity: .8;
}
.header-content__note {
  background: url(../images/obj_note.png) no-repeat center;
  width: 267px;
  height: 335px;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  opacity: .8;
}
.header-content__intro {
  display: table-cell;
  vertical-align: middle;
  z-index: 1;
  position: relative;
}
header .intro {
  text-align: center;
}
h1.header-content-title {
  font-size: 60px;
  font-family: 'RalewayExtraBold';
  text-transform: uppercase;
  color: #007BAD;
  text-align: center;
  margin:0 0 20px;
}
h1.header-content-title:after {
  content: '';
  display: block;
  width: 75%;
  height: 1px;
  background: #ccc;
  margin: 15px auto 0;
}
h1.header-content-title span {
  color: #252525;
}
.header-content-descr {
  color: #969696;
  font-size: 18px;
  display: block;
  text-align: center;
  margin: 0 0 50px;
}

/* buttons */
.button, form input[type='submit'] {
  font-size: 18px;
  font-family: "RalewayExtraBold";
  color: #ffffff;
  text-shadow: 0px 1px 0px rgba(0, 1, 1, 0.15);
  text-decoration: none;
  background: #007BAD;
  border-radius: 3px;
  padding: 10px 30px;
  display: inline-block;
  text-transform: uppercase;
  transition: background .3s ease;
  -webkit-transition: background .3s ease;
}
form input[type='submit'] {
  border:none;
  outline: none;
  cursor: pointer;
}
form input[type='text'], form input[type='email'], form textarea{
  outline: none;
  width: 100%;
  border: 2px solid #D6D6D6;
  border-radius: 3px;
  font-family: 'RalewayRegular', sans-serif;
  font-size: 16px;
  padding: 10px 15px;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
}
.button:hover {
  background: #0A8FC5;
}
.button:active {
  background: #0A8FC5;
  box-shadow: inset 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
.button.button--long {
  padding: 20px 150px;
}
.button.button--green {
  background: #5bbc2e;
}
.button.button--green:hover {
  background: #6ACA3D;
}
.button.button--purple {
  background: #c42fc9;
}
.button.button--purple:hover {
  background: #CF3CD4;
}
.button.button--yellow {
  background: #dac00e;
}
.button.button--yellow:hover {
  background: #E4CB21;
}
.button.button--light {
  font-size: 12px;
  text-shadow: none;
  font-family: 'RalewayMedium';
}
.button.button--square {
  border-radius: 0;
}
.button.button--transparent {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 12px 40px;
  transition: background .3s ease, padding .3s ease;
  -webkit-transition: background .3s ease, padding .3s ease;
}
.button.button--transparent:hover {
  padding: 12px 50px;
}
/* end of buttons */

/* features */
.section {
  height: auto;
  min-height: 500px;
  background: #f9f9f9;
}
.section__descr {
  color: #515151;
  text-align: center;
  display: block;
  margin: 20px 0 30px;
  line-height: 20px;
}
.section__title {
  color: #8d8d8d;
  text-transform: uppercase;
  font-family: 'RalewayExtraBold';
  margin: 0 0 25px;
  font-size: 30px;
}
.section__title--centered {
  text-align: center;
}
.section__title--white {
  color: #ffffff;
}
.section__title--light {
  font-family: 'RalewayMedium';
}
.section__title span {
  color: #007BAD;
}
.section--features {
  padding: 80px 0 100px;
  font-size: 12px;
  font-family: 'RalewayMedium';
  letter-spacing: 0.5px;
  min-height: 850px;
}
.section--features h2 {
  font-family: 'RalewayExtraBold';
  font-size: 48px;
  text-transform: uppercase;
  color: #252525;
  margin: 0;
  text-align: center;
  letter-spacing: 0;
}
.section--features h2 span {
  color: #007BAD;
}
.features-block {
  width: 100%;
  overflow: hidden;
  margin: 60px 0 0;
}
.features-block .feature {
  width: 25%;
  float: left;
  text-align: center;
  margin: 0 0 50px;
  transition: background .4s ease;
  -webkit-transition: background .4s ease;
  border-radius: 3px;
  padding: 15px;
  cursor: default;
}
.features-block .feature:hover {
  background: rgba(0, 0, 0, 0.04);
}
.feature__icon {
  font: normal normal normal 61px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #007BAD;
}
.feature__title {
  display: block;
  font-size: 14px;
  color: #007BAD;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'RalewaySemiBold';
  margin: 22px 0 15px;
}
.feature__text {
  color: #515151;
  font-family: 'RalewayMedium';
  font-size: 12px;
  line-height: 20px;
  min-height: 65px;
  display: block;
}
/* end of features */

/* show */
.section--show {
  background: #ffffff;
  padding: 45px 0;
}
.section--halfheight {
  height: 50vh;
  min-height: 400px;
}
.section--show__left, .section--show__right {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}
.section--show__left img {
  max-width: 100%;
}
.section--show__text {
  color: #767575;
  font-size: 14px;
  line-height: 20px;
  font-family: 'RalewayMedium';
}
/* end of show */

/* partners */
.section--partners {
  padding: 80px 0;
  min-height: 500px;
}
.section--partners__list {
  overflow: hidden;
  margin: 50px 0 0;
}
.partner {
  width: 25%;
  float: left;
  text-align: center;
  margin: 0 0 30px;
  padding: 20px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  /*filter: url(grayscale.svg#greyscale);*/
  filter: gray; /* IE 6-9 */
  opacity: 0.5;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.partner:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
  filter: none; /* Firefox 4+ */
  opacity: 1;
}
.partner img {
  max-width: 100%;
}
/* end of partners */

/* portfolio */
.section--portfolio {
  background: #ffffff;
  padding: 60px 0 70px;
    min-height: 700px;
}
.section--portfolio__posts {
  overflow: hidden;
  width: 100%;
}
.post {
  width: 25%;
  float: left;
  padding: 20px;
}
.post__intro {
  border: 1px solid #f5f5f5;
}
.post__intro > a {
  text-decoration: none;
}
.post__image {
  width: 100%;
}
.post__image img {
  max-width: 100%;
}
.post__name {
  position: relative;
  padding: 40px 15px 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'RalewayExtraBold';
  color: #4b4b4b;
  min-height: 90px;
}
.post__category {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'RalewayExtraBold';
  background: #007BAD;
  color: #ffffff;
  padding: 10px 25px;
  white-space: nowrap;
  max-width: 90%;
  text-overflow: ellipsis;
}
.post__category--green {
  background: #5bbc2e;
}
.post__category--purple {
  background: #c42fc9;
}
.post__category--yellow {
  background: #dac00e;
}
/* end of portfolio */

/* team */
.section--team {
  background: url(../images/block-bg.png) repeat;
  padding: 50px 0 50px;
  min-height: auto;
  height: auto;
}
.section--team__team {
  width: 100%;
  overflow: hidden;
}
.person {
  width: 25%;
  float: left;
  padding: 20px;
}
.person__inner {
  padding: 20px 15px 15px;
  background: #fafafa;
}
.person__photo {
  max-width: 50%;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
.person__name {
  font-size: 14px;
  font-family: 'RalewayExtraBold';
  text-transform: uppercase;
  color: #7e7e7e;
  text-align: center;
  margin: 10px 0 0;
}
.person__stars {
  display: block;
  position: relative;
  width: 70px;
  margin: 5px auto 0;
  height: 12px;
}
.person__stars:before {
  content: '\f005 \f005 \f005 \f005 \f005';
  font-family: 'fontawesome';
  font-size: 12px;
  color: #CFCFCF;
  letter-spacing: 3px;
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
}
.person__stars:after {
  font-family: 'fontawesome';
  font-size: 12px;
  color: #2ca7e0;
  letter-spacing: 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.person__stars--5stars:after {
  content: '\f005 \f005 \f005 \f005 \f005';
}
.person__stars--4stars:after {
  content: '\f005 \f005 \f005 \f005';
}
.person__stars--3stars:after {
  content: '\f005 \f005 \f005';
}
.person__stars--2stars:after {
  content: '\f005 \f005';
}
.person__stars--1star:after {
  content: '\f005';
}

.person__job {
  color: #7e7e7e;
  text-transform: uppercase;
  text-align: center;
  font-family: 'RalewayMedium';
  font-size: 12px;
  margin: 15px 0 0;
}
.person__city {
  color: #7e7e7e;
  text-transform: uppercase;
  text-align: center;
  font-family: 'RalewayMedium';
  font-size: 12px;
  margin: 8px 0 0;
}
.person__city:before {
  content: '\f041';
  font-family: 'fontawesome';
  margin: 0 10px 0 0;
}
/* end of team */

/* join */
.section--join {
  padding: 0;
  height: auto;
  min-height: auto;
}
.section--join__white-block {
  text-align: center;
  padding: 0 0 50px;
}
.counters {
  background: #b6b6b6;
  color: #ffffff;
  padding: 70px 0 80px;
  overflow: hidden;
}
.counter {
  width: 33%;
  float: left;
  text-align: center;
  color: #f0f0f0;
  text-transform: uppercase;
  font-size: 14px;
  font-family: 'RalewayMedium';
}
.counter .counter__num {
  font-family: 'Open Sans';
  font-weight: 800;
  font-size: 30px;
}
.counter .counter__num:after {
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  background: #f0f0f0;
  margin: 5px auto 20px;
  transition: width .3s ease;
  -webkit-transition: width .3s ease;
}
.counter:hover .counter__num:after {
  width: 120px;
}
.block {
  text-align: center;
  padding: 50px 0;
}
.block.block--dark-grey {
  background: #262626;
  color: #ffffff;
  text-align: center;
}
.block.block--padding100 {
  padding: 100px 0;
}
.section--join h2 {
  margin-bottom: 50px;
}
/* and of join */

/* footer */
footer {
  height: auto;
  min-height: 660px;
  background: #141414;
  color: #515151;
  padding: 50px 0;
}
footer .footer__logo {
  background: url(../images/logo.png) no-repeat center;
  background-size: contain;
  height: 48px;
  margin: 0 0 20px;
}
footer .footer__main-text {
  font-size: 12px;
  font-family: 'RalewayMedium';
  text-align: center;
  width: 80%;
  margin: 0 auto 30px;
}
.social {
  text-align: center;
  clear: both;
}
.social .social__intro {
  overflow: hidden;
  display: inline-block;
}
.social .social__item {
  float: left;
  width: 40px;
  height: 40px;
  border: 1px solid #515151;
  border-radius: 50%;
  margin-left: 15px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
.social .social__item:first-child {
  margin-left: 0;
}
.social .social__item a {
  display: block;
  color: #515151;
  height: 100%;
  transition: color .3s ease;
  -webkit-transition: color .3s ease;
}
.social .social__item a i {
  line-height: 38px;
}
.social .social__item:hover {
  background: #007BAD;
  border: 1px solid #007bad;
}
.social .social__item:hover a {
  color: #ffffff;
}
footer .footer__widgets {
  overflow: hidden;
  margin: 50px 0 80px;
}
.widget {
  float: left;
  padding: 0 30px 0 0;
}
.widget.widget--contacts {
  width: 35%;
}
.widget.widget--nav {
  width: 25%;
}
.widget.widget--latest {
  width: 40%;
}
.widget .widget__title {
  color: #ffffff;
  font-family: 'RalewayMedium';
  font-size: 12px;
  text-transform: uppercase;
}
.widget .widget__title span {
  position: relative;
  display: inline-block;
}
.widget .widget__title span:after {
  content: '';
  display: block;
  height: 1px;
  background: #3b3b3b;
  margin: 15px 0 30px;
}
.contact {
  color: #515151;
  font-size: 12px;
  font-family: 'RalewayMedium';
  line-height: 22px;
  margin: 0 0 25px;
}
.contact .contact__title {
  display: block;
  color: #007BAD;
  text-transform: uppercase;
  font-family: 'RalewayBold';
  margin: 0 0 5px;
}
footer .widget--contacts .contact:last-child {
  margin: 0;
}
ul.menu.menu--footer {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.menu.menu--footer li {
  margin: 0 0 15px;
}
ul.menu.menu--footer li:last-child {
  margin: 0;
}
ul.menu.menu--footer li a {
  color: #515151;
  text-decoration: none;
  -webkit-transition: all .2s ease;
  border-bottom: 1px dashed transparent;
  font-size: 12px;
  font-family: 'RalewayMedium';
}
ul.menu.menu--footer li a.selected {
  color: #007bad;
  text-decoration: none;
  -webkit-transition: all .2s ease;
  border-bottom: 1px dashed transparent;
  font-size: 12px;
  font-family: 'RalewayMedium';
}
ul.menu.menu--footer li a:hover {
  color: #007bad;
  border-bottom: 1px dashed #007bad;
  text-decoration: none;
}
.photos {
  overflow: hidden;
}
.photo {
  width: 33%;
  float: left;
  padding: 0 10px 0 0;
  margin: 0 0 10px;
}
.photo img {
  max-width: 100%;
}
.copyright {
  font-size: 11px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}
.copyright a {
  color: #515151;
  border-bottom: 1px dashed #515151;
  text-decoration: none;
  -webkit-transition: all .2s ease;
}
.copyright a:hover {
  border-bottom: 1px dashed transparent;
}
/* end of footer */

/* popup blocks */
.popup {
  background: rgba(0, 0, 0, 0.7);
  display: none;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  overflow-y: scroll;
  z-index: 9998;
}
.popup .popup__block {
	width: 600px;
	margin: 20px auto;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
  padding: 41px 40px 40px;
	transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  background: #ffffff;
}
.popup .popup__body {
  text-align: center;
}
.popup .popup__close {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #007BAD;
  font-size: 25px;
  transition: color .2s ease;
}
.popup .popup__close:hover {
  color: #000000;
}
/* end of popup blocks */

/* media */
@media only screen and (min-width:1800px) {
  .popup .popup__block {
    width: 800px;
    padding: 50px 50px;
  }
  h1.header-content-title:after {
    margin: 30px auto 0;
  }
  h1.header-content-title {
    margin: 0 0 40px;
  }
  header nav {
    height: 90px;
  }
  .header-content {
    padding-top: 90px;
  }
  form input[type='text'], form input[type='email'], form textarea {
    padding: 14px 20px;
    font-size: 18px;
  }
  form input[type='submit'] {
    padding: 15px 50px;
  }
  .header-content__laptop {
    top: 0;
  }
  h1.header-content-title {
    font-size: 90px;
  }
  .intro {
    width: 1300px;
  }
  header .intro {
    width: 1600px;
  }
  .header-content-descr {
    font-size: 22px;
  }
  ul.menu li.menu-item a, nav .right-lnk {
    font-size: 15px;
    padding: 13px 15px;
  }
}
@media only screen and (min-width:1440px) {
  .intro {
    width: 1200px;
  }
  .section--features {
    font-size: 14px;
  }
  .feature__text {
    font-size: 14px;
  }
  .feature__title {
    font-size: 16px;
  }
  .section--show__text {
    font-size: 16px;
  }
  .section--partners {
    min-height: 550px;
  }
  .contact, ul.menu.menu--footer li a, ul.menu.menu--footer li a.selected, .widget .widget__title {
    font-size: 14px;
  }
  .copyright {
    font-size: 13px;
  }
  footer .footer__main-text {
    font-size: 14px;
    line-height: 20px;
  }
  .social .social__item {
    width: 50px;
    height: 50px;
    margin-left: 20px;
  }
  .social .social__item a {
    line-height: 50px;
    font-size: 18px;
  }
}
@media only screen and (max-width: 1023px) {
  .intro {
    width: 800px;
  }
  h1.header-content-title {
    font-size: 48px;
  }
  .header-content-descr {
    font-size: 15px;
  }
  .button {
    font-size: 15px;
  }
  .button.button--long {
    padding: 18px 120px;
  }
  ul.menu li.menu-item a {
    font-size: 11px;
  }
  nav .right-lnk {
    font-size: 11px;
  }
  .section--features h2 {
    font-size: 42px;
  }
  .section--features, .section--portfolio {
    height: auto;
    min-height: auto;
  }
  .section--features {
    padding: 80px 0 50px;
  }
  .features-block .feature, .post {
    width: 33%;
  }
  .person {
    width: 50%;
  }
}
@media only screen and (max-width: 820px) {
  .intro {
    width: 600px;
  }
  ul.menu li.menu-item a {
    padding: 8px 5px;
  }
  ul.menu li.menu-item {
    margin-left: 5px;
  }
  nav .right-lnk {
    margin-left: 5px;
    padding: 8px 5px;
  }
  h1.header-content-title {
    font-size: 42px;
  }
  .section--features h2 {
    font-size: 38px;
  }
  .features-block .feature, .post {
    width: 50%;
  }
  .section--show__left {
    width: 33%;
  }
  .section--show__right {
    width: 66%;
    padding-left: 30px;
  }
  .partner {
    width: 33%;
}
  .section--partners {
    height: auto;
    min-height: auto;
    padding: 80px 0 40px;
  }
  .photo {
    width: 50%;
  }
  .widget.widget--contacts {
    width: 38%;
  }
  .widget.widget--nav {
    width: 27%;
  }
  .widget.widget--latest {
    width: 35%;
  }
}
@media only screen and (max-width: 620px) {
  .intro {
    width: 500px;
  }
  .header-content__laptop {
    width: 80%;
    background-size: 100% auto;
  }
  .header-content__coffee {
    width: 35%;
    background-size: 100% auto;
    background-position: center bottom;
  }
  .header-content__note {
    width: 40%;
    background-size: 100% auto;
    background-position: center bottom;
  }
  nav .menu-block {
    display: none;
  }
  h1.header-content-title {
    font-size: 32px;
  }
  .button {
    font-size: 13px;
  }
  .button.button--long {
    padding: 15px 100px;
  }
  .section--features h2 {
    font-size: 32px;
  }
  .intro {
    width: 100%;
    padding: 0 40px;
  }
  .counter {
    width: 100%;
    margin-bottom: 40px;
  }
  .counter:last-child {
    margin-bottom: 0;
  }
  .widget.widget--contacts, .widget.widget--nav, .widget.widget--latest {
    width: 100%;
    padding: 0 0 0 40px;
  }
  .widget {
    margin: 0 0 50px;
  }
  footer {
    min-height: auto;
    height: auto;
  }
  .photo {
    width: 33%;
  }
  .popup .popup__block {
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 95%;
  }
}
@media only screen and (max-width: 450px) {
  .not-mobile {
    display: none;
  }
  .intro {
    width: 100%;
    padding: 0 10px;
  }
  h1.header-content-title {
    font-size: 32px;
  }
  .header-content-descr {
    font-size: 14px;
  }
  .button {
    font-size: 12px;
  }
  .section--features h2 {
    font-size: 32px;
  }
  .button.button--long {
    padding: 20px 100px;
  }
  .features-block .feature {
    width: 100%;
  }
  .section--features, .section--halfheight, .section--portfolio, footer {
    min-height: auto;
    height: auto;
  }
  .section--show__left, .section--show__right {
    width: 100%;
    display: block;
  }
  .section--show__left {
    margin: 0 0 30px;
  }
  .partner {
    width: 50%;
  }
  .post, .person, .counter {
    width: 100%;
  }
  .counter {
    margin: 0 0 30px;
  }
  .counter:last-child {
    margin: 0;
  }
  .widget.widget--contacts, .widget.widget--nav, .widget.widget--latest {
    padding: 0 0 0 20px;
  }
  .wigtet:last-child {
    margin: 0;
  }
  .widget .widget__title span:after {
    margin: 10px 0 15px;
  }
  footer .footer__widgets {
    margin: 50px 0 30px;
  }
  .photo {
    width: 50%;
  }
#block{
border: 10px solid red;
}