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

@navmargin: 10px;

.hide-small
{
    @media screen and (max-width : 1050px)
    {
        display : none;
    }
}

.hide-wide
{
    @media screen and (min-width : 1050px)
    {
        display : none;
    }
}

@font-face
{
    font-family : 'aquarium';
    src: url("fonts/73b2205b7e71a51b4df11d2837ad8185.eot"); /* IE9*/
    src: url("fonts/73b2205b7e71a51b4df11d2837ad8185.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/73b2205b7e71a51b4df11d2837ad8185.woff2") format("woff2"), /* chrome、firefox */
    url("fonts/73b2205b7e71a51b4df11d2837ad8185.woff") format("woff"), /* chrome、firefox */
    url("fonts/73b2205b7e71a51b4df11d2837ad8185.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("fonts/73b2205b7e71a51b4df11d2837ad8185.svg#Ailerons Regular") format("svg"); /* iOS 4.1- */
}

@font-face
{
    font-family : ''Roboto'';
    src : url('fonts/secrcode.ttf');
}

.wip
{
    width : 65%;
    margin : auto;
}

table
{
    border-collapse: collapse;
    //border : 1px solid black;
    border: 1px outset black;
    text-align: center;
    width : 100%;
    background-color:white;
    //background-image: url('https://cdn.hipwallpaper.com/i/42/44/Y4PeFU.jpg');
    background-position: center;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:13.3333px;

        .navigation-small{
            
             @media screen and (min-width : 1050px)
            {
            display : none;
            }
            h3{
                font-size: 1rem;
            }
            }
            
        .navigation-wide{
            
             @media screen and (max-width : 1050px)
                {
                  display : none;
                }
            h3{
                font-size: 2rem;
            }
            }
    
    td, th
    {
        padding : 5px 0 5px;
        
        
    }

    .table-item
    {
        td
        {
            border-collapse: collapse;
            border:1px outset black;
            
           
        }
    }
}

.gray-italic
{
    color : white;
    font-style : bold;
    margin:10px;
}

header
{
    background-color: white;
    color: @color1;

    font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
    position : fixed;
    z-index: 2;

    width : 100%;

    .navigation-wide
    {
        text-align: center;

        @media screen and (max-width : 1050px)
        {
            display : none;
        }

        ul
        {
            margin : @navmargin 0 @navmargin 0;

            display : inline-block;
            list-style: none;

            li
            {
                display : inline-block;
                margin: 0 10px 0 10px;
                font-size: 27px;

                vertical-align: middle;

                a
                {
                    text-decoration: none;
                    color: inherit;

                    &:hover
                    {
                        transition: color 0.5s;
                        color: @color5;
                    }
                }

                img
                {
                    width: 50px;
                    height: 50px;
                }

                .social-networks
                {
                    position:absolute;
                    right:10px;
                    vertical-align: center;
                    margin-left:10px;
                }
            }
        }
    }

    .navigation-small-menu
    {
        display : none;

        text-align: center;
        font-size: 24px;

        border-bottom : 2px solid @color1;
        

        ul
        {
            list-style: none;

            li
            {
                margin : 35px 0;

                @media screen and (max-height: 590px)
                {
                    margin : 10px 0;
                }

                a
                {
                    text-decoration: none;
                    color: inherit;
                }
            }
        }
    }

    .navigation-small
    {
        display : flex;
        border-bottom : 2px solid @color1;

        @media screen and (min-width : 1050px)
        {
            display : none;
        }

        .button-menu
        {
            text-align: center;
            vertical-align: text-top;
            font-size: 42px;
            height : 65px;
            width : 50%;
            
            img, i
            {
                vertical-align: middle;
                display: inline-block;
            }

            img 
            {
                width : 42px;
                height : 42px;
            }
        }
    }
}




.page-common
{
    padding-top:;
    width : 100%;
    height:100%;
    background: white;
    background: @color1;
    
    
    .page-description
    {
        width:64%;
        margin:auto;
        padding:1%;
        margin-bottom:15px;
        color:white;
        
        .description-preview
        {
        a.test
        {
            text-decoration:underline ;
            font-family: aquarium, Verdana, Geneva, Tahoma, sans-serif;
            color:white;
            cursor : pointer;
            letter-spacing: .1rem;
            font-size: 24px;
        
        }
            a.test:hover
            
            {
            
            transition: color 0.5s;
            color:@color5;
        }
        
        }
        
        .navigation-small{
            
             @media screen and (min-width : 1050px)
            {
            display : none;
            }
            
        }    
        .navigation-wide{
            
             @media screen and (max-width : 1050px)
                {
                  display : none;
                }
            
        }
        
        .more, .less
        {
            
            
            text-decoration: underline;
            cursor : pointer;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

            
            
            

            &:hover
            {
                transition: color 0.5s;
                color: @color5;
            }
        }
        
        .show-more
        {
            display : none;
        }

        p
        {
            top:0;
            width:100%;
            text-align: justify;
            flex-wrap: wrap;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }       
        
        @media screen and (max-width:1050px)
        {
            img{
                width:95%;
                margin-top:-10px;
                margin-bottom:-10px;
            }
            width:95%;
        }
         
    }
    
    p{
    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
    }
     
    .widget
    {
        .navigation-small{
            
             @media screen and (min-width : 1050px)
            {
            display : none;
            }
            h3{
                font-size: 1rem;
            }
            h2{
                font-size: 15px;
            }
            }
            
        .navigation-wide{
            
             @media screen and (max-width : 1050px)
                {
                  display : none;
                }
            .title {
            h3{
                font-size: 2rem;
            }
            h2{
                font-size: 15px;
            }
            }
        }
        
        .hidder{
            background:white;
            height:30px;
            margin-bottom:-30px;
            position:relative;
            z-index:1
        }
        position:relative;
        width:66%;
        
        img{
            width:100%;
            margin-top:0px;
            margin-bottom:0px;
        }
        
        a{
            text-decoration:none;
            color:@color5;  
        }
        
        a:hover{
            transition: color 0.5s;
            text-decoration:none;
            color:@color4;  
        }

        @media screen and (max-width:1050px)
        {
            img{
                width:100%;
                margin-top:0px;
                margin-bottom:0px;
            }
            width:100%;
        }

        margin:auto;
        z-index:0;
    }
    
}

footer
{


    background-color: @color1;
    color : @color2;

    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

    .copyright
    {
        padding : 5px;
        margin-left : 10%;

        @media screen and (max-width:900px) 
        {
            margin : auto;
        }
    }
    
.navigation-wide
    {
        @media screen and (max-width : 1050px)
        {
            display : none;
            font-size: x-small;
        }
        
    .bottommenu
    {
        display : flex;

        @media screen and (max-width:900px) 
        {
            flex-direction: column;
            align-items: stretch;
            margin-left : 0px;
        }

        justify-content: space-around;
        padding : 30px 0;
        font-size: x-small;

        a{
            text-decoration:none;
            font-size: x-small;
            color:@color2;
         }
         
        a:hover{
            transition: color 0.5s;
            color:@color5;
        }
        
        h4
        {
            color : white;
            margin-bottom : 6px;
            font-size: x-small;
        }

        .spacebottom{
            margin-bottom:6px;
        }
        
        ul
        {
            list-style: none;
            margin-bottom : 15px;
            font-size: x-small;
        }
        
        .website
        {
            display : flex;

            img
            {
                width : 120px;

                @media screen and (max-width:500px)
                {
                    width : 40%;
                    margin-bottom : 15px;
                }

                object-fit : contain;
                margin : 0 10px;
            }
        }
    }
}
}

.navigation-small
    {
         @media screen and (min-width : 1050px)
            {
            display : none;
            font-size: small;
            }
             .bottommenubis
    {
        display : flex;

        @media screen and (max-width:900px) 
        {
            flex-direction: column;
            align-items: stretch;
            margin-left : 25px;
        }

        justify-content: space-around;
        padding : 30px 0;

        a{
            text-decoration:none;
            color:@color2;
            font-size: small;
         }
         
        a:hover{
            transition: color 0.5s;
            color:@color5;
        }
        
        h4
        {
            color : white;
            margin-bottom : 6px;
            font-size: small;
        }

        .spacebottom{
            margin-bottom:6px;
        }
        
        ul
        {
            list-style: none;
            margin-bottom : 15px;
            font-size: small;
        }
        
        .website
        {
            display : flex;

            img
            {
                width : 120px;

                @media screen and (max-width:300px)
                {
                    width : 40%;
                    margin-bottom : 15px;
                }

                object-fit : contain;
                margin : 0 10px;
            }
        }
    }
     .bottommenu
    {
        display : flex;

        @media screen and (max-width:900px) 
        {
            flex-direction: row;
            align-items: stretch;
            margin-left : 0px;
        }

        justify-content: space-around;
        padding : 0px 0;

        a{
            text-decoration:none;
            color:@color2;
         }
         
        a:hover{
            transition: color 0.5s;
            color:@color5;
        }
        
        h4
        {
            color : white;
            margin-bottom : 6px;
        }

        .spacebottom{
            margin-bottom:6px;
        }
        
        ul
        {
            list-style: none;
            margin-bottom : 15px;
        }
        
        .website
        {
            display : flex;

            img
            {
                width : 120px;

                @media screen and (max-width:300px)
                {
                    width : 40%;
                    margin-bottom : 15px;
                }

                object-fit : contain;
                margin : 0 10px;
            }
        }
    }
}

.maps
{
    height : 250px;
  
}

.page
{
    position : relative;
}

*, body, html
{
    margin : 0;
    padding : 0;
    border : 0;
}

body, html
{
    width: 100%;
}