Notes

* {
padding: 0;
margin: 0; }

.container {
width: 1200px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden; }
.container .nav {
height: 218px;
background-image: url("https://zapodaj.net/images/fcd4bcfd22a26.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center; }
.container .nav .nav_img {
float: left;
width: 486px; }
.container .nav .nav_img img {
display: block;
margin: 45px 109px 62px 124px; }
.container .nav .nav_menu {
width: 714px;
float: left;
height: 100%; }
.container .nav .nav_menu ul {
display: flex;
height: 100%;
align-items: center; }
.container .nav .nav_menu ul li {
color: white;
list-style-type: none;
font-size: 18px;
text-transform: uppercase;
border-right: 2px solid white;
padding: 0 15px; }
.container .nav .nav_menu ul li:last-child {
border: none; }
.container .description {
min-height: 850px;
position: relative;
background-color: white;
z-index: 5; }
.container .description .description_left {
width: 50%;
height: 100%;
float: left; }
.container .description .description_left img {
display: block;
margin: 147px 59px 182px 118px; }
.container .description .description_right {
width: 50%;
height: 100%;
float: left; }
.container .description .description_right h1 {
color: #645ecf;
text-transform: uppercase;
width: 420px; }
.container .description .description_right .description_content p {
width: 445px;
margin-bottom: 20px; }
.container .offers {
min-height: 516px;
background-image: url("https://zapodaj.net/images/f119a66325446.png");
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.container .offers .circle {
position: absolute;
z-index: 1;
width: 680px;
height: 680px;
background-color: white;
left: 0;
right: 0;
margin: auto;
top: -400px;
border-radius: 50%;
border: 50px solid #f6f6f6; }
.container .offers .background-decoration {
display: block;
left: 0;
right: 0;
top: -42px;
margin: auto;
z-index: 10;
position: absolute; }
.container .offers .offers_icons {
position: relative; }
.container .offers .offers_icons .offer {
width: 120px;
z-index: 10;
position: absolute; }
.container .offers .offers_icons .offer img {
display: block;
margin: auto; }
.container .offers .offers_icons .offer p {
padding-top: 10px;
text-align: center;
margin: auto;
color: #282828; }
.container .products {
min-height: 615px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap; }
.container .abmessung {
min-height: 471px;
background-image: url("https://zapodaj.net/images/ee740751ab5e7.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.container .abmessung .abmessung_left {
width: 500px;
height: 100%;
float: left; }
.container .abmessung .abmessung_left h1 {
text-transform: uppercase;
color: #645ecf;
padding: 20px 0 0 118px; }
.container .abmessung .abmessung_left p {
width: 380px;
padding: 43px 0 0 118px; }
.container .abmessung .abmessung_right {
width: 700px;
float: left;
height: 100%; }
.container .abmessung .abmessung_right img {
display: block;
padding: 16px 20px 0; }
.container .about {
min-height: 360px; }
.container .about .about_content {
width: 1000px;
margin-left: 118px; }
.container .about .about_content h1 {
text-transform: uppercase;
color: #645ecf;
padding: 30px 0 20px; }
.container .about .about_content p {
margin-bottom: 20px; }
.container .about .about_content h3 {
font-size: 21px;
color: #645ecf;
margin-bottom: 20px; }
.container .payments {
min-height: 300px;
background-color: #eeeeee; }
.container .payments h1 {
color: #645ecf;
padding: 40px 0 0 118px;
text-transform: uppercase; }
.container .payments .payments_methods {
padding: 0 0 0 98px;
display: flex;
align-items: center; }
.container .payments .payments_methods img {
display: block;
margin: 0 20px; }
.container .shipping {
min-height: 900px;
background-color: #e1e1e1; }
.container .shipping h1 {
text-transform: uppercase;
color: #645ecf;
padding: 50px 0 50px 118px; }
.container .shipping p {
padding-left: 118px; }
.container .shipping .shipping_methods {
padding: 34px 0 79px 118px;
display: flex;
align-items: center; }
.container .shipping .shipping_methods img:nth-child(2) {
padding: 0 88px; }
.container .shipping .shipping_ruck {
width: 1050px;
min-height: 400px;
margin: auto;
background-image: url("https://zapodaj.net/images/19c222c6b3cd7.png"); }
.container .shipping .shipping_ruck h1 {
text-transform: uppercase;
padding: 20px 0 0 50px;
color: white; }
.container .shipping .shipping_ruck p {
width: 900px;
padding-left: 50px;
color: white; }
.container .wave {
display: block;
width: 100%; }
.container .footer {
height: 220px;
display: flex;
justify-content: center;
align-items: center; }

@media screen and (max-width: 1250px) {
.container {
width: 100%; } }
@media only screen and (min-width: 971px) and (max-width: 1250px) {
.container .nav .nav_img {
width: 40%; }
.container .nav .nav_menu {
width: 60%; } }
@media only screen and (min-width: 601px) and (max-width: 970px) {
.container .nav .nav_img {
width: 100%;
float: none; }
.container .nav .nav_img img {
margin: 0 auto;
padding: 20px 0; }
.container .nav .nav_menu {
width: 100%;
float: none;
height: auto; }
.container .nav .nav_menu ul {
justify-content: center; } }
@media only screen and (min-width: 421px) and (max-width: 600px) {
.container .nav .nav_img {
width: 100%;
float: none; }
.container .nav .nav_img img {
width: 180px;
margin: 0 auto;
padding: 20px 0 40px; }
.container .nav .nav_menu {
width: 100%;
float: none;
height: auto; }
.container .nav .nav_menu ul {
justify-content: center; }
.container .nav .nav_menu ul li {
font-size: 14px;
text-align: center; } }
@media only screen and (min-width: 381px) and (max-width: 420px) {
.container .nav {
height: 250px; }
.container .nav .nav_img {
width: 100%;
float: none; }
.container .nav .nav_img img {
width: 180px;
margin: 0 auto;
padding: 20px 0 20px; }
.container .nav .nav_menu {
width: 100%;
float: none;
height: auto; }
.container .nav .nav_menu ul li {
font-size: 14px;
text-align: center; } }
@media only screen and (max-width: 380px) {
.container .nav {
height: 250px; }
.container .nav .nav_img {
width: 100%;
float: none; }
.container .nav .nav_img img {
width: 180px;
margin: 0 auto;
padding: 20px 0 20px; }
.container .nav .nav_menu {
width: 100%;
float: none;
height: auto; }
.container .nav .nav_menu ul {
align-items: center;
flex-direction: column; }
.container .nav .nav_menu ul li {
border-right: none;
font-size: 14px;
text-align: center;
padding-bottom: 10px; }
.container .nav .nav_menu ul li:last-child {
padding-bottom: 20px; } }
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
.container .description {
width: 1000px; }
.container .description .description_left img {
width: 300px; } }
@media only screen and (min-width: 501px) and (max-width: 1000px) {
.container .description {
width: 100%; }
.container .description .description_left, .container .description .description_right {
width: 100%;
float: none;
margin: auto;
height: auto; }
.container .description .description_left img {
margin: auto;
width: 300px;
padding: 20px 0; }
.container .description .description_right h1 {
padding: 10px 0;
margin: auto; }
.container .description .description_right .description_content {
padding-bottom: 50px; }
.container .description .description_right .description_content p {
margin: auto; } }
@media only screen and (max-width: 500px) {
.container .description {
width: 100%; }
.container .description .description_left, .container .description .description_right {
width: 100%;
float: none;
margin: auto;
height: auto; }
.container .description .description_left img {
margin: auto;
padding: 20px 0; }
.container .description .description_right h1 {
width: 90%;
font-size: 24px;
padding: 10px 0;
margin: auto; }
.container .description .description_right .description_content {
padding-bottom: 50px; }
.container .description .description_right .description_content p {
width: 90%;
margin: auto; } }
@media only screen and (min-width: 381px) and (max-width: 500px) {
.container .description .description_left img {
width: 300px; } }
@media only screen and (max-width: 380px) {
.container .description .description_left img {
width: 270px; } }
@media only screen and (min-width: 701px) and (max-width: 1100px) {
.container .offers .background-decoration {
width: 450px; }
.container .offers .circle {
width: 580px;
height: 580px; } }
@media only screen and (min-width: 651px) and (max-width: 700px) {
.container .offers .background-decoration {
width: 400px; }
.container .offers .circle {
width: 550px;
height: 550px; }
.container .offers .offers_icons .offer:nth-child(1) {
left: 88px !important; }
.container .offers .offers_icons .offer:nth-child(2) {
right: 105px !important; }
.container .offers .offers_icons .offer:nth-child(3) {
left: 92px !important; }
.container .offers .offers_icons .offer:nth-child(5) {
right: 100px !important; } }
@media only screen and (min-width: 551px) and (max-width: 650px) {
.container .offers .offers_icons .offer:nth-child(1) {
left: 68px !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(2) {
right: 85px !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(3) {
left: 72px !important;
top: 365px !important; }
.container .offers .offers_icons .offer:nth-child(4) {
top: 395px !important; }
.container .offers .offers_icons .offer:nth-child(5) {
right: 80px !important;
top: 385px !important; } }
@media only screen and (max-width: 650px) {
.container .offers {
height: 650px; } }
@media only screen and (min-width: 601px) and (max-width: 650px) {
.container .offers .background-decoration {
width: 350px; }
.container .offers .circle {
width: 500px;
height: 500px; } }
@media only screen and (min-width: 551px) and (max-width: 600px) {
.container .offers .background-decoration {
width: 350px; }
.container .offers .circle {
width: 500px;
height: 500px; } }
@media only screen and (min-width: 451px) and (max-width: 550px) {
.container .offers .background-decoration {
top: -21px;
width: 200px; }
.container .offers .circle {
top: -200px;
width: 250px;
height: 250px; }
.container .offers .offers_icons .offer:nth-child(1) {
left: 48px !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(2) {
right: 85px !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(3) {
left: 52px !important;
top: 365px !important; }
.container .offers .offers_icons .offer:nth-child(4) {
top: 395px !important; }
.container .offers .offers_icons .offer:nth-child(5) {
right: 40px !important;
top: 385px !important; } }
@media only screen and (min-width: 400px) and (max-width: 450px) {
.container .offers .background-decoration {
top: -21px;
width: 200px; }
.container .offers .circle {
top: -200px;
width: 250px;
height: 250px; }
.container .offers .offers_icons .offer:nth-child(1) {
left: 0 !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(2) {
right: 0 !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(3) {
left: 10px !important;
top: 365px !important; }
.container .offers .offers_icons .offer:nth-child(4) {
top: 395px !important;
left: 10px !important; }
.container .offers .offers_icons .offer:nth-child(5) {
right: 0 !important;
top: 385px !important; } }
@media only screen and (max-width: 400px) {
.container .offers .background-decoration {
top: -21px;
width: 150px; }
.container .offers .circle {
top: -200px;
width: 200px;
height: 200px; }
.container .offers .offers_icons .offer:nth-child(1) {
left: 0 !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(2) {
right: 0 !important;
top: 162px !important; }
.container .offers .offers_icons .offer:nth-child(3) {
left: 0 !important;
top: 365px !important; }
.container .offers .offers_icons .offer:nth-child(4) {
top: 395px !important;
left: 10px !important; }
.container .offers .offers_icons .offer:nth-child(5) {
right: -10px !important;
top: 385px !important; } }
@media only screen and (max-width: 500px) {
.container .products img {
width: 300px; } }
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
.container .abmessung .abmessung_left {
width: 40%; }
.container .abmessung .abmessung_right {
width: 60%; }
.container .abmessung .abmessung_right img {
width: 400px;
margin: auto; } }
@media only screen and (min-width: 901px) and (max-width: 1000px) {
.container .abmessung .abmessung_left {
width: 40%; }
.container .abmessung .abmessung_right {
width: 60%; }
.container .abmessung .abmessung_right img {
width: 300px;
margin: auto; } }
@media only screen and (min-width: 501px) and (max-width: 900px) {
.container .abmessung {
min-height: 500px; }
.container .abmessung .abmessung_left, .container .abmessung .abmessung_right {
float: none;
margin: auto;
height: auto;
width: 100%; }
.container .abmessung .abmessung_left h1 {
width: 380px;
margin: auto; }
.container .abmessung .abmessung_left p {
margin: auto;
padding-top: 20px; }
.container .abmessung .abmessung_right img {
width: 300px;
display: block;
margin: auto;
padding: 0; } }
@media only screen and (max-width: 500px) {
.container .abmessung {
min-height: 550px; }
.container .abmessung .abmessung_left, .container .abmessung .abmessung_right {
float: none;
margin: auto;
height: auto;
width: 100%; }
.container .abmessung .abmessung_left h1 {
width: 90%;
margin: auto;
padding: 20px 0; }
.container .abmessung .abmessung_left p {
margin: auto;
padding: 0 0 20px;
width: 90%; }
.container .abmessung .abmessung_right img {
width: 300px;
display: block;
margin: auto;
padding: 0; } }
@media only screen and (max-width: 1200px) {
.container .about .about_content {
width: 100%;
margin-left: 0;
box-sizing: border-box;
padding: 0 20px; } }
@media only screen and (max-width: 900px) {
.container .payments h1 {
padding-left: 0;
text-align: center; }
.container .payments .payments_methods {
padding-left: 0;
flex-wrap: wrap;
justify-content: center; }
.container .payments .payments_methods img:last-child {
padding-bottom: 20px; } }
@media only screen and (min-width: 381px) and (max-width: 750px) {
.container .payments h1 {
padding-bottom: 40px; } }
@media only screen and (max-width: 380px) {
.container .payments h1 {
font-size: 30px;
padding-bottom: 40px; } }
@media only screen and (max-width: 1050px) {
.container .shipping .shipping_ruck {
width: 100%; }
.container .shipping .shipping_ruck h1 {
width: 90%;
padding: 20px 0;
margin: auto; }
.container .shipping .shipping_ruck p {
padding: 0;
width: 90%;
padding-bottom: 20px;
margin: auto; } }
@media only screen and (max-width: 800px) {
.container .shipping h1.shipping_methods {
font-size: 26px;
padding: 50px 0;
text-align: center; }
.container .shipping p.shipping_methods {
padding: 0;
width: 80%;
margin: auto;
text-align: center; }
.container .shipping .shipping_methods {
width: 80%;
margin: auto;
padding: 34px 0 79px;
justify-content: center;
flex-wrap: wrap; }
.container .shipping .shipping_methods img {
padding: 20px 0; } }