:root {
  --txt-color: #212121;
  --ndtxt-color: #757575;
  --hover-color: #2196f3;
  --second-txt-color: #ffffff;
  --bg-color: #2f303a;
  --secondbg-color: #f5f5f5;
  --thirdbg-color: #f5f4fa;
  --logo-header-color: #000000;
  --email-color: rgba(255, 255, 255, 0.6);
  --shadow-color: rgba(0, 0, 0, 0.25);
}

/* main tags */
.list {
  list-style: none;
}

body {
  background-color: var(--second-txt-color);
  color: var(--txt-color);

  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
}

a {
  text-decoration-line: none;
}

/* Navigation */

.logo-link {
  font-family: Raleway;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}

.logo {
  color: var(--hover-color);
}
.logo-header {
  color: var(--logo-header-color);
}
.logo-footer {
  color: var(--second-txt-color);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--hover-color);
}
.nav-link {
  color: var(--txt-color);

  font-weight: 500;
  line-height: 1.14;
  text-decoration: none;
}

.nav-link.current {
  color: var(--hover-color);
  text-decoration: underline;
}

.contact-list:hover,
.contact-list:focus {
  color: var(--hover-color);
}
.contact-list {
  color: var(--ndtxt-color);

  font-weight: 500;
  line-height: 1.14;
  text-decoration: none;
}

/* first section */
.hero .hero-title {
  color: var(--second-txt-color);

  font-weight: 900;
  font-size: 44px;
  line-height: 1.36;
  letter-spacing: 0.06em;
  text-shadow: 0px 4px 4px var(--shadow-color), 0px 4px 4px var(--shadow-color);
  text-align: center;
}

.section .section-title {
  color: var(--txt-color);
}

.hero {
  background-color: var(--bg-color);
}

.hero .order-button {
  color: var(--second-txt-color);
  background-color: var(--hover-color);

  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  align-items: center;
  text-align: center;
  letter-spacing: 0.06em;
}
/* УВАГА ДО ДЕТАЛЕЙ 

color: #212121;


/* About us */

.about {
  color: var(--txt-color);
}

.about .about-title {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.about .about-text {
  color: var(--ndtxt-color);

  font-size: 14px;
  line-height: 1.7;
}

/* What we do */

.actions .actions-title {
  color: var(--txt-color);

  font-weight: 700;
  font-size: 36px;
  line-height: 1.17;
  text-align: center;
}

/* Our team  */
.team {
  color: var(--txt-color);
  background-color: var(--thirdbg-color);
}

.team .team-title {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.12;
  text-align: center;
}

.team .team-name {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.19;
  text-align: center;
}

.team .team-profession {
  color: var(--ndtxt-color);

  font-size: 16px;
  line-height: 1.19;
  text-align: center;
}

/* Footer  */

.site-footer {
  background-color: var(--bg-color);
}
.company {
  font-style: normal;
  line-height: 1.71;
}

.company .company-hvr:hover,
.company .company-hvr:focus {
  color: var(--hover-color);
}

.company .company-name {
  color: var(--second-txt-color);

  text-decoration: none;
}

.company .company-info {
  color: var(--email-color);
}

/* portfolio */
.filter .filter-button {
  background-color: var(--thirdbg-color);
  color: var(--txt-color);

  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.03em;
}

.filter .filter-button:hover,
.filter .filter-button:focus {
  background-color: var(--hover-color);
  color: var(--second-txt-color);
}

.projects {
  color: var(--ndtxt-color);

  font-size: 16px;
  line-height: 1.9;
}

.projects .projects-title {
  color: var(--txt-color);

  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.order-button,
.filter .filter-button {
  cursor: pointer;
}

/* filter 1 (active) 
.filter .one{
position: absolute;
width: 73px;
height: 38px;
left: 512px;
top: 174px;
}
 filter 2 

.filter .two{
	position: absolute;
width: 125px;
height: 38px;
left: 593px;
top: 174px;
}

filter 3 
.filter .three{
	position: absolute;
width: 112px;
height: 38px;
left: 726px;
top: 174px;
}
 filter 4

.filter .four{
	position: absolute;
width: 103px;
height: 38px;
left: 846px;
top: 174px;
}

 filter 5 

.filter .five{
	position: absolute;
width: 130px;
height: 38px;
left: 957px;
top: 174px;
} */