﻿@font-face {
    font-family:"Tide Sans 400";
    src:url('_font/Kyle Wayne Benson - Tide Sans 400 Lil Dude.otf') format('truetype');
}
@font-face {
    font-family:"Tide Sans 600";
    src:url('_font/Kyle Wayne Benson - Tide Sans 600 Bunny.otf') format('truetype');
}
@font-face {
    font-family:"Tide Sans 500";
    src:url('_font/Kyle Wayne Benson - Tide Sans 500 Dudette.otf') format('truetype');
}


body {
	background-color: #ffffff;
	color: #000000;
	font-family:'Tide Sans 400', sans-serif;
	font-size: 16px;
}
a:link, #offCont a:visited, a:hover, a:active {
	color: #000000;
}
#offCont {
	overflow: hidden;
	margin: 15px auto 0;
	text-align: left;
	max-width:690px;
	background-color:#fff;
	width:100%;
}

h2 {
    color: #C81F26;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 17px;
    padding-top: 50px;
    text-align: center;
    margin-top: 0px;
    padding-bottom: 20px;
}

h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 56px;
    padding-top: 50px;
    margin-top: 0px;
}

#flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}


#box1 {
    padding: 20px 30px 50px;
    background: #E7E7E7;
}


#JobTitle {     
	font-size:40px; 
	text-align: center; 
	font-weight: 600; 
	line-height: 115%;;
	color:#fff;
    background: #c61f26;
    padding: 10px;
    display: inline-block;
    font-style: normal;
    max-width: 450px;
    margin-bottom: 30px;
}
#WorkPlace {
	text-align: center;
	margin-top:5px;
    width: 50%;
    line-height: 130%;
}

#CompanyDescription {
    text-align: center;
	margin-top:5px;
    width: 50%;
    line-height: 130%;
}

#PositionDescription {
    padding: 0px 40px 50px;
}

#PositionDescription h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 56px;
    padding-top: 50px;
    margin-top: 0px;
}

#PositionDescription .rectangle1 {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 5px solid #C81F26;
  margin: -50px 0 0 120px;
  position: absolute;
}

#PositionDescription .rectangle2 {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: #C81F26;
  margin: -110px 0 0 591px;
  position: absolute;
}

#Requirements {
    padding: 0px 40px 20px;
    background: #eaebec;
}

#Requirements h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 56px;
    padding-top: 50px;
    margin-top: 0px;
}

#Requirements .rectangle1 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #FFF;
    margin: -60px 0 0 115px;
    position: absolute;
}

#Opportunities {
    padding: 0px 40px 50px;
}

#Opportunities h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 56px;
    padding-top: 50px;
    margin-top: 0px;
}

#Opportunities .rectangle1 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #C81F26;
    margin: -115px 0 0 111px;
    position: absolute;
}

#Opportunities .rectangle2 {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 5px solid #C81F26;
    margin: -5px 0 0 476px;
    position: absolute;
}


#Benefity {
    padding: 0px 40px 50px;
    background: url(_res2023/bg3.png) top center no-repeat #f4f4f4;
    color: #313f46;
}

#Benefity h3 {
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 56px;
    padding-top: 50px;
    margin-top: 0px;
}

#Benefity .rectangle1 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #C81F26;
    margin: -115px 0 0 111px;
    position: absolute;
}

#Benefity .rectangle2 {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 5px solid #C81F26;
    margin: -5px 0 0 476px;
    position: absolute;
}


#rekrutacja {
    padding: 0px 40px 0px;
}

#rekrutacja h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    padding-top: 50px;
    margin-bottom: 11px;
    margin-top: 0px;
}

#rekrutacja h4 {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-top: 0px;
    margin-bottom: 30px;
}

#rekrutacja .rectangle1 {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 5px solid #C81F26;
    margin: -225px 0 0 73px;
    position: absolute;
}

#rekrutacja .rectangle2 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #E7E7E7;
    margin: -125px 0 0 614px;
    position: absolute;
}

#etapy {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 50px;
    
}

.text {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


#etapy .text h4 {
    color: #C81F26;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 15px;
}


.text { 
    display: flex; 
    flex-direction: inherit; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 20px 160px 0; 
} 

.text li { 
    margin-left: 0; 
    list-style-type: none; 
    display: block; 
    width: 100%; 
    text-align: left; 
    padding: 20px 0 15px 75px; 
    background-size: 50px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    color: #313f46;
    margin-bottom: 40px;
} 

#bgk {
    padding: 0px 40px 20px;
    background: #f0f1f2;
}

#bgk h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    padding-top: 50px;
    margin-bottom: 73px;
    margin-top: 0px;
}

#bgk .rectangle1 {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    background: #C81F26;
    margin: -175px 0 0 92px;
    position: absolute;
}

#bgk .rectangle2 {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    background: #FFF;
    margin: -40px 0 0 614px;
    position: absolute;
}

#flex_1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#flex_2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#zd1 {
    width: 25%
}

#text_1 {
    width: 68%;
}

#text_1 h1 {
    color: #C81F26;
    text-align: left;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}

#text_1 h4 {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

#linia {
    border-top: 2px solid #C81F26;
    margin: 40px 0px;
    width: 100%;
}

#media {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

#media .rectangle1 {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 5px solid #C81F26;
    margin: -150px 0 0 93px;
    position: absolute; 
} 

#med1 {
    width: 46%;
    margin-left: 25px;
}

#linia_2 {
    border-bottom: 3px solid #C81F26;
    max-width: 300px;
    margin-top: 30px;
}

h5 {
    color: #C81F26;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-top: 16px;
    margin-bottom: 12px;
    padding-left: 15px;
    text-align: left;
    margin-left: 0px;
    margin-right: 0px;
}

#media #med1 p {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-top: 16px;
    margin-bottom: 24px;
    padding-left: 15px;
    padding-right: 60px;
}

#bottom {
    background: #eaebec;
    padding: 0px 40px 40px;
}

#bottom h3 {
    color: #C81F26;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    padding-top: 50px;
    margin-bottom: 11px;
    margin-top: 0px;
}

#bottom h4 {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-top: 0px;
    margin-bottom: 30px;
}

#bottom .rectangle1 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #C81F26;
    margin: -20px 0 0 55px;
    position: absolute;
} 

#bottom .rectangle2 {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 5px solid #FFF;
    margin: -125px 0 0 590px;
    position: absolute;
} 


.ikony_social { 
    display: flex; 
    flex-direction: inherit; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 20px 0 0; 
} 

.ikony_social li { 
    margin-left: 0; 
    list-style-type: none; 
    display: block; 
    width: 20%; 
    text-align: center; 
    padding: 40px 0 30px 0; 
    background-size: 70px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
} 


.ico1 { 

    background: url(_res2023/nr_1.png) no-repeat left center;
} 

.ico2 { 

    background: url(_res2023/nr_2.png) no-repeat left center;
} 
.ico3 { 

    background: url(_res2023/nr_3.png) no-repeat left center;
} 
.ico4 { 

    background: url(_res2023/nr_4.png) no-repeat left center;
} 
.ico5 { 

    background: url(_res2023/nr_5.png) no-repeat left center;
} 

.icons { 
    display: flex; 
    flex-direction: inherit; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 20px 0 0; 
} 

.icons li { 
    margin-left: 0; 
    list-style-type: none; 
    display: block; 
    width: 27%; 
    text-align: center; 
    padding: 100px 0 30px 0; 
    background-size: 70px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;

} 

.icon1 { 

    background: url(_res2023/icon4_cze.png) no-repeat top center;
} 

.icon2 { 

    background: url(_res2023/icon20_cze.png) no-repeat top center;
} 
.icon3 { 

    background: url(_res2023/icon22_cze.png) no-repeat top center;
} 
.icon4 { 

    background: url(_res2023/icon19_cze.png) no-repeat top center;
} 
.icon5 { 

    background: url(_res2023/icon28_cze.png) no-repeat top center;
} 
.icon6 { 

    background: url(_res2023/icon7_cze.png) no-repeat top center;
} 
.icon7 { 

    background: url(_res2023/icon5_cze.png) no-repeat top center;
} 
.icon8 { 

    background: url(_res2023/icon14_cze.png) no-repeat top center;
} 
.icon9 { 

    background: url(_res2023/icon16_cze.png) no-repeat top center;
} 
.icon10 { 

    background: url(_res2023/icon21_cze.png) no-repeat top center;
} 
.icon11 { 

    background: url(_res2023/icon12_cze.png) no-repeat top center;
} 
.icon12 { 

    background: url(_res2023/icon29_cze.png) no-repeat top center;
} 
.icon13 { 

    background: url(_res2023/icon18_cze.png) no-repeat top center;
} 
.icon14 { 

    background: url(_res2023/icon15_cze.png) no-repeat top center;
} 
.icon15 { 

    background: url(_res2023/icon10_cze.png) no-repeat top center;
} 
.icon16 { 

    background: url(_res2023/icon1_cze.png) no-repeat top center;
} 
.icon17 { 

    background: url(_res2023/icon25_cze.png) no-repeat top center;
} 
.icon18 { 

    background: url(_res2023/icon24_cze.png) no-repeat top center;
} 

#ReferenceNumber {
	text-align: center;
	margin-top:5px;
}
#offCont ul {
	list-style-type: disc;
	padding-left: 20px;
	list-style-position: outside;
    border-left: 2px solid #c61f26;
}
#offCont ul li {
    font-family: 'Tide Sans', sans-serif;
    list-style-image: url(_res2023/li.png);
    line-height: normal;
    margin-left: -10px;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    font-weight: 400;
}
#offCont .button {
    font-size:18px;
    display: block;
    line-height:36px;
    margin: 30px auto 0px;
    text-align: center;
    text-decoration: none;
    border:none;
	cursor: pointer;
}
#Clause {
	font-size:10px;
	text-align:justify;
}

@media all and (max-width:640px) {

#med1 {
    width: 100%;
    margin-left: 25px;
}      
    

@media all and (max-width:490px) {
    
.text { 
    display: flex; 
    flex-direction: inherit; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 20px 50px 0; 
} 

.text li { 
    margin-left: 0; 
    list-style-type: none; 
    display: block; 
    width: 100%; 
    text-align: center; 
    padding: 75px 0 15px 0px; 
    background-size: 50px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    color: #C81F26;
}    
    
.ico1 { 

    background: url(_res2023/nr_1.png) no-repeat top center;
} 

.ico2 { 

    background: url(_res2023/nr_2.png) no-repeat top center;
} 
.ico3 { 

    background: url(_res2023/nr_3.png) no-repeat top center;
} 
.ico4 { 

    background: url(_res2023/nr_4.png) no-repeat top center;
} 
.ico5 { 

    background: url(_res2023/nr_5.png) no-repeat top center;
} 
    
#WorkPlace {
	text-align: center;
	margin-top:5px;
    width: 100%;
    line-height: 130%;
}

#CompanyDescription {
    text-align: center;
	margin-top:5px;
    width: 100%;
    line-height: 130%;
}
    
.icons { 
    display: flex; 
    flex-direction: inherit; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 20px 0 0; 
} 

.icons li { 
    margin-left: 0; 
    list-style-type: none; 
    display: block; 
    width: 50%; 
    text-align: center; 
    padding: 100px 0 30px 0; 
    background-size: 70px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;

}
    
#rekrutacja .rectangle1 {
    display: none;
}   
    
#bgk .rectangle1 {
    display: none;
} 
       
    
@media all and (max-width:380px) {    

#zd1 {
  width: 25%;
  margin-left: 100px;
}
    
#flex_1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}
    
#flex_2 {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
}    

#text_1 {
    width: 100%;
}    
    
}
    
  

}
