body
{
    background: url(../img/bg2.jpg) no-repeat fixed center 0 #e8dabb;
 
    overflow-x:hidden;
    background-size: cover;
}

@font-face 
{
    font-family: Lili Marlen;
    src: url(../fonts/LiliMarlen.ttf);
}


.navbar
{
    display: none;
}

.nbar
{
    background: url(../img/hd11.png) no-repeat 0 0;
    height: 515px;
  
}

.menu
{
    display: flex;
    transform: translateY(100px);
    list-style: none;
    
}

.menu > li
{
    margin-right: 30px;
    color: #e7d9ba;
    font-size: 19px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding-top: 1px;
    
}   

.menu li > a
{
    text-decoration: none;
    color: #e7d9ba;
    font-family: Lili Marlen;
    text-shadow: black 0 0 1px;
 
}




.menu li > a:hover
{
    color: #cec2a8;
    transition: 0.2s;
    text-shadow: black -1px -1px 0, 
    #e7d9ba 1px 1px 0;
}


.mm
{
    transform: translateY(-28px);
    background: #e8dabb;
    padding: 15px;
    border-radius: 0 0 10px 10px;
}

.box
{
    background: white;
    border-radius: 10px;
    padding: 13px;

}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 33%;
    max-width: 33%;
   
    padding: 0 9px;
  }
  
  .column img {
    margin-top: 10px;
    vertical-align: middle;
    
    width: 340px;
    margin-left: 5px;
    -webkit-filter: grayscale(0);
    filter: none;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px;
  }

  .column img:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

  @media screen and (max-width: 1200px) {
    .column {
        padding: 0 7px;
    }
    .column img {
        width:280px;
    }
  }
  @media screen and (max-width: 992px) {
    .column {
        padding: 0 6px;
    }
    .column img {
        width: 200px;
        
    }
  }
  @media screen and (max-width: 768px) {
    .column {
        padding: 0 1px;
    }
    .column img {
        width: 150px;
        
    }
  }
  @media screen and (max-width: 576px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
    .column img {
        width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto
        
    }
  }

  @media screen and (max-width: 476px) {
   
    .column img {
        width: 200px;
       
        
    }
  }
  





  
 

.footer
{
    background: #e8dabb;
    padding: 15px;
    border-radius: 10px;
    transform: translateY(-15px);
 
}


.rog
{
    position: absolute;
    float:right;
    transform: translate(1110px,-29px);
    z-index: 9999;
    display: block;
    overflow-x:hidden;
}




.artic
{
    border-bottom: 1px solid #eee;
    padding: 0 0 3px 5px;
    margin-bottom: 15px;
    
  
}


.spliters
{
    border-bottom: 1px solid #eee;
  

    margin-top: 25px;
    
  
}

.ph1
{
    width: 35%;
    float: left;

    margin-right: 15px;

}

.ph2
{
    width: 35%;
    float: right;
   
    margin-left: 15px;

}

.ph3
{
    width: 50%;
  

}




.thumb img:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.thumb {
    padding: 5px;
    max-height: 360px;
}



h3
{
    font-family: Lili Marlen;
    font-size: 35px;
}

h5
{
    font-family: Lili Marlen;
    font-size: 25px;
}

h2
{
    font-family: Lili Marlen;
  
}

.nav li > a
{
    font-family: Lili Marlen;
    color: black;
    font-size: 17px;
}



.nav-pills .nav-link.active, .nav-pills .show > .nav-link
{
    background: #7cc7f5;
}

.fixbtn
{
    margin-right: 5px;
}


@media (max-width: 992px)
{
    .fixbtn
    {
        margin-top: 5px;

    }
}

@media (max-width: 576px)
{
    .nbar
    {
        display: none;
    }
    .mm
    {
        transform: translateY(0px);
        border-radius: 10px;
    }
    .rog
    {
        display: none;
    }

    .navbar
    {
        display: block;
        background: white;
        border-radius: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .navbar-brand
    {
        font-family: Lili Marlen;
    }
}