html, body {
height: 100%;
background-size: cover;
background-position: center;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 30s slidy infinite;
}
.wstep {
margin-bottom: 0px;
}
.naglowek {
color: #FF6600;
margin: auto;
position: absolute;
width: 800px;
height: 200px;
top: 0px; bottom: 600px; right: 900px; left: 0px;
text-align: left;
font-size: 60px;
box-shadow: 10px 10px 10px rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
font-size: 45px;
font-weight: bolder;
letter-spacing: -2px;
}
.formularzkontaktowy{
width: 500px;
background-color: rgba(255,255,255,0.2);
border-radius: 20px;
box-shadow: #000000;
top: 600px;
left: 500px;
transform: translate(-50%,-50%);
position: absolute;
}
form
{
margin: 35px;
}
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 10px;
outline: none;
}
.textarea-field{
height: 150px;
padding-top: 10px;
}
.pwyslij{
border-radius: 20px;
color:#000000;
margin-top: 18px;
padding: 10px;
background-color: springgreen;
font-size: 12px;
border: none;
cursor: pointer;
}
.title {
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 40px;
font-weight: bold;
}
.heading {
color: white;
margin: auto;
position: absolute;
width: 400px;
height: 600px;
top: 0px; bottom: 100px; right: 0px; left: 700px;
text-align: center;
font-size: 60px;
border-radius: 20px;
background-color: rgba(255,255,255,0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
letter-spacing: -1px;
}
.przycisk1 {
color: #ffffff;
background-color: rgba(0, 0, 0, 0);
font-family: 'Montserrat', sans-serif;
width: 185px;
height: 60px;
border-radius: 10px;
border: 3px solid #ff670193;
font-size: 25px;
transition: background-color 1000ms; color 1000ms;
font-weight: bold;
letter-spacing: -1px;
}
.przycisk2 {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
font-family: 'Montserrat', sans-serif;
width: 185px;
height: 60px;
border-radius: 10px;
border: 3px solid #ff670193;
font-size: 20px;
transition: background-color 1000ms; color 1000ms;
letter-spacing: -1px;
font-weight: bold;
}
.przycisk3 {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
font-family: 'Montserrat', sans-serif;
width: 185px;
height: 60px;
border-radius: 10px;
border: 3px solid #ff670193;
font-size: 20px;
transition: background-color 1000ms; color 1000ms;
letter-spacing: -1px;
font-weight: bold;
}
.przycisk4 {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
font-family: 'Montserrat', sans-serif;
width: 185px;
height: 60px;
border-radius: 10px;
border: 3px solid #ff670193;
font-size: 20px;
transition: background-color 1000ms; color 1000ms;
letter-spacing: -1px;
font-weight: bold;
}
.przycisk1:hover{
background-color: rgba(245, 245, 245, 0.829);
color: #222222;
transition: background-color 1000ms; color 1000ms;
}
.przycisk2:hover{
background-color: rgba(245, 245, 245, 0.829);
color: #222222;
transition: background-color 1000ms; color 1000ms;
}
.przycisk3:hover{
background-color: rgba(245, 245, 245, 0.829);
color: #222222;
transition: background-color 1000ms; color 1000ms;
}
.przycisk4:hover{
background-color: rgba(245, 245, 245, 0.829);
color: #222222;
transition: background-color 1000ms; color 1000ms;
}
@media screen and (max-width: 1650px) {
html, body {
height: 100%;
background: linear-gradient(315deg, #ff670193, #000000);
}
.wstep {
font-family: 'Montserrat', sans-serif;
font-size: smaller;
}
.naglowek {
width: 40%;
height: 20%;
position: center;
left: 0%; bottom: 60%;
box-shadow: 10px 10px 10px rgb(255, 255, 255);
}
.title{
width: 80%;
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 30px;
font-weight: bold;
}
.heading {
width: 30%;
top: 10%; bottom: 0%; right: 0%; left: 40%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
}
.przycisk1 {
width: 80%;
}
.przycisk2 {
width: 80%;
}
.przycisk3 {
width: 80%;
}
.przycisk4 {
width: 80%;
}
.formularzkontaktowy{
width: 40%;
top: 65%; bottom: 0%; right: 0%; left: 30%;
width: 30%;
height: 60%;
background-color: rgba(255,255,255,0.2);
}
.input-field{
width: 80%;
}
}
@media screen and (max-width: 1366px) {
html, body {
height: 100%;
background: linear-gradient(315deg, #ff670193, #000000);
}
.wstep {
font-size: 60%;
font-family: 'Montserrat', sans-serif;
}
.naglowek {
width: 37%;
height: 22%;
position: center;
left: 5%; bottom: 60%;
box-shadow: 10px 10px 10px rgb(255, 255, 255);
}
.title{
width: 80%;
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 60%;
font-weight: bold;
}
.heading {
width: 25%;
height: 100%;
top: 10%; left: 60%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
}
.przycisk1 {
width: 80%;
}
.przycisk2 {
width: 80%;
}
.przycisk3 {
width: 80%;
}
.przycisk4 {
width: 80%;
}
.formularzkontaktowy{
top: 80%; left: 28%;
width: 25%;
height: 80%;
background-color: rgba(255,255,255,0.2);
}
.input-field{
width: 80%;
}
}
@media screen and (max-width: 1080px) {
html, body {
height: 100%;
background: linear-gradient(315deg, #ff670193, #000000);
}
.wstep {
font-size: 70%;
font-family: 'Montserrat', sans-serif;
}
.naglowek {
width: 55%;
height: 25%;
position: center;
left: 24%; bottom: 70%;
box-shadow: 10px 10px 10px rgb(255, 255, 255);
}
.title{
width: 80%;
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 70%;
font-weight: bold;
}
.heading {
width: 33%;
top: 100%; bottom: ; right: 0px; left: 400px;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
}
.przycisk1 {
width: 80%;
}
.przycisk2 {
width: 80%;
}
.przycisk3 {
width: 80%;
}
.przycisk4 {
width: 80%;
}
.formularzkontaktowy{
width: 30%;
height: 80%;
top: 91%; left: 25%;
}
.input-field{
width: 80%;
}
}
@media screen and (max-width: 930px) {
html, body {
height: 100%;
background: linear-gradient(315deg, #ff670193, #000000);
}
.wstep {
font-size: 70%;
font-family: 'Montserrat', sans-serif;
}
.naglowek {
width: 65%;
height: 25%;
position: center;
left: 20%; bottom: 65%;
box-shadow: 10px 10px 10px rgb(255, 255, 255);
}
.title{
width: 80%;
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 70%;
font-weight: bold;
}
.heading {
width: 40%;
top: 90%; left: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
}
.przycisk1 {
width: 80%;
}
.przycisk2 {
width: 80%;
}
.przycisk3 {
width: 80%;
}
.przycisk4 {
width: 80%;
}
.formularzkontaktowy{
width: 35%;
height: 80%;
top: 90%; left: 27%;
}
.input-field{
width: 80%;
}
}
@media screen and (max-width: 414px){
html, body {
height: 100%;
background: linear-gradient(315deg, #ff670193, #000000);
}
.wstep {
font-size: 60%;
font-family: 'Montserrat', sans-serif;
}
.naglowek {
width: 100%;
position: center;
left: 70px; bottom: 700px;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0);
}
.title{
width: 60%;
color:rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
margin: 0%;
font-size: 50%;
font-weight: bold;
}
.heading {
width: 60%;
height: 70%;
top: 250px; bottom: 0px; right: 0px; left: 0px;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgb(0, 0, 0);
}
.przycisk1 {
width: 80%;
}
.przycisk2 {
width: 80%;
}
.przycisk3 {
width: 80%;
}
.przycisk4 {
width: 80%;
}
.formularzkontaktowy{
width: 60%;
height: 55%;
top: 130%; left: 50%;
}
.input-field{
width: 90%;
}
}