html, body{
  margin:0;
  padding:0;
}

img{
  border:0;
}

.cb{clear:both;}

#container{
  width: 966px;
  height: 246px;
  border: 2px solid #f86202;
  position:relative;
  top:0;
  left:0;
  overflow:hidden;
  background: transparent url(bg.jpg) no-repeat 0px 0px;
}

#bgExit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    border:0;
        background-color: transparent;
        opacity: 0;
}

#openingContainer {
  width:100%;
  height:100%;
  z-index: 9;
  opacity:1;
  position:absolute;
  top:0;
  left:0;
}

#openingContainer.collapse{
  -webkit-transition: opacity .5s linear 1s;
  transition: opacity .5s linear 1s;
  opacity:0;
  z-index: 7;
}

#productContainer{
  width: 100%;
  height: 100%;
  z-index: 8;
  position: absolute;
  top: 0;
  left: 0px;
  opacity: 0;
}

#productContainer.build{
  -webkit-transition: opacity .5s linear 1s;
  transition: opacity .5s linear 1s;
  opacity:1;
  z-index: 10;
}

#tog-logo{
  position:absolute;
  top:6px;
  left:6px;
  z-index:10;
  width: 65px;
  height: 65px;
  background: transparent url(tog-logo.png) no-repeat top left;
}

#logo{
  position:absolute;
  bottom:5px;
  right:8px;
  z-index:10;
  width: 240px;
  height: 54px;
  background: transparent url(logo.png) no-repeat top left;
}

/*---------------- OPENING SLIDES -----------------*/
#grillSlidesContainer{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: transparent url(opening-bg.png) no-repeat 0 -2px;
}

.bg-cover{
      width: 100%;
    height: 100%;
    position: absolute;
    top: -2px;
    left: 0;
    z-index: 2;
    opacity: 1;
}

.bg-cover.fade{
  opacity: 0;
  transition: opacity 0.5s linear 0.2ss;
}

.slide{
  position:absolute;
  top:0;
  z-index: 4;
  /*opacity: 0.5;*/
  cursor: pointer;
}

.slide:hover, .slide.active{
  opacity: 1;
}

.slide.active, .brand.active{
  opacity: 0;
  /*transition: opacity 0.5s linear 0.3s;*/
  transition: opacity 0s linear 0s;
}

#grill-1-slide{
  width: 403px;
  height: 250px;
  background: transparent url(grill-1-b.png) no-repeat 0 0;
  left: 0px;
}

#grill-1-slide.active{
  background: transparent url(grill-1-a.png) no-repeat 0 0;
}

#grill-2-slide{
  width: 427px;
  height: 250px;
  left: 276px;
  z-index: 3;
  background: transparent url(grill-2.png) no-repeat 0 0;
}

#grill-2-slide.active{
  background: transparent url(grill-2-a.png) no-repeat 0 0;
}

#grill-3-slide{
  width: 393px;
  height: 250px;
  right: -5px;
  background: transparent url(grill-3-b.png) no-repeat top right;
}

#grill-3-slide.active{
  background: transparent url(grill-3-a.png) no-repeat 0 0;
}

.brand{
  position:absolute;
  top: 110px;
  z-index: 4;
  cursor :pointer;
}

#grill-1-brand{
  left: 122px;
  background: transparent url(grill-1-brand.png) no-repeat 0px center;
  width: 187px;
  height: 37px;
}

#grill-2-brand{
  left: 438px;
  width: 139px;
  background: transparent url(grill-2-brand.png) no-repeat 0px center;
  height: 35px;
}

#grill-3-brand{
  right: 47px;
  background: transparent url(grill-3-brand.png) no-repeat 0px center;
  width: 234px;
  height: 36px;
}


/*-------- COLLAPSE SLASHES & GRILLS RIGHT ----------*/

#grill-2-slide.collapseRight{
  background: transparent url(grill-2.png) no-repeat 661px 0px;
  opacity: 0;
  transition: background 0.55s linear 0s, opacity 0.5s linear 0.5s;
}

#grill-3-slide.collapseRight{
  background: transparent url(grill-3-b.png) no-repeat 1250px 0;
  transition: background 1.25s linear 0.25s;
}

#grill-2-brand.collapseRight{
background: transparent url(grill-2-brand.png) no-repeat 200px center;
transition: background 0.2s linear 0s;
}

#grill-3-brand.collapseRight{
  background: transparent url(grill-3-brand.png) no-repeat 239px center;
  transition: background 0.2s linear 0.25s;
}

/*-------- COLLAPSE SLASHES & GRILLS OPPOSITE ----------*/

#grill-1-slide.collapseOpposite{
  background: transparent url(grill-1.png) no-repeat -406px 0px;
  opacity: 0;
  transition: background 0.4s linear 0s, opacity 0.5s linear 0.55s;
}

#grill-3-slide.collapseOpposite{
  background: transparent url(grill-3.png) no-repeat 1250px 0;
  transition: background 0.4s linear 0s;
}

#grill-1-brand.collapseOpposite{
background: transparent url(grill-2-brand.png) no-repeat -187px center;
transition: background 0.2s linear 0s;
}

#grill-3-brand.collapseOpposite{
  background: transparent url(grill-3-brand.png) no-repeat 239px center;
  transition: background 0.2s linear 0s;
}

/*-------- COLLAPSE SLASHES & GRILLS LEFT ----------*/

#grill-1-slide.collapseLeft{
  background: transparent url(grill-1.png) no-repeat -1250px 0px;
  transition: background 0.9s linear 0.2s;
}

#grill-2-slide.collapseLeft{
  background: transparent url(grill-2.png) no-repeat -485px 0px;
  opacity: 0;
  transition: background 0.4s linear 0s, opacity 0.5s linear 0.2s;
}

#grill-1-brand.collapseLeft{
background: transparent url(grill-2-brand.png) no-repeat -187px center;
transition: background 0.2s linear 0.2s;
}

#grill-2-brand.collapseLeft{
background: transparent url(grill-2-brand.png) no-repeat -145px center;
transition: background 0.2s linear 0s;
}

/*------------ ALL GRILL FRAME ----------------*/
.all-grills{
  opacity: 0;
  width: 970px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
}

#grill-1-all{
  background: transparent url(grills-1-all.png) no-repeat 0 0;
}

#grill-2-all{
  background: transparent url(grills-2-all.png) no-repeat 0 0;
}

#grill-3-all{
  background: transparent url(grills-3-all.png) no-repeat 0 0;
}

.all-grills.active{
  opacity: 1;
  /*transition: opacity 0.5s linear 0.3s;*/
  transition: opacity 0s linear 0s;
}


/*------------ PRODUCT CONTAINER ----------------*/
.content {
  margin: 0;
  padding: 0;
}
.content li {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
}

.slider-arrow {
  position: absolute;
  z-index:10;
  width: auto;
  height: auto;
  cursor: pointer;
}

.sa-left {
  left:17px;
  top:118px;
  width:36px;
  height:36px;
}
.sa-right {
  right:10px;
  top:108px;
  width:36px;
  height:36px;
}

.slide1, .slide2, .slide3, .slide4 {
  width:970px;
  height:250px;
  cursor:pointer;
  opacity:0;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  z-index:9;
}
.slide1 {
  background: transparent url(product-1.png) no-repeat 81px 11px;
  opacity:1;
}
.slide2 {
  background: transparent url(product-2.png) no-repeat 81px 11px;
}
.slide3 {
  background: transparent url(product-3.png) no-repeat 81px 11px;
}

.active li {
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  opacity:0;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

.active li.current {
  pointer-events:auto;
  opacity:1 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}


.link{
    width: 250px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0;
}

/*** VIDEO  ***/
#videoContainerSmall{
    position: absolute;
    bottom: -2px;
    left: 5px;
    z-index: 9;
    cursor: pointer;
}

#screenshotSmall{
    width: 101px;
    height: 54px;
    border: 2px solid #f26322;
}

#video-text{
    margin: 0 0 5px 6px;
}

#videoLayer.enlarge{
  opacity: 1;
  z-index: 10;
}

#videoLayer {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  opacity:0;
  z-index:9;
}
#videoplayer {
  position: absolute;
  width:300px;
  height:168px;
  top:111px;
  left:36px;
  overflow: hidden;
}
#videoContent {
  display: block;
  opacity:1;
  position: absolute;
  width: 416px;
  height:223px;
  top:10px;
  z-index:10;
  left: 275px;
}
#videoControls {
  z-index:9999;
  position:absolute;
  top:20px;
  left:300px;
  width: 360px;
    height: 45px;
}
#vplayer {
  display: block;
  position: absolute;   
}
#btnPlay, #btnPause, #btnMute, #btnUnmute {
  position: absolute;   
}
#btnPlay {
  background-image: url('play.png');
  top:0px;
  left:0px;
  display:none;
  cursor: pointer;
  width:16px;
  height:16px;
}
#btnPause {
  background-image: url('pause.png');
  top:0px;
  left:0px;
  display:none;
  cursor:pointer;
  width:16px;
  height:16px;
}
#btnMute {
  background-image: url('mute.png');
  top:-3px;
  right:0px;
  display: none;
  cursor: pointer;
  width:16px;
  height:16px;
}
#btnUnmute {
  background-image: url('unmute.png');
  top:-3px;
  right:0px;
  display:none;
  cursor:pointer;
  width:16px;
  height:16px;
}
#closeVideoLayer {
  position:absolute;
  top:12px;
  right:11px;
  width:22px;
  height:24px;
  background: transparent url(close.png) no-repeat top left;
  cursor:pointer;
  z-index:9999;
}
#videoStill {
  position: absolute;
  width:416px;
  height:223px;
  top:11px;
  left:275px;
  opacity:0;
  background: transparent url(screenshot.png) no-repeat top left;
  z-index:9999;
}
#videoBackground {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#000000;
  opacity:.7;
}

#exit_btn {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:transparent;
  cursor:pointer;
  z-index:998;
  border:0;
}