@charset "utf-8";
/* Retina Ready Images */

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#status {background-image:url(../images/bg-loading%402x.png); background-repeat:no-repeat; background-position:center; background-size:98px 106px; }

/*h1#logo a { background:url(../images/bg-logo%402x.jpg) no-repeat; background-size:275px 75px; }*/

.headline { background:url(../images/bg-headline%402x.png) 0 50% repeat-x; background-size:1px 1px; }

.pointer { background:url(../images/bg-pointer%402x.png) center no-repeat; background-size:9px 12px;}
.email { background:url(../images/bg-mail%402x.png) center no-repeat; background-size:12px 10px; }
.phone { background:url(../images/bg-phone%402x.png) center no-repeat; background-size:12px 12px; }
.time { background:url(../images/bg-time%402x.png) center no-repeat; background-size:12px 12px; }
#calendar { background:url(../images/bg-calendar%402x.png) no-repeat 50% 48% #007BC6; background-size:11px 12px; }
#user { background:url(../images/bg-user%402x.png) no-repeat 50% 48% #007BC6; background-size:12px 12px; }
#plus { background:url(../images/bg-plus%402x.png) no-repeat 50% 48% #007BC6; background-size:11px 11px; }

#accordion .ui-accordion-header { background:url(../images/buttons/bg-close-small%402x.png) no-repeat right 15px #fff; background-size:26px 12px; }
#accordion .ui-accordion-header-active { background:url(../images/buttons/bg-open-small%402x.png) no-repeat right 18px #fff; background-size:28px 8px; }

.img-cover .icons.mail { background:url(../images/buttons/bg-envelope%402x.png) 50% 50% no-repeat; background-size:24px 16px; }
.img-cover .icons.link { background:url(../images/buttons/bg-link%402x.png) 50% 50% no-repeat; background-size:21px 23px; }
.img-cover .icons.zoom { background:url(../images/buttons/bg-zoom%402x.png) 50% 50% no-repeat; background-size:25px 25px; }
.img-cover .icons.video { background:url(../images/buttons/bg-video%402x.png) 50% 50% no-repeat; background-size:24px 16px; }

.xing {background:url(../images/bg-xing%402x.png) no-repeat; background-size:24px 24px; }
.google {background:url(../images/bg-googleplus%402x.png) no-repeat; background-size:24px 24px; }
.twitter {background:url(../images/bg-twitter%402x.png) no-repeat; background-size:24px 24px; }
.facebook {background:url(../images/bg-facebook%402x.png) no-repeat; background-size:24px 24px;}
.pinterest {background:url(../images/bg-pinterest%402x.png) no-repeat; background-size:24px 24px; }
.instagram {background:url(../images/bg-instagram%402x.png) no-repeat; background-size:24px 24px; }
.vimeo {background:url(../images/bg-vimeo%402x.png) no-repeat; background-size:24px 24px; }
.skype {background:url(../images/bg-skype%402x.png) no-repeat; background-size:24px 24px; }
.dribble {background:url(../images/bg-dribble%402x.png) no-repeat; background-size:24px 24px; }

.fancybox-close {background: url(../images/bg-close%402x.png) center no-repeat; background-size:18px 18px;}
.fancybox-prev span {background: url(../images/bg-prev%402x.png) center no-repeat; background-size:15px 22px;}
.fancybox-next span {background: url(../images/bg-next%402x.png) center no-repeat; background-size:15px 22px;}
}


@media only screen and (max-width: 1089px) {
.container { padding:30px 0px; -webkit-box-shadow:0 0 0 rgba(180, 180, 180, 0); -moz-box-shadow:0 0 0 rgba(180, 180, 180, 0) ; box-shadow:0 0 0 rgba(180, 180, 180, 0);}
header .container {padding:16px 0px 17px 0px; height:75px; }
.wrapper {width: 100%; background-color:#fff; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.12) ; box-shadow:0 1px 0 rgba(0, 0, 0, 0.12); }
/*.responsive { -webkit-box-shadow:0 0px 0 rgba(180, 180, 180, 0); -moz-box-shadow:0 0px 0 rgba(180, 180, 180, 0) ; box-shadow:0 0px 0 rgba(180, 180, 180, 0);}*/

.col-md-3 aside{float:none;display:block; text-align:left; padding-left:10px;}
.col-md-3 .logo .vertical-center{/*position:relative;right:60%;*/}
#footer{margin:auto}

}

@media only screen and (max-width: 767px) {
.col1-2 { width:99%; margin:0px 0.5%; float:left; }
.case-studies {width:100%;}
.col1-2 .case-study1 {width:100%;}
/* =About Us
--------------------------------------------------------------------------------------------------------*/
.abouth2 {display:none;}
.screenOnly {display:none;}
.circular-portrait {margin-left: 50px;}
p.about-titles {text-align: center;}
.about-content {margin:20px 0%;text-align:center;}
/* End About
--------------------------------------------------------------------------------------------------------*/
}
@media only screen and (max-width: 479px) {
.col-md-3 {width:100%;/*padding-left:10px;*/}
.footer-links {width:97%;margin-top: 20px;padding-left: 3%;}
.youtube-link {width: 100%;margin-top: 0px;float: none;}
.qckLinks {width: 48%; display: inline-block !important; vertical-align: top;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-md-3 {width:100%;}
.qckLinks {width: 48%; display: inline-block !important;}
}

/* Standard 960 or larger (browsers) */
@media only screen and (min-width: 960px) {
	.exPadding {padding: 0 30px;}
	nav ul li {height: 40px; vertical-align: bottom;}
}


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
h1#logo a{margin-left:0;}
/*.col-md-3{float:none;display:block; text-align:center;}*/
/*.col-md-3 .logo .vertical-center{position:relative;left:10%;}*/
#footer{margin:auto}


ul#nav li a { margin:0px 0px 0px 5px; }

.container { width:768px; position:relative; }
.col1-1 { width:748px; margin:0px 10px; }
.col1-2 { width:47.25%; margin:0px 10px; float:left; }
.col1-3 { width:236px; margin:0px 10px; float:left; }
.col2-3 { width:492px; margin:0px 10px; float:left; }
.col1-4 { width:172px; margin:0px 10px; float:left; }
.col3-4 { width:556px; margin:0px 10px; float:left; }
.col1-6 { width:108px; margin:0px 10px; float:left; }
.col1-2 .case-study1 {width:100%;}
.videos {width:556px !important; height:310px !important; }

.flexslider h3 {font-size:20px; padding:10px 10px 12px 0 }
.flex-direction-nav { margin-top:8px;}

.element {width:236px !important; display:block; }
.responsive-folio { overflow:visible !important }

.responsive .col1-4 { width:236px }
.responsive .col3-4 { width:492px }
.contact input, textarea, select { width: 90% !important;}
.contact textarea { width: 90% !important; }*/

#map {width:748px !important; height:350px !important; }

.js #nav { display: none; }
.js .selectnav { display: block; margin:15px 10px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:180px !important;}
}

/* All Mobile Sizes (devices and browser) */
@media(max-width: 768px) {
  nav div {
    display: block;
  }

  nav ul {
    display: none;
    position: static;
    background: #e3e3e3;
    margin-top: 15px;
    margin-right: 0px;
  }

  nav ul li {
    display: block;
    border-bottom: 1px solid #CCC;
  }

  nav ul li a{
  	padding: 15px;
  }

  nav ul ul {
    position: static;
    background: #e3e3e3;
  }

  nav ul ul li {
  	margin-left:30px;
  }

  .highlight a {border: none !important;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-md-3 {float:none;display:block; text-align:center;}
.col-md-3 .logo .vertical-center{/*position:relative;right:60%;*/}
#footer{margin:auto}
.qckLinks {width: 48%; display: inline-block;}

.container { width:440px; position:relative; overflow:visible !important}
.col1-1, .col1-3, .col2-3, .col3-4 { width:420px; margin:0px 10px; }
aside {display:none; }

.videos {width:420px !important; height:235px !important; }

.js #nav { display: none; }
.js .selectnav { display: block; margin:15px 10px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:140px !important;}

.element {width:200px !important; display:block; }
.responsive-folio { overflow:visible !important }

.col1-4 { width:200px }
.force-break { clear:both; height:15px; position:relative }
.responsive .col3-4 { width:200px }
/*.contact input, textarea { width: 172px !important; margin: 0px 0px 0px 0; float:none; display:block; margin-bottom:5px}
.contact textarea { width: 172px !important; }*/
.contact input, textarea { width: 90% !important;}
.contact textarea { width: 90% !important; }

.option-set { float:none}
h3.alignleft {float:none; }

#accordion {margin-top:35px; }

#map {width:420px !important; height:350px !important; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
h1#logo a { margin-left:0px}
.col-md-3{float:none;display:block;text-align:center; position:relative;/*right:-11%;*/}

.col-md-3 .logo .vertical-center{position:relative;right:0;/*right:24%;*/}
#footer{margin:auto}

h1#logo { display:block; position:relative; margin-left:10px; }
header .container {padding:16px 0px 17px 0px; height:auto; }
#empty-area {display:none }

#fixed { height:auto; position:relative; width:100% }
.container { width:320px; position:relative; overflow:visible !important}

.navpoints .flex-direction-nav .flex-next {right: 10px; }
.navpoints .flex-direction-nav .flex-prev {right: 35px; }
.flex-direction-nav { margin-top:15px;}

.col1-1, .col1-3, .col2-3, .col3-4 { width:300px; margin:0px 10px; }
aside {display:none; }

.videos {width:300px !important; height:175px !important; }

.js #nav { display: none; }
.js .selectnav { display: block; margin:18px 10px 0px 10px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:300px !important }
nav.alignright {display:block; float:none; }

.element {width:300px; display:block; }
.responsive-folio .col1-4 {width:140px !important; }
.responsive-folio { overflow:visible !important }

.responsive .col1-4 { width:300px }
.responsive .col3-4 { width:300px }
.contact input, textarea { width: 272px !important; margin: 0px 0px 0px 0; float:none; display:block; margin-bottom:5px}
.contact textarea { width: 272px !important; }

.option-set {margin-left:10px !important; margin-top:-10px !important; float:none}
h3.alignleft {float:none; }

#accordion {margin-top:35px; }

#map {width:300px !important; height:250px !important; }
}


element.style {
}
#whtsBtn {
    position: fixed;
    top: 30%;
    right: 20px;
    display: block;
    z-index: 99999;
}
@media (max-width: 767px) {
    .hidden-desktop {
        display: none !important;
    }
}
@media (min-width: 768px){
    .hidden-mobile {
        display:none!important
    }
}