@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: portrait) {
  body .cd-logo {
    width: 30% !important;
  }
  body .carousel {
    margin-top: 14% !important;
    height: 200px;
  }
  body .carousel img {
    max-width: 100%;
    height: 200px !important;
  }
  body .carousel-caption {
    width: 60% !important;
    z-index: 10;
    position: absolute;
    top: 24%;
    left: 10%;
  }
  body .carousel-caption .top-cap {
    background: #939392;
    width: 60% !important;
    margin-top: -5.7%;
  }
  body .carousel-caption .bottom-cap {
    background: black;
    margin-top: -1.7%;
    width: 50%;
  }
  body .carousel-caption h1 {
    font-size: 1.1em !important;
  }
  body .carousel-caption .caption-para {
    display: none;
  }
  body .carousel-caption p {
    width: 100% !important;
  }
  body .carousel-caption p .btn.btn-lg.btn-primary {
    float: left;
    width: 40% !important;
    font-size: .6em !important;
    margin-right: 3% !important;
  }
  body #welcome-section {
    width: 90% !important;
    margin: 0 0 0 0 !important;
  }
  body #welcome-section #left-welcome {
    float: left;
    width: 90% !important;
    margin: 0 0 0 16% !important;
  }
  body #welcome-section #left-welcome h3 {
    font-size: 1.3em;
  }
  body #welcome-section #right-welcome {
    clear: both;
    float: left;
    width: 80% !important;
  }
  body #welcome-section #right-welcome h3 {
    font-size: 1.3em;
  }
  body .container-information {
    padding-top: 5% !important;
  }
  body .container-information .col-lg-4 .img-circle {
    margin-top: 14% !important;
  }
  body footer {
    font-size: .9em;
    line-height: 2em;
  }
  body footer #left-footer {
    float: left;
    width: 40% !important;
    text-align: center;
    margin: 0 0 0 0 !important;
  }
  body footer #left-footer h3 {
    font-size: 1em !important;
  }
  body footer #left-footer li a {
    font-size: .8em;
  }
  body footer #left-center-footer {
    float: right !important;
    width: 40% !important;
    margin: 0 0 4% 0 !important;
  }
  body footer #left-center-footer p {
    font-size: .8em;
  }
  body footer #left-center-footer h3 {
    font-size: 1em !important;
  }
  body footer #right-footer {
    clear: both;
    float: left !important;
    width: 40% !important;
    margin: 0 0 0 7% !important;
  }
  body footer #right-footer p {
    font-size: .8em;
  }
  body footer #right-footer h3 {
    font-size: 1em !important;
  }
  body footer #right-center-footer {
    width: 40% !important;
    margin: 0 0 0 5% !important;
  }
  body footer #right-center-footer p {
    font-size: .8em;
  }
  body footer #right-center-footer h3 {
    font-size: 1em !important;
  }
}
@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: landscape) {
  #id_testDiv {
    background-color: orange;
  }
}