html, body{
width:100%;
}
img[alt~="Charalambos-mob"],img[alt~="Daphne-mob"],img[alt~="Michalis-mob"],img[alt~="Tasos-mob"] {
display:none;
}
img[alt~="Charalambos"],img[alt~="Daphne"],img[alt~="Michalis"],img[alt~="Tasos"] {
display:block;
}
@media only screen and (max-width: 500px){
img[alt~="Charalambos-mob"],img[alt~="Daphne-mob"],img[alt~="Michalis-mob"],img[alt~="Tasos-mob"] {
display:block;
}
img[alt~="Charalambos"],img[alt~="Daphne"],img[alt~="Michalis"],img[alt~="Tasos"] {
display:none;
}
}
#OP-Container{
display:grid;
grid-template-rows:repeat(2, minmax(30px, auto));
grid-template-columns:repeat(5, minmax(30px, auto));
grid-column-gap:5%;
max-width:90%;
margin:5% auto;
}
@media only screen and (max-width: 1024px){
#OP-Container{
max-width:90%;
margin:5% auto;
grid-column-gap:3%;
}
}
@media only screen and (max-width: 1100px){
#OP-Container{
grid-template-columns:repeat(2, minmax(30px, auto));
grid-template-rows:repeat(2, minmax(30px, auto));
grid-column-gap:5%;
}
}
@media only screen and (max-width: 500px){
#OP-Container{
grid-template-columns:repeat(1);
grid-template-columns:100%;
}
}
.OP-img{
width:100%;
height:100%;
padding-bottom:4%;
display:block;
}
.OP-subOne, .OP-subTwo, .OP-subThree,.OP-subFour,.OP-subFive {
width:100%;
height:auto;
margin-bottom:2%;
display:block;
}
.OP-mainOne, .OP-mainTwo, .OP-mainThree, .OP-mainFour, .OP-mainFive{
position:relative;
display:block;
}
.OP-title{
font-size:1.4vw;
position:absolute;
top:3%;
left:3%;
margin:0 auto;
}
@media only screen and (max-width: 1024px){
.OP-title{
font-size:2vw;
}
}
@media only screen and (max-width: 800px){
.OP-title{
font-size:2.8vw;
}
}
@media only screen and (max-width: 500px){
.OP-title{
font-size:5vw;
}
}
.OP-txt{
display:block;
margin-bottom:4%;
font-size:1vw;
}
@media only screen and (max-width: 1024px){
.OP-txt{
font-size:1.5vw;
}
}
@media only screen and (max-width: 800px){
.OP-txt{
font-size:2.5vw;
}
}
@media only screen and (max-width: 500px){
.OP-txt{
font-size:4vw;
}
}
/*GRID POSITIONS*/
@media only screen and (max-width: 1100px){
/*.OP-mainKat, .OP-mainNik, .OP-mainNad, .OP-mainChar, .OP-mainMic, .OP-mainDap, .OP-mainTas{
display: flex;
align-items: center;
justify-content: left;
}*/
#OP-Container{
align-items: end;
}
.OP-mainOne{
grid-column:1 / 2;
grid-row:1 / 2;
}
.OP-mainTwo{
grid-column:2/ 3;
grid-row:2 / 3;
}
.OP-mainThree{
grid-column:1 / 2;
grid-row:3 / 4;
}
.OP-mainFour{
grid-column:2/ 3;
grid-row:4 / 5;
}
.OP-mainFive{
grid-column:1 / 2;
grid-row:5 / 6;
}
}
@media only screen and (max-width: 500px){
.OP-mainOne{
grid-column:1 / 2;
grid-row:1 / 2;
}
.OP-subOne{
grid-column:1 / 2;
grid-row:2 / 3;
padding-bottom:5%;
}
.OP-mainTwo{
grid-column:1/ 2;
grid-row:3 / 4;
}
.OP-subTwo{
grid-column:1/ 2;
grid-row:4 / 5;
padding-bottom:5%;
}
.OP-mainThree{
grid-column:1 / 2;
grid-row:5 / 6;
}
.OP-subThree{
grid-column:1 / 2;
grid-row:6 / 7;
padding-bottom:5%;
}
.OP-mainFour{
grid-column:1/ 2;
grid-row:7 / 8;
}
.OP-subFour{
grid-column:1/ 2;
grid-row:8 / 9;
padding-bottom:5%;
}
.OP-mainFive{
grid-column:1/ 2;
grid-row:9 / 10;
}
.OP-subFive{
grid-column:1/ 2;
grid-row:10 / 11;
padding-bottom:5%;
}
}