.book{
	background-image: url(../../assets/images/background-header.jpg);
	background-size: 75%;
    background-repeat: no-repeat;
}

@media all and (max-width: 768px){
    .book{
		background-size: 100%;
	}
}


/*################# HEADER #################*/


.book .book-header{
	padding: 180px 20px 80px;
}
.book .book-header .container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap:50px;
}
.book .book-header .book-header-image{
	width: calc(50% - 25px);
	text-align: center;
}
.book .book-header .book-header-image img{
	width: 100%;
	max-width: 350px;
}
.book .book-header .book-header-content{
	width: calc(50% - 25px);
}
.book .book-header .book-header-content h1{
	margin-bottom:30px;
}
.book .book-header .book-header-content p{
	font-size:16px;
	color:#fff;
}
.book .book-header .book-header-content .ui-button{
	margin-top:30px;
}
.book .book-header .book-header-content .ui-button.ui-button-tertiary{
	border-color: transparent;
	margin-left:20px;
}

@media all and (max-width: 768px){
    .book .book-header{
		padding:100px 20px;
		text-align: center;
	}
	.book .book-header .book-header-image{
		width: 100%;
		margin:auto;
	}
	.book .book-header .book-header-image img{
		width: 65%;
	}
	.book .book-header .book-header-content{
		width: 100%;
	}
}
@media all and (max-width: 600px){
	.book .book-header .book-header-content h1{
		font-size:35px;
	}
}


/*################# CONTENT #################*/


.book .book-content{
	padding: 100px 20px;
}
.book .book-content h5{
    max-width: 550px;
    margin: auto;
    text-align: center;
}
.book .book-content ul{
    list-style: none;
	margin: 100px auto 0px;
    padding:0px;
    column-count: 3;
	column-gap: 80px;
}
.book .book-content ul li{
    font-size:14px;
    display: flex;
	margin-bottom:50px;
	padding-left: 25px;
	position: relative;
}
.book .book-content ul li:after{
	content: '';
	height: calc(100% + 50px);
	width: 1px;
	position: absolute;
	top:15px;
	left: 5px;
	background-image: linear-gradient(white 45%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 1px 12px;
    background-repeat: repeat-y;
}
.book .book-content ul li:last-child::after{
	content: none;
}
.book .book-content ul li h6{
    margin-right: 15px;
	font-size:50px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	line-height: 35px;
	width: 65px;
	position: relative;
}
.book .book-content ul li h6 span{
    font-size:20px;
	font-weight: 700;
	display: block;
}
.book .book-content ul li h6:after{
    content:'';
	width: 12px;
	height: 12px;
	border-radius: 100%;
	background: #fff;
	position: absolute;
	top:12px;
	left:-25px;
}
.book .book-content ul li p{
	font-size: 14px;
    line-height: 180%;
}

@media all and (max-width: 1024px){
    .book .book-content ul{
    	column-count: 2;
		max-width: 800px;
    }
}
@media all and (max-width: 768px){
	.book .book-content{
		padding: 50px 20px 0px;
	}
	.book .book-content ul{
    	column-count: 1;
		max-width: 450px;
    }
}


/*################# MATERIAL #################*/

.book .book-backgroud-material{
	background-image: url(../../assets/images/template-book/background-material.png);
	background-position: center;
	background-repeat: no-repeat;
}
.book .book-backgroud-material.landing{
	background-position: center -100%;
}
.book .book-material{
	padding: 180px 20px;
}
.book .book-material .book-material-content{
	width: 50%;
	max-width: 500px;
}
.book .book-material .book-material-content h5{
	margin-bottom:30px;
}
.book .book-material .book-material-content p{
	margin: 20px 0px;
}
.book .book-material .book-material-content .ui-button{
	margin-top:30px;
}

@media all and (max-width: 1024px){
	.book .book-backgroud-material.landing{
		background-position: center -3000%;
	}
}
@media all and (max-width: 768px){
    .book .book-backgroud-material{
		background-position: center 60%;
	}
	.book .book-backgroud-material.landing{
		background-position: center 180%;
	}
}
@media all and (max-width: 600px){
    .book .book-backgroud-material{
		background-position: 60% 70%;
	}
	.book .book-backgroud-material.landing{
		background-position: 60% 140%;
	}
	.book .book-material{
		padding: 100px 20px 700px 20px;
	}
	.book .book-material .book-material-content{
		width: 100%;
	}
}


/*################# ABOUT #################*/


.book .book-about{
	padding: 180px 20px 80px;
}
.book .book-about .container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:80px;
}
.book .book-about .book-about-image{
	width: 40%;
	max-width: 350px;
	text-align: center;
}
.book .book-about .book-about-image img{
	width: 100%;
}
.book .book-about .book-about-content{
	width: calc(60% - 50px);
	max-width: 500px;
}
.book .book-about .book-about-content h5{
	margin-bottom:30px;
}
.book .book-about .book-about-content p{
	margin: 20px 0px;
}

@media all and (max-width: 768px){
    .book .book-about{
		padding:100px 20px;
	}
	.book .book-about .book-about-image{
		width: 100%;
		margin:auto;
	}
	.book .book-about .book-about-content{
		width: 100%;
	}
}
@media all and (max-width: 600px){
    .book .book-about{
		padding:100px 20px 0px;
		text-align: center;
	}
	.book .book-about .book-about-content h1{
		font-size:35px;
	}
}