/*this css file use in home page*/

html {
    background: url(../../Content/images/home/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}
body
{
  height:100%;
  overflow: auto;
}

.sun {
    width: 150px;
    position: fixed;
    right: 30%;
}

    .sun img {
        width: auto;
        max-width: 100%;
    }

.kids {
    width: 45%;
    height: 400px;
    clear: both;
    position: fixed;
    right: 27%;
    margin-top: 150px;
}

    .kids img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }

.enter {
    width: 150px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
}

    .enter img {
        width: auto;
        max-width: 100%;
    }

@media screen and (max-width: 800px) {
    .kids {
        width: 70%;
        height: 300px;
        right: 15%;
    }

    .sun {
        right: 15%;
    }
}



@media screen and (max-width: 768px)and (orientation: portrait) {
    .kids {
        width: 70%;
        height: 600px;
        top: 10%;
    }

    .sun {
        right: 15%;
    }
}

@media screen and (max-width: 400px) {
    .kids {
        width: 100%;
        height: 300px;
        right: 0;
    }

    .sun {
        right: 5%;
    }

    .enter {
        right: 5px;
        bottom: 5px;
    }
}

#animated_div {
    animation: animated_div 5s 1;
    -moz-animation: animated_div 5s 1;
    -webkit-animation: animated_div 5s 1;
    -o-animation: animated_div 5s 1;
    -webkit-border-radius: 5px;
}

#animated_img {
    position: absolute;
    -webkit-animation: animated_img 5s 1;
    animation: animated_img 5s 1;
    -moz-animation: animated_img 5s 1;
    -o-animation: animated_img 5s 1;
}

#animated_kids {
    position: absolute;
    -webkit-animation: animated_kids 5s 1;
    animation: animated_kids 5s 1;
    -moz-animation: animated_kids 5s 1;
    -o-animation: animated_kids 5s 1;
}

@keyframes animated_div {
    100% {
        transform: rotate(-360deg);
        left: 86%;
    }

    70% {
        transform: rotate(50deg);
        left: 0px;
    }

    55% {
        transform: rotate(0deg);
        left: 500px;
    }

    50% {
        transform: rotate(0deg);
        left: 500px;
    }

    25% {
        transform: rotate(0deg);
        left: 500px;
    }

    0% {
        transform: rotate(-360deg);
        left: 0px;
    }
}

@-webkit-keyframes animated_div {
    100% {
        -webkit-transform: rotate(-360deg);
        left: 86%;
    }

    70% {
        -webkit-transform: rotate(50deg);
        right: 0;
    }

    55% {
        -webkit-transform: rotate(0deg);
        left: 500px;
    }

    50% {
        -webkit-transform: rotate(0deg);
        left: 500px;
    }

    25% {
        -webkit-transform: rotate(0deg);
        left: 500px;
    }

    0% {
        -webkit-transform: rotate(-360deg);
        left: 0px;
    }
}

@-moz-keyframes animated_div {
    100% {
        -moz-transform: rotate(-360deg);
        left: 86%;
    }

    70% {
        -moz-transform: rotate(50deg);
        left: 0px;
    }

    55% {
        -moz-transform: rotate(0deg);
        left: 500px;
    }

    50% {
        -moz-transform: rotate(0deg);
        left: 500px;
    }

    25% {
        -moz-transform: rotate(0deg);
        left: 500px;
    }

    0% {
        -moz-transform: rotate(-360deg);
        left: 0px;
    }
}


@keyframes animated_img {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes animated_img {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes animated_img {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes animated_kids {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes animated_kids {
    0% {
        -webkit-transform: scale(0);
    }

    25% {
        -webkit-transform: scale(0.8);
    }

    50% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes animated_kids {
    0% {
        -moz-transform: scale(0);
    }

    25% {
        -moz-transform: scale(0.8);
    }

    50% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(1);
    }
}