@media (max-width: 768px) {
    body {
        width: 100%;
        height: 100%;
    }

    h1, h2, h3, h4, h5, h6, p {
        text-align: center;
    }

  	#site-header .navbar-brand img {
    	width: 100%;
  	}
  
    #site-header .navbar-brand {
        padding-bottom: 15px;
        padding-right: 70px;
        padding-left: 70px;
        padding-top: 15px;
    }

  	#main {
        height: calc(100vh - 126px);
    }
  
    .grid img {
        width: 100%;
    }
  
  	#content-header {
    	padding: 20px;  
  	}
  
  	#content-header > h1 {
      	font-size: 38px;
  	}
  
  	#brand-showcase .grid {
        padding: 15px;
    }
  	
  	#brand-showcase > div > div > div > div.col {
		padding: 15px;      
  	}
}

@media (min-width: 768px) {
    #site-header {
        padding: 16px;
    }
    
    #site-header .navbar-brand {
        font-size: 32px;
    }
    
    #site-header .navbar-brand img {
        width: 360px;
    }
    
    #content-header {
        padding-bottom: 3vh;
    }
    
    #content-header h1 {
        font-size: 60px;
    }
    
    #main {
        min-height: calc(100vh - 79px + 56px);
    }
    
    #main .row {
        margin: auto;
    }
    
    .grid {
        width: 100%;
        display: inline-flex;
    }
    
    .col {
        margin-bottom: 4vh;
    }
    
    .col h3 {
        margin-top: 3vh;
        font-weight: 100;
    }
    
    .brand-image {
      width: 80%;  
    }
  
  	#brand-showcase > div > div > div > div.col {
		padding: 15px;      
  	}
  
    .page-footer .footer-copyright {
        position: absolute;
        width: 100%;
    }
}