/* wczytanie lokalnej czcionki*/
@font-face {
  font-family: "MyFont";
  src: url("Files/Fonts/Roboto-Regular.ttf") format("truetype");
}
/* resetowanie ustawień, przywołanie czcionki*/
*{   
    margin: 0 0 0 0; 
    padding: 0;
    font-family: "MyFont", sans-serif;
    box-sizing: border-box; /*to jest ustawienie stałej szerkości content, padding i borders*/
}

/*Header*/
.hed {
    text-align: center;
    background: #88afe2;
    padding: 20px;
    position: relative;
}

.nav{   
/*W poziomie*/
    display: flex;
/*    padding: 2% 6%;*/
/*to rozrzuca odległość między zachowana odległość pomiędzy*/
    justify-content: space-between;
    align-items: center;   
} 

.nav-links {
    position: absolute;
    background: #fbf64c;
    height: 100vh;
    width: 200px;
    top: 0px;
    right: -200px;
    text-align: left;
    z-index: 2; 
    transition: 1s;
}

.nav-links ul li{
    display: block;
/*    ustawiona odległość między wierszami*/
    padding: 16px 12px;;
    }  

.nav-links ul li a{
    color: black;
/*tym usuwamy podkreślenia*/
    text-decoration: none;
    font-size: 18px;
    cursor: pointer; 
    padding: 20px;
}

.nav-links ul{
    padding: 10px;    
}

nav .fa{
    display: block;
    color: black;
    margin: 10px;
/*    tu ustawiamy rozmiar ikonki */
    font-size: 28px;
    cursor: pointer;    
}

nav .fa-bars{
    position: absolute;
    top:15px;
    right: 10px
}

/* body */
.lay-row {
    margin: 5%;
    display: flex;
    justify-content: space-between; 
}

.lay-col {
    text-align: center;
    position: relative;
    flex-basis: 31%;
    background: #88afe2;
    border-radius: 10px;
    margin-bottom: 4%;
    padding: 20px 14px 30px 14px;
    box-sizing: border-box;     
    box-shadow: 0 0 6px 6px rgb(185,190,191);    
}

.lay-row1 {
    margin: 2% 5% 1% 5%;
    display: flex;
    justify-content: space-between; 
}

.lay-col1 {
    text-align: left;
    position: relative;    
    flex-basis: 100%;
    background: #88afe2;
    border-radius: 5px;
/*    margin-bottom: 5%;*/
    padding: 15px 15px 10px 15px; /*Note: Padding creates extra space within an element, while margin creates extra space around an element!*/
    box-sizing: border-box;     
    box-shadow: 0 0 6px 6px rgb(185,190,191);    
}

.Ent-btn-loc-right {
    position:absolute;
    bottom: 5px;     
    right: 5px;
}

.Ent-btn{
    display: inline-block;
    text-decoration: none;
    border: 3px solid white;
    border-radius:10px;
    padding: 5px 34px;
    background: transparent;
    position: relative;
    cursor: pointer;          
}
    
.Ent-btn:hover{
    border: 1px solid #fbf64c;
    background: #fbf64c;
    transition: 1s;   
}

.Highlight:hover{
/*    border: 1px solid #fbf64c;*/
    background: #fbf64c;
    transition: 1s;   
}

/* to jest dodane na małe urządzenia przy tej szerokości zmiania na pionowy układ*/
@media(max-width: 700px){
    .lay-row{
        flex-direction: column;
    }
    .ul-row{
        flex-direction: column;
    }
}
 
/* footer */
.footer {
    width: 100%;
    text-align: center; 
}

/*Informacje*/

/*style wypunktowania http://www.html-5.com/tags/ul-tag/index.html*/
ul.para-ul-style { 
    list-style-type: "\27a4";
    margin-left: 50px;
}

.ul-row{
    margin: 5%;
    display: flex;
/*    tu było center*/
    justify-content: center;
    background: #88afe2;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 30px 14px 40px 14px;
/*  box-sizing: border-box;     */
    box-shadow: 0 0 6px 6px rgb(185,190,191); 
    position: relative;
}

.para-ul{
    margin-top: 10px;
    margin-left: 50px;
}
.ul-column {
    flex-basis: 48%; 
/*    background: red; i dodałem to co poniżej box-sizing i padding*/
    box-sizing: border-box;
    padding: 5px;    
}

.Ent-btn-loc-left {
    position:absolute;
    bottom: 5px;     
    left: 10px;
}

.Ent-btn1{
    display: inline-block;
    text-decoration: none;
    border: 3px solid white;
    border-radius:10px;
    padding: 5px 34px;
    background: transparent;
    position: relative;
    cursor: pointer;     
}

.Ent-btn1:hover{
    border: 1px solid #fbf64c;
    background: #fbf64c;
    transition: 1s;
}

/*ustawienia skalowania kolumnie dla iframe*/
.ul-column iframe{
    width: 100%;
}

/*ustawienia skalowania kolumnie dla img*/
ul-column img{
    width: 100%;
}