/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
    margin: 0;
}

.main-logo{
position:relative; 
width:500px; 
height:190px;
display: block;
text-align: center;
margin:0 auto;
}

.land-button{
width:250px; 
margin:0 auto; 
background-color:#FECA27;
border-radius:4px;
text-align:center;
padding:5px;
margin-bottom:50px;
}
.logos {
  width:1170px;
  height: 175px;
  margin:0 auto;

}
.logos li 
{ 
float: left;
list-style-type: none;
display: block;
position: relative;
margin-right: 141px;
height:100px
} 
img{
   width:100%;
   height:auto;
   vertical-align: middle;
}
canvas {
	background-image: radial-gradient(#666, #333);
}
{
	position: absolute;
	color: #fff;
	bottom: 0;
	padding-bottom: 6px;
	font-family: sans-serif;
	width: 100%;
	text-align: center;
	pointer-events: none;
}
 img.white { position: absolute; left: 0; top: 0; z-index: 10; } img.color { position: absolute; left: 0; top: 0; opacity: 0;}
background setup 
/*.background {
    background-repeat:no-repeat;
    custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50% !important;
background-image:url('./images/logos/skillsbg.png');
}

.fullscreen{
    width:100%;
    min-height:100%;
}
.logo-1 {
width: 100px;
}
.logo-2 {
width: 175px;
}
.logo-3 {
width: 125px;
}

 
 
	/*==========  Non-Mobile First Method  ==========*/
 
	/* Large Devices, Wide Screens */
	@media only screen and (max-width : 1200px){
 .main-logo{
width:500px; 
height:190px;

}
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (max-width : 992px){
  .main-logo{
width:500px; 
height:190px;

}
	}
 
	/* Small Devices, Tablets */
	@media only screen and (max-width : 768px){
		 .main-logo{
width:300px; 
height:90px;

}
.logos {
  width:600px;
  height: 100px;
  margin:0 auto;

}
.logos li{
	margin-right: 40px;

}
.logo-1 {
width: 70px;
}
.logo-2 {
width: 120px;
}
.logo-3 {
width: 90px;
}
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (max-width : 480px){
 		 .main-logo{
width:300px; 
height:90px;

}
.logos {
  width:380px;
  height: 100px;
  margin:0 auto;

}
.logos li{
	margin-right: 80px;
  margin-top: 20px;
}
.logo-1 {
width: 70px;
margin-left: 30px;
}
.logo-2 {
width: 120px;
}
.logo-3 {
width: 100px;
}
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 .logos {
  width:300px;
  height: 100px;
  margin:0 auto;

}
.logos li{
	margin-right: 30px;
}
.logo-1 {
width: 60px;
	margin-left: 20px;

}
.logo-2 {
width: 110px;
}
.logo-3 {
width: 100px;
}
	}