::-moz-selection, ::selection{

  background: #00739b;

  color: white;

}

.topPart ::-moz-selection, .topPart ::selection{

  background: #eee;

  color: #00739b;

}





body{

  margin:0;

  padding:0;

  font-family: 'Open Sans', sans-serif;

  background: black;

}


.nicelink{
  color: #00739b;
  text-decoration: none;
}


.display-none {

	display: none !important;

}



.hide-desktop {

  display: none !important;

}

input, textarea{

  padding: 1em;

  border: none;

  outline: none;

  border-radius: 2px;

  box-shadow: 0 1px 1px rgba(0,0,0,0.1);

  max-width: 80%;

  width: 400px;

  font-size: 1em;

  transition: all 0.4s;

  -webkit-transition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

  resize: none;

}



input:focus, textarea:focus{

  box-shadow: 0 2px 3px rgba(0,0,0,0.1);

}



.clearbreak{

  float: none;

  display: block;

  clear: both;

}



.topPart{

  width: 100%;

  height: 100vh;

  background:linear-gradient(#00739b, #003c52);

  background: #00739b; /* Old browsers */

  background: -moz-linear-gradient(top, #00739b 0%, #003c52 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(top, #00739b 0%,#003c52 100%); /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom, #00739b 0%,#003c52 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00739b', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

  position: relative;

  overflow: hidden;

}



.headerMid{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  transform: -webkit-translate(-50%,-50%);

  transform: -o-moz-translate(-50%,-50%);

  transform: translate(-50%,-50%);
  z-index: 5;
}



.headerMid .logo{

  width: 167px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);


  }

  .headerMid .logo-spin{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }

  .headerMid .logo-reset{
    transition: all 0s !important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -o-transition: all 0s !important;
  }


.headerMid h1{

  font-size: 50px;

  color: white;

  font-weight: 100;

  margin:0;

  font-size: 9em;

  line-height: 1em;

  position: relative;

  top: 14px;

  padding-left: 0.25em;

}



.headerMid h1 .titleBold{

  font-weight: bold;

}



.btn{

  outline: none;

  padding:1.4em 2em;

  border-radius: 4px;

  font-size: 1em;

  border:2px solid;

  text-transform: uppercase;

  font-family: "Arial";

  font-weight: 500;

  letter-spacing: 0.5px;

  font-weight: bold;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition: 0.2s;

  -webkit-transition: 0.2s;

  -moz-transition: 0.2s;

  -o-transition: 0.2s;

  display: inline-block;

  min-width: 200px;

}





/*  Ripple */



.ripple {

  width: 0;

  height: 0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);

  transform: scale(0);

  position: absolute;

  opacity: 1;

}



.rippleprimary{

  background: rgba(0,115,155,0.4);

}



.ripplewhite{

  background: rgba(150,150,150,0.4);

}



.rippleEffect {

    animation: rippleDrop .6s linear;

}







@keyframes rippleDrop {

  100% {

    transform: scale(2);

    opacity: 0;

  }

}



.btn-primary{

  background: #00739b;

  font-size: 1em;

  border-color: #00739b;

  color: white;

}



.btn-primary-o{

  background: none;

  font-size: 1em;

  border-color: #00739b;

  color: #00739b;

}



.btn-white{

  background: white;

  font-size: 1em;

  border-color: white;

  color: #222;

}



.btn-white-o{

  background: none;

  font-size: 1em;

  border-color: #e1e1e1;

  color: #e1e1e1;

}



.btn-white-o:hover{

  color: white;

  border-color: white;

}



.centerAlign{

  text-align: center;

}



.bubbleouter{



  animation: float 14s infinite ease-in;

  position: absolute;

  left: 3em;

  bottom:-100px;



}



.bottombubbles .bubbleouter{

  left: auto;

  right: 12em;

}





.bubble{

  width: 100px;

  height: 100px;

  background: rgba(255,255,255,0.1);

  border-radius: 50%;

  position: relative;

  box-shadow: 0 0 5px rgba(255,255,255,0.1);

  transition: all 0.2s;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -o-transition: all 0.2s;

  animation: wobble 2s infinite ease-in-out;

}





.bubblepop{

  opacity: 0;

  transform: scale(1.2);

  transform: -webkit-scale(1.2);

  transform: -moz-scale(1.2);

  transform: -o-scale(1.2);

  pointer-events: none;

}





.bottombubbles .bubble{

  animation: wobble3 2s infinite ease-in-out;

}



.bubble:after{

  content:"";

  position: absolute;

  top: 20%;

  right: 20%;

  width: 10%;

  height: 10%;

  background: rgba(255,255,255,0.1);

  border-radius: 50%;

  box-shadow: 0 0 5px rgba(255,255,255,0.1);

}



@keyframes float {



  0%{

    bottom:-100px;

  }



  50%{

    bottom:110%

  }

  100%{

    bottom:110%

  }



}



@keyframes wobble {



  0%{

    left: 200px;

  }

  50%{

    left: 300px;

  }

  100%{

    left: 200px;

  }



}

@keyframes wobble2 {



  0%{

    left: 200px;

  }

  50%{

    left: 273px;

  }

  100%{

    left: 200px;

  }



}

@keyframes wobble3 {



  0%{

    right: 200px;

  }

  50%{

    right: 300px;

  }

  100%{

    right: 200px;

  }



}



@keyframes wobble4 {



  0%{

    right: 200px;

  }

  50%{

    right: 273px;

  }

  100%{

    right: 200px;

  }



}



.bubble2{

  left: 6em;

  animation-delay: 1s;

}

.bubble2 .bubble{

  animation: wobble2 2.5s infinite ease-in-out;

  animation-delay: 1.2s;

    width: 70px;

    height: 70px;

}



.bottombubbles .bubble2 .bubble{

  animation: wobble4 2.5s infinite ease-in-out;

}

.bubble3{

  left: 0;

  animation-delay: 0.5s;

}

.bubble3 .bubble{

  animation-delay: 0.7s;

    width: 90px;

    height: 90px;

}

.bubble4{

  left: 4em;

  animation-delay: 1.5s;

}

.bubble4 .bubble{

  animation: wobble2 1.5s infinite ease-in-out;

  animation-delay: 2.1s;

    width: 50px;

    height: 50px;

}



.bottombubbles .bubble4 .bubble{

  animation: wobble4 1.5s infinite ease-in-out;

}



.bubble5{

  left: 2em;

  animation-delay: 2s;

}

.bubble5 .bubble{

  animation-delay: 0.1s;

}



.wavepart{

  position: absolute;

  top: 120%;

  left: 0;

  z-index: 5;

  width: 100%;

  height: 100vh;

  background: red;

  transition: all 2s;

  -webkit-transition: all 2s;

  -moz-transition: all 2s;

  -o-transition: all 2s;

  background: #eee;

}



.wavepart-active{

  top: 0;

}



.wavetop, .wavetop-blue{

  width: 100%;

  overflow: hidden;

  position: relative;

  z-index: 5;

  transform: translateY(-90%);

  transform: -webkit-translateY(-90%);

  transform: -moz-translateY(-90%);

  transform: -o-translateY(-90%);

}



.wavebottom{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.wave{

  width: 200%;

  position: absolute;

  top: 0;

  left: -100%;

  z-index: 5;

}



#wave1{

  animation: wave 1.5s linear;

  animation-fill-mode: forwards;

  animation-play-state: paused;

  z-index: 10;

}

#wave2{

  animation: wave 2.5s linear;

  animation-delay: -0.5s;

  animation-fill-mode: forwards;

  animation-play-state:paused;

  z-index: 9;

}

#wave3{

  animation: wave 4s linear;

  animation-play-state: paused;

  animation-fill-mode: forwards;

  z-index: 8;

}



#wave4{

  opacity: 0;

  position: static;

}





#wave5{

  animation: wave 1.5s linear;

  animation-fill-mode: forwards;

  animation-play-state: paused;

  z-index: 10;

}

#wave6{

  animation: wave 2.5s linear;

  animation-delay: -0.5s;

  animation-fill-mode: forwards;

  animation-play-state:paused;

  z-index: 9;

}

#wave7{

  animation: wave 4s linear;

  animation-play-state: paused;

  animation-fill-mode: forwards;

  z-index: 8;

}



@keyframes wave {

  from{

    left:-100%;

  }

  to{

    left:0;

  }

}



.overflowarea{

  position: fixed;
  overflow: hidden;

  width: 100vw;

  height: 100vh;


}


.menu-button{
  position: absolute;
  top: 2em;
  right: 2em;
  padding: 2em;
  cursor: pointer;
}

.menu-button-inner{
  position: relative;
  display: block;
  background: white;
  width: 40px;
  height: 4px;
  border-radius: 2px;
}

.menu-button-inner:after{
  position: absolute;
  top: 12px;
  height: 100%;
  width:100%;
  content: "";
  background: white;
  border-radius: 2px;
}

.menu-button-inner:before{
  position: absolute;
  bottom: 12px;
  height: 100%;
  width:100%;
  content: "";
  background: white;
  border-radius: 2px;
}
/*
.menu-outer{
  position: absolute;
  top:3em;
  right: 3em;
  overflow: hidden;
  width: 50px;
  height: 50px;
  z-index: 8;
}

.menu-inner{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(red,blue);
  z-index: 7;
  clip-path: circle(100px at center);
  animation: changecircle 3s infinite;
}

@keyframes changecircle{
  0%{
    clip-path: circle(100px at center);
  }
  50%{
    clip-path: circle(500px at center);
  }
  100%{
    clip-path: circle(100px at center);
  }
}*/

.menu-inner h2{
  position: absolute;
  top:50%;
  left: 50%;
}


.warningsection{

  background: #f3f3f3;

  padding: 1em 6em 3em;

  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  position: relative;

  top: 1em;

  opacity: 0;

  transition: opacity 1s, top 1.5s;

  -webkit-transition: opacity 1s, top 1.5s;

  -moz-transition: opacity 1s, top 1.5s;

  -o-transition: opacity 1s, top 1.5s;

}



.warningsection-active{

  opacity: 1;

  top: 0;

}



.warningsection h3, .startcard h2{

  font-size: 2.5em;

  font-weight: 100;

  text-align: center;

}





.startcard h2{

  font-size: 2em;

}



.maintitle{

  font-size: 2em;

  font-weight: 100;

  text-align: center;

}



.blueicon{

  width: 70px;

  height: 70px;

  background: #00739b; /* Old browsers */

  color: white;

  border-radius: 50%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.eighteenplus{

  font-size: 1.5em;

}





.maingamearea{

  position: absolute;

  top: 120%;

  left: 0;

  z-index: 5;

  width: 100%;

  height: 100vh;

  background: red;

  transition: all 2s;

  -webkit-transition: all 2s;

  -moz-transition: all 2s;

  -o-transition: all 2s;

  background:linear-gradient(#003c52, #002938);

  background: #003c52; /* Old browsers */

  background: -moz-linear-gradient(top, #003c52 0%, #002938 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(top, #003c52 0%,#002938 100%); /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom, #003c52 0%,#002938 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003c52', endColorstr='#002938',GradientType=0 ); /* IE6-9 */

}



.maingamearea-active{

  top: 0;

}



.bottombubbles .bubble, .bottombubbles .bubbleouter{

  animation-play-state: paused;

}



.game{

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  height: 100vh;

  min-height: 100vh;

  max-height: 100vh;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;



}



.gamearea{

  opacity: 0;

  top: 1em;

  position: relative;

  transition: opacity 1s, top 1.5s;

  -webkit-transition: opacity 1s, top 1.5s;

  -moz-transition: opacity 1s, top 1.5s;

  -o-transition: opacity 1s, top 1.5s;

}



.gamearea-active{

  opacity: 1;

  top: 0;

}





.whitecard{

  background: #eee;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  padding: 2em;

  position: relative;

  max-width: 600px;

  min-width: 500px;

  border-radius: 4px;

}



.startcard b{

  font-weight: bold;

}



.animateable{

  position: relative;

  opacity: 1;

  bottom: 0;



  transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

}



.fade-up{

  bottom: 2em;

  opacity: 0;

}



.addplayersection{

  display: none;

  opacity: 0;

  position: relative;

  top: 2em;



  transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;



}



.addplayersection-inbetween{

  transition: none;

  -webkit-transition: none;

  -moz-transition: none;

  -o-transition: none;

}



.addplayersection-active{

  opacity: 1;

  top: 0;

}



.errormessage{

  display: none;

  color: #d52c2c;

  font-weight: bold;

}





.playernamesection{

  position: absolute;

  left: 0;

  top: 0;

  width: 200px;

  height: 100%;

  overflow: hidden;



  transition: all 0.4s;

  -webkit-ransition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;



  transform: translateX(-100%);

  transform: -moz-translateX(-100%);

  transform: -webkit-translateX(-100%);

  transform: -o-translateX(-100%);

}



.playernamebox{

  position: relative;

  top: 0;

  transition: all 0.4s;

  -webkit-transition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

}



.singleplayername{

  display: flex;

  align-items: center;

  word-break: break-all;

  font-size: 1.5em;

  padding: 0 1em;

  background: #eee;

  height: 100vh;





  transition: all 0.4s;

  -webkit-ransition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;



}




.singleplayername:nth-child(even){

  background: #f6f6f6;

}



.playersturn-mobile{
  text-align: center;
  color: white;
  font-size: 1.5em;
  bottom:0;
  opacity: 1;
  display: none;
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
}


.playersturn-mobile-up{
  opacity: 0;
  bottom: 0.5em;
}

.playersturn-mobile-down{
  bottom: -0.5em !important;
  opacity: 0;
  transition: all 0s;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
}





.playernamesection-active{

  transform: translate(0);

  transform: -moz-translate(0);

  transform: -webkit-translate(0);

  transform: -o-translate(0);

}





.cardsection{

  opacity: 0;

  top: 2em;

  position: relative;

  transition: all 0.4s;

  -webkit-transition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

  display: none;

}



.cardsection-active{

  top: 0;

  opacity: 1;

}



.cardcontainer{

  width: 700px;

  height: 500px;

  position: relative;

  -webkit-perspective: 1000px;

  perspective: 1000px;

  margin: 0 auto;

  pointer-events: none;

  -moz-perspective: 1000px;

}



#card{

  width: 100%;

  height: 100%;

  position: absolute;

  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-transition: transform 1s;

  -moz-transition: transform 1s;

  -o-transition: transform 1s;

  transition: transform 1s;

  pointer-events: none;

}



#card figure {



    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    -webkit-backface-visibility: hidden;

    border-radius: 10px;

    pointer-events: none;



}



#card .back {



    -webkit-transform: rotateY(180deg);

    transform: rotateY(180deg);

    position: relative;

    pointer-events: none;



}



#card.halfflip{

  transform: rotateY(180deg);





}



#card.fullflip{

  transform: rotateY(360deg);



}



#card.ad-card #cardID {

  display: none;

}

#cardAd {

  display: none;

}

#card.ad-card #cardAd {

  display: block;

}



.notransition{

  transition: none !important;

  -webkit-transition: none !important;

  -moz-transition: none !important;

  -o-transition: none !important;



}







.playeractive{

  background:#0690a1 !important;

  color:white !important;

}



.singleplayernameb1, .singleplayernameb2, .singleplayernameb3{

  display: none;

}



.rulescontainersection-toggler {

  display: none;

  position: absolute;

  top: 10px;

  right: 10px;

  width: 50px;

  height: 50px;

  border-radius: 100%;

  background: #00739b;

  box-shadow: 0 2px 2px rgba(0,0,0,.16);

  justify-content: center;

  align-items: center;

  opacity: 0;

  transition: .5s ease-in;

}

.rulescontainersection-toggler:after {

  content:'+';

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  font-size: 1.5rem;

  color: #fff;

}

.rulescontainersection-hide {

  display: none;

}

.rulescontainersection {

  position: absolute;

  right: 0;

  top: 0;

  max-width: 200px;

  max-height: 100vh;

  overflow-x: hidden;

  overflow-y: auto;

}

.rule {

  padding: 0 1em;

  margin: 1em 0;

  animation: slide-up .5s ease-in;

  animation-fill-mode: forwards;

}

.rule-img {

  width: 100%;

  height: auto;

}

.rule p {

  color: #fff;

  margin: .1em 0;

  text-align: center;

}



@keyframes slide-up {

  0% {

    opacity: 0;

    transform: translateY(10px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.card {

  background: whitesmoke;

  padding: 1em;

  border-radius: 3px;

  box-shadow: 0 2px 4px rgba(0,0,0,.16);

}

.ideas-form {

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: 90%;

  max-width: 500px;

}

.ideas-form form {

  width: auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.loading {

  display: none;

}



@media (max-width:1200px){

  .headerMid h1{

    font-size: 7em;

  }



  .headerMid .logo {

    width: 128px;

  }



  .btn{

    padding: 1.3em 1.8em;

  }



  .warningsection h3, .startcard h2 {

    font-size: 2em;

  }



  .warningsection{

    padding: 1em 4em 2.5em;

  }



  .whitecard{

    padding: 1em;

  }



  .cardcontainer{

    width: 560px;

    height: 400px;

  }



  .singleplayername{

    font-size: 1.2em;

  }



  .playernamesection{

    width: 160px;

  }

}

.playernamesection-mobile{
  display: none;
}

.addplayertitle{
  margin-bottom: 15px;
}


@media (max-width: 950px) {
  .playersturn-mobile-active{
    display: block;
  }

  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .mob-mb-1 {
    margin-bottom: .5em;
  }
}


@media (max-width:880px) {

  .menu-button {

    top: 1em;
    right: 0em;

}

  #addplayer{
    min-width: 140px;
    margin-right: 10px;
  }

  #finishedaddingplayers{
    min-width: 140px;
  }

  .bottombubbles .bubbleouter {
    left: auto;
    right: 3em;
}

  #addplayers, #quickstart{
        padding: 0.8em 1em;
        font-size: 0.9em;
        min-width: 125px;
  }

  #addplayers{
    margin-right: 3px;
  }

  .gamearea-active {
    top: -7%;
}

  .startcard h2{


    font-size: 1.3em !important;
    margin-bottom: 0;
  }

  .startcard div {

    padding: 0.5em 1em 1em !important;
  }

   .headerMid{
    top: 43%;
  }

  .cardcontainer {

    /*width: 450px;*/

    /*height: 321px;*/

  }

  .topPart .bubbleouter {
        left: 1em;
    }
    .topPart .bubble2 {

        left: 4em;

    }
    .topPart .bubble3 {

        left: -2em;
    }
    .topPart .bubble4 {

        left: 2em;

    }
    .topPart .bubble5 {

        left: 0;
    }

  .rulescontainersection-toggler.active {

    display: block;

    opacity: 1;

  }

  .rulescontainersection {

    display: none;

    max-width: 100vw;

    background: #f3f3f3;

    height: 100vh;

  }

  .rulescontainersection.active {

    display: block;

  }

  .rulescontainersection-hide {

    display: block;

  }

  .rule p {

    color: #111;

  }

}



@media (max-width:767px) {


  .warningsection-active {

    top: -7%;

}

  .wavetop, .wavetop-blue {

    width: 170%;
  }



  .headerMid h1 {

    font-size: 5.3em;

  }



  .headerMid .logo {

    width: 94px;
}



  .btn {

    padding: 1em 1.5em;

  }



  .warningsection h3, .startcard h2 {

    font-size: 2em;

  }



  .warningsection {

    padding: .5em 2em 1.5em;

    max-width: calc(90% - 4em);

  }



  .gamearea.gamearea-active {

    width: 100%;

  }



  .whitecard {

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    max-width: 75%;

    min-width: unset;

  }



  .cardcontainer {

  width: 92% !important;
    height: unset !important;
    padding-top: 65% !important;
    position: relative;

  }



  #card {

    top: 0;

  }



}


@media (max-width: 600px){

  .warningsection {

    padding: 0.1em 1.5em 1em;
    max-width: calc(90% - 4em);

  }



  .whitecard {

    max-width: 85%;

  }


  .blueicon {

    width: 50px;
    height: 50px;
  }

  .eighteenplus {

    font-size: 1em;

  }

  .blueicon .fa-skull-crossbones{
    font-size: 1.3em !important;
  }

  .blueicon .fa-handshake{
    font-size: 1em !important;
  }



 .headerMid h1 {

    font-size: 4.7em;
    top: 8px;

  }

  .btn{
    padding: 0.9em 1.2em;
    font-size: 1.1em;
  }


  .headerMid .logo {

    width: 86px;

  }
}


@media (max-height: 600px) {

  .playernamesection-mobile {

    display: none !important;

  }



  .cardcontainer {

    width: 400px;

    height: 285px;

  }


}



@media (max-height: 390px) {

  .cardcontainer {

    width: 350px;

    height: 250px;

  }




}



/* Dont think this works :/ */

@media (min-width: 767px) and (max-height: 600px) {

  .cardcontainer {

    padding-top: 0;

  }

}


@media (max-width: 450px){
   .addplayertitle{

    font-size: 1.7em;
  }
}


@media (max-width: 370px){
  .headerMid h1 {
    font-size: 3.7em;
    top: 8px;
  }
  .headerMid .logo {
    width: 67px;
  }
  .btn {
    font-size: 0.9em;
  }
  .warningsection h3, .startcard h2 {
    font-size: 1.6em;
  }
  .warningsectioninnner{
    font-size: 0.9em;
  }

   .whitecard{

    font-size: 0.8em;
  }

}


.patreonArea {
    display: block;
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    text-decoration:none;
    z-index:3;
}

.patreonArea .container {
       max-width: 800px;
    margin: 0 auto;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    
}

.patreonArea h3 {
    margin: 0;
    display:inline-block;
    color:black;
    font-weight:100;
}

.patreonArea button {
float: right;
    border: none;
    outline: none;
    padding: 0.8em;
    color: white;
    background: #f86754;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    margin:0;
}

@media (max-width: 720px) {
    .patreonArea .container {
        flex-direction: column;
    text-align: center;
    }
    
    .patreonArea h3 {
        
       
        
    font-size: 1em;
    }
    
    .parentArea h3 b{
        display:block;
    }
    
    .patreonArea button {
      width: 100%;
    margin-top: 0.8em;
    padding: 0.9em;
    max-width: 470px;
    }
    
    .headerMid {
    top: 50%;
}
}


.tipbutton {
    position: absolute;
    bottom: 3em;
    right: 3em;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    bottom: 2em;
    transition: all 0.5s;
}

.tipbutton-inner {
        display: flex;
    align-items: center;
    
    justify-content: center;
}

.tipbutton-showing {
    
    visibility: visible;
    opacity: 1;
    bottom: 3em;
}

@media (max-width: 600px) {
    .tipbutton {
        right: 0;
    width: 100%;
    justify-content: center;
    bottom: 100px;
    text-decoration: none;
    }
    
    .tipbutton button {
        padding: 0.8em 1em;
    font-size: 0.9em;
    }
    
    .tipbutton img {
        width: 55px;
    }
    
    .tipbutton-showing {
        bottom: 140px;
    }
}