@font-face {
    font-family: Chiller;
    src: url("../font/CHILLER.TTF");
}

html, body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    font-family: 'Calibri';
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
}
.clear{
    clear: both;
}

/*navigation*/
#navi {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 20px;
    background-color: #f1c40f;
    position: fixed;
    z-index: 102;
    cursor: pointer;
    overflow: hidden;
    transition: all 500ms;
}
section#navi:hover {
    box-shadow: inset 50px 50px 0px white;
    transition: all 500ms;
}
.fa-bars {
    font-size: 23px !important;
    width: 100%;
    text-align: center;
    padding-top: 13px;
    position: absolute;
}



#navibar {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 20px;
    background-color: #444;
    position: fixed;
    z-index: 101;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms ;
    -ms-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
    overflow: hidden;
}
#navitext {
    position: absolute;
    font-size: 14px;
    color: #FFF;
    width: 700px;
    height: 50px;
    z-index: 21;
}
#navitext ul {
    top: 50%;
    margin-top: -8px;
    left: 72px;
    position: absolute;
    list-style-type: none;
    padding: 0;
}
#navitext li {
    list-style: none;
    display: inline-block;
}
#navitext li a {
    width: 100px;
    padding: 22px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}
#navitext li a:hover{color: #f1c40f;}

/*slide*/
.slide {
    width: 100%;
    height: 100%;
}

/*slide 1*/
#slide1 {
    background-attachment: fixed;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-image: url("../image/bg-slide-2.jpg");
    background-color: #DDD;
    position: fixed;
}

#t1 {
    letter-spacing: 6px;
    font-family: 'Calibri';
    font-weight: 400;
    text-align: center;
    position: absolute;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    font-size: 33px;
    color: #fff !important;
    top: 35%;
    z-index: 13;
}
#t2 {
    position: absolute;
    letter-spacing: 6px;
    font-weight: 200;
    text-align: center;
    position: absolute;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    font-size: 14px;
    color: #fff;
    top: 115px;
    z-index: 13;
}
#down {
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    background-color: #FFF;
    position: relative;
    z-index: 10;
    cursor: pointer;
    overflow: hidden;
    top: 80px;
    transition: all 500ms;
}
#downcontent {
    left: 0px;
    width: 50px;
    height: 50px;
    position: absolute;
    background-image: url("../image/felesh.png");
    z-index: 40;
    transition: all 500ms;
}
#down:hover {
    box-shadow: inset -50px -50px 0px #f1c40f;
    transition: all 500ms;
}
.btn {
    width: 140%;
    height: 140%;
    top: 100%;
    left: 100%;
    background-color: #FFF;
    position: absolute;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#downh {
    background-color: #f1c40f;
}








/*slide 2*/

#slide2{
    top: 100%;
    position: absolute;
    z-index: 14;
}
#contain2 {
    width: 100%;
    left: 50%;
    height: 100%;
    margin-left: -640px;
    position: absolute;
    overflow: hidden;
}

#el2 {
    width: 100%;
    position: absolute;
    height: 650px;
    bottom: -160px;
    z-index: 15;
}

.element2 {
    width: 100%;
    position: absolute;
    height: 650px;
    left: 0%;
    overflow: hidden;
    color: #fff;
    background-image: url(../image/SATHYANATH%20New%20Action.JPG);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 58% 33%;
    -webkit-mask-image: url("../image/mask.png");
    z-index: 15;
}
#el1 {
    width: 100%;
    position: absolute;
    height: 650px;
    bottom: 0px;
    z-index: 14;
}
.element {
    width: 100%;
    position: absolute;
    height: 650px;
    left: 0%;
    bottom: 0px;
    overflow: hidden;
    color: #fff;
    background-image: url(../image/bg-slide-1.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: url(../image/mask.png);
    z-index: 14;
}







/*slide 3*/
#slide3 {
    height: 0px;
    position: relative;
    background-color: #20201f;
    z-index: 16;
}

.textbox{
    width: 37%;
    margin: 0px 30%;
    padding-top: 50px;
    text-align: center;
    position: relative;
}
#slide4 h1{
    position: absolute;
    z-index: 133;
    width: 100%;
    top: -125px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    color: #fff;
    padding: 3px 10px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.textbox p.head{
    font-size: 18px;
    color: #333;
    margin-top: 0px;
    font-weight: bold;
    padding: 0px 15px;
}
.textbox p.txt{}
.textbox p.head-p{
    font-size: 14px;
    padding: 0px 15px;
}
.textbox p.link a{color: #1b9eea;}

.textbox marquee{
    text-align: center;
}


/*slide 4*/

#slide4 {
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../image/movie-bg-slide-4.jpg");
    background-color: #DDD;
    position: relative;
}

/*triangle*/
#poly1 {
    width: 100%;
    height: 200px;
    background-image: url(../image/tri3.png);
    background-size: 110% 100%;
    background-position: center;
    position: absolute;
    bottom: 0px;
    z-index: 16;
}

#poly2{
    width: 100%;
    height: 200px;
    background-image: url(../image/tri3.png);
    background-size: 110% 100%;
    background-position: center;
    position: absolute;
    bottom: -200px;
    z-index: 16;
    transform: rotate(180deg);
}


/*slide 5*/

#slide5 {
    height: 700px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../image/Achievement.jpg");
    background-color: #DDD;
    position: relative;
}

.on-mask{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.46);
    z-index: 100;
    display: none;
}
.on-mask.active{display: block;}
#slide5 h1{
    position: absolute;
    z-index: 133;
    width: 100%;
    top: 35px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    color: #fff;
    padding: 3px 10px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}


.movie-wrap{
    position: relative;
    width: 75%;
    margin: 0 auto;
    padding: 240px 0px 100px;
    height: 100%;
    overflow: hidden;
}
.movie-wrap .mv-bx{
    width: 28%;
    float: left;
    padding: 0px 22px;
}
.movie-wrap .mv-bx:last-child{margin-right: 0px;}
.movie-wrap .mv-bx .mv-img{    text-align: center; position: relative;}
.movie-wrap .mv-bx .mv-img img{    width: 180px;  border-radius: 50%;    border: 5px solid white;}
.movie-wrap .mv-bx .mv-img .overlay-img{}
.movie-wrap .mv-bx .mv-img img:hover{}
.movie-wrap .mv-bx .mv-desc{    text-align: justify;}
.movie-wrap .mv-bx .mv-desc h2{
    font-size: 17px;
    text-align: center;
    color: #FFFFFF;
}
.movie-wrap .mv-bx .mv-desc p{
    color: #CECECE;
    font-size: 14px;
    line-height: 21px;
}
.movie-wrap .mv-bx .mv-desc a{color: #00C7F7;}
.movie-wrap .mv-bx .mv-desc a:hover{color: #00b4e1;}



/*slide 6*/

#slide6 {
    height: auto;
    background-color: #DDD;
    position: relative;
}
#slide6 .headerTTl{
    background-color: #DC5656;
    text-align: center;
    font-size: 24px;
    padding: 20px 0px;
    color: aliceblue;
}
.sec6-bx{
    width: 50%;
    min-height: 310px;
    float: left;
}
.sec6-bx .wrp{
    padding: 20px;
}
.sec6-bx .wrp h5{
    margin: 0px;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.sec6-bx .wrp p{
    text-align: justify;
    line-height: 25px;
    font-size: 15px;
    color: #2D2D2D;
}
#bx1{    background-color: white;}
#bx2{   background-color: #4A4A4A; color: #fff;}
#bx2 p{color: #fff;}
#bx3{    background-color: #fff;}
#bx4{background-color: #4A4A4A; color: #fff;}
#bx4 p{color: #fff;}



/*slide 7*/

#slide7 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 500px;
    background-attachment: fixed !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background: url("../image/contact-banner.jpg");
}
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-attachment: scroll;
}
.parallax-overlay-bg {
    background-image: url('../image/overlay-pattern.png');
}

.contact-wrp{}
.contact-wrp .parallax-header {
    padding: 50px 0;
    padding-bottom: 70px !important;
    text-align: center;
}
.parallax-title {
    font-size: 40px;
    margin-bottom: 20px;
    color: #FFFFFF;
    background-attachment: scroll;
    background-image: url('../image/divider1.png');
    background-repeat: repeat-x;
    background-position: top center;
    padding-top: 20px;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    z-index: 10;
    margin-top: 0px;
}
.parallax-slogan {
    font-size: 20px;
    line-height: 140%;
    margin: 0;
    z-index: 10;
    position: relative;
    color: #fff;
}
.parallax-slogan span{
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    color: #f1c40f;
}




.social{
    text-align: center;
    position: relative;
}
.social ul{
    padding: 0px;
    list-style: none;
}
.social ul li{
    display: inline-block;
    margin: 0px 10px;
}
.social ul li a{
    display: block;
    width: 60px;
    height: 60px;
    padding: 12px 10px 6px;
    color: #fff;
    background-color: rgba(160, 160, 160, 0.33);
    border-radius: 50%;
    -webkit-transition: all 500ms;
    -moz-transition:all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition:all 500ms;
}
.social ul li a:hover{
    background-color: #f1c40f;
    -webkit-transition: all 500ms;
    -moz-transition:all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition:all 500ms;
}
.social ul li a .fa{      font-size: 35px;
    padding-top: 9px;}


#navibar.Mshow{
    width: 700px !important;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms ;
    -ms-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}






/*slide 8*/

#slide8 {
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../image/whatsnew.jpg");
    background-color: #DDD;
    position: relative;
}
.new-wrp{
    position: relative;
    width: 80%;
    margin: 0 auto;
}
.new-wrp h1{
    margin: 0px;
    text-align: center;
    padding: 50px 0px;
    font-size: 35px;
    color: #fff;
}
.new-wrp .nwbx{
    width: 33%;
    float: left;
}
.new-wrp .nwbx .nwbx-wrp{
    background-color: rgba(255, 255, 255, 0.86);
    margin: 0px 15px;
    min-height: 241px;
    padding: 10px;
    color: #333;
    text-align: center;
}
.new-wrp .nwbx .nwbx-wrp a{
    text-decoration: none;
    color:#333;
}
.nwbx-wrp h5{
    margin: 0px;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    padding-bottom: 10px;
    border-bottom: 1px solid #cecece;
}
.nwbx-wrp .content{
    font-size: 18px;
    margin-bottom: 15px;
}
.nwbx-wrp .content p{
    font-size: 40px;
    font-weight: bold;
    margin: 15px 0px;
}
.nwbx-wrp .content p span{
    display: block;
    font-size: 18px;
    font-weight: 400;
    font-family: "Berlin Sans FB"   ;
}
p.neFont{
    font-family: Chiller;
    font-size: 62px !important;
    letter-spacing: 4px;
}





.scrollTop{
    position: fixed;
    bottom: -50px;
    right: 40px;
    background-color: rgb(255, 255, 255);
    z-index: 500;
    width: 40px;
    height: 40px;
    text-align: center;
    border: 2px solid rgba(6, 6, 6, 0.29);
    border-radius: 5px;
    transition: all 500ms;
}
.scrollTop.Up {
    position: fixed;
    bottom: 19px;
    transition: all 500ms;
}
.scrollTop a{
    display: block;
    padding: 4px;
    font-size: 22px;
    color: #7B7B7B; transition: all 500ms;
}

.scrollTop a:hover{color: #41cbea; transition: all 500ms;}



@media screen and (max-width: 1080px){
    .movie-wrap{
        width: 85%;
    }
}

@media screen and (max-width: 992px){
    .sec6-bx {
        width: 50%;
    }
    #slide5 {
        height: 950px;
    }
    .movie-wrap .mv-bx {
        width: 100%;
        padding: 0px;
        margin-bottom: 15px;
    }
    .movie-wrap .mv-bx .mv-img img {
        width: 100px;
    }
    #t1{font-size: 24px;}
    #t2{  top:92px;}
}


@media screen and (max-width: 850px){
    .textbox {
        width: 48%;
        margin: 0px 24%;
    }
    .textbox p.head {
        font-size: 15px;
    }
    #t1 {
        width: 100%;
        left: 0px;
        margin-left: 0px;
    }
    #slide5 {
        height: 1000px;
    }
    .sec6-bx {
        min-height: 200px;
    }
    #bx3 {
        background-color: #4A4A4A;
        color: #fff;
    }
    #bx4 {
        background-color: #fff;
        color: #333;
    }
    #bx4 p {
        color: #333;
    }
    #bx3 p {
        color: #fff;
    }
    #contain2 {display: none;}
    .sec6-bx {
        width: 100%;
    }
    #slide8 {
        height: 1000px;
    }
    .new-wrp .nwbx{
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }

    #navibar {
        width: 200px;
        height: 0px;
        left: 20px;
        top: 70px;
    }
    #navitext {
        width: 200px;
        height: 140px;
        z-index: 21;
    }
    #navitext ul {
        margin-top: 0px;
        position: static;
    }
    #navitext li {
        list-style: none;
        display: block;
    }
    #navitext li a {
        padding: 5px;
        display: block;
    }
    #navibar.Mshow{
        height: 155px !important;
        width: 230px !important;
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms ;
        -ms-transition: all 500ms ;
        -o-transition: all 500ms ;
        transition: all 500ms ;
    }
}

@media screen and (max-width: 575px){
    .sec6-bx .wrp p {
        text-align: justify;
        line-height: 20px;
        font-size: 13px;
        color: #2D2D2D;
    }
    .textbox {
        width: 90%;
        margin: 0px 5%;
        padding-top: 30px;
    }
    .parallax-title {
        font-size: 30px;
    }
    .parallax-slogan {
        font-size: 15px;
    }
    .social ul li a {
        display: block;
        width: 40px;
        height: 40px;
    }
    .social ul li a .fa {
        font-size: 29px;
        padding-top: 4px;
    }
    #t1 {
        font-size: 15px;
    }

    #poly1, #poly2{display: none;}
    #slide4 {
        height: 400px;
        background-image: url("../image/SATHYANATH%20New%20Action.JPG");
        background-color: #fff;
        position: relative;
        padding-top: 20px;
    }
    #slide4:before{
        content: "";
        position: absolute;
        top:0px;
        left:0px;
        width: 100%;
        height:100%;
        background-color: rgba(255, 255, 255, 0.79);
    }
    #slide4 h1 {
        position: relative;
        top: 0;
        width: 100%;
        text-align: center;
        font-size: 30px;
        letter-spacing: 1px;
        color: #F1C40F;
        padding: 3px 10px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    #slide5 h1 {
        top: 0px;
    }
    .movie-wrap {
        padding: 120px 0px 70px;
    }
    .social ul li {
        display: inline-block;
        margin: 0px 2px;
    }
}

@media screen and (max-width: 400px){
    #slide4 {
        height: 500px;
    }

}