html {
background: #00d2ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #3a7bd5, #00d2ff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #3a7bd5, #00d2ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



	background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
    
h1, h2 {margin: 0; font-family: 'Roboto', sans-serif; text-align: center}    

body{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 28px;
}
a {
	color: #fff;
	text-decoration: none
}    
p {

color: #FFFFFF;
letter-spacing: -0.05px;
text-align: center;}

.light-text{font-weight: 200}

p.intro {
	font-size: 45px;
color: #FFFFFF;
letter-spacing: -0.05px;
text-align: center;
margin: auto 1.8em;
}
#logo a {
display:block;
   width: 200px;
   height: 200px;
   margin: 1em auto;
   background: url(../images/altlogo.png) no-repeat left top;
   background-size: 200px 200px;
}

#logo span {display: none}

ul.brands {text-decoration: none;
	list-style-type: none;
	margin: 3em 0.5em;
	padding-inline-start:0;
	
	}    

li {display: block;
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
background: rgba(48, 46, 40, 0.41);
border-radius: 33px;
width: 80%;
margin: 0 auto 2em;
padding: 10px 30px;
  -webkit-transition: background .5s ease-out;
  -moz-transition: background .5s ease-out;
  -o-transition: background .5s ease-out;
  transition: background .5s ease-out;
}

h2 {color: white;
	font-size: 50px; 
	margin: 20px auto 5px;
	padding-top: 10px; 
}

h2:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid white; /* This creates the border. Replace black with whatever color you want. */
}
	
li p {font-size: 45px}

li:hover {
	background: rgba(0, 0, 0, 0.5);
}

p.copyright {
font-size: 22px;
position: relative;
margin: 0 auto;
color: #FFFFFF;
letter-spacing: -0.02px;
text-align: center;
}

.footer{
position: relative;
margin-bottom: 1em;
width: 100%;
}    


@media only screen and (min-width: 768px) {
  /* For tablet: */
p.intro {
width: 80%;
font-size: 48px;
margin: 0 auto;
}  
  
ul.brands {
	width: 70%;
	margin: 3em auto;
}

li {display: block;
	width: 100%;
}

h2 {
	font-size: 45px;
}
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
	p.intro {
font-size: 30px;
} 

h2 {
	padding-top: 0;
	font-size: 26px;
}

li p {
	font-size: 28px
}

p.copyright {
font-size: 16px;
}
}
    
@media only screen and (min-width: 1240px) {
  /* For desktop: */
    
.wrapper {
	width: 980px;
	margin: 0 auto;
	padding-top: 3em;
}    

#logo a {
   margin: 0 auto 1em;
   width: 150px;
   height: 150px;
   background-size: 150px 150px;
}
	
p.intro {
width: 70%;
font-size: 24px
}

ul.brands {
	width: 100%;
}
	
li {
width: 31%;
margin-right: 2.5%;
padding: 5px 15px;
display: inline-block;
}

h2 {
	padding-top: 0;
	font-size: 26px;
}

li p {font-size: 22px}

li.last {margin-right: 0}

.footer{

left: 0;
bottom: 0;
margin-top: 2em;
margin-bottom: 1em;
width: 100%;
}
p.copyright {
font-size: 16px;
}

}