html, body {height:100%;}

body {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  text-align: center;
  color: white;
  background-color: #77acfb;
  background: linear-gradient(50deg, rgba(119,243,251,1) 0%, rgba(119,197,251,1) 29%, rgba(63,140,255,1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;  
  margin: 5px;
}

p {font-weight: 400; text-align: center; margin: 0; padding: 0;}


/* 
///////////// RESPONSIVE SETTINGS /////////////
*/
* {box-sizing: border-box;}

.row {margin-top: 20px;}
.row::after {content: ""; clear: both; display: table;}

[class*="col-"] {float: left; padding: 15px; } 

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (max-width: 334  px) {
  .dot {height: 25px; width: 25px; font-size: 11px; line-height: 25px; margin: 0 4px;}
  body {font-size: 12px;}
  #containerPrint {visibility: hidden;}
}

@media only screen and (min-width: 335px) and (max-width: 515px) {
  .dot {height: 30px; width: 30px; font-size: 13px; line-height: 30px; margin: 0 4px;}
  body {font-size: 14px;}
  #containerPrint {visibility: hidden;}
}

@media only screen and (min-width: 516px) and (max-width: 767px) {
  .dot {height: 40px; width: 40px; font-size: 16px; line-height: 40px; margin: 0 5px;}
  body {font-size: 16px;}
}

@media only screen and (max-width: 767px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  .centerRow {margin: 0 auto; float: none !important;} 

  .row.output {margin: 0 auto !important; float: none !important;}
  .row.secButtons {margin: 0 auto !important; float: none !important;}
  [class*="col-"] {float: none !important; margin: 0 auto !important;} 

  .border {display:none}
  #containerPrint {visibility: hidden;}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .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%;}
  .centerRow {margin: 0 auto; float: none !important;} 
  .row.secButtons {margin-bottom: 20px;}
  .dot {height: 40px; width: 40px; font-size: 16px; line-height: 40px; margin: 0 5px;}
  body {font-size: 16px;}
}

@media only screen and (min-width: 990px) {
  .col-b-1 {width: 8.33%;}
  .col-b-2 {width: 16.66%;}
  .col-b-3 {width: 25%;}
  .col-b-4 {width: 33.33%;}
  .col-b-5 {width: 41.66%;}
  .col-b-6 {width: 50%;}
  .col-b-7 {width: 58.33%;}
  .col-b-8 {width: 66.66%;}
  .col-b-9 {width: 75%;}
  .col-b-10 {width: 83.33%;}
  .col-b-11 {width: 91.66%;}
  .col-b-12 {width: 100%;}
  .centerRow {margin: 0 auto; float: none !important;}
  .row.secButtons {margin-bottom: 20px;}
  .dot {height: 40px; width: 40px; font-size: 16px; line-height: 40px; margin: 0 5px;}
  body {font-size: 18px;}

  /* Buzz */
  .hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-buzz:hover {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  @-webkit-keyframes hvr-buzz {
    50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
  }
  @keyframes hvr-buzz {
    50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
  }
}


/* 
///////////// SELECT MENU /////////////
The container must be positioned relative: 
*/
.custom-select {position: relative; font-family: 'Open Sans', sans-serif;}
.custom-select select {display: none; /*hide original SELECT element: */}
.select-selected {background-color: #7b53e0;   border-radius: 4px;}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 18px;
  right: 15px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* Style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #997de1;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);}


/* 
///////////// CONTAINERS  /////////////
*/
#container {display: block; margin-top: 50px;}
#alertRow {display: none;}
#containerAlert {
  float:none !important;
  margin:0 auto;
  border-radius: 4px;
  background-color: white;
  background: linear-gradient(90deg, rgba(123,83,224,1) 0%, rgba(219,134,0,1) 100%);
  }
#output {display: none; margin: auto; padding-top: 24px;}
#containerShuffle, #containerPrint  {display: none; margin: auto;}


/* 
///////////// TEXT FORMATTING  /////////////
*/
h1.headline {font-family: 'Lobster', cursive; color: white; font-size: 3em; margin-top: 1em; margin-bottom: 0.5em;}
p#infoBox {font-size: 1em; color: white;}
p#alert {font-size: 1em; color: white; padding: 8px 16px;}
a {color: #7b53e0; text-decoration: none; transition: 0.3s;}
a.logo {color: white; text-decoration: none;}
a:hover {background: white; color: #7b53e0;}
a:hover.logo {background: none; color: white;}
a:visited.logo {background: none; color: white;}


/* 
///////////// ANIMATIONS  /////////////
*/
.header {animation-delay: .8s;}
.infoBox {animation-delay: .5s;}
.output {animation-delay: .8s;}


/* Pop-In */
.animate-pop-in {animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards; opacity: 0;}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


/* 
///////////// OUTPUT POSTIONING  /////////////
*/
.center {width:100%; text-align: center; padding-bottom: 24px; display:block; border: none; box-sizing: border-box;}
.leftEurojackpot {width: 68%; text-align: center; padding-bottom: 24px; display:inline-block; border: none; box-sizing: border-box;}
.rightEurojackpot {width: 28%; text-align: center; padding-bottom: 24px; display:inline-block; border: none; box-sizing: border-box;}
.left6aus42 {width: 78%; text-align: center; padding-bottom: 24px; display:inline-block; border: none; box-sizing: border-box;}
.right6aus42 {width: 18%; text-align: center; padding-bottom: 24px; display:inline-block; border: none; box-sizing: border-box;}


/* 
///////////// BUTTON DESIGN  /////////////
*/
.button {
  padding: 8px 16px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  background-color: #db8600;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1em;
  color: white;
}

button:focus {outline:0;}

/*.button:hover, .buttonShuffle:hover, .buttonPrint:hover {background-color: #ea940d; color: white;}
.button:active,.buttonShuffle:active, .buttonPrint:active {background: #db8600;}
.button:visited,.buttonShuffle:visited, .buttonPrint:visited {background: #db8600;}
*/


/* 
///////////// LOTTERY NUMBER BALL DESIGN  /////////////
*/
.dot {
  border-radius: 50%;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  color: #000;
  text-align: center;
  background: radial-gradient(circle at 40px 40px, #f0f0f0, #fff);
}