/*--
	Author: W3Layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
--*/

html,
body {
    margin: 0;
    font-size: 100%;
    font-family: 'Dosis', sans-serif;
    background: #fff;
}

body a {
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-family: 'Dosis', sans-serif;
}

a:hover {
    text-decoration: none;
}

input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="search"] {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-family: 'Dosis', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: 'Dosis', sans-serif;
    letter-spacing: 1px;
    font-weight: 500;
}

p {
color: #333333; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 20px; font-weight: 300; line-height: 1.5625; margin-bottom: 15px;
}

.text-left {
text-align: justify;
font-size: 18px;
color: gray;
}




/*--/header --*/

.container-fluid.gallery-lightbox.my-5 {
    padding-left: 5px;
}

.content-main-w3 {
    position: relative;
    background: #007cc0;
    padding: 3em 0;
}

.content-main-w3-000000 {
    position: relative;
    background: #da14ff;
    padding: 3em 0;
}

.content-main-w3-00000 {
    position: relative;
    background: black;
    padding: 3em 0;
}

.content-main-w3-0000 {
    position: relative;
    background: #FF3E96;
    padding: 3em 0;
}


.content-main-w3-000 {
    position: relative;
    background: #EE7600;
    padding: 3em 0;
}


.content-main-w3-00 {
    position: relative;
    background: #388E8E;
    padding: 3em 0;
}

.content-main-w3-0 {
    position: relative;
    background: #8E8E38;
    padding: 3em 0;
}

.content-main-w3-1 {
    position: relative;
    background: orange;
    padding: 3em 0;
}

.content-main-w3-2 {
    position: relative;
    background: tomato;
    padding: 3em 0;
}

.content-main-w3-3 {
    position: relative;
    background: mediumseagreen;
    padding: 3em 0;
}

.content-main-w3-4 {
    position: relative;
    background: #007cc0;
    padding: 3em 0;
}

.content-main-w3-5 {
    position: relative;
    background: slateblue;
    padding: 3em 0;
}

.content-main-w3-6 {
    position: relative;
    background: violet;
    padding: 3em 0;
}

.content-main-w3-7 {
    position: relative;
    background: #A4A4A4;
    padding: 3em 0;
}

.content-main-w3-8 {
    position: relative;
    background: #FE2E2E;
    padding: 3em 0;
}






a.navbar-brand {
    font-size: 2.5em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    color: #fff;
    margin: 0;
}

a.navbar-brand span {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 4.2px;
    margin-top: -10px;

}

li.nav-item {
    padding: 0 20px;
}

.logo-wthree i {
    color: #fff;
    text-shadow: none;
    font-size: .9em;
}

.bg-light {
    background-color: transparent !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    letter-spacing: 2px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
}

.navbar-light .navbar-nav .show > .span1,
.navbar-light .navbar-nav .active > .span1,
.navbar-light .navbar-nav .span1.show,
.navbar-light .navbar-nav .span1.active {
    color: #fbb034;
}

.navbar-light .navbar-nav .span1:hover,
.navbar-light .navbar-nav .span1:focus {
    color: #fbb034;
    text-decoration: line-through;
}






/*-- //header --*/
/*--about--*/
h2.title-wthree{
      font-size:3em;
     text-transform: uppercase;
     margin-top: -2vw;
     margin-bottom: -2vw;
}
h3.tittle{
      font-size:2em;
}
.about-right h3.ttile {
    font-size: 1.4em;
    line-height: 1.3em;
}

h4.sub-tittle {
    margin: 1.2em 0 0 0;
    font-size: 15px;
    color: #007cc0;
    text-transform: uppercase;
    font-weight: 500;
}

ul.author li {
    list-style: none;
    margin: 0 2em 0 0em;
}

ul.author li img {
    border-radius: 50%;
    -weblit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #ddd;
}

ul.author li {
    color: #888;
    font-size: 1.4em;
    letter-spacing: 1px;
    text-align: left;
}

ul.author li span {
    display: block;
    font-weight: 600;
    color: #37393c;
    font-size: 1.5em;
    text-align: left;
}

.about-right {
    padding-left: 3em;
}
/*-- stats --*/

.stats_info p {
    font-size: 2.5em;
    letter-spacing: 1px;
    line-height: 2;
    color: #ec1c24;
    font-weight: 800;
}
.stats_info h4 {
    color: #4f4f50;
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1em;
}
.stats_info i {
    font-size: 2.3em;
    color: #3f3f40;
    margin: 0;
    margin-top: 1.5em;
}
.stats_bottom_grid_left img {
	margin: 0 auto;
}
.stats_info {
	text-align: center;
	padding: 0;
	border-top: none;
	border-bottom: none;
}

.stats_info:nth-child(3) {
	border-right: 0px;
}

.stats_info:nth-child(2) {
	border-left: 0px;
	border-right: 0px;
}
/*--//stats--*/
/*--team--*/

/*********************** Demo - 16 *******************/

.box16 {
    text-align: center;
    color: #fff;
    position: relative;
}

.box16 .box-content,
.box16:after {
    width: 100%;
    position: absolute;
    left: 0
}

.box16:after {
    content: "";
    // height: 100%;  // add this to enable bottom colors
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .08) 69%, rgba(255, 99, 71, 0.76) 100%);
    top: 0;
    transition: all .5s ease 0s
}

.box16 .post,
.box16 .title-wthree {
    transform: translateY(145px);
    transition: all .4s cubic-bezier(.13, .62, .81, .91) 0s
}

.box16:hover:after {
}

.box16 img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;

}

.box16 .box-content {
    padding: 10px;
    margin-bottom: -740px;
    bottom: 0;
    left: 50%;
    margin-left: -230px;
    z-index: 1
}

.box16 .title-wthree {
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 40px;
}

.box16 .post {
    display: block;
    padding: 40px 0px 0px;
    font-size: 20px
}

.box16 .social li a,
.box17 .icon li a {
    border-radius: 50%;
    font-size: 15px;
    color: #fff;
}

.box16:hover .post,
.box16:hover .title-wthree {
    transform: translateY(0)
}

.box16 .social {
    list-style: none;
    padding: 0 0 5px;
    margin: 40px 0 25px;
    opacity: 0;
    position: relative;
    transform: perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);
    transition: all .6s cubic-bezier(0, 0, .58, 1) 0s
}

.box16:hover .social {
    opacity: 1;
    transform: perspective(500px) rotateX(0) rotateY(0) rotateZ(0)
}

.box16 .social:before {
    content: "";
    width: 50px;
    height: 2px;
    background: #fff;
    margin: 0 auto;
    position: absolute;
    top: -23px;
    left: 0;
    right: 0
}

.box16 .social li {
    display: inline-block
}

.box16 .social li a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 40px;
    background: #ffc107;
    margin-right: 10px;
    transition: all .3s ease 0s;
}

.box17 .icon li,
.box17 .icon li a {
    display: inline-block
}

.box16 .social li a:hover {
    background: #007cc0;
}

.box16 .social li:last-child a {
    margin-right: 0
}

@media only screen and (max-width:990px) {
    .box16 {
        margin-bottom: 30px
    }
}

/*--//team--*/
/*-- Pricing --*/
#plans {
    background: #fbb034;
}
.price-main-info .card-header h4 {
    color: #f7f7f7;
    font-size: 1.7em;
    font-weight: 600;
    line-height: 1em;
    padding-top: 2em;
}

.price-main-info .card-header h4 span {
    display: block;
    font-weight: 100;
}

.price-main-info .card-header {
    background: url(../images/price.jpg)no-repeat 0px 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    min-height: 192px;
}

.price-main-info .card-body {
    background: #fff;
    padding: 4em 1em;
}

.pricing-card-title-wthree span {
    font-size: .5em;
    display: inline-block;
    color: #000;
    font-weight: 300;
}

.price-main-info small.text-muted {
    font-size: 0.5em;
}

ul.list-unstyled li {
    font-size: 15px;
    color: #7d7d7d;
    line-height: 2.5em;
}

.price-main-info h5.card-title-wthree {
    font-size: 3em;
    color: #1c1c1d;
    font-weight: 700;
}

.card-deck .card {
    padding: 0px;
}

.price-inner .log-in a {
    font-size: 0.9em;
}

.price-inner.card h4 {
    color: #a7aaad;
    font-size: 1.1em;
}

.price-main-info.card {
    border-radius: 0;
    border: none;
    background: none;
}
a.hover-2.btn {
    border: 2px solid #ffc107;
    color: #444;
    padding:0.4em 1.2em;
}
a.hover-2.btn:hover {
    background:#ffc107;
}
/*--//Pricing--*/
/*--/contact--*/

.main_grid_contact {
    background: #f7f7f7;
    padding: 9em 5em;
}

.main_grid_contact label {
    color: #676b6d;
    letter-spacing: 1px;
    font-size: 1.2em;
}

.main_grid_contact input[type="text"],
.main_grid_contact input[type="email"],
.main_grid_contact textarea {
    outline: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #777;
    background: #fff;
    width: 100%;
    letter-spacing: 1px;
    border: 1px solid #ebeeef;
    border-radius: 0px;
}

.main_grid_contact textarea {
    min-height: 80px;
    margin: 1em 0em;
    resize: none;
}

.main_grid_contact .input-group1 input[type="submit"] {
    outline: none;
    padding: 20px 0;
    font-size: 19px;
    color: #fff;
    background: #343a40;
    border: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0px;
}

.main_grid_contact .input-group1 input[type="submit"]:hover {
    background: #007cc0;
}

.map {
    padding: 0;
}

.map iframe {
    border: none;
    width: 100%;
    height: 100%;
}

.address-grid-w3ls i {
    font-size: 1.5em;
    color: #ffc107;
    background: #323435;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    line-height: 2.5em;
}

.address-right h6 {
    font-size: 1.2em;
    color: #3f4142;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

.address-right p,
.address-right p a {
    color: #7c848c;
}

.main_grid_contact h4 {
    font-size: 2em;
    color: #464646;
    text-shadow: 0 1px 2px rgba(18, 18, 19, 0.13);
    text-transform: uppercase;
}
/*--//contact--*/
/*-- /footer --*/

footer {
    margin: 0 auto;
    width: 100%;
}

@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: saturate(0) contrast(1) brightness(0.4);
  }
  25% {
    -webkit-filter: saturate(1) contrast(1) brightness(0.5);
  }
  50% {
    -webkit-filter: saturate(2) contrast(2) brightness(0.5);
  }
  75% {
    -webkit-filter: saturate(1) contrast(1) brightness(0.5);
  }
  100% {
    -webkit-filter: saturate(0) contrast(1) brightness(0.4);
  }
}
@keyframes filter-animation {
  0% {
    filter: saturate(0) contrast(1) brightness(0.4);
  }
  25% {
    filter: saturate(1) contrast(1) brightness(0.5);
  }
  50% {
    filter: saturate(2) contrast(2) brightness(0.5);
  }
  75% {
    filter: saturate(1) contrast(1) brightness(0.5);
  }
  100% {
    filter: saturate(0) contrast(1) brightness(0.4);
  }
}




.inner-page-footer {
    background: #007cc0;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-1 {
    background: orange;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-2 {
    background: tomato;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-3 {
    background: mediumseagreen;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-4 {
    background: #007cc0;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-5 {
    background: slateblue;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-6 {
    background: violet;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-7 {
    background: #A4A4A4;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}

.inner-page-footer-8 {
    background: #FE2E2E;
    padding: 15em 0;
    width: 100%;
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    -webkit-animation: filter-animation 5s infinite;
    animation: filter-animation 5s infinite;
}






.social_media_w3layouts {
    margin: 2em 0 2em 0;
}

.social_media_w3layouts ul li {
    margin: 0 0.5em;
    font-size: 1.2em;
}

.agileinfo_share {
    margin-right: 1em !important;
    color: #fff;
}

ul.social-icons li {
    list-style: none;
    display: inline-block;
}

ul.social-icons li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    line-height: 34px;
    background: transparent;
    border: 2px solid #fff;
    text-align: center;
}

ul.social-icons li a:hover {
      color: #ffc107;
}
p.copy-right-w3ls {
    color: #fff;
    letter-spacing: 2px;
}

p.copy-right-w3ls a {
    color: #ffc107;
    text-decoration: none;
}

p.copy-right-w3ls a:hover {
    color: #fff;
}

/*-- //footer --*/

/*-- to-top --*/

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 2%;
    overflow: hidden;
    z-index: 999;
    width: 40px;
    height: 40px;
    border: none;
    text-indent: 100%;
    background:#104f71 url(../images/move_up.png) no-repeat 11px 11px;
}

#toTopHover {
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

/*-- //to-top --*/
@media(max-width:1280px){
        .main_grid_contact {
        background: #f7f7f7;
        padding: 6em 4em;
    }
    h3.tittle {
        font-size: 1.6em;
    }
}
@media(max-width:991px){
        ul.navbar-nav.mx-auto {
        text-align: center;
        margin-top: 1em;
    }
    .content-main-w3 {
        padding: 2em 0;
    }
    .about-right {
        padding-left: 1em;
        margin-top: 2em;
    }
    .box16 .social li a {
        display: block;
        width: 36px;
        height: 36px;
        line-height: 40px;
        margin-right: 0px;
        transition: all .3s ease 0s;
    }
    .team-gd {
        margin-top: 1em;
    }
    .box16 .post {
        display: block;
        padding: 0px 0;
        font-size: 15px;
    }
    .box16 .title-wthree {
        font-size: 17px;
        margin: 0px 0 5px;
    }
    .box16 .box-content {
        padding: 0px 5px;
        margin-bottom: 49px;
        bottom: 0;
        z-index: 1;
    }
    .price-main-info .card-body {
        padding: 2em 0em;
        margin-top:1em;
    }
    .testimonials-gd {
        float: left;
        width: 50%;
    }
    .main_grid_contact {
        padding: 4em 3em;
    }
}
@media(max-width:900px){
        h2.title-wthree {
      font-size: 2.4em;
    }
}
@media(max-width:800px){
        .box16 .title-wthree {
        font-size: 15px;
        margin: 0px 0 5px;
    }
}
@media(max-width:767px){
        .inner-page-footer {
        padding: 1em 0;
    }
    .address-right.text-left {
        margin-top: 1em;
    }
    .address-info {
        margin-top: 1em;
    }
    .price-main-info:nth-child(2) {
        margin: 1em 0;
    }
    .main_grid_contact {
        padding: 4em 2em;
    }
}

@media(max-width:736px){
        h2.title-wthree {
      font-size: 2.2em;
    }
    .address-right.text-left {
        margin-top: 1em;
        text-align: center!important;
    }
}
@media(max-width:667px){
   .main_grid_contact h4 {
    font-size: 1.6em;
    }
}
@media(max-width:640px){
        h2.title-wthree {
        font-size:2em;
    }
    .inner-page-footer {
        padding: 1em 2em;
    }

}
@media(max-width:600px){
        .address-right h6 {
       font-size: 1em;
    }
     .content-main-w3 {
        padding: 1.5em 0;
    }
}
@media(max-width:568px){
        .main_grid_contact label {
        font-size: 1em;
    }
    a.navbar-brand span {
        font-size: 12px;
        letter-spacing: 3px;
        margin-top: -10px;
    }
}
@media(max-width:480px){
        .testimonials-gd {
        float: left;
        width: 100%;
    }
    .main_grid_contact h4 {
    font-size: 1.4em;
    }
}
@media(max-width:440px){
        h2.title-wthree {
        font-size: 1.8em;
    }
}
@media(max-width:414px){

}
@media(max-width:384px){

}
@media(max-width:375px){

}
@media(max-width:320px){

}
/*--//responsive--*/



.clouds_one {
  background: url("/images/cloud_one.png");
  position: absolute;
  left: 0;
  top: -50px;
  height: 200px;
  width: 300%;

  -webkit-animation: cloud_one 100s linear infinite;
  -moz-animation: cloud_one 100s linear infinite;
  -ms-animation: cloud_one 100s linear infinite;
  -o-animation: cloud_one 100s linear infinite;
  animation: cloud_one 100s linear infinite;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)
}

.clouds_two {
  background: url("/images/cloud_two.png");
  position: absolute;
  left: 0;
  top: -0px;
  height: 200px;
  width: 300%;

  -webkit-animation: cloud_two 100s linear infinite;
  -moz-animation: cloud_two 100s linear infinite;
  -ms-animation: cloud_two 100s linear infinite;
  -o-animation: cloud_two 100s linear infinite;
  animation: cloud_two 100s linear infinite;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)
}

.clouds_three {
  background: url("/images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 200px;
  width: 300%;

  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -ms-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)
}


@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}




.c-preview {
  background: #000;
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-repeat: no-repeat;
  display: flex;
  max-width: 100vw;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: .5s all;
  
  &__img {
    position: absolute;
    left: 0;
    top: 0;
    background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    mix-blend-mode: screen;
  }
  
  &:hover {
    background-position: 100% 100%;
  }
}


.above-fold {
	position: relative;
	height: 900px;
	overflow: hidden;
        width: 100%;
        margin-top:50px;
}
.hero-section {	
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	z-index: -1;
}
.hero-section img {
  position: absolute;
  opacity: 1;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 100%;

}


.owl  {
        position: absolute;
        top: 0px;
        left: 8%;

        display: inline-block;
        width: 90px;
        height: 50px;
        z-index: 100;

        background: url("/images/owl.gif") no-repeat;
        cursor: url(/images/use153.cur), progress !important;
}

.owlfly {
        position: absolute;
        top: 0px;
        left: 8%;

        display: inline-block;
        width: 90px;
        height: 50px;
        z-index: 100;


        background: url("/images/owl.gif") no-repeat;
        cursor: url(/images/use153.cur), progress !important;

        -webkit-animation: moveowl 5s ease forwards;
        animation: moveowl 5s ease forwards;
}
@keyframes moveowl {
   0% { transform: translate(  0px,     0px); }
 100% { transform: translate(  0px,   95px); }
}


.owl1  {
        position: absolute;
        top: 0px;
        right: 10%;

        display: inline-block;
        width: 90px;
        height: 50px;
        z-index: 100;

        background: url("/images/owl.gif") no-repeat;
        cursor: url(/images/use153.cur), progress !important;
}

.owlfly1 {
        position: absolute;
        top: 0px;
        right: 10%;

        display: inline-block;
        width: 90px;
        height: 50px;
        z-index: 100;


        background: url("/images/owl.gif") no-repeat;
        cursor: url(/images/use153.cur), progress !important;

        -webkit-animation: moveowl1 5s ease forwards;
        animation: moveowl1 5s ease forwards;
}
@keyframes moveowl1 {
   0% { transform: translate(  0px,     0px); }
 100% { transform: translate(  0px,   95px); }
}







// ufo

@-webkit-keyframes lamps {
  0% {
    box-shadow: 0px 0px 0px 0px #00d1ff, 0px 0px 4px 2px rgba(0, 209, 255, 0.9), -45px 2px 0px 0px #00d1ff, -45px 2px 4px 2px rgba(0, 209, 255, 0.9), -82px 7px 0px 0px #00d1ff, -82px 7px 4px 2px rgba(0, 209, 255, 0.9), -71px 18px 0px 0px #00d1ff, -71px 18px 4px 2px rgba(0, 209, 255, 0.9), 45px 2px 0px 0px #00d1ff, 45px 2px 4px 2px rgba(0, 209, 255, 0.9), 82px 7px 0px 0px #00d1ff, 82px 7px 4px 2px rgba(0, 209, 255, 0.9), 71px 18px 0px 0px #00d1ff, 71px 18px 4px 2px rgba(0, 209, 255, 0.9), 1px 50px 60px 20px rgba(255, 255, 255, 0.9), 1px 70px 30px 20px rgba(255, 255, 255, 0.3), 1px 95px 30px 20px rgba(255, 255, 255, 0.3), 1px 105px 50px 20px rgba(255, 255, 255, 0.3), 1px 115px 50px 20px rgba(255, 255, 255, 0.2), 1px 125px 50px 20px rgba(255, 255, 255, 0.1), 1px 155px 50px 20px rgba(255, 255, 255, 0.1), 1px 115px 120px 80px rgba(255, 255, 255, 0.2); }
  100% {
    box-shadow: 0px 0px 0px 0px #00d1ff, 0px 0px 4px 2px rgba(0, 209, 255, 0), -45px 2px 0px 0px #00d1ff, -45px 2px 4px 2px rgba(0, 209, 255, 0), -82px 7px 0px 0px #00d1ff, -82px 7px 4px 2px rgba(0, 209, 255, 0), -71px 18px 0px 0px #00d1ff, -71px 18px 4px 2px rgba(0, 209, 255, 0), 45px 2px 0px 0px #00d1ff, 45px 2px 4px 2px rgba(0, 209, 255, 0), 82px 7px 0px 0px #00d1ff, 82px 7px 4px 2px rgba(0, 209, 255, 0), 71px 18px 0px 0px #00d1ff, 71px 18px 4px 2px rgba(0, 209, 255, 0), 1px 50px 60px 20px rgba(255, 255, 255, 0.9), 1px 70px 30px 20px rgba(255, 255, 255, 0.3), 1px 95px 30px 20px rgba(255, 255, 255, 0.3), 1px 105px 50px 20px rgba(255, 255, 255, 0.3), 1px 115px 50px 20px rgba(255, 255, 255, 0.2), 1px 125px 50px 20px rgba(255, 255, 255, 0.1), 1px 155px 50px 20px rgba(255, 255, 255, 0.1), 1px 115px 120px 80px rgba(255, 255, 255, 0.2); } }

@keyframes lamps {
  0% {
    box-shadow: 0px 0px 0px 0px #00d1ff, 0px 0px 4px 2px rgba(0, 209, 255, 0.9), -45px 2px 0px 0px #00d1ff, -45px 2px 4px 2px rgba(0, 209, 255, 0.9), -82px 7px 0px 0px #00d1ff, -82px 7px 4px 2px rgba(0, 209, 255, 0.9), -71px 18px 0px 0px #00d1ff, -71px 18px 4px 2px rgba(0, 209, 255, 0.9), 45px 2px 0px 0px #00d1ff, 45px 2px 4px 2px rgba(0, 209, 255, 0.9), 82px 7px 0px 0px #00d1ff, 82px 7px 4px 2px rgba(0, 209, 255, 0.9), 71px 18px 0px 0px #00d1ff, 71px 18px 4px 2px rgba(0, 209, 255, 0.9), 1px 50px 60px 20px rgba(255, 255, 255, 0.9), 1px 70px 30px 20px rgba(255, 255, 255, 0.3), 1px 95px 30px 20px rgba(255, 255, 255, 0.3), 1px 105px 50px 20px rgba(255, 255, 255, 0.3), 1px 115px 50px 20px rgba(255, 255, 255, 0.2), 1px 125px 50px 20px rgba(255, 255, 255, 0.1), 1px 155px 50px 20px rgba(255, 255, 255, 0.1), 1px 115px 120px 80px rgba(255, 255, 255, 0.2); }
  100% {
    box-shadow: 0px 0px 0px 0px #00d1ff, 0px 0px 4px 2px rgba(0, 209, 255, 0), -45px 2px 0px 0px #00d1ff, -45px 2px 4px 2px rgba(0, 209, 255, 0), -82px 7px 0px 0px #00d1ff, -82px 7px 4px 2px rgba(0, 209, 255, 0), -71px 18px 0px 0px #00d1ff, -71px 18px 4px 2px rgba(0, 209, 255, 0), 45px 2px 0px 0px #00d1ff, 45px 2px 4px 2px rgba(0, 209, 255, 0), 82px 7px 0px 0px #00d1ff, 82px 7px 4px 2px rgba(0, 209, 255, 0), 71px 18px 0px 0px #00d1ff, 71px 18px 4px 2px rgba(0, 209, 255, 0), 1px 50px 60px 20px rgba(255, 255, 255, 0.9), 1px 70px 30px 20px rgba(255, 255, 255, 0.3), 1px 95px 30px 20px rgba(255, 255, 255, 0.3), 1px 105px 50px 20px rgba(255, 255, 255, 0.3), 1px 115px 50px 20px rgba(255, 255, 255, 0.2), 1px 125px 50px 20px rgba(255, 255, 255, 0.1), 1px 155px 50px 20px rgba(255, 255, 255, 0.1), 1px 115px 120px 80px rgba(255, 255, 255, 0.2); } }

@-webkit-keyframes floating {
  0% {
    -webkit-transform: rotate(-2deg) scale(0.98) translate(2px, 6px);
            transform: rotate(-2deg) scale(0.98) translate(2px, 6px); }
  50% {
    -webkit-transform: rotate(0deg) scale(1.01) translate(-6px, 2px);
            transform: rotate(0deg) scale(1.01) translate(-6px, 2px); }
  100% {
    -webkit-transform: rotate(2deg) scale(1) translate(1px, 4px);
            transform: rotate(2deg) scale(1) translate(1px, 4px); } }

@keyframes floating {
  0% {
    -webkit-transform: rotate(-2deg) scale(0.98) translate(2px, 6px);
            transform: rotate(-2deg) scale(0.98) translate(2px, 6px); }
  50% {
    -webkit-transform: rotate(0deg) scale(1.01) translate(-6px, 2px);
            transform: rotate(0deg) scale(1.01) translate(-6px, 2px); }
  100% {
    -webkit-transform: rotate(2deg) scale(1) translate(1px, 4px);
            transform: rotate(2deg) scale(1) translate(1px, 4px); } }

@-webkit-keyframes sky {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes sky {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.landscape {
  background: linear-gradient(#252734, #1E2E3D) 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%; }
  .landscape:after, .landscape:before {
    content: '';
    display: block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    left: 10px;
    top: 100px;
    z-index: 1; }
  .landscape:before {
    box-shadow: 76px 22px 0px -4px rgba(255, 255, 255, 0.7) ,482px 120px 0px -4px rgba(255, 255, 255, 0.2) ,751px 785px 0px -4px rgba(255, 255, 255, 0.9) ,513px 529px 0px -4px rgba(255, 255, 255, 0.7) ,433px 798px 0px -4px rgba(255, 255, 255, 0.1) ,531px 259px 0px -4px rgba(255, 255, 255, 0.5) ,391px 654px 0px -4px rgba(255, 255, 255, 0.4) ,781px 513px 0px -4px rgba(255, 255, 255, 0.3) ,557px 579px 0px -4px rgba(255, 255, 255, 0.9) ,248px 206px 0px -4px rgba(255, 255, 255, 0.8) ,395px 373px 0px -4px rgba(255, 255, 255, 0.2) ,293px 387px 0px -4px rgba(255, 255, 255, 0.3) ,172px 725px 0px -4px rgba(255, 255, 255, 0.9) ,31px 456px 0px -4px white ,730px 682px 0px -4px rgba(255, 255, 255, 0.2) ,339px 325px 0px -4px rgba(255, 255, 255, 0.8) ,751px 303px 0px -4px rgba(255, 255, 255, 0.6) ,576px 769px 0px -4px rgba(255, 255, 255, 0.8) ,237px 82px 0px -4px rgba(255, 255, 255, 0.2) ,569px 37px 0px -4px rgba(255, 255, 255, 0.7) ,579px 257px 0px -4px rgba(255, 255, 255, 0.9) ,787px 610px 0px -4px rgba(255, 255, 255, 0.1) ,518px 18px 0px -4px rgba(255, 255, 255, 0.5) ,54px 482px 0px -4px rgba(255, 255, 255, 0.7) ,95px 147px 0px -4px rgba(255, 255, 255, 0.9) ,763px 353px 0px -4px white ,579px 665px 0px -4px rgba(255, 255, 255, 0.4) ,454px 30px 0px -4px rgba(255, 255, 255, 0.6) ,678px 198px 0px -4px rgba(255, 255, 255, 0.9);
    -webkit-animation: sky 5s infinite alternate;
            animation: sky 5s infinite alternate; }
  .landscape:after {
    box-shadow: 710px 530px 0px -4px rgba(255, 255, 255, 0.7) ,73px 408px 0px -4px rgba(255, 255, 255, 0.6) ,100px 540px 0px -4px rgba(255, 255, 255, 0.7) ,601px 452px 0px -4px rgba(255, 255, 255, 0.2) ,353px 284px 0px -4px rgba(255, 255, 255, 0.3) ,85px 20px 0px -4px rgba(255, 255, 255, 0.6) ,715px 513px 0px -4px rgba(255, 255, 255, 0.5) ,468px 641px 0px -4px rgba(255, 255, 255, 0.6) ,390px 151px 0px -4px rgba(255, 255, 255, 0.2) ,94px 492px 0px -4px rgba(255, 255, 255, 0.4) ,292px 255px 0px -4px white ,692px 592px 0px -4px rgba(255, 255, 255, 0.3) ,509px 512px 0px -4px rgba(255, 255, 255, 0.1) ,109px 101px 0px -4px rgba(255, 255, 255, 0.5) ,11px 369px 0px -4px rgba(255, 255, 255, 0.1) ,502px 592px 0px -4px rgba(255, 255, 255, 0.9) ,641px 640px 0px -4px rgba(255, 255, 255, 0.5) ,652px 70px 0px -4px white ,255px 685px 0px -4px rgba(255, 255, 255, 0.9) ,335px 419px 0px -4px rgba(255, 255, 255, 0.1) ,189px 256px 0px -4px rgba(255, 255, 255, 0.3) ,34px 554px 0px -4px rgba(255, 255, 255, 0.2) ,606px 610px 0px -4px rgba(255, 255, 255, 0.3) ,413px 61px 0px -4px rgba(255, 255, 255, 0.1) ,524px 239px 0px -4px rgba(255, 255, 255, 0.7) ,5px 798px 0px -4px rgba(255, 255, 255, 0.7) ,398px 590px 0px -4px rgba(255, 255, 255, 0.9) ,596px 42px 0px -4px rgba(255, 255, 255, 0.6) ,517px 330px 0px -4px rgba(255, 255, 255, 0.7); }


.saucer1 {
  position: relative;
  top: 100px;
  left: 175px;
  cursor: url(/images/use153.cur), progress !important;
  border-radius: 50%;
  height: 10px;
  width: 60px;
  z-index: 2;
  background: red;
  -webkit-animation: floating 7s infinite alternate;
          animation: floating 7s infinite alternate;
  background: transparent;
  box-shadow: 0px 0px 30px 20px #313131, 0px 0px 0px 30px #7C7C7C, 0px 0px 40px 30px rgba(255, 255, 255, 0.4); }
  .saucer1:before {
    width: 8px;
    height: 3px;
    left: 30px;
    top: 16px;
    border-radius: 50%;
    content: '';
    display: block;
    z-index: 1;
    background: #00D1FF;
    position: absolute;
    -webkit-animation: lamps 1s infinite alternate;
            animation: lamps 1s infinite alternate; }
  .saucer1:after {
    width: 200px;
    position: absolute;
    content: '';
    border-radius: 50%;
    width: 240px;
    left: -90px;
    height: 44px;
    background: #272727;
    opacity: 1;
    background: radial-gradient(ellipse at center, #fdfcfd 0%, #fdfcfd 10%, #444444 10%, #444444 7%, #444444 11%, #1c1c1c 100%);
    background-position-y: 135px;
    background-position-x: -20px;
    background-size: 120% 140%;
    box-shadow: 1px -2px 0px 0px #8B8B8B, 1px -3px 0px 0px #222222, 1px -5px 0px 0px #8B8B8B, 1px -5px 60px -2px rgba(255, 255, 255, 0.4);
}


#saucer1 {
  -webkit-animation: movesaucer1 10s  infinite alternate;
  animation: movesaucer1 10s  infinite alternate;
}
@-webkit-keyframes movesaucer1 {
   5% { transform: translate(  100px, 0px); }
  70% { transform: translate( -100px, 0px); }
  90% { transform: translate(  100px, 0px); }
  100% { transform: translate(  0px, 0px); }
}
@keyframes movesaucer1 {
   5% { transform: translate(  0px, 0px); }
  70% { transform: translate( -100px, 0px); }
  90% { transform: translate(  100px, 0px); }
  100% { transform: translate(  0px, 0px); }
}




.balloon { 
  width: 100%;
  position: relative;
  top: -20px;
}
.balloon > div {
  width:50px;
  height:70px; 
  border-radius:0;
  border-radius:80% 80% 80% 80%;
  margin: 0 auto;
  position: absolute;
  padding:10px;
  -webkit-transform-origin: bottom center; 
}
.balloon > div:nth-child(1){
  background: rgba(182, 15, 97, 0.9);;
  left: 0%; 
  cursor: url(/images/use153.cur), progress !important;
  box-shadow:inset 10px 10px 10px darken(rgba(182, 15, 97, 0.9), 10%);
  -webkit-animation:balloon1 6s ease-in-out infinite;
  -moz-animation:balloon1 6s ease-in-out infinite;
  -o-animation:balloon1 6s ease-in-out infinite;
  animation:balloon1 6s ease-in-out infinite;
  &:before { 
   color: rgba(182, 15, 97, 0.9);
  }

}
.balloon > div:nth-child(2){
  background: rgba(242, 112, 45, 0.9);
  left: 30%; 
  cursor: url(/images/use153.cur), progress !important;
  box-shadow:inset 10px 10px 10px darken(rgba(242, 112, 45, 0.9), 10%);
   -webkit-animation:balloon2 6s ease-in-out infinite;
  -moz-animation:balloon2 6s ease-in-out infinite;
  -o-animation:balloon2 6s ease-in-out infinite;
  animation:balloon2 6s ease-in-out infinite;
  &:before { 
   color: rgba(242, 112, 45, 0.9);
  }

}
.balloon > div:nth-child(3){
  background:  rgba(45, 181, 167, 0.9);
  left: 60%; 
  cursor: url(/images/use153.cur), progress !important;
  box-shadow:inset 10px 10px 10px darken( rgba(45, 181, 167, 0.9), 10%);
   -webkit-animation:balloon4 6s ease-in-out infinite;
  -moz-animation:balloon4 6s ease-in-out infinite;
  -o-animation:balloon4 6s ease-in-out infinite;
  animation:balloon4 6s ease-in-out infinite;
  &:before { 
   color: rgba(45, 181, 167, 0.9) ;
  }

}
.balloon > div:nth-child(4){
  background: rgba(190, 61, 244, 0.9);
  left: 95%; 
  cursor: url(/images/use153.cur), progress !important;
  box-shadow:inset 10px 10px 10px darken(rgba(190, 61, 244, 0.9), 10%); 
   -webkit-animation:balloon1 5s ease-in-out infinite;
  -moz-animation:balloon1 5s ease-in-out infinite;
  -o-animation:balloon1 5s ease-in-out infinite;
  animation:balloon1 5s ease-in-out infinite;
  &:before { 
   color: rgba(190, 61, 244, 0.9) ;
  }

}

.balloon > div:before {
  color:rgba(62, 15, 97, 0.6);
  position:absolute;
  bottom:-13px;
  left: 20px;  
  content:"▲";
  font-size:1em;
}


/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
  50%{ -webkit-transform:translateY(-20px) rotate(8deg); }
}
@-moz-keyframes balloon1 {
  0%,100%{ -moz-transform:translateY(0) rotate(-6deg);}
  50%{ -moz-transform:translateY(-20px) rotate(8deg); }
}
@-o-keyframes balloon1 {
  0%,100%{ -o-transform:translateY(0) rotate(-6deg);}
  50%{ -o-transform:translateY(-20px) rotate(8deg); }
}
@keyframes balloon1 {
  0%,100%{ transform:translateY(0) rotate(-6deg);}
  50%{ transform:translateY(-20px) rotate(8deg); }
}

/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(6eg);}
  50%{ -webkit-transform:translateY(-30px) rotate(-8deg); }
}
@-moz-keyframes balloon2 {
  0%,100%{ -moz-transform:translateY(0) rotate(6deg);}
  50%{ -moz-transform:translateY(-30px) rotate(-8deg); }
}
@-o-keyframes balloon2 {
  0%,100%{ -o-transform:translateY(0) rotate(6deg);}
  50%{ -o-transform:translateY(-30px) rotate(-8deg); }
}
@keyframes balloon2 {
  0%,100%{ transform:translateY(0) rotate(6deg);}
  50%{ transform:translateY(-30px) rotate(-8deg); }
}


/* BAllOON 0*/
@-webkit-keyframes balloon3 {
  0%,100%{ -webkit-transform:translate(0, -10px) rotate(6eg);}
  50%{ -webkit-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-moz-keyframes balloon3 {
 0%,100%{ -moz-transform:translate(0, -10px) rotate(6eg);}
  50%{ -moz-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-o-keyframes balloon3 {
 0%,100%{ -o-transform:translate(0, -10px) rotate(6eg);}
  50%{ -o-transform:translate(-20px, 30px) rotate(-8deg); }
}
@keyframes balloon3 {
 0%,100%{ transform:translate(0, -10px) rotate(6eg);}
  50%{ transform:translate(-20px, 30px) rotate(-8deg); }
}

/* BAllOON 3*/
@-webkit-keyframes balloon4 {
  0%,100%{ -webkit-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -webkit-transform:translate(-15px, 20px) rotate(10deg); }
} 
@-moz-keyframes balloon4 {
  0%,100%{ -moz-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -moz-transform:translate(-15px, 10px) rotate(10deg); }
}
@-o-keyframes balloon4 {
  0%,100%{ -o-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -o-transform:translate(-15px, 10px) rotate(10deg); }
}
@keyframes balloon4 {
  0%,100%{ transform:translate(10px, -10px) rotate(-8eg);}
  50%{ transform:translate(-15px, 10px) rotate(10deg); }
}


.animatedBird {
	width: 200%; 
	height: 65px;	
	position: absolute;
        top: 0px;
        left: -100px;
	background-image: url("/images/bird.gif");
	background-repeat: no-repeat;

	-webkit-animation: animatedBird 30s linear 3;
	-moz-animation: animatedBird 30s linear 3;
	-ms-animation: animatedBird 30s linear 3;
	-o-animation: animatedBird 30s linear 3;
	animation: animatedBird 30s linear 3;
}

@keyframes animatedBird {
	0% { background-position: -500px 0px; }
	100% { background-position: 8000px 0px; }
}
@-moz-keyframes animatedBird {
        0% { background-position: -500px 0px; }
        100% { background-position: 8000px 0px; }
}
@-webkit-keyframes animatedBird {
        0% { background-position: -500px 0px; }
        100% { background-position: 8000px 0px; }
}
@-ms-keyframes animatedBird {
        0% { background-position: -500px 0px; }
        100% { background-position: 8000px 0px; }
}
@-o-keyframes animatedBird {
        0% { background-position: -500px 0px; }
        100% { background-position: 8000px 0px; }
}


/* sun ray effect */

.sun { 
  position: absolute;
	top: 20px;
	left: 20px;
	margin: 20px;  
	width:70px;
	height:70px;
	border-radius:50%;	
	background:white;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px white;  
}

.sunorange {
  position: absolute;
        top: 20px;
        left: 20px;
        margin: 20px;
        width:70px;
        height:70px;
        border-radius:50%;
        background:orange;
        opacity:0.9;
        box-shadow: 0px 0px 40px 15px orange;
}
.suntomato {
  position: absolute;
        top: 20px;
        left: 20px;
        margin: 20px;
        width:70px;
        height:70px;
        border-radius:50%;
        background:tomato;
        opacity:0.9;
        box-shadow: 0px 0px 40px 15px tomato;
}
.sunmediumseagreen {
  position: absolute;
        top: 20px;
        left: 20px;
        margin: 20px;
        width:70px;
        height:70px;
        border-radius:50%;
        background:mediumseagreen;
        opacity:0.9;
        box-shadow: 0px 0px 40px 15px mediumseagreen;
}
.sunviolet {
  position: absolute;
        top: 20px;
        left: 20px;
        margin: 20px;
        width:70px;
        height:70px;
        border-radius:50%;
        background:violet;
        opacity:0.9;
        box-shadow: 0px 0px 40px 15px violet;
}
.sunaqua {
  position: absolute;
        top: 20px;
        left: 20px;
        margin: 20px;
        width:70px;
        height:70px;
        border-radius:50%;
        background:aqua;
        opacity:0.9;
        box-shadow: 0px 0px 40px 15px aqua;
}





.ray_box {
  position: absolute;
  margin: auto;
	top:0px;
	left:0;
	right:0;
	bottom:0;	
  width:70px;  
  -webkit-animation: ray_anim 120s linear infinite;
  animation: ray_anim 120s linear infinite;
}
.ray {  
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
    opacity:0.1;
}

.ray1 {    
    height:170px;
    width:30px;
   -webkit-transform: rotate(180deg);
    top:-175px;
    left: 15px;
}
.ray2 {
    height:100px;
    width:8px;
   -webkit-transform: rotate(220deg);
    top:-90px;
    left: 75px;
}
.ray3 {
    height:170px;
    width:50px;
   -webkit-transform: rotate(250deg);
    top:-80px;
    left: 100px;
}
.ray4 {
    height:120px;
    width:14px;
   -webkit-transform: rotate(305deg);
    top:30px;
    left: 100px;
}
.ray5 {
    height:140px;
    width:30px;
   -webkit-transform: rotate(-15deg);
    top:60px;
    left: 40px;
}
.ray6 {
    height:90px;
    width:50px;
   -webkit-transform: rotate(30deg);
    top:60px;
    left: -40px;
}
.ray7 {
    height:180px;
    width:10px;
   -webkit-transform: rotate(70deg);
    top:-35px;
    left: -40px;
}
.ray8 {
    height:120px;
    width:30px;
   -webkit-transform: rotate(100deg);
    top:-45px;
    left:-90px;
}
.ray9 {
    height:80px;
    width:10px;
   -webkit-transform: rotate(120deg);
    top:-65px;
    left:-60px;
}
.ray10 {
    height:190px;
    width:23px;
   -webkit-transform: rotate(150deg);
    top:-185px;
    left: -60px;
}


@-webkit-keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}


@keyframes atom {
  from { transform: none; }
  to { transform: translateY(-10px); }
}
@keyframes electron-circle1 {
  from { transform: rotateY(70deg) rotateZ(20deg); }
  to { transform: rotateY(70deg) rotateZ(380deg); }
}
@keyframes electron1 {
  from { transform: rotateZ(-20deg) rotateY(-70deg); }
  to { transform: rotateZ(-380deg) rotateY(-70deg); }
}
@keyframes electron-circle2 {
  from { transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg); }
  to { transform: rotateY(60deg) rotateX(60deg) rotateZ(330deg); }
}
@keyframes electron2 {
  from { transform: rotateZ(30deg) rotateX(-60deg) rotateY(-60deg); }
  to { transform: rotateZ(-330deg) rotateX(-60deg) rotateY(-60deg); }
}
@keyframes electron-circle3 {
  from { transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg); }
  to { transform: rotateY(-60deg) rotateX(60deg) rotateZ(460deg); }
}
@keyframes electron3 {
  from { transform: rotateZ(-100deg) rotateX(-60deg) rotateY(60deg); }
  to { transform: rotateZ(-460deg) rotateX(-60deg) rotateY(60deg); }
}



.atom {
  margin: 20px auto;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0px;
  right: 20px;
  animation: atom 1s ease-in-out infinite alternate;
  perspective: 300px;
  transform-style: preserve-3d;
}
.atom:before {
	content: '';
	position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: white;
}
.atom .electron {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
	width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 2px solid white;
  transform-style: preserve-3d;
}
.atom .electron:before {
	content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: white;
  transform-origin: 50% 50% 0;
}
.atom .electron:nth-child(1) {
  transform: rotateY(70deg) rotateZ(20deg);
  animation: electron-circle1 3s linear infinite;
}
.atom .electron:nth-child(2) {
  transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg);
  animation: electron-circle2 3s linear infinite;
}
.atom .electron:nth-child(3) {
  transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg);
  animation: electron-circle3 3s linear infinite;
}
.atom .electron:nth-child(1):before {
  transform: rotateZ(-20deg) rotateY(-70deg);
  animation: electron1 3s linear infinite;
}
.atom .electron:nth-child(2):before {
  transform: rotateZ(30deg) rotateX(-60deg) rotateY(-60deg);
  animation: electron2 3s linear infinite;
}
.atom .electron:nth-child(3):before {
  transform: rotateZ(-100deg) rotateX(-60deg) rotateY(60deg);
  animation: electron3 3s linear infinite;
}

.bg-neon {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #da14ff;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-black0 {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: black;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-violetred {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #FF3E96;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-darkorange {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #EE7600;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-teal {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #388E8E;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-olive {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #8E8E38;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


.bg-orange {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: orange;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-tomato {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: tomato;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-mediumseagreen {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: mediumseagreen;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-original {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #007cc0;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-slateblue {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: slateblue;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-violet {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: violet;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-black {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #A4A4A4;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}

.bg-darkred {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  background: #FE2E2E;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
}


table#table1 {
    z-index: 1000000;
    text-align:center; 
    position: relative;
    margin: 0 auto;
    margin-top: -20px;
  }


table#table2 {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:1240px;
  }
table#table3 {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:200px;
  }




/* yarrak haraketi*/

.haraket {
        position: absolute;
display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 600px;
        top: 50px;
        z-index:10000;
        background: url("/images/haraket.png") no-repeat;
        animation: haraket 10s 1 ease-in-out;
}

@keyframes haraket {
   0% { transform: scale(0.0); }
   50% { transform: scale(1.0); }
   100% { transform: scale(0.0); }
}
.circular {
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 5px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: url() no-repeat;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 8px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1);
}



@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.neon {
  margin-top:25px;
  font-family: neon;
  color: #FB4264;
  font-size: 35px;
  line-height: 9vw;
  text-shadow: 0 0 3vw #F40A35;
}

.flux {
  font-family: Lucida Grande;
  font-size: 3vw;
  line-height: 1vw;
  margin-top: 10px;
  margin-bottom: 30px;
  color: white;
  background-color: none;
  animation: neon 10s linear infinite;
  -moz-animation: neon 10s linear infinite;
  -webkit-animation: neon 10s linear infinite;
  -o-animation: neon 10s linear infinite;

}

.neon {
  animation: neon 10s ease infinite;
  -moz-animation: neon 10s ease infinite;
  -webkit-animation: neon 10s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 2vw #FA1C16, 0 0 6vw #FA1C16, 0 0 6vw #FA1C16, 0 0 .2vw #FED128, .2vw .2vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1vw #800E0B, 0 0 3vw #800E0B, 0 0 3vw #800E0B, 0 0 .1vw #800E0B, .1vw .1vw .05vw #40340A;
    color: #806914;
  }
}





#kitt {
  position: relative;
  top: 0px;
  width: 1240px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;

}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
  width: 100px;
  height: 30px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px black;
  background: #CD0000;
  margin: 0;
  display: inline-block;
  -webkit-box-shadow: 0 0 30px white, inset 0 0 5px rgba(255,255,255, 0.5);
  border-radius: 5px;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.one {
   -webkit-animation-name: first ;
}
.two {
  -webkit-animation-name: second ;
}
.three {
  -webkit-animation-name: third ;
}
.four {
  -webkit-animation-name: fourth ;
}
.five {
  -webkit-animation-name: fifth ;
}
.six {
  -webkit-animation-name: sixth ;
}
.seven {
  -webkit-animation-name: seventh ;
}
.eight {
  -webkit-animation-name: eighth ;
}
.nine {
  -webkit-animation-name: ninth ;
}
.ten {
  -webkit-animation-name: tenth ;
}
@-webkit-keyframes first {
  0%   {opacity:0.2;}
  10%  {opacity:1;}
  20%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes second {
  0%   {opacity:0;}
  10%   {opacity:0.2;}
  20%  {opacity:1;}
  30%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes third {
  0%   {opacity:0;}
  20%  {opacity:0.2;}
  30%  {opacity:1;}
  40%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fourth {
  0%   {opacity:0;}
  30%  {opacity:0.2;}
  40%  {opacity:1;}
  50%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fifth {
  0%   {opacity:0;}
  40%  {opacity:0.2;}
  50%  {opacity:1;}
  60%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes sixth {
  0%   {opacity:0;}
  50%  {opacity:0.2;}
  60%  {opacity:1;}
  70%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes seventh {
  0%   {opacity:0;}
  60%  {opacity:0.2;}
  70%  {opacity:1;}
  80%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes eighth {
  0%   {opacity:0;}
  70%  {opacity:0.2;}
  80%  {opacity:1;}
  90%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes ninth {
  0%   {opacity:0;}
  80%  {opacity:0.2;}
  90%  {opacity:1;}
  100% {opacity:0.2;}
}
@-webkit-keyframes tenth {
  0%   {opacity:0;}
  90%  {opacity:0.2;}
  100%  {opacity:1;}
}




h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 5vw;
  //padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
} 

.elegantshadow {
    color: #131313;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }

.deepshadow {
    color: #e0dfdc;
    letter-spacing: .1em;
    text-shadow: 
      0 -1px 0 #fff, 
      0 1px 0 #2e2e2e, 
      0 2px 0 #2c2c2c, 
      0 3px 0 #2a2a2a, 
      0 4px 0 #282828, 
      0 5px 0 #262626, 
      0 6px 0 #242424, 
      0 7px 0 #222, 
      0 8px 0 #202020, 
      0 9px 0 #1e1e1e, 
      0 10px 0 #1c1c1c, 
      0 11px 0 #1a1a1a, 
      0 12px 0 #181818, 
      0 13px 0 #161616, 
      0 14px 0 #141414, 
      0 15px 0 #121212, 
      0 22px 30px rgba(0, 0, 0, 0.9);
  }

.insetshadow {
    color: #202020;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
  }

.retroshadow {
    color: #2c2c2c;
    letter-spacing: .05em;
    text-shadow: 
      4px 4px 0px #d5d5d5, 
      7px 7px 0px rgba(0, 0, 0, 0.2);
  }

.hit-the-floor {
color: #007cc0;
font-size: 5vw;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.hit-the-floor {
  text-align: center;
}

.span0 {

          font-size: 6vw;
          font-weight: bold;
          font-family: Helvetica;
          letter-spacing: 0;
          padding: .25em 0 .325em;
          display: block;
          margin: 0 auto;

/* Clip Background Image */

          background: url(/images/animated_text_fill.png) repeat-y;
          -webkit-background-clip: text;
          background-clip: text;

/* Animate Background Image */

          -webkit-text-fill-color: transparent;
          -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

          -webkit-transform: translate3d(0,0,0);
          -webkit-backface-visibility: hidden;

  }



.span {

          font-size: 6vw;
          font-weight: bold;
  	  letter-spacing: 10px;
  	  padding: .25em 0 .325em;
          text-transform: uppercase;
          display: block;
          margin: 0 auto;
          color: white;
          font-family: Georgia, serif;
          text-align: center;
          text-rendering: optimizeLegibility;

/* Clip Background Image */

	  background: url(/images/animated_text_fill1.png) repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;

/* Animate Background Image */

	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */
	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;


}




/* Animate Background Image */

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}



.span1 {
          text-transform: uppercase;
          letter-spacing: 0;
          padding: 0em 6px 0em;
          display: block;
          margin: 0 auto;
          color: white;

  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 1.8em;
  text-align: center;
  text-rendering: optimizeLegibility;

  }




#gradient
{
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
}



.black-bomb {
    position: relative;
    margin: 0 auto;
    margin-top:20px;
    width: 13em;
    height: 13em;
    font-size: 8px;
}

.black-bomb *::before,
.black-bomb *::after {
    content: '';
    position: absolute;
}


.head {
    z-index:10000;
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: #0f1110;
    border-radius: 45% 55% 45% 55% / 55% 50% 50% 45%;
    overflow: hidden;
    box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3);

    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 40px 0px hsla(0, 0%, 0%, 1);
    }

    50% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }

    100% {
        box-shadow: 0px 0px 40px 0px hsla(0, 0%, 0%, 1);
    }
}

.head::before {
    z-index:10000;
    width: inherit;
    height: inherit;
    background-color: #474642;
    border-radius: inherit;
    top: 76%;
    left: 12%;
}

.head::after {
    z-index:10000;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    box-shadow: inset 0.5em -0.5em 0.3em 0.2em rgba(0, 0, 0, 0.2);
}

.head1 {
    z-index:10000;
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: darkred;
    border-radius: 45% 55% 45% 55% / 55% 50% 50% 45%;
    overflow: hidden;
    box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3);

    animation-name: shadowPulse1;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes shadowPulse1 {
    0% {
        box-shadow: 0px 0px 40px 0px hsla(0, 0%, 0%, 1);
    }

    50% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }

    100% {
        box-shadow: 0px 0px 40px 0px hsla(0, 0%, 0%, 1);
    }
}

.head1::before {
    z-index:10000;
    width: inherit;
    height: inherit;
    background-color: white;
    border-radius: inherit;
    top: 76%;
    left: 12%;
}

.head1::after {
    z-index:10000;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    box-shadow: inset 0.5em -0.5em 0.3em 0.2em rgba(0, 0, 0, 0.2);
}










.eyes::before,
.eyes::after {
    z-index:10000;
    width: 3.4em;
    height: 3.4em;
    background-color: #4e4e4e;
    border-radius: 50%;
    background-image: 
        radial-gradient(
            circle at var(--left3) 1.7em,
            white 0.1em,
            transparent 0.1em
        ),
        radial-gradient(
            circle at var(--left2) 1.6em,
            black 0.6em,
            transparent 0.6em
        ),
        radial-gradient(
            circle at var(--left1) 1.4em,
            white 1em,
            transparent 1em
        );
}

.eyes::before {
    top: 2.7em;
    left: 21%;
    --left1: 2em;
    --left2: 2.3em;
    --left3: 2.4em;
}

.eyes::after {
    top: 2.5em;
    right: 7%;
    --left1: 1.2em;
    --left2: 0.9em;
    --left3: 0.8em;
}




.eyes1::before,
.eyes1::after {
    z-index:10000;
    width: 3.4em;
    height: 3.4em;
    background-color: orange;
    border-radius: 50%;
    background-image:
        radial-gradient(
            circle at var(--left3) 1.7em,
            white 0.1em,
            transparent 0.1em
        ),
        radial-gradient(
            circle at var(--left2) 1.6em,
            black 0.6em,
            transparent 0.6em
        ),
        radial-gradient(
            circle at var(--left1) 1.4em,
            white 1em,
            transparent 1em
        );
}

.eyes1::before {
    z-index:10000;
    top: 2.7em;
    left: 21%;
    --left1: 2em;
    --left2: 2.3em;
    --left3: 2.4em;
}

.eyes1::after {
    z-index:10000;
    top: 2.5em;
    right: 7%;
    --left1: 1.2em;
    --left2: 0.9em;
    --left3: 0.8em;
}






.eyebrows::before,
.eyebrows::after {
    z-index:10000;
    width: 5.3em;
    height: 0.8em;
    background: #cb3c1a;
}

.eyebrows::before {
    top: 2.3em;
    left: 1em;
    transform: rotate(10deg);
}

.eyebrows::after {
    top: 2.2em;
    right: -0.6em;
    transform: rotate(-10deg);
}



.eyebrows1::before,
.eyebrows1::after {
    z-index:10000;
    width: 5.3em;
    height: 0.8em;
    background: MediumSeaGreen;
}

.eyebrows1::before {
    top: 2.3em;
    left: 1em;
    transform: rotate(10deg);
}

.eyebrows1::after {
    top: 2.2em;
    right: -0.6em;
    transform: rotate(-10deg);
}





.mouth {
    z-index:10000;
    position: absolute;
    width: 3.6em;
    height: 3.6em;
    background-color: #fca90d;
    top: 4em;
    left: 6.4em;
    border-radius: 80% 0 30% 20%;
    transform: rotate(34deg);
    border: 0.1em solid black;
    box-shadow: 
        inset 0 0.5em 0.5em rgba(255, 255, 255, 0.3),
        inset 0.2em -0.5em 1.2em rgba(0, 0, 0, 0.5);
}

.mouth::before {
    width: 2.6em;
    height: 5.7em;
    border: 0.2em solid;
    border-radius: 80% 0 0 16%;
    transform: rotate(35deg);
    top: -1.1em;
    left: 1.4em;
    border-color: transparent transparent transparent black;
}

.mouth1 {
    z-index:10000;
    position: absolute;
    width: 3.6em;
    height: 3.6em;
    background-color: DodgerBlue;
    top: 4em;
    left: 6.4em;
    border-radius: 80% 0 30% 20%;
    transform: rotate(34deg);
    border: 0.1em solid black;
    box-shadow:
        inset 0 0.5em 0.5em rgba(255, 255, 255, 0.3),
        inset 0.2em -0.5em 1.2em rgba(0, 0, 0, 0.5);
}

.mouth1::before {
    width: 2.6em;
    height: 5.7em;
    border: 0.2em solid;
    border-radius: 80% 0 0 16%;
    transform: rotate(35deg);
    top: -1.1em;
    left: 1.4em;
    border-color: transparent transparent transparent black;
}


.hair {
    z-index:10000;
    position: absolute;
    width: 1.4em;
    height: 5em;
    background-color: #0f1110;
    top: -3.8em;
    left: 20%;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    transform: rotate(-28deg) skewX(10deg) skewY(-50deg);
}

.hair::before {
    width: 80%;
    height: 1em;
    background-color: #ffc000;
    top: 0.3em;
    left: 10%;
}


.hair1 {
    z-index:10000;
    position: absolute;
    width: 1.4em;
    height: 5em;
    background-color: purple;
    top: -3.8em;
    left: 20%;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    transform: rotate(-28deg) skewX(10deg) skewY(-50deg);
}

.hair1::before {
    width: 80%;
    height: 1em;
    background-color: white;
    top: 0.3em;
    left: 10%;
}



// other angry bird
#ref
{
	position: absolute;
	z-index: 99;
	top: 0;
left:0;
}

#face
{
    z-index:10000;
    position: absolute;
    left:50%;
    margin-top:-253px;
    margin-left:-75px;;

        transform: scale(0.27);
        -moz-transform: scale(0.27);
        -webkit-transform: scale(0.27);
	width: 450px;
	height: 400px;
	background: #D4002B;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid #B50023;
	-webkit-box-shadow: 0 0 5px 0 #000

    box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3);

    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

.hr-adj
{
	position: absolute;
	height: 55px;
	width: 80px;
	background: #D4002B;
	z-index: 15;
	margin-left: 150px;
	margin-top: 2px;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#hr-adj-2
{
	margin-left: 220px;
	margin-top: 2px;
}

#hr-adj-3
{
	height: 80px;
	width: 30px;
	margin-left: 190px;
	margin-top: -60px;
}

.hairP
{
	width: 50px;
	height: 180px;
	background: #D4002B;
	position: absolute;
	border: 5px solid #B50023;
	-webkit-box-shadow: 0 0 5px 0 #000
}

#hr-1
{
	margin-top: -140px;
	margin-left: 150px;
	/*border-radius*/
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
}

#hr-2
{
	margin-top: -160px;
	margin-left: 200px;
	/*border-radius*/
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
}

.adjust
{
	height: 30px;
	width: 80px;
	position: absolute;
	z-index: 12;
}

#adj-1
{
	margin-left: 143px;
	margin-top: 69px;
	background: #D4002B;
	-moz-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(36deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(36deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(36deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(36deg) translate(0px, 0px) skew(0deg, 0deg);
}

#adj-2
{
	margin-left: 218px;
	margin-top: 69px;
	background: #D4002B;
	-moz-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(-36deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(-36deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(-36deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(-36deg) translate(0px, 0px) skew(0deg, 0deg);
}

.eyebrowsP
{
	position: absolute;
	border-style: solid;
	width: 0;
	height: 0;
}

#eye-br-1
{
	border-color: transparent transparent transparent #000;
	border-width: 30px 50px 15px 150px;
	margin-left: 80px;
	margin-top: 80px;
	z-index: 9;
	-moz-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
}

#eye-br-2
{
	border-color: transparent #000 transparent transparent;
	border-width: 30px 150px 15px 50px;
	margin-left: 160px;
	margin-top: 80px;
	z-index: 9;
	-moz-transform: scale(1) rotate(25deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(-25deg) translate(0px, 0px) skew(0deg, 0deg);
}

.eyesP
{
	width: 140px;
	height: 140px;
	background: #AD0320;
	float: left;
	position: relative;
	margin-top: 75px;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#eye1 { margin-left: 70px }

#eye2 { margin-left: 20px }

.corona
{
	width: 130px;
	height: 130px;
	background: #FFF;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#cor-1 { float: right }

#cor-2 { float: left }

.iris
{
	width: 30px;
	height: 30px;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	background: #000;
	margin-top: 40%;
	-webkit-box-shadow: 0 0 5px 0 #000
}

#beak
{
	width: 110px;
	height: 110px;
	margin-top: 175px;
	margin-left: 165px;
	background: #FCCD00;
	position: absolute;
	-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-border-radius: 20% 0 0 0;
	-moz-border-radius: 20% 0 0 0;
	-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2)
	-moz-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2)
}

.b-dimple
{
	width: 30px;
	height: 40px;
	margin-top: 155px;
	background: rgba(0,0,0,0.1);
	position: absolute;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#bl-dimple { margin-left: 32px; }

#br-dimple { margin-left: 390px }

.s-dimple
{
	width: 20px;
	height: 30px;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	margin-top: 160px;
	background: rgba(0,0,0,0.1);
}

#l-dimple { margin-left: 10px }

#r-dimple { margin-left: 420px }

#chin
{
	width: 500px;
	height: 350px;
	background: #EAD2BA;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	margin-top: 225px;
	margin-left: -20px;
}

// the last angry bird

.birds-container {
  margin-top: 0px;
}
.birds-container .red, .birds-container .minion, .birds-container .black {
  position: absolute;
  margin-top: -100px;
  margin-left: -210px;
  left: 50%;
}
.birds-container .red *, .birds-container .minion *, .birds-container .black * {
  position: absolute;
}
                                                                 
.minion {
  z-index: 1000;
  right: 70%;
  margin-top: 10px;
  height: 100px;
  width: 120px;
  background: #50A032;
  border: 1px solid black;
  -moz-border-radius: 50% 50% 50% 50%/55% 60% 40% 45%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 50% 50%/55% 60% 40% 45%;
  -moz-box-shadow: inset -15px 10px 15px -5px rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset -15px 10px 15px -5px rgba(255, 255, 255, 0.3);
  box-shadow: inset -15px 10px 15px -5px rgba(255, 255, 255, 0.3);

    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
.minion:before {
  z-index: 1000;
  height: 100%;
  width: 100%;
  -moz-box-shadow: inset 5px -5px 8px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 5px -5px 8px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 5px -5px 8px 2px rgba(0, 0, 0, 0.2);
  -moz-border-radius: inherit;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  z-index: 50;
}
.minion .earG {
  z-index: 1001;
  height: 20px;
  width: 18px;
  background: #FFFF6F;
  border: 1px solid black;
  border-bottom-color: transparent;
  -moz-border-radius: 45% 45% 45% 45%/55% 45% 55% 45%;
  -webkit-border-radius: 45%;
  border-radius: 45% 45% 45% 45%/55% 45% 55% 45%;
}
.minion .earG:before {
  z-index: 1001;
  top: 32%;
  left: 24%;
  height: 44%;
  width: 44%;
  background: #FFFF6F;
  border: 1px solid black;
  -moz-border-radius: inherit;
  -webkit-border-radius: inherit;
  border-radius: inherit;
}
.minion .earG.left {
  z-index: 1001;
  left: 5px;
  top: -5px;
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.minion .earG.right {
  z-index: 1001;
  background: #FFFF6F;
  top: -4px;
  left: 95px;
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.minion .eyeG {
  z-index: 1002;
  top: 36px;
  height: 28px;
  width: 28px;
  background: #FFFFFF;
  border: 1px solid #193C09;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6), inset 3px -6px 5px -2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6), inset 3px -6px 5px -2px rgba(0, 0, 0, 0.3);
  box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6), inset 3px -6px 5px -2px rgba(0, 0, 0, 0.3);
}
.minion .eyeG:after {
  z-index: 1002;
  height: 8px;
  width: 8px;
  background: #000000;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.minion .eyeG:before {
  z-index: 1002;
  height: 10px;
  width: 14px;
  border-top: 5px solid #0F2D00;
  -moz-border-radius: 50% 50% 0 0/40% 40% 0 0;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 0 0/40% 40% 0 0;
}
.minion .eyeG.left {
  z-index: 1002;
  left: 8px;
}
.minion .eyeG.left:after {
  z-index: 1002;
  top: 42%;
  left: 6px;
}
.minion .eyeG.left:before {
  z-index: 1002;
  top: -14px;
  left: 3px;
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.minion .eyeG.right {
  z-index: 1002;
  right: 3px;
}
.minion .eyeG.right:after {
  z-index: 1002;
  top: 36%;
  right: 5px;
}
.minion .eyeG.right:before {
  z-index: 1002;
  top: -14px;
  right: 6px;
  -moz-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}
.minion .nose {
  z-index: 1003;
  left: 42px;
  top: 30px;
  height: 40px;
  width: 46px;
  background: #FF6F6F;
  border: 1px solid #1D3C07;
  -moz-border-radius: 50% 50% 45% 45%/55% 55% 45% 45%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 45% 45%/55% 55% 45% 45%;
  -moz-box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6);
  -webkit-box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6);
  box-shadow: -1px 5px 2px 1px rgba(68, 132, 36, 0.6);
}
.minion .nose:before, .minion .nose:after {
  z-index: 1003;
  top: 14px;
  height: 16px;
  width: 12px;
  background: #0F2D00;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset -3px -2px 1px -1px #2d6b1f;
  -webkit-box-shadow: inset -3px -2px 1px -1px #2d6b1f;
  box-shadow: inset -3px -2px 1px -1px #2d6b1f;
}
.minion .nose:before {
  z-index: 1003;
  height: 18px;
  left: 8px;
}
.minion .nose:after {
  z-index: 1003;
  right: 8px;
}

.eyeball1{
  z-index: 1000;
  position:absolute;
  margin-top: -55px;
  margin-left: -195px;
  left: 50%;
  width:10px;
  height:10px;
  background: white;
  border-radius:50px;
  border: 4px solid black;
  box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3);
}

.eyeball2{
  z-index: 1000;
  position:absolute;
  margin-top: -55px;
  margin-left: -115px;
  left: 50%;
  width:10px;
  height:10px;
  background: white;
  border-radius:50px;
  border: 4px solid black;
  box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3);
}

.moveeyeball{
  animation-name: eyemove;
  animation-duration: 1.5s;
  animation-iteration-count: 3;
  animation-timing-function: linear;
}


@keyframes eyemove {
        0% { transform: translate(  0px, 0px); }
        25% { transform: translate(  4px, -4px); }
        50% { transform: translate(  8px, 0px); }
        75% { transform: translate( 4px, 4px); }
        100% { transform: translate( 0px, 0px); }
}
@-moz-keyframes eyemove {
        0% { transform: translate(  0px, 0px); }
        25% { transform: translate(  4px, -4px); }
        50% { transform: translate(  8px, 0px); }
        75% { transform: translate( 4px, 4px); }
        100% { transform: translate( 0px, 0px); }
}
@-webkit-keyframes eyemove {
        0% { transform: translate(  0px, 0px); }
        25% { transform: translate(  4px, -4px); }
        50% { transform: translate(  8px, 0px); }
        75% { transform: translate( 4px, 4px); }
        100% { transform: translate( 0px, 0px); }
}
@-ms-keyframes eyemove {
        0% { transform: translate(  0px, 0px); }
        25% { transform: translate(  4px, -4px); }
        50% { transform: translate(  8px, 0px); }
        75% { transform: translate( 4px, 4px); }
        100% { transform: translate( 0px, 0px); }
}
@-o-keyframes eyemove {
        0% { transform: translate(  0px, 0px); }
        25% { transform: translate(  4px, -4px); }
        50% { transform: translate(  8px, 0px); }
        75% { transform: translate( 4px, 4px); }
        100% { transform: translate( 0px, 0px); }
}



.nose1 { 
  margin-top: -55px;
  margin-left: -172px;
  left: 50%;
  z-index: 1000;
  height:2.0em; width:2.5em;
  position:absolute;
  border-radius:80% 80% 70% 70%;
  box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff;
	background:radial-gradient(50% 30%, #fca 20%,#fa9 100%);
}
.nose1:before, .nose1:after {
  height:1em; width:0.5em;
  position:absolute; top:0.6em;
  border-radius:100%;
  box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5);
	content:'';
  background:#612;
}
	.nose1:before { left:1.55em; }
	.nose1:after { right:1.55em; }

.nose1move{
  -webkit-animation-name: nose1moveA;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-timing-function: linear;
}


.nose1Click {
  margin-top: -55px;
  margin-left: -172px;
  left: 50%;
  z-index: 1000;
  height:2.0em; width:2.5em;
  position:absolute;
  border-radius:80% 80% 70% 70%;
  box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff;
        background:radial-gradient(50% 30%, #fca 20%,#fa9 100%);
}
.nose1Click:before, .nose1Click:after {
  height:1em; width:0.5em;
  position:absolute; top:0.6em;
  border-radius:100%;
  box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5);
        content:'';
  background:red;
}
        .nose1Click:before { left:1.55em; }
        .nose1Click:after { right:1.55em; }



@keyframes nose1moveA {
}
@-moz-keyframes nose1moveA {
}
@-webkit-keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
@-ms-keyframes nose1moveA {
}
@-o-keyframes nose1moveA {
}


.nose1move{
  -webkit-animation-name: nose1moveA;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-timing-function: linear;
}


@keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
@-moz-keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
@-webkit-keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
@-ms-keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
@-o-keyframes nose1moveA {
        0% { transform: rotate(0deg) scale(1.0); }
        25% { transform: rotate(90deg) scale(1.1); }
        50% { transform: rotate(180deg) scale(1.2); }
        75% { transform: rotate(270deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.0); }
}
.beakmove{
  -webkit-animation-name: beakmoveA;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-timing-function: linear;
}


@keyframes beakmoveA {
         0% { transform: rotate(0deg) scale(1.0); background-color: orange; }
        20% { transform: rotate(90deg) scale(1.1); background-color: purple;}
        40% { transform: rotate(180deg) scale(1.2); background-color: black; }
        60% { transform: rotate(270deg) scale(1.1); background-color: tomato;}
        80% { transform: rotate(360deg) scale(1.0); background-color: green;}
       100% { transform: rotate(450deg) scale(1.0); background-color: yellow;}
}
@-moz-keyframes beakmoveA {
         0% { transform: rotate(0deg) scale(1.0); background-color: orange; }
        20% { transform: rotate(90deg) scale(1.1); background-color: purple;}
        40% { transform: rotate(180deg) scale(1.2); background-color: black; }
        60% { transform: rotate(270deg) scale(1.1); background-color: tomato;}
        80% { transform: rotate(360deg) scale(1.0); background-color: green;}
       100% { transform: rotate(450deg) scale(1.0); background-color: yellow;}
}
@-webkit-keyframes beakmoveA {
         0% { transform: rotate(0deg) scale(1.0); background-color: orange; }
        20% { transform: rotate(90deg) scale(1.1); background-color: purple;}
        40% { transform: rotate(180deg) scale(1.2); background-color: black; }
        60% { transform: rotate(270deg) scale(1.1); background-color: tomato;}
        80% { transform: rotate(360deg) scale(1.0); background-color: green;}
       100% { transform: rotate(450deg) scale(1.0); background-color: yellow;}
}
@-ms-keyframes beakmoveA {
         0% { transform: rotate(0deg) scale(1.0); background-color: orange; }
        20% { transform: rotate(90deg) scale(1.1); background-color: purple;}
        40% { transform: rotate(180deg) scale(1.2); background-color: black; }
        60% { transform: rotate(270deg) scale(1.1); background-color: tomato;}
        80% { transform: rotate(360deg) scale(1.0); background-color: green;}
       100% { transform: rotate(450deg) scale(1.0); background-color: yellow;}
}
@-o-keyframes beakmoveA {
         0% { transform: rotate(0deg) scale(1.0); background-color: orange; }
        20% { transform: rotate(90deg) scale(1.1); background-color: purple;}
        40% { transform: rotate(180deg) scale(1.2); background-color: black; }
        60% { transform: rotate(270deg) scale(1.1); background-color: tomato;}
        80% { transform: rotate(360deg) scale(1.0); background-color: green;}
       100% { transform: rotate(450deg) scale(1.0); background-color: yellow;}
}











/* picture frame styling */
.pictureframe
{
    width     : 350px;
    height    : 600px;
    margin    : auto;
    position  : relative;
    transform-style: preserve-3d;  
}


@keyframes bubble-float {
    from {bottom: -20%;}
    to {bottom : 120%}
}

.pictureframe-front
{
    width       : 100%;
    height      : 100%;
    box-sizing  : border-box;
    border      : 20px solid black;
    position    : absolute;
    top         : 0;
    left        : 0;
}

.pictureframe-edgeside
{
  width       : 150px;
  height      : 100%;
  position    : absolute;
  top         : 0;
  transform-origin : 0 0;
  transform   : rotateY(90deg);
  background  : #888888;
  
  &.left  { left      : 0; }
  &.right { left      : 100%; }
}

.pictureframe-edgecap
{
  width     : 100%;
  height    : 150px;
  position  : absolute;
  top       : 0;
  transform-origin : 0 0;
  transform : rotateX(-90deg);
  background : #888888;
    
  &.top { top : 0; }  
  &.bottom { top : 100%; }
}

/* image layers */
.background
{
  position : absolute;
  left : 0;
  bottom : 0;
  width : 100%;
  transform : translateZ( -150px );
}

.character
{
    position : absolute;
    left : 0;
    bottom : 0;
    width : 50%;
    transform : translateZ( -50px );
}



.hair3 {background-color: rgb(255, 0, 0);
position: absolute;
z-index: 1000;
width: 25px;
height: 48px;
margin-top: -120px;
border-radius: 53%;
border-bottom-left-radius: 3px;
border-left: solid #000 1px;
left: 50%;
margin-left: -148px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}


.hair3:after {background-color: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1000;
content: '';
width: 25px;
height: 35px;
top: 14px;
border-radius: 43%;
border-bottom-left-radius: 1px;
border-left: solid #000 1px;
left: 1px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);}

.hair3:before {background-color: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1000;
content: '';
width: 25px;
height: 29px;
top: 21px;
border-radius: 43%;
border-bottom-left-radius: 1px;
border-left: solid #000 1px;
left: 3px;
-webkit-transform: rotate(11deg);
-moz-transform: rotate(11deg);
-ms-transform: rotate(11deg);
-o-transform: rotate(11deg);
transform: rotate(11deg);}

.make_it_left_hair3 {left: 50%; margin-left: -178px;
-webkit-transform: scaleX(-1) rotate(13deg);
-moz-transform: scaleX(-1) rotate(13deg);
-ms-transform: scaleX(-1) rotate(13deg);
-o-transform: scaleX(-1) rotate(13deg);
transform: scaleX(-1) rotate(13deg);}


.hair4 {background-color: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1000;
width: 25px;
height: 48px;
margin-top: -120px;
border-radius: 43%;
border-bottom-left-radius: 3px;
border-left: solid #000 1px;
left: 50%;
margin-left: -148px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);}


.hair4:before {background-color: rgba(0, 0, 0, 0);
z-index: 1000;
width: 25px;
position: absolute;
content: '';
height: 48px;
border-radius: 43%;
border-bottom-left-radius: 3px;
border-left: solid #000 1px;
left: -29px;
-webkit-transform: scaleX(-1) rotate(15deg);
-moz-transform: scaleX(-1) rotate(15deg);
-ms-transform: scaleX(-1) rotate(15deg);
-o-transform: scaleX(-1) rotate(15deg);
transform: scaleX(-1) rotate(15deg);}






.spinner {
  position: absolute;
  left: 50%;
  margin-left: -10px;
  margin-top: 31px;
  width: 20px;
  height: 20px;
  border: 2px groove #9cd4fc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  -ms-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
}
.spinner.moon {
  border-left: 0;
  border-top: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-ms-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




@-webkit-keyframes flicker1{
    0% {opacity:1}
    10% {opacity:0}
    20% {opacity:0}
    30% {opacity:1}
    40% {opacity:0}
    50% {opacity:1}
    60% {opacity:0}
    70% {opacity:0}
    80% {opacity:1}
    90% {opacity:0}
    100% {opacity:1}
}

.neon0 {
  position: absolute;
  z-index: 10000;
  margin-top: 36px;
  margin-left: -5px;
  left: 50%;
  display: block;
  transform-origin: 0% 0%;
  background:#ffd0d0;
  box-shadow: 0 0 5px #ffd, 0 0 10px #ffd, 0 0 20px #ffd, 0 0 30px #ffd, 0 0 40px #ffd, 0 0 55px #ffd, 0 0 75px #ffd;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}



.neon1 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon1 7s linear infinite, flicker1 1s linear infinite;
  transform-origin: 0% 0%;
  background:#ffd0d0;
  box-shadow: -7px 80px 300px 100px #ffd;


}
@keyframes ani_neon1 {
    0% {
        transform: rotate(-48deg);
    }
    10% {
        transform: rotate(18deg);
    }

    20% {
        transform: rotate(-304deg);
    }
    30% {
        transform: rotate(300deg);
    }
    40% {
        transform: rotate(-135deg);
    }
    50% {
        transform: rotate(-319deg);
    }
    60% {
        transform: rotate(190deg);
    }
    70% {
        transform: rotate(-170deg);
    }
    80% {
        transform: rotate(71deg);
    }
    90% {
        transform: rotate(-342deg);
    }
   100% {
        transform: rotate(-2deg);
    }
}


.neon2 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon2 7s ease-in-out infinite, flicker1 6s ease-in-out infinite;
  transform-origin: 0% 0%;
  background:#ffffd7;
  box-shadow: -7px 80px 300px 100px #ff4;


}
@keyframes ani_neon2 {
    0% {
        transform: rotate(-56deg);
    }
    10% {
        transform: rotate(148deg);
    }

    20% {
        transform: rotate(-13deg);
    }
    30% {
        transform: rotate(-211deg);
    }
    40% {
        transform: rotate(221deg);
    }
    50% {
        transform: rotate(-55deg);
    }
    60% {
        transform: rotate(-287deg);
    }
    70% {
        transform: rotate(207deg);
    }
    80% {
        transform: rotate(-195deg);
    }
    90% {
        transform: rotate(-87deg);
    }
   100% {
        transform: rotate(143deg);
    }
}

.neon3 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon3 7s infinite,flicker1 4s ease-out infinite;
  transform-origin: 0% 0%;
  background:#bffbbf;
  box-shadow: -7px 80px 300px 100px #0f0;

}
@keyframes ani_neon3 {
    0% {
        transform: rotate(312deg);
    }
    10% {
        transform: rotate(314deg);
    }

    20% {
        transform: rotate(157deg);
    }
    30% {
        transform: rotate(228deg);
    }
    40% {
        transform: rotate(143deg);
    }
    50% {
        transform: rotate(-325deg);
    }
    60% {
        transform: rotate(-124deg);
    }
    70% {
        transform: rotate(110deg);
    }
    80% {
        transform: rotate(43deg);
    }
    90% {
        transform: rotate(311deg);
    }
   100% {
        transform: rotate(-307deg);
    }
}

.neon4 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon4 7s infinite, flicker1 5s ease-in infinite;
  transform-origin: 0% 0%;
  background:#00ffff;
  box-shadow: -7px 80px 300px 100px #0ff;
}
@keyframes ani_neon4 {
    0% {
        transform: rotate(140deg);
    }
    10% {
        transform: rotate(223deg);
    }

    20% {
        transform: rotate(-30deg);
    }
    30% {
        transform: rotate(-345deg);
    }
    40% {
        transform: rotate(335deg);
    }
    50% {
        transform: rotate(-143deg);
    }
    60% {
        transform: rotate(226deg);
    }
    70% {
        transform: rotate(270deg);
    }
    80% {
        transform: rotate(29deg);
    }
    90% {
        transform: rotate(-53deg);
    }
   100% {
        transform: rotate(-301deg);
    }
}

.neon5 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon5 7s infinite, flicker1 3s ease infinite;
  transform-origin: 0% 0%;
  background:#ecffff;
  box-shadow: -7px 80px 300px 100px #0f7;

}
@keyframes ani_neon5 {
    0% {
        transform: rotate(-143deg);
    }
    10% {
        transform: rotate(-24deg);
    }

    20% {
        transform: rotate(-186deg);
    }
    30% {
        transform: rotate(-107deg);
    }
    40% {
        transform: rotate(-205deg);
    }
    50% {
        transform: rotate(168deg);
    }
    60% {
        transform: rotate(220deg);
    }
    70% {
        transform: rotate(-252deg);
    }
    80% {
        transform: rotate(-139deg);
    }
    90% {
        transform: rotate(-71deg);
    }
   100% {
        transform: rotate(-287deg);
    }
}


.neon6 {
  position: absolute;
  z-index: 1000;
  margin-top: 40px;
  left: 50%;
  height: 5px;
  width: 100%;
  display: block;
  animation: ani_neon6 7s infinite, flicker1 3s ease infinite;
  transform-origin: 0% 0%;
  background:#bcffff;
  box-shadow: -7px 80px 300px 100px #0f7;

}
@keyframes ani_neon6 {
    0% {
        transform: rotate(25deg);
    }
    10% {
        transform: rotate(-287deg);
    }

    20% {
        transform: rotate(-136deg);
    }
    30% {
        transform: rotate(9deg);
    }
    40% {
        transform: rotate(198deg);
    }
    50% {
        transform: rotate(-320deg);
    }
    60% {
        transform: rotate(-167deg);
    }
    70% {
        transform: rotate(42deg);
    }
    80% {
        transform: rotate(65deg);
    }
    90% {
        transform: rotate(-220deg);
    }
   100% {
        transform: rotate(300deg);
    }
}





/**********  night club   ********/


.viewCL {
  z-index: 1000;
  position: absolute;
  left: 50%;
  margin-left: -130px;
  margin-top: 160px;
  -webkit-perspective: 0;
          perspective: 0;
}

.planeCL {
  width: 250px;
  height: 250px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.planeCL.mainCL {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotateX(60deg) rotateZ(-30deg);
          transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotateCL 3s infinite linear;
          animation: rotateCL 3s infinite linear;
}
.planeCL.mainCL .circleCL {
  width: 250px;
  height: 250px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 50px cyan, inset 0 0 50px cyan;
}
.planeCL.mainCL .circleCL::before, .planeCL.mainCL .circleCL::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: orange;
  box-sizing: border-box;
  box-shadow: 0 0 50px 2px orange;
}
.planeCL.mainCL .circleCL::before {
  -webkit-transform: translateZ(-90px);
          transform: translateZ(-90px);
}
.planeCL.mainCL .circleCL::after {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
}
.planeCL.mainCL .circleCL:nth-child(1) {
  -webkit-transform: rotateZ(72deg) rotateX(63.435deg);
          transform: rotateZ(72deg) rotateX(63.435deg);
}
.planeCL.mainCL .circleCL:nth-child(2) {
  -webkit-transform: rotateZ(144deg) rotateX(63.435deg);
          transform: rotateZ(144deg) rotateX(63.435deg);
}
.planeCL.mainCL .circleCL:nth-child(3) {
  -webkit-transform: rotateZ(216deg) rotateX(63.435deg);
          transform: rotateZ(216deg) rotateX(63.435deg);
}
.planeCL.mainCL .circleCL:nth-child(4) {
  -webkit-transform: rotateZ(288deg) rotateX(63.435deg);
          transform: rotateZ(288deg) rotateX(63.435deg);
}
.planeCL.mainCL .circleCL:nth-child(5) {
  -webkit-transform: rotateZ(360deg) rotateX(63.435deg);
          transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotateCL {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotateCL {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}






/*** lights   *///

.pretty-table
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #000;
  background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x;
}

.pretty-table caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table th, .pretty-table td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #632a39;
}

.pretty-table th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=rowT]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table tr:hover th[scope=rowT], .pretty-table tr:hover td
{
  background-color: #632a2a;
  color: #fff;
}.pretty-table
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #000;
  background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x;
}

.pretty-table caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table th, .pretty-table td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #632a39;
}

.pretty-table th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=rowT]
{
  background-color: orange;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table tr:hover th[scope=rowT], .pretty-table tr:hover td
{
  background-color: white;
  color: #fff;
  font-weight: bold;
}

.gokhanResim {
  position: absolute;
  left: 50%;
  margin-left: -230px;
  margin-top: 123px;
  transform: scaleX(1.05) scaleY(1.12);
}