@import url(../fonts/Oswald-VariableFont_wght.ttf);
* {
	margin: 0;
	padding: 0;
}

/*body {
		background-image: url(images/);
	}*/

	.wrapper {
		width: 80%;
		margin: 0 auto;
		background-color: #e8fafa;
		border: 1px solid black;
	}
	
	header {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid black;
		padding: 20px 0;
		font-family: 'Oswald', sans-serif;
		font-size:  18px;
	}

	a .logo {
		display: block;
		width: 150px;
		height: 150px;
		margin-left: 4em;
		background-image: url(../images/2r.png);
	}

	a .logo:hover {
		background-image: url(../images/2r-alt.png);

	}

	.main_header h1 {
		display: block;
		font-family: 'Palantino Linotype';
		font-size: 4em;
		text-align: center;	
		margin-right: 4em;
	}

	.page_main {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between; 
		width: 100%;
		margin: 0 auto;
	}
	
	.nav {
		display: flex;
		flex-direction: column;
		width: 25%;
		
	}

	.navbar {
		width: 80%;
		margin: 60px auto 20px auto;
		}

	.navbar a{
		display: block;
		width: 80%;
		border-radius: 6px;
		
		font-family: arial;
		font-size: 1.0em;
		padding: 0.6em 1.0em;
		
		border: 1px solid lightgray;
		background-color: black;
		color: #fff;
		text-decoration: none;
		text-decoration: none;

		margin-bottom: 5px;
		list-style-type: none;
	}

	.navbar a:hover {
		display: block;
		width: 80%;
		border-radius: 6px;

		font-family: arial;
		font-size: 1.0em;
		padding: 0.6em 1.0em;

		border: 1px solid darkblue;
		background-color: lightblue;
		color: #000;
	}
	
	.section {
		width: 73%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: stretch;
	}

	.section h2 {
		font-family: arial;
		font-size: 1.6em;
		text-align: center;	
		padding-top: 1.6em;
		padding-bottom: 0.6em;	
	}

	.section p {
		font-family: arial;
		font-size: 1.1em;
		padding: 0 30px;
		text-align: justify;
	}

	.block {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		/*border: 1px solid red;*/
	}

	.block_text {
		width: 48%;
		/*border: 1px solid red;*/
	}

	.block_gallery {
		width:48%;
		/*border: 1px solid red;*/
	}

	.block_gallery img {
		width: 95%;
		height: auto;
		padding: 20px;
		align-self: center;
		/*border: 1px solid red;*/
		margin-top: 3em;
	}

	footer {
		width: 100%;
		height: 70px;
		border-top: 2px solid black;
		
	}
	
    footer a {
        display: block;
        float: left;
        width: 88px;
        height: 33px;
        background-image:url(../images/web-dizain.jpg);
        margin-top: 15px;
        margin-left: 30px;
        
    }

    footer a:hover {
        background-image:url(../images/web-dizain-alt.jpg);
    }

      .footer-right {
        display: block;
        float: right;
        width: 450px;
        margin-top: 10px;
        margin-right: 30px;
    }
    
    span .text {
    	font-size: 14px;
    }
          
    @media screen and (max-width: 850px) {
    .wrapper { 
     	width:100%;
     	background: #efefef;
    }

    header {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid black;
		padding: 20px 0;
	}

	a .logo {
		display: block;
		width: 150px;
		height: 150px;
		margin-left: 40px;
		background-image: url(../images/2r.png);
	}

	a .logo:hover {
		background-image: url(../images/2r-alt.png);

	}

   	.main_header h1 {
		display: block;
		font-family: 'Palantino Linotype';
		font-size: 2.5em;
		text-align: center;	
		margin-right: 40px;	
	}

    .section p {
		font-family: arial;
		font-size: 0.8em;
		padding: 0 30px;
		/*text-align: justify;*/
	}
    
	.section h2 {
		font-family: arial;
		font-size: 1.2em;
		text-align: center;	
		padding-top: 1.2em;	
	}

    }

    @media screen and (max-width: 510px) {
    .wrapper { 
     	width:100%;
     	background: #efefef;
     }

	header {
		width: 100%;
		font-family: arial;
		font-size: 1.2em;
		text-align: center;	
		padding-top: 1.0em;	
		font-weight: bold;
		height:240px;
		background-image: url(../images/bg480x280.png);
	}

	.main_header {
		font-size: 1.4em;
		font-family: 'Palantino Linotype';
		text-align: center;
		align-items: center; 
	} 

     a .logo, a .logo:hover {
	 	display: none;	
	}

	.page_main {
		width: 100%;
		display: flex;
		flex-direction: column;
		/*justify-content: space-between; 
		margin: 0 auto;*/
	}
	.section {
		width: 100%;
	}

	.nav {
		width: 100%;
		display: flex;
		flex-direction: column;
		/*width: 25%;*/
	}

	.navbar {
		width: 100%;
		margin-top: 0px;
		align-self: center;
	}

	.navbar a{
		display: block;
		width: 100%;
		border-radius: 2px;
		
		font-family: arial;
		font-size: 1.0em;
		padding: 0.5em 1.0em;
		
		border: 1px solid darkgray;
		background-color: #116a7e;
		color: #fff;
		text-decoration: none;
		text-decoration: none;

		margin-bottom: 5px;
		list-style-type: none;
	}

	.navbar a:hover {
		display: block;
		width: 100%;
		border-radius: 6px;

		font-family: arial;
		font-size: 1.0em;
		padding: 0.5em 1.0em;

		border: 1px solid darkblue;
		background-color: lightblue;
		color: #000;
	}

	.section {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.block {
		width: 100%;
		display: flex;
		flex-direction: column;
		/*justify-content: space-around;*/
		align-items: center;
		/*border: 1px solid red;*/
	}

    .section p {
		font-family: arial;
		font-size: 0.6em;
		padding: 0 5px;
		/*text-align: justify;*/
	}

	.main_header h1 {
		display: block;
		font-family: 'Palantino Linotype';
		font-size: 1.5em;
		text-align: center;
		color: white;		
	}
 
 	.section h2 {
		font-family: arial;
		font-size: 1.0em;
		text-align: center;	
		padding-top: 1.0em;	
	}

	
	.block_text {
		width: 100%;
		/*border: 1px solid red;*/
	}

	.section h2 {
		font-family: arial;
		font-size: 1.6em;
		text-align: center;	
		padding-top: 1.2em;	
	}

	.section p {
		font-family: arial;
		font-size: 1.1em;
		padding: 0 30px;
		text-align: justify;
	}

	.block_gallery {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin: auto auto;
	}

	.block_gallery img {
		width: 100%;
		height: auto;
		padding:20px 0;
		align-self: center;
		/*border: 1px solid red;*/
		max-width: 100%;

	}

    .footer-right {
    	width: 60%;
    	margin-top: 2px;
    }

     .text {
    	font-size: 14px;
    	color: #0d3e6c;
    }
	

    }

    /*  стиль кнопки   */

    p {
	font-size:18px;
}
#backtop {
	width:3%;
	display:block;
	position:fixed;
	bottom:1.5%;
	right:1.5%;
	opacity:0.6;
	transition:0.3s;
}
#backtop:hover {
	opacity:1;
}
#backtop a img {
	width:100%;
}

#backmain {
	width:3%;
	display:block;
	position:fixed;
	bottom:1.5%;
	left:1.5%;
	opacity:0.6;
	transition:0.3s;
	transform: rotate(-90deg);
}
#backmain:hover {
	opacity:1;
}
#backmain a img {
	width:100%;
}