@media screen and (max-width: 500px) {
    
    html{
        height:100%;
    margin:0;
    }
    
    
body{
    height:100%;
    margin:0;
width:100%;
      background:url("bgsmall.jpg");
      background-repeat: no-repeat;
  background-size: cover; /* stretches to size of viewport */
}
    
    .navmenu{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin-left:30px;
        align-items:center;
    }
    
.navmenu a {
    font-family:'Roboto', sans-serif;
    text-decoration:none;
    color:red;
    padding:5px;
    font-size:12px;
    width:50%;
    
}

.contact a{
background-color:green;
color:white;
}
.contact a:hover{
background-color:green;
color:white;
}

.logo{width:100px;
height:100px;
    
}
.mainheadline{
    width:70%;
}
h1{
    font-size:40px;
    color:red;
        font-family: 'Josefin Sans', sans-serif;
    margin-right:auto;
    margin-left:auto;
    line-height:1.75;
    width:80%;
    padding-left:10px;
    margin-bottom:30px;

}
.morebutton p{
    font-family:'Josefin Sans', sans-serif;
    font-size:13px;
}
.brandcontainer{display:none; }.marketingcontainer {display:none;}.webcontainer{display:none;}

 .brandcontainer p{
        font-family:"Roboto";
    }
.maincontainer{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:85%;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
}
.section{
    width:100%;
       margin-left:auto;
    margin-right:auto;
    
}

.header{
    text-align:center;
    padding-left:20px;
    display:flex;
    align-content:center;
    margin-right:auto;
    margin-left:auto
}
.brandbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:0.5px;
text-align:center;
margin-bottom:3px;
}
.marketingbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:0.5px;
text-align:center;
margin-bottom:3px;
}
.webbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:0.5px;
text-align:center;
margin-bottom:3px;
}

.brandcontainer, .webcontainer, .marketingcontainer{
    width:70%;
    margin:auto;
}


        .footer{
        font-family:'Roboto';
height:15px;
color:red;
    text-align:center; 
    width:100%; 
        bottom:0px;
font-size:5px;
position:fixed;
}   
.footcopy{
    padding:0;
margin:0;
}
}
     
@media screen and (min-width:501px) and (max-width: 700px) {

body{
    height:100%;
    margin:0;
      background:url("bgsmall.jpg");
      background-repeat: no-repeat;
  background-size: cover; /* stretches to size of viewport */
}
  
    .navmenu{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin-left:30px;
        align-items:center;
        width:100%;
    }
    
.navmenu a {
    font-family:'Roboto', sans-serif;
    text-decoration:none;
    color:red;
    padding:5px;
    font-size:15px;
    
}
.contact a{
background-color:green;
color:white;
}
.contact a:hover{
background-color:green;
color:white;
}
h1{
    font-size:70px;
    color:red;
        font-family: 'Josefin Sans', sans-serif;
        max-width:70%;
        margin-right:auto;
        margin-left:auto;
        line-height:1.5;
        margin-top:45px;
}


.morebutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:10px;
text-align:center;
}

.header{
    text-align:center;
    display:flex;
    margin-right:auto;
    margin-left:auto;
    width:90%;
}
.logo{
    width:150px;
    height:150px;
    margin-left:20px;
}
.mainheadline{
    width:75%;
}
.maincontainer{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    width:85%;
    margin-left:auto;
    margin-right:auto;
}
.section{
    width:30%;
}
.marketingbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:10px;
text-align:center;
}
.webbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:10px;
text-align:center;
}
.brandbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
padding:10px;
text-align:center;
}
.brandcontainer{display:none; }.marketingcontainer {display:none;}.webcontainer{display:none;}
.footer{
font-family:'Roboto';
height:32px;
color:red;
    text-align:center; 
    width:100%; 
        bottom:0px;
position:fixed;
font-size:8px;
}   
}      
html{
    height:100%;
}
@media screen and (min-width: 701px) {

body {
    margin:0;
    
        background:url("cristina-gottardi-564469-unsplash.jpg");
  background-repeat: no-repeat;
  background-size: cover;
    height: 100%; 

    overflow:hidden;


    }
        
        
.header{
    text-align:center;
    padding-bottom:0px;
    display:flex;
    width:75%;
    align-content:center;
    margin-right:auto;
    margin-left:auto
}

  
.logo{
    width:150px;
    height:150px;
}

.navmenu{
    display:flex;
        text-align:center;
         justify-content:space-around;
     margin-left: auto;
    margin-right: auto;
       width:45%;
       align-items:center;
}

.navmenu a {
    padding:10px;
    font-family:'Roboto', sans-serif;
    text-decoration:none;
    color:red;
    
}

.navmenu a:hover {
    background-color:red;
    color:white;
}

.contact a{
background-color:green;
color:white;
}
.contact a:hover{
background-color:green;
color:white;
}


.mainheadline{
    width:75%;
    margin:auto;
}
p {
    font-family:'Roboto';
    font-size:18px;
}

.maincontainer{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    width:75%;
    margin-left:auto;
    margin-right:auto;
}
h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-size:75px;
    color:red;
    margin-right:auto;
    margin-left:auto;
    margin-top:50px;
    width:80%;
    line-height:1.25;

}
.morebutton p{
    font-family:'Josefin Sans', sans-serif;
    font-size:20px;
}

.morebutton:hover{
    background-color:green;
color:white;
    
}
.marketingbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
text-align:center;
padding:8px;
}



.webbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
text-align:center;
padding:8px;
}
.brandbutton {
    background-color:lightgrey; color:red;
    font-family:'Josefin Sans';
text-align:center;
padding:8px;
}

.section{
    width:20%;
}


.brandcontainer{display:none; }.marketingcontainer {display:none;}.webcontainer{display:none;}
.footer {
   color:red;
    text-align:center; 
    width:100%; 
        bottom:0px;
position:fixed;
height:20px;

   } 
.footcopy{
        font-family:'Roboto';
font-size:10px;
padding:0;
margin:0;
}

.brandcontainer {
    width:50%;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
}

.brandcontainer h1{
    font-size:40px;
    margin:0;
}
.webcontainer {
    width:50%;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
}

.webcontainer h1{
    font-size:40px;
    margin:0;
}
.marketingcontainer {
    width:50%;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
}

.marketingcontainer h1{
    font-size:40px;
    margin:0;
}
}