html { 
}

body {
	height: 100%;

	background: #000; /* url(bgimage.jpg) no-repeat fixed; */
	background-size: cover;
/*	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
*/
	font-family: sans-serif;
	font-size: 100%;
	margin: 10px;
	color: #ddd;
	background-color: #000;
}

a { color: #fff; }

img.ri {
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
}

img.ri:empty {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.instagram {
    display: inline-block;
    position: absolute;
    top:80%;
    left:43%;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url("images/insta.svg") 0 0 no-repeat;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease ;
    -ms-transition: background .2s ease ;
    -o-transition: background .2s ease ;
    transition: background .2s ease ;
}

.instagram:hover {
    background: url("images/insta-hover.svg") 0 0 no-repeat;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease ;
    -ms-transition: background .2s ease ;
    -o-transition: background .2s ease ;
    transition: background .2s ease ;
}

.facebook {
    display: inline-block;
    position: absolute;
    top:80%;
    left:52%;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url("images/facebook.svg") 0 0 no-repeat;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease ;
    -ms-transition: background .2s ease ;
    -o-transition: background .2s ease ;
    transition: background .2s ease ;
}

.facebook:hover {
    background: url("images/facebook-hover.svg") 0 0 no-repeat;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease ;
    -ms-transition: background .2s ease ;
    -o-transition: background .2s ease ;
    transition: background .2s ease ;
}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}

@media only screen and (max-height: 1050px) {
  body {
    /*background-image: url(images/devices.jpg); */
  }

  .instagram {
    top:80%;
    left:46%;
  }

  .facebook {
    top:80%;
    left:52%;
  }
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /*background-image: url(images/devices.jpg); */
  }

  .social-icon {
    width: 25px;
    height: 25px;
  }

  .instagram {
    top:70%;
    left:43%;
  }

  .facebook {
    top:70%;
    left:52%;
  }
}

@media only screen and (orientation: portrait) {
  body {
    /*background-image: url(bgimagep.jpg); */
  }
}

/* for the desktop */
@media only screen and (orientation: landscape) and (max-width: 767px) {
  body {
    /*background-image: url(images/devices.jpg); */
  }

  .social-icon {
    width: 25px;
    height: 25px;
  }

  .instagram {
    top:80%;
    left:45%;
  }

  .facebook {
    top:80%;
    left:52%;
  }
}