/* CSS Document */
@charset "UTF-8";
@import url('../css/font.css');

@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir.eot');
  src: local('../fonts/Vazir'), url('../fonts/Vazir.woff') format('woff'), url('../fonts/Vazir.ttf') format('truetype'), url('../fonts/Vazir.svg') format('svg');
}

body {
  font-family: "Vazir";
  direction: rtl;
  background: #D5F7F6;
  background-image: url("../pics/download.svg");
}

/* Whole thing */
.wrapper{
  width:100%;
  height:550px;
  position: absolute;
  left:0;
  right:0;
  margin: 100px auto 0;
  overflow:hidden;
  box-shadow: -4px 12px 0 -6px rgba(0, 0, 0, 0.10);
}

/* hair right */
.wrapper:after {
  content: "";
  position:absolute;
  z-index:2;
  left: 0;
  right:0;
  width: 20px;
  margin: 0 auto;
  top:-7px;
  transform: rotate(30deg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #D5F7F6;
}

/* hair left */
.wrapper:before {
  content: "";
  position:absolute;
  z-index:2;
  left: 30px;
  right:0;
  width: 20px;
  margin: 0 auto;
  top:-10px;
  transform: rotate( 30deg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #D5F7F6;
}

/* monster body */
.Body{
  position:absolute;
  z-index:1;
  overflow:hidden;
  left:0;
  right:0;
  margin: 0 auto;
  width:180px;
  height:320px;
  background-color: #54BC9B;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* eyeline left */
.Body:before {
  content: "";
  width: 35px;
  height: 4px;
  background:#000;
  left:48px;
  top:70px;
  position:absolute;
  z-index:1;
  transform: rotate(30deg);
}

/* eyeline right */
.Body:after {
  content: "";
  width: 35px;
  height: 4px;
  background:#000;
  right:48px;
  top:70px;
  position:absolute;
  z-index:100;
  transform: rotate(-30deg);
}

/*Left Eye holder*/
.LeftEye,.LeftEyeLeft{
  width: 30px;
  height: 30px;
  background:#fff;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: solid 1px #000;
  left:45px;
  top:70px;
  position:absolute;
  overflow:hidden;
}

/* left eyeball */
.LeftEye:after {
  content: "";
  width: 20px;
  height: 20px;
  background:#000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  left:-3px;
  top:5px;
  position:absolute;
  z-index:1;
  animation:RightEyeRight 1s forwards;
  -webkit-animation: RightEyeRight 1s forwards;
}

/* left eye animation */
.LeftEyeLeft:after {
  content: "";
  width: 20px;
  height: 20px;
  background:#000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  left:13px;
  top:5px;
  position:absolute;
  z-index:1;
  animation:RightEyeLeft 1s forwards;
  -webkit-animation: RightEyeLeft 1s forwards;
}

/* right eye holder */
.RightEye,.RightEyeRight{
  width: 30px;
  height: 30px;
  background:#fff;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: solid 1px #000;
  Right:45px;
  top:70px;
  position:absolute;
  overflow:hidden;
}

/* right eyeball */
.RightEye:after {
  content: "";
  width: 20px;
  height: 20px;
  background:#000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  left:-4px;
  top:5px;
  position:absolute;
  z-index:1;
  animation:RightEyeLeft 1s forwards;
  -webkit-animation: RightEyeLeft 1s forwards;
}
/* right animation */
.RightEyeRight:after {
  content: "";
  width: 20px;
  height: 20px;
  background:#000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  left:-4px;
  top:5px;
  position:absolute;
  z-index:1;
  animation:RightEyeRight 1s forwards;
  -webkit-animation: RightEyeRight 1s forwards;
}

/* right eye shadow */
.EyeShadows{
  width: 35px;
  height: 27px;
  background: rgba(1, 4, 3, 0.64);
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  opacity:.1;
  Right:35px;
  top:70px;
  position:absolute;
  z-index:-1;
  transform: rotate(-50deg);
}

/* left eye shadow */
.EyeShadows:after{
  content: "";
  width: 35px;
  height: 27px;
  background: rgba(1, 4, 3, 0.64);
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  opacity:1;
  left:-47px;
  top:-58px;
  position:absolute;
  z-index:5;
  transform: rotate(-90deg);
  opacity:1;
}

/* right cheek shadow */
.MouthShadows{
  width: 15px;
  height: 20px;
  background:rgba(1, 4, 3, 0.64);
  -moz-border-radius:50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  opacity:.1;
  Right:25px;
  top:130px;
  position:absolute;
  z-index:-1;
  transform: rotate(-50deg);
}

/* left cheek shadow */
.MouthShadows:after{
  content: "";
  width: 15px;
  height: 20px;
  background: rgba(1, 4, 3, 0.64);
  -moz-border-radius:80%;
  -webkit-border-radius: 80%;
  border-radius: 80%;
  left:-70px;
  top:-85px;
  position:absolute;
  z-index:5;
  transform: rotate(-90deg);
  opacity:1;
}

/* mouth holder */
.Mouth {
  width: 50px;
  height: 20px;
  left:67px;
  top:125px;
  position:absolute;
  z-index:1;
  background: #000;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  overflow:hidden;
}

/* right tooth*/
.Mouth:before {
  content: "";
  left:30px;
  top:0;
  position:absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #fff;
  transform: rotate(0deg);
}

/* theet holder */
.Theet {
  width: 50px;
  height: 20px;
  left:67px;
  top:125px;
  position:absolute;
  z-index:1;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  overflow:hidden;
}

/* mid tooth*/
.Theet:after {
  content: "";
  left:20px;
  top:0;
  position:absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #fff;
  transform: rotate(0deg);
}

/* left tooth*/
.Theet:before {
  content: "";
  left:10px;
  top:0;
  position:absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #fff;
  transform: rotate(0deg);
}

/* right hand holder */
.RightHand {
  width: 100px;
  height: 200px;
  right:-160px;
  left:0;
  margin: 0 auto;
  top:149px;
  position:absolute;
  border-bottom:0 solid #fff;
  border-left:0 solid #fff;
  border-top: 10px solid #DE65BA;
  border-right: 0 solid #fff;
  transform: rotate(-0deg);
  border-radius: 50%/80px 100px 0 0;
}

/* right finger */
.RightHand:before {
  right:-3px;
  top:30px;
  position:absolute;
  content: "";
  z-index:8;
  background:#DE65BA;
  transform: rotate(50deg);
  width: 20px;
  height: 3px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 50%;
  border-radius:50%;
}
/* left finger */
.RightHand:after {
  right:4px;
  top:33px;
  position:absolute;
  content: "";
  z-index:8;
  background:#DE65BA;
  transform: rotate(-90deg);
  width: 20px;
  height: 3px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 50%;
  border-radius:50%;
}

/* left hand holder */
.LeftHand {
  width: 100px;
  height: 200px;
  left:-160px;
  right:0;
  margin: 0 auto;
  top:150px;
  position:absolute;
  border-bottom:0 solid #fff;
  border-left:0 solid #fff;
  border-top: 10px solid #DE65BA;
  border-right: 0 solid #fff;
  transform: rotate(-0deg);
  border-radius: 50%/80px 100px 0 0;
}

/* right finger */
.LeftHand:before {
  left:0;
  top:33px;
  position:absolute;
  content: "";
  z-index:8;
  background:#DE65BA;
  transform: rotate(90deg);
  width: 20px;
  height: 3px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 50%;
  border-radius:50%;
}
/* left finger */
.LeftHand:after {
  left:-7px;
  top:32px;
  position:absolute;
  content: "";
  z-index:8;
  background:#DE65BA;
  transform: rotate(-50deg);
  width: 20px;
  height: 3px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 50%;
  border-radius:50%;
}

/* horns holder */
.Horns{
  width: 150px;
  height: 90px;
  border-radius: 50%;
  right:0;
  left:0;
  margin: 0 auto;
  top:-30px;
  border: 4px solid transparent;
  box-shadow: inset 0 16px #DE65BA, inset 0 16px 1px 1px #DE65BA;
  -moz-box-shadow: inset 0 16px #DE65BA, inset 0 16px 1px 1px #DE65BA;
  transform: rotate(-180deg);
  position:absolute;
  overflow:hidden;
  z-index:0;
}

/* horns dots left I */
.Horns:after {
  right:5px;
  top:30px;
  position:absolute;
  content: "";
  background:#C4E86C;
  transform: rotate(0deg);
  width: 5px;
  height: 5px;
  border-radius:50%;
  opacity:0.5;
}
/* horns dots left II */
.Horns:before {
  right:15px;
  top:22px;
  position:absolute;
  content: "";
  background:#C4E86C;
  transform: rotate(0deg);
  width: 7px;
  height: 7px;
  border-radius:50%;
  opacity:0.5;
}

/* horns dots right holder */
.HornsExtras{
  width: 150px;
  height: 90px;
  border-radius: 50%;
  left:135px;
  top:-30px;
  border: 4px solid transparent;
  background:#000;
  position:absolute;
  overflow:hidden;
  z-index:1;
}

/* horns dots right I */
.HornsExtras:after {
  left:9px;
  top:29px;
  position:absolute;
  content: "";
  background:#C4E86C;
  transform: rotate(0deg);
  width: 5px;
  height: 5px;
  border-radius:50%;
  opacity:0.5;
}

/* horns dots right II */
.HornsExtras:before {
  left:1px;
  top:37px;
  position:absolute;
  content: "";
  background:#C4E86C;
  transform: rotate(0deg);
  width: 6px;
  height: 6px;
  border-radius:50%;
  opacity:0.5;
}

/* body lines I */
.BodyTexture{
  width: 500px;
  height: 100px;
  border: solid 3px #43A485;
  border-color: #43A485 transparent transparent transparent;
  border-radius: 60%/100px 100px 0 0;
  right:-150px;
  top:80px;
  position:absolute;
  transform: rotate(180deg);
  opacity:0.3;
}

/* body lines II */
.BodyTexture:before{
  content: "";
  width: 500px;
  height: 100px;
  border: solid 3px #43A485;
  border-color: #43A485 transparent transparent transparent;
  border-radius: 60%/100px 100px 0 0;
  right:10px;
  top:-15px;
  position:absolute;
  transform: rotate(-2deg);
}

/* body lines III */
.BodyTexture:after{
  content: "";
  width: 500px;
  height: 100px;
  border: solid 3px #43A485;
  border-color: #43A485 transparent transparent transparent;
  border-radius: 60%/100px 100px 0 0;
  right:10px;
  top:10px;
  position:absolute;
  transform: rotate(-2deg);
}

/* txt holder*/
.TextHolder{
  position:absolute;
  bottom:0;
  width: 100%;
  height:350px;
  overflow:hidden;
}

/* txt holder green border */
.TextHolder:after {
  content: "";
  position:absolute;
  z-index:3;
  bottom:9px;
  left:8px;
  width:97.7%;
  height:330px;
  border:solid #54BC9B 2px;
}

/* txt holder white background */
.TextHolder:before {
  content: "";
  position:absolute;
  z-index:2;
  width:100%;
  height:350px;
  background-color:#fff;
}

/* actual texts holder */
.Texts{
  position:relative;
  z-index:9999;
  bottom:0;
  left:0;
  width:90%;
  height:100%;
  overflow:hidden;
  margin: 1% auto;
  text-align:center;
  padding:10px;
  Font-size:30px;
  line-height:45px;
}
/* problems here */
span{
  white-space:nowrap;
  text-align: center;
  display: block;
  background:#F6BA3F;
  padding-left:15px;
  padding-right:15px;
  border-radius: 30px;
  overflow:hidden;
  width:300px;
  max-width: 100%;
  margin: 0 auto 15px;
  font-size: 24px;
  color:#fff;
  position:relative;
}

span:after{
  content: "";
  position:absolute;
  width: 290px;
  height: 80%;
  left:6px;
  right: 4px;
  top:5px;
  opacity:0.6;
  padding-left:25px;
  padding-right:25px;
  border-radius: 30px;
  border: solid 2px #fff;
}


.Return{
  font-size:15px;
  text-align: center;
  background:#DD3A75;
  padding-left:25px;
  color:#fff;
  padding-right:25px;
  border-radius: 30px;
  overflow:hidden;
  width:200px;
  max-width: 100%;
  height:40px;
  position:relative;
  margin: 2px auto 10px;
}

.Return:after{
  content: "";
  position:absolute;
  width: 194px;
  height: 80%;
  left:3px;
  top:4px;
  opacity:0.6;
  padding-left:25px;
  padding-right:25px;
  border-radius: 30px;
  border: solid 2px #fff;
}

.FourOhFour{
  font-family: 'Cabin Sketch', cursive;
  font-size:100px;
  line-height:85px;
  -moz-animation: color_change 1s infinite alternate,
  opacity 1s infinite alternate;
  -ms-animation: color_change 1s infinite alternate,
  opacity 1s infinite alternate;
  -o-animation: color_change 1s infinite alternate,
  opacity 1s infinite alternate;
  animation: color_change .1s infinite alternate,
  opacity 1s infinite alternate;
  -webkit-animation: color_change .1s infinite alternate,
  opacity 1s infinite alternate;
}


@media screen and (max-width: 800px){
  .wrapper{
    margin-top: 50px;
  }
}


/* animations */

@-webkit-keyframes opacity {
  from {opacity:0;}
  to {opacity:1; }
}
@-moz-keyframes opacity {
  from {opacity:0;}
  to {opacity:1; }
}
@-ms-keyframes opacity {
  from {opacity:0;}
  to {opacity:1; }
}
@-o-keyframes opacity {
  from {opacity:0;}
  to {opacity:1; }
}
@keyframes opacity {
  from {opacity:0;}
  to {opacity:1; }
}



@-webkit-keyframes color_change {
  from { color: black; }
  to { color: #54BC9B; }
}
@-moz-keyframes color_change {
  from { color: blue; }
  to { color: red; }
}
@-ms-keyframes color_change {
  from { color: black; }
  to { color: #54BC9B; }
}
@-o-keyframes color_change {
  from { color: black; }
  to { color: #54BC9B; }
}
@keyframes color_change {
  from { color: black; }
  to { color: #54BC9B; }
}

@keyframes RightEyeRight {
  from {left:-4px;}
  to {left:15px; }
}

@-webkit-keyframes RightEyeRight {
  from {left:-4px;}
  to {left:15px; }
}


@keyframes RightEyeLeft {
  from {left:15px;}
  to {left:-4px; }
}

@-webkit-keyframes RightEyeLeft {
  from {left:15px;}
  to {left:-4px; }
}