@color1: #1D3557;
@color2: #457B9D;
@color3: #A8DADC;
@color4: #E89633;
@color5: #E33D7F;

.home
{
.navigation-wide{
            
             @media screen and (max-width : 1050px)
                {
                  display : none;
                }
}
.alert-panel
{
    padding-top : 80px;
    background-color: @color4;

    .alert
    {
        font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
        /*padding : 10px 0;*/
        text-align: center;
        font-size:20px;
        padding-bottom: 10px;
        /*h3 
        {
            font-size: x-large;
        }

        p
        {
            padding : 10px 0 0 0;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
            
        }*/
    }

    @media screen and (max-width : 1050px)
    {
        padding-top : 65px;
    }
}

.videodiv
{
    width : 100%;
    position : fixed;

    #background-video
    {
        width : 100%;
    }

    .site-title
    {
        position : absolute;
        top : 3vh;
        font-size : 80px;
        padding : 14px;
        font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
        -webkit-text-stroke: 1px @color1;
        color : white;
        width : 100%;
        text-align : center;
            
        img
        {
            height : 20vh;
            margin-top:2%;
            margin-right:2%;
        }
            
        @media screen and (max-width:800px)    
        {
        img
        {
            height : 15vh;
            margin-top:2%;
            margin-right: 4%;
        }    
        }    
            
    }
    
    /*top : 75px;*/
    left : 0;

    z-index: -1;

    @media screen and (max-width:1050px)
    {
        position : fixed;
        /*padding-top : 50px;*/
        
        
    }
}

.page-content
{
    width : 100%;
    margin-top : 30vh;
    display : flex;
    flex-direction: column;

    @media screen and (max-width : 1050px)
    {
        margin-top :30vh;
    }

    
            
        }
    .section-title
    {
            font-size: xx-large;
            border-bottom : 1px dashed @color1;
            margin : 30px 0 30px 0;

            font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
            color : @color1;
    }

    .story-container
    {
        width : 100%;
        background-color: white;

        .story
        {
            width : 66%;
            margin : auto;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
            color : @color1;
            display : flex;
            flex-direction: column;
            position: relative;

            p 
            {
                margin : 20px;
                text-align: justify;
            }
            
            a{
                text-decoration: none;
                color:@color5;    
            }
            
            a:hover{
                color:@color5;
            }
             
        }
        @media screen and (max-width: 800px)
        {
        
        .story
        {
            width:95%;
        }
        .more
        {
            color : @color5;
            text-decoration: underline;
            cursor : pointer;
            font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
            font-style:bold;
            text-decoration: none;
        }
        
        .more:hover{
            color:@color4;
        }
        
        .show-more
        {
            display : none;
        }
        }
    }

    .displayed-boxes
    {
        display : flex;

        @media screen and (max-width: 800px)
        {
            flex-direction: column;
        }

        justify-content: space-around;

        .displayed-item
        {
            background-color: white;
            margin : 5%;
            padding : 8px;
            width : 10%;
            flex : 1 1 auto;
            position : relative;

            -webkit-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.69);
            -moz-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.69);
            box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.69);
            
            a
            {
                text-decoration:none;
            }
            
            h1
            {
                font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
                font-size: xx-large;
                margin : 10px 0 10px 0;
                color : @color1;
                text-align : center;

                &:hover
                {
                    color : @color5;
                }
            }

            hr
            {
                width : 80%;
                margin-left : 10%;
                height : 1px;
                background-color: @color3;
            }

            

            .item-image
            {
                width : 100%;
                position : relative;

                img
                {
                    width : 100%;
                    
                    object-fit: cover;
                }

                .opacity-on-hover
                {
                    display : none;
                    opacity: 0.8;
                    width : 100%;
                    height : 100%;
                    position : absolute;
                    top : 0;
                    left : 0;
                    background-color: @color1;
                    vertical-align: middle;
                    @media screen and (max-width: 800px)
                    {opacity:0;}
                    p
                    {
                        margin : 5% 10% 5% 10%;
                        font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                        font-size: large;
                        overflow : auto;
                        width : 80%;
                        color : @color3;
                        text-align: center;
                    }
                    
                    a{
                        text-decoration: none;
                        color:@color3;   
                    }
                }
            }

            .gotosection
            {
                position : absolute;
                bottom : 10px;
                right : 15px;

                h3
                {
                    text-decoration: underline;
                    margin-bottom : 8px;
                }

                .goto
                {
                    border-radius: 18px 18px 18px 18px;
                    -moz-border-radius: 18px 18px 18px 18px;
                    -webkit-border-radius: 18px 18px 18px 18px;
                    padding : 5px;
                    background-color: @color5;
                    color : @color4;
                    border : 1px dashed @color4;
                    text-align: center;

                    &:hover
                    {
                        background-color: @color4;
                        color : @color5;
                        border-color: @color5;
                    }
                }
            }
        
        @media screen and (max-width: 800px)
        {
            width : 85%;
        }
        }
    }
    
}