/*
 *   __           .__         
 * _/  |_ _______ |__|_____   
 * \   __\\_  __ \|  |\__  \  
 *  |  |   |  | \/|  | / __ \_
 *  |__|   |__|   |__|(____  /
 *
 * TRIA supports HTML5 boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Basic colors
   ========================================================================== 

	 TRIA: E74117



/*		
   ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
html, body { width:100%; height:100%; }

body {
	font-size: 1em;
	line-height: 1.4;
	
	/* Static scrollbar */
	overflow-y: scroll;
	overflow-x: hidden;

}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    text-shadow: none;
}

::selection {
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/*
 * Disable outline in browsers
 */
input:focus,
select:focus,
textarea:focus,
button:focus,
div:focus, a:focus, span:focus {
    outline: none !important;
		outline-width: 0 !important;
}
input.middle:focus {
    outline-width: 0;
		outline: none;
}

/* ==========================================================================
   Tria styles
   ========================================================================== */

.content { width:100%; height:100%; position:relative; overflow:hidden;  }
#loadingBar { display:block; overflow:hidden; position:fixed; width:100%; height:4px; background:#E74117; top:0; left:0; display:none; z-index:99999 !important; }

/* global styles */
.placeholder { visibility:hidden; }
.x1 .adaptive{ position: absolute; max-width:101%;	top: 6%;	left: 50%; margin:-40% 0 0 -50%;	border-radius: 0;  }
.x2 .adaptive{ position: absolute; max-width:101%;	top: 10%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
.x3 .adaptive{ position: absolute;	max-width: 101%; max-height:auto;	top: 50%;	left: 50%; margin:-35% 0 0 -50%;	border-radius: 0;  }
.x4 .adaptive{ position: absolute;	max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }

.x1 .slides.adaptive { position: absolute; max-width:110%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
.x1 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:110% ;	bottom: 0 ;	left: 0; margin:-75% 0 0 0;	border-radius: 0;  }
.x2 .slides.adaptive { position: absolute; max-width:110%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
.x2 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:120% ;	bottom: 0 ;	left: 0; margin:-50% 0 0 0;	border-radius: 0;  }
.x3 .slider .adaptive{ position: absolute;	max-width: 101%; max-height:auto;	top: 50%;	left: 0%; margin:-19% 0 0 0%;	border-radius: 0;  }

.x2 video.adaptive { position: absolute;	max-width: 190%; top: 27%;	left: 50%; margin:-28% 0 0 -50%;	border-radius: 0;  }
.x3 video.adaptive { position: absolute;	max-width: 130%; max-height:auto;	top: 50%;	left: 50%; margin:-34% 0 0 -50%;	border-radius: 0;  }


/* specialized for safari */
.safari .x1 .adaptive{ max-width:102%;	top: 15%;	left: 50%; margin:-20% 0 0 -50%;	border-radius: 0;  }
.safari .x2 .adaptive{ max-width:102%;	top: 10%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
.safari .x3 .adaptive{ max-width: 130% ;	top: 25% ;	left: 25% ; margin:-25% 0 0 -25% ;	border-radius: 0;  }
.safari .x4 .adaptive{ max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
.safari .x2 video.adaptive{ position: absolute;	max-width: 190% ; max-height:auto;	top: 25% ;	left: 50% ; margin:-26% 0 0 -50%;	border-radius: 0;  }
.safari .x3 video.adaptive{ position: absolute;	max-width: 150% ; max-height:auto;	top: 25% ;	left: 25% ; margin:-220px 0 0 -360px;	border-radius: 0;  }

div#preloader { position: absolute; left: -9999px; top:-9999px; }
div#preloader img { display: block;	}

/* solution for adaptive images
.adaptive{ position: absolute;	max-width: 120%;	top: 0;	left: 0;	border-radius: 0; }
.adaptive:empty { top: 50%; left: 50%;	-webkit-transform: translate(-50%, -50%);	-moz-transform: translate(-50%, -50%);	-ms-transform: translate(-50%, -50%);	-o-transform: translate(-50%, -50%);	transform: translate(-50%, -50%); }
*/

/* vector icons */
a.share { background:url(../img/buttons/share.svg) top center no-repeat; background-size:auto 100%;  }
.no-svg a.share { background:url(../img/buttons/share-small.png) top center no-repeat; background-size:auto 100%; }
a.like { background:url(../img/buttons/favorite.svg) top center no-repeat; background-size:auto 100%; }
.button a.like { background:none; }
.no-svg a.like { background:url(../img/buttons/favorite-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.contact { background:url(../img/buttons/contact.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.contact { background:url(../img/buttons/contact-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.previous { background:url(../img/buttons/previous.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.previous { background:url(../img/buttons/previous-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.next { background:url(../img/buttons/next.svg) top center no-repeat; background-size:auto 100%; margin-right:10%; }
.no-svg a.next { background:url(../img/buttons/next-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.slide-previous { background:url(../img/buttons/previous.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.slide-previous { background:url(../img/buttons/previous-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.slide-next { background:url(../img/buttons/next.svg) top center no-repeat; background-size:auto 100%; margin-right:10%; }
.no-svg a.slide-next { background:url(../img/buttons/next-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.slide-play { background:url(../img/buttons/play-small.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.slide-play { background:url(../img/buttons/play-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.slide-play.now-playing { background:url(../img/buttons/pause-small.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.slide-play.now-playing { background:url(../img/buttons/pause-small.png) 50% 50% no-repeat; background-size:auto 100%; }

a.close { background:url(../img/buttons/close.svg) top center no-repeat; background-size:auto 100%; }
.no-svg a.close { background:url(../img/buttons/close-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.play { background:none; }
.no-svg a.play { background:url(../img/buttons/play-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.moreleft { background:none; }
.no-svg a.moreleft { background:url(../img/buttons/moreleft-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.listen { background:url(../img/buttons/listen.svg) top center no-repeat; background-size:auto 100%; }
.button a.listen { background:none; }
.no-svg a.listen { background:url(../img/buttons/listen-small.png) 50% 50% no-repeat; background-size:auto 100%; }
a.explore { background:none; }

a.menu { background:url(../img/buttons/moredown.svg) top center no-repeat; background-size:auto 100%; }
.button a.menu { background:none; }
.no-svg a.menu { background:url(../img/buttons/moredown.png) top center no-repeat; background-size:auto 100%; }
a.explore { background:none; }
.no-svg a.explore { background:url(../img/buttons/explore-small.png) 50% 50% no-repeat; background-size:auto 100%; }

a.morezoom { background:none; }
.no-svg a.morezoom { background:url(../img/buttons/morezoom-small.png) 50% 50% no-repeat; background-size:auto 100%; }


/* home */
.home { z-index:3333; display:block; width:100%; margin:0 auto; overflow:hidden; height:100%; position:absolute; }
.tria { position: absolute; top: 40%; left: 50%; height: 30%; width: 20%; margin: -15% 0 0 -10%; text-align:center;  }
.tria img { width:100%; height:auto; display:image; overflow:visible; }
.words { position: absolute; top: 60%; left: 50%; height: 30%; width: 58%; margin: -15% 0 0 -28%; text-align:center;  }
.words div { width:28%; height:117px; float:left; padding-left:3%; cursor:pointer; opacity:0; }
.words div.disabled {  }
.words div img { width:100%; height:auto;  }
.words .work img { width:100%; margin-top:14%; }
.words .with img { width:86%; margin-top:13%; }
.words .soul { width:37%; padding-left:0; }
.words .soul img { width:100%; }
.old-browser { position: absolute; top: 90%; left: 38%; height: 30%; width: 80%; margin: -15% 0 0 -28%; color:#000; text-align:center; font-weight:bold; font-size:24px; display:none; }

.vector-bw { fill:#E74117 ; }

.theater { background:#fff; position:absolute; width:100%; height:100%; z-index:-1; display:none; opacity:1; }
.theater div { display:none; }
.theater .active { display:block; }


/* header */
header { display:none; width:100%; height:50px; padding:0; margin:0; position:fixed; z-index:222; overflow:hidden; }
header .wrapper { width:100%; height:50px;  padding:0; margin:0; position:absolute; z-index:222; background:transparent; }
header div { width:20%; position:relative; float:left; height:50px; margin:0; padding:0; background:#000; }
header.visible { display:block; top:0; }
header .logo { overflow:hidden; position:relative; background:transparent; cursor:pointer; }
#logo { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; background:url(../img/buttons/tria-trupa.svg) top center repeat-x; }
.no-svg #logo { background:url(../img/buttons/tria-trupa.png) top center repeat-x; }

header .menu ul { padding:0; margin:0; overflow:hidden; width:100%; display:block; list-style:none; }
header .menu ul li { float:left; display:block; overflow:hidden;  clear:none; list-style:none; position:relative; width:32%; }
header .menu ul li a { font-family:'PFBeauSansPro'; display:block; font-size:17px; font-weight:bold; text-align:center; width:100%; text-decoration:none; padding-top:16px; color:#fff; opacity:0.375; cursor:pointer; }
header .menu ul li a.active { color:#fff; opacity:1; }
header .menu ul li a:hover { color:#fff; opacity:1; }

a.header-icon { width:16%; overflow:hidden; position:relative; float:right; display:block; clear:none; cursor:pointer; text-align:center; height:60%; margin-top:10px; text-indent:-3333px; opacity:0.375; }
a.header-icon:hover { opacity:1; }
a.header-icon.active { opacity:1; }
a.header-icon span { display:block; position:absolute; overflow:hidden; width:40%; height:14px; bottom:0; right:0; color:#fff; font-size:10px; text-indent:0 ; text-align:left; padding:0; margin:0; border:0; }

header .controls { padding-top:2px; } 
header .navigation { padding-top:2px; } 
header .mobile-menu { padding-top:2px; } 
header .gallery-menu { padding-top:2px; display:none; } 
header .navigation a.header-icon { width:22%; }
header .gallery-menu a.header-icon { width:22%; }
header .mobile-menu { display:none; }

header .menu {  }
header .controls { width:40%; }
header .navigator { width:17%; }
header .gallery-menu { width:20%; }

header .gallery.slide-next { display:none;  }
header .gallery.slide-play { display:none;  }
header .gallery.slide-previous { display:none; margin-left:16%; }
header .gallery-menu a { float:right; margin-right:10%; }

.progress { position:fixed; right:45%; bottom:50%; font-family:'PFBeauSansPro'; font-size:24px; line-height:35px; z-index:333444; overflow:hidden; display:none; background:#fff; border-radius:200px; margin:0; padding:13px; text-align:center; box-shadow: 0 0 150px rgba(0, 0, 0, 0.50); }
.progress-timeout { position:fixed; left:50%; width:40%; top:25%; font-family:'PFBeauSansPro'; font-size:24px; line-height:35px; z-index:333444; overflow:hidden; display:none; background:#fff; border-radius:0;  margin:0 0 0 -18%; padding:13px; text-align:center; box-shadow: 0 0 150px rgba(0, 0, 0, 0.50); text-align:center; width:610px; height:390px; }
.progress-timeout video { position:absolute; top:0; left:0; width:640px; height:360px; }
.progress-timeout span { display:block; position:absolute; bottom:10px; left:0; width:100%; text-align:center; height:40px; }
.progress-timeout a { color:#EC5D2E; cursor:pointer; }
.progress img {  }
.progress span { display:none; position:absolute; width:8%; top:0; height:100%; right:0; background:#333; }

/* work */
.project { display:none; top:0; left:0; width:100%; height:100%; position:absolute; overflow:hidden; z-index:50; }
.project.new { top:-100%; left:-100%; z-index:100; width:100%; height:100%; }

.project .row { width:100%; height:50%; position:relative; background:#500; top:50px; overflow:visible; }
.project .row .box { width:20%; height:100%; position:relative; float:left; overflow:hidden; background:#000; }
.project .row .box.x2 { width:40%; }
.project .row .box.x3 { width:60%; }
.project .row .box.x4 { width:80%; }
.project .row .box.x5 { width:100%; }
.project .row .box.works { position:absolute; top:0; left:0; height:200%; outline:none; }
.works-modal a, .works-modal a:hover, .works-modal, .works-modal:focus, .nano-content, .works-modal a:focus, .nano-content:focus { outline:none; }
.project .row .works .text .nano {  height:70% ; outline:none ; }
.project .row .works .text .nano .nano-content {  outline:none ; }
.project .row .box.removable { display:block; }

.project .text { text-align:center; padding:20px; font-family:'PFBeauSansPro'; font-size:12px; color:#fff; height:130%; overflow:hidden; }
.project .text h1 { font-family:'PFBeauSansPro'; font-size:16px; font-weight:normal; margin-top:20px; overflow:visible; text-shadow:none; }
.project .text a { font-weight:normal; color:#fff; text-decoration:none; }
.project .text a:hover { color:#fff; text-decoration:underline; }
.project .text .nano { height:50%; }
.project .text .more { position:relative; width:20px; height:20px; overflow:hidden; clear:both; margin-top:10%; background:url(../img/buttons/moredown.svg) no-repeat; cursor:pointer; background-size:20px 20px; display:inline-block; }
.project .text .less { display:none; position:relative; width:20px; height:20px; overflow:hidden; clear:both; margin-top:10%; background:url(../img/buttons/moreup.svg) no-repeat; cursor:pointer; background-size:20px 20px; }

.project .row .box .t { display:block; background:#000; overflow:visible; position:absolute; width:100%; height:200%; z-index:777; }
.project .row .box .image { position:relative; with:100%; height:100%; top:0; left:0; overflow:hidden; } 
.project .row .box .video { text-align:center; }

.box.video .image { display:none; }
.no-video .project .row .box .video video  { display:none; }
.no-video .project .row .box .play  { display:none; }
.no-video .project .row .box .image  { display:block; }

.project .row .box .button {  position:absolute; overflow:visible; width:50px; height:50px; top:50%; left:50%; margin:-25px 0 0 -25px; background:#000; border-radius:100px; line-height:61px; text-indent:-2222px; z-index:100; cursor:pointer; }
.no-borderradius .project .row .box .button { background:url(../img/button.png) transparent no-repeat; }
.project .row .box .button a { display:block; position:relative; overflow:hidden; width:82%; height:80%; margin:5px 0 0 4px; text-indent:-2222px; outline:none; }
.project .row .box .button a svg { position:absolute; top:0; left:0; width:41px; height:40px; }
.project .row .box .title { position:absolute; overflow:visible; width:50%; height:25px; top:60%; left:25%;  z-index:100; text-align:center; color:#fff; font-family:'PFBeauSansPro'; font-size:16px; display:none; text-shadow: 0 0 10px rgba(0, 0, 0, 1); }
.project .row .box:hover .title { display:block; }
.button.loading { overflow:hidden; padding:0;  }
.button.loading a { display:block; width:50px; height:50px; overflow:hidden; position:relative; border-radius:100px; padding:0 !important; margin:0 !important; left:4px; top:5px; }
.button.loading a img { position:absolute; margin-top:0; display:block; top:0; left:21.5px; width:41px; height:40px; }
.safari .r1 .button.loading a img { top:10px; }
.safari .r2 .button.loading a img { top:7px; }

.like.favourited .draw { fill:#f15f2f ; }

.project .row .box .audio-clips { display:none; position:absolute; top:30%; left:0; width:70%; height:60%; padding:0 15%; text-align:center; }

.project .row .box .zoom { position:absolute; overflow:hidden; width:30px; height:30px; bottom:10px; right:10px; z-index:222; }
.project .row .box .zoom a { display:block; position:relative; overflow:hidden; width:30px; height:30px; outline:none; }
.project .row .box .zoom a svg { position:absolute; top:0; left:0; width:25px; height:25px; z-index:100; }
.project .row .box .zoom a svg .draw { fill:#fff; }

.project .row .box.x1 .slider { position:relative; with:100%; height:100%; top:0; left:0; overflow:hidden; }
.project .row .box.x1 .slider .slides { position:absolute; overflow:hidden; width:100%; height:100%; }
.project .row .box.x2 .slider .slides { position:absolute; overflow:hidden; }

.help.mobile { background:#010101; color:#fff; position:absolute; display:none; bottom:45%; left:25%; width:30%; text-align:center; font-family:'PFBeauSansPro'; font-size:16px; padding:8px 4px; overflow:hidden; z-index:33333; opacity:0.9; box-shadow: 0 0 150px rgba(0, 0, 0, 0.50); }
.help.desktop { background:#010101; color:#fff; position:absolute; display:none; bottom:20%; left:10%; width:80%; text-align:center; font-family:'PFBeauSansPro'; font-size:16px; padding:8px 4px; overflow:hidden; z-index:33333; opacity:0.9; box-shadow: 0 0 150px rgba(0, 0, 0, 0.50); }

/* subpages */
.project .row .box.subpage { display:none; position:absolute; top:0; left:0; height:200%; background:#FFFFFF; z-index:2222 ; width:100%; background:#fff; }
.project .row.r2 .box.subpage { top:-100%; }
.project .row .box.subpage .details { display:block; position:absolute; top:0; left:0; height:50%; background:#FFFFFF; z-index:2222 ; width:20%; }
.project .row .box.subpage .details .text { color:#fff; } 
.project .row .box.subpage .details .text h2 { color:#fff; font-weight:normal; font-size:16px; } 
.project .row .box.subpage .details .text .gallery-buttons {  }
.project .row .box.subpage .details .text .slide-previous { margin-right:10px; }

.project .row .box.subpage .details a { position:relative; overflow:hidden; width:30px; height:30px; display:inline-block; outline:none; }
.project .row .box.subpage .details a svg { position:absolute; top:0; left:0; width:30px; height:30px; z-index:100; }
.project .row .box.subpage .details a svg .draw { fill:#fff; }
.project .row .box.subpage .details a:active svg .draw { fill:#000000; }
.project .row .box.subpage .details a.slide-close { width:auto; color:#fff; font-family:'PFBeauSansPro'; font-size:12px; cursor:pointer; }
.project .row .box.subpage .details a.slide-close:active { color:#000; }

.project .row .box.subpage .controls { display:block; position:absolute; top:50%; left:0; height:50%; background:#FFFFFF; z-index:2222 ; width:20%; text-align:center; }
.project .row .box.subpage .controls .wrapper { margin-top:60%; margin-left:5%; }
.project .row .box.subpage .controls .share-links { display:none; position:absolute; top:30%; left:0; width:70%; height:60%; padding:0 15%; text-align:center; }
.project .row .box.subpage .controls .share-links a { cursor:pointer; }
.project .row .box.subpage .controls .share-links a svg { width:100%; height:auto; }
.project .row .box.subpage .controls .title { display:none; }
.project .row .box.subpage .controls:hover .title { display:block; }

.project .row .box.subpage .contents { display:block; position:absolute; top:0; left:20%; height:100%; background:#FFFFFF; z-index:2222 ; width:80%; }
.project .row .box.subpage ul { list-style:none; display:block; width:100%; height:100%; top:0%; left:0; position:absolute; overflow:hidden; padding:0; margin:0; }
.project .row .box.subpage ul li { list-style:none; display:none; width:100%; height:100%; position:absolute; overflow:hidden; padding:0; margin:0; float:left; clear:both; top:0; left:0; }
.project .row .box.subpage ul li img { height:100%; }
.project .row .box.subpage ul li video { width:100%; max-width:1240px; }
.project .row .box.subpage ul li.active { display:block; }

/* additional pages */
.additional { display:none; top:0; left:0; width:100%; height:100%; position:fixed; overflow:hidden; background:none; z-index:150; }
.additional .click-to-hide { position:absolute; z-index:160 ; top:0; left:0; width:100%; height:100%; }
.additional .mobile-modal { display:none; }
.additional .row { width:100%; height:100%; position:relative; top:50px; overflow:visible; z-index:160 ; }
.additional .row .box { width:20%; height:100%; position:relative; float:left; overflow:hidden;  }
.additional .row .box.x2 { width:40%; }
.additional .row .box.x3 { width:60%; }
.additional .row .box.x4 { width:80%; }
.additional .row .box.x5 { width:100%; }
.additional .row .box.works-modal { position:absolute; top:0; left:0; height:200%; display:none; z-index:444; }
.additional .row .box.share-modal { position:relative; left:50%; top:0; width:50%; display:none; background:#000; height:35px; padding-left:3%; padding-top:15px; font-size:15px; font-family:'PFBeauSansPro'; z-index:190 !important; }
.additional .row .box.share-modal span { position:relative; overflow:hidden; width:auto; margin-right:4%; color:#fff; }
.additional .row .box.share-modal a { position:relative; overflow:hidden; width:auto; margin-right:3%; color:#fff; text-decoration:none;font-size:12px; }
.additional .row .box.share-modal a:hover { color:#f15f2f; font-size:12px; }

.additional .row .box.favourites-modal { position:relative; left:66.52%; top:0; width:20%; display:none; background:#000; height:auto; padding-left:3%; padding-top:15px; padding-bottom:15px; font-size:15px; font-family:'PFBeauSansPro'; z-index:161 ; color:#fff; }
.additional .row .box.favourites-modal span { position:relative; overflow:hidden; width:auto; margin-right:4%; color:#fff; }
.additional .row .box.favourites-modal a { position:relative; overflow:hidden; width:auto; margin-right:0%; color:#fff; text-decoration:none; }

.additional .row .box.favourites-modal a:hover { color:#fff; text-decoration:underline; }

.additional .row .box.contact-modal { position:relative; left:40%; top:0; width:60%; min-height:530px; height:160%; background:#fff; display:none; }
#map_canvas { display:block; overflow:hidden; position:relative; width: 350px; height: 250px; }

.additional .text { text-align:center; padding:20px; font-family:'PFBeauSansPro'; font-size:12px; color:#fff; opacity:0.8; height:130%; overflow:hidden; }
.additional .text h1 { font-family:'PFBeauSansPro'; font-size:16px; font-weight:normal; margin-top:20px; overflow:visible; text-shadow:none; }
.additional .text a { font-weight:normal; color:#fff; text-decoration:none; }
.additional .text a:hover { color:#fff; text-decoration:underline; }
.additional .text .nano { height:70%; }
.additional .text .more { position:relative; width:20px; height:20px; overflow:hidden; clear:both; margin-top:10%; background:url(../img/buttons/moredown.svg) no-repeat; cursor:pointer; background-size:20px 20px; display:inline-block; }
.additional .text .less { display:none; position:relative; width:20px; height:20px; overflow:hidden; clear:both; margin-top:10%; background:url(../img/buttons/moreup.svg) no-repeat; cursor:pointer; background-size:20px 20px; }

.additional .row .box .t { display:none; background:#000; overflow:visible; position:absolute; width:100%; height:200%; z-index:777; }
.additional .row .box .image { position:relative; with:100%; height:100%; top:0; left:0; overflow:hidden; } 
.additional .row .box .video { text-align:center; }

.additional .contact-modal { z-index:199 ; }
.additional .contact-modal ul.tabs { display:block; width:100%; background:#eeefef; height:45px; list-style:none; margin:0; padding:0; }
.additional .contact-modal ul.tabs li { display:inline-block; width:14%; background:#eeefef; height:45px; list-style:none; line-height:45px; padding-left:3%; padding-right:3%; text-align:center; cursor:pointer; max-width:100px; color:#010101; font-size:14px; }
.additional .contact-modal ul.tabs li.active { background:#fff; }

.additional .contact-modal ul.tab-contents { display:block; width:100%; min-height:550px; margin-top:20px; position:relative; overflow:hidden; list-style:none; height:70%; padding-top:10px; }
.additional .contact-modal ul.tab-contents li { display:block; width:100%; list-style:none; display:none; font-family:'PFBeauSansPro'; font-size:13px; color:#010101; max-width:600px; height:100%; min-height:550px; }
.additional .contact-modal ul.tab-contents li.active { display:block; }
.additional .contact-modal ul.tab-contents li b { font-weight:bold; font-size:16px; }
.additional .contact-modal ul.tab-contents li .cell { width:40%; margin-right:5%; float:left; position:relative; clear:none; display:inline-block;  margin-bottom:12px; min-height:60px; }
.additional .contact-modal ul.tab-contents li a { background:none; color:#010101; text-decoration:underline; font-weight:normal; font-size:13px; }
.additional .contact-modal ul.tab-contents .nano { height:100%; width:90%; display:block; z-index:199 ; }
.additional .contact-modal ul.tab-contents li .cell.empty { clear:right; height:100px; }
.additional .contact-modal ul.tab-contents li .cell.double { width:80%; clear:both; }
.additional .contact-modal ul.tab-contents li .cell.no-margin {  margin-top:0; margin-bottom:0; }
.additional .contact-modal ul.tab-contents li .cell.no-padding {  padding:0; margin:0; width:83%; }
.additional .contact-modal ul.tab-contents li .cell.mini { width:28%; }
.additional .contact-modal ul.tab-contents li .input {  border-radius:0;  background:#eeefef; display:block; color:#010101; height:25px; font-size:14px; border:none; padding:0 10px; width:87%; }
.additional .contact-modal ul.tab-contents li .input.unsubmitted { background:#f15f2f; color:#fff; }
.additional .contact-modal ul.tab-contents li .textarea { border-radius:0; margin-top:20px; background:#eeefef; display:block; color:#010101; height:33px; font-size:14px; border:none; padding:10px; width:100%; height:50px; }
.additional .contact-modal ul.tab-contents li .send { float:right; width:74px; height:24px; text-align:center; color:#fff; background:#010101; border:none; clear:none; padding:0; margin:0; margin-bottom:30px;  border-radius:0;  }
.additional .contact-modal .hiddenError {  }
.additional .contact-modal #finalMessage { float:left; display:inline-block; width:60%; position:relative; overflow:hidden; }


/* with */
.with-page { display:none; width:100%; height:auto; position:relative; overflow:hidden; background:#000; z-index:60; }
.with-page .slide { display:block; position:relative; overflow:hidden; clear:both; width:100%; height:auto; }
.with-page .slide .wrapper { display:block; position:relative; margin:0 21.5%; overflow:visible; max-width:690px; width:80%; height:100%; font-family:'PFBeauSansPro'; font-size:16px; letter-spacing:-0.021em; }
.with-page .slide h2 { font-size:18px;  }
.with-page .slide a { text-decoration:underline; font-weight:normal; color:#010101; }
.with-page .slide a:hover { text-decoration:underline; font-weight:normal; color:#E74117; }

.with-page .slide.w1 { background:#000; color:#fff; padding-top:60px; padding-bottom:40px;  }
.with-page .slide.w1 .wrapper { width:390px; }
.with-page .slide.w2 { background:#fff; color:#000; padding-top:40px; padding-bottom:80px; }

.with-page .slide ul.table { position:relative; list-style:none; display:block; overflow:hidden; margin:0; padding:0; }
.with-page .slide ul.table li { position:relative; list-style:none; display:inline-block; overflow:hidden; float:left; width:22%; padding:0; margin:0; margin-right:2.5%; }
.with-page .slide ul.table li.branding { width:21%; }
.with-page .slide ul.table li.advertising { width:27%; }
.with-page .slide ul.table li.digital { width:25%; }
.with-page .slide ul.table li.enviroments { width:15%; margin-right:0; }

.with-page .slide.w3 { background:#d4d5d7; color:#010101; padding-top:40px; padding-bottom:80px; }
.with-page .slide.w3 ul.table li { width:30%; }

.with-page .gmaps-container { display:none; width:500px; height:240px; overflow:hidden; position:relative; }

/* soul */
.compatibility { display:none; }
.soul-page { display:none; width:100%; height:auto; position:relative; overflow:hidden;  z-index:70; }


.soul-page .scroll-arrow { display:none; position:fixed; overflow:visible; width:100px; height:99px; bottom:5%; right:2.5%; margin:-25px 0 0 -25px;  z-index:100; cursor:pointer; }
.soul-page .scroll-arrow img { width:100px; height:auto; position:relative; }
.soul-page .scroll-arrow svg { position:absolute; top:6px; left:4px; width:41px; height:40px; }

.soul-page .slide { display:block; position:relative; overflow:hidden; clear:both; width:100%; height:auto; }
.soul-page .slide .wrapper { display:block; position:relative; margin:0 auto; overflow:visible; max-width:990px; width:100%; height:100% }
.soul-page .slide img { width:100%; height:auto; }
.soul-page .flying-object { position:absolute; overflow:hidden; display:block; height:auto; }

.soul-page .slide.s1 { background:url(../img/soul/s1-bg.jpg) 60% 0% no-repeat #d1e1f2; height:904px; z-index:30; }
.soul-page .slide.s1 .background-image {  display:none; }
.soul-page .slide.s1 .slow-prlx { position:absolute; top:0; left:-14%; height:100%; width:100%; background:url(../img/soul/s1.1.png) center 464px no-repeat; }
.soul-page .slide.s1 .fast-prlx { position:absolute; top:0; left:-33%; height:100%; width:150%; background:url(../img/soul/s1.2.png) center 157px no-repeat;  }
.soul-page .slide.s1 .popcorn1 { top:157px; right:-20px; }
.soul-page .slide.s1 .popcorn2 { top:633px; right:215px; }
.soul-page .slide.s1 .popcorn3 { top:633px; right:215px; }
.soul-page .slide.s1 .caption1 { width:480px; right:116px; text-align:right; top:453px; font-family:'PFBeauSansPro'; font-size:208px; letter-spacing:-0.021em; color:#231f20; }
.soul-page .slide.s1 .caption2 { width:500px; left:57px; text-align:left; top:378px; font-family:'PFBeauSansPro'; font-size:75px; letter-spacing:-0.021em; color:#231f20; }
.soul-page .slide.s1 .caption3 { width:660px; right:116px; text-align:right; top:680px; font-family:'PFBeauSansPro'; font-size:48px; letter-spacing:-0.021em; color:#231f20; }
.soul-page .slide.s1 .caption4 { width:660px; right:169px; text-align:right; top:193px; font-family:'PFBeauSansPro'; font-size:46px; letter-spacing:-0.021em; color:#231f20; }

.soul-page .slide.s2 { z-index:80; background:none; }
.soul-page .slide.s2 .background-image {  display:none; }
.soul-page .slide.s2 video { width:100%; position:relative; }
.soul-page .slide.s2 .vpage { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; display:block; }
.soul-page .slide.s2 .vpage.p1 { display:block; }
.soul-page .slide.s2 .caption1 { width:65%; right:15%; text-align:right; top:13%; font-family:'PFBeauSansPro'; font-size:152px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page .slide.s2 .caption2 { width:35%; right:15%; text-align:right; top:29.5%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page .slide.s2 .caption3 { width:50%; right:30%; text-align:right; top:42%; font-family:'PFBeauSansPro'; font-size:40px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page .slide.s2 .caption4 { width:50%; right:12%; text-align:right; top:55%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page .slide.s2 .caption5 { width:80%; left:14.7%; text-align:left; top:79.35%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; white-space:nowrap; }
.soul-page .slide.s2 .caption6 { width:67%; left:14.7%; text-align:left; top:20%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page .slide.s2 .caption10 { width:100%; left:14.7%; text-align:left; bottom:20px; left:10px; font-family:'PFBeauSansPro'; font-size:10px; letter-spacing:-0.025em; color:#fff; line-height:1em; position:absolute; opacity:0.5; z-index:100; }
.soul-page .slide.s2 .caption10 a { color:#fff; text-decoration:underline; }
.soul-page .slide.s2 .caption10 a:hover { color:#fff; text-decoration:underline; }

.soul-page .slide.s3 { display:block; position:relative; width:100%; height:1150px; overflow:visible; background:none; z-index:10; }
.soul-page .slide.s3 .image-wrapper { display:none; position:absolute; padding-top:10%; margin:0 auto; overflow:visible; min-width:390px; max-width:790px; width:60%; height:50%; left:20%; background:#fff; }
.soul-page .slide.s3 .image-wrapper img.racket { display:block; position:absolute; width:100%; height:auto; }
.soul-page .slide.s3 .flying-popcorn { top:35%; left:-50%; width:63px; }
.soul-page .slide.s3 .caption1 { width:480px; right:116px; text-align:right; top:453px; font-family:'PFBeauSansPro'; font-size:208px; letter-spacing:-0.021em; color:#231f20; }

.soul-page .slide.s4 {  z-index:100; display:block; position:relative; width:100%; height:auto; overflow:hidden;   }
.soul-page .slide.s4 .caption1 { width:65%; right:15%; text-align:left; top:40%; font-family:'PFBeauSansPro'; font-size:152px; letter-spacing:-0.025em; color:#fff; line-height:1em; }

.soul-page .slide.s5 { display:block; position:relative; width:100%; height:3350px; overflow:visible;  z-index:-1; }
.soul-page .slide.s5 .image-wrapper { display:block; position:absolute; top:15%; margin:0 auto; overflow:visible; min-width:600px; max-width:790px; width:60%; height:60%; left:20%; background:#fff; }
.soul-page .slide.s5 .image-wrapper img.poulos { display:block; position:absolute; width:100%; height:auto; }
.soul-page .slide.s5 .flying-popcorn { top:35%; right:-50%; width:63px; }
.soul-page .slide .motion-container { display:block; position:fixed; top:0; left:0; width:100%; height:700px; z-index:40; }
#jingle-page { position:absolute; display:block; bottom:0; left:20%; overflow:hidden; cursor:pointer; height:200px; width:45%; z-index:2222; }

/* soul animations */
.soul-animations { display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
.soul-animations .racket-wrapper { display:none; position:fixed; top:11%; left:20%; width:60%; height:80%; overflow:visible; z-index:33333; z-index:10; }
.soul-animations .racket-wrapper img.racket { display:block; position:absolute; top:0; left:25%; width:100%; max-width:600px; height:auto; }
.soul-animations .racket-wrapper .flying-popcorn { top:15%; left:-50%; width:63px; position:absolute; }
.soul-animations .racket-wrapper .caption6 { width:67%; left:8.7%; text-align:left; top:20%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .racket-wrapper .caption5 { width:67%; left:9.7%; text-align:left; top:40%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .racket-wrapper .caption4 { width:67%; left:68.5%; text-align:left; top:40%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }

.soul-animations .poulos-wrapper { display:block; position:fixed; top:11%; left:20%; width:60%; height:80%; overflow:visible; z-index:33333; z-index:10; }
.soul-animations .poulos-wrapper img.poulos { display:block; position:absolute; width:100%; height:auto; max-width:800px; }
.soul-animations .poulos-wrapper img.microphone { display:block; position:absolute; left:-8%; bottom:0%; width:28%; height:auto; max-width:800px; }
.soul-animations .poulos-wrapper .flying-popcorn {  top:35%; right:-50%; width:63px; position:absolute; }
.soul-animations .poulos-wrapper .caption1 { width:50%; left:-10%; text-align:left; top:47%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption2 { width:60%; left:80%; text-align:left; top:60%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption3 { width:67%; left:72%; text-align:left; top:10%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption4 { width:67%; left:-5%; text-align:left; top:10%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }

.soul-animations .poulos-wrapper .caption5 { width:50%; left:60%; text-align:left; top:85%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption6 { width:80%; left:-20%; text-align:left; top:54%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption7 { width:65%; left:-10%; text-align:left; top:12%; font-family:'PFBeauSansPro'; font-size:90px; letter-spacing:-0.025em; color:#000; line-height:1em; position:absolute; }
.soul-animations .poulos-wrapper .caption8 { width:40%; left:60%; text-align:left; top:95%; font-family:'PFBeauSansPro'; font-size:14px; letter-spacing:-0.025em; color:#000; line-height:1.2em; position:absolute; }
.soul-animations .poulos-wrapper .button.start-jingle { left:62%; text-align:left; top:87%; line-height:1em; position:absolute; cursor:pointer; z-index:6333 !important; }
.safari .soul-animations .poulos-wrapper .button.start-jingle { left:65%; text-align:left; top:87%; line-height:1em; position:absolute; cursor:pointer; z-index:6333 !important; }
.soul-animations .poulos-wrapper .button.start-jingle a { cursor:pointer; }

.soul-animations .poulos-wrapper .button {  position:absolute; overflow:hidden; width:50px; height:50px; top:50%; left:50%; margin:-25px 0 0 -25px; background:#000; border-radius:100px; line-height:61px; text-indent:-2222px; z-index:100; }
.soul-animations .poulos-wrapper .button { background:url(../img/button.png) transparent no-repeat; }
.soul-animations .poulos-wrapper .button a { display:block; position:relative; overflow:hidden; width:82%; height:80%; margin:5px 0 0 4px; text-indent:-2222px; outline:none; }
.soul-animations .poulos-wrapper .button a svg { position:absolute; top:0; left:0; width:41px; height:40px; }


/* soul compatibility mode */
.soul-animations.compatibility { display:none !important; }

.soul-page.compatibility .slide.s1 { background:url(../img/soul/s1-bg.jpg) 60% 0% no-repeat #d1e1f2; height:904px; z-index:30; }
.soul-page.compatibility .slide.s1 .background-image {  display:none; }
.soul-page.compatibility .slide.s1 .slow-prlx { position:absolute; top:0; left:-14%; height:100%; width:100%; background:url(../img/soul/s1.1.png) center 464px no-repeat; }
.soul-page.compatibility .slide.s1 .fast-prlx { position:absolute; top:0; left:-33%; height:100%; width:150%; background:url(../img/soul/s1.2.png) center 157px no-repeat;  }
.soul-page.compatibility .slide.s1 .popcorn1 { top:157px; right:-20px; display:none; }
.soul-page.compatibility .slide.s1 .popcorn2 { top:633px; right:215px; display:none; }
.soul-page.compatibility .slide.s1 .popcorn3 { top:633px; right:215px; display:none; }
.soul-page.compatibility .slide.s1 .popcorn4 { display:none; }
.soul-page.compatibility .slide.s1 .caption1 { width:480px; right:116px; text-align:right; top:453px; font-family:'PFBeauSansPro'; font-size:208px; letter-spacing:-0.021em; color:#231f20; }
.soul-page.compatibility .slide.s1 .caption2 { width:500px; left:57px; text-align:left; top:378px; font-family:'PFBeauSansPro'; font-size:75px; letter-spacing:-0.021em; color:#231f20; }
.soul-page.compatibility .slide.s1 .caption3 { width:660px; right:116px; text-align:right; top:680px; font-family:'PFBeauSansPro'; font-size:48px; letter-spacing:-0.021em; color:#231f20; }
.soul-page.compatibility .slide.s1 .caption4 { width:660px; right:169px; text-align:right; top:193px; font-family:'PFBeauSansPro'; font-size:46px; letter-spacing:-0.021em; color:#231f20; }

.soul-page.compatibility .slide.s2 { z-index:80; background:none; }
.soul-page.compatibility .slide.s2 .background-image {  display:block; z-index:-1 !important; }
.soul-page.compatibility .slide.s2 video { display:none; }
.soul-page.compatibility .slide.s2 .vpage { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; display:block; }
.soul-page.compatibility .slide.s2 .vpage.p1 { display:block; }
.soul-page.compatibility .slide.s2 .caption1 { width:65%; right:15%; text-align:right; top:13%; font-family:'PFBeauSansPro'; font-size:152px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page.compatibility .slide.s2 .caption2 { width:35%; right:15%; text-align:right; top:29.5%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page.compatibility .slide.s2 .caption3 { width:50%; right:30%; text-align:right; top:42%; font-family:'PFBeauSansPro'; font-size:40px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page.compatibility .slide.s2 .caption4 { width:50%; right:12%; text-align:right; top:55%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
.soul-page.compatibility .slide.s2 .caption5 { width:67%; left:14.7%; text-align:left; top:62%; font-family:'PFBeauSansPro'; font-size:80px; letter-spacing:-0.025em; color:#fff; line-height:1em; }

.soul-page.compatibility .slide.s3 { display:none; }
.soul-page.compatibility .slide.s5 { display:none; }


/* sounds page */
body.sounds ::selection {
	background: #d80019; /* Safari */
	color:#fff;
	}
body.sounds ::-moz-selection {
	background: #d80019; /* Firefox */
	color:#fff;
}
body.sounds { background:url(../img/sounds/bg.jpg) top center; }
.sounds-page { position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; }
.sounds-page .wrapper { position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; }
.sounds-page .comic { position:absolute; overflow:hidden; top:0; right:0; width:55%; height:auto; }

.sounds-page .content-box { position:absolute; overflow:hidden; top:10%; left:10%; width:600px; height:auto; user-select: all !important; }
.sounds-page .content { position:absolute; overflow:visible; top:10%; left:10%; width:600px; height:auto; user-select: all !important;  }
.sounds-page .content .wrapper-text { display:block; position:absolute; width:363px; height:405px; top:157px; left:90px; overflow:hidden; padding:0; margin:0; font-size:14.8px; font-family:'PFBeauSansPro'; color:#000; user-select: all !important; }
.sounds-page .content a { color:#000; text-decoration:underline; }
.sounds-page .content a:hover, .sounds-page .content a.current { color:#d80019; text-decoration:underline; }
.sounds-page .content .nano .nano-content { padding-right:20px; }

/* sounds page */
.oufou-page { position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; display:block; background:#000; }
.oufou-page video { position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; }


/* awards */
.award { width:70px; height:105px; top:10%; right:0; z-index:31222333; overflow:hidden; display:block; position:fixed; }
.award a img { width:70px; height:105px; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none ;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* Smartphones (portrait and landscape) ----------- */
@media only screen  and (max-width : 768px) {
	
	body { height:100%; width:100%; }
	.home { width:100%; height:100%; display:block; position:relative; } 
	
	.x1 .adaptive{ position: absolute;  max-width:100% ;	top: 0% ;	left: 50%; margin:-50% 0 0 -50% ;	border-radius: 0;  }
	.x2 .adaptive{ position: absolute; max-width:110% ;	top: 0%;	left: 50%; margin:-25% 0 0 -50% ;	border-radius: 0;  }
	.x3 .adaptive{ position: absolute; min-width:400px;	max-width: 101% ; max-height:auto;	top: 0% ;	left: 42%; margin:-0% 0 0 -50% ;	border-radius: 0;  }
	.x4 .adaptive{ position: absolute; min-width:550px;	max-width: 200%; max-height:auto;	top: 25%;	left: 50%; margin:-35% 0 0 -50%;	border-radius: 0;  }
	.x3 .slider .adaptive{ position: absolute;  min-width:334px;	max-width: 125% ; max-height:auto;	top: 20% ;	left: 25%; margin:-12% 0 0 -25% ;	border-radius: 0;  }
	.box.video video { display:none; }
	.box.video .image { display:block; }
	
	/*.x1 .slides.adaptive { position: absolute; min-width:500px; width:110% ;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x1 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:100% ;	bottom: 0 ;	left: 0; margin:0 0 0 0;	border-radius: 0;  }
	
	.x2 .slides.adaptive { position: absolute; max-width:100%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x2 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:100% ;	bottom: 0 ;	left: 0; margin:-10% 0 0 0;	border-radius: 0;  } */
	
	/* specialized for safari */
	.safari .x1 .adaptive{ max-width:101%; min-width:250px;	top: -40%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.safari .x2 .adaptive{ max-width:101%;	top: 0;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.safari .x3 .adaptive{ max-width: 100% ;  top: 50% ;	left: 45% ; margin:-50% 0 0 -50% ;	border-radius: 0;  }
	.safari .x4 .adaptive{ max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
	.safari .x3 .slider .adaptive{ max-width: 130% ;  top: 25% ;	left: 25% ; margin:-18% 0 0 -30% ;	border-radius: 0;  }
	
	header .logo { width:30%; z-index:999; }
	header .menu { width:55%; z-index:999; }
	header .controls { display:none; }
	header .navigation { display:none; }
	header .mobile-menu { display:block; width:15%; text-align:left; }
	header .gallery-menu { width:15%; text-align:left; }
	header .gallery-menu a { float:left; margin-left:25%; }
	
	header .mobile-menu a { float:left; margin-left:15%; display:block; }
	header .mobile-menu a.close { display:none; width:15%; text-align:left; }
	
	.project { display:none; width:100%; height:100%; position:absolute; background:#000; overflow:hidden; z-index:50; margin-top:50px; overflow-y:scroll; }
	.project.new { top:-100%; left:-100%; z-index:100; width:100%; height:100%; }
	.project .row { width:100%; height:auto !important; position:relative; clear:both; background:#500; top:auto !important; overflow:visible; }
	.project .row .box { width:50% !important; height:300px !important; position:relative; clear:none; float:left; overflow:hidden; background:#000; }
	.project .row .box.empty { display:none !important; }
	.project .row .box.x2 { width:100%; }
	.project .row .box.x3 { width:100%; }
	.project .row .box.x4 { width:100%; }
	.project .row .box.x5 { width:100%; }
	.project .row .box.works { position:relative; top:0; left:0; width:100% !important; height:570px !important; z-index:222; }
	.project .row .box.works .text { height:auto !important; position:relative; overflow:hidden; height:900px !important; }
	.project .row .box.removable { display:block; }
	.project .row .box .works-link { display:none; }
	.project .row .box.description { width:100% !important; clear:both; height:220px !important; }
	
	/* Subpages */
	.project .row .box.subpage { position:fixed; top:0; left:0; width:100% !important; height:100% !important; z-index:3333 !important; }
	.project .row.r2 .box.subpage { position:fixed; top:0; left:0; width:100% !important; height:100% !important; z-index:3333 !important; }
	.project .row .box.subpage .details { display:none; }
	.project .row .box.subpage .controls { display:none; }
	.project .row .box.subpage .contents {  width:100%; height:100%; left:0; }
	.project .row .box.subpage .contents ul li img {  width:100%; height:auto; left:0; }
	
	/* additional */
	.additional { display:none; width:100%; height:100%; position:fixed; overflow:hidden; background:#000; z-index:100; margin-top:50px; overflow-y:scroll; }
	.additional .row .box.share-modal { height:60px; }
	.additional .row { width:100%; height:100% ; position:relative; clear:both; background:#000; top:auto ; overflow:visible; }
	.additional .row .box { width:100% ; height:100% ; position:relative; clear:none; float:left; overflow:hidden; background:#000; }
	.additional .click-to-hide { display:none; }
	.additional .row .box.x2 { width:100%; }
	.additional .row .box.x3 { width:100%; }
	.additional .row .box.x4 { width:100%; }
	.additional .row .box.x5 { width:100%; }
	.additional .row .box, .additional .row .box a { font-size:24px; }

	.additional .mobile-modal { display:none; clear:both; overflow:hidden; background:#000 ; z-index:190 ; }
	.additional .mobile-modal a {  clear:both; text-indent: 30%;  width:100%; height:40px; background-color:#000; background-position:15% 0% ; margin:0; padding:0; padding-top:10px; color:#ffffff; text-decoration:none; font-size:20px; line-height:35px; text-align:left;  } 
	.additional .mobile-modal a:hover { opacity:0.375; }
	.additional .mobile-modal a.divider { border-bottom:2px solid #fff; margin-top:10px; margin-bottom:10px; display:block; height:0; opacity:0.3; }
	.additional .row { display:block; width:100%; clear:both; position:absolute; height:100%; }
	.additional .box { display:block; width:100%; clear:both; position:absolute;  }
	.additional .share-modal { position:relative ; top:0; left:0; margin:0; padding:0; width:100%; height:auto; clear:both; overflow:hidden; background:#000;  }
	.additional .share-modal a {  clear:both; text-indent: 35%; width:100%; height:40px; background-color:#000; background-position:15% 0% ; margin:0; padding:0; padding-top:10px; color:#ffffff; text-decoration:none; font-size:24px; line-height:35px; text-align:left;  } 
	.additional .share-modal span {  clear:both; text-indent: 35%; width:100%; height:40px; background-color:#000; background-position:15% 0% ; margin:0; padding:0; padding-top:10px; color:#ffffff; text-decoration:none; font-size:24px; line-height:35px; text-align:left;  } 
	.additional .row .box.contact-modal { position:absolute; left:0%; top:0; width:100%; height:100%; background:#fff; display:none; overflow-y:scroll; }
	.additional .contact-modal ul { margin-left:10%; padding:00;  }
	.additional .contact-modal ul.tabs li { width:17.5%; margin:0; }
	.additional .contact-modal a {  clear:both; text-indent: 35%; width:100%; height:40px; background-color:#000; background-position:15% 0% ; margin:0; padding:0; padding-top:10px; color:#ffffff; text-decoration:none; font-size:24px; line-height:35px; text-align:left;  } 
	.additional .contact-modal span {  clear:both; text-indent: 35%; width:100%; height:40px; background-color:#000; background-position:15% 0% ; margin:0; padding:0; padding-top:10px; color:#ffffff; text-decoration:none; font-size:24px; line-height:35px; text-align:left;  } 
	.additional .share-modal { display:none; }
	.additional .row .box.share-modal { display:none; }
	.favourites-modal { display:none; !important; }
	
	/* soul */
	.soul-page .slide.s1 .slow-prlx { display:none; }
	.soul-page .slide.s1 .fast-prlx { display:none; }
	.soul-animations.compatibility { display:none !important; }
	.soul-page.compatibility .slide.s1 { background:url(../img/soul/s1.mob.jpg) center -100px no-repeat #d1e1f2; height:623px; z-index:30; }
	.soul-page.compatibility .slide.s1 .caption1 { width:90%; left:10%; text-align:right; top:353px; font-family:'PFBeauSansPro'; font-size:128px; letter-spacing:-0.021em; color:#231f20; text-align:left; }
	.soul-page.compatibility .slide.s1 .caption2 { width:100%; left:0; text-align:left; top:278px; font-family:'PFBeauSansPro'; font-size:42px; letter-spacing:-0.021em; color:#231f20; text-align:center; }
	.soul-page.compatibility .slide.s1 .caption3 { width:660px; right:15px; text-align:right; top:500px; font-family:'PFBeauSansPro'; font-size:22px; letter-spacing:-0.021em; color:#231f20; }
	.soul-page.compatibility .slide.s1 .caption4 { width:660px; right:25px; text-align:right; top:73px; font-family:'PFBeauSansPro'; font-size:22px; letter-spacing:-0.021em; color:#231f20; }
	
	.soul-page .slide.s4 .caption1 { width:100%; left:10%; text-align:left; top:40%; font-family:'PFBeauSansPro'; font-size:192px; letter-spacing:-0.025em; color:#fff; line-height:1em; }
	
	.soul-page.compatibility .slide.s3 { display:none; }
	.soul-page.compatibility .slide.s5 { display:none; }
	
	/* with */
	.with-page .slide .wrapper { display:block; position:relative; margin:0 11%; width:90%; min-width:auto ;  }
	.with-page .slide ul.table li { width:45% ; margin-bottom:40px; }
	.with-page .slide.w1 .wrapper { width:80%; }
	.with-page .slide.w2 ul li { width:80%; clear:both; padding-left:10%; }
	
	/* sounds page */
	.sounds-page .comic { display:none; }
	.sounds-page .content { left:30%; margin-left:-30%; }
	.sounds-page .content-box { left:30%; margin-left:-30%; }
}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 321px) {
	.project .row .box { width:100% !important; height:300px !important; position:relative; clear:none; float:left; overflow:hidden; background:#000; }
	.project .row .box.description { height:230px !important; }
	.project .row .box .works-link { display:none; }
	.progress { right:40%; }
	.favourites-modal { display:none; !important; }
	
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
	
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	.home { width:100%; height:100%; } 
	
	/* image sizes */
	.x1 .adaptive { position: absolute; max-width:101% ;	top: 0;	left: 50%; margin:-20% 0 0 -50% ;	border-radius: 0;  }
	.x2 .adaptive { position: absolute; max-width:101%;	top: 0;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	
	.x1 .slides.adaptive { position: absolute; max-width:200%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x1 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:120% ;	bottom: 0 ;	left: 0; margin:-25% 0 0 0;	border-radius: 0;  }
	.x2 .slides.adaptive { position: absolute; max-width:120%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x2 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:120% ;	bottom: 0 ;	left: 0; margin:-25% 0 0 0;	border-radius: 0;  }
	
	/* specialized for safari */
	.safari .x1 .adaptive{ max-width:100%;	top: 15%;	left: 50%; margin:-20% 0 0 -50%;	border-radius: 0;  }
	.safari .x2 .adaptive{ max-width:101%;	top: 10%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.x3 .adaptive{ position: absolute;	max-width: 101% ; max-height:auto;	top: 50%;	left: 50%; margin:-35% 0 0 -50%;	border-radius: 0;  }
	.safari .x3 .adaptive{ max-width: 100% ;  top: 40% ;	left: 50% ; margin:-50% 0 0 -50% ;	border-radius: 0;  }
	.safari .x3 .slider .adaptive{ max-width: 135% ;  top: 20% ;	left: 50% ; margin:-18% 0 0 -35% ;	border-radius: 0;  }
	.safari .x4 .adaptive{ max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
	
	/* work boxes */
	.project .row { width:100%; height:50%; position:relative; background:#500; top:50px; overflow:visible; }
	.project .row.send-to-back { z-index:-1 ; }
	.project .row .box { width:25%; height:100%; position:relative; float:left; overflow:hidden; background:#000; }
	.project .row .box.x2 { width:50%; }
	.project .row .box.x3 { width:75%; }
	.project .row .box.x4 { width:75%; }
	.project .row .box.works { position:absolute; top:0; left:0; height:200%; }
	.project .row .box.removable { display:none; }
	
	/* aditional modals */
	.additional .row .box.share-modal { height:60px; }
	.additional .row .box.share-modal a { margin-right:6%;  display:inline-block;  }
	.additional .row .box.share-modal span { margin-right:6%; display:inline-block; }
	
	/* soul */
	.soul-animations .poulos-wrapper img.poulos { left:0%; } 
	.soul-animations .poulos-wrapper { height:70%; }
	.soul-animations .poulos-wrapper img.microphone { left:-10%; width:32%; }
	
	/* with */
	.with-page .slide .wrapper { display:block; position:relative; margin:0 11%;  }
	.with-page .slide ul.table li { width:23% ; }
	
	header .gallery-menu { display:none; }
	header .controls { width:30%; }
	header .menu { width:30%; }
	
	/* sounds page */
	.sounds-page .comic { display:none; }
}

/* Android Tablets 10'1 (landscape) ----------- */
@media (max-device-width: 1280px) and (orientation: portrait) {
	
	/* image sizes */
	.x1 .adaptive { position: absolute; max-width:130%;	top: 0;	left: 50%; margin:0 0 0 -65%;	border-radius: 0;  }
	.x2 .adaptive { position: absolute; max-width:130%;	top: 0;	left: 50%; margin:0 0 0 -65%;	border-radius: 0;  }
	.x3 .adaptive { position: absolute; max-width:137%;	top: 0;	left: 50%; margin:0 0 0 -65%;	border-radius: 0;  }
} 

/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1297px) {
	.home { width:63%; height:100%; left:50%; margin:0 0 0 -31.5%; } 
	
	/* work */
	.placeholder { visibility:hidden; }
	.x1 .adaptive{ position: absolute; max-width:105% ;	top: 5%;	left: 50%; margin:-50% 0 0 -52.5%;	border-radius: 0;  }
	.x2 .adaptive{ position: absolute; max-width:101% ;	top: 20%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.x3 .adaptive{ position: absolute;	max-width: 101% ; max-height:auto;	top: 50%;	left: 50%; margin:-35% 0 0 -50%;	border-radius: 0;  }
	.x4 .adaptive{ position: absolute;	max-width: 101% ; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
	
	/* specialized for safari */
	.safari .x1 .adaptive{ max-width:101%;	top: 13%;	left: 50%; margin:-50% 0 0 -50%;	border-radius: 0;  }
	.safari .x2 .adaptive{ max-width:101%;	top: 10%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.safari .x3 .adaptive{ max-width: 100% ;	top: 50% ;	left: 25% !important; margin:-50% 0 0 -25% ;	border-radius: 0;  }
	.safari .x4 .adaptive{ max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
	
	/* soul */
	.soul-page .slide.s1 .slow-prlx { left:-8%; width:100%; }
	.soul-page .slide.s1 .fast-prlx { left:-26%; }
	
	.soul-animations .poulos-wrapper img.poulos { left:10%; } 
	.soul-animations .poulos-wrapper img.microphone { left:2%; width:20%; }
	
	.soul-animations .poulos-wrapper .button.start-jingle { left:61%; text-align:left; top:88.3%; }
	.safari .soul-animations .poulos-wrapper .button.start-jingle { left:62%; text-align:left; top:89%; line-height:1em; position:absolute; cursor:pointer; z-index:6333 ; }
	
	/* with */
	.with-page .slide .wrapper { display:block; position:relative; margin:0 22.1%;  }
	
	/* sounds page */
	.sounds-page .content { left:15%; }
	.sounds-page .content-box { left:15%; }
	
}



/* Fixing sizes by height ----------- */
@media only screen and (max-height : 768px) {
	.x2 video.adaptive { position: absolute;	max-width: 150% ; top: 27%;	left: 50%; margin:-28% 0 0 -50%;	border-radius: 0;  }
}
@media only screen and (max-height : 1024px) {
	.x2 video.adaptive { position: absolute;	max-width: 192% ; top: 27%;	left: 50%; margin:-30% 0 0 -50%;	border-radius: 0;  }
}
@media only screen and (min-height : 1025px) {
	.x2 video.adaptive { position: absolute;	max-width: 180% ; top: 27%;	left: 50%; margin:-28% 0 0 -50%;	border-radius: 0;  }
}
@media only screen and (min-height : 935px) and (min-width :930px) and (max-width : 1220px) {
	.x1 .adaptive{ position: absolute; max-width:130% ;	top: 0% ;	left: 40%; margin:-50% 0 0 -50% ;	border-radius: 0;  }
	.x2 .adaptive{ position: absolute; max-width:101%;	top: 10%;	left: 50%; margin:-25% 0 0 -50%;	border-radius: 0;  }
	.x3 .adaptive{ position: absolute;	max-width: 101%; max-height:auto;	top: 50%;	left: 50%; margin:-35% 0 0 -50%;	border-radius: 0;  }
	.x4 .adaptive{ position: absolute;	max-width: 110%; max-height:auto;	top: 50%;	left: 50%; margin:-47% 0 0 -50%;	border-radius: 0;  }
	
	.x1 .slides.adaptive { position: absolute; max-width:110%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x1 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:110% ;	bottom: 0 ;	left: 0; margin:-75% 0 0 0;	border-radius: 0;  }
	.x2 .slides.adaptive { position: absolute; max-width:110%;	top: 0;	left: 50%; margin:0 0 0 -50%;	border-radius: 0;  }
	.x2 .slides.adaptive .cycle-slide { display:block; position: absolute; max-width:120% ;	bottom: 0 ;	left: 0; margin:-50% 0 0 0;	border-radius: 0;  }
	.x3 .slider .adaptive{ position: absolute;	max-width: 110%; max-height:auto;	top: 45%;	left: 0%; margin:-19% 0 0 0%;	border-radius: 0;  }
}


/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
	
}

/* iPhone 4 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
		
	div#preloader, div#preloader img { visibility: hidden; display: none;	}
	
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent ;
        color: #000 ; /* Black prints faster: h5bp.com/s */
        box-shadow: none ;
        text-shadow: none ;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% ;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@font-face {
	font-family: 'PFBeauSansPro';
	src: url('PFBeauSansPro-Reg.eot');
	src: local('β�Ί'), url('PFBeauSansPro-Reg.woff') format('woff'), url('PFBeauSansPro-Reg.ttf') format('truetype'), url('PFBeauSansPro-Reg.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PFBeauSansPro';
	src: url('PFBeauSansPro-Bold.eot');
	src: local('β�Ί'), url('PFBeauSansPro-Bold.woff') format('woff'), url('PFBeauSansPro-Bold.ttf') format('truetype'), url('PFBeauSansPro-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'PFBeauSansPro';
	src: url('PFBeauSansPro-BoldItalic.eot');
	src: local('β�Ί'), url('PFBeauSansPro-BoldItalic.woff') format('woff'), url('PFBeauSansPro-BoldItalic.ttf') format('truetype'), url('PFBeauSansPro-BoldItalic.svg') format('svg');
	font-weight: bold;
	font-style: italic;
}