html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, *:before, *:after {
box-sizing: inherit;
}
@font-face {
font-family: Futura;
src: url(https://responsiblegaming.mrmworldwide.gr/css/fonts/PFFuturaNeuBookObl-Regular.otf);
}
@font-face {
font-family: Futura Bold;
src: url(https://responsiblegaming.mrmworldwide.gr/css/fonts/PFFuturaNeu-Bold_0.otf);
}
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
body {
padding: 0px;
margin: 0px;
font-family: Futura, sans-serif;
font-size: 1.2em;
color: #434343;
}
::-webkit-input-placeholder { /* Edge */
color: black;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: black;
}
::placeholder {
color: black;
}
#startQuestions, #startQuestions3, #startQuestions2, .btnQuestion1, .btnQuestion2, #nextQuestion1, .btnQuestion3, .btnQuestion4, #nextQuestion2, .btnQuestion5, .btnQuestion6, #nextQuestion3, .btnQuestion7, .btnQuestion8, #nextQuestion4, .btnQuestion9, .btnQuestion10, #nextQuestion5, .sbmt_btn, #ipostiriksiBtn {
cursor: pointer;
}
/*
#startQuestions2:hover, #startQuestions3:hover, #startQuestions:hover, .btnQuestion1:hover, .btnQuestion2:hover, #nextQuestion1:hover, .btnQuestion3:hover, .btnQuestion4:hover, #nextQuestion2:hover, .btnQuestion5:hover, .btnQuestion6:hover, #nextQuestion3:hover, .btnQuestion7:hover, .btnQuestion8:hover, #nextQuestion4:hover, .btnQuestion9:hover, .btnQuestion10:hover, #nextQuestion5:hover, .sbmt_btn:hover, #ipostiriksiBtn:hover{
background-color: red;
}
*/
#closeBtn, #videoFirst, #videoSecond, #videoThird, #videoFourth
{
cursor:pointer;
}
#startQuestions:hover{
background: #ffd900d5;
transition: background 0.25s ease-in-out;
}
#startQuestions3:hover{
background: #fe4701;
transition: background 0.25s ease-in-out;
}
.allQuestions{
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
padding: 2%;
font-size: 1.2em;
margin-bottom: 5px;
color: #fff;
}
/*------------------------------*\
Video background
\*------------------------------*/
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.videoLiquid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background-position: center center;
background-repeat: no-repeat;
}
.intro {
background-image: url(/images/Xaneis_tin_Mpala.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
transform-origin: center;
transition: all 40s ease-in;
}
.intronew {
background-size: 200%;
}
.fab:hover{
color: #ffd800 !important;
transition:color 0.25s ease-in-out;
}
/*------------------------------*\
Slider
\*------------------------------*/
#slidy {
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
div#slider {
width: 88%;
overflow: hidden;
margin: 0 auto;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
transition: 1s;
cursor: pointer;
}
div#slider figure img {
width: 20%;
float: left;
}
#slidy button {
font-size: 2rem;
border: none;
display: inline-block;
background: #fff;
color: #9f9f9f;
outline: none;
cursor: pointer;
transition: .3s background;
}
#slidy button:hover {
color: #ffd700;
background: #fff;
}
#slidy button[disabled] {
background: #fff;
cursor: auto;
}
/*------------------------------*\
Custom Css
\*------------------------------*/
.aweicon {
color: #fff;
font-size: 24px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
.aweicon:hover {
color: #ffd800;
}
.agreeTexting{
padding-top: 50px;
font-family: 'Futura', sans-serif;
color: #fff;
font-size:11px;
line-height: 13px;
}
.agreeTexting a{
color: #fff;
text-decoration: underline;
}
.agreeTexting a:hover {
color: #ffd800;
}
.spanCkeck, .spanCkeck2 {
float: none;
display: inline-block;
width: inherit;
color: white;
font-size: 14px;
}
/*------------------------------*\
The basics
\*------------------------------*/
h1 {
font-family: 'Futura Bold', sans-serif;
font-size:20px;
color: #ffd800;
font-weight: 400;
letter-spacing:2px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 10px 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
h2 {
font-family: 'Futura', sans-serif;
font-size:12px;
color: #fff;
font-weight: 400;
letter-spacing:2px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
h3 {
font-family: 'Futura', sans-serif;
font-size:12px;
color: #fff;
font-weight: 400;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
h5 {
font-family: 'Futura', sans-serif;
font-size:17px;
color: #ffd800;
font-weight: 400;
letter-spacing:1px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 5px 0px;
margin: 0px;
}
a { color: #ffd800; text-decoration: none;}
a:hover { color: #26349c; }
a > h5 {
font-family: 'Futura', sans-serif;
font-size:17px;
text-align: center;
color: #ffd800;
font-weight: 400;
letter-spacing:1px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 5px 0px;
margin: 0px;
}
p.error {
display: none;
}
.error{
border: solid 4px #FF0000 !important;
border-radius: 4px !important;
}
/*------------------------------*\
Grid System
\*------------------------------*/
.gridrow,
.gridcolumn {
box-sizing: border-box;
}
.gridrow:before,
.gridrow:after {
content: "";
display: table;
}
.gridrow:after {
clear: both;
}
.gridcolumn {
position: relative;
float: left;
display: block;
}
.gridcolumn + .gridcolumn {
margin-left: 0%;
}
.gridcolumn-1 {
width: 8.33333333333%;
}
.gridcolumn-2 {
width: 16.6666666666%;
}
.gridcolumn-3 {
width: 24.9999999999%;
}
.gridcolumn-4 {
width: 33.3333333333%;
}
.gridcolumn-5 {
width: 41.6666666666%;
}
.gridcolumn-6 {
width: 50%;
}
.gridcolumn-7 {
width: 58.3333333333%;
}
.gridcolumn-8 {
width: 66.6666666666%;
}
.gridcolumn-9 {
width: 74.6%;
}
.gridcolumn-10 {
width: 83.3333333333%;
}
.gridcolumn-11 {
width: 91.5333333333%;
}
.gridcolumn-12 {
width: 100%;
margin-left: 0;
}
@media only screen and (max-width: 1001px) {
#logo {
margin-bottom: 2%;
}
.elementxxx {
margin-left: -6%;
}
.gridcolumn-1,
.gridcolumn-2,
.gridcolumn-3,
.gridcolumn-4,
.gridcolumn-5,
.gridcolumn-6,
.gridcolumn-7,
.gridcolumn-8,
.gridcolumn-9,
.gridcolumn-10,
.gridcolumn-11,
.gridcolumn-12 {
float: none;
width: auto;
text-align: left !important;
}
.gridcolumn + .gridcolumn {
margin-left: 0;
text-align: left !important;
}
}
/*-- Styling --*/
/* Image Layout For Smaller Screens */
.imgx {
display: block;
max-width: 100%;
}
.gridcolumn {
border: 0px solid #4ed7ff;
padding: 1px;
min-height: 0px;
}
.gridrow {
margin-bottom: 0px;
}
.gridrow:last-child {
margin-bottom: 0;
}
.gridcolumn .gridcolumn {
border-color: #4ed7ff;
}
.spanVideosTItle{
color:black;
font-family:'Futura', sans-serif;
}
@media only screen and (max-width: 1001px) {
.gridrow {
margin-bottom: 0px;
}
.gridcolumn {
margin-bottom: 0px;
text-align: center;
}
.gridrow:last-child .gridcolumn:last-child {
margin-bottom: 0px;
text-align: center;
}
.imgx {
display: block;
/* margin: 0 auto; */
max-width: 100%;
position: relative;
}
}
/*-- middle allignment --*/
.element {
position: relative;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
.eleme {
position: relative;
top: 20%;
text-align: center;
transform: translateY(-50%);
}
/*------------------------------*\
Eat your Cookies
\*------------------------------*/
.cookie-policy {
font-size: 11px;
position: fixed;
z-index: 9999;
bottom: 0px;
display: flex;
padding: 2px;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
align-items: center;
box-sizing: border-box;
}
.cookie-policy__content {
flex-grow: 1;
padding: 2px 10px;
}
.cookie-policy__continue {
padding: 5px 10px;
margin-right: 15px;
border: 1px solid white;
border-radius: 10px;
text-decoration: none;
color: #fff;
}
.cookie-policy__continue:focus, .cookie-policy__continue:hover {
background-color: white;
color: #333;
}
.cookie-policy__learn {
display: block;
flex-shrink: 0;
color: #ccc;
padding-right: 10px;
}
.cookie-policy__learn:focus, .cookie-policy__learn:hover {
color: #fff;
}
/*------------------------------*\
Form Styles
\*------------------------------*/
.input_style {
max-width: 356px;
border: solid 1px #c9c9c9;
outline: none;
padding: 15px;
text-align: center;
margin: 5px auto;
}
/*input:invalid {
background-color: rgba(255, 0, 0, 0.3);
}*/
.sbmt_btn {
min-width: 30%;
cursor: pointer;
letter-spacing: 2px;
font-size: 1em;
font-weight: 400;
padding: 1em;
background-color: #fff;
}
.sbmt_btn:hover {
background-color: #ffe045;
}
.checkbox_style {
width: 30px;
height: 30px;
margin: 0px 20px 0% 0px;
background-color: #fff;
float: left;
}
.form_space {
margin-top: 2%;
}
/*------------------------------*\
Menu
\*------------------------------*/
.mmnbtn {
text-decoration: none;
width: 100%;
text-align: center;
margin: 0 auto;
color: #000;
margin-bottom: 20px;
}
.mmenu {
width: 100%;
margin: 0;
padding: 0;
/*opacity: 0;*/
display:none;
list-style: none;
text-align: center;
-webkit-transform: translateX(-100%) rotateX(40deg);
transform: translateX(-100%) rotateX(40deg);
transition: all 400ms cubic-bezier(1, -0.4, 0.44, 0.985);
}
.mmenu li {
font-size: 1.5rem;
cursor: pointer;
}
.mmenu a {
display: block;
color: #000;
padding: 10px;
background-color: #ffd800;
text-decoration: none;
margin: 5px;
font-size: 14px;
}
.mmenu a:hover {
color: #000;
background-color: #fff;
}
.mopen {
top: -10px;
/*opacity: 1;*/
display:block;
-webkit-transform: perspective(200px) translateX(0) rotateX(0);
transform: perspective(200px) translateX(0) rotateX(0);
}
.menuclass {
position: absolute; z-index: 9999; margin: 0 auto; width: 800px; float: right; text-align: right;left: 0; right: 0; margin-top: 25px; pointer-events: none;
}
.success_message {
position: fixed; z-index: 100; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); display: none;
}
.question1div {
display: none; background-image: url(../images/opap-bg-non.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.question2div {
display: none; background-image: url(../images/opap-bg-non.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.question3div {
display: none; background-image: url(../images/opap-bg-non.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.question4div {
display: none; background-image: url(../images/opap-bg-non.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.question5div {
display: none; background-image: url(../images/opap-bg-non.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.thank_youdiv {
display: none; background-image: url(../images/Xaneis_tin_Mpala.jpg); background-position: top; background-size: cover; background-repeat: no-repeat; background-color: #111111;
}
.thetotalheight {
height: 93vh;
}
.backGr1, .backGr2, .backGr3 {
padding: 2%;
height: 65vh;
}
#showFirstAnswer {
font-size: 19px;
}
.thedim {
width: 100%;
height: 100vh;
}
@media screen and (max-width: 1400px) {
.form_space {
margin-top: -8%;
}
}
@media screen and (max-width: 930px) {
.intro {
background-size: cover !important;
}
.input_style {
padding: 22px;
}
.formCompetition{
letter-spacing: 7px;
font-size: 20px;
padding-top: 10px;
padding-bottom: 30px;
}
.spanCkeck, .spanCkeck2 {
float: none;
display: inline-block;
width: inherit;
color: white;
font-size: 13px;
line-height: 18px;
}
.agreeTexting {
padding-top: 30px;
font-family:'Roboto', sans-serif;
color:#fff;
font-size:11px;
line-height:12px;
}
.agreeTexting a{
color: #fff;
text-decoration: underline;
}
.agreeTexting a:hover {
color: #ffd800;
}
.thetotalheight {
height: 80vh;
font-size: 19px;
}
.backGr1, .backGr2, .backGr3 {
height: 53vh;
}
#showFirstAnswer {
font-size: 18px;
}
}
@media screen and (max-width: 760px) {
.input_style {
padding: 20px;
}
.formCompetition{
letter-spacing: 7px;
font-size: 20px;
padding-bottom: 30px;
}
.spanCkeck, .spanCkeck2 {
float: none;
display: inline-block;
width: inherit;
color: white;
font-size: 13px;
line-height: 18px;
}
.agreeTexting {
padding-top: 25px;
font-family: 'Futura', sans-serif;
color:white;
font-size:10px;
line-height: 12px;
}
.agreeTexting a{
color: #fff;
text-decoration: underline;
}
.agreeTexting a:hover {
color: #ffd800;
}
body {
padding: 0px;
margin: 0px;
font-family: Futura, sans-serif;
font-size: 0.80em;
color: #434343;
}
h1 {
font-family: 'Futura', sans-serif;
font-size:17px;
color: #ffd800;
font-weight: 400;
letter-spacing:1px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 10px 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
h2 {
font-family: 'Futura', sans-serif;
font-size:12px;
color: #fff;
font-weight: 400;
letter-spacing:2px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
h3 {
font-family: 'Futura', sans-serif;
font-size:12px;
color: #fff;
font-weight: 400;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 0px;
margin: 0px;
text-shadow: 0px 0px 4px rgba(14,57,76,1);
}
#showFirst img{
padding:7% !important;
}
#logo {
margin-bottom: 2%;
}
.success_message {
margin-left: -6%;
}
.vectorsalignment {
width: 33.33%;
float: left;
}
.h3robgrd {
background-position: right;
}
.top_box {
font-size: 14px;
padding: 20vh 15px 15px 15px;
}
.elementxxx {
width: 80%;
padding-bottom: 16%
}
.mainBody{
max-width: 100%;
margin: 0px auto;
}
.menuclass {
position: absolute; z-index: 9999; margin: 0 auto; width: 100%; float: right; text-align: right;left: 0; right: 0; margin-top: 15px; padding: 0px 20px;
}
.giftsdiv {
background-size: cover;
}
.videosdiv {
background-size: cover;
}
.question1div {
background-size: cover;
background-image: url(../images/opap-bg-m-non.jpg);
}
.question2div {
background-size: cover;
background-image: url(../images/opap-bg-m-non.jpg);
}
.question3div {
background-size: cover;
background-image: url(../images/opap-bg-m-non.jpg);
}
.question4div {
background-size: cover;
background-image: url(../images/opap-bg-m-non.jpg);
}
.question5div {
background-size: cover;
background-image: url(../images/opap-bg-m-non.jpg);
}
.registerformdiv {
background-size: cover;
}
.thank_youdiv {
background-size: cover;
}
.questionTextMobile, .mainQuestions, .allQuestions {
font-size: 18px;
}
.thedim {
width: 100%;
height: 93vh;
}
}
@media screen and (max-width: 560px) {
a > h5 {
font-family: 'Futura', sans-serif;
font-size:15px;
text-align: center;
color: #ffd800;
font-weight: 400;
letter-spacing:1px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
padding: 5px 0px;
margin: 0px;
}
.cookie-policy {
flex-direction: column;
text-align: center;
}
.cookie-policy .cookie-policy__content {
margin-bottom: 25px;
}
.cookie-policy .cookie-policy__continue {
margin-right: 0;
margin-bottom: 15px;
}
.input_style {
padding: 10px;
}
.formCompetition{
letter-spacing: 5px;
font-size: 16px;
padding-bottom: 20px;
}
.spanCkeck, .spanCkeck2 {
float: left;
display: inline-block;
width: inherit;
color: white;
font-size: 11px;
line-height: 14px;
}
.agreeTexting {
padding-top:9px;
font-family:'Futura', sans-serif;
color:#fff;
font-size:9px;
line-height: 10px;
}
.agreeTexting a{
color: #fff;
text-decoration: underline;
}
.agreeTexting a:hover {
color: #ffd800;
}
}
@media screen and (max-width: 350px) {
.input_style {
padding: 4px;
}
.formCompetition{
letter-spacing: 6px;
font-size: 15px;
padding-bottom: 14px;
}
.spanCkeck, .spanCkeck2 {
float: left;
display: inline-block;
width: inherit;
color: white;
font-size: 11px;
line-height: 12px;
}
.agreeTexting {
padding-top: 2px;
font-family:'Futura', sans-serif;
color:white;
font-size:9px;
line-height: 10px;
}
.agreeTexting a{
color: #fff;
text-decoration: underline;
}
.agreeTexting a:hover {
color: #ffd800;
}
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}