@charset "UTF-8";
/* CSS Document */

/* Global */
.fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width: initial; }
a { color: #555; }
a:hover { color: #999; }
p { line-height: 1.8rem; font-weight: 300; }
b { font-weight: 400; }
table { background: none; }
table { border-collapse: collapse; }
table, td, th { border: 1px solid #ccc; }
table tr th, table tr td { color: #555; }
table tr.even, table tr.alt, table tr:nth-of-type(even) { background: none; }
.required { color: #cc1616; font-size: 0.85rem }
button, .button { background: #333333; padding: 0.5rem 1rem; color: #ffffff; font-weight: 300; }
button:hover, button:focus, .button:hover, .button:focus { background: #9f9f9f; outline: none; }
.underline { text-decoration: underline; }
body{opacity:0;transition: opacity 1s;-webkit-transition: opacity 1s; /* Safari */}
hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* hover Transition Effect */
.fade { opacity: 1 !important; }
.fade:hover { opacity: 0.8 !important; }
.grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.shrink:hover { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); }
.circle:hover { border-radius: 50%; }
@-webkit-keyframes swing {  
15% {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
}
 30% {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
}
 50% {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
}
 65% {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
}
 80% {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
@keyframes swing {  15% {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
}
 30% {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
}
 50% {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
}
 65% {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
}
 80% {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}


/* page transition effect*/
#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* add .bounce for vertical bouncing effect */
.bounce {
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}


/* Header */
.contain-to-grid { background: #fff; opacity: 0.95; padding: 15px 0 5px 0; }
.top-bar { background: none; }
.top-bar .toggle-topbar.menu-icon a span::after { box-shadow: 0 0 0 1px #333, 0 7px 0 1px #333, 0 14px 0 1px #333 }
.top-bar.expanded .title-area { background: none; }
.top-bar-section ul { width: 50%; }
.top-bar-section ul ul { width: 100%; }
.top-bar-section ul li { background: #9f9f9f; }
.top-bar-section ul li.active > a, .top-bar-section ul li.active > a:hover { background: #333333; }
.top-bar-section ul li ul li > a{ padding-left:2rem;}
.logo { height: 48px; }
/* Content */
.content { margin-top: 1rem; }
.content ul li { text-align: center; font-weight: 300; transition:all 0.4s ease;}
.content ul li span { display: block; padding-bottom: 0.5rem; }
.content ul li span.type, .content ul li span.role { font-size: 0.75rem; font-weight: 300; }
.content ul li span.company { font-size: 0.938rem; font-weight: 400; text-transform: uppercase; }
.content ul li span.type { text-transform: uppercase; }
#contactFrom label { font-weight: 300; font-size: 0.938rem }
#contactFrom input, #contactFrom textarea { background: #f9f9f9; border: none; box-shadow: none; }
.content h2 { font-weight: 300; color: #333333; text-transform: uppercase; font-size: 1em; }
.content ul.sub-nav { padding: 0; margin: 1.8rem 0; }
.content ul.sub-nav li { font-weight: 300; color: #333333; text-transform: uppercase; font-size: 1em; list-style: none; padding: 0; margin: 0; float: none; text-align: left; margin-bottom: 0.5rem }
.content ul.sub-nav li a { padding: 0; margin: 0; font-weight: 300 }
.content ul.sub-nav li.active a, .content ul.sub-nav li a:hover { color: #333333; background: none; font-weight: 400 }
.content form { margin-bottom: 1.8rem; }
.content .services li { text-align: left; text-align:center }
.content .services li span{ border:1px solid #e6e6e6;margin:0 0.2rem; padding:0.8rem;}
.content .services li span p{ font-size:0.9rem; margin-bottom:0}
.content button.btn { font-size: 0.85rem; color: #333333; border: 1px solid #9f9f9f; background: none; margin-bottom: 0.2rem; }
.content button.active, .content button.btn:hover, .content button.btn:focus { color: #ffffff; background: #000000; }
.content h2.clientName { background: #000000; color: #ffffff; border: 1px solid #000000; display: inline-block; padding: 0.4rem 1rem; vertical-align: bottom; margin-top: 0 }
.content p.type, .content p.role { background: #ffffff; color: #000000; border: 1px solid #000000; display: inline-block; padding: 0.25rem 1rem; vertical-align: bottom; margin-bottom: 0.5rem; font-size: 0.875em; }
.content #parent a img:hover { opacity: 0.7 }
.content .medium-centered { text-align: center; }
.content .medium-centered img { margin-bottom: 2rem; }
.content img.border { border: 1px solid #eeeeee; }
.content .back-to { text-transform: uppercase; font-weight: 300; display: block; margin-bottom: 1rem; background: url(../img/btn_close.png) no-repeat 0 0; padding-left: 36px; line-height: 33px; vertical-align: middle; }
.content .back-to:hover { background: url(../img/btn_close.png) no-repeat 0 -33px; color: #9f9f9f }
.content .back-btn { background: #333333; color: #ffffff; padding: 0.5rem 1rem; }
.content .back-btn:hover { background: #000000; color: #ffffff; }

.content .home-title{ font-size:2.3rem; margin-bottom:2rem;}
.content .services-icon img{height:30px; margin-top:33%;}
.content .services-icon li a:hover span{ background:#fff; border:1px solid #000; color:#000;}
.content .services-icon li span{width: 100%; background: #f5f5f5; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;padding:0 !important;overflow:hidden;}
.content .services-icon li span:before{ content:''; padding-top:100%; /* vertical value as  100% equals width */  float:left;}


.content .latest-works-icon li a{ text-transform:uppercase;}
.content .latest-works-icon .work-type{ color:#999; font-size:0.8rem;}


.slider-nav img{ width:100px; margin:0 !important;}
.slider-for img{margin:0 auto !important;}
.slider-nav .slick-list{ width:100%; margin:0 auto;}

#slider1, #slider1 li{ height:220px;}
#slider1 li{ position:relative;}
.caption { top: 28%; padding-left:10%; z-index:999}
.caption span{ background:#000; color:#fff; padding:0.5rem 0.8rem; font-size:1rem; display:inline-block;}
.caption h1{ font-size:1.8rem; line-height:0.8; margin:0; font-weight:600;}
.caption h2{ font-size:1.3rem; line-height:1.8; margin:0}
.white h1, .white h2{ color:#fff;}
.white span{ background:#fff; color:#000; }
.overlay{ background:#fff; opacity:0.5; width:100%; height:100%; position:absolute; top:0; left:0; z-index:99}


/* footer */
.footer { font-size: 0.813rem; font-weight: 300; margin: 3rem 0 }
 @media only screen and (min-width: 40.063em) {
/* Header */
.header { margin: 1rem 0 1.5rem; }
.top-bar .name h2 { font-weight: 300; color: #9f9f9f; text-transform: uppercase; font-size: 1.3rem }
.top-bar-section ul { width: auto; }
.top-bar-section ul li { background: none; float: none; }
.top-bar-section ul li a{padding:5px !important; -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;}
.top-bar-section ul li ul li > a{ padding-left:0;}
.top-bar-section li:not(.has-form) a:not(.button) { background: none; color: #9f9f9f; line-height: 0.9rem; padding: 0; margin: 0 0 0.3rem 0; text-align: right; text-transform: uppercase; font-weight: 300; font-size: 0.88em; }
.top-bar-section li:not(.has-form) a:not(.button):hover { background: #000000; color: #ffffff; }
.top-bar-section li.active:not(.has-form) a:not(.button) { background: none; color: #333333; line-height: 0.9rem; padding: 0; margin: 0 0 0.3rem 0; text-align: right; text-transform: uppercase; font-weight: 400; font-size: 0.88em; }
.top-bar-section li.active:not(.has-form) a:not(.button):hover { background: #000000; color: #ffffff; }

.top-bar-section li.active:not(.has-form) li a:not(.button) { color: #9f9f9f; font-weight: 300; margin:0; line-height: 0.8rem; padding:2px 0 0 5px; }
.top-bar-section li.active:not(.has-form) li a:not(.button):hover { background:#000000; color:#ffffff; }
.top-bar-section li.active:not(.has-form) li.active a:not(.button) { color: #333333; font-weight: 300; margin:0; padding:2px 0 0 5px; background:#000000; color:#ffffff;}
.top-bar-section li.active:not(.has-form) li.active a:not(.button):hover { background:#000000; color:#ffffff; }
.top-bar-section li.active:not(.has-form) li:first-child a:not(.button){  margin-top:-0.3rem;}
.top-bar-section li.active:not(.has-form) li:last-child a:not(.button){  margin-bottom:0.5rem;}

.top-bar-section li:not(.has-form) li a:not(.button) {  line-height: 0.6rem; margin:0;}
.top-bar-section li:not(.has-form) li:first-child a:not(.button){  margin-top:-0.3rem; line-height:0.8rem; margin-bottom:0}
.top-bar-section li:not(.has-form) li:last-child a:not(.button){ margin-bottom:0.5rem;}

.logo { height: 85px; }


/* Content */
.content { margin-top: 0rem; }
.content h2 { font-weight: 300; color: #333333; text-transform: uppercase; font-size: 1em; }
.content ul.sub-nav { margin: 0 0 1.8rem -0.9375rem }
.content ul.sub-nav li { margin-bottom: 0.9rem }
.content form { margin-bottom: 0; }
.content button.btn { margin-bottom: 0.5rem; }
.content .services li span{ margin:0.2rem; padding:1.5rem;}

.services-icon img{height:25px; margin-top:30%;}
.services-icon span{ font-size:0.85rem;}

.event-production img { width: 600px; margin: 0.5rem !important }
.production-facilities img { width: 325px; margin: 0.5rem !important }

.slider-nav{ width:600px; margin:0 auto;}
.slider-nav img{ width:150px; margin:0 !important;}
.slider-for img{margin:0 auto !important;}
.slider-nav .slick-list{ width:600px; margin:0 auto;}

#slider1, #slider1 li{ height:400px;}
.caption { top: 30%; padding-left:10%;}
.caption span{  padding:0.5rem 0.8rem; font-size:1.6rem;}
.caption h1{ font-size:4rem; line-height:1; margin:0;}
.caption h2{ font-size:2.8rem; line-height:1.8; margin:0}
}
 @media only screen and (min-width: 64.063em) {
	 

#slider1, #slider1 li{ height:500px;}
.caption { padding-left:12%;}

.services-icon img{height:30px; margin-top:33%;}
.services-icon span{ font-size:1rem;}
}