@font-face {
    font-family: 'Magnolia Script';
    src: local('Magnolia Script'), local('Magnolia-Script'), url('../assets/Magnoliascript.woff2') format('woff2'), url('../assets/Magnoliascript.woff') format('woff'), url('../assets/Magnoliascript.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


.lpbook {
	font-family:'Roboto', sans-serif, Arial, sans-serif;
	font-size: 14px;
	line-height:1.4;
	font-weight:400;
	text-align:left;
	color:#171616;
	background-color:#009c9c;
	box-sizing:border-box;
}

.lpbook * {
	box-sizing:border-box;
}

.wrapper {
	display:block;
	margin:0 auto;
	max-width:1200px;
	width:100%;
}

.wrapper > .section {
	width:100%:
	display:inline-block;
	padding: 5em 1.414em;
	
}

#section1 {
	background:#dedede;
}

#section2 {
	background:#ffffff;

}

#section3 {
	background:#c7c7c7;
}

#section4 {
	background:#2a383f;
}

/*Common*/

h1 {
	font-size:1.999em;
	font-weight:900;
	color:#009c9c;
	text-transform:uppercase;
}


h3 {
	font-size:2.369em;
	font-weight:700;
	text-transform:uppercase;
	text-align:left;
	font-family:'Roboto Condensed', sans-serif;
	margin-bottom:1em;
	z-index:100;
}

h1:after, h3:after {
	position:absolute;
	transform:rotate(-7deg);	
	display:block;
	font-family:'Magnolia Script', sans-serif;	
	padding: 1em;
	width:100%;
	color:#ffffff;
	text-transform:none;
	font-weight:400;
	background:url(../images/brush.png) no-repeat center;
		background-size:100% 80%;
}

h1:after {
	z-index:100;
	content: "практическое пособие";
	width:90%;
	padding-right:3em;
	font-size:1em;
	text-align:center;
}


h3:after {
	content: "представлены:";
	font-size:.7em;
    width: 11em;
	right:4%;
    margin-top: -1em;
}

small {
	font-size:.7em;
	display:block;
	color:#353535;
	text-transform:none;
}

a {
	color:inherit;
	text-decoration:none;
	transition: color .2s ease-in-out, text-decoration .2s ease-in-out;
}

a:hover, a:active,a:focus {
	color:#009c9c;
	text-decoration:underline;
}

.cta-wrapper {
	text-align:center;
	margin-top:1em;
}

.btn-primary {
	border-radius:2em;
	background: #ea1259;
	border:2px solid #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
	color:#ffffff;
	padding:1.2rem 3rem;
	position:relative;
}

.btn-primary:hover {
	background:#009c9c;
	border:2px solid #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);	
}

.btn-icon {
	text-indent:2em;
}

.btn-icon:before {
	content:url(../images/book-icon.png);
	width:39px;
	height:33px;
	position:absolute;
	left:0;	
}

/*Section 1*/

.book-cover {
	text-align:center;
	height:22rem;
	overflow:hidden;
	padding:0 2em;
}

.book-cover img {
	    box-shadow: 4px 4px 10px rgba(0,0,0,.4);
		width:100%;
		max-width:300px;
}

.emphasize {
	color:#009c9c;
}

.blockquote {
	margin:2em 0;
	font-size:1em;
}

/*Section 2*/

.openbook-title {
	color:#009c9c;
	text-align:center;
	font-size:1.414em;
}

.openbook-title > span {
	color: #ffffff;
    display: block;
    background: url(../images/brush2.png) no-repeat center;
    background-size: 112% 100%;
    padding: .7em 0;
}


ul.openbook-list {
	list-style-type:none;
}

ul.openbook-list > li {
	margin-bottom:1em;
    text-indent: -3em;
    margin-left: 2em;	
}

ul.openbook-list > li:before {
	content:url(../images/li.png);
	height:28px;
	width:29px;
	margin-right:1em;
	position:relative;
	top:.6em;
}


/* Section 3*/
.thumbnail {
margin-bottom:1em;
position:relative;
}

.cloud {
	background: url(../images/cloud.png) no-repeat center;
    background-size: 100% auto;
    position: relative;
    z-index: 100;
    bottom: -2em;
    color: #ffffff;
	display:table;
}

.cloud span {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding:0 2em;
}

#cloud1, #cloud2 {
    height: 12em;
    width: 14em;
	right:-5em;	
}

#cloud3 {
	width:20em;
	height:14em;
	right:-1em;
}


.thumbnail img {
	height:20em;
	margin:0 auto;
	display:block;
}



figure {
	background:url(../images/shadow.png) no-repeat center;
		background-size:contain;
	padding: 0 3em 1.4em 1em;
}



@media screen and (min-width:500px) {
	.lpbook {
		font-size: 16px;
	}
	
	h1 {
	font-size:2.369em;
	position:relative;
	}
	
	h3 {	
	font-size:3.157em;
	text-align:center;
	position:relative;
	}
	
	h1:after, h3:after {
		font-size:.7em;
		padding: 1em 3em 1em 1em;
		right:7%;
	}

	h1:after {
		width:16em;		
	}	

	h3:after {
		z-index:-1;
		width:13em;
		bottom:-1.8em;
	}	


	#cloud1, #cloud2 {
		transform:scale(-1,1);
		right:-10em;
	}
	
	#cloud1 span, #cloud2 span {
		transform:scale(-1,1);
	}
	
	#cloud3 {
		right:-11em;
	}
	
}

@media screen and (min-width:768px) {
	
	.book-cover {
		text-align:center;
		height:auto;
		padding:2em;
	}
	
	.book-cover img {
		transform:rotate(-9deg);
		box-shadow: 4px 4px 10px rgba(0,0,0,.4), inset -6px -12px 32px rgba(0,0,0,.6);
	}
	
	.blockquote {
		border-left:10px solid #ffffff;
		padding:.6em 0 .6em 1em;
		margin:2em;
		position:relative;
	}
	
	.blockquote:after {
		content:url('../images/arrow.png');
		position:absolute;
		top:81%;
		right:0;
	}
	
	
	#section2 {
		background:url(../images/openbook-bg.jpg) no-repeat center;
		background-size:cover;
		min-height:684px;
		padding:10em 1em 1em 1em;
		
	}
	
	#openbook-content {
		display:block;
		margin:0 auto;
		width:100%;
		max-width:800px;
	}
	
	ul.openbook-list > li {
		text-indent: -2.8em;
	}
	
	#cloud1, #cloud2 {
		right:0;
		margin-top:2em;
	}
	
	#cloud3 {
		right:3em;
	}
	
	.cloud {
		bottom:-5em;
	}
	
	.cloud, .thumbnail{
		transform:scale(0.8,0.8);
	}

}


@media screen and (min-width:992px) {
	#pullup {
		margin-top:-15em;
	}
	
	.cloud {
		bottom:-2em;
	}
	
	.cloud, .thumbnail{
		transform:scale(1,1);
	}	

}