body {
font-family: Roboto, Helvetica, Arial;
background-color: #F3F4F6;
}
header {
position: relative;
overflow: hidden;
}
header img {
max-width: 100%;
height: auto;
margin-top: 10px;
margin-left: 50%;
transform: translateX(-50%);
}
#img1 {
display: block;
}
#img2 {
display: none;
}
.menu {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
grid-gap: 20px;
}
.logo {
width: 134px;
height: 50px;
background-image: url('logo.png');
}
.menuButton1 {
cursor: pointer;
margin-top: 5px;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border-radius: 10px;
background-color: darkblue;
color: white;
text-align: center;
}
.menuButton2 {
cursor: pointer;
margin-top: 5px;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border-radius: 10px;
background-color: darkblue;
color: white;
text-align: center;
}
@media screen and (max-width: 600px) {
#img1 {
display: none;
}
#img2 {
display: block;
}
.menuButton1 {
margin-top: 0px;
margin-bottom: 0px;
}
.menuButton2 {
margin-top: 0px;
margin-bottom: 20px;
}
}
.container {
width: 90%;
margin: 0 auto;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
.container div {
text-align: center;
}
.card {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 50px 70px 70px 1fr 50px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.1);
padding: 10px;
background-color: #fafbfc;
}
.intro {
width: 90%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.header
{
padding: 10px 30px 10px 40px;
font-size: 20px;
}
.flag {
}
/* https://nucleoapp.com/svg-flag-icons */
.denmark {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.france {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.uk {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.usa {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.switzerland {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.germany {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.luxembourg {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.philippines {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.india {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.malta {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.czechrepublic {
width: 40px;
height: 30px;
float: right;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8,');
}
.remuneration {
margin-top: 10px;
padding: 10px 30px 10px 40px;
font-size: 14px;
background-position: 4px center;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8, ');
}
.blue {
padding: 10px;
border-radius: 10px;
background-color: darkblue;
color: white;
}
.description {
margin-top: 10px;
padding: 10px 40px 10px 50px;
font-size: 14px;
line-height: 20px;
background-position: 4px center;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8, ');
}
.timing {
margin-top: 10px;
padding: 10px 30px 10px 40px;
font-size: 14px;
background-position: 4px center;
background-repeat: no-repeat;
background-size: auto auto;
background-image: url('data:image/svg+xml;utf8, ');
}
.resume {
position: relative;
overflow: hidden;
width: 90%;
margin: 0 auto;
margin-top: 60px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
.resume img {
max-width: 100%;
height: auto;
margin-left: 50%;
transform: translateX(-50%);
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.1);
}
.bold {
font-weight: bold;
font-size: 20px;
}
.tandcbanner {
cursor: pointer;
margin-top: 50px;
padding: 10px;
border-radius: 10px;
background-color: darkblue;
color: white;
text-align: center;
font-size: 14px;
}
.tandc {
margin-top: 20px;
padding: 5%;
font-size: 14px;
}