@ƒfont-face {
    font-family: MuseoSlab;
    font-weight: 500;
    src: url("/fonts/MuseoSlab-500.otf") format("opentype");
}
@font-face {
    font-family: AvenirLt;
    font-weight: 35;
    src: url("/fonts/AvenirLTStd-Light.otf") format("opentype");
}
@font-face {
    font-family: AvenirBook;
    font-weight: 45;
    src: url("/fonts/AvenirLTStd-Book.otf") format("opentype");
}
@font-face {
    font-family: AvenirMedium;
    font-weight: 65;
    src: url("/fonts/AvenirLTStd-Medium.otf") format("opentype");
}
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/**** Globals ****/ 
html *{
    font-family: AvenirBook, Helvetica, Verdana, Sans-Serif;
    font-weight:400;
    color:#666666;
}
body{
    height:100%;
    width:100%;
}
h1{
    font-family: MuseoSlab, Helvetica, Verdana, Sans-Serif;
    color:#333333;
    font-size:34px;
    line-height:1.3em;
    margin-bottom:0;
}
h2{
    font-family: AvenirLt, Helvetica, Verdana, Sans-Serif;
    color:#666666;
    font-size:18px;
    margin:0;
}
a{
    color:#0285cc;
    text-decoration:none;
}


/*** Header ***/
#Header{
    background-color:#0285cc;
    height:68px;
    width:100%;
    line-height:68px;
    vertical-align:center;
}
#Header div.logo, #Header div.nav{
    display:inline-block;
    line-height: 68px;
    vertical-align: middle;
}
#Header div.logo{
    float:left;
}
#Header div.logo img {
    margin-top:8%;
}
#Header div.nav{
    float:right;
}
#Header div.nav a{
    color: #fff;
}
/*** Footer ***/
#Footer{}
#Footer .inner-container{
    border-top: 2px dashed #cccccc;
}
#Footer div.nav{
    display:block;
    line-height:40px;
    vertical-align:middle;
}
#Footer div.nav a{
    text-decoration:underline;
}
#Footer div.copyright{
    display:block;
}

/*** Header/Footer shared ***/
div.inner-container{
    margin:0 auto;
}
div.nav ul{
    display:inline-block;
}
div.nav li{
    float:left;
}
div.nav a{
    padding: 0 5px;
    text-decoration: none;
    border-right: 1px solid white;
    line-height: 11px;
    vertical-align: middle;
    display: inline-block;
}
div.nav li.first a{
    padding-left:0;
}
div.nav li.last a{
    border-right:none;
    padding-right:0;
}
div.nav a.last{
    border-right:none;
}
div.nav a.active{
    text-decoration:underline;
}
div.nav a:hover{
    text-decoration:underline;
}
div.copyright ul{
    display:inline-block;
}
div.copyright ul li {
    float:left;
    padding-right:5px;
}
div.copyright ul li.contact{
    list-style-type:disc;
    list-style-position:inside;
}



/* NEW MODAL */
div.modal-content-wrapper{
    width: 100%;
    height: 100%;
}
div.modal{
    background: transparent url('../images/ie_modal_bg.png') repeat 0 0; /* Move to IE < 8 */
    position:fixed;
    width:100%;
    height:100%;
    z-index:99;
    display:none;
}
div.modal .top, div.modal .bottom{
    position:absolute;
    width:100%;
    z-index:99;
}
div.modal .top{
    top:0;
    right:0;
    text-align:right;
    width:100%;
    z-index:99;
}
div.modal .top a.close{
    line-height: 1;
    padding: 5px 10px;
    font-size: 20px;
    background-color: #888;
    border:1px solid #ebebeb;
    font-weight: 600;
    display:inline-block;
    color:#ffffff;
}
div.modal .top a.close:hover{
    border-color:#00C0E2;
    color:#00C0E2;
}
div.modal .bottom{
    bottom:0;
}
div.modal .bottom {
    background-color:#e3e3e3;
    padding:10px 0 10px 70px;
}
div.modal .bottom span.campaign-name{
    color:#333333;
    font-size:22px;
    font-family: AvenirMedium, Helvetica, Verdana, Sans-Serif;
}
bottom span.device{
    font-size: 16px;
}
div.modal .bottom div.video-desc-container{
    position:relative;
}
p.campaign-desc{
    padding-left: 60px;
}
div.modal .bottom .video-desc-container img{
    position:absolute;
    top:-22px;
    left:0px;
}
div.modal .bottom span.campaign-name, div.modal .bottom span.device{
    text-transform:capitalize;
    display:block;
    font-size: 18px;
}
div.modal div.player{
    width:887px;
    height:524px;
    padding:0;
    margin:0 auto;
    position: relative;
    background:url("../images/laptop-cont.png") no-repeat center center;
}
div.modal div.player iframe{
    width:674px;
    height:421px;
    position: absolute;
    top:30px;
    left:106px;
}
/* div.modal div.player{
    width:674px;
    height:421px;
    padding:30px 107px 73px 107px;
    margin:0 auto;
    position: relative;
    background:url("../images/laptop-cont.png") center no-repeat;
    /*
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    */
}
/*
.player iframe,  
.player object,  
.player embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/
div.modal div.player-container{}
/* regular */

div.modal div.centerer{
    width: 100%;
    height: 480px;
    position: absolute;
    top: 50%;
    margin-top: -260px;
    text-align:center;
}

div.modal div.centerer.mobile{
    height: 720px;
    top: 50%;
    margin-top: -390px;
}
.centerer.mobile .player{
    background: transparent url("../images/mobile_bg.png") no-repeat center center;
    width:328px;
    height:720px;
    padding:0;
}
.centerer.mobile .player iframe{
    position: absolute;
    top: 110px;
    left: 27px;
    width:280px;
    height:500px;
    background:#000;
}

/*** CREATIVE GALLERY CSS ***/
.gallery-wrapper{
    margin:0 auto;
    background:#fff;
    width:auto;
}
.top-title{
    border-bottom:2px dashed #cccccc;
    padding:20px 0;
}
/* Filters */
.options{
    vertical-align:middle;
    line-height:20px;
    font-size:15px;
    padding:20px 0;
    width:auto;
}
.options .select-container{
    display:inline-block;
    width:auto;
    float:left; 
      
}
.options .select-container.last{
    margin-left:20px;
}

.options select{
/*   margin:0;
   background: transparent;
   width: 200px;
   padding: 6px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   -webkit-appearance: none;*/
}
.options select.filter{
/*    background-color: #CCC;
    border: 1px solid white;
    border-radius: 4px;
    color:white;
    font-weight: 100;
    text-align:center;*/
}
.options select.filter option{
/*    text-align:center;
    line-height:25px;
    font-size:13px;
    vertical-align:center;
    color:white;*/
    font-family: AvenirBook, Helvetica, Verdana, Sans-Serif;
}
/*
.options ul{
    display:inline-block;
}
.options ul a{
    display:inline-block;
    padding:2px 25px;
    width:35px;
    text-align:center;
    background-color: #cccccc;
    color:#444;
}
.options ul a:hover{
    text-decoration:none;
    background-color:#ffc;
}*/

.gallery-container{
    margin:0 auto;
    width:auto;
}
.item{
    width:330px;
    height:250px;
    float: left;
    overflow: hidden;
    position: relative;
    color: #222;
    margin:10px;
    display:inline-block;
}
.item a{
    display:inline-block;
    position:relative;
    width:100%;
}
div.overlay{
    display:none;
    position:absolute;
    width:100%;
    height:186px;
    line-height: 186px;
    vertical-align:middle;
    text-align:center;
    
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ZDdlN2QiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.8) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.8) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.8) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.8) 100%); /* W3C */
}
div.overlay a{
    display: inline-block;
    width: 85px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    padding: 15px 0 15px 0;
    font-size: 18px;
    margin:60px 10px 10px 10px;


    box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);
    background: #21a1e6;
    background: -moz-linear-gradient(top, #21a1e6 0%, #0285cc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#21a1e6), color-stop(100%,#0285cc));
    background: -webkit-linear-gradient(top, #21a1e6 0%,#0285cc 100%);
    background: -o-linear-gradient(top, #21a1e6 0%,#0285cc 100%);
    background: -ms-linear-gradient(top, #21a1e6 0%,#0285cc 100%);
    background: linear-gradient(to bottom, #21a1e6 0%,#0285cc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21a1e6', endColorstr='#0285cc',GradientType=0 );
}
div.overlay a:hover{
    color:#fff;
    text-decoration:none;

    background: #0285cc;
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);
}

.item a:hover div.overlay, div.inner:hover div.overlay{
    display:block;
}
.item div.screenshot{
    height:186px;
    overflow:hidden;
}
.item div.screenshot, div.overlay{
    /*height:206px;*/
}
.item div.screenshot img{
    width:100%;
    overflow:hidden;  
}
.demo-desc{
    width:250px;
    font-size:16px;
    line-height:1.2em;
    vertical-align:middle;
    padding:10px 0;
    float:left;
}
.demo-device{
    width:80px;
    float:right;
    padding:10px 0;
    text-align: right;
}
.demo-device img{
    margin:0 1px 0 1px;
}
.demo-format{
    font-size:14px;
}
.demo-desc a.demo-link{
    display:block;
    font-size:16px;
    font-weight: 600;
}
.demo-desc span.campaign-name{
    font-weight:600;
}
/*** VIDEO ***/
div#ViewDemo{
    display:none;
    position:relative;
    background-color:#ffffff;
    padding:20px;
}
div#ViewDemo div.player{
    width:674px;
    height:494px;
    padding:30px 107px 0 106px;
    background:url("../images/laptop-cont.png") center no-repeat;
}
div#ViewDemo a.close{
    width:20px;
    height:20px;
    line-height:20px;
    padding:5px;
    background-color:#999999;
    color:#ffffff;
    display:inline-block;
    position:absolute;
    right:-5px;
    top:-10px;
    font-size: 20px;
    vertical-align: middle;
    text-align: center
}
div#ViewDemo a.close:hover{
    text-decoration:none;
}
div#ViewDemo span.campaign-name{
    color:#333333;
    font-size:16px;
}
div#ViewDemo div.video-desc-container{
    position:relative;
}
div#ViewDemo span.campaign-desc{
    color:#999999;
    font-size:16px;
}
div#ViewDemo .video-desc-info{
    background-color:#e3e3e3;
    padding:10px 0 10px 70px;
}
div#ViewDemo .video-desc-container img{
    position:absolute;
    top:-10px;
    left:5px;
}
div#ViewDemo span.campaign-name, div#ViewDemo span.device{
    text-transform:capitalize;
    display:block;
}

div#ViewDemo.mobile .player{
    background: #f4f4f4 url("../images/mobile_bg.png") no-repeat center center;
    width:328px;
    height:720px;
    padding:20px;
}
div#ViewDemo.mobile .player iframe{
    position: absolute;
    top: 171px;
    left: 64px;
    width:280px;
    height:480px;
    background:#000;
}
div.gallery-container, div.inner-container{
    width:95%; /* maintains fluid and alignment IMPORTANT*/
    height:100%;
}

/*** Clearfix ***/
.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;
}