@font-face {
	font-family:'americana';
	src:url(fonts/AmericanaStd.otf);
}

@font-face {
	font-family:'centuryGothic';
	src:url(fonts/CenturyGothic-Reg.ttf);
}

@font-face {
	font-family:'centuryGothic-bold';
	src:url(fonts/CenturyGothic-Bold.ttf);
}

@font-face {
	font-family:'centuryGothic-italic';
	src:url(fonts/CenturyGothic-Italic.ttf);
}

@font-face {
	font-family:'centuryGothic-bold-italic';
	src:url(fonts/CenturyGothic-Bold-Italic.ttf);
}
::selection {
  background: #e2d59a; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #e2d59a; /* Gecko Browsers */
}

body {
	background-color:#222;
	font-family:'americana',sans-serif;
}

.container {
	background-color:#bdb27d;
	background-image:url(background.png);
	position:relative;
	border-radius:25px;
	width:900px;
	height:825px;
	margin:30px auto;
    background-repeat: no-repeat;

}

@media only screen and (max-width: 910px) {
	.container {
		width:400px;
	height:auto;
	background-image:url(background-mobile.png);
border-radius: 25px ;
overflow-x: hidden;

	}
}


.header {
border-radius: 15px;
    height: 107px;
    width: calc(100% - 44px);
    margin: 0 auto;
    padding: 24px 0 0;
    text-align: center;
}

/* folder */
.folder-tabs {
    width: calc(100% - 44px);
    z-index: 0;
    position: relative;

}
	.folder-tabs-mobile {
	display: none;
	
	}
@media only screen and (max-width: 910px) {
	.folder-tabs {
	display: none;
	
	}
	.folder-tabs-mobile {
	display: block;
	
	}
	.mobile-menu{
    position: absolute;
    top: 160px;
    left: 22px;
    width: 125px;
    background: #f2e6a7;
    height: 165px;
    z-index: 9;
    text-align: center;
    margin:  0;
    padding: 20px 0;
	display: none;
	border-radius: 0 0 25px 25px;
	}
	.tab-mobile{
	line-height: 25px;
	}
}



.folder, .folder-background {
	background:#f1e6ab;
	position:absolute;
	width:calc(100% - 44px);
	height:466px;
	margin:0 auto;
	left:22px;
	display:none;
	top:161px;
	border-radius:25px;
    z-index: 5;
}
.folder-background{
display:block;
}

@media only screen and (max-width: 910px) {
	.folder, .folder-background {
	
	    position: relative;
	    top: 6px;
	    left: 0;
		margin: 0 auto 22px 22px;
	    display: inline-block;
		height:auto;
	
	}

}



.tab-1,.tab {
	background:none;
	background-image:url(nav/Home_02.png);
	width:125px;
	height:30px;
	margin:0;
	padding:0;
	position:relative;
	float:left;
	z-index:10;
	left:22px;
	text-align:center;
	line-height:42px;
	color:#676767;
}
.tab-1{
	width:129px;

}

@media only screen and (max-width: 910px) {
	.tab {
	    position: absolute;
	}
}

.tab:hover {
	color:#000;
	cursor:pointer;
}

.tab-1 {
	background-image:url(nav/Home_01.png);
	height:48px;
z-index: 1;
}

#tab-3,#tab-4,#tab-5 {
	background-image:url(nav/Home_03.png);
}

#tab-6 {
	background-image:url(nav/Home_06.png);
	width: 130px;
	padding: 0 5px 0 0;
}

@media only screen and (max-width: 910px) {
	.tab {
	    position: absolute;
	}

	.tab-1 {
		background-image:url(menu_mobile.png);
		height:48px;
	z-index: 1;
	width:200px;
	padding: 0 0 0 40px;
	text-align: left;
	}

}


.footer {
	position:absolute;
	bottom:0;
	left:0;
}
@media only screen and (max-width: 910px) {
.footer {
	position:relative;
}
}

.brochure-link {
	background-color:#f2e6ab;
	width:457px;
	height:150px;
}

.filmstrip-gallery {
	width:524px;
	height:222px;
	position:absolute;
	bottom:2px;
	left:401px;
}
@media only screen and (max-width: 910px) {
	.filmstrip-gallery {
	    width: 400px;
	    height: 200px;
	    position: relative;
	    top: 0px;
	    left: 0px;

	}
}
.filmstrip {
	background-image:url(IJM_site_main-film-2.png);
	width:100%;
	height:100%;
	position: relative;
z-index: 2;

}



.filmstrip-gallery1{
    width: 119px;
    height: 196px;
    position: absolute;
    left: 15px;
    top: 3px;
    overflow: hidden;


}
.filmstrip-gallery2{
    width: 119px;
    height: 196px;
    position: absolute;
    left: 134px;
    top: 3px;
    overflow: hidden;

}

.filmstrip-gallery3{
    width: 119px;
    height: 196px;
    position: absolute;
    left: 254px;
    top: 3px;
    overflow: hidden;

}
.filmstrip-gallery4{
    width: 119px;
    height: 196px;
    position: absolute;
    left: 374px;
    top: 3px;
    overflow: hidden;

}
.filmstrip-gallery-image{
    width: 177px;
    top: 45px;
    position: absolute;
	display:none;
}
.filmstrip-gallery1 .filmstrip-gallery-image{
    width: 220px;
    top: 45px;
    position: absolute;
}

@media only screen and (max-width: 910px) {
	.filmstrip {
    background-image: url(IJM_site_main-film-2.png);
    width: 420px;
    height: 100%;
    position: relative;
    z-index: 2;
    background-size: 420px;
	background-repeat: no-repeat;
	}


.filmstrip-gallery1{

    width: 93px;
    height: 167px;
    position: absolute;
    left: 12px;
    top: -4px;
    overflow: hidden;
}
.filmstrip-gallery2{
    width: 96px;
    height: 136px;
    position: absolute;
    left: 108px;
    top: -19px;
    overflow: hidden;

}

.filmstrip-gallery3{
    width: 95px;
    height: 196px;
    position: absolute;
    left: 205px;
    top: -12px;
    overflow: hidden;

}
.filmstrip-gallery4{
width: 94px;
    height: 129px;
    position: absolute;
    left: 301px;
    top: 3px;
    overflow: hidden;

}


}



h1,h2,h3,h4,h5 {
	text-align:center;
	padding:0;
	margin:0;
}

h1 {
	font-size:32px;
	margin:25px 0 0;
}

h2 {
	font-size:19px;
	margin:0;
	line-height:11px;
}
@media only screen and (max-width: 910px) {
h1 {
	font-size:24px;
}


	h2{
	line-height: 19px ;
font-size: 12px;
	}
}

/* home */
#home-background {
	background-image:url(background_final.png);
	background-repeat:no-repeat;
	width:805px;
	height:420px;
	margin:22px auto;
}
@media only screen and (max-width: 910px) {
	#home-background {
    background-image: url(background_final.png);
    background-repeat: no-repeat;
    width: 330px;
    height: 427px;
    margin: 24px 12px;
    position: relative;
	border-radius: 25px;
	}
}

#home-logo {
	background-image:url(logo@2x.png);
	background-repeat:no-repeat;
	width:175px;
	height:91px;
	margin:0 auto;
	background-size:154px;
	position:absolute;
	top:-88px;
	left:calc(50% - 87px);
}

@media only screen and (max-width: 910px) {
#home-logo {

width: 145px;
background-size: 145px;
left: calc(50% - 73px);
}
}
#home-info {
	top:160px;
	position:relative;
	margin:0 auto;

    text-align: center;
}

#home-title-underline {
	border-bottom:1px solid #000;
	width:325px;
	margin:9px auto;
	height:20px;
}
@media only screen and (max-width: 910px) {
#home-title-underline {
    width: 287px;
}

}
h3 {
	font-size:22px;
	top:0;
	position:relative;
}

h4 {
	font-size:15px;
	margin:4px 0 17px;
}

h5 {
	font-family:'centuryGothic';
	margin:5px;
}

.stats {
font-family: 'centuryGothic-bold';
	margin:0 auto;
	font-size:13px;
}

tr {
	line-height:14px;
}

tr td:first-child {
	text-align:right;
}

tr td:last-child {
	text-align:left;
}

/* end home */
/* about */
#about-whatwedo {
	background-image:url(IJM_site_main-whatwedo-gradient.png);
	background-repeat:no-repeat;
	width:240px;
	height:420px;
	font-family:'centuryGothic';
	margin:28px 0 0 28px;
	padding:9px 14px;
	float:left;
}

@media only screen and (max-width: 910px) {
	#about-whatwedo {
		height: auto;
	    position: relative;

	}
}

.about-title {
	font-family:'centuryGothic-bold-italic';
	font-size:23px;
	margin:0 0 14px;
	z-index:3;
	position:relative;
}

.about-subtitle {
	font-family:'centuryGothic-bold';
	font-size:12px;
	margin:0 0 7px;
}

li {
	font-size:12px;
	list-style:none;
	margin:8px 0;
}

#about-executive {
	width:509px;
	height:408px;
	font-family:'centuryGothic';
	margin:28px 0;
	padding:9px 14px;
	float:left;
	overflow:hidden;
	z-index:2;
	position:relative;
}

@media only screen and (max-width: 910px) {
	#about-executive {
	    width: 279px;
	    margin: 28px;
		border-radius: 25px;
	}
}

#about-executive-content {
width: 470px;
height: 390px;
font-family: 'centuryGothic';
margin: 0;
top: -33px;
padding: 3px 10px 0 19px;
position: relative;
overflow-y: scroll;
}

.about-executive-background {
	background-image:url(IJM_site_main-whatwedo-gradient.png);
	background-repeat:no-repeat;
	position:absolute;
	width:400px;
	height:400px;
	top:-20px;
	left:-37px;
	z-index:2;
	pointer-events:none;
}

#about-wrapper {
	width:500px;
	height:400px;
	margin:auto;
	position:relative;
	top:-33px;
	left:15px;
	z-index:0;
}

@media only screen and (max-width: 910px) {
	#about-wrapper {
	    width: 100%;

	}
	#about-executive-content {
	    width: 257px;
	}
}


/* projects */
#projects-whatwedo {
	background-repeat:no-repeat;
	width:240px;
	height:420px;
	font-family:'centuryGothic';
	margin:28px 0 0 28px;
	padding:9px 14px;
	float:left;
}

.projects-title {
	font-family:'centuryGothic-bold-italic';
	font-size:23px;
	margin:0 0 14px;
	z-index:3;
	position:relative;
	text-align:center;
}

.projects-subtitle {
	font-family:'centuryGothic-bold-italic';
	font-size:15px;
	margin:0;
	text-align:center;
}

#projects-executive {
	background-image:url(national_experience.png);
	background-repeat:no-repeat;
	width:509px;
	height:408px;
	font-family:'centuryGothic';
	margin:28px 0;
	padding:9px 14px;
	float:left;
	overflow:hidden;
	z-index:2;
	position:relative;
}

#projects-executive-content {
width: 230px;
height: 379px;
font-family: 'centuryGothic';
margin: 0;
top: -20px;

padding:  0 15px 0 0;
position: relative;
overflow-y: scroll;
}

.signature-year,.signature-sub,.signature-title{

}
.signature-title{
	font-family:'centuryGothic-bold';
margin: 0 0 0 40px;
}
.signature-sub{
margin: 0 0 0 40px;
}

.signature-year{

float: left;
width: auto;
}

@media only screen and (max-width: 910px) {
	#projects{
		float:left;
	}
	#projects-executive{
		width:333px;
		margin: 14px;
		background-size: 333px;
		height: 240px;
	}
	#projects-executive-content {
		width: 290px;

	}
#projects-whatwedo{
width:auto;
}
}
.projects-executive-background {
	background-image:url(IJM_site_main-whatwedo-gradient.png);
	background-repeat:no-repeat;
	position:absolute;
	width:400px;
	height:400px;
	top:-45px;
	left:-15px;
	z-index:2;
	pointer-events:none;
}

#projects-wrapper {
	width:238px;
	height:400px;
	margin:auto;
	position:relative;
	top:-34px;
	left:0;
	z-index:0;
}

#projects-executive-content ul {
	padding:0;
}

/* end projects */
/* clients */
#clients-whatwedo {
	background-image:url(IJM_site_main-whatwedo-gradient.png);
	background-repeat:no-repeat;
	width:240px;
	height:420px;
	font-family:'centuryGothic';
	margin:28px 0 0 28px;
	padding:9px 14px;
	float:left;
}
@media only screen and (max-width: 910px) {
	#clients-whatwedo {
height: 240px;
position: relative;
float: left;
padding: 15px;
width: 260px;
float: left;
margin: 30px;
height: auto;
	}
}

	

.clients-title {
	font-family:'centuryGothic-italic';
	font-size:24px;
	margin:0 0 14px;
	z-index:3;
	position:relative;
font-weight: bold;
}

.clients-subtitle {
font-family: 'centuryGothic-bold';
font-size: 12px;
margin: 0 0 17px 15px;
}

li {
	font-size:12px;
	list-style:none;
	margin:8px 0;
}

#clients-executive {
	width:509px;
	height:408px;
	font-family:'centuryGothic';
	margin:28px 0;
	padding:9px 14px;
	float:left;
	overflow:hidden;
	z-index:2;
	position:relative;
border-radius: 25px;
font-weight: bold;

}

#clients-executive-content {
	width:480px;
	height:412px;
	font-family:'centuryGothic';
	margin:0;
	top:-33px;
	padding:3px 0 0 19px;
	position:relative;
	overflow-y:scroll;
}

.clients-executive-background {
	background-image:url(IJM_site_main-whatwedo-gradient.png);
	background-repeat:no-repeat;
	position:absolute;
	width:400px;
	height:400px;
	top:-35px;
	left:-37px;
	z-index:2;
	pointer-events:none;
}

#clients-wrapper {
    width: 500px;
    height: 400px;
    margin: auto;
    position: relative;
    top: -21px;
    left: 15px;
    z-index: 0;
}

.clients-list {
	width:500px;
	float:left;
	padding:0;
	line-height:18px;
	margin:25px 15px 0;
	position:relative;
	text-indent:-10px;
font-weight: normal;


}
.clients-list li{
padding: 0;
width: 215px;
float: left;
margin: 0 30px 0 0;

}

@media only screen and (max-width: 910px) {
	.clients-list {
		    margin: 32px;
	    position: relative;
	width:300px;


	}
	#clients-executive{
margin: 33px;
    border-radius: 25px;
    height: auto;
}
}
/* end clients */
/* gallery */
#gallery{
    display: block;
    background: #1e1e1e;
    z-index: 5;
}
.gallery-image{    
width: 594px;
    height: 420px;
    background: black;
    margin: 22px;
    border-radius: 25px;
	overflow: hidden;
	position: relative;
    float: left;
    z-index: 3;
}
.gallery-image img{
width: 595px;
height: auto;
position: absolute;
top: 0px;
}
.gallery-list{
    width: 209px;
    float: left;
    position: absolute;
    font-size: 10px;
    overflow-y: scroll;
    height: 390px;
    margin: 22px 0 0 0;
    background: black;
    padding: 30px 0 0 56px;
    right: 17px;
    z-index: 1;
    border-radius: 0 25px 25px;
}
.gallery-list a{
    font-family: 'centuryGothic';
    text-decoration: none;
    color: #888;
    font-size: 10px;
    line-height: 22px;
}
.gallery-list a:hover{
    color: white;
}
.count{
position: absolute;
right: 80px;
font-family: 'centuryGothic';
bottom: 20px;
font-size: 12px;
color: white ;
}

@media only screen and (max-width: 910px) {
 #gallery{
    display: block;
    background: black;
    z-index: 5;
    height: 550px;
    position: relative;
}
	.gallery-image {
		width: 356px;
		height: 300px;
		margin: 0;
	}
	.gallery-image img{
		width: 100%;
		height: auto;
	}
	.gallery-list{
	position: relative;
	margin: 0 0 20px 20px;
	border-radius: 25px;
	width: 261px;
	height: 200px;
	}
	
	.count{
	font-size: 10px;
bottom: 18px;

	}

}

.image-footer{
    height: 67px;
    background: black;
    opacity: .8;
    position: absolute;
    bottom: 0px;
    width: 600px;
}



.theatreName{
font-family: 'centuryGothic';
font-size: 20px;
position: absolute;
left: 100px;
top: 13px;
color: white;
}
.location{
font-family: 'centuryGothic';
font-size: 12px;
position: absolute;
left: 100px;
top: 37px;
color: white;
}
.next, .prev{
    background-image: url(arrow@2xright.png);
width: 15px;
height: 30px;
position: absolute;
top: 17px;
    left: 38px;
    background-size: 100% 100%;
   background-color: transparent;
    left: 538px;
border: none;
cursor: pointer;
opacity:.5;

}
.next:hover, .prev:hover{
opacity:.9;

}
.prev{
    background-image: url(arrow@2xleft.png);
        left: 38px;

}

@media only screen and (max-width: 910px) {
	.image-footer{
	    width: 100%;
	}
	.next{
		left:300px;
	}
	.prev{
		left:25px;
	}
.theatreName{
font-size: 18px;
left: 60px;

}
.location{
font-size: 11px;
left: 60px;


}
}

/* end gallery */
/* contact */
#contact{
    font-family: 'centuryGothic-bold-italic';

}
.contact-map{    
    background-image: url(ijm_satellite_update.jpg);
    width: 560px;
    position: relative;
    float: left;
    height: 420px;
    /* background: black; */
    border-radius: 25px 0 0 25px;
    margin: 22px;
    background-size: 100%;
overflow: hidden;
}


.contact-info{
margin: 22px;
border-radius: 25px;
position: absolute;
float: left;
width: 240px;
padding: 15px 15px;
line-height: 16px;
right: 0px;
background-color: #f1e5ae;
background-image: url(IJM_site_main-whatwedo-gradient.png);
background-repeat: no-repeat;

}
.contact-title{
    font-size: 18px;
}
@media only screen and (max-width: 910px) {
	.contact-map {
width: 335px;
margin: 10px;
border-radius:25px;
padding: 0;
height: auto;
/* background-color: #f1e5ae; */
overflow: hidden;
top: 0;
	}

.contact-info{

position: relative;
width: 325px;
margin: 15px 0;
}

}



.name, .position, .mail{
    font-family: 'centuryGothic-bold';
    font-size: 14px;
    margin: 20px 0 0 0px;
    width: 100%;
    text-indent: 22px;
}
.position, .mail{
    font-family: 'centuryGothic';
    margin: 5px;
}
/* scrollbar */
.force-overflow {
	min-height:50px;
}

.scrollbar-fade-top {
	background-image:url(top_fade.png);
	width: calc(100% - 13px );
	height:30px;
	z-index:1;
	position:RELATIVE;
	top:-4px;
}

.scrollbar-fade-bottom-black {
background-image: url(fade_bottom_black.png);
width: 200px;
height: 50px;
z-index: 10;
position: absolute;
bottom: 24px;
right: 34px;
pointer-events: none;
}

.scrollbar-fade-top-black {
background-image: url(fade_top_black.png);
width: 200px;
height: 50px;
z-index: 10;
position: absolute;
top: 22px;
right: 34px;
pointer-events: none;
}

@media only screen and (max-width: 910px) {
.scrollbar-fade-bottom-black {
width: 260px;
bottom: 18px;
right: 45px;
pointer-events: none;
}

.scrollbar-fade-top-black {
width: 260px;
top: 298px;
right: 45px;
pointer-events: none;
}

}
.scrollbar-fade-bottom {
background-image: url(bottom_fade.png);
width: calc(100% - 13px );
height: 30px;
position: absolute;
bottom: 10px;
pointer-events: none;
}


.scrollbar::-webkit-scrollbar-track {
	border-radius:0px;
	border:3px solid #f2e6a7;
	background-color:#7a7463;
}

.gallery-list.scrollbar::-webkit-scrollbar-track {
	border: 3px solid #1e1e1e;
}

.scrollbar::-webkit-scrollbar {
	width:8px;
	background-color:#F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
	border-radius:4px;
	-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.3);
	background-color:#7a7463;
}

p {
	font-size:12px;
	line-height:19px;
}

p strong {
	font-family:'centuryGothic-bold';
}

.counter{
color: white;
font-family: 'centuryGothic-bold';
width: 400px;
font-size: 60px;
position: absolute;
top: calc( 50% - 110px);
left: calc( 50% - 200px);
}