@font-face {
    font-family: 'ostrich_sansblack';
    src: url('../fonts/ostrich-black.eot');
    src: url('../fonts/ostrich-black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-black.woff2') format('woff2'),
         url('../fonts/ostrich-black.woff') format('woff'),
         url('../fonts/ostrich-black.svg#ostrich_sansblack') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ostrich_sansmedium';
    src: url('../fonts/ostrich-regular.eot');
    src: url('../fonts/ostrich-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-regular.woff2') format('woff2'),
         url('../fonts/ostrich-regular.woff') format('woff'),
         url('../fonts/ostrich-regular.svg#ostrich_sansmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ostrich_sanscondensed_light';
    src: url('ostrich-light.eot');
    src: url('ostrich-light.eot?#iefix') format('embedded-opentype'),
         url('ostrich-light.woff2') format('woff2'),
         url('ostrich-light.woff') format('woff'),
         url('ostrich-light.svg#ostrich_sanscondensed_light') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'quarkbold';
    src: url('../fonts/quark-bold.eot');
    src: url('../fonts/quark-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quark-bold.woff2') format('woff2'),
         url('../fonts/quark-bold.woff') format('woff'),
         url('../fonts/quark-bold.svg#quarkbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
.ostrich{font-family: 'ostrich_sansblack';}
.quark{font-family: 'quarkbold';}
.ostrich_m{font-family: 'ostrich_sansmedium';}
.clearfix:before, .clearfix:after {
    content: " ";
    display:  block;
	 clear:  both;
}
a{
    transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
	text-decoration:none !important;
}
.nopad{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
html,body {margin: 0; padding: 0;  max-width: 100%; color:#181E05; font-family:Tahoma;}
h1, h2, h3, h4, h5 { margin:0; padding:0;}
ul{ list-style:none; padding:0; margin:0;}
li{ list-style:none; padding:0; margin:0;}
.fr{ float: right;}
.fl{ float: left;}
p{ padding:0; margin:0;}
.black{ color:#181E05 !important;}
.white{ color:#FFF !important;}
.magenta{ color:#910F36;}
.img-100{width:100%;}
.no-pad{ padding:0 !important;}
.border-left{ border-left:1px solid #CCC}
.m-auto{ margin:auto;}
.space{ display:block;}
.padding-25{ padding-left:25px !important;}
.desktop{display:block !important;}
.mobile{display:none !important;}
.bg{ background:url(../images/bg.jpg);}

.warp{width:100%;}
.main{ width:80%; background:#CCC; padding:0 !important; float:left;}

/*/////////////LOADING/////////////*/


/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 999;
  /* makes sure it stays on top */
}

#status {
  width: 136px;
  height: 136px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  /*background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);*/
  /* path to your loading animation */
  background:url(../images/logo-load.png) no-repeat;
  background-repeat: no-repeat;
  background-position: center;
  margin: -68px 0 0 -68px;
/* is width and height divided by two */
}
.ball {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(114,12,43,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:126px;
	/*box-shadow: 0 0 35px #2187e7;*/
	width:136px;
	height:136px;
	margin:0 auto;
	-moz-animation:spin 3s infinite linear;
	-webkit-animation:spin 3s infinite linear;
}
@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}

/*/////////////LEFT SIDE/////////////*/

.left-side{ width:20%; background:#FFF; padding: 0 !important; float:left;}
.left-mobile{width:40%; display:none;}
.buttonset{ display:none;}
.left-side .frame{ margin:0 0 0 15%;}
.logo, .menu{margin-top:20px; margin-bottom:50px;}
.logo{ margin-top:0;}
.logo img{ width:60%;}
.menu{margin-top:0; font-family: 'ostrich_sansblack', 'quarkbold'; margin-bottom:50px;}
.menu li{ background:#FFF; text-transform:uppercase; display:block;}
.menu li a{ font-size:1.7em; margin:10px 0; padding:3px; color:#181E05;}
.menu li a:hover, .menu li a.active{ color:#FFF; background:#910F36;}
.social{ margin-top:0; margin-bottom:20px; }
.lag{ margin-top:0; margin-bottom:70px; }
.lag i{ width:17.5%; display:inline-block; }
.lag i img{ width:100%;}
.copyright{ font-size: 1em;}


/*/////////////MAIN////////////////////////////////////////////////////////////////////////////*/


main { width:75%; }
main h2{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:3em; color:#910F36; text-transform:uppercase; margin:0; }

/*/////////////H-BANNER/////////////*/

#h-banner{font-family: 'ostrich_sansblack', 'quarkbold'; color:white; text-transform:uppercase; position:relative;letter-spacing:-0.5px;}
#h-banner .detail{ background:url(../images/circle.png) no-repeat left; padding-left:45px;}
#h-banner p{ font-size:28px;}
#h-banner h3{ font-size:80px;}
#h-banner img{ width:100%;}
#h-banner a{ font-size:20px; color:white; padding:5px; background:#000;}
#h-banner .arrows{ position:absolute; bottom:0; right:0; z-index:99;}
#h-banner .arrows span{ width:46px; height:46px; display:inline-block;}
#h-banner .arrows-prev { background:url(../images/arrows_prev.jpg) no-repeat;}
#h-banner .arrows-next { background:url(../images/arrows_next.jpg) no-repeat;}

.slides .show-m{display: none;}

/*/////////////H-OUR SERVICE/////////////*/

#h-service{padding:0 !important; background:#181E05; }
#h-service h3{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.9em; color:#FFF; padding:3px 7px; background:#720C2B; text-transform:uppercase; display:inline-block; margin:12% 10% 0 10%;}
#h-service ul{ display:inline-block; margin:0; padding:0;}
#h-service li{ width:16%; display:inline-block; }
#h-service li img{ width:100%;}
#h-service .more{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; color:#181E05; padding:2px 7px; background:#FFF; text-transform:uppercase; display:inline-block; margin:14% 10% 0 10%;}

/*/////////////H-BOTTOM/////////////*/

#h-bottom{padding:40px 0 40px 0 !important; background: url(../images/bg.jpg); }
#h-bottom a:hover, #h-bottom a:link{color:#181E05;}
#h-bottom span{ margin:0; display:block; }
#h-bottom .add{ }
#h-bottom h2{ margin:0 0 0 4%; font-family: 'ostrich_sansblack', 'quarkbold'; font-size:2em; color:#FFF; text-transform:uppercase; color:#910F36;}
#h-bottom h3{font-family: 'ostrich_sansmedium', 'quarkbold'; font-weight: normal; font-size:3.7em; margin:0 0 0 4%; color:#FFF; text-transform:uppercase; margin:0 0 0 4%; color:#181E05;}
#h-bottom h4{ line-height:28px; padding:0 0 0 4%; margin:0; font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.7em; color:#FFF; text-transform:uppercase; color:#181E05;}
#h-bottom p{font-size:1em; color:#181E05; padding:10px 0 15px 4%;}
#h-bottom .more{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; color:#181E05; padding:2px 10px; background:#FFF; text-transform:uppercase; display:inline-block; margin:0 0 0 4%;}
#h-bottom figure{ display:inline-block;}
#h-bottom .pad-25{ padding-left:25px;}

/*/////////////ABOUT///////////////////////////////////////////*/

#about, #our-service, #our-project, #contact, #show-reel, #press{background: url(../images/bg.jpg); display:block; text-align:center; padding-bottom:50px; }
#about h3{font-family: 'ostrich_sansmedium', 'quarkbold'; font-size:4.4em; color:#181E05; text-transform:uppercase; }
#about .pic {}
#about img{ width:100%; display:inline-block; }
#about .text-head{font-size:1em; font-weight:bold; float:none;}
#about .text-detail{ font-size:1em; float:none;}

/*/////////////OUR SERVICE/////////////////////////////////////*/

#our-service .content { background:#FFF; float:none;}
#our-service .content img { width:100%;}
#our-service .content > div{ font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.35em; color:#181E05; float:none; }

/*/////////////OUR PROJECT///////////////////////////////////////////*/

#our-project h3{font-family: 'ostrich_sansmedium', 'quarkbold'; font-size:4.4em; color:#181E05; text-transform:uppercase; }
#our-project .text-head{ font-size:1em; font-weight:bold; float:none;}
#our-project .project { display:block; float:none;}
#our-project li{padding-bottom:30px;}
#our-project img{ width:100%;}
#our-project .pic {}
#our-project .prev {font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; color:#FFF; padding:5px 10px; background:#910F36; text-transform:uppercase; float:none;}
#our-project .job{padding:0 5%;}
#our-project .job span{ height:80px; padding:0 5%; background:#000; position:relative; display:block;}
#our-project .job p{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.5em; color:#FFF; position:absolute; top:14%; left:10%; z-index:99;}
#our-project .job i{width: 5em; height: 5em; background:#720C2B; -moz-border-radius: 2.5em; -webkit-border-radius: 2.5em; border-radius: 50px; position:absolute; top:-10%; left:2%; z-index:90;}
#our-project .more{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; padding:2px 10px; background:#910F36; text-transform:uppercase; display:inline-block; margin:0;}

/*/////////////SHOW REEL////////////////////////////////////////*/

#show-reel h3{font-family: 'ostrich_sansmedium', 'quarkbold'; font-size:4.4em; color:#181E05; text-transform:uppercase; }
#show-reel .chanel { display:block; float:none;}
#show-reel .clip { margin-bottom:30px; display:block; float:none;}
#show-reel .list { display:block; border:0; float:none;}
#show-reel li{padding-bottom:30px;}
#show-reel img { width:100%;}
#show-reel .pic {}
#show-reel .job{padding:0 5%;}
#show-reel .job span{ height:80px; padding:0 5%; background:#FFF; position:relative; display:block;}
#show-reel .job p{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; padding:7px 3px; margin:0;}
#show-reel .job p a{ color:#181E05}
#show-reel .active span, #show-reel li:hover span{ background:#720C2B;}
#show-reel .active p a, #show-reel li:hover, #show-reel li:hover p a{ color:#FFF}
#show-reel .more{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; padding:2px 10px; background:#910F36; text-transform:uppercase; display:inline-block; margin:0;}


/*/////////////PRESS///////////////////////////////////////////*/

#press h3{font-family: 'ostrich_sansmedium', 'quarkbold'; font-size:4.4em; color:#181E05; text-transform:uppercase; }
#press .chanel { display:block; float:none;}
#press li{padding-bottom:30px;}
#press img { width:100%;}
#press .pic {}
#press .job{padding:0 5%;}
#press .job span{ height:95px; padding:0 5%; background:#000; position:relative; display:block;}
#press .job .mmore{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.1em; position:absolute; bottom:8px; right:4%; z-index:99; background:#FFF; padding: 0 5px; margin:0;}
#press .job .date{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.1em; position:absolute; bottom:5px; left:7%; z-index:99; padding: 0 5px; margin:0; color:#FFF;}
#press .job p{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.1em; height:40px; overflow:hidden; color:#FFF; position:absolute; top:15px; line-height:20px; left:10%; z-index:99; padding: 0 10px 0 0; margin:0;}
#press .job i{width: 5em; height: 5em; background:#720C2B; -moz-border-radius: 2.5em; -webkit-border-radius: 2.5em; border-radius: 50px; position:absolute; top:-10%; left:2%; z-index:90;}
#press .more{font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.2em; padding:2px 10px; background:#910F36; text-transform:uppercase; display:inline-block; margin:0;}

/*/////////////CONTACT///////////////////////////////////////////*/

#contact .map{ height:400px;}
#contact .address{ float:none;}
#contact h3{  line-height:28px; font-family: 'ostrich_sansblack', 'quarkbold'; font-size:2em; text-transform:uppercase; color:#910F36;}
#contact .address ul{ float:none; display:block;}
#contact .address li{ border-left:1px #CCC solid; padding:0 3%; display:block;}
#contact .address li:first-child{ border-left:0;}
#contact .address li .detail{ font-size:0.85em;}
#contact .address li .social{ margin-top:0; margin-bottom:20px; }
#contact .address li h4{ font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.4em; margin:0}
#contact .address li p{font-size:0.85em; color:#181E05; padding:10px 0 0 0; margin:0 line-height:18px;}
#contact .f-contact{ float:none; background:#FFF;}
#contact .f-contact .form{ float:none;}
#contact .f-contact .form li{ border:0; padding-left:0; margin-bottom:20px;}
#contact .f-contact .form .right-nopad{ padding-right:0 !important; }
#contact .f-contact .form li span{ border:1px #CCC solid !important; background:#181E05; display:block}
#contact .f-contact .form label{ height:36px; line-height:36px; margin:0; color:#FFF;}
#contact .f-contact .form input{ height:36px; line-height:36px; border:0; background:#FFF; float:left;}
#contact .f-contact .form .code{ height:38px; padding:0; margin:0;}
#contact .f-contact .form .code img{ height:100%;}
#contact .f-contact .form textarea{ width:84.4333%; height:98px; line-height:20px; padding-top:10px; padding-bottom:10px; border:0; resize:none;}
#contact .f-contact .form .submit{ font-family: 'ostrich_sansblack', 'quarkbold'; font-size:1.7em; height:38px; line-height:38px; color:#FFF; background:#720C2B;}


.mm-menu.mm-pageshadow::after {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.mm-menu.mm-pageshadow::after {
    content: "";
    display: block;
    height: 120%;
    left: 100%;
    position: absolute;
    top: -10%;
    width: 20px;
    z-index: 99;
}