@charset "utf-8";


html, body {
    height: 100%;
    background-color: #b4c6cf;
}

#ortala {
width: 650px;
height: 650px;
position: absolute;
left: 50%;
top: 50%;
margin: -325px 0 0 -325px;
}

#ortala p{

    color: #5d5d5d;
    padding-left:4px;
    font-family: arial;
    text-align: center;
    text-shadow: 1px 1px 4px #e1e1e1;
}

  .anime2{
        margin-top: -30px;
        opacity: 0;
        font-size:15px;
        font-weight: bold;
        font-family:arial;
        color: #7e0000;
        animation: animee ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode:forwards;
        animation-delay: 1s;

        -webkit-animation: animee2 ease 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-delay: 1s;

        -moz-animation: animee2 ease 1s;
        -moz-animation-iteration-count: 1;
        -moz-animation-fill-mode:forwards;
        -moz-animation-delay: 1s;

        -o-animation: animee2 ease 1s;
        -o-animation-iteration-count: 1;
        -o-animation-fill-mode:forwards;
        -o-animation-delay: 1s;

        -ms-animation: animee2 ease 1s;
        -ms-animation-iteration-count: 1;
        -ms-animation-fill-mode:forwards;
        -ms-animation-delay: 1s;
    }

    @-webkit-keyframes animee2 {
        0% {
            opacity: 0;
            left:0px;
            top:0px;
            opacity:0;

            -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
        }
        100% {
            opacity: 1;
            left:0px;
            top:0px;
            opacity:1;

            -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
        }
    }
	
	
    .anime{
      
        opacity: 0;
        font-size:15px;
        font-weight: bold;
        font-family:arial;
        color: #7e0000;
        animation: animee ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode:forwards;
        animation-delay: 3s;

        -webkit-animation: animee ease 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-delay: 3s;

        -moz-animation: animee ease 1s;
        -moz-animation-iteration-count: 1;
        -moz-animation-fill-mode:forwards;
        -moz-animation-delay: 3s;

        -o-animation: animee ease 1s;
        -o-animation-iteration-count: 1;
        -o-animation-fill-mode:forwards;
        -o-animation-delay: 3s;

        -ms-animation: animee ease 1s;
        -ms-animation-iteration-count: 1;
        -ms-animation-fill-mode:forwards;
        -ms-animation-delay: 3s;
    }

    @-webkit-keyframes animee {
        0% {
            opacity: 0;
            left:0px;
            top:0px;
            opacity:0;
            margin-left: -20px;
            -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
        }
        100% {
            opacity: 1;
            left:0px;
            top:0px;
            opacity:1;
            margin-left: 0;
            -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
        }
    }


.ttle{
    position: absolute;
    bottom:10px;
    left: 20px;
}