*{padding:0; margin:0;}

body{
	margin:0;
	color:#555;
      font-family: verdana, arial, sans-serif;
      font-size: 14px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	background-attachment: scroll;
	background-image: url(img/bg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #FCFCFC;
}


a{color:#ed0000;}
a:hover{color:#d10000;}

.wrapper{
      background:url(http://websitelessons.narod.ru/img/website-header.jpg);
      	background-repeat: no-repeat;
	background-position: top;
text-align:center;
padding:290px 0 50px 0;
background-size: contain;
margin: 0 auto;
width:90%; max-width: 900px;
text-align:left
}


#text {background:  #F7F7F7; 
   text-align:center;}

h1, h2, h3{margin:35px 0} 
h4, h5, h6{margin:0 0 35px 0} 
h1 {font-size:45px; line-height: 50px;} 


.wrapper .left p{margin:0 0 25px 0; line-height: 24px;}
.wrapper p a{font-weight:bold;}
.wrapper img{width:100%; max-width:600px;}


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

.flex div.left{width:55%;}
.flex div.right{width:40%;}

.flex div.left ul, .flex div.left ol {margin:20px 0 40px 30px;}
.flex div.left ul li, .flex div.left ol li {margin:0 0 20px 0; line-height: 22px;}


blockquote {
  background: #fde3ff;
  color: #6d0475;
  border-left: 10px solid #6d0475;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  content: open-quote;
  font-size: 26px;
  line-height: 26px;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}


.flex div.right ul{list-style:none; margin:0 0 50px 0;}
.flex div.right li {padding: 0 0 8px 0;}
.flex div.right a {display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  }
.flex div.right a:hover, .flex div.right a:focus, .flex div.right a:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}
.flex div.right a::before {content: "» ";}




@media screen and (max-width: 770px){ 

.flex{display: flex; flex-direction: column;}
.flex div.left, .flex div.right{width:90%;}

.wrapper{
padding:calc(290px - 10%) 0 50px 0;
}

}

@media screen and (max-width: 500px){ 

.wrapper{
padding:calc(290px - 30%) 0 40px 0;
}

}

@media screen and (max-width: 360px){ 

.wrapper{
padding:calc(290px - 40%) 0 30px 0;
}
h1 {font-size:25px; line-height: 30px;} 

}