/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21 Sep, 2020, 6:57:58 PM
    Author     : Jawahar
*/

#vision-container-div{
    margin:10px;
    /*background-image: url('images/bk2.webp');*/
    /*background-color: #bf597f;*/
}

#vision-div{    
    padding:10px;
    background-color: rgba(255,255,255,0.4);
    /*background-color: white;*/
}

#mission-container-div{
    margin:10px;
    /*background-image: url('images/bk2.webp');*/
    /* background-color: #bf597f;*/
}

#mission-div{    
    padding:10px;
    background-color: rgba(255,255,255,0.4);
    /*background-color: white;*/    
}

.notice-div-1{
    /*
    background-image: url('images/notice_pad.webp');
    background-size: cover;
    background-position: center center;

    min-height: 75vh;
    max-width: 400px;
    position:relative;

    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;       
    padding:10px 25px 10px 25px;  */  

}

.notice-div-heading{
    color:#353962;
    padding:10px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}


.notice-div{
    /*padding:15px;
    height:200px;
    padding:10px;
    background-image: url(images/wooden_texture.webp);
    background-repeat: repeat;*/
    /*height:300px;
    border:solid 1px red;*/
}

.notice-inner-div{
    color:#6a6a6a;
    /*width:100%;
    height:100%;*/
    /*background-image: url(images/green-board.webp);*/
    /*padding:10px;*/
    /*display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: justify;*/
}

.calendar-link{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;       
    cursor: pointer;
}

#notice-container-div{    
}

#image-scroller-container-div{
    margin-top: 20px;
    width:100%;     
    text-align: center;    
}

li span {
    position: relative;
    left: -10px;
}

.film-strip-image-container-div{
    background-color: white;
    padding:5px;
}

.side-image{    
    height:120px;
}

.fancy-stuff{
    padding:0px!important;
}

div.fancy-stuff{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
}

.fancy-image-div{
    max-width: 200px;
    min-width: 200px;  
    max-height: 200px;
    min-height:200px;
    background-color: white;
    overflow: hidden;
}

.fancy-image{
    max-width: 200px;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

.fancy-image:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}


.fancy-matter-div{
    max-width: 200px;
    min-width: 200px;  
    max-height: 200px;
    min-height:200px;    
    color:white;
    background-color: navy;    
    transition: background 1s ease;
}

.arrow-div-container{        
    position:relative;
    height:15px;
}

.arrow-up{
    width:30px;
    height:30px;    
    border-radius: 50%;
    margin:0px auto;
    background-color: navy;
    transform: rotateY(0deg) rotate(45deg);
    position:absolute;
    top:-15px;
    left:85px;
    transition: background 1s ease;
    z-index: 999;
}

.arrow-down{
    width:30px;
    height:30px;    
    border-radius: 50%;
    margin:0px auto;
    background-color: navy;
    transform: rotateY(0deg) rotate(45deg);
    position:absolute;
    top:15px;
    left:85px;
    transition: background 1s ease;
    z-index: 999;
}

.matter-div-container{  
    height:170px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#fancy-image-div-1:hover + #fancy-matter-div-1{
    background-color: yellow;
    color:black;
}

#fancy-image-div-1:hover + #fancy-matter-div-1 > #arrow-div-container-1 > #arrow-div-1{
    background-color: yellow;
    color:black;
}

#fancy-matter-div-1:hover {
    color:black;
    background-color: yellow;    
}

#fancy-matter-div-1:hover > #arrow-div-container-1 > #arrow-div-1{
    color:black;
    background-color: yellow;    
}




#fancy-image-div-2:hover > #fancy-matter-div-2{
    background-color: yellow;
    color:black;
}


#fancy-image-div-2:hover ~ #fancy-matter-div-2 > #arrow-div-container-2 > #arrow-div-2{
    background-color: yellow;
    color:black;
}

#fancy-matter-div-2:hover {
    color:black;
    background-color: yellow;    
}

#fancy-matter-div-2:hover > #arrow-div-container-2 > #arrow-div-2{
    color:black;
    background-color: yellow;    
}


#fancy-image-div-3:hover + #fancy-matter-div-3{
    background-color: yellow;
    color:black;
}

#fancy-image-div-3:hover + #fancy-matter-div-3 > #arrow-div-container-3 > #arrow-div-3{
    background-color: yellow;
    color:black;
}

#fancy-matter-div-3:hover {
    color:black;
    background-color: yellow;    
}

#fancy-matter-div-3:hover > #arrow-div-container-3 > #arrow-div-3{
    color:black;
    background-color: yellow;    
}



@media (max-width:700px){
    .fancy-image-div{
        max-width: 300px;
        min-width: 300px;  
        max-height: 300px;
        min-height:300px;
        overflow: hidden;
    }

    .fancy-image{
        max-width: 300px;
    }

    .fancy-matter-div{
        max-width: 300px;
        min-width: 300px;  
        max-height: 300px;
        min-height: 300px;    
        color:white;
        background-color: navy;    
        transition: background 1s ease;
    }

    .arrow-up{
        width:30px;
        height:30px;    
        border-radius: 50%;
        margin:0px auto;
        background-color: navy;
        transform: rotateY(0deg) rotate(45deg);
        position:absolute;
        top:-15px;
        left:135px;
        transition: background 1s ease;
        z-index: 999;
    }

    .arrow-down{
        width:30px;
        height:30px;    
        border-radius: 50%;
        margin:0px auto;
        background-color: navy;
        transform: rotateY(0deg) rotate(45deg);
        position:absolute;
        top:15px;
        left:135px;
        transition: background 1s ease;
        z-index: 999;
    }

    .matter-div-container{  
        height:270px;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;        
    }
}


.principal-image-message-container{     
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.principal-image{
    height:200px;
    box-shadow: 20px 20px #52ccff;    
    margin-right: 30px;
    margin-bottom: 30px;
}

.principal-message-container{   
    max-width: 500px;
    padding:20px;
    background-image: url('images/designer-background.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}

.principal-message{    
    background-color: rgba(255,255,255,0.7);
    /*font-family: 'Caveat', cursive;*/
    font-weight: 400;    
    font-size: 1.3rem;    
    /*box-shadow: 20px 20px #52ccff;*/
    padding:20px;    
    max-width: 700px;
}

.notice-and-calendar-panel{
    width:100%;
    background-color: #e9ecef;    
    padding:20px;
    margin-bottom: 10px;
}

.film-strip{
    background-color: transparent;
    background-image: url(images/slot.png);
    background-position: left center;
    background-repeat: repeat-x;
    width:100%;
    height:20px;
}

.film-strip{
    background-color: transparent;
    background-image: url(images/slot.png);
    background-position: left center;
    background-repeat: repeat-x;
    width:100%;
    height:20px;
}

.film-strip-up{
    background-color: transparent;
    background-image: url(images/slot_up.png);
    background-position: left center;
    background-repeat: repeat-x;
    width:100%;
    height:20px;
}

.film-strip-down{
    background-color: transparent;
    background-image: url(images/slot_down.png);
    background-position: left center;
    background-repeat: repeat-x;
    width:100%;
    height:20px;
}

.film-strip-image-container-div{
    background-color: rgba(64,61,62,0.7);
    width:100%;
    height:150px;
    padding-top: 15px;
    /*padding-top:15px;*/
    /*padding-bottom:15px;*/
}

.film-strip-wrapper-div{
    background-color: rgba(64,61,62,0);
}

.slide-image{
    height:120px;
}

.blur-div{
    /*background-color: rgba(255,255,255,0.8);*/
}

.date-div{
    position:absolute;
    left:10%;
    top:45%;
    width: 80%;
    height:70px;    
}

.month{
    color:blueviolet;  
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 30px;
}

.date{
    margin:0px auto;
    color:black;
    font-size: 3rem;
    line-height: 40px;
}

@media (max-width:1024px){
    .date-div{
        position:absolute;
        left:10%;
        top:35%;
        width: 80%;
        height:70px;    
    }

    .month{
        color:blueviolet;           
        font-weight: bold;
        font-size: 1.0rem;
        line-height: 20px;
    }

    .date{
        margin:0px auto;
        color:black;
        font-size: 2rem;
        line-height: 30px;
    }
}