@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

section > * {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    overflow-x: hidden;
}

:root{
    --main-blue-color: #013BA7;
    --bio-vis-100: #C30938;
    --bio-zlak-100: #90BC2A;
    --bio-klmal-100: #E31071;
    --bio-pers-100: #F59E11;
    --bio-cher-100: #393083;
    --bio-yabkor-100: #B85303;
    --ryaz-02: #FAB700;
    --sm-10-02: #0A94D3;
    --sm-15-04-02: #0C7F48;
    --sm-20-04-02: #C30938;
    --kef-25-05: #006289;
    --mol-25-09: #87C700;
    --mol-25-1: #C0C601;
    --mol-32-1: #007565;
    --mol-32-09: #013BA7;
    --sm-15-05: #006C4A;
    --snej-05: #7479CA;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Lobster', cursive;
}

a {
    text-decoration: none;
}

/* --main-blue-color: #013BA7 */

#viewport, .slider, .slide, .slide img{
    width: 100vw;
    height: 100vh;
}

#viewport {
    overflow: hidden;
}

.some-des {
    position: absolute;
    left: 40vw;
    top: 15vh;
    width: 50vw;
    height: 62vh;
    background: rgba(255, 255, 255, .6);
    border-radius: 5vh;
    padding: 5vh;
    z-index: 100;
    color: #333
}

.some-des .name-org{
    font-size: 3vh;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .2vw;
}

.some-des .prod-des{
    font-weight: bold;
    word-wrap: break-word;
    font-size: 10vh;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 2vh;
}

.some-des .info-con{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.some-des .info-card {
    width: 16vw;
    margin: 0.8vh;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 .7vw rgba(255, 255, 255, .9);
    padding: 0.8vh;
    border-radius: 2vh;
    text-align: center;
}

.some-des .info-card .info-card-head {
    text-transform: uppercase;
    font-size: 3vh;
    font-weight: bold;
    padding-bottom: 2vh;
}
 
.slider {
    position: relative;
}
 
.slide {
    position: absolute;
    transition: 1s ease-in-out;
    overflow: hidden;
}
 
.slide img {
    object-fit: cover;
    object-position: 0;
    
}

.page_container.second {
    width: 100vw;
    height: 100vh;
    background-image: url("./img/trava/1-trav.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-header {
    font-size: 6vh;
    font-weight: bold;
    margin-bottom: 4vh;
    color: #fff;
}

.cards {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    word-wrap: break-word;
    margin-bottom: 2vh;
    width: 29vw;
    background:  rgba(1, 59, 167, .8);
    padding: 2vh;
    border-radius: 2vh;
}

.card .logo {
    width: 7vw;
    height: 7vw;
    background-image: url("img/free-icon-cow-1998610.png");
    background-size: 7vw;
}

.card .text {
    width: 17vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card .text .header {
    width: 17vw;
    font-weight: bold;
    font-size: 3vh;
    color: #fff;
}

.card .text .content {
    width: 17vw;
    color: #ccc;
    word-wrap: break-word;
}

.logo-stmk {
    position: absolute;
    height: 10vh;
    overflow: hidden;
    left: 1vw;
    top: 2vh;
    z-index: 100;
    background: #fff;
    border-radius: 6vh;
    padding: 1vh;   
    box-shadow: 0 0 1vh 1vh rgba(1, 59, 167, .5);
}

.logo-stmk img {
    height: 9vh;
}

.empty, .logo {
    width: 10vh;
    height: 8vh;
}

.group-nav {
    position: absolute;
    display: flex;
    left: 14vw;
    /* border: .3vw solid var(--main-blue-color); */
    width: 70vw;
    padding: 1vh;
    height: 7vh;
    flex-direction: row;
    justify-content: center;
    padding: 0vh 3vw 0vh 3vw;
    z-index: 1000;
}

.nav-item {
    cursor: pointer;
    border: .25vw solid var(--main-blue-color);
    background: rgba(1, 59, 167, .5);
    width: 18vw;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: skewX(-15deg); 
	-moz-transform: skewX(-15deg); 
	-ms-transform: skewX(-15deg); 
	-o-transform: skewX(-15deg); 
	transform: skewX(-15deg); 
    transition: all .5s ease-in-out;
    font-size: 2.75vh; 
}

.nav-item a {
    color: #fff;
    transition: all .5s ease-in-out;
}

.nav-item:nth-child(2){
    border-left: 0;
    border-right: 0;
}

.nav-item:hover{
    /* scale: 1.1; */
    width: 22vw;
    background-color: #fff;
    color: rgba(1, 59, 167, .5);
}

.nav-item:hover a {
    color: #013ba7;
}

.nav-item > * {
    -webkit-transform: skewX(15deg); 
	-moz-transform: skewX(15deg); 
	-ms-transform: skewX(15deg); 
	-o-transform: skewX(15deg); 
	transform: skewX(15deg); 
}

.block-pic {
    width: 100vw;
    height: 100vh;
    background-image: url('./img/sl-9.JPG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: var(--main-blue-color);
    padding-top: 2vw;
}

.block-pic .text-center {
    font-size: 8vh;
    width: 48vw;
    text-align: center;
    padding: 1.5vh 5vh;
    background-color: rgba(255, 255, 255, .7); 
    color: #013ba7;
    border-radius: 3vh;
    margin-bottom: 5vh;
}

/* Popular card prod*/

.con-pop-cards {
    width: 80vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 2vw;
}

.pop-card {
    width: 22vw;
    height: 18vh;
    background-color: var(--main-blue-color);
    border-radius: 2vw;
}

.pop-card.left {
    -webkit-transform: skewX(15deg); 
	-moz-transform: skewX(15deg); 
	-ms-transform: skewX(15deg); 
	-o-transform: skewX(15deg); 
	transform: skewX(15deg);
}

.pop-card.right {
    -webkit-transform: skewX(-15deg); 
	-moz-transform: skewX(-15deg); 
	-ms-transform: skewX(-15deg); 
	-o-transform: skewX(-15deg); 
	transform: skewX(-15deg);
}

.container-prod {
    width: 77vw;
    height: 60vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: rgba(1, 59, 167, .7);
    border-radius: 2vw;
    /* padding-left: 10vw; */
}

.container-prod .card-hover {
    margin: 1vw;
    width: 20vw;
    height: 50vh;
    cursor: pointer;
    flex-direction: column;
    overflow: hidden;
    /* -webkit-transform: skewX(-15deg); 
	-moz-transform: skewX(-15deg); 
	-ms-transform: skewX(-15deg); 
	-o-transform: skewX(-15deg); 
	transform: skewX(-15deg); */
    background-color: red;
    border-radius: 2vw;
    transition: all .75s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-prod .card-hover p {
    opacity: .7;
    background-color: #fff;
    padding: 2vw;
    font-size: 3vh;
    border-radius: 2vw;
    transition: all .5s ease-in-out;
}

.container-prod .card-hover .des-hide {
    transform: translateY(25vw);
    border-radius: 1vw;
    width: 20vw;
    background-color: #fff;
    padding: .5vw;
    transition: all .75s ease-in-out;
}

.container-prod .card-hover:hover .des-hide {
    transform: translateY(0%);
}

.container-prod .card-hover:hover p {
    opacity: 1;
}

.container-prod .card-hover:hover {
    width: 30vw;
}

.img-maslo {
    background: url("./img/maslo.JPG");
    background-size:  auto 30vw ;
    background-position: -10vw;
}
.img-maslo:hover {
    background-position: -3vw;
}

.img-mol {
    background-image: url();
    background: url("./img/mol.JPG");
    background-size: auto 30vw;
    background-position-x: -3vw;
}

.img-sm {
    background: url("./img/smetana.JPG");
    background-size: auto 30vw;
    background-position-x: -10vw;
}

.img-sm:hover {
    background-position-x: 0vw;
}