/*
	Palmashow
  Design : Thirtydirtyfingers.com
  HTML/CSS : Dezup.com
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

body {
  background: #000 url(../../images/bg.jpg) no-repeat;
  background-size: cover;
}

#scene {    
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#bg2, #bg1 {
  left: 50% !important;
  top: 50% !important;
}
#bg2 img { transform: translate(-50%,-50%); }
#bg1 img {    
  width: 100%;
  max-width: 1634px;
  margin: 0 auto;
  position: relative;
  transform: translate(-58%,-50%);
}

.socials {     
  position: absolute;
  width: auto;
  text-align: center;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  min-width: 300px;
  transition: all 0.4s ease;
}
.socials li { position:relative; list-style-type: none; display: inline-block; margin: 20px 10px;opacity: 1; transition: all 0.4s ease;width: 40px;height: 40px;}
.socials li img { max-width: 100%;  max-height: 100%;}
.socials:hover li { opacity: 0.4;} 
.socials li:hover {opacity: 1;}
.socials li:hover .tooltip {opacity: 1;top: 50px;}

.tooltip {
  position: absolute;
  left: 50%;
  top: 80px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
  opacity: 0;
}
.tooltip > .tooltip-inner {
  background-color: #f5e763;
  padding: 5px 15px;
  color: black;
  font-weight: bold;
  font-size: 13px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
}

.tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f5e763 transparent;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
}

@media screen and (max-width: 1024px) {
  
  #bg2 img {  max-width: 400px;  }
  #bg1 img {  transform: translate(-50%,-50%); }
  
}

@media screen and (max-height: 700px) {
  
  .socials { bottom: 10%; }

}

@media screen and (max-width: 640px) {
  
  #bg2 img {  max-width: 280px;  }
  .socials {transform: scale(0.8) translateX(-60%);}
  body {     
    background: #000 url(../../images/bg-mobile.jpg) no-repeat 50% top;
    background-size: cover;
    }
}