* {
  margin: 0;
  padding: 0;
  border: 0;
}
*, *:after, *:before {
      box-sizing: border-box;
  margin: 0;
  padding: 0;

  -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
}
html {
  font-size: 100%;

      -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  text-align: center;
  overflow-y: scroll;
}
a, a:visited, a:hover, a:active {
  white-space: nowrap;
  color: inherit;
}
.flip {
  position: relative;
  overflow: hidden;
  margin: 40px auto;
}
.flip, .flip a {
  width: 450px;
  height: 450px;
}
.flip a {
  font-size: 90px;
  font-weight: bold;
  line-height: 444px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  border-width: 6px;
  border-style: double;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  outline: none !important;

  -khtml-border-radius: 50%;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
}
.flip a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  content: '';
}
.flip a.flipping:hover {
  cursor: default;
}
p {
  line-height: 180%;
  margin: 0px;
  padding: 0px;
}
#what {
  position: relative;
  visibility: hidden;
  overflow: visible;
  width: 100%;
  margin: 0px auto;
  padding: 0 20px;
  -webkit-transition: opacity .8s ease-in-out;
     -moz-transition: opacity .8s ease-in-out;
       -o-transition: opacity .8s ease-in-out;
          transition: opacity .8s ease-in-out;
  opacity: 0;
}
#what.show {
  visibility: visible;
  opacity: 1;
}
#share {
  position: relative;
  overflow: visible;
  width: 15px;
  height: 25px;
  margin: 40px auto 15px auto;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);

  -webkit-font-smoothing: antialiased;
}
.fb-share-button {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 100%;
  overflow: hidden;
  width: 5px;
  height: 5px;
  margin: 0px;
  padding: 0px;

  -webkit-text-size-adjust: none;
}
#what.show .fb-share-button {
  overflow: visible;
  width: auto;
  height: auto;
}
.twitter {
  position: absolute;
  top: 0px;
  right: 100%;
  margin: 0px;
  padding: 0px;

  -webkit-text-size-adjust: none;
}

a.mtt-logo {
  display: inline-block;
  margin-bottom: 30px;
}
a.mtt-logo svg {
  width: 45px;
  height: 45px;
}
body.black a.mtt-logo svg path.dots {
  fill: white;
}
body.red a.mtt-logo svg path, body.purple a.mtt-logo svg path, body.blue a.mtt-logo svg path, body.green a.mtt-logo svg path {
  fill: white;
}

/* COLORS! */

ul#colors {
  margin: 12px 0 30px 0;
  padding: 0;
  list-style: none;
}
ul#colors li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul#colors li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid white;
}
ul#colors li a.white {
  background-color: white;
}
ul#colors li a.black {
  background-color: black;
}
ul#colors li a.red {
  background-color: #f00;
}
ul#colors li a.purple {
  background-color: #520052;
}
ul#colors li a.blue {
  background-color: blue;
}
ul#colors li a.green {
  background-color: #002900;
}

body.white {
  color: black;
  background-color: white;
}
body.white .flip a, body.white .flip a.flipping:hover {
  color: #555;
  border-color: #555;
  background-color: #ddd;
}

body.black {
  color: #efefef;
  background-color: black;
}
body.black .flip a, body.black .flip a.flipping:hover {
  color: #eee;
  border-color: #eee;
  background-color: #555;
}

body.red {
  color: #fff;
  background-color: #a60c00;
}
body.red .flip a, body.red .flip a.flipping:hover {
  color: #ffe6e6;
  border-color: #ffe6e6;
  background-color: #ff1300;
}

body.purple {
  color: #fff;
  background-color: #606;
}
body.purple .flip a, body.purple .flip a.flipping:hover {
  color: #f0e6f0;
  border-color: #f0e6f0;
  background-color: #520052;
}

body.blue {
  color: white;
  background-color: #1533ad;
}
body.blue .flip a, body.blue .flip a.flipping:hover {
  color: #e6e6ff;
  border-color: #e6e6ff;
  background-color: #071c71;
}

body.green {
  color: #fff;
  background-color: #030;
}
body.green .flip a, body.green .flip a.flipping:hover {
  color: #e6ebe6;
  border-color: #e6ebe6;
  background-color: #002900;
}

#ads {
  width:100%;
  max-width:600px;
  margin:80px auto 20px auto;
  text-align:center;
  display:inline-block;
}

@media screen and (min-width: 720px) {
  body.white .flip a:hover {
    background-color: #e6e6e6;
  }
  body.black .flip a:hover {
    background-color: #666;
  }
  body.red .flip a:hover {
    background-color: #e60000;
  }
  body.purple .flip a:hover {
    background-color: #5c005c;
  }
  body.blue .flip a:hover {
    background-color: #0000e6;
  }
  body.green .flip a:hover {
    background-color: #002e00;
  }
}
@media screen and (max-width:550px) {
  .flip {
    margin: 35px auto;
  }
  .flip, .flip a {
    width: 400px;
    height: 400px;
  }
  .flip a {
    font-size: 80px;
    line-height: 394px;
  }
}
@media screen and (max-width:475px) {
  .flip, .flip a {
    width: 350px;
    height: 350px;
  }
  .flip a {
    font-size: 70px;
    line-height: 344px;
  }
}
@media screen and (max-width:420px) {
  .flip, .flip a {
    width: 300px;
    height: 300px;
  }
  .flip a {
    font-size: 60px;
    line-height: 294px;
  }
}
@media screen and (max-width:350px) {
  p {
    font-size:95%;
  }
  .flip, .flip a {
    width: 260px;
    height: 260px;
  }
  .flip a {
    font-size: 52px;
    line-height: 254px;
  }
}