@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body 
{
margin: 0;
padding: 0;
font-family: Sans-serif;
}





nav
{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100px;
padding: 10px 200px;
box-sizing: border-box;
transition: .5s;
}



nav.black
{
background: rgba(0,0,0,.8);
height: 80px;
padding: 10px 150px;
}



nav .logo
{
float: left;
}




nav .logo img
{
height: 80px;
transition: .5s;
}



nav.black .logo img
{
height: 60px;
}





nav ul
{
float: right;
margin: 0;
padding: 0;
display: flex;
}



nav ul li
{
list-style: none;
}


nav ul li a
{
line-height: 80px;
color: #262626;
padding: 5px 20px;
font-family: 'Roboto', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}



nav.black ul li a
{
color:#fff;
line-height:60px;
}



nav ul li a.active,
nav ul li a:hover
{
color: #fff;
background: #f00;
}



section.sec1
{
width: 100%;
height: 90vh;
background: url(fotograflublin.jpg);
background-position: center; 
background-size: cover;

}

section.sec2
{
width: 100%;
height: 100vh;
background: url(fotograflublin2.jpg);
background-size: cover;
}



section.sec3
{
width: 100%;
height: 100vh;
background: url(fotograflublin3.jpg);
background-size: cover;
}


section.content
{
padding: 20px 250px 20px 250px;
}


section.content h1
{
margin: 0;
padding: 0px;
font-size: 20px;
}



section.content p
{
margin: 20px 0 0;
padding: 0px;
font-size: 15px;
}



.responsive-bar
{
display: none;
}



@media (max-width: 768px)
{
    .responsive-bar
    {
        display: block;
        width: 100%;
        height: 60px;
        background: #262626;
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px 20px;
        box-sizing: border-box;
        z-index: 1;
    }


 .responsive-bar .logo img
    {
        float: left;     
        height: 50px;
       
    }


.responsive-bar .menu h4
    {
        float: right;     
        color: #fff;
        margin: 0;
        padding: 0;
        line-height:50px;
        cursor:pointer;
        text-transform: uppercase;
    }



nav.black
    {
background: #262626;
height: 60px;
padding: 0;          
    }


nav .logo
    {
display: none;          
    }


nav ul
    {
   position: absolute;          
   width: 100%;
   top: 60px;
   left: 0;
   background: #262626;
   float: none;
   display: none;
    }


nav ul.active
    {
    display: block;
    }


nav ul li
    {
   width: 100%;
    }


nav ul li a
    {
   display: block;
   padding: 0;
   width: 100%;
   text-align:center;
   line-height: 30px !important;
   color: #fff;
    }


section.content
{
padding: 10px;
text-align:center;
}




}