@font-face {
    font-family: myFirstFont;
    src: url('../fonts/megrim2.ttf')  format('truetype');
    
}

body {
    font-family: 'Titillium Web', sans-serif;
}




.menu{

    text-align: center;
    font-family: myFirstFont;
    font-size: 50px;
    
   
}

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


.logo {display: none;
       }


.menu-1, .logo, .logo-mob, .menu-2 {
    margin: 1em auto;
    width: 90%
}
 .logo-mob img{

  width: 90%;

 }
#header {
    text-align: center;
    margin: 10 0 10 0 ;
 /*   border-bottom: 6px solid grey;
     border-bottom-style:inset;*/
    }

 hr.header{ height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);  width: 100%;
  margin-left: -0%; }

 hr.footer{ 
  border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black;
  
  }
  hr.footer:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ }
  
footer {
    text-align: center;
    font-size: 13px;
     line-height: 1;

}

* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;

}




.column {
    width: 100%;
    /*height: 300px;  Should be removed. Only for demonstration */
    padding: 1%;
    text-align: justify;
    
     /*
  top: 50%;
  transform: translateY(-50%);*/
     
}
  /*.column p {
  padding-left: 10px;
  padding-right: 10px;
}*/

.carusell {
  /*  background: LightGreen;*/
    margin-top: 5px;

}


.title {
display: block;
    font-size: 30px;
    text-align: left;
    font-weight: 700;
}

.column-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    text-align: center;
     display: block;
    margin-left: auto;
    margin-right: auto;
    
}

p {
text-align: justify;

}

.troj {
width:25px;
}

h3 {
margin-bottom: 0px;
}

@media screen and (min-width: 800px) {
.container{
   margin: 0 auto; 
   width: 80%;
   max-width: 1000px;
   
}
    .menu-1, .menu-2 {
        border-width: 0px;
        width: 15%;
        display: inline-block;
    }
    .logo {
    /* min-width: 200px;*/
       border-width: 0px;
        width: 30%;
        display: inline-block;
    }
    
    
    .menu{

    text-align: center;
    font-family: myFirstFont;
    font-size: 25px;
   
        
}
.menu-container{
 text-align: center;
 /*position: fixed;*/

}
    
     .logo img{
    
      width: 200px;
      margin-bottom: -15px;
     }
    
    
    
    .logo-mob {display: none;}
    
    .menu-1 {border-color: red}
    .logo {border-color: green}
    .menu-2 {border-color: blue}
    
    
    .column {
    float: left;
    width: 50%;

    

    /*height: 300px;  Should be removed. Only for demonstration */
    
}


.normal-column {
    width: 46%;
    margin: 2%;
}

.column-big {
    float: left;
    width: 100%;
}


.title {
display: block;
    
    text-align: right;
    font-weight: 700;
}
.profil-left {
  clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}

.profil-right {
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.row {
  display: flex;
    /* flex-direction: column;*/
    align-items: center;
    /* justify-content: center;*/
    margin-bottom: 20px;
}


}