/* 
font-family: 'Raleway', sans-serif;
font-family: 'Roboto', sans-serif; 
*/
body{
	font-family: 'Roboto', sans-serif;
	color: #434455;
	background-color: var(--white);
}

:root{
	--iris: #4D5AE5;
	--navyblue: #2E2F42;
	--ocean: #404BBF;
	--slate: #434455;
	--white: #FFF;
	--cloud: #F4F4FD;
	--cornflower: #E7E9FC;
}

/* _________________HEADER____________________ */

.logo{
	font-family: 'Raleway', sans-serif;
	color: var(--iris);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.17;
	letter-spacing: 0.54px;
	text-transform: uppercase;
}


.logo-span{
	color: var(--navyblue);
}


.link{
	text-decoration: none;
}






.list{
	list-style: none
}


.nav-item{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.02em;
}
.nav-item:hover,
.nav-item:focus{
	color: #404bbf;
}
.nav-item:active{
	color: var(--ocean);
}


.address{
	font-style: normal;
}


.address-item{
	color: var(--slate);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.32px;
}
.address-item:hover,
.address-item:focus{
	color: #404bbf;
}
.address-item:active{
	color: var(--ocean);
}


/* ________________MAIN____________________ */

.intro{
	background-color: var(--navyblue);
}


.intro-title{
	color: var(--white);
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 56px;
	font-weight: 700;
	line-height: 107.143%;
	letter-spacing: 1.12px;
}


.intro-button{
	color: var(--white);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.64px;
	background: var(--iris);
	cursor: pointer
}
.intro-button:hover,
.intro-button:focus{
	background-color: var(--ocean);
}





.advantages-title{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 111.111%;
	letter-spacing: 0.72px;
	text-transform: capitalize;
	text-align: center;
}


.advantages-subtitle{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0.4px;
}


.advantages-text{
	color: var(--slate);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.32px;
}





.about-title{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 111.111%;
	letter-spacing: 0.72px;
	text-transform: capitalize;
	text-align: center;
}


.team{
	background-color: #F4F4FD
}


.team-item{
	background-color: #FFFFFF;
}


.team-title{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 111.111%;
	letter-spacing: 0.72px;
	text-transform: capitalize;
	text-align: center;
}


.team-subtitle {
	color: var(--navyblue);
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0.4px;
}


.team-text {
	color: var(--slate);
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.32px;
}



/* ________________FOOTER___________________ */

.footer{
	background-color: var(--navyblue);
}


.footer-logo{
	color: var(--iris);
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.17;
	letter-spacing: 0.54px;
	text-transform: uppercase;
	text-decoration: none;
}


.footer-logo-span{
	color: #f4f4fd
}


.footer-text{
	color: var(--cloud);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.32px;
}





/* ______________MAIN-PORTFOLIO_______________ */


.categories-title{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 111.111%;
	letter-spacing: 0.72px;
	text-transform: capitalize;
	text-align: center;
}


.categories-button{
	background: var(--cloud);
	color: var(--iris);
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.64px;
	cursor: pointer
}
.categories-button:hover,
.categories-button:focus{
	color: var(--white);
	background-color: #404BBF;
}






.gallery-item{
	background: var(--white);
}


.gallery-subtitle{
	color: var(--navyblue);
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}


.gallery-text{
	color: var(--slate);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}