/*
    Responsive design basics
    1. put your common styles first
    2. max width media query should place first
    3. next less than max width layout styles shouls place -> 1000, 600, 340
    max-width: 992px means - On screens that are 992px wide or less
    width is between 600 and 900px, => @media screen and (max-width: 900px) and (min-width: 600px)
    When the width is between 600px and 900px OR above 1100px - @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px)
*/



/* Common styles */
html { scroll-behavior: smooth; }
@font-face {
    font-family: "cabin-regular";
    src: url(../fonts/cabin-regular.ttf);
}
@font-face{
    font-family:"antosan demo";
src:url('../fonts/antosan Demo.ttf');
}
@font-face{
    font-family:"cabin-medium";
    src:url(../fonts/Cabin-Medium.ttf)
}
@font-face{
    font-family:"cabin-mediumitalic";
    src:url(../fonts/Cabin-MediumItalic.ttf);
}
@font-face{
    font-family:"cabin-semibold";
    src:url(../fonts/Cabin-SemiBold.ttf);
}
@font-face{
    font-family: "cabin-semibolditalic";
    src:url(../fonts/Cabin-SemiBoldItalic.ttf)
}
body {
    margin: 0;
    padding: 0;
}
@keyframes slide-right-to-left{
    0%{
        right:-30%;
    }
    50%{
        right: -15%;
    }
    100%{
        right:0;
    }
}
@keyframes slide-left-to-right{
    0%{
        left:-30%;
    }
    50%{
        left: -15%;
    }

    100%{
        left:0%;
    }
}
@keyframes slide-top-to-bottom{
    0%{
        top:-35%;
    }
    25%{
        top: 0%;
    }

    100%{
        top:35%;
    }
}
@keyframes slide-bottom-to-top{
    0%{
        top: 80%;
    }
    25%{
        top: 50%;
    }

    100%{
        top:35%;
    }
}

@keyframes bg-animation{
    0% {
       
        /* animation-timing-function: ease-in; */
    }
    5% {
        /* opacity: 1;
        animation-timing-function: ease-out; */
    }
    28% {
        /* opacity: 1; */
    }
    50% {
        /* opacity: 1; */
        transform: scale(1.3);
    }
    /* 100% { opacity: 1 } */
}



.header {
    /*border: 1px solid #555;*/
    width: 90%;
    height: 20%;
    margin: 0 auto;
}
.menu li {
    list-style: none;
    text-transform: capitalize;
    float: left;
    font-family: cabin-regular;
    font-size: 95%;
    padding: 3.7% 1.5%;
}

.menu li a {
    text-decoration: none;
    color: #919191;
}

.menu li a.active {
    color: #d51b25;
    text-decoration: none;
    font-weight: bold;
}

.logo img {
    float: right;
    padding: 0.5%;
    width: 35%;
}

.page-body {
    /* background-image: url(./images/photo1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    height: 85%;
    position: fixed;
    width: 100%;
    overflow: hidden;
    bottom: 0;
}
.aboutus-pagebody{
    height:100%;
    width:100%;
    /* background-image: url(../images/about-us.jpg);
    background-repeat: no-repeat;
    background-size: cover; */
    background-image: url(../images/about-us.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 100%;

}
.common-content{
    height:100%;
    width:60%;

}
.common-content h1{
    font-size:200%;
    font-weight:bold;
    text-align: center;
    font-family:"cabin-semibold";
    color:#f48829;
    padding-top:3%;
    margin:0;

}
.common-content p{
    text-align:justify;
    font-family:"cabin-medium";
    color:#000000;
    padding: 0.5% 5%;
    margin:0;
    line-height:135%;
}
.common-content h3{
    font-size:120%;
    font-family:"cabin-semibold";
    padding:0% 5%;
    padding-bottom: 0.5%;
    margin:0;
}
.link{
    list-style-type:none;
    margin:0;
}
.link li{
    color:#ed1e24;
    padding:0% 5%;
    margin:0;
    font-family:"cabin-semibold";
    /* font-weight: bold;
    font-size:110%; */
    line-height:150%;
}
.link li a {
    text-decoration: none;
    color:#ed1e24;
}

/* .link li a.on {
    color: #d51b25;
    text-decoration: none;
    font-weight: bold;
} */

.public-pagebody{
    height: 100%;
    width: 100%;
    background-image: url(../images/Publications.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* background-position-y: -160%; */
    
}
.public-content{
    height:100%;
    width:60%;
  
}

.public-content h1{
    font-size:200%;
    font-weight:bold;
    text-align: center;
    font-family:"cabin-semibold";
    color:#ef7427;
    padding:4% 0% 3% 0%;
    margin:0;

}
.public-content p{
    font-size:100%;
    text-align:justify;
    font-family:"cabin-medium";
    color:#030425;
    padding-left:7%;
    margin:0;
    line-height:140%;
}
.mural-pagebody{
    height: 100%;
    width: 100%;
    background-image: url(../images/murals-painting-conservation-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}
.mural-content{
    height:100%;
    width:60%;
  
}

.mural-content h1{
    font-size:200%;
    font-weight:bold;
    text-align: center;
    font-family:"cabin-semibold";
    color:#ef7427;
    padding:6% 0% 3% 0%;
    margin:0;

}
.mural-content p{
    font-size: 105%;
    text-align: justify;
    font-family: "cabin-medium";
    padding-bottom: 0.8%;
    color: #030425;
    padding-left: 7%;
    margin: 0;
    line-height: 130%;
}
.mp-container,.tc-container{
    width:80%;
    height:100%;
    margin:0 auto;
}
.tc-container{
    margin: 1% auto;
    clear: both;
}
.mp-before,.mp-after{
    width:50%;
    height:100%;
    float:left;
}
.tc-before,.tc-after{

}
.tc-before img, .tc-after img {
    /* padding-left: 22%; */
    width: 100%;
    /* height: 170px; */
    /* padding-top: 2%; */
}
.mp-before img,.mp-after img{
    width: 100%;
    /* height: 200px;     */
}
.mp-title,.tc-title{
    text-align:center;
    font-family:"cabin-medium";
    padding:3% 0%;
    color: #030425;
    margin:0;
    font-size: 80%;
}

.temple-pagebody{
    height: 100%;
    width: 100%;
    background-image: url(../images/temple-conservation.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
    /* background-position-y: 150%; */
    
}
.temple-content{
    height: 100%;
    width: 40%;
    padding-left: 5%;
}

.temple-content h1{
    font-size:200%;
    font-weight:bold;
    text-align: center;
    font-family:"cabin-semibold";
    color:#ef7427;
    padding:6% 0% 3% 0%;
    margin:0;

}
.temple-content p{
    text-align: justify;
    font-family: "cabin-medium";
    padding-bottom: 0.8%;
    color: #030425;
    padding-left: 7%;
    margin: 0;
    line-height: 130%;
}
.temple-style h3{
    font-weight:bold;
    text-align: left;
    font-family:"cabin-semibold";
    color:#ef7427;
    padding:2% 0% 2% 7%;
    margin:0;

}

.temple-list{
    float:left;
    list-style-type:none;
    text-align: justify;
    font-family: "cabin-medium";
    padding-bottom: 0.8%;
    color: #030425;
    padding-left: 7%;
    margin: 0;
    line-height: 130%;
    font-size: 90%;

}
.temple-style img{
    float: left;
    margin-left: 8%;
    width: 40%;
    margin-top: -7%;
}







/* Home page styles */

.home-body{
    /* position: fixed; */
    width: 100%;
    height: 100%;
    bottom: 0;
    
    /* background-attachment: fixed; */
    background-size: cover;
    background-repeat: no-repeat;    
    animation:bg-animation 20s linear infinite 0s;
    z-index: 1;
}
.slider-1{background-image: url('../images/slider-1.jpg');}
.slider-2{background-image: url('../images/slider-2.jpg');}
.slider-3{background-image: url('../images/slider-3.jpg');}
.slider-4{background-image: url('../images/slider-4.jpg');}
.slider-5{background-image: url('../images/slider-5.jpg');}
.slider-6{background-image: url('../images/slider-6.jpg');}
.slide-left-to-right{animation: slide-left-to-right 1s linear;}
.slide-top-to-bottom{animation: slide-top-to-bottom 1s linear;}
.slide-right-to-left{right:0; animation: slide-right-to-left 1s linear;}
.slide-bottom-to-top{right:0;animation: slide-bottom-to-top 1s linear;}
.slider-2 + .slider{background-color: #ec1f25}
.slider-2 + .slider h1{padding-top: 8%;}
.slider-3 + .slider{background-color: #ef5b2a}
.slider-4 + .slider{background-color: #3eac4a}
.slider-5 + .slider{background-color: #f17c22}
.slider-6 + .slider{background-color: #f17c22}
.slider{
    background-color: #ec1f2587;
    /* min-height: 40%; */
    width: 40%;
    z-index: 6;
    position: fixed;
    /* animation: slide-left-to-right 1s linear; */
    top: 35%;
    opacity: 0.75;
    padding-bottom: 3%;
} 
.slider h1{
    text-align:center;
    font-weight: bold;
    font-size:250%;
    color:#ffffff;
    line-height:140%;
    /* margin:60px auto; */
    font-family:"cabin-regular";
    text-shadow: 6px 6px 5px rgb(0, 0, 0);
}
@keyframes text-zoom{
    0%{
        animation-timing-function: ease-in;
    }
    80%{
        transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    100%{

    }
}
h1.txt-head
{
    position: fixed;
    z-index: 8;
    bottom: 2%;
    width: 100%;
    text-align: center;
    color: white;
    font-family: "antosan demo";
    font-size: 576%;
    text-shadow: 6px 13px 17px black;
    animation: text-zoom 1s linear
    
}
/* idols */
/* .idols-pagebody {
    height: 100%;
    width: 100%;
    background-image: url(../images/idols-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
    background-position-y: 70%;
} 

.idols-content {
    height: 100%;
    width: 55%;
}
.idols-content p {
    font-size: 100%;
    text-align: justify;
    font-family: "cabin-regular";
    color: #030425;
    padding-left: 10%;
    margin: 0;
    line-height: 140%;
}
*/
.idols-pagebody{
    height:100%;
    width:100%;
    /* background-image: url(../images/Idol-and-Sculpture-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; */
    background-image: url(../images/Idol-and-Sculpture-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: 70%;
    background-position-y: 70%;
    
}
.idols-content{
    height:100%;
    width:45%;
  
}

.idols-content h1{
    font-weight:bold;
    text-align: center;
    font-family:"cabin-semibold";
    color:#ef7427;
    padding:1.5% 0% 1% 18%;
    margin:0;

}
.idols-content p{
    text-align:justify;
    font-family:"cabin-medium";
    color:#030425;
    padding-left:18%;
    margin:0;
    line-height:140%;
}

.small-bg1 img {
    padding-top:2%;
    margin:0;
    float: left;
    padding-left:23%;
    width: 24%;

}
.small-bg2 img,.small-bg3 img{
    padding-top:2%;
    margin:0;
    float: left;
    padding-left:1%;
    width: 23.5%;

}
.tc-before, .tc-after {
    width: 50%;
    float: left;
    overflow: hidden;
}

.back-container
            {
                position: fixed;
                width: 52%;
                bottom: 0;
                text-align: center;
                padding-bottom: 1%;
            }
            .back-container a
            {
                text-decoration: none;
                background: #ef7427;
                color: white;
                padding: 1% 6%;
                font-family:"cabin-regular";
            }
            .contact-us-pagebody{ background: url('../images/contact-us.jpg');
                width: 100%;
                height: 100%;
                /* background-attachment: fixed; */
                background-size: cover;
                font-family: "cabin-regular";
            }
            .contact-map {
                width: 50%;
                height: 45%;
            }
.c-head
{
    font-family:"cabin-semibold";
    font-weight: bold;
    font-size: 105%;
}
.concern-name{
    font-family:"cabin-semibold";
    color: #f57d20;
}
.contact-address{
    width: 82%;
    margin: 0 auto;
    padding-top: 2%;
}
.section{
    margin-top: 14px;
}

/* Responsive styles - Desktop - 1024, 1280, 1360 */
@media screen and (max-width: 1024px)
{
    .contact-us-pagebody {
        background-position-x: -100px !important;
    }
}

@media screen and (min-width: 1000px)  and (max-width: 1100px){
    /* Aboutus Page style */
    .common-content p {
        font-size: 100%;
    }
    .link li {
        font-size: 100%;
    }
    .public-pagebody,.aboutus-pagebody {
        background-attachment: unset;
    }
    .public-content {
        width: 65%;
    }
    .header {padding-top: 0.2%;}
    .mural-pagebody {
        background-attachment: unset;
        background-position-x: -90px;
    }
    .image-title {
        width: 60%;}
        .image-title span {
            float: left;
            width: 45%;
            margin-top: 9%;
            padding: 0;
            font-size:90%;
        }
        .mp-before img,.mp-after img{ height: 148px;}
        .temple-content {    width: 50%;}
        .tc-before img, .tc-after img { height: 128px; }
        .tc-container {
            margin: 30% auto;}
            .temple-style img {    width: 45%;}

            
            .temple-content {    width: 45%;}
                    .tc-before img, .tc-after img { height: 128px; }
                    .tc-container {
                        margin: 25% auto;}
                        .temple-style img {    width: 40%;    margin-left: 18%; }
                        
                        
.back-container
{
    position: fixed;
    width: 52%;
    bottom: 0;
    text-align: center;
    padding-bottom: 1%;
}
.back-container a
{
    text-decoration: none;
    background: #ef7427;
    color: white;
    padding: 1% 6%;
    font-family:"cabin-regular";
}
.temple-content {    width: 45%;}
        .tc-before img, .tc-after img { height: 128px; }
        .tc-container {
            margin: 25% auto;}
            .temple-style img {    width: 40%;    margin-left: 18%; }
            
            .contact-us-pagebody{ background: url('../images/contact-us.jpg');
                width: 100%;
                height: 100%;
                /* background-attachment: fixed; */
                background-size: cover;
                font-family: "cabin-regular";
            }
            .contact-map {
                width: 50%;
                height: 45%;
            }
            .c-head
            {
                font-family:"cabin-semibold";
                font-weight: bold;
                font-size: 105%;
            }
            .concern-name{
                font-family:"cabin-semibold";
                color: #f57d20;
            }
            .contact-address{
                width: 82%;
                margin: 0 auto;
                padding-top: 2%;
            }
            .section{
                margin-top: 14px;
            }
            

}
body{background-color: white;}
.mobile-header{ display: none;}
/* #### Mobile Phones Portrait or Landscape #### */
@media only screen and (max-width: 780px){
    
    .header{
        display: none;
    }
    .mobile-header{
        display: block;
        position: fixed;
        width: 100%;
        height: 20%;
        overflow: hidden;
        text-align: center;
    }
    .mobile-header .logo{
        display: block;
        text-align: center;
        overflow: auto;
    }
    .mobile-header .logo img{
        width: 70%;
        float: none;
        margin-top: 2%;
    }
    .page-body {
        height: 83%;
    }
    .mobile-header .menu{
        margin: 0 auto;
        /* width: 70%; */
        display: inline-block;
        /* top: 40%; 
        float: none;
        width: 220px;*/
        padding: 0;
    }
    .menu li{
        padding: 10px 8px;
    text-align: center;
    }

    h1.txt-head {
        font-size: 350%;
    }
    .slider h1 {
        font-size: 175%;
    }

    .public-content p {
        font-size: 86%;
    }
    .slider { width: 70%;
        /* min-height: 35%; */
        top: 40%;
    }
    .slider-1{
        background-image: url(../images/mobile-slider-1.jpg);
    }
    .slider-2{
        background-image: url(../images/mobile-slider-2.jpg);
    }
    .slider-3{
        background-image: url(../images/mobile-slider-3.jpg);
    }
    .slider-4{
        background-image: url(../images/mobile-slider-4.jpg);
    }
    .slider-5{
        background-image: url(../images/mobile-slider-5.jpg);
    }
    .slider-6{
        background-image: url(../images/mobile-slider-6.jpg);
    }
    .common-content {
        width: 80%;
    }
    .aboutus-pagebody { overflow: auto; background-image: url(../images/mobile-about-us.jpg); }
    .common-content p {
        font-size: 90%;}
    .idols-pagebody
    {background-image: url(../images/mobile-idols-bg.jpg);}
    
    .idols-content, .public-content,.mural-content,.temple-content {width: 80%;}
    .idols-content h1,.common-content h1,.mural-content h1,.temple-content h1,.public-content h1{
        font-size: 120%;
        padding: 5px 0;
    }
    .idols-content p,.mural-content p,.temple-content p, .link li a{
        padding-left: 3%;
        font-size: 90%;
    }
    .small-bg1,.small-bg2,.small-bg3{ display: none;}
    /* .public-pagebody {
        background-image: url(../images/mobile-publications.jpg);
    } */
    .public-pagebody {
        overflow: auto;
        background-image: url(../images/mobile-publications.jpg);
        
        background-size: 100% 100%;
    }
    .temple-pagebody {    background-size: 100% 100%;background-image: url(../images/mobile-temple-conservations.jpg);}
    .tc-container {padding-top: 5%;}
    
        .mural-pagebody {
            overflow: auto;
            /* background-position: right;
    background-position-x: -500px; */
    background-image: url(../images/mobile-mural-painting.jpg);
    background-size: 100% 100%;
}
.mural-content{ height: auto;}
.mp-before,.mp-after{
    display: none;
}
.tc-container, .temple-style img { display: none; }
.temple-style h3 {padding: 2% 0% 2% 2%;}
.temple-list {padding-left: 2%;}
.temple-content{    padding-top: 20%;}
.public-content p {line-height: normal;}
.mural-content {padding-top: 15%;}

        .temple-list{    font-size: 75%;}
        .common-content h3{
            font-size: 120%;
            
        }
        .link{
            margin: 0;
            padding: 0 8px;
        }
        .link li{ padding: 0;}
        .back-container{
            width: 100% !important;
            padding-bottom: 10px;
        }
        /* .contact-us-pagebody{    background-position-x: -450px !important;} */
        .contact-map {
            width: 80%;}
            .contact-us-pagebody{ 
                overflow:  auto;
                font-size: 90%; 
                /* background-position: unset;
                background-attachment: fixed;
                background-size: 100% 100%;
                background-repeat: no-repeat; */
                background: url(../images/mobile-contact-us.jpg);
                background-size: cover;
                background-position-x: 0 !important;
            }
            .public-content {
                height: 50% !important;
                overflow: auto;
            }
            .link li:nth-child(even) a{
                color: #0000ffc4;
            }
            .link li a{
                display: block;
                padding: 5px 8px;
                line-height: normal;
            }
            /* .common-content p {
        font-size: 96% !important;
    }
    .aboutus-pagebody { overflow: auto; }
    .common-content {    width: 80%;}
    .idols-content { width: 80%;}
    .idols-pagebody{ overflow:  auto;}
    .mobile-back-container { width: 100% !important; }

    .public-content {
        width: 97% !important;
        margin-left: -2% !important;
    }
    .public-content h1 {
        font-size: 152% !important;
        padding: 2% 0% 2% 0% !important;
    }
    .public-pagebody {
        background-position-x: -87px;
        background-position-y: 36px;
    } */
}


@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
    
}
@media (min-width: 1200px) {
    
}

@media screen and (max-width: 1140px) {
    
}
@media screen and (max-width: 600px) {
    
}