* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	list-style: none;
}

li {
	text-decoration: none;
	list-style: none;
}

body {
	font-family: 'Raleway', sans-serif;
}

.logo {
 /* Можно убрать по желанию */
	background: #000;
	width: 100%;
	display: flex;
	justify-content: center;
}

.glogo {
	padding: 5px;
	max-width: 100%;
	box-sizing: border-box;
}

.glogo:hover {
	opacity: .6;
	transition: .5s;

}

nav {
	margin: auto;
	width: 800px;
	height: 100px;
}

.topnav {
	font-size: 15px;
	margin-top: 25px;
	text-align: center;
}

.topnav a {
	color: #000;
	text-align: center;
	padding: 13px 16px;
	font-size: 15px;  
	border: 2px solid #fff;
	border-radius: 0px;
	/*border bottom*/
}

.topnav a:hover {
	color: #fff;
	background-color: #000;
	border: 2px solid #48a4e4;
	border-radius: 9px;
	transition: .5s;
	padding: 13px 25px; 
}


.topnav .icon{
	display: none;
}


.mw-100 {

	max-width: 100%;
	height: auto; 
}


.ad__container {
	display: flex;
	justify-content: center;
}

.ad__in {
	padding-top: 50px;
	padding-bottom: 50px;
	width: 70%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	flex-wrap: wrap;
}

.ad__item {
	width: 30%;
}

footer {
	width: 100%;
	height: auto;
	background: #000;
	margin: 0 auto;
	text-align: center;
	padding-top: 25px;
}

footer nav {
	margin-bottom: -10px;
}

footer a {
	color: white;
	font-size: 14px;
	margin-left: 10px;
	border: 2px solid #000;
	border-radius: 0px;
	padding: 8px 6px;

}

footer nav a:hover {
	color: #000;
	background-color: #fff;
	border: 2px solid #48a4e4;
	border-radius: 7px;
	transition: .5s;
	padding: 8px 16px; 
}


.social img {
	margin-left: 10px;
	margin-bottom: 10px;
}


.social img:hover {
	opacity: 0.5;
	background: #a2d2e9;
	border-radius: 50%;
	transition: .5s;
}

.footer-p {
	color: white;
	border: none;
	padding: 10px; 
}

.footer-p:hover {
	opacity: 0.5;
	transition: .3s;

}

/* Project page */
.gallery {
	width: 80%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.photo-itm {
	width: 25%;
}

.photo-itm img {
	box-sizing: border-box;
	max-width: 100%;    /* Это для адаптивности сайтап */
	opacity: 0.7;
}

.photo-itm img:hover {
	opacity: 1;
}




.kon__img {             /* Contact page style */
	width: 70%;
	/*display: flex;*/
	margin: auto;

}

.kon {
	text-align: center;
	font-size: 25px;
	width: 100%;
	padding-bottom: 60px;
}

.kon a {
    color: #116ce0;
}

.kon a:hover {
	transition: 1s;
	color: #000;
	background-color:#48a4e4;
	border-radius: 4px; 
}

.about__container {
	width: 80%;
	margin:  auto;
	text-align: center;
}

.about__container img {
	max-width: 100%;
}

.about__container p {
	margin-top: 30px;
}

.about__container h1 {
	margin-top: 30px;
}


.pp__container {
	margin-left: 10px;
	width: 80%;
	margin:  auto;
/*	text-align: center; */
}

.pp__container img {
	max-width: 100%;
}

.pp__container p {
	margin-top: 30px;
}

.pp__container h1 {
	margin-top: 30px;
}






/*Медиазапросы для определенного размера экрана для Адаптивности*/
@media screen and (max-width: 768px) {
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon{
		float: right;
		margin-top: -17px;
		display: block;
		color: black;
	}


	nav {
		width: 100%;
		height: 50px;
	}
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive a.icon {
		position: relative;
		right: 0; 
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.ad__item {
		width: 45%;
	}
	.photo-itm {    /* Adaptive Projects page */
		width: 45%;
		margin-left: 10px;

	}
	.blog-container: {
		width: 28rem;   /* Adaptative Blog Page */
	}
}

@media screen and (max-width: 420px) {
	.ad__in {
		flex-direction: column;
	}
	.ad__item {
		width: 100%;
	}

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

	.gallery {    /* Adaptive Projects page */
		width: auto;
		margin: auto;
	}

	.photo-itm {
		width: 70%;
		margin: 0 auto;
	}

	.blog-container {
		width: 28rem;
	}
}

.lorem {
	height: 100%;
	font-weight: 50%;
}