/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12 Sep, 2019, 2:00:10 AM
    Author     : w3webworldsolutions.com
*/

/*********Final*************/
.static-img {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 625px;
    margin: 0 auto;
}
.static-img .videoHolder {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
.videoHolder iframe {
    box-sizing: border-box;
    background: url('../img/tv-new.png') center center no-repeat;/*http://i.stack.imgur.com/zZNgk.png*/
    background-size: contain;
    /*padding: 11.9% 15.5% 14.8%;*/
    padding: 12.2% 15.5% 19.5%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*z-index: -100;*/
}
/*********Final end*************/


/*--------Responsive video------*/
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  
  //CSS
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .videoHolder iframe {
  padding: 12.6% 15.5% 19.5%;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .videoHolder iframe {
    padding: 12.4% 15.65% 19.5%;
}
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
  //CSS
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
.videoHolder iframe {
  /*padding: 14.2% 15.4% 19.6%;*/
  /*padding: 15.2% 15.4% 19.6%;*/
  padding: 14.4% 15.4% 21.6%;
  }
}

/*---------------style per veiw-port --------------*/
.main-holder{
    position: relative;
    top:0;
    left:0;
    width: 100%;
}
.video-holder{
    position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-holder iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hero #cafe {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.hero #cafe .inner {
    padding-top: 63.35%; /* height/width of image */
    display: block;
    height: 0;
}
/* default screen, non-retina */
.hero #cafe { background-image: url("../img/sony-tv.png"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero #cafe { background-image: url("../img/sony-tv-290.png"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero #cafe { background-image: url("../img/sony-tv-580.png"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero #cafe { background-image: url("../img/sony-tv-538.png"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, retina */
    .hero #cafe { background-image: url("../img/sony-tv-1076.png"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* Large screen, retina */
    .hero #cafe { background-image: url("../img/sony-tv-1940.png"); }
}