@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
	
	  html{
	    height:100%;
	  }
	
	  body {
	    font-family: 'Open Sans', sans-serif;
	    height:100%;
	    color:#fff;
		 background: transparent;
		 
		 overflow:hidden;
/*background-image: url('wp2533041.jpg');rgba(255, 255, 255, 0.3) */

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Ensure the image covers the entire background */
  height: 100%; /* Cover the full height of the body */
  margin: 0; /* Remove default margins */
	  }
	  
	  #container{
		background: transparent!important;	  
	  }
	  
	  /*Basic Phone styling*/
	  
	  .phone {
	    border: 40px solid #121212;
	    border-width: 55px 7px;
	    border-radius: 40px;
	    margin: 50px auto;
	    overflow: hidden;
	    -webkit-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	   -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	       -moz-animation: fadein 2s; /* Firefox < 16 */
	        -ms-animation: fadein 2s; /* Internet Explorer */
	         -o-animation: fadein 2s; /* Opera < 12.1 */
	            animation: fadein 2s;
	}
	  
	  .phone iframe {
	    border: 0;
	    width: 100%;
	    height: 100%;
	    background-color:#000;
	  }
	  
	  /*Different Perspectives*/
	  
	  /* Table View */
	  .phone.view_1 {
	    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	            transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	    box-shadow: -3px 3px 0 #000, -6px 6px 0 #000, -9px 9px 0 #000, -12px 12px 0 #000, -14px 10px 20px #000;
	  }
	 /*  Front View */
	  .phone.view_2 {
	    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	    box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
	  }


	@-webkit-keyframes rotate {
	
	    0%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	    50%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-40deg);}
	    100%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	}

	/* Rotate Animation */
	
	.view_1.rotate
	{
	    -webkit-animation-name:            rotate; 
	    -webkit-animation-duration:        15s; 
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}


  /*Controls*/
  
  #controls {
    position: absolute;
    top: 80px;
    left: 20px;
    font-size: 0.9em;
    color: #333;
    width:17px;
  }
  
  #controls div {
    margin: 10px;
  }
  
  #controls div label {
    width: 150px;
    display: block;
    float: left;
    color: #fff;
  }

  #phone-controls{
    position: absolute;
    top: 80px;
    right: 20px;
    width: 200px;
    font-size:14px;
  }

  #phones {
    border-top:1px solid #fff;
    margin-top:20px;
    padding-top:20px;
  }

  #phones button {
    outline: none;
    width: 198px;
    border: 1px solid #222;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #111;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #phones button:hover {
    color: #444;
    background-color: #eee;
  }
  
  #views button {
    outline: none;
    width: 198px;
    border: 1px solid #222;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #111;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #views button:hover {
    color: #444;
    background-color: #eee;
  }
  
  @media (max-width:900px) {
    #wrapper {
      -webkit-transform: scale(0.8, 0.8);
              transform: scale(0.8, 0.8);
    }
  }
  
  @media (max-width:700px) {
    #wrapper {
      -webkit-transform: scale(0.6, 0.6);
              transform: scale(0.6, 0.6);
    }
    .phone { margin: 0 0 0 -70px; }
  }
  
  @media (max-width:500px) {
    #wrapper {
      -webkit-transform: scale(0.4, 0.4);
              transform: scale(0.4, 0.4);
    }
  }

/* Fade In Animation */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}