:root { 
--primary-text-color: #212121;
--title-text-color: #757575;
--white-text-color: #FFFFFF;
--footer-text-color: #FFFFFF99;
--accent-color: #2196F3;
--secondary-text-color:0px 1px 3px rgba(0, 0, 0, 0.12),
    0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 2px 1px rgba(0, 0, 0, 0.2);
--portfolio-shadow-set:0px 1px 1px rgba(0, 0, 0, 0.12),
    0px 4px 4px rgba(0, 0, 0, 0.06),
    1px 4px 6px rgba(0, 0, 0, 0.16);
--button-backgroud-color:0px 3px 1px rgba(0, 0, 0, 0.1),
    0px 1px 2px rgba(0, 0, 0, 0.08),
    0px 2px 2px rgba(0, 0, 0, 0.12);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}

ul {
list-style: none;
margin: 0;
padding-left: 0;
}

body {
color:var(--primary-text-color);
font-family:roboto, sans-serif;
}

img{
display: block;
max-width: 100%;
height: auto;
}

/*Логотип */
.logo {
font-family:Raleway, sans-serif;
width: 145px;
font-weight: 700;
font-size: 26px;
line-height: 1.2;
letter-spacing: 0.03em;
color:var(--accent-color);
padding-top: 24px;
padding-bottom: 25px;
margin-right: 93px;
}

.logo-accent {
color:var(--primary-text-color);
padding-top: 24px;
padding-bottom: 25px;
}
    
.visually-hidden {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}


/*Контейнер*/
.containar,
.containar-foter{
width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
/*outline: 1px solid red;*/
}


/* Шапка сайта  header */
/* site-nav*/
.header{
background-color: #FFFFFF;
padding-top: 0;
padding-bottom: 0;
border-bottom: 1px solid #ECECEC;
}

.nav-header{
display: flex;
align-items: center;
}

.link {
color:var(--primary-text-color);
font-weight: 500;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.02em;
padding-top: 32px;
padding-bottom: 32px;
}

.main-button{
color:var(--primary-text-color);
font-weight: 500;
font-size: 16px;
line-height:1.6;
text-align: center;
letter-spacing: 0.03em;
}

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

.site-nav{
display: flex; 
}

.items{
display: flex;
margin-right: 50px;
}

.site-nav>.items{
position: relative;
}

.site-nav .link.current::after {
content: "";
position: absolute;
bottom: 0;
display: block;
width: 48px;
height: 4px;
border-radius: 2px;
background-color: var(--accent-color);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.link{
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-link{
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.items:last-child{
margin-right: 0;
}

.site-nav.link.current {
color:var(--accent-color);
}


/* телефон и почта */
.auth-nav{
display: flex;
margin-left: auto;
}

.address-list,
.tel{
margin-right: 10px;
}

.address-list,
.tel{
fill: currentColor
}

.auth-nav .items + .items{
margin-right: 50px;
}

.auth-nav .items:last-child{
margin-right: 0;
} 

.auth-link{
display: block;
text-decoration: none;
}

.auth-link {
display: flex;
color: var(--title-text-color);
font-weight: 500;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.02em;
padding-top: 32px;
padding-bottom: 32px;
align-items: center;
}

.auth-link:hover,
.auth-link:focus {
color:var(--accent-color);
}



/* Main */
/* Герой */
.hero{
background-color:#2F303A ;
background-image: linear-gradient(
rgba(47, 48, 58, 0.4),
rgba(47, 48, 58, 0.4)),url(../images/fon.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
padding-top: 200px;
padding-bottom: 200px;
}

.hero-title {
color:var(--white-text-color);
font-weight: 900;
font-size: 44px;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 0;
width: 696px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

.hero-button {
background-color:var(--accent-color);
color:var(--white-text-color);
font-family: inherit;
font-weight: 700;
font-size: 16px;
line-height: 1.9;
border-radius: 4px;
padding: 10px 32px;
border: none;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-button:hover,
.hero-button:focus{
background-color: #188CE8;;
}

.pointer {
cursor: pointer;
padding-top: 94px;
padding-bottom: 94px;
}

.work{
margin-right: 8px;
}

.work:last-child{
margin-right: 0;
}

.work:hover,
.work:focus{
box-shadow: var(--button-backgroud-color);
}

.main-button{
font-family:roboto, sans-serif;
border-radius: 4px;
padding: 6px 22px 6px 22px;
border: 1px solid transparent;
}
.main-button{
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
color 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-title{
margin-bottom: 4px;
}

.list{
margin-bottom: 50px;
display: flex;
justify-content: center;
}

/* Детали */
.details{
padding-top: 94px;
}

.feature-list{
display: flex;
justify-content: center;
align-items: center;
}

.feature-list.title {
color:var(--primary-text-color);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.03em;
text-transform: uppercase;
}

.title {
color:var(--primary-text-color);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 10px;
}

.text-det{
color:var(--title-text-color);
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.03em;  
}

.text{
color:var(--title-text-color);
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.03em;
}


/* Сетка*/
.feature{
display: flex;
flex-wrap: wrap;
}

.links{
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.item{
width: 370px;
margin-right: 30px;
margin-bottom: 30px;
border: 1px solid #EEEEEE;
}

.item:nth-child(3n){
margin-right: 0;
}

.item:nth-last-child(-n +3){
margin-bottom: 0;
}

.item:hover,
.item:focus {
box-shadow: var(--portfolio-shadow-set);
}

.overlay{
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-names{
padding: 20px 24px 20px 24px;
}

.list-item{
margin-right: 30px;
}

.list-item:last-child{
margin-right: 0;
}

.details-item {
display: block;
}

.details-item{
display: flex;
justify-content: center;
align-items: center;
width: 270px;
height: 120px;
margin-bottom: 30px;
background: #F5F4FA;
border-radius: 4px;
}

/* Чем мы занимаемся */
.how-list{
display: flex; 
}

.doing{
padding-top: 94px;
padding-bottom: 94px;
}

.section-title {
color:var(--primary-text-color);
font-weight: 700;
font-size: 36px;
line-height:1.2;
letter-spacing: 0.03em;
margin-bottom: 50px;
text-align: center;
}

.images{
width: 370px;
margin-right: 30px;
}

.images:last-child{
margin-right: 0;
}

.images-thumb{
position: relative;
}

.item-images{
position: absolute;
top: 0;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.03em;
color: #FFFFFF;
background-color:rgba(33, 150, 243, 0.9);
padding: 63px 24px;
height: 100%;
transform: translateY(101%);
transition: transform 300ms linear;
}

.item:hover .item-images{
transform: translateY(0);
}

.feature-item-links{
position: relative;
overflow: hidden;
}

.suggestions{ 
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 14px;
line-height: 1.2;     
letter-spacing: 0.03em;
text-transform: uppercase;
position: absolute;
width: 370px;
height: 70px;
left: 0;
bottom: 0;
color: #FFFFFF;
background-color: rgba(47, 48, 58, 0.8);
}


/* команда */
.team {
background-color: #F5F4FA;
padding-top: 94px;
padding-bottom: 94px;
}

.team-title {
color:var(--primary-text-color);
font-weight: 700;
font-size: 36px;
line-height: 1.2;
text-align: center;
letter-spacing: 0.03em;
margin-bottom: 50px;
}

.last{
display: flex;
}

.list-employees{
width: 270px;
margin-right: 30px;
background-color: #FFFFFF;
}

.list-employees:last-child{
margin-right: 0;
}

.employees{
text-align: center;
}

.team-list-employees{
padding-top: 30px;
padding-bottom: 30px;
}

.name{
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 10px;
}

.job-title {
color:var(--title-text-color);
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 16px;
}

.project-title {
color:var(--primary-text-color);
font-weight: 700;
font-size: 18px;
line-height: 2;
letter-spacing: 0.06em;
}

.project-title.text {
color:var(--title-text-color);
font-weight: 400;
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.03em;
}

/*SVG Команда*/
.team-soc-list{
display: flex;
justify-content: center;
}

.team-soc-item{
width: 44px;
height: 44px;
margin-left: 10px;
}

.team-soc-item:first-child{
margin-left: 0;
}
   
.team-soc-link{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
color: #AFB1B8;
}

.team-soc-link:hover,
.team-soc-link:focus {
background-color: #2196F3;
color: #FFFFFF;
}

.team-soc-link{
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.team-soc-icon{
fill: currentColor;
}

.employees{
 box-shadow: var(--secondary-text-color);
}

/*Постоянные клиенты*/
.regular-customers {
padding-top: 94px;
padding-bottom: 94px;
}

.reg {
color: var(--primary-text-color);
font-weight: 700;
font-size: 36px;
line-height: 1.2;
text-align: center;
letter-spacing: 0.03em;
margin-bottom: 50px;
}

.regular-customers-items {
display: flex;
justify-content: space-between;
}

.regular-customers-link{
display: flex;
justify-content: space-between;
}

.regular-customers-link{
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);   
}

.regular-customers-link{
display: flex;
width: 170px;
height: 92px;
justify-content: center;
align-items: center;
border: 1px solid  #AFB1B8;
border-radius: 4px;
color:  #AFB1B8;
}

.regular-customers-link:hover,
.regular-customers-link:focus{
border-color: #2196F3;
color: #2196F3;
}

.regular-customers-icon {
fill: currentColor
}


/* footer */
.foter{
background-color: #2F303A;;
padding-top: 60px;
padding-bottom: 60px;
}

.logo-all{
justify-content: flex-start;
margin-right: 70px;
}

.containar-foter{
display: flex;
align-items: baseline;    
}

.logo-footer {
color:var(--accent-color);
font-family:Raleway, sans-serif;
font-weight: 700;
font-size: 26px;
line-height:1.2;
letter-spacing: 0.03em;
width: 145px;
}

.accent {
color:var(--white-text-color);
}

.address-title{
color:var(--white-text-color); 
font-style: normal;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.03em;
margin-top: 20px;
}

.address{
margin-top: 9px;
}

.footer-mail,
.footer-telefon{
color:var(--footer-text-color);
font-style: normal;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.03em;
}

.footer-mail:hover,
.footer-mail:focus{
color:var(--accent-color);
}

.footer-telefon:hover,
.footer-telefon:focus {
color: var(--accent-color);
}

.mail-link{
margin-bottom: 9px;
}

.footer-mail{
transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-telefon{
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.icons{
display: block;
margin-right: auto;
}

.join{       
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.03em;
color: #FFFFFF;
margin-bottom: 20px;     
}

.join-link-icons{
display: flex;
}

.join-list-icons {
display: flex;
justify-content: center;
}

.join-list {
width: 44px;
height: 44px;
margin-left: 10px;
}

.join-list:first-child {
margin-left: 0;
}

.join-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
color: #FFFFFF;
background-color:  rgba(255, 255, 255, 0.1);
}

.join-link{
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.join-link:hover,
.join-link:focus {
background-color: #2196F3;
color: #FFFFFF;
}

.join-link-icon {
fill: currentColor;
}

/*Подписаться*/
.mailing-list{
display: block;
}

.form{
display: flex;
align-items: flex-end;
}

.mailing{ 
margin-right: 12px;
}

.button-submit{
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 200px;
height: 50px;
font-weight: 700;
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.06em;
color:  #FFFFFF;
background-color: #2196F3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
border-radius: 4px;
border: none;
}

.mailing-email{
width: 358px;
height: 50px;
left: 815px;
top: 2787px;
border: 1px solid rgba(255, 255, 255, 0.3);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
border-radius: 4px;
padding: 15px 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
border-radius: 4px;
background-color: #2F303A;
color: #FFFFFF;
}

.send-icon{
margin-left: 10px;
}


/* portfolio */
.main-button:hover,
.main-button:focus{
background-color:var(--accent-color);
color:var(--white-text-color);
}


/* Модальное окно */
.backdrop{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
visibiity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.backdrop.is-hidden .modal-order {
transform: translate(0, 0);
scale (0) ;
}

.modal{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: 528px;
min-height: 581px;
background-color: #FFFFFF;
border-radius: 4px;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
padding: 40px;
}

.model-close-button{
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #FFFFFF;
transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.model-close-button:hover,
.model-close-button:focus{
color: #2196F3;
outline: transparent;
border-color: #2196F3;  
}

.modal-icon{
fill: currentColor;
}

.is-hidden{
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-mod{
margin-bottom: 10px;
}

.form-comment{
margin-bottom: 20px;
}
.modal-label{
display: block;
margin-bottom: 4px;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.01em;
color: #757575;
}

.modal-label:hover .model-input,
.modal-label:hover .modal-text-area{
border-color: #2196F3;
}

.model-input:focus,
.modal-text-area:focus{
border-color: #2196F3;
outline: transparent;
}

.model-input:hover{
border-color: #2196F3;
}

.modal-text-area:hover{
border-color: #2196F3;
}
.input-wrap{  
position: relative;
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)
}

.input-wrap:hover{
color: #2196F3;
}


 /*Форма-модалка*/
.group-title{
width: 448px;
font-weight: 700;
font-size: 20px;
line-height: 1.1;
letter-spacing: 0.03em; 
text-align: center;
color: #212121;
margin-bottom: 12px;
}

.model-input{
width: 100%;
height: 40px;
padding: 12px 42px;
border: 1px solid rgba(33, 33, 33, 0.2);
border-radius: 4px;
cursor: pointer;
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.model-input:focus{
border-color: #2196F3;
}

.modal-text-area:focus{
border-color: #2196F3;
}

.model-input:focus + .modal-icon-input{
fill: #2196F3;
}

.button-mod{
display: block;
margin: 0 auto;
font-weight: 700;
font-size: 16px;
line-height: 1.9;
width: 200px;
height: 50px;
left: 700px;
top: 712px;
border: none;
cursor: pointer;
color: #FFFFFF;
background: #2196F3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}

.modal-text-area{
width: 100%;
height: 120px;
border: 1px solid rgba(33, 33, 33, 0.2);
border-radius: 4px;
resize: none;
padding: 12px 16px;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.01em;
color: rgba(117, 117, 117, 0.5);
background-color: transparent;
color: #000000;
outline: transparent;
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
}

.check-input{
margin-bottom: 30px;
}

.check-text{
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.03em;
color: #757575;
display: flex;
align-items: center;
justify-content: center;
}

.check-text a {
color: #2196F3;
text-decoration: underline;
}

.check-text::before{
content:'';
width: 16px;
height: 15px;
border: 1px solid rgba(34, 34, 34, 0.2);
border-radius: 2px;
margin-right: 7px; 
margin-bottom: 3px; 

}

.modal-icon-input{
position: absolute;
left: 12px;
top: 50%;
transform:translateY(-50%);
fill: currentColor;
transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}


.check-inp:checked + .check-text::before{
background-color: #2196F3;
background-image: url(../images/che.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}