@import url(https://fonts.googleapis.com/css?family=Jockey+One);

body{padding:20px 80px 0;
background-color:#aaa;
  text-align:center;
}

div{
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  
}

.box{
  position:relative;
  text-align:center;  
  z-index:1;
  
}
.box li{
    list-style-type:none;
    /*margin:0 auto;/**/
}
.free{
  width:150px;
  height:122px;
  
  background:#F37600; 
    /*
http://www.workwithcolor.com/hsl-color-schemer-01.htm?q=252726,282A29,2A2D2B,2D2F2E,2F3230,313533,343736,363A38,393C3B,3B3F3D
    */
  background:#ffffff;
  border-radius:75px;
  box-shadow:3px 3px 10px  rgba(255, 255, 255, 0.8);
  
  color:#3F2A5F;
  display:block;
  font-size:30px;
  font-family: 'Jockey One', serif;
  letter-spacing:-1px;
  margin:0;
  padding-top:30px;
  padding-bottom:0;
  position:relative;
  top:5px;
  text-transform:uppercase;
  z-index:2;
    
    opacity:1;
}
.mensagem{
  font-family: Verdana;
  font-size:20px;
}
.try{
  color:#3F2A5F;
  font-family: Verdana;
  font-size:18px;
  letter-spacing:-1px;
  background:*#2D2F2E;
  background: #ffff;
  
  border-radius:14px 14px 75px 75px;
  height:89px;
  margin:0 auto;
  padding:0;
  position:absolute;
  top:70px;
  width:150px;
  z-index:3;
     opacity:1;
}
.start{
  color:#3F2A5F;
  font-family: 'Jockey One', serif;
  font-size:25px;
  letter-spacing:-1px;
  text-transform:uppercase;
  
  background:
    /*-webkit-linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(192,67,32,0) 10%)0 39px,*/
    -webkit-radial-gradient(ellipse closest-side, #F37600 50%, rgba(192,67,32,0) 50%)50% 62%;
  background-size:320px 320px;
  background-color:transparent;
  
  display:block;
  height:40px;
  left:-8px;
  margin:0;
  margin-top:10px;
  overflow:hidden;
  position:relative;
  top:-68px;
  width:165px;
  z-index:4;
    
    opacity:1;
}
.start a{
  color:inherit;
  text-decoration:inherit;
  display:block;
  width:165px;
  height:165px;
  border-radius:82.5px;
  border:0;
  padding:0;
  margin:0;
    background:#C04320;
  background:
    -webkit-linear-gradient(0deg,rgba(0,0,0,.2) 0,rgba(192,67,32,0) 50px,rgba(192,67,32,0) 115px,rgba(0,0,0,.2) 165px),
    -webkit-linear-gradient(90deg,rgba(0,0,0,.1) 0,rgba(192,67,32,0) 20px,rgba(192,67,32,0) 38px,rgba(255,255,255,.8) 39px,rgba(255,255,255,.1) 50px)0 141px;
  position:absolute;
  top:-102px;
  line-height:241px;
  text-shadow:1px 1px 1px rgba(255,255,255,.3);
    z-index:5;
    
    opacity:1;
}
.free:before{
    content:'.';
    display:block;
    height:0px;
    border:10px solid transparent;
    border-bottom-color:#021;
    position:absolute;
    top:67px;
    left:-6px;
    width:141px;
    
    opacity:1;
}
.free:after{
    content:'.';
    background:transparent;
    background:
       /* -webkit-linear-gradient(-55deg, #793532 17px, transparent 17px)-30px 19px,
        -webkit-linear-gradient(55deg, #793532 17px, transparent 17px)-30px 19px,*/
        -webkit-linear-gradient(
    0deg,rgba(121,53,50,0) 0,rgba(0,0,0,1) 45px,rgba(0,0,0,1) 165px,rgba(121,53,50,0) 208px
    /*,#793532 208px,#793532 234px*/
    ,transparent 234px);
    background-size:262px 38px;
    color:#000;
    overflow:hidden;
    display:block;
    height:38px;
    position:absolute;
    text-align:center;
    top:77px;
    left:-30px;
    width:262px;
    
    opacity:1;
}

.box:before{
    content:'';
    display:block;
    height:0px;
    /*border:35px solid transparent;*/
    border:0px solid transparent;
    border-bottom:35px solid #F37600;
    position:absolute;
    top:85px;
    left:0;
    width:225px;
    
    opacity:1;

}
/*
.box:after{
    content:'.';
    display:block;
    height:0px;
    border:35px solid transparent;
    border-top:25px solid #793532;
    position:absolute;
    top:83px;
    left:-56px;
    width:290px;
    
    opacity:1;

}*/



.button-51 {
  background-color: transparent;
  border: 1px solid #266DB6;
  box-sizing: border-box;
  color: #00132C;
  font-family: "Avenir Next LT W01 Bold",sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding: 16px 23px;
  position: relative;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-51:hover,
.button-51:active {
  outline: 0;
}

.button-51:hover {
  background-color: transparent;
  cursor: pointer;
}

.button-51:before {
  background-color: #D5EDF6;
  content: "";
  height: calc(100% + 3px);
  position: absolute;
  right: -7px;
  top: -9px;
  transition: background-color 300ms ease-in;
  width: 100%;
  z-index: -1;
}

.button-51:hover:before {
  background-color: #6DCFF6;
}

@media (min-width: 768px) {
  .button-51 {
    padding: 16px 32px;
  }
}