body{
    padding-top:50px;
    font-size:16px;
    color:#333;
}
body.default{
    padding-top:0;
}
body.photos{
    padding-top:0;
    background:#222;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  object-fit:cover;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}

footer{
    background:#444;
    margin-top:2em;
    color:#eee;
    border-top:1px solid #ccc;
}
footer .container{padding:1em;}
footer p{margin:5px 0;}
footer p span{white-space:nowrap;margin-right:1em;}
footer .cr{
    background:#333;
    border-top:1px solid #555;
    padding:10px 0;
    font-size:13px;
    text-align:center;
}
footer .cr p{margin:0;}

.navbar-inverse {
    background-color: #008cba;
    background-repeat: repeat-x;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    border:0;
    background-color: #008cba;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #009ed2 0%, #008cba 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ed2), color-stop(100%, #008cba));
    background-image: -webkit-linear-gradient(top, #009ed2 0%, #008cba 100%);
    background-image: -ms-linear-gradient(top, #009ed2 0%, #008cba 100%);
    background-image: -o-linear-gradient(top, #009ed2 0%, #008cba 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ed2', endColorstr='#008cba',GradientType=0 );
    background-image: linear-gradient(top, #009ed2 0%, #008cba 100%);
}
.navbar-inverse .navbar-brand {
    background: url("mqilogo.gif") no-repeat scroll 14px 10px rgba(0, 0, 0, 0);
    padding-left: 53px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a{color:#fff;}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{
    background:rgba(0, 0, 0, 0.1);
    box-shadow:none;
}

.breadcrumb{
    margin-top:20px;
    border:1px solid #e9e9e9;
}
.breadcrumb .glyphicon-home{margin-right:9px;}
.breadcrumb > .active a{color:#999;}

.title-image img{width:100%;}

h1{
    color:#0065cd;
}

.product-thumbnail .caption h3{
    height:30px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.page-header{margin-top:20px;}

.panel-title{font-size:18px;}

/*
#home-carousel img{
    border-top:1px solid #bbb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    margin:auto;
    height:400px;
}

#project-carousel img{
    margin:auto;
    height:400px;
}
*/

/* Phone view border color in navbar */
.navbar-inverse .navbar-toggle{border-color:#069;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{border-color:#079;}

#ie67{
    display:none;
    position:absolute;
    top:0;
    width:100%;
    z-index:9999;
}
#ie67 p{
    width:400px;
    margin:auto;
    padding:0.5em 1em;
    border:2px solid #f90;
    border-top-width:0;
    background:#fff;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    position:relative;
}
#ie67 p img{position:absolute;right:8px;bottom:7px;cursor:pointer;}

#home{margin-top:2em;}
#home .row a{color:#333;}
#home .row a.btn-primary{color:#fff;}

#co{margin-top:20px;}

#ps h2{
    color:#f90;
    text-align:center;
    margin-bottom:20px;
}
#ps .row a{color:#333;}
#ps .row a.btn-primary{color:#fff;}
#ps .ft .note{font-weight:bold;}

#pc .row a{color:#333;}
#pc .row a.btn-primary{color:#fff;}
#pc .ft .note{font-weight:bold;}

#pd .photos{margin:50px 0;box-shadow:0 0 6px 3px #eee;background:url(bg_photos.jpg) repeat;}
#pd .photos .no-photos{width:100%;letter-spacing:3px;font-size:182%;display:block;line-height:228px;text-align:center;color:#B92C28;}
#pd .photos a{width:228px;height:228px;display:block;float:left;position:relative;}/* position:relative to make transform z-index workable */
#pd .photos a.on{box-shadow:0 0 6px 3px #bbb;}
#pd .photos img{width:228px;height:228px;}
#pd .photos a.more{position:relative}
#pd .photos a.more img{float:left;width:114px;height:114px;}
#pd .photos a.no-more img{float:left;}
#pd .photos a.more .overlay, #pd .photos a.no-more .overlay{
    position:absolute;
    width:100%;
    height:100%;
    font-size:123.1%;
    color:#fff;
    line-height:228px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.29) 1%, rgba(0,0,0,0.65) 44%, rgba(0,0,0,0.65) 57%, rgba(170,170,170,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0.29)), color-stop(44%,rgba(0,0,0,0.65)), color-stop(57%,rgba(0,0,0,0.65)), color-stop(100%,rgba(170,170,170,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a000000', endColorstr='#a6aaaaaa',GradientType=0 ); /* IE6-9 */
}
#pd .photos2 a{position:relative;}
#pd .photos2 .overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    font-size:1.3em;
    color:#fff;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.29) 1%, rgba(0,0,0,0.65) 44%, rgba(0,0,0,0.65) 57%, rgba(170,170,170,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0.29)), color-stop(44%,rgba(0,0,0,0.65)), color-stop(57%,rgba(0,0,0,0.65)), color-stop(100%,rgba(170,170,170,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a000000', endColorstr='#a6aaaaaa',GradientType=0 ); /* IE6-9 */
}
#pd .photos2 .overlay span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
#pd .certs a{margin:0 15px;}

#acc .row a{color:#333;}
#acc .row a.btn-primary{color:#fff;}
#acc .row h3{
    text-align:center;
    height:30px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#acc .row p{text-align:center;}

#projects h2{color:#f90;margin-top:30px;text-align:center;}
/* #projects .project-img{box-shadow:0px 0px 6px 3px #eee;} */
#projects .project-img img{width:100%;height:auto;margin:1em 0;}

#project-carousel{margin-bottom:50px;}

#contact-us .asterisk{color:#a94442;}
#contact-us textarea{height:150px;}
#contact-us p.help-block{display:none;}
#contact-us .has-error p.help-block{display:block;}
#contact-us .captchaimg{cursor:pointer;}

/* contact-details */
#mqicd{margin-bottom:2em;}
#mqicd h4{color:#0065cd;font-size:36px;}
#mqicd .bd{line-height:2em;font-size:21px;}
#mqicd .bd abbr{margin-right:15px;}


#photos .hd{
    color:#eee;
    height:40px;
    position:relative;
}
#photos .hd h1{color:#eee;margin:0;padding:8px 0 0 10px;font-size:21px;}
#photos .hd .glyphicon-remove{
    color:#eee;
    position:absolute;
    right:12px;
    top:12px;
}
#photos a{outline:0;}
#photos .target{
    position:absolute;
    top:40px;
    left:0;
    right:0;
    bottom:130px;
    /*
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    */
    overflow:hidden;
}
#photos .target img{
    position:relative;
    display:block;
    margin:auto;
    /*
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    */
}
#photos .target img.on{display:none;}
#photos .target .caption{
    text-align:center;
    position:absolute;
    bottom:10px;
    width:100%;
}
#photos .target .caption p{
    border-radius:6px;
    display:inline-block;
    margin:0;
    padding:0.45em 2em;
    color:#eee;
    background:rgba(0,0,0,0.5);
}
#photos .ft{
    bottom: 0;
    left: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 15px 20px;
    position: fixed;
    right: 0;
}
#photos .thumbnails{white-space:nowrap;}
#photos .thumbnails .follower{
    position:absolute;
    top:15px;
    border:2px solid #d5c65f;
}
#photos .thumbnails .follower .black{
    border:1px solid #000;
    width:100%;
    height:100%;
}
#photos .thumbnails a{
    margin-right:20px;
    /*
    width:100px;
    height:100px;
    border:1px solid #333;
    margin-right:25px;
    //float:left;
    background-position:center;
    background-size:cover;
    display:inline-block;
    */
}
/*
#photos .thumbnails a.on{border-color:#fff;}
#photos .thumbnails a:hover{border-color:#fff;}
*/
#photos .thumbnails a img{height:100px;}



.detail-tpl .photos{margin:50px 0;box-shadow:0 0 6px 3px #eee;background:url(bg_photos.jpg) repeat;}
.detail-tpl .photos .no-photos{width:100%;letter-spacing:3px;font-size:182%;display:block;line-height:228px;text-align:center;color:#B92C28;}
.detail-tpl .photos a{width:228px;height:228px;display:block;float:left;position:relative;}/* position:relative to make transform z-index workable */
.detail-tpl .photos a.on{box-shadow:0 0 6px 3px #bbb;}
.detail-tpl .photos img{width:228px;height:228px;}
.detail-tpl .photos a.more{position:relative}
.detail-tpl .photos a.more img{float:left;width:114px;height:114px;}
.detail-tpl .photos a.no-more img{float:left;}
.detail-tpl .photos a.more .overlay, .detail-tpl .photos a.no-more .overlay{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
    font-size:123.1%;
    color:#fff;
    line-height:228px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.29) 1%, rgba(0,0,0,0.65) 44%, rgba(0,0,0,0.65) 57%, rgba(170,170,170,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0.29)), color-stop(44%,rgba(0,0,0,0.65)), color-stop(57%,rgba(0,0,0,0.65)), color-stop(100%,rgba(170,170,170,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a000000', endColorstr='#a6aaaaaa',GradientType=0 ); /* IE6-9 */
}
.detail-tpl .photos2 a{position:relative;}
.detail-tpl .photos2 .overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    font-size:1.3em;
    color:#fff;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.29) 1%, rgba(0,0,0,0.65) 44%, rgba(0,0,0,0.65) 57%, rgba(170,170,170,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0.29)), color-stop(44%,rgba(0,0,0,0.65)), color-stop(57%,rgba(0,0,0,0.65)), color-stop(100%,rgba(170,170,170,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.29) 1%,rgba(0,0,0,0.65) 44%,rgba(0,0,0,0.65) 57%,rgba(170,170,170,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a000000', endColorstr='#a6aaaaaa',GradientType=0 ); /* IE6-9 */
}
.detail-tpl .photos2 .overlay span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.detail-tpl .certs a{margin:0 15px;}