body
{
    margin: 0%;
    padding: 0%;
    font-size: 18px;
    font-family: OldSoviet;
    background-color: aliceblue;
}

h1
{
    font-family:  DonpoligrafbumBold;
}
h2
{
    font-family: USSRSTENCIL WEBFONT;
    font-size: 37px;
}

a
{
    color: none;
    outline: none;
    text-decoration: none;
    font-weight: bold;
}
a:link
{
    color: rgb(54, 82, 109);

}
a:visited
{
    color: rgb(48, 48, 105);
}
a:active
{
    color: rgb(24, 19, 120);
}
a:hover
{
    color: aliceblue;
}

.pagecontent
{
    background-image: linear-gradient(rgb(227, 227, 227), rgb(164, 172, 184));
}




/*   --- TOP MENY ---   */

.topmeny
{
    display: flex;
    justify-content: space-between;
    padding-left: 3%;
    padding-right: 3%;
    position: fixed;
    top: 0;
    height: 50px;
    width: 95%;

    background-image: linear-gradient(rgb(63, 63, 63), rgb(47, 47, 47));
}

.topmeny>div>img
{
    height: 50px;
    margin: 0;
}

.topmeny>nav>ul
{
    padding: 0px;
    margin: 0px;
}

.topmeny>nav>ul li
{
    display: inline-block;
    margin-right: 1px;
    padding: 0px;
    align-content: center;
    list-style: none;
}
.topmeny>nav>ul a
{
    display:block;
    min-width: 170px;
    padding: 5px;
    height: 40px;

    color: aliceblue;
    text-align: center;
    line-height: 40px;
    font-family: USSRSTENCIL WEBFONT;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.topmeny>nav>ul a:hover
{
    color: rgb(35, 35, 35);
    background-image: linear-gradient(rgb(190, 190, 190), rgb(255, 255, 255));
}

.listmeny
{
    visibility: collapse;
}

.listmeny>img
{
    width: 100px;
}

@media (max-width: 1068px) 
{
    .topmeny>nav 
    {
        visibility: collapse;
        flex-direction: column;
    }
    
    .listmeny
    {
        visibility: visible;
    }
    .buttoncontainer>ul
    {
        flex-direction: column;
    }
}



/*   --- SITE TITLE ---   */

.sitetitle
{
    display: flex;
    flex-direction: column;
    height: 500px;
    margin-bottom: 3vh;
    padding-left: 20vw;
    padding-right: 20vw;

    text-align: center;

    background-color:rgba(95, 95, 95, 0.458);
    background-image: url('../images/FONS_1.png');
    background-size: cover;
    background-position-y: center;
}

.sitetitle_info
{
    margin-top: 10vh;
    text-align: center;
    color: aliceblue;
}

.sitetitle_mini
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
    margin-bottom: 3vh;

    text-align: center;
    text-transform: uppercase;
    color: aliceblue;

    background-color:rgba(159, 159, 159, 0.458);
    background-image: url('../images/FONS_3.png');
    background-size: cover;
}




/*   --- BUTTON CONTAINER ---   */

.buttoncontainer
{
    margin-top: 5vh;
}

.buttoncontainer>ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buttoncontainer>ul li
{
    margin: 0%;
    margin-top: 1%;
    margin-left: 10px;
}

.buttoncontainer>ul a
{
    justify-content: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    padding: 20px;

    color: rgb(227, 227, 227);
    border-style: solid;
    border-width: 2px;
    border-radius: 50px;
}

.buttoncontainer>ul a:hover
{
    color: rgb(45, 45, 45);
    background-image: linear-gradient(rgba(255, 255, 255, 0.448),rgba(255, 255, 255, 0.81));
}

#vertical
{
    flex-direction: row;
}





/*   --- INFO PARAGRAPH ---   */

.infoparagraph
{
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-left: 20vw;
    padding-right: 20vw;
    padding-bottom: 5vh;
}

.infoparagraph>h2
{
    text-align: center;
}

.infoparagraph>p
{
    text-align: center;
}

.infoparagraph>img
{
    display: block;
    width: 100%;
    margin-bottom: 20px;

    border-style: solid;
    border-radius: 20px;
    border-width: 1px;
}



/*   --- PARAGRAPH WITH IMAGE ---   */

.paragraphwithimage
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin-top: 3vh;
    margin-bottom: 3vh;
}

.paragraphwithimage>img
{
    width: 370px;
    margin-right: 20px;
    border-style: solid;
    border-color: rgb(29, 29, 29);
    border-radius: 20px;
}

.paragraphwithimage>p
{
    display: block;
    width: 500px;
}




/*   --- DATA CARD ---   */

.datacard
{
    display: flex;
}

.datacard>img
{
    width: 500px;
}

.datacard ul
{
    margin-top: 10px;
    margin-bottom: 10px;
}




/*   --- EMPLOE CARD ---   */
.emploecard
{
    display: flex;
    padding: 25px;
    margin-bottom: 10px;
    width: 800px;

    background-color: rgba(255, 255, 255, 0.533);
    border-radius: 15px;
}

.emploecard img
{
    width: 250px;
    margin-right: 20px;
}

.emploecard h3
{
    margin: 0;
    padding: 0;
}





/*   --- IMG CONTAINER ---   */

.imgcontainer>ul
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

.imgcontainer>ul li
{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    margin: 20px;
}

.imgcontainer>ul img
{
    height: 250px;
    margin-bottom: 10px;
}





/*   --- DOCUMENT ---   */

.pagedocument
{
    margin-left: 20vw;
    margin-right: 20vw;
    margin-bottom: 50px;
    padding: 5px;

    background-color: bisque;
    outline-style: solid;
    outline-width: 2px;
}

.pagedocument>p
{
    text-align: center;
}

.map
{
    border-radius: 10px;

    outline-style: solid;
    outline-width: 2px;
}




/*   --- PRODUCT TABLE ---   */

.productiontable
{
    margin-top: 3vh;
}

.productiontable>table
{
    border-collapse: collapse;
    border-style: solid;
    border-color: black;
    border-width: 2px;
}


.productiontable>table th, td
{
    padding: 10px;

    border-style: solid;
    border-width: 2px;
}

.productiontable>table td
{
    text-align: center;
    background-color: rgb(218, 218, 218);
}

.productiontable>table th
{
    color: aliceblue;
    text-align: left;
    border-color: black;
    background-image: linear-gradient(rgb(105, 105, 105), rgb(69, 69, 69));
}

.productiontable>table th:hover
{
    color: black;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(197, 197, 197));
}

.productiontable>table>tbody img
{
    width: 200px;
}