header {
  margin: 20px 0;
}
header .headline {
  padding: 30px 0;
}
header .headline .title {
  line-height: 40px;
  margin: 0;
}
header .headline .copyright {
  font-size: 11px;
  line-height: 40px;
  color: #aaa;
  margin: 0;
}
header .headline .copyright img {
  margin-left: 4px;
}
.request-device span {
  display: block;
  padding: .5em 0;
}
.row-fluid .phone-block.request-device {
  background: #3498db;
  color: #fff;
  bottom: 0;
  right: 0;
  margin-bottom: 20px;
  position: relative;
  display: table;
}
.row-fluid .phone-block.request-device  > div {
  padding: 0 30px;
  text-align: center;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
}
.row-fluid .phone-block.request-device  > div span {
  display: block;
  padding: 1em 0;
}
.row-fluid .phone-block.request-device  > div .highlight {
  font-size: 1.2em;
  line-height: 1.5em;
}
.row-fluid .phone-block.request-device .btn,
.row-fluid .phone-block.request-device .btn:hover,
.row-fluid .phone-block.request-device .btn:focus,
.row-fluid .phone-block.request-device .btn:active,
.row-fluid .phone-block.request-device .btn .btn.active {
  background: #fff;
  color: #3498db;
}
.row-fluid .phone-block.request-device .close {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 30px;
}
footer {
  background: #000;
  color: #fff;
  padding: 40px 0;
  margin-top: 20px;
}
footer .copyright,
footer .share {
  margin-bottom: 20px;
}
footer .copyright img,
footer .share img {
  margin-left: 20px;
}
footer .copyright img.facebook-icon,
footer .share img.facebook-icon,
footer .copyright img.twitter-icon,
footer .share img.twitter-icon {
  width: 30px;
  height: 30px;
}
footer .copyright a:hover,
footer .share a:hover {
  text-decoration: none;
}
footer a {
  color: #fff;
}
footer a:hover {
  color: #fff;
}
footer .right {
  text-align: right;
}
footer .right a {
  margin-left: 20px;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#container-wrap {
  min-height: 100%;
  position: relative;
}
#container-wrap  > .container {
  padding-bottom: 180px;
}
.container {
  position: relative;
}
#social,
.header-nav {
  position: absolute;
  top: 20px;
  right: 0;
}
#social ul,
.header-nav ul {
  list-style: none;
}
#social ul li,
.header-nav ul li {
  display: inline;
}
#social ul li {
  float: right;
}
.header-nav {
  margin-right: 185px;
}
.header-nav ul li {
  padding-right: 10px;
}
.header-nav ul li a {
  color: #000;
}
.btn {
  color: #fff;
  font-weight: bold;
  text-shadow: none;
  background: #3498db;
  border-color: #3498db;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn .btn.active {
  color: #fff;
  background: #3498db;
}
.progress {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.progress-striped .bar {
  background-color: #3498db;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 11px;
}
.left-icon-add {
  background: url(../images/icon-add.png) no-repeat 5px center;
  padding-left: 34px;
}
.left-icon-download {
  background: url(../images/icon-download.png) no-repeat 5px center;
  padding-left: 39px;
}
.submit-mockup {
  text-align: center;
  margin: 0 auto 20px;
}
#email-subscription-modal {
  width: 660px;
  margin-left: -330px;
}
#email-subscription-modal .modal-body {
  max-height: none;
  display: table;
}
#email-subscription-modal .modal-body .dismiss {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
#email-subscription-modal .modal-body h4 {
  font-size: 24px;
  line-height: 28px;
  font-weight: normal;
  margin: 0 0 84px 0;
}
#email-subscription-modal .modal-body p {
  margin-bottom: 8px;
}
#email-subscription-modal .modal-left {
  float: left;
  width: 300px;
}
#email-subscription-modal .modal-left img {
  border-radius: 10px;
}
#email-subscription-modal .modal-right {
  padding-left: 20px;
  display: table-cell;
  vertical-align: middle;
}
#email-subscription-modal form,
#download-modal form {
  margin-bottom: 0;
}
#email-subscription-modal form input,
#download-modal form input {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
#email-subscription-modal form button,
#download-modal form button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-left: 10px;
}
.static-page {
  padding-bottom: 30px;
}
.static-page .title {
  margin-bottom: 20px;
}
.static-page .content {
  margin-bottom: 30px;
}
.static-page .content h2 {
  font-size: 17.5px;
  line-height: 20px;
}
.static-page .content p {
  margin-bottom: 20px;
  text-align: justify;
}
.static-page ul {
  margin-bottom: 20px;
}
.device-list-page .model-name,
.device-list-page .color,
.device-list-page .available-perspectives {
  width: 150px;
}
.cycle-pics {
  width: 296px;
  height: 296px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}
.cycle-pics img {
  padding: 0;
  border: none;
  background-color: transparent;
  width: 296px;
  height: 296px;
  top: 0;
  left: 0;
}
.phone-block.request-device {
  height: 296px;
  width: 100%;
  padding: 0;
}
@media (min-width: 1200px) {
  #social,
  .header-nav {
    top: 30px;
  }
  header {
    margin: 30px 0;
  }
  header .headline {
    padding: 36px 0;
  }
  .cycle-pics,
  .phone-block.request-device {
    width: 370px;
    height: 370px;
  }
  .cycle-pics img {
    width: 370px;
    height: 370px;
  }
  .row-fluid .phone-block.request-device {
    font-size: 1.5em;
  }
}
@media (max-width: 979px) {
  header .headline {
    padding: 12px 0;
  }
  .cycle-pics,
  .phone-block.request-device {
    height: 228px;
  }
  .cycle-pics {
    width: 228px;
    height: 228px;
  }
  .cycle-pics img {
    width: 228px;
    height: 228px;
  }
}
@media (max-width: 767px) {
  .container {
    padding: 0 20px;
  }
}
.home {
  margin-bottom: 20px;
}
.home .phone-type {
  margin: 0 0 20px 0;
}
.home .phone-type span.new {
  padding: 0 10px;
  background: #e67e22;
  color: #fff;
}
.home .phone-block {
  background: #3498db;
  padding: 0;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.home .phone-block .phone-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  z-index: 999;
  padding: 5px 0;
  min-height: 32px;
}
.home .phone-block .phone-desc .name,
.home .phone-block .phone-desc .desc {
  margin: 0 85px 0 5px;
}
.home .phone-block .phone-desc .name {
  line-height: 20px;
}
.home .phone-block .phone-desc .desc {
  font-size: 12px;
  line-height: 12px;
}
.home .phone-block .phone-desc .btn {
  line-height: 32px;
  float: right;
  background: #fff;
  color: #000;
  margin-right: 5px;
  padding: 0 24px;
  font-weight: bold;
  border: none;
}
@media (min-width: 1200px) {
  .home .phone-type {
    margin: 0 0 30px 0;
  }
  .home .phone-block {
    margin-bottom: 30px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .home .cycle-pics {
    width: 228px;
    height: 228px;
  }
  .home .cycle-pics img {
    width: 228px;
    height: 228px;
  }
}
.upload {
  margin-bottom: 30px;
}
.upload .phone-icon {
  background: #3498db;
  padding: 10px 0;
}
.upload .phone-info,
.upload .view-desc,
.upload .credits,
.upload .request-device {
  margin-bottom: 20px;
}
.upload .request-device .highlight {
  text-transform: uppercase;
  font-weight: bold;
}
.upload .upload-block {
  border: #000 5px dashed;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px 0;
}
.upload .file {
  position: relative;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  width: 200px;
  padding: 8px 0;
  color: #ffffff;
  margin: 10px auto;
  background-image: -ms-linear-gradient(top left, #000000 0%, #000000 0%);
  background-image: -moz-linear-gradient(top left, #000000 0%, #000000 0%);
  background-image: -o-linear-gradient(top left, #000000 0%, #000000 0%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #000000), color-stop(0, #000000));
  background-image: -webkit-linear-gradient(top left, #000000 0%, #000000 0%);
  background-image: linear-gradient(to bottom right, #000000 0%, #000000 0%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.upload .file #fileupload {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  cursor: pointer;
  padding-bottom: 10px;
}
.upload #upload-mockup {
  padding: 40px 20px;
  margin: 0;
}
.upload #upload-mockup span.select-files {
  display: block;
}
.upload #upload-mockup span.add-files {
  display: none;
}
.upload #upload-mockup.loading {
  padding: 10px 20px;
}
.upload #upload-mockup.loading .file {
  margin: 10px 0;
}
.upload #upload-mockup.loading span.select-files {
  display: none;
}
.upload #upload-mockup.loading span.add-files {
  display: block;
}
.upload #upload-mockup.loading h2,
.upload #upload-mockup.loading p {
  display: none;
}
.upload .files-progress {
  padding: 10px 20px 0 20px;
}
.upload .files-progress .ratio-warning .name {
  background: url(../images/warning-icon.png) right center no-repeat;
}
.upload .files-progress .name {
  float: left;
  width: 120px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 20px;
  font-weight: bold;
}
.upload .files-progress .progress-block {
  margin-bottom: 20px;
}
.upload .files-progress .progress-block .progress {
  margin-left: 150px;
}
.upload .files-progress .progress {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: #d8d8d8;
}
.upload .files-progress .progress .bar {
  background: #000;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.upload .files-progress .progress-block.complete .bar {
  background: #3498db;
}
.upload .files-progress .progress-block.error {
  color: #fe5656;
}
.upload .files-progress .progress-block.error .progress {
  background: none;
}
.upload .files-progress .progress-block.error .progress .bar {
  background: none;
}
.upload .ratio-warning-block {
  display: none;
  text-align: left;
  padding-left: 30px;
  margin-left: 20px;
  background: url(../images/warning-icon.png) center left no-repeat;
}
.upload #create-mockup button {
  color: #fff;
  font-size: 24.5px;
  font-weight: bold;
  text-shadow: none;
  background-color: #3498db;
  padding: 20px 0;
  border: none;
  width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.download {
  margin-bottom: 20px;
}
.download .download-link {
  text-align: center;
  padding-right: 30px;
  border-right: 1px solid #ccc;
}
.download .download-link a.btn {
  display: block;
  font-size: 22px;
  font-weight: bold;
  text-shadow: none;
  background: #3498db;
  padding: 20px 0;
  border: none;
  color: #fff;
  margin-bottom: 5px;
}
.download .share-link h4 {
  margin-bottom: 5px;
}
.download .share-link input {
  background: #fff;
}
.download .remarks {
  margin-bottom: 20px;
}
.download #showcase-carousel {
  margin-bottom: 0;
}
.download #showcase-carousel .carousel-inner {
  background-color: #000;
}
.download #showcase-carousel .carousel-inner > .item > img {
  width: 70%;
  margin: 0 auto;
}
.download #showcase-carousel .carousel-control {
  background: none;
  border: none;
}
.home .phone-5s-gold,
.upload .phone-5s-gold {
  background: url(../images/gradient_gold.png);
  background-size: 20px 100%;
}
.home .phone-5s-grey,
.upload .phone-5s-grey {
  background: url(../images/gradient_black.png);
  background-size: 20px 100%;
}
.home .phone-5s-silver,
.upload .phone-5s-silver {
  background: url(../images/gradient_silver.png);
  background-size: 20px 100%;
}
.home .phone-5c-blue,
.upload .phone-5c-blue {
  background: #5ac6ff;
}
.home .phone-5c-green,
.upload .phone-5c-green {
  background: #a0ec6f;
}
.home .phone-5c-red,
.upload .phone-5c-red {
  background: #ff8282;
}
.home .phone-5c-white,
.upload .phone-5c-white {
  background: #f1f1f2;
}
.home .phone-5c-yellow,
.upload .phone-5c-yellow {
  background: #fdeb75;
}
.home .fish-bg,
.upload .fish-bg {
  background: url(../images/fish_bg1.jpg);
  background-size: cover;
}
.home .fish-bg2,
.upload .fish-bg2 {
  background: url(../images/fish_bg2.jpg);
  background-size: cover;
}
.home .fish-bg3,
.upload .fish-bg3 {
  background: url(../images/fish_bg3.jpg);
  background-size: cover;
}
.home .fish-bg4,
.upload .fish-bg4 {
  background: url(../images/fish_bg4.jpg);
  background-size: cover;
}