*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Verdana,sans-serif;
}

body{
background:#9bd2df;
color:#111;
line-height:1.7;
}

header{
padding:80px 30px 50px;
text-align:left;
max-width:1000px;
margin:auto;
}

header h1{
font-size:58px;
font-weight:normal;
margin-bottom:20px;
border-bottom:3px solid #111;
display:inline-block;
padding-bottom:8px;
}

header p{
font-size:20px;
max-width:700px;
}

section{
max-width:1000px;
margin:auto;
padding:50px 30px;
border-top:1px solid #ddd;
}

h2{
font-size:38px;
font-weight:normal;
margin-bottom:30px;
}

h3{
font-size:28px;
font-weight:normal;
margin-bottom:15px;
}

p{
margin-bottom:20px;
font-size:18px;
}

ul{
margin-left:25px;
margin-bottom:30px;
}

li{
margin-bottom:10px;
}

.compare-block{
margin:70px 0;
}

.img-comp-container{
position:relative;
height:500px;
max-width:900px;
margin-top:30px;
border:2px solid #111;
}

.img-comp-img{
position:absolute;
overflow:hidden;
}

.img-comp-img img{
display:block;
}

.img-comp-slider{
position:absolute;
z-index:9;
cursor:ew-resize;
width:34px;
height:34px;
background:#111;
border-radius:50%;
}

.compare-block::after{
content:"";
display:block;
margin-top:60px;
border-bottom:1px solid #ddd;
}

@media(max-width:900px){

header h1{
font-size:42px;
}

h2{
font-size:30px;
}

.img-comp-container{
height:380px;
}

}

@media(max-width:700px){

header{
padding:50px 20px;
}

section{
padding:40px 20px;
}

header h1{
font-size:34px;
}

p{
font-size:16px;
}

.img-comp-container{
height:260px;
}

}