@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=Secular+One');

html, body {
  height: 100%;
  overflow: hidden;
}

body {
position: relative;
    color: #fff;

/*
  background: -webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
*/

/*    linear-gradient(to right top, #f95f1b, #ea4d4d, #ca4c6a, #a25276, #785571);*/
    
background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/bg1.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

a {
    color: #ffffff;
}


p {
    color: #fff;
}



.rtl {
    direction: rtl;
}

.menu {
  width: 5em;
  height: 5em;
    color: #fff;
}

.big0 {
  width: 9em;
  height: 9em;
    color: #fff;
}

.menu .btn {
    color: #fff;
  position: absolute;
  top: 0;
  left: 0;
/*
    width: 85%;
    height: 85%;
*/
    width: 65%;
    height: 65%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
/*    background: #e2e2e2;*/
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.menu .btn .fa {
    margin-top: -10px;
    color: #fff;
  font-size: 2.2em;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.menu .btn:hover .fa {
  color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger {
  opacity: 1;
  z-index: 100;
        width: 100%;
    height: 100%;
    background-image: url(../img/img-link.jpg);
    background-position: center;
  cursor: pointer;
    border: 3px solid #eee;
    border-style: outside;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.menu .btn.trigger:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.menu .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
  transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
  transition: background-color 0.3s, -webkit-transform 0.3s;
  transition: background-color 0.3s, transform 0.3s;
  transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.menu .btn.trigger .line:before {
  top: -12px;
  -webkit-transform-origin: 15% 100%;
          transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
  top: 12px;
  -webkit-transform-origin: 25% 30%;
          transform-origin: 25% 30%;
}
.menu .rotater {
    color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
}
.menu.active .trigger .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger .line:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger .line:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 110%;
}

.rotater:nth-child(1) {
  -webkit-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
}

.menu.active .rotater:nth-child(1) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(22.5deg);
          transform: translateY(-8em) rotate(22.5deg);
}

.rotater:nth-child(2) {
  -webkit-transform: rotate(22.5deg);
          transform: rotate(22.5deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-22.5deg);
          transform: translateY(-8em) rotate(-22.5deg);
}

.rotater:nth-child(3) {
  -webkit-transform: rotate(67.5deg);
          transform: rotate(67.5deg);
}

.menu.active .rotater:nth-child(3) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-67.5deg);
          transform: translateY(-8em) rotate(-67.5deg);
}

.rotater:nth-child(4) {
  -webkit-transform: rotate(112.5deg);
          transform: rotate(112.5deg);
}

.menu.active .rotater:nth-child(4) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-112.5deg);
          transform: translateY(-8em) rotate(-112.5deg);
}

.rotater:nth-child(5) {
  -webkit-transform: rotate(157.5deg);
          transform: rotate(157.5deg);
}

.menu.active .rotater:nth-child(5) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-157.5deg);
          transform: translateY(-8em) rotate(-157.5deg);
}

.rotater:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
          transform: rotate(202.5deg);
}

.menu.active .rotater:nth-child(6) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-202.5deg);
          transform: translateY(-8em) rotate(-202.5deg);
}

.rotater:nth-child(7) {
  -webkit-transform: rotate(247.5deg);
          transform: rotate(247.5deg);
}

.menu.active .rotater:nth-child(7) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-247.5deg);
          transform: translateY(-8em) rotate(-247.5deg);
}

.rotater:nth-child(8) {
  -webkit-transform: rotate(292.5deg);
          transform: rotate(292.5deg);
}

.menu.active .rotater:nth-child(8) .btn-icon {
  -webkit-transform: translateY(-8em) rotate(-292.5deg);
          transform: translateY(-8em) rotate(-292.5deg);
}

.feice {
    margin-top: 15px;
}

/*BOTTOM*/


.content {
  font-family: 'Josefin Sans', proxima-nova, Helvetica;
  font-size: 150%;
}

.wrapper {
  position: fixed;
  left: 50%;
  bottom: -10em;
  height: 20em;
  width: 20em;
  margin-left: -10em;
  border-radius: 50%;
/*  background-color: #f0a0a0;*/
/*    background-color: rgba(255, 255, 255, 0.15);*/
  overflow:hidden;
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
}

.nav .button {
  border: none;
  color: #000000;
  text-align: center;
  font-size: 1.8em;
  height: 3em;
  width: 3em;
  background-color: #ffffff;
/*    background-image: url(http://imgalper.com/cartis/img/bg-button.png);*/
  bottom: -1.5em;
  position: fixed;
  left: 50%;
  margin-left: -1.5em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
}

.wrapper li {
  position: absolute;
  list-style: none;
  font-family: Helvetica, sans-serif;
  height: 10em;
  width: 10em;
/*  background-color: #7c9;*/
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-left: -10em;
  margin-top: -10em;
  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;
}
.wrapper.open {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
}

.wrapper li a{
  display: block;
  font-size: 1.0em;
  height: 16em;
  width: 16em;
  position:absolute;
  bottom: -8em;
  right: -8em;
  border-radious: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-54deg) rotate(-76deg);
  -moz-transform: skew(-54deg) rotate(-76deg);
}

.wrapper li:first-child {
  -webkit-transform: skew(50deg);
  -moz-transform: skew(50deg);
/*  background-color: rgba(255, 255, 255, 0.15);*/
}

.wrapper li:nth-child(2) {
/*  -webkit-transform: rotate(36deg) skew(54deg);*/
    -webkit-transform: rotate(40deg) skew(54deg);
  -moz-transform: rotate(36deg) skew(54deg);
/*  background-color: rgba(255, 255, 255, 0.15);*/
}

.wrapper li:nth-child(3) {
/*  -webkit-transform: rotate(72deg) skew(54deg);*/
    -webkit-transform: rotate(76deg) skew(54deg);
  -moz-transform: rotate(72deg) skew(54deg);
/*  background-color: rgba(255, 255, 255, 0.15);*/
}

.wrapper li:nth-child(4) {
/*  -webkit-transform: rotate(108deg) skew(54deg);*/
    -webkit-transform: rotate(112deg) skew(54deg);
  -moz-transform: rotate(108deg) skew(54deg);
/*  background-color: rgba(255, 255, 255, 0.15);*/
}

.wrapper li:nth-child(5) {
/*  -webkit-transform: rotate(144deg) skew(54deg);*/
    -webkit-transform: rotate(148deg) skew(54deg);
  -moz-transform: rotate(144deg) skew(54deg);
/*  background-color: rgba(255, 255, 255, 0.15);*/
}

.wrapper li:hover {
/*  background-color: #f05860;*/
}



/*
.name0 {
    text-align: center;
    margin-top: 45vh;
}
*/

.name0 {
    position: absolute;
    top: 64%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-64%);
    transform: translateX(-50%) translateY(-64%);
}



.logo0 {
    text-align: center;
    padding-top: 20px;
    color: #fff;
}

.logo2 {
    text-align: center;
    padding-top: 20px;
}

.tt0 {
    color: #fff;
}

.top1 h1 {
    font-size: 20px;
    margin-top: 10px;
    font-family: 'Secular One', sans-serif;
}

.top1 p {
        font-size: 15px;
    margin-top: -30px;
    font-family: 'Secular One', sans-serif;
}

.share_btn {
/*    position: fixed;*/
    float: left;
    margin-top: -80px;
    margin-left: 18px;
}

/*
.share_btn_right {
    position: fixed
    float: right;
    margin-top: -75px;
    margin-right: 15px;
}
*/

.share_btn_right {
    float: right;
    margin-top: -83px;
    margin-right: 15px;
    width: 30px;
}

/*
.feice_laike {
    display: flex;
    float: right;
    margin-top: -60px;
    margin-right: 30px;
    width: 30px;
}
*/

.feice_laike {
    display: flex;
    float: right;
    margin-top: -60px;
    margin-right: 15px;
}

/*
.fa100 {
    color: #000;
}
*/

.txt1 {
    font-size: 12px;
    font-family: arial, sans-serif;
    margin-top: 45px;
    color: #fff;
}


.btn p {
    color: #fff;
    margin-top: 40px;
    font-family: sans-serif;
    font-size: 12px;
}


/*
.tafkid {
    width: 100%;
    text-align: center;
    color: #000;
}
*/

.fa {
    color: #fff;
}

.top1 {
    height: 60px;
    text-align: center;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    line-height: 60px;
    color: #fff;
}




/*
.bottom1 {
    height: 60px;
    position: absolute;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    line-height: 60px;
    color: #fff;
    bottom: 0;
    width: 100%;
    text-align: center;
}
*/


.bottom1 {
    position: absolute;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    bottom: 0;
    padding-top: 10px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-family: 'Secular One', sans-serif;
}


/*
.bars0 {
    color: #000;
}
*/

/*
.fa1 {
    color: #3B5998;
}
.fa2 {
    color: #DD4B39;
}
.fa3 {
    color: #00ACEE;
}
.fa4 {
    color: #EA4C89;
}
.fa5 {
    color: #0E76A8;
}
.fa6 {
    color: #a320cb;
}
.fa7 {
    color: #FF0084;
}
.fa0 {
    color: #01E675;
}
*/

.feice_laike_top {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 1;
    width: 95px;
    height: 60px;
}

.txt2 {
    position: absolute;
    font-size: 12px;
    font-family: arial, sans-serif;
    color: #fff;
    left: 20px;
    top: 16px;
    height: 0;
}


/*efeito fadein*/

.animation-box {
  width: 75%;
  height: 27.5rem;
text-align: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
    top: -180px;
}

.animation-container {
  width: 1000rem;
  height: 30rem;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bottomFadeOut {
  0% {
    position: absolute;
    bottom: -5rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    bottom: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
  
}

@keyframes topFadeOutVertical {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 45%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rightFadeInOut {
  0% {
    position: absolute;
    right: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    right: 10rem;
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 10rem;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

.first-text {
  font-size: 15px;
    font-weight: bold;
  position: absolute;
/*  left: 0.5rem;*/
    top: 13rem;
  opacity: 0;
  animation-name: topFadeOut;
  animation-duration: 5s;
  color: white;
}

.first-text2 {
  font-size: 20px;
  position: absolute;
  left: -1rem;
    margin-top: 50px;
    top: 18rem;
  opacity: 0;
  animation-name: topFadeOut;
  animation-duration: 5s;
  color: white;
}

/*efeito fadein end*/







@media screen 
  and (max-width: 320px) 
   
   {
      
      .big0 {
    height: 8em;
  width: 8em;
}
       .menu .btn {
       width: 75%;
    height: 75%;
}
       
       .menu.active .rotater:nth-child(1) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(22.5deg);
          transform: translateY(-7em) rotate(22.5deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-22.5deg);
          transform: translateY(-7em) rotate(-22.5deg);
}

.menu.active .rotater:nth-child(3) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-67.5deg);
          transform: translateY(-7em) rotate(-67.5deg);
}

.menu.active .rotater:nth-child(4) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-112.5deg);
          transform: translateY(-7em) rotate(-112.5deg);
}


.menu.active .rotater:nth-child(5) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-157.5deg);
          transform: translateY(-7em) rotate(-157.5deg);
}


.menu.active .rotater:nth-child(6) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-202.5deg);
          transform: translateY(-7em) rotate(-202.5deg);
}


.menu.active .rotater:nth-child(7) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-247.5deg);
          transform: translateY(-7em) rotate(-247.5deg);
}


.menu.active .rotater:nth-child(8) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-292.5deg);
          transform: translateY(-7em) rotate(-292.5deg);
}
       
}