/* :D Reset */

/* 
 * Global
 */


/* 
 * Site Instances
 */
body.page-loaded.menu-open a#toggle-fullscreen {
  opacity: 0; }

body.page-loaded.menu-open #guide-text {
  opacity: 0; }

@media screen and (min-width: 962px) {
  body.page-loaded.menu-open #face {
    transform: scale(0.8, 0.8) !important; } }

body.page-loaded.menu-open #face #eye-lids {
  opacity: 1 !important; }

body.page-loaded.menu-open #face #blurred {
  opacity: 1 !important; }

body.page-loaded.menu-open a#down-arrow {
  bottom: 24px !important;
  opacity: 0 !important; }

body.page-loaded.menu-open a#up-arrow {
  top: 55px !important;
  opacity: 0 !important; }

body.page-loaded.menu-open a#back-arrow {
  opacity: 0 !important; }

body.page-loaded.menu-open #scroll-overlay {
  opacity: 0 !important; }

body.page-loaded.menu-open #hover-panel-left {
  z-index: 98; }

body.page-loaded.menu-open section#section-one,
body.page-loaded.menu-open section#section-two,
body.page-loaded.menu-open section#section-three {
  transition: opacity .6s 0s !important;
  opacity: 0 !important; }

body.page-loaded.menu-open #prompt {
  opacity: 0; }

body.page-loaded.load-sequence-complete.open-complete #face #blurred {
  transition: all .35s 0s, height .8s, width .8s, opacity .5s 0s; }

body.page-loaded.load-sequence-complete.open-complete #menu-slide-out {
  transition-delay: .5s !important; }

body.page-loaded.load-sequence-complete.open-complete section#section-one,
body.page-loaded.load-sequence-complete.open-complete section#section-two,
body.page-loaded.load-sequence-complete.open-complete section#section-three {
  transition-delay: 1.2s !important; }

body.page-loaded #loader {
  opacity: 0;
  visibility: hidden; }

body.page-loaded #face {
  transform: scale(1, 1); }
  body.page-loaded #face #eye-lids {
    opacity: 0; }

body.page-loaded #prompt {
  opacity: 1; }

body.page-loaded .lines-container {
  z-index: 2; }

body.page-loaded .particles-container.lines > .particle {
  background-color: rgba(10, 10, 10, 0.1); }

body.page-loaded.load-sequence-complete #face {
  transition: transform .8s .25s, opacity 1.2s 2s, height .8s, width .8s, margin .8s, top 1.2s 0s; }
  body.page-loaded.load-sequence-complete #face #eye-lids {
    transition: opacity .3s .8s, height .8s, width .8s; }

body.page-loaded.load-sequence-complete #down-arrow {
  opacity: 1;
  transition-delay: 0s;
  transform: scale(1); }

body.page-loaded.load-sequence-complete #prompt {
  transition: opacity .6s 1.8s; }

body.page-loaded.load-sequence-complete #mobile-menu > span {
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s 0.7s, opacity 0.6s 0s; }

body.page-loaded.scrolled #prompt {
  opacity: 0;
  transition-delay: .1s !important; }

body.page-loaded.scrolled a#down-arrow {
  bottom: 24px;
  opacity: 0 !important;
  transform: scale(0); }

body.page-loaded.scrolled a#up-arrow {
  top: 51px;
  opacity: 1;
  transform: scale(1); }

body.page-loaded.scrolled #guide-text {
  opacity: 0 !important; }

@media screen and (min-width: 962px) {
  body.page-loaded.scrolled #face {
    transform: scale(0.8, 0.8) !important; } }

body.page-loaded.scrolled #face #eye-lids {
  opacity: 1 !important; }

body.page-loaded.scrolled a#toggle-fullscreen {
  opacity: 0; }

body.page-loaded.scrolled #scroll-overlay {
  transform: scale(1);
  opacity: 1;
  top: 121px; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h1 {
    opacity: 1;
    margin-top: 0; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h2, body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h3 {
    margin-left: 0;
    opacity: 1; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content #scroll-overlay-copy {
    margin-right: 0;
    opacity: 1; }

body.page-loaded.scrolled .lines-container {
  opacity: 0; }

body.hovering-on-panel #face #eye-brows {
  margin-top: -4px;
  transform: rotateZ(0.8deg); }

body.hovering-on-panel #image-grid {
  width: calc(100% - 344px);
  transition: all 1s 0s; }

body.hovering-on-panel #prompt {
  opacity: 0;
  transition-delay: .1s !important; }



body .lines-container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s 0s;
  z-index: 99999; }
  body .lines-container.show {
    opacity: .8; }

body .particles-container {
  position: absolute;
  height: 45%; }
  body .particles-container.stretch-horz {
    width: 180%;
    height: 110%;
    left: -60%;
    top: 6%;
    opacity: .2;
    transform: rotate(90deg); }
  body .particles-container.stretch-one {
    width: 100%;
    height: 90%;
    left: 0;
    top: 25%;
    opacity: .6; }
  body .particles-container.stretch-two {
    width: 34%;
    left: 32%;
    top: 31%;
    opacity: .8;
    height: 80%; }
  body .particles-container.stretch-three {
    width: 30%;
    height: 80%;
    left: 35%;
    top: 39%;
    opacity: .4; }
  body .particles-container.stretch-four {
    width: 20%;
    left: 40%;
    top: 38%;
    height: 68%;
    opacity: 0.5; }
  body .particles-container.lines > .particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    animation: lines 10s linear infinite; }

@keyframes lines {
  0%, 50%, 100% {
    transform: translateY(0%); }
  25% {
    transform: translateY(100%); }
  75% {
    transform: translateY(-100%); } }

/* 
 * Mobile Responsive
 */
#mobile-nav {
  display: none !important; }

@media screen and (max-width: 962px) {
  #nav-content {
    position: relative !important;
    transform: translate(0, 0) !important;
    top: 0 !important;
    left: 0 !important;
    padding-top: 50px; }
    #nav-content #contact-information {
      margin-top: 200px; }
    #nav-content #mobile-nav {
      display: block !important; }
      #nav-content #mobile-nav li {
        display: block; }
      #nav-content #mobile-nav a {
        margin: 0;
        padding: 0; }
  section#section-one {
    min-width: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 50px !important; }
    section#section-one h1 {
      left: 30px;
      font-size: 25px !important;
      line-height: 25px !important; }
    section#section-one #section-one-copy {
      margin-left: 30px !important;
      max-width: calc(100% - 60px) !important; }
    section#section-one #logos {
      display: none; }
  #section-two {
    width: 100% !important;
    left: 20px !important;
    padding-top: 120px !important; }
    #section-two #preview {
      display: none !important; }
    #section-two #vert-scroll-container div h2 a:hover {
      color: #020202 !important;
      cursor: default; }
  #section-three {
    display: none !important; }
  #hover-panel-left,
  a#toggle-fullscreen,
  #testimonials,
  #guide-text {
    display: none !important; }
  #contact-information > div {
    width: 100% !important; }
  #contact-information > div:first-child,
  #contact-information > div:nth-child(2) {
    display: none !important; }
  #scroll-overlay {
    width: calc(100% - 40px);
    left: 20px; }
  #scroll-overlay #scroll-overlay-content {
    margin-left: 0 !important; }
  #scroll-overlay #scroll-overlay-content h1,
  #scroll-overlay #scroll-overlay-content h2,
  #scroll-overlay #scroll-overlay-content h3 {
    left: 20px !important;
    padding-right: 20px !important; }
  #scroll-overlay #scroll-overlay-content h1 {
    font-size: 24px;
    letter-spacing: 2px;
    max-width: calc(100% - 50px);
    line-height: 32px; }
  #face {
    width: 80% !important;
    max-width: 384px !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important; }
    #face #eye-balls, #face #eye-holes, #face #eye-lids, #face #smile, #face #eye-brows, #face #blurred {
      width: 100% !important;
      height: 0 !important;
      padding-bottom: 150% !important; } }


ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}
ul,ol,li,h1,h2,h1,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset{
	margin:0;padding:0;line-height:1.3; list-style:none;}
a img,:link img,:visited img, fieldset{
	border:none;
	text-align: center;
}


#sonidochrome {
  	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 299;
	background-color: rgba(0,0,0,0.9);
	display: none;
}

#sonidochrome h1, #sonidochrome .overlay-title {
	position: absolute;
	width: 100%;
	font-size: 2.0em;
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
}

#sonidochrome p {
	font-family: AvantGardeBold;
	font-size: .7em;
	color: #666;
}


@media screen and (-webkit-min-device-pixel-ratio:0){
  #sonidochrome{
      display: block;
      cursor: url('../images/iconos/white/white-x.png') 40 40, auto;
  }  
}

.awwwards {
	position: absolute;
	z-index: 1;
	margin-top: 25%;
	width: 10%;
}

.tachar {text-decoration:line-through;}

/* FONT */

@font-face{font-family: AvantGardeNormal; /* NORMAL */
src:url("../fonts/ITCAvantGardePro-Md.eot")
;src:url("../fonts/ITCAvantGardePro-Md-.eot#iefix") format("embedded-opentype"),url("../fonts/ITCAvantGardePro-Md.woff") format("woff"),url("../fonts/ITCAvantGardePro-Md.ttf") format("truetype"),url("../fonts/ITCAvantGardePro-Md.svg#ITCAvantGardePro-Md") format("svg");font-style:normal;font-weight:normal}

@font-face{font-family: AvantGardeLight; /* FINA */
src:url("../fonts/ITCAvantGardePro-XLt.eot");
src:url("../fonts/ITCAvantGardePro-XLt-.eot#iefix") format("embedded-opentype"),url("../fonts/ITCAvantGardePro-XLt.woff") format("woff"),url("../fonts/ITCAvantGardePro-XLt.ttf") format("truetype"),url("../fonts/ITCAvantGardePro-XLt.svg#ITCAvantGardePro-XLt") format("svg");font-style:normal;font-weight:normal}

@font-face{font-family:AvantGardeBold; /* BOLD */
src:url("../fonts/ITCAvantGardePro-Bold.eot");
src:url("../fonts/ITCAvantGardePro-Bold-.eot#iefix") format("embedded-opentype"),url("../fonts/ITCAvantGardePro-Bold.woff") format("woff"),url("../fonts/ITCAvantGardePro-Bold.ttf") format("truetype"),url("../fonts/ITCAvantGardePro-Bold.svg#ITCAvantGardePro-Bold") format("svg");font-style:normal;font-weight:normal}

/* END FONT */

body{background: #000; color:#666;font-family: AvantGardeBold; position: ;top: 0;left: 0;bottom: 0;right: 0px; overflow-x: hidden; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}

.jtextfill {font-family: AvantGardeBold; line-height: 1.3; opacity: 1; width: 85vw; height: 70vh; }

h1{font-family: AvantGardeNormal; font-size: 2.0rem;line-height:4rem; letter-spacing: -2px; } /* calc((80vh - 135px) / 12); */
h2{font-size: 2rem; }
h2.turn-up{font-size: 4rem; line-height: 4rem; margin-top: 20px; float: left; z-index: 500; position: fixed; left:0%;}
h3{font-size: 2rem; line-height:3.0rem; color:rgba(235, 235, 235, 0.8);}
li{font-size: 1.5rem; }
a{ text-decoration:none; color:#999;cursor: url('../images/iconos/white/white-sound.png') 0 0, auto;}
a.enlace:hover {color:#fff; text-decoration: underline; }
p{font-family: AvantGardeNormal; font-size: 1.5rem; line-height:3.0rem;}
.cursordefault {cursor: url('../images/iconos/white/white-default.png') 0 0, auto !important;}
.imgproject, .imgprojectnoopacity .nocursor:hover {cursor: url('../images/iconos/white70/white-down.png') 40 40, auto;}
.game {cursor: url('../images/iconos/white70/white-link.png') 40 40, auto !important;}

img:hover{ cue:url("mp3/tick1.html");} /* ???? */


#headlineContentContainer a:hover {color:#fff; text-decoration: none; z-index: 20; position: relative; }
.projectHeadlineText a:hover { color:#fff; text-decoration: underline; cursor: url('../images/iconos/white/white-sound.png') 0 0, auto;}

/* COLOR */
.bgwhite{background-color: #fff;}
.bgblack{background-color: #111 !important;}
.bgblue{background-color: rgba(0,255,255,1);}
.bgpink{background-color: rgba(255,113,176,1);}
.bggreen{background-color: rgba(65,250,122,1);}
.bgyellow{background-color: rgba(255,243,109,1);}
.bgmix{background: rgba(255,113,177,1);
	background: -moz-linear-gradient(left, rgba(255,113,177,1) 0%, rgba(0,255,255,1) 33%, rgba(66,250,121,1) 66%, rgba(255,243,109,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,113,177,1)), color-stop(33%, rgba(0,255,255,1)), color-stop(66%, rgba(66,250,121,1)), color-stop(100%, rgba(255,243,109,1)));
	background: -webkit-linear-gradient(left, rgba(255,113,177,1) 0%, rgba(0,255,255,1) 33%, rgba(66,250,121,1) 66%, rgba(255,243,109,1) 100%);
	background: -o-linear-gradient(left, rgba(255,113,177,1) 0%, rgba(0,255,255,1) 33%, rgba(66,250,121,1) 66%, rgba(255,243,109,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,113,177,1) 0%, rgba(0,255,255,1) 33%, rgba(66,250,121,1) 66%, rgba(255,243,109,1) 100%);
	background: linear-gradient(to right, rgba(255,113,177,1) 0%, rgba(0,255,255,1) 33%, rgba(66,250,121,1) 66%, rgba(255,243,109,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff71b1', endColorstr='#fff36d', GradientType=1 );}
.bgmix2{background: rgba(255,243,108,1);
background: -moz-linear-gradient(left, rgba(255,243,108,1) 0%, rgba(64,249,111,1) 34%, rgba(0,255,255,1) 67%, rgba(255,112,175,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,243,108,1)), color-stop(34%, rgba(64,249,111,1)), color-stop(67%, rgba(0,255,255,1)), color-stop(100%, rgba(255,112,175,1)));
background: -webkit-linear-gradient(left, rgba(255,243,108,1) 0%, rgba(64,249,111,1) 34%, rgba(0,255,255,1) 67%, rgba(255,112,175,1) 100%);
background: -o-linear-gradient(left, rgba(255,243,108,1) 0%, rgba(64,249,111,1) 34%, rgba(0,255,255,1) 67%, rgba(255,112,175,1) 100%);
background: -ms-linear-gradient(left, rgba(255,243,108,1) 0%, rgba(64,249,111,1) 34%, rgba(0,255,255,1) 67%, rgba(255,112,175,1) 100%);
background: linear-gradient(to right, rgba(255,243,108,1) 0%, rgba(64,249,111,1) 34%, rgba(0,255,255,1) 67%, rgba(255,112,175,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff36c', endColorstr='#ff70af', GradientType=1 ); }

.blanco{color:#FFF;}
.white{color:#FFF;}
.selected{color:#FFF; text-decoration: underline !important;}
.grey{color:#CCC;}
.dark{color:#999;}
.black{color:#000;}
.blue{color:rgba(0,255,255,1);}
.green{color:rgba(65,250,112,1);}
.pink{color:rgba(255,113,176,1);}
.yellow{color: rgba(255,243,109,1);}
.conference{color:rgba(0,255,255,1);font-family: AvantGardeBold, sans-serif;}
.press{color:rgba(65,250,112,1);}
.workshop{color:rgba(255,113,176,1);}
.other{color: rgba(255,243,109,1);}

/* Scroll Bar */

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #333;
}

::-webkit-scrollbar-thumb {
	background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

/* lazy loading */

.placeholder {
	position: relative;
	overflow: hidden;
	height: 800px;
	width: 100%;
	cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; 
}

.placeholder a {
	cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; 
}

.placeholder img {
	position: absolute;
	/* : 50%; top: 50%; width: 1500px; height: 1000px; margin: -500px 0 0 -750px; */
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
}

.lazyload {
	width: 100% !important;
	-webkit-filter: blur(5px);
	      filter: blur(5px);
	/* this is needed so Safari keeps sharp edges */
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* parallax */


/* screensaver */

#screensaver {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: none;
  background: url(../images/spam.png) no-repeat center center fixed;
  /* background: url(../gif/axpe.gif) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 10000;
}

/* INFO */

#info {
	position: relative;
	z-index: 3;
	padding-bottom: 20px;
}

.contact {
	width: 70%;
	position: relative;
	float: left;
}

.follow {
	width: 30%;
	position: relative;
	float: left;
}

#testimonios {
	position: relative;
	background-color: #ccc;
	height: 900px;
}

.testimonios {
	width: 100%;
	position: relative;
	float: left;
	text-align: center;
}

.testigos {
	background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    margin-bottom: 10px; 
}

/* PRELOAD */

#spinner {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 300;
	cursor: url('../images/iconos/white70/white-time.png') 40 40, auto;
	background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

#preload {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 300;
	cursor: url('../images/iconos/white70/white-time.png') 40 40, auto;
	background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

.achos {
  position:fixed;
  left: 50%; top: 50%; width: 700px; height: 280px; margin: -160px 0 0 -350px; /* +20 por el height de achos*/
  z-index: 1000;
  text-align: center;
}

.achos img {
  width: 100%;
  height: auto;
}

.adult {
	position: absolute;
	right: 30px;
	top: 30px;
	width: 300px;
	height: 150px;
	opacity: 0.9;

}

#wait {
  position:absolute;
  left: 50%; top: 50%; width: 700px; height: 280px; margin: -140px 0 0 -350px; /* +20 por el height de achos*/
  z-index: 1000;
  text-align: center;
}

/* #shake {
  position:fixed;
  left: 50%; top: 50%; width: 700px; height: 280px; margin: -160px 0 0 -350px;
  z-index: 1000;
  text-align: center;
  display: none;
}

#shake img {
  width: 100%;
  height: auto;
}
*/

#shake {
  z-index: 10000;
  display: none;

  /* background: url(../../gif/nope.gif) no-repeat center center; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;

  
}


/* COOKIES */

#galleta {
  position:fixed;
  bottom: 10%; right: -100px; /* +20 por el height de achos*/
  z-index: 3;
  text-align: center;
}

.galleta:hover {
  right: 20px;
  margin-right: 50px;
  transition: all .35s linear;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

.galleta {
	height: 200px;
	cursor: url('../images/iconos/white/white-x.png') 40 40, auto;
	transition: all .35s linear;
	-ms-transform: rotate(25deg); /* IE 9 */
    -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */
    transform: rotate(25deg);
}

.bye {
	height: 200px;
	margin-right: -150px;
	transition: all .35s linear;
	-ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
    transform: rotate(150deg);
}

.videoframe {
	display: none;
	position: fixed;
	width: 80%;
	z-index: 5000 !important;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}



/* DONT TOUCH */

#touch {
    position:absolute;
    width:500px;  
    height:200px;  
    top:43%;  
    left:50%;  
    margin-top:-100px;  
    margin-left:-250px;
	text-align:center;
	z-index: 10;
}

#touch img {
	width: 100%;
}

#scroll-down {
    position:absolute;
    width:110px;  
    height:50px;  
    bottom:15px;
    left:50%;
    margin-left:-55px; 
	text-align:center;
	z-index: 100;
	*background:#FFF; /* Sólo IE6 */
	*background:#FFF !important; /* Sólo IE7 */
}

/*
	Iago
*/

a.enlace.active {
	color:#0CC; text-decoration: underline; 
	 }

.enlace {
    font-family: AvantGardeBold, sans-serif;
	text-decoration: none;
}

.titulo {
	font-family: AvantGardeBold, sans-serif;
	position: absolute;
	width: 15%;
	left: 100px;
}

.title {
	font-family: AvantGardeBold, sans-serif;
	position: absolute;
	width: 15%;
	left: 100px;
	margin-top: 0px;
}

.scroll {
    position: absolute;
	bottom: 100px;
	right: 10px;
	text-align: center;
	
}

/*NAVIGATION*/
#navContainer{position: relative; z-index: 1; height: 130px; width: 100%; background-color:#111; float: left; overflow: hidden; font-size:9px; margin-bottom: -2px; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}
#navAbout{position: absolute; top: 0; height: 130px; width: 100%; background-color:; float: left; overflow-x: hidden; font-size:9px; margin-bottom: -2px; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}

#navContentContainer {margin-top: 0px;}

#logo{ margin: 25px 0px 0px 100px; position: fixed; z-index: 20;}
#logo h2 {font-family:AvantGardeBold, sans-serif;font-size: 80px; color:#F00; margin-left: -4px; letter-spacing: 3px; }
#logo h2 a{color:#FFF; }

#logo0 {margin: 35px 0px 0px 100px; position: absolute; z-index: 20;}
#logo0 h2 {font-family:AvantGardeBold, sans-serif;font-size: 60px; line-height: 100px; color:#F00; margin-left: -4px; letter-spacing: -3px; text-shadow: 0.7px 0.7px 0.7px #000000; }
#logo0 h2 a{color:#FFF; }

/* Naudojama #preload uzsklandoje - ten fiksuota pozicija tinka */
#preload .claim {
    bottom: 5%;
    left: 0;
    margin-left: 20%;
    margin-right: 20%;
    position: fixed;
    text-align: center;
    width: 60%;
    z-index: 2;
}

/* Kontaktu bloke tai paprastas pasto linkas, o ne per ekrana plaukiojantis
   uzrasas. Anksciau jis paveldedavo position:fixed ir buvo nepaspaudziamas. */
.follow .claim,
.contact .claim {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
    text-align: left;
    width: auto;
    bottom: auto;
    left: auto;
}

#navSocial{position:absolute; font-size: 14px; color:#333; list-style: none; float: right; margin-top: 55px; right:110px;}

#navMenu{position:fixed; z-index: 30; height: 0px; color:#333; list-style: none; float: right; margin-top: 74px; padding-bottom: 10px; right:100px; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}
#navMenu li{float: right; padding: 0px 10px 10px 0px; text-align: right; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}
#navMenu li a{padding: 0px 5px 0px 5px; text-shadow: 0.5px 0.5px 0.5px #000000;}
#navMenu li a:hover{cursor: url('../images/iconos/white/white-sound.png') 0 0, auto; padding: 0px 5px 0px 5px; color: white; text-decoration: none;}
#navActive{color:; cursor: default; /* text-decoration: line-through;*/}

#navProjects{position:absolute; top: 50px; font-size: 32px; color:#333; list-style: none; float: right; right:100px;}
#navProjects li{float: right; padding: 0px 10px 10px 0px; text-align: right;}

/*MENU IDIOMAS*/

.ringMenu a:not(.eng) {
  opacity: 0;
}
.ringMenu:hover a {
  opacity: 1;
}

.ringMenu a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin-bottom: 10px;
}
.ringMenu a:hover {
  color: transparent;
}

/*HEADLINE*/

#headlineContainer{width: 100%; background-image:#000; float: left; overflow: hidden; cursor: url('../images/iconos/white/white-default.png') 0 0, auto;}
#headlineContentContainer{margin-left: 100px; margin-right: 100px;}

/*ABOUT*/

#about {
	padding-bottom: 50px;
	text-align: center;
}

.about3 {
	width: 33.3%;
	float: left;
	margin-bottom: 50px;
}

#social {text-align:left;}

.small {font-size:22px; line-height:38px; padding: 5px 0px 5px 0px;}
.supersmall {font-size:14px !important; line-height:14px; margin-top: 0;}

#whatwedo {
	width: 100%;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

#freebeer {
	width: 100%;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 100px;
}

#clientes {
	width: 100%;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 120px;
}

#premios {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 100px;
}

#text0 img {
	margin-right:.5%;
	margin-left:.5%;
	margin-top:.5%;
	margin-bottom:.5%;
	width: 10%;
	filter: invert(1);
  -webkit-filter: filter: invert(1);
}

#text0 img:hover {
  /* -webkit-filter: drop-shadow(0px 0px 0px #0CC); */
  transform:scale(1.5,1.5);
  z-index: 10;
  position: relative;
  filter: invert(1);
  -webkit-filter: filter: invert(1);
  transition: all .2s linear;
}

/*PROJECTS*/

.projectContainer{width: 100%; position: relative; overflow-x: hidden; background-color:rgba(235,235,235,0.9);}
.projectContainerHeadline{float: left; width: 100%; background-color: rgba(0,0,0,1); z-index: 1;}/*INDEX*/
.projectContainerHead{float: left; width: 100%; background-color: rgba(0,0,0,0.8); z-index: 1;}/*PROJECTS*/

.projectHeadlineText{margin-left: 100px; height: 150px;}
.projectHeadlineText h1,
.projectHeadlineText h2{padding-top: 30px; line-height:50px;}
.projectHeadlineText h3{margin: 0px 0px 20px 0px;}

.projectImage{width: 100%; height: 800px; float: left; background-color: black;}
.projectImage{cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; background-color:rgba(0,0,0,0.7); -webkit-transition: background-color 0.35s; transition: background-color 0.35s;}

#projectSingaz{background: url('../work/singaz/singaz-00.html') no-repeat; background-position: center; z-index: 1;}
#projectCleanstreets{background: url('../work/clean/clean-00.html') no-repeat; background-position: center; z-index: 1;}
#projectAchos{background: url('../work/achos/achos-00.html') no-repeat; background-position: center; z-index: 1;}
#projectSag{background: url('../work/sag/sag-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectBleep{background: url('../work/bleep/bleep-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectTings{background: url('../work/ttt/ttt-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectLaus{background: url('../work/laus/laus-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectCurro{background: url('../work/curro/curro-00.html') no-repeat; background-position: center; z-index: 1;}
#projectDespidos{background: url('../work/despidos/despidos-00.jpg') no-repeat; background-position: center; z-index: 1; background-position: center !important}
#projectGuzzo{background: url('../work/guzzo/guzzo-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectFiu{background: url('../work/fiu/fiu-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectUshuaia{background: url('../work/ushuaia/ushuaia-00.html') no-repeat; background-position: center; z-index: 1;}
#projectElrow{background: url('../work/elrow/elrow-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectAudi{background: url('../work/audi/audi-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectMola{background: url('../work/mola/mola-00.html') no-repeat; background-position: center; z-index: 1;}
#projectTinder{background: url('../work/tinder/tinder-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectLimon{background: url('../work/limon/smash-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectFeel{background: url('../work/feel/feel-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectXmas{background: url('../work/xmas/xmas-05.jpg') no-repeat; background-position: center; z-index: 1;}
#projectMadrugon{background: url('../work/madrugon/madrugon-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectCanio{background: url('../work/canio/canio-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectFsf{background: url('../work/fsf/fsf-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectUsbarcelona{background: url('../work/usbarcelona/usbarcelona-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectUsgame{background: url('../work/usgame/usgame-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectDaffy{background: url('../work/daffy/daffy-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectAxpe{background: url('../work/axpe/axpe-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectAro{background: url('../work/aro/aro-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectAtelier{background: url('../work/atelier/atelier-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectPacha{background: url('../work/pacha/pacha-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectHatsu{background: url('../work/hatsu/hatsu-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectLengua{background: url('../work/lengua/lengua-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectCookies{background: url('../work/cookies/cookies-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectBustom{background: url('../work/bustom/bustom-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectLazyeyes{background: url('../work/lazyeyes/lazyeyes-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectLu{background: url('../work/lu/lu-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectJenlu{background: url('../work/jenlu/jenlu-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectCodea{background: url('../work/codea/codea-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectPalu{background: url('../work/palu/palu-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectChatwork{background: url('../work/chatwork/chatwork-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectMwb{background: url('../work/mwb/mwb-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectMwb2{background: url('../work/mwb2/mwb2-00.html') no-repeat; background-position: center; z-index: 1;}
#projectKiwibravo{background: url('../work/kiwibravo/kiwibravo-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectSmallfilms{background: url('../work/smallfilms/smallfilms-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectDictionary{background: url('../work/dictionary/dictionary-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectBeefeater{background: url('../work/beefeater/app-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectAwwwful{background: url('../work/awwwful/awwwful-00.html') no-repeat; background-position: center; z-index: 1;}
#projectUndiestick{background: url('../work/undiestick/undiestick-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectDadadada{background: url('../work/dadadada/dadadada-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectArkasha{background: url('../work/arkasha/arkasha-00.html') no-repeat; background-position: center; z-index: 1;}
#projectMariano{background: url('../work/mariano/mariano-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectDesigndoes{background: url('../work/designdoes/designdoes-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectElarco{background: url('../work/elarco/elarco-00.jpg') no-repeat; background-position: center; z-index: 1;}
#projectCampaign{background: url('../work/campaign/campaign-00.jpg') no-repeat; background-position: center; z-index: 1;}

.iconContainer{float: right; height: 1000px; width: 200px; }
.icon{float: right; display: block; margin-right:-14px; z-index: 980; position: relative; cursor: pointer; padding-right: 5px;}
.photo{margin-top: 250px;}
.video{margin-top: 250px;}
.video1{margin-top: 250px;}
.site{margin-top: 250px;}
.app{margin-top: 250px;}

audio {
	display: none;
}

/*FOOTER*/

#footer{position: relative; z-index: 4; width: 100%; height: auto; float: left; background-color: #111; padding-top: 45px; padding-bottom: 45px; margin-top: 0px; margin: 0 0; cursor: url('../images/iconos/black/black-contact2.png') 40 40, auto;}
#footer:hover { background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
color: #999;}
#footerText {color: white;}
#footer a { color:#0CC;}
h3 #footerText{float: left; margin-left: 100px; margin-top: 5px;}
#footerArrow{float: right; padding-right: 100px;}

/*FOOTER2*/

#footer2{width: 100%; height: auto; float: left; background-color: #111; padding-top: 45px; cursor: pointer; padding-bottom: 45px; margin-top: 0px; margin: 0 0;}
#footer2 a { color:#0CC;}
h3 #footerText2{float: right; margin-right: 100px;}
#footerArrow2{float: left; padding-left: 100px;}

/*VIDEO - FULL WINDOW*/
video {max-width: 100%; height: auto; position: relative;}
#videobustom {width: 100%; height: 100%;}

#videocampaign {height: 100%;}

.sfbg {
	width: 100%;
	height: 100%;
	background: black;
}

/* PROMSITE */

.promsite {
	position: relative;
	z-index: 3;
	padding-right: 20%; 
	padding-left: 20%;
	background: #000;
	text-align: center;
	font-family: AvantGardeBold;
	transition: all .35s linear;
}

.promsite img {
	width: 450px;
	padding-top: -50px;
	padding-bottom: -50px; 
}

#vidContainer{position: fixed; z-index: 998; width: 0; height: 100%; background-color: black; overflow: hidden; top:0; opacity: 0}
#close{z-index: 999; color: red; font-size: 100px; position: fixed; top: 0px; cursor: pointer;z-index: 999; width: 138px; height: 39px; background-image: url('../images/close-video.html'); top: 10px; right: 10px; opacity: 0; z-index: 1998;}

#banner {
	padding-right: 100px; 
	padding-left: 100px; 
	margin-top: 50px;
	margin-bottom: 50px;
} 

#text, .text {
	padding-right: 100px; 
	padding-left: 100px; 
	margin-top: 180px;
	margin-bottom:20px;
}

#text0 {
	padding-right: 100px; 
	padding-left: 100px; 
	margin-top: 100px;
	margin-bottom: 100px;
}

#text1 {
	padding-right: 10%; 
	padding-left: 25%; 
	margin-top: 195px;
	margin-bottom:40px;
	/* cursor: url('../images/iconos/down.png') 40 40, auto; */
}

#text1 a:hover {color:#333; z-index: 20; position: relative; }

#text2 {
	padding-right: 100px; 
	padding-left: 100px; 
	margin-top: 150px;
	margin-bottom:150px;
}

#text3, #text3b, #text3c {
	width: auto;
	padding-right: 10%; 
	padding-left: 25%; 
	padding-top:50px;
	padding-bottom:50px;
	background-color: #111;
	/* position: relative; */
	float: left;
	z-index: 1;
	transform: scale(1);
    transition: all .35s linear;
}

#text3:hover, #text3b:hover, #text3c:hover, #text5:hover {
/*	transform: scale(1.05);
    transition: all .35s linear;
    z-index: 1; */
    background-color: black;
    color: white;
}

#text4 {
	padding-right: 100px; 
	padding-left: 100px; 
	margin-top: 50px;
	margin-bottom:50px;
	cursor: url('../images/iconos/white/white-default.png'), auto;
}

#text4 a {
	cursor: url('../images/iconos/white/white-sound.png'), auto;
}

#text5 {
	padding-right: 20%; 
	padding-left: 20%; 
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #111;
	color: white;
	text-align: center;
	/* margin-top: -10px; */
	cursor: url('../images/iconos/white70/white-down.png') 40 40, auto;
	transform: scale(1);
    transition: all .35s linear;
}

#text6 {
	padding-right: 20%; 
	padding-left: 20%; 
	padding-top: 200px;
	padding-bottom: 200px;
	background-color: white;
	text-align: center;
	font-family: AvantGardeBold;
	transition: all .35s linear;
}

#text7 {
	padding-right: 20%; 
	padding-left: 20%; 
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: white;
	text-align: center;
	font-family: AvantGardeBold;
	transition: all .35s linear;
}

#text6:hover {
	color: white;
	cursor: url('../images/iconos/black/black-%2b.png') 40 40, auto;
	background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
	transition: all .35s linear; 
}

.imgprojecthome {
	width: 100%;
	margin-bottom: -20px;
	position: relative;
	cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto;
}

.imgproject {
	width: 100%;
	margin-bottom: -6.5px;
	position: relative;
	z-index: ;
}

.imgprojectnoopacity {
	width: 100%;
	margin-bottom: -10px;
	opacity: 1;
}

.work-main {
	display: none;
}

.show-work {
	display: block;
	position: relative;
}

.work2 {
	width: 50%;
	float: left;
}

a .work2, a .work3 {
	cursor: url('../images/iconos/white70/white-link.png') 40 40, auto;}

a .nocursor {cursor: url('../images/iconos/white70/white-down.png') 40 40, auto;}

.show-worktwo img {
	filter: alpha(opacity=70);
        opacity: 0.7;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

.show-work img{
	filter: alpha(opacity=70);
        opacity: 0.7;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

a img {
	/* cursor: url('../images/iconos/yellow/yellow-link.png') 40 40, auto; */
	filter: alpha(opacity=70);
        opacity: 0.7;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

.work2, .work3 {
	cursor: url('../images/iconos/white70/white-zoom.png') 40 40, auto;
	position: relative;
	z-index: ;
}

.show-worktwo img:hover {
	filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

.show-work img:hover {
	filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

a img:hover {
	filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: opacity .35s ease-in-out;
        -moz-transition: opacity .35s ease-in-out;
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out;
        transition: opacity .35s ease-in-out;
}

.work3 {
	width: 33.3%;
	float: left;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.work3b {
	width: 33.3%;
	float: left;
	cursor: url('../images/iconos/white70/white-down.png') 40 40, auto;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.apple {
	width: 33.3%;
	float: left;
	cursor: url('../images/iconos/white70/white-play.html') 40 40, auto;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.domestic, .picasso {
	width: 50%;
	float: left;
	cursor: url('../images/iconos/white70/white-play.html') 40 40, auto;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.data {
	width: 100%;
	float: left;
	cursor: url('../images/iconos/white70/white-play.html') 40 40, auto;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.samurai {
	cursor: url('../images/iconos/white70/white-play.html') 40 40, auto;
}

.bannerbef {
	width: 100%;
	float: left;
}

.streamers {
	width: 100%;
	float: left;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

.usvideo {
	width: 33.3%;
	float: left;
	/* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; */
}

/* ZOOM IMG */

.noscroll {
	overflow: hidden;
}

.full {
	width: 100%;
	cursor: url('../images/iconos/white70/white-zoom2.png') 40 40, auto;
	z-index: 10;
	float: none;
	display: block !important;
}

.half-full {
	width: 50%;
	z-index: 11;
	float: left;
}

.empty {
	display: none;
}

.clearboth {
	clear: both;
}

.video {
	margin-top: 0px;
	margin-bottom: -5px;
	position: relative;
	z-index: 0;
}

.vid3 {
	margin-bottom: 0px;
}

#player {
	cursor: url('../images/iconos/white/white-default.png'), auto;
}
 
.iphonemusic {
 	display: none;
 }

.icono {
 	height: 20px;
 	width: 22px;
}

/* PROYECTOS BACK & NEXT */

.menufilter {
    position: fixed;
    z-index: 2;
    padding: 20px;
    bottom: -170px;
    right: 0;
    left: 0;
    text-align: center;
    transition:all .5s;
}

.menufilter a:focus{
    background-color: white;
    color: ;
    background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

.bottomcero {
    bottom: 0;
    /* transition:all .5s; */
    -webkit-transition: .5s ease-out;
	-moz-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}

.botonfilter {
    position: fixed;
    z-index: 2;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    transition:all .5s;
    height: 50px;
    padding-top: 15px;
    background: white;
    color: white;
    opacity: 1;
    font-size: 2em;
    background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

.hide {
    bottom:-150px;
    /* transition:all .5s; */
    -webkit-transition: .5s ease-out;
	-moz-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}

.abracadabra {
	height: 0 !important;
	/* transition:all 1.5s; */
	-webkit-transition: 1s ease-out;
	-moz-transition: 1s ease-out;
	-o-transition: 1s ease-out;
	transition: 1s ease-out;
}

.boton {
    padding: 10px 15px;
    margin: 5px;
    min-width: 25%;
    display:inline-block;
    background: black;
    color: white;
    text-decoration:none;
    transition:all .3s;
    opacity: 1;
    font-size: 2em;
    padding-top: 12.5px;
}
.boton:hover{
    background: white;
    color: black;
    /* transition:all .5s; */
    -webkit-transition: .5s ease-out;
	-moz-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}

#first .hide {
    display: none;
    /*
    opacity: 0.1;
    pointer-events: none;
    */
}

#allwork {
	position: relative;
	width: 100;
}

.parent {
    width: 100%;
    position: relative;
    z-index: 1;
    /* height: 60%; */
    display: table;
    text-align: center;
    background: rgba(79,79,79,1);
	background: -moz-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(79,79,79,1)), color-stop(0%, rgba(105,105,105,1)), color-stop(12%, rgba(125,114,125,1)), color-stop(100%, rgba(43,43,43,1)));
    background: -webkit-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -o-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: -ms-linear-gradient(left, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    background: linear-gradient(to right, rgba(79,79,79,1) 0%, rgba(105,105,105,1) 0%, rgba(125,114,125,1) 12%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=1 );
}

.child {
	float: left;
	position: relative;
	width: 50%;
}

.child:nth-child(2n+1) {
	/* clear: left; esto lo he quitado por los filters */
}

.child .content-wrapper {
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none; /* no sonidos varios proyectos */
}

.child .content-wrapper .logos {
	margin: 0 0 15px 0;
	width: 90%;
}

.child p{
	font-family: AvantGardeBold; font-size: 28px; line-height: 36px;
}

.campaign {background: url("../work/campaign/campaign-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.elarco {background: url("../work/elarco/elarco-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.mariano {background: url("../work/mariano/mariano-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.designdoes {background: url("../work/designdoes/designdoes-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.arkasha {background: url("../work/arkasha/arkasha-00.html") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.morabanc {background: url("../work/morabanc/morabanc-00.html") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.dadadada {background: url("../work/dadadada/dadadada-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.awwwful {background: url("../work/awwwful/awwwful-00.html") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.undiestick {background: url("../work/undiestick/undiestick-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.beefeater {background: url("../work/beefeater/app-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.smallfilms {background: url("../work/smallfilms/smallfilms-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.dictionary {background: url("../work/dictionary/dictionary-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.kiwibravo {background: url("../work/kiwibravo/kiwibravo-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.usgame {background: url("../work/usgame/usgame-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.lazyeyes {background: url("../work/lazyeyes/lazyeyes-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.jenlu {background: url("../work/jenlu/jenlu-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.codea {background: url("../work/codea/codea-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.mwb {background: url("../work/mwb/mwb-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.mwb2 {background: url("../work/mwb2/mwb2-00.html") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.chatwork {background: url("../work/chatwork/chatwork-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.limon {background: url("../work/limon/smash-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.bustom {background: url("../work/bustom/bustom-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.usbarcelona {background: url("../work/usbarcelona/usbarcelona-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.cookies {background: url("../work/cookies/cookies-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.lengua {background: url("../work/lengua/lengua-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.atelier {background: url("../work/atelier/atelier-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.palu {background: url("../work/palu/palu-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.aro {background: url("../work/aro/aro-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.xmas {background: url("../work/xmas/xmas-05.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.axpe {background: url("../work/axpe/axpe-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.axpe2 {background: url("../work/axpe2/axpe-01.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.fsf {background: url("../work/fsf/fsf-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.madrugon {background: url("../work/madrugon/madrugon-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.feel {background: url("../work/feel/feel-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.stilavia {background: url("../work/stilavia/stilavia-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.sag {background: url("../work/sag/sag-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.elrow {background: url("../work/elrow/elrow-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.fiu {background: url("../work/fiu/fiu-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.tinder {background: url("../work/tinder/tinder-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.bleep {background: url("../work/bleep/bleep-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.ttt {background: url("../work/ttt/ttt-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.despidos {background: url("../work/despidos/despidos-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.guzzo {background: url("../work/guzzo/guzzo-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.espaiborn {background: url("../work/espai/espai-01.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.laus {background: url("../work/laus/laus-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }

.none {background: black no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }

/* NOOOOO */
.hatsu {background: url("../work/hatsu/hatsu-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.selfie {background: url("../work/selfie/selfie-00.html") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.daffy {background: url("../work/daffy/daffy-00.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }

.holanda {background: url("../work/office/holanda.gif") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.barcelona {background: url("../work/office/barcelona.jpg") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }

.articulo1 {background: url("../shop/articulo1.png") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.articulo2 {background: url("../shop/articulo2.png") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }
.articulo3 {background: url("../shop/articulo3.png") no-repeat; max-width: 100%; cursor: url('../images/iconos/white70/white-%2b.png') 40 40, auto; }

.miniatura {
	font-size: 3px;
}

.atelierboton {
	background: url("../work/atelier/randombanner.jpg");
}

.atelierboton img {
	margin-left: 35%;
	width: 30%;
	margin-top: 7.5%;
	margin-bottom: 7.5%;
}   

.project { 
	background-position: 50%; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
	height: 500px;
}

.project:hover { 
	background:transparent;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
}

.project:hover p {
	transform: scale(1);
    transition: all .35s linear;
    z-index: 3;
    filter: alpha(opacity=100);
	opacity: 1;
	/* text-shadow: 2px 2px 2px #000; */
}

.project p {  
	pointer-events: none; /* no sonidos varios proyectos */
	transform: scale(.9);
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
}

.shop { 
	background-position: 50%; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
	height: 400px;
}

.shop:hover { 
	background:transparent;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
}

.shop:hover p {
	transform: scale(1);
    transition: all .35s linear;
    z-index: 3;
    filter: alpha(opacity=100);
	opacity: 1;
	/* text-shadow: 2px 2px 2px #000; */
}

.shop p {  
	pointer-events: none; /* no sonidos varios proyectos */
	transform: scale(.9);
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
}

.logos {
	opacity: 1;
	width: 50%;
}

/*********  Browser & Shadow  **********/

.closelaweb {
	display: none;
}

#laweb {
    background-color: rgba(0, 204, 204, 1);
    height: 800px;
    position: relative;
    width: 100%;
    cursor: url('../images/iconos/white/white-zoom2.png') 40 40, auto;
	filter: alpha(opacity=70);
    opacity: 0.7;
}

#laweb:hover {
	filter: alpha(opacity=100);
    opacity: 1;
}

.lawebeefeater {
	cursor: url('../images/iconos/white/white-default.png') 0 0, auto !important;
	background-image: url("../work/beefeater/desktop.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.lawebdefault {
	cursor: url('../images/iconos/white/white-default.png') 0 0, auto !important;
}

#laweb.changeCursor {
    cursor: url('../images/iconos/white/white-zoom.png') 40 40, auto;
}

.webfondo {
	position: relative;
	width: 100%;
	height: 101%;
	left: -2px;
	float: left;
	z-index: 1;
}

iframe {
	border-width: 0px;
}

.webkiwi {
	position: relative;
	width: 100%;
	height: 101%;
	left: -2px;
	float: left;
	z-index: 1;
}

.sacabg {
	background-color: rgba(255, 89, 95, 1) !important;
}

.kiwibg {
	background-color: rgba(235, 185, 38, 1) !important;
}

.marianobg {
	background-color: rgba(235, 185, 38, 1) !important;
    cursor: url('../images/iconos/white/white-default.png') 0 0, auto !important;
}

.smallfilmsbg {
	background-color: #005296 !important;
} 

.designdoesbg {
	background-color: #ccc !important;
} 

.iconomobile {
    height: auto;
    position: absolute;
    right: 4%;
    text-align: center;
    width: 100px;
    top: 0;
    margin-top: 16.5%; /*11.5*/
    cursor: url('../images/iconos/white/white-default.png') 0 0, auto;
    z-index: 10;
    
}

.iconodesktop {
    height: auto;
    position: absolute;
    right: 4%;
    text-align: center;
    width: 100px;
    top:0;
    margin-top: 16.5%;
    cursor: url('../images/iconos/white/white-default.png') 0 0, auto;
    z-index: 10;
    display: none;
}

.iconolink {
    height: auto;
    position: absolute;
    right: 4%;
    text-align: center;
    width: 100px;
    top:0;
    margin-top: 9%;
    cursor: url('../images/iconos/white/white-default.png') 0 0, auto;
    z-index: 10;
}

.iconodown {
    height: auto;
    position: absolute;
    right: 4%;
    text-align: center;
    width: 100px;
    top:0;
    margin-top: 24%;
    cursor: url('../images/iconos/white/white-default.png') 0 0, auto;
    z-index: 10;
}

.iconoclose {
    height: auto;
    position: absolute;
    right: 5%;
    text-align: center;
    width: 100px;
    top:0;
    margin-top: 9%;
    cursor: url('../images/iconos/white/white-x.png') 40 40, auto;
    z-index: 10;
}

.ocultaricono {
	display: none;
}

.mostraricono {
	display: inline;
}

.web {
	height: 90%;
	margin-left: 5%;
	margin-right: 5%; 
	margin-top: 4.2%;
	width: 90%;
	box-shadow: 0 0 36px rgba(0, 0, 0, 0.8);
	background-color: rgba(255, 255, 255, 1);
	transform:scale(0.8,0.8); 
}

.webfull {
    width: 100%;
    height: 100%;
}

.mobile {
	width: 450px;
	margin: 0 auto;
	height: 100%;
	transform:scale(0.8,0.8); 
	position: absolute;
	left: 50%;
	margin-left: -225px;
}

.web2 {
    height: 50%;
    width: 50%;
    background-color: rgba(255, 255, 255, 1);
    float: left;
}

.navegador {
    /*height: 70%;*/
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 6.5%;
    position: absolute;
    width: 90%;
    z-index: 1;
    display: none;
    transform: scale(0.8,0.8);
}

.navegadormobile {
    width: 32.5%;
    margin-left: 33.75%;
    margin-right: 33.75%;
    margin-top: 6.5%;
    opacity: 0.5;
    z-index: 0;	
	transform:scale(0.8,0.8);

}

.navegador img {
	width: 100%;
	/* cursor: url('../images/iconos/pink/pink-mobile.png') 40 40, auto; */
	box-shadow: 0 0 36px rgba(0, 0, 0, 0.8);
}

.frameborder { 
    border:none;
    overflow:hidden;
    -webkit-filter: grayscale(.3);
 	 filter: grayscale(.3);
}

.frameborder:hover { 
    -webkit-filter: grayscale(0);
  	filter: grayscale(0);
}

.vimeo-wrapper {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* pointer-events: none; */
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.vimeo-dd {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.vimeo-dd iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: url('../images/iconos/white70/white-play.html') 40 40, auto !important;
}

/*================================================

Projects / Sections

================================================*/

.pattern-overlay {
	overflow-y: hidden!important;
}

/* 404 */

#e404 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top:0;
	z-index: 1000;
	/* background: url('../images/achos-01.jpg') 50% 50% no-repeat black;
	background-color: rgba(0,204,204,0.9);} */
}

/* ABOUT */

.imgabout {width: 100%; cursor: none;}
.nave {width: 100%; position: absolute; top: 0; z-index: 1; cursor: none;}
.nave img {opacity: 0}
.outrun {cursor: none; z-index: 2;}

/* ESPAI */

canvas {
  display: block;
}

#canv {
width: 100%;
position: relative;
height: 500px;
}

/* XMAS nieve */

#xmas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.xmasimg {
	z-index: 2;
	position: relative;
}

/* START */

.start {
	background: white;
}

.startz {
	/* to not paint the images */
	z-index: 1;
	position: relative;
}

.content-23 {
  cursor:none;
  position: relative;
  height: 800px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white;
}
.content-23.v-center,
.content-23 .v-center {
  display: table;
  width: 100%;
}

.content-23.custom-bg {
  background-image: url("../work/chillout/miles.png");
  z-index:1;
  /*
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  */
}

/* fin start */ 

/*================================================

Score - Error 404

================================================*/

.stage {
  bottom: 0;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000000000;
}

.score {
	display: none;
}

@media(max-width:1000px){ 

	#galleta {
		display: none;
	}

	.contact, .follow {
		width: 100%;
		text-align: center;
	}

	.titulo {
		position: relative;
		left: 0;
		width: auto;
	    padding-bottom: 10px;
	}

	.title {
		position: relative;
		left: 0;
		width: auto;
	    padding-bottom: 10px;
	}

	#headlineContentContainer {
		margin-right: 70px; 
		margin-left: 70px; 
	}

	#logo0, #footerText, h3 #footerText {
    	margin-left: 70px;
    }

    .projectHeadlineText {
    	margin-left: 70px;
	}

	#text, .text, #text0, #text1, #text2, #text3, #text3b, #text3c, #text4, #test5 {
		padding-right: 70px; 
		padding-left: 70px; 
	}

	#logoindex {
    	margin-right: 70px;
	}

    .child {
		width: 100%;
		height: 600px; 
	}

	.child p{
		font-family: AvantGardeBold; font-size: 48px; line-height: 120%}

	.parent {
    	width: 100%;
    	height: 40%;}

    h1 {
	   	font-size: 28px;
	    line-height: 40px;
	    letter-spacing: 0px;
    }

    #text0 img {
		width: 20%;
	} 
  
}

@media(max-width:600px){ 

	#sonidochrome {
		/* display: none !important; */
	}

	h1 {
	   	font-size: 22px;
	    line-height: 42px;
	    letter-spacing: 0px;
    }

    h2 {
    	font-size: 22px;	
    }

    h3 {
    	font-size: 22px;	
    }

    p {
	   	font-size: 22px;
	    line-height: 32px;
	    letter-spacing: 0px;
    }

    #logo0 h2 {
    	line-height: 100px;
    }

    #headlineContentContainer {
    	margin-left: 50px;
    	margin-right: 50px;}

    #logo0, #footerText, h3 #footerText {
    	margin-left: 50px;
    }

    .projectHeadlineText {
    	margin-left: 50px;
    }

    #logoindex {
    	margin-right: 50px;
    }

    #text, .text, #text0, #text1, #text2, #text3, #text3b, #text3c, #text4, #test5 {
		padding-right: 50px; 
		padding-left: 50px; 
	}

	.usvideo {
	width: 100%;
	float: left;
}

}

@media screen and (max-width: 480px){
    /* Todo el CSS para iPhone va aqui */

    #sonidochrome {
		/* display: none !important; */
	}

	#text6 {
		padding-right: 10%; 
		padding-left: 10%; 
	}

	h2 {font-size: 24px;line-height:34px;}

    #testimonios {
	    height: 1300px;
	}

    .jtextfill {width: 85vw; height: 60vh; }

    .projectContainerHeadline { position: relative !important;}

	.projectImage{position:relative; width: 100%; height: 800px; float: left; background-color: black; z-index: 0 !important;}

	 /*

	 #projectDesigndoes{background: url('../work/designdoes/designdoes-00.jpg'); background-position: center !important}
	 #projectSmallfilms{background: url('../work/smallfilms/smallfilms-00.jpg'); background-position: center !important}
	 #projectKiwibravo{background: url('../work/kiwibravo/kiwibravo-00.jpg'); background-position: center !important}
	 #projectBeefeater{background: url('../work/beefeater/app-00.jpg'); background-position: center !important}
	 #projectDictionary{background: url('../work/dictionary/dictionary-00.jpg'); background-position: center !important}
	 #projectLazyeyes{background: url('../work/lazyeyes/lazyeyes-00.jpg'); background-position: center !important}
	 #projectLimon{background: url('../work/limon/smash-00.jpg'); background-position: center !important}
	 #projectBustom{background: url('../work/bustom/bustom-00.jpg'); background-position: center !important}
	 #projectLengua{background: url('../work/lengua/lengua-00.jpg'); background-position: center !important}
	 #projectFeel{background: url('../work/feel/feel-00.jpg'); background-position: center !important}
	 #projectSag{background: url('../work/sag/sag-00.jpg'); background-position: center !important}
	 #projectTings{background: url('../work/ttt/ttt-00.jpg'); background-position: center !important}
	 #projectGuzzo{background: url('../work/guzzo/guzzo-00.jpg'); background-position: center !important}
	 #projectLaus{background: url('../work/laus/laus-00.jpg'); background-position: center !important}

	 */

    .texto {font-size: 26px;line-height:38px;}

    .projectHeadlineText{height: 160px;}
    .projectHeadlineText h1,
    .projectHeadlineText h2 {font-size: 24px;line-height:34px;}
    h3 {font-size: 24px;line-height:34px;}
    p {font-size: 24px;line-height:34px;}

    #footerArrow{float: right; padding-right: 100px; margin-top: 10px}

	#headlineContentContainer{margin-left: 50px; margin-right: 50px;}
	#logo0 {margin-left: 50px; margin-top: 25px; }
	.projectHeadlineText{margin-left: 50px;}

	#text1, #text2, #text3, #text3b, #text3c, #text4, #test5 {
		padding-right: 50px; 
		padding-left: 50px; 
	}

	#stage {
		display: none;
	}

	#text0 img {
	width: 20%;
	} 

	.work2, .work3, .work3b {
		width: 100%;
	}

	.parent {
	    width: 100%;
	    height: 30%;
	    display: table;
	    text-align: center;
	}

	.project { 
		filter: alpha(opacity=100);
		opacity: 1; 
	}

	.project p { 
		filter: alpha(opacity=100);
		opacity: 0;  /* antes 1 */
	}

	.project:hover p { 
		filter: alpha(opacity=100);
		opacity: 1 !important;  /* antes 1 */
	}

	.projectContainerHead {
		/* position: fixed !important; */
		opacity: 1 !important;
	}

	.titulo {
		position: relative;
		left: 0;
		width: auto;
	    padding-bottom: 10px;
	}

	.title {
		position: relative;
		left: 0;
		width: auto;
	    padding-bottom: 10px;
	}

	.show-worktwo img {
		filter: alpha(opacity=100);
	        opacity: 1;
	}

	.show-work img {
		filter: alpha(opacity=100);
	        opacity: 1;
	}

	a img {
		filter: alpha(opacity=100);
	        opacity: 1;
	}   

	.box2d {
		min-width: 10%;
		height: 70px;
		padding-bottom: 50px;
	}

	.iphone {
		display:inline; 
	}

	.iphonemusic {
		display:inline;
		-webkit-user-select: none;
		 -khtml-user-select: none;
		 -moz-user-select: none;
		 -o-user-select: none;
		 -ms-user-select: none;
		 user-select: none; 
	}

	.macmusic {
		display: none;
	}
		
	#text {
		padding-right: 50px; 
		padding-left: 50px; 
		margin-top: 200px;
		margin-bottom:40px;
	}

	.icon{float: right; display: block; margin-right:0px; z-index: 980; cursor: pointer; padding-right: 5px;}

	#unoauno {
	    width: 100%;
	}

	.webfondo {
		display: none;
	}

	.boton a{
        padding: 30px;
        margin: 5px;
        min-width: 25%;
    }

    .bottomcero {
        bottom: 0;
        background-color: white;
    }

    .botonfilter {
	    height: 80px;
	    padding-top: 45px;
	}
}

/* Portrait and Landscape */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

.jtextfill {width: 85vw; height: 85vh; }

.iphone {
	display:inline; 
}

.iphonemusic {
	display:inline; 
}

.macmusic {
	display: none;
}

#text1 {
	padding-right: 100px; 
	padding-left: 100px; 
}

#text3, #text3b, #text3c {
	padding-right: 100px; 
	padding-left: 100px; 
}

.titulo {
	position: relative;
	left: 0;
	width: auto;
    padding-bottom: 10px;
}

.title {
	position: relative;
	left: 0;
	width: auto;
    padding-bottom: 10px;
}

.show-worktwo img {
	filter: alpha(opacity=100);
        opacity: 1;
}

.show-work img {
	filter: alpha(opacity=100);
        opacity: 1;
}

a img {
	filter: alpha(opacity=100);
        opacity: 1;
}

.parent {
    width: 100%;
    height: 30%;
    display: table;
    text-align: center;
}

.project { 
	filter: alpha(opacity=100);
	opacity: 1; 
}

.project p { 
	filter: alpha(opacity=100);
	opacity: 1; 
}

}

#videoContent {
	display: none;
}

/** BEGIN CSS **/

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
.loading-container,
.loading {
    height: 200px;
    position: relative;
    width: 200px;
    border-radius: 100%;
}


.loading-container { margin: 20px auto }

.loading {
    border: 20px solid transparent;
    margin-left: -20px;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    /*border-color: transparent rgba(255,113,176,1) transparent rgba(0,255,255,1);*/
    -moz-animation: rotate-loading .3s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading .3s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading .3s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading .3s linear 0s infinite normal;
    transform-origin: 50% 50%;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#loading-text {
    -moz-animation: loading-text-opacity 1.5s linear 0s infinite normal;
    -o-animation: loading-text-opacity 1.5s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 1.5s linear 0s infinite normal;
    animation: loading-text-opacity 1.5s linear 0s infinite normal;
    color: #ffffff;
    font-family: AvantGardeBold;
    font-size: 150px;
    margin-top: 40px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 200px;
}

#loading-text:hover {
	-moz-animation: loading-text-opacity .5s linear 0s infinite normal;
    -o-animation: loading-text-opacity .5s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity .5s linear 0s infinite normal;
    animation: loading-text-opacity .5s linear 0s infinite normal;
    /*color: black;*/
}

/* iPhone 6 in portrait & landscape */
@media only screen 
and (min-width : 375px) 
and (max-width : 667px) {
	.child {
		width: 100%;
		height: 600px; }
	.project p {  
		opacity: 1; }

	#text6 {
	padding-right: 10%; 
	padding-left: 10%; 
	}

	h2 {font-size: 24px;line-height:34px;}
}

/* iPhone 6 Plus in portrait & landscape */
@media only screen 
and (min-width : 414px) 
and (max-width : 736px) {
	.child {
		width: 100%; }

}

/* iPhone 5 & 5S in portrait & landscape */
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
	.child {
		width: 100%; }

}
/* ==========================================================================
   Paslaugu kvadratai tituliniame (.text)
   Fonas cia sviesiai pilkas, todel tekstas tamsus, o kvadratai uzpildyti spalva.
   ========================================================================== */
.text .lead {
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.35rem;
	line-height: 2.1rem;
	max-width: 52ch;
	margin: 0 0 38px;
	color: #111;
}

.services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
	margin-bottom: 60px;
}

/* Kvadratas - uzpildytas spalva (toks, koks anksciau buvo tik uzvedus pele) */
.service {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 26px;
	border: 2px solid currentColor;
	background: currentColor;
	transition: background-color .2s ease, transform .2s ease;
}

.service h3 {
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.9rem;
	line-height: 2.2rem;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0;
	color: #111;
}

.service p {
	font-family: AvantGardeNormal, sans-serif;
	font-size: 1.05rem;
	line-height: 1.7rem;
	margin: 0;
	color: #111;
	opacity: .8;
}

/* Spalvos is svetaines paletes */
.s-pink   { color: rgba(255,113,176,1); }
.s-blue   { color: rgba(0,255,255,1); }
.s-green  { color: rgba(65,250,112,1); }
.s-yellow { color: rgba(255,243,109,1); }

/* Uzvedus - kvadratas issitustina, lieka tik spalvotas remelis ir tekstas */
.service:hover {
	background: transparent;
	transform: translateY(-4px);
}

.service:hover h3 { color: inherit; }
.service:hover p  { color: inherit; opacity: .9; }

/* Kvietimas susisiekti */
.cta {
	border: 2px solid rgba(255,113,176,1);
	background: rgba(255,113,176,1);
	padding: 34px 30px;
}

.cta h2 {
	font-family: AvantGardeBold, sans-serif;
	font-size: 2.2rem;
	line-height: 2.6rem;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #111;
}

.cta p {
	font-size: 1.15rem;
	line-height: 1.9rem;
	margin: 0;
	color: #111;
	opacity: .85;
}

.cta-links {
	margin-top: 18px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	opacity: 1 !important;
}

.cta-links a {
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.2rem;
	color: #111;
	border-bottom: 2px solid #111;
	padding-bottom: 3px;
	text-decoration: none;
}

.cta-links a:hover { opacity: .6; }

@media screen and (max-width: 1000px) {
	.text .lead { font-size: 1.2rem; line-height: 1.9rem; max-width: none; margin-bottom: 30px; }
	.services { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 40px; }
	.service { padding: 20px; }
	.service h3 { font-size: 1.5rem; line-height: 1.8rem; }
	.service p { font-size: .95rem; line-height: 1.5rem; }
	.cta { padding: 26px 22px; }
	.cta h2 { font-size: 1.8rem; line-height: 2.1rem; }
}

@media screen and (max-width: 480px) {
	.services { grid-template-columns: 1fr; }
	.service { aspect-ratio: auto; min-height: 180px; }
}

/* ==========================================================================
   Kontaktu video (#project1) su uzdetais kontaktais
   ========================================================================== */
.videoproject {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	background: #111;
}

video.imgproject {
	display: block;
	width: 100%;
	/* Vienodas aukstis abiem video blokams. Keisk tik si skaiciu. */
	height: 70vh;
	margin-bottom: -6.5px;
	object-fit: cover;
}

/* Kontaktai ant video */
.video-contacts {
	position: absolute;
	left: 100px;
	bottom: 70px;
	max-width: calc(100% - 200px);
	box-sizing: border-box;
	z-index: 5;
	line-height: 1.4;
	padding: 26px 30px;
	border: 2px solid rgba(255,113,176,1);
	background: rgba(17,17,17,.55);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
}

.video-contacts h2 {
	font-family: AvantGardeBold, sans-serif;
	font-size: 2.2rem;
	line-height: 2.6rem;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: #fff;
}

.video-contacts p {
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.3rem;
	line-height: 2.6rem;
	margin: 0;
}

.video-contacts .icono {
	width: 20px;
	height: auto;
	margin-right: 10px;
	vertical-align: middle;
}

@media screen and (max-width: 1000px) {
	video.imgproject { height: 55vh; }
	.video-contacts {
		left: 20px;
		right: 20px;
		bottom: 20px;
		max-width: none;
		padding: 18px 20px;
	}
	.video-contacts h2 { font-size: 1.6rem; line-height: 2rem; margin-bottom: 8px; }
	.video-contacts p  { font-size: 1rem;   line-height: 2.1rem; }
	.video-contacts .icono { width: 16px; margin-right: 7px; }
}

/* ==========================================================================
   Video kaip viso kontaktu bloko fonas, kontaktai virsuje
   ========================================================================== */
#info {
	position: relative;
	overflow: hidden;
	min-height: 70vh;   /* toks pat aukstis kaip #project1 video */
	display: flex;
	align-items: center;
}

#infoVideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Tamsinimas - be jo smulkus tekstas ant ryskaus video butu neiskaitomas */
#info::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 1;
	pointer-events: none;
}

/* Kontaktai - virs video ir virs tamsinimo */
#info #text4 {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;   /* be sito 100px padding'ai prideda 200px per plotį */
}

#info #text4 h4,
#info #text4 p,
#info .follow h2,
#info .claim {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

/* Sviesesnis pilkas tekstas, kad ant video matytusi */
#info .dark { color: #ccc; }
#info .macmusic { color: #eee; }

@media screen and (max-width: 1000px) {
	#info { min-height: 55vh; padding-top: 30px; padding-bottom: 30px; }
	video.imgproject { height: 55vh; }
}

/* ==========================================================================
   Ikonos ant "responsive" remelio (#laweb) - paspaudimo zona
   ========================================================================== */
#laweb > a {
	display: block;
	position: static;
}

#laweb .iconodown,
#laweb .iconolink,
#laweb .iconomobile,
#laweb .iconodesktop {
	z-index: 20;   /* virs iframe ir .navegador */
}

/* ==========================================================================
   Tie patys kvadratai ant TAMSAUS fono (my_space)
   Fonas juodas, todel antraste ir ivadinis tekstas turi buti sviesus.
   Patys kvadratai lieka tokie pat - uzpildyti spalva su tamsiu tekstu.
   ========================================================================== */
.text.dark-bg {
	padding-top: 18px;
	padding-bottom: 50px;
}

.text.dark-bg .section-title {
	font-family: AvantGardeBold, sans-serif;
	font-size: 2.4rem;
	line-height: 2.8rem;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0 0 22px;
	color: #fff;
}

.text.dark-bg .lead {
	color: #ddd;
}

/* Mazesni kvadratai.
   Anksciau stulpelis buvo 1fr, todel platus ekrane kvadratas isteges iki
   ~600 px plocio, o aspect-ratio 1/1 padarydavo ji tokio pat aukscio.
   Dabar plotis apribotas, o aukstis fiksuotas - kortelės nebeissipucia. */
.text.dark-bg .services {
	grid-template-columns: repeat(auto-fit, minmax(190px, 300px));
	justify-content: start;
	gap: 18px;
	margin-bottom: 40px;
}

.text.dark-bg .service {
	aspect-ratio: auto;
	min-height: 215px;
	padding: 20px;
}

.text.dark-bg .service h3 {
	font-size: 1.4rem;
	line-height: 1.7rem;
}

.text.dark-bg .service p {
	font-size: .92rem;
	line-height: 1.45rem;
}

.text.dark-bg .cta { padding: 24px 24px; max-width: 1254px; }
.text.dark-bg .cta h2 { font-size: 1.8rem; line-height: 2.1rem; }
.text.dark-bg .cta p  { font-size: 1.05rem; line-height: 1.7rem; }

@media screen and (max-width: 1000px) {
	.text.dark-bg { padding-top: 14px; padding-bottom: 34px; }
	.text.dark-bg .section-title { font-size: 1.8rem; line-height: 2.1rem; margin-bottom: 24px; }
	.text.dark-bg .services { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
	.text.dark-bg .service { min-height: 180px; }
	.text.dark-bg .service { padding: 16px; }
	.text.dark-bg .service h3 { font-size: 1.2rem; line-height: 1.45rem; }
	.text.dark-bg .service p { font-size: .85rem; line-height: 1.35rem; }
}

/* Antraste ant video (my_space hero) */
#headlineContainer.videoproject .video-contacts h1.page-title {
	display: block;
	font-family: AvantGardeBold, sans-serif;
	font-size: 2.2rem;
	line-height: 2.6rem;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: #fff;
}

#headlineContainer.videoproject .video-contacts p {
	font-family: AvantGardeNormal, sans-serif;
	font-size: 1.15rem;
	line-height: 1.7rem;
	margin: 0;
	color: rgba(255,255,255,.9);
}

@media screen and (max-width: 1000px) {
	#headlineContainer.videoproject .video-contacts h1.page-title { font-size: 1.5rem; line-height: 1.8rem; }
	#headlineContainer.videoproject .video-contacts p { font-size: .95rem; line-height: 1.4rem; }
}

/* ==========================================================================
   my_space hero video - rodomas VISAS kadras, ne apkarpytas
   (bendra .imgproject taisykle turi height:70vh + object-fit:cover,
    todel video buvo nukerpamas is virsaus ir apacios)
   ========================================================================== */
video.hero-video {
	width: 100%;
	height: 600px;
	object-fit: cover;
	object-position: center 35%;   /* rodo vidurine-virsutine kadro dali */
	background: #000;
}

/* Uzrasas ant video - arciau kampo, kad neuzdengtu kadro vidurio */
#headlineContainer.videoproject .video-contacts {
	left: 40px;
	bottom: 40px;
	max-width: calc(100% - 80px);
}

@media screen and (max-width: 1000px) {
	video.hero-video { height: 380px; }
	#headlineContainer.videoproject .video-contacts {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
		padding: 14px 16px;
	}
}

@media screen and (max-width: 600px) {
	video.hero-video { height: 280px; }
}


/* ==========================================================================
   PATAISYMAI  (2026-08)
   Dedama gale, kad perrasytu ankstesnes taisykles. Nieko netrinta.
   ========================================================================== */

/* Paveiksleliu iskraipymas.
   HTML atributai width="1500" height="1500" nustato aukscio, o CSS keicia
   tik ploti. Del to naršykle tempia vaizda. height:auto grazina proporcijas. */
.imgproject,
.imgprojecthome,
.imgprojectnoopacity,
.work2,
.work3,
.work3b,
.work-main {
	height: auto;
}

/* Porastes rodykle: 27x54 failas buvo tempiamas iki 127x54 */
#footerArrow {
	width: auto;
	height: 54px;
	object-fit: contain;
}

/* Gerbiam sistemos nustatyma del animaciju */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   PUSLAPIU ANTRASTES — vienodos, kaip porastes juosta  (2026-08)
   Tekstas kaireje, AvantGardeBold, plona juosta minimaliais tarpais.
   margin-left NEnustatinejam - ji jau valdo esamos @media taisykles
   (100px -> 70px -> 50px siauresniuose ekranuose).
   ========================================================================== */

.projectHeadlineText{
	height: auto;
	/* Nesimetriskas padding YRA tycinis. Geometriskai 16/16 atrodo
	   nelygiai: h1 line-height palieka ~5px "oro" virs raidziu, o apacioje
	   ta pati vieta uzpildo nusileidziancios raides (u, e, g). Todel
	   virsuje mazinam, apacioje didinam - taip atrodo tolygiai. */
	padding: 12px 40px 18px 0;
	text-align: left;
}

/* Pagrindine antraste */
.projectHeadlineText h1,
.projectHeadlineText h1.page-title{
	display: block;
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.5rem;
	line-height: 1.8rem;
	letter-spacing: 0;
	font-weight: normal;
	color: #fff;
	padding-top: 0;
	margin: 0;
}

/* Virsutine eilute (garso gimikas apie.html ir index.html) */
.projectHeadlineText h2{
	font-family: AvantGardeBold, sans-serif;
	font-size: 1.1rem;
	line-height: 1.6rem;
	color: rgba(235,235,235,.5);
	padding-top: 0;
	margin: 0 0 4px;
	max-width: 70ch;        /* be sito ilga eilute tesiasi per visa 1910px */
}

/* Paantraste */
.projectHeadlineText h3{
	font-family: AvantGardeNormal, sans-serif;
	font-size: 1.15rem;
	line-height: 1.5rem;
	color: rgba(235,235,235,.75);
	margin: 4px 0 0;
}

@media (max-width: 680px){
	.projectHeadlineText{padding: 9px 20px 14px 0}
	.projectHeadlineText h1,
	.projectHeadlineText h1.page-title{font-size: 1.25rem; line-height: 1.7rem}
	.projectHeadlineText h2{font-size: .95rem; line-height: 1.4rem}
	.projectHeadlineText h3{font-size: 1rem; line-height: 1.5rem}
}

/* Susipazinkime blokas: keli trumpi paragrafai vietoj vienos sienos */
#text1 p + p { margin-top: 22px; }

/* Porastes juosta paverciama tikra nuoroda.
   Anksciau ji kviete "Spausk cia...", bet niekur nebuvo <a> - paspaudus
   nieko nevykdavo ne viename puslapyje. */
.footer-link{
	display: block;
	text-decoration: none;
	color: inherit;
}
.footer-link:focus-visible{
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* ==========================================================================
   VIDEO PALYGINIMO BLOKAS (index.html)
   .mp4 nuimti, liko tik poster kadrai play1.jpg / play2.jpg.
   Elementai vis tiek renderinami 1920x1080, o konteineris tik 855px -
   be overflow:hidden jie islistu po 110px i virsu ir apacia, o virsutinis
   krastas patektu i kubo bloka. isolation uzdaro z-index:3 viduje.
   ========================================================================== */
#video-compare-container,
.video-wrap{
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Kubas turi likti virs bet ko, kas ateina po jo */
#cube-wrapper{
	position: relative;
	z-index: 5;
}

/* ==========================================================================
   KUBO PUSIU MYGTUKAI  (2026-08)
   Buvo: viena zalia #3aaa8f, DrukMedium, tamsiai zalias -webkit-text-stroke
   ir trisluoksnis baltas text-shadow. Dabar - svarus tekstas korteliu
   paletes spalvomis ir tuo paciu sriftu kaip .service h3.
   Selektoriai su id (2,0,0) stipresni uz inline #cube-wrapper label (1,0,1),
   todel index.html <style> bloko liesti nereikia.
   ========================================================================== */

#cube-wrapper .radio-group label{
	font-family: AvantGardeBold, sans-serif;  /* buvo DrukMedium */
	letter-spacing: -1px;
	-webkit-text-stroke: 0;                   /* storas apvadas nuimtas */
	text-shadow: 1px 1px 0 rgba(255,255,255,.85);  /* plona balta linija */
	opacity: .75;
	transition: opacity .2s ease;
}

#cube-wrapper .radio-group label:hover,
#cube-wrapper .radio-group label:has(input:checked){
	opacity: 1;
	/* index.html <style> :hover taisykle deda juoda seseli is keturiu pusiu -
	   perrasom ta pacia plona balta linija, kad uzvedus niekas nesokteletu */
	text-shadow: 1px 1px 0 rgba(255,255,255,.85);
}

/* Spalvos - tos pacios kaip .s-pink / .s-blue / .s-green / .s-yellow */
#cube-wrapper #cube-front  { color: rgba(255,113,176,1); }
#cube-wrapper #cube-right  { color: rgba(0,255,255,1);   }
#cube-wrapper #cube-back   { color: rgba(65,250,112,1);  }
#cube-wrapper #cube-left   { color: rgba(255,243,109,1); }
#cube-wrapper #cube-top    { color: rgba(255,113,176,1); }
#cube-wrapper #cube-bottom { color: rgba(0,255,255,1);   }

/* apie.html #text3: keli trumpi paragrafai vietoj vienos sienos */
#text3 p + p { margin-top: 22px; }
#text3 .cta-links { margin-top: 28px; }


/* ==========================================================================
   KORTELES IR BLOKU TARPAI  (2026-08)
   1) .service turejo aspect-ratio: 1/1. Prie keturiu stulpeliu 1910px plotyje
      kvadratas isteges iki 410x410 - per aukstas. Fiksuojam min-height.
   2) .text turejo margin-top:180px, margin-bottom:20px. Del to bloko virsus
      ir apacia atrodo visiskai skirtingai. Suvienodinam.
   ========================================================================== */

#text, .text {
	margin-top: 70px;
	margin-bottom: 70px;
}

.service {
	aspect-ratio: auto;
	min-height: 230px;
}

.text.dark-bg .service {
	min-height: 200px;
}

@media (max-width: 900px) {
	#text, .text { margin-top: 48px; margin-bottom: 48px; }
	.service { min-height: 200px; }
}

@media (max-width: 600px) {
	#text, .text { margin-top: 34px; margin-bottom: 34px; }
	.service { min-height: 180px; }
}


/* ==========================================================================
   PUSLAPIAI BE HERO PAVEIKSLELIO  (2026-08)
   susisiekime.html neturi hero juostos, todel .projectContainerHead
   prasideda ties top:0 ir po juo atsiduria logotipas (#logo0 yra absolute,
   35px nuo virsaus, 100px auksto). Rezervuojam jam vieta.
   ========================================================================== */

.projectContainer.no-hero .projectContainerHead {
	padding-top: 150px;
}

@media (max-width: 900px) {
	.projectContainer.no-hero .projectContainerHead { padding-top: 120px; }
}

@media (max-width: 600px) {
	.projectContainer.no-hero .projectContainerHead { padding-top: 95px; }
}


/* ==========================================================================
   LOGOTIPAS TELEFONE  (2026-08)
   #logo0 yra 241x100px - telefone jis uzima trecdali ekrano plocio.
   Mazinam per transform, kad nereiketu liesti sriftu dydziu.
   ========================================================================== */

@media (max-width: 900px) {
	#logo0 {
		transform: scale(.72);
		transform-origin: left top;
	}
}

@media (max-width: 600px) {
	#logo0 {
		transform: scale(.55);
		transform-origin: left top;
	}
}

/* Telefone niekas neturi issikisti i sonus */
@media (max-width: 900px) {
	html, body { overflow-x: hidden; max-width: 100%; }
}


/* ==========================================================================
   PUSLAPIU PEREJIMO DANGA  (2026-08)
   animsition savo CSS fono spalvos nenustato - .animsition-overlay-slide
   buvo rgba(0,0,0,0), t.y. visiskai permatomas. Del to vietoj dangos
   matydavosi tik mirksnis tarp senojo ir naujojo puslapio.
   Spalva - svetaines rozine. Nori kitos? Keisk sia viena eilute.
   ========================================================================== */

/* Dangos spalva nebereikalinga - animsition isjungtas. */


/* ==========================================================================
   SVELNUS PEREJIMAS TARP PUSLAPIU  (2026-08)
   animsition isjungtas - jis perimdavo nuorodu paspaudimus ir palikdavo
   danga kabeti. Cia tas pats efektas grynu CSS: puslapiui uzsikrovus
   turinys svelniai isryskeja. Jokio JS, jokiu perimtu paspaudimu.
   ========================================================================== */

/* SVARBU: jokio transform. Transform ant body paverčia viduje esancius
   position:fixed elementus absoliuciais - del to #sonidochrome sluoksnis
   dengdavo tik viena ekrana, o ne visa puslapi. Animuojam tik opacity. */
@keyframes dw-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body.animsition {
	animation: dw-page-in .45s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	body.animsition { animation: none; }
}


/* ==========================================================================
   DRAMBLIO VIDEO JUOSTA (my_space.html)  2026-08
   Failas 2944x1248, santykis 2.36:1, krastai juodi. Todel object-fit:contain
   ant juodo fono - matomas visas kadras, o sonines juostos nesimato.
   ========================================================================== */

#dramblys {
	position: relative;
	width: 100%;
	aspect-ratio: 2944 / 1248;
	max-height: 700px;
	overflow: hidden;
	background: #000;
}

#dramblys video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 900px) {
	#dramblys { max-height: none; }
}


/* ==========================================================================
   PORTFOLIO HERO SU VIDEO (portfolio.html)  2026-08
   people.mp4 yra 2400x1600, santykis 3:2, o sena hero juosta buvo 4.18:1.
   Su cover butu matomas tik trecdalis kadro, todel juostai duodam paties
   video santyki ir ribojam auksti. Fonas #dad5cb sutampa su video krastais.
   Klase hero-people taikoma tik portfolio - kitu puslapiu hero nekeiciam.
   ========================================================================== */

#headlineContainer.hero-people {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 2400 / 1600;
	max-height: 620px;
	overflow: hidden;
	background: #dad5cb;
}

#headlineContainer.hero-people video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 900px) {
	#headlineContainer.hero-people { max-height: none; }
}


/* ==========================================================================
   VEIDAS SU JUDANCIOMIS AKIMIS (my_sound.html)  2026-08
   Sesi persidengiantys sluoksniai viename kvadrate. Akis judina JS per
   --x / --y kintamuosius, mirksejima - klase .blink.
   Paveiksleliai jau buvo svetaineje, img/ kataloge.
   ========================================================================== */

.face-hero {
	display: grid;
	place-items: center;
	/* Siaura juosta: veidas lieka 520px, bet konteineris ji apkerpa -
	   matosi tik vidurine dalis su akimis. place-items:center centruoja,
	   todel nukerpama po lygiai is virsaus ir apacios. */
	/* Maza erdve virs veido, apacioje siek tiek daugiau */
	padding: 6px 20px 14px;
	width: 100%;
	background: #000;
}

.dw-face {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Jokio apvalinimo - originale veidas kvadratinis, 800x800 */
	background: #fff;
	user-select: none;
}

.dw-face > span {
	position: absolute;
	inset: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	pointer-events: none;
}

.dw-face .balls { background-image: url(../../img/eye-balls.png); z-index: 1; }
.dw-face .holes { background-image: url(../../img/eye-holes.png); z-index: 2; }
.dw-face .lids  { background-image: url(../../img/eye-lids.png);  z-index: 3; opacity: 0; transition: opacity .12s; }
.dw-face .smile { background-image: url(../../img/smile.png);     z-index: 4; opacity: 0; transition: opacity .35s; }
.dw-face .brows { background-image: url(../../img/eye-brows.png); z-index: 5; }

.dw-face .balls {
	transform: translate(var(--x, 0px), var(--y, 0px));
	transition: transform .18s ease-out;
}

.dw-face.blink .lids { opacity: 1; }
.dw-face:hover .smile { opacity: 1; }

@media (max-width: 900px) {
	.face-hero { padding: 4px 16px 10px; }
	.dw-face { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	.dw-face .balls,
	.dw-face.blink .lids { transition: none; }
}

/* Tamsi tema be nauju failu: apverciam tik odos ir linijų sluoksnius.
   .balls paliekam natūralias - apvertus vyzdziai taptu sviesus, o
   baltymai tamsus, ir veidas atrodytu kaip negatyvas. */
.dw-face .holes,
.dw-face .lids,
.dw-face .brows,
.dw-face .smile {
	filter: invert(1);
}


/* Linijos ant veido isimtos 2026-08 */

.face-hero { position: relative; }


/* Muzikos sekcijos plocio apribojimas isimtas 2026-08 - grazinta originali busena */



/* Fiksuoto auksto juostoje place-items:center verčia elementa imti
   natūralu ploti - su width:100% jis susitraukdavo i nuli. Nurodom aiskiai. */
.face-hero .dw-face {
	width: 520px;
	max-width: 100%;
	flex: none;
}

@media (max-width: 900px) {
	.face-hero .dw-face { width: 320px; }
}


/* Veido juostos fiksavimas ir apkirpimas isimti 2026-08 */


/* Ziedu sprendimas isimtas 2026-08 - jis pakeisdavo nuorodas SVG tekstu
   ir del to nustodavo veikti muzika (76 nuorodos su data-sound). */


/* ==========================================================================
   TEKSTAS APLINK VEIDA (my_sound.html)  2026-08
   ring.js suskirsto vardus i tris dalis: virsus per visa ploti, vidurys
   dviem stulpeliais su veidu tarpe, apacia vel per visa ploti.
   Vardai lieka tos pacios nuorodos su data-sound - muzika veikia.
   ========================================================================== */

.sound-page #headlineContainer section.aplink-veida {
	max-width: min(2200px, 94vw);
	margin: 0 auto;
	/* Daugiau vietos apacioje - ilgesni pavadinimai laužiasi i dvi eilutes
	   ir blokas paauga. Be sio tarpo apacia nukertama. */
	padding: 24px 20px 110px;
}

.sound-page .aplink-veida a {
	font-size: 54px !important;
	line-height: 1.24 !important;
	color: rgba(235,235,235,.85) !important;
}

.sound-page .aplink-veida a:hover { color: rgba(255,113,176,1) !important; }

/* Vidurine dalis - du atskiri blokai, veidas tarp ju.
   Atskiri blokai (ne column-count) reikalingi tam, kad desiniaji
   butu galima lygiuoti i desine - CSS stulpeliams to padaryti negalima. */
.sound-page .av-vidurys {
	display: flex;
	/* Blokai lygiuojami i virsu, kad vardai abiejose pusese prasidetu
	   vienodame aukstyje. Veidas centruojamas atskirai per align-self. */
	align-items: flex-start;
	justify-content: center;
	gap: 60px;
	margin: 6px 0;
}

.sound-page .av-kaire,
.sound-page .av-desine {
	flex: 1 1 0;
	min-width: 0;
}

.sound-page .av-kaire { text-align: left; }
.sound-page .av-desine { text-align: right; }

.sound-page .av-desine a { margin-right: 0; margin-left: 20px; }

.sound-page .av-vidurys .dw-face {
	flex: 0 0 auto;
	align-self: center;
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: min(500px, 24vw);
	max-width: none;
	z-index: 2;
}

/* Virsutine ir apatine dalys - per visa ploti */
.sound-page .av-virsus,
.sound-page .av-apacia { column-count: 1; }

/* Vardai turi kvepuoti, bet neissikisti uz bloko */
.sound-page .aplink-veida a { margin-right: 20px; display: inline-block; }

/* Virsutine ir apatine juostos centruojamos - taip blokas atrodo vientisas */
.sound-page .av-virsus,
.sound-page .av-apacia { text-align: center; }
.sound-page .av-virsus { margin-bottom: 10px; }
.sound-page .av-apacia { margin-top: 10px; }