/* Large desktops and laptops */
@media (min-width: 1200px) {
   #media-query{
      background-color: black
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   #media-query{
      background-color: red
   }
}

/* Landscape tablets and medium desktops */
@media (max-width: 1199px) {
   #header{
      display: block;
   }
   #menu .box {
      height: auto;
   }
   #menu .ribbon{
      display: none;
   }
   #menu .right{
      float: left !important;
   }
   #menu .button .social{
      display: none;
   }
   #menu .hidden-social{
      display: block;
   }
   #menu .button {
      margin: 0;
   }
   #menu .button a {
      padding: 20px;
   }
}

/* Portrait tablets and small desktops */
@media  (max-width: 991px) {
   #como-funciona .title img,
   #cotacao .title img {
      display: none;
   }
   #cotacao .form {
      padding: 0;
   }
   #planos .faixa.left .color img {
      width: 320px;
   }
   #planos .faixa.left .box-2 {
      display: none;
   }
   #planos .header {
      padding: 50px 0;
   }
   #planos .header .chamada {
      position: relative;
      top: 0;
      left: 0;
      width: 90%;
      text-align: center;
   }
   #planos .each:first-child{
      margin-top: 0;
   }
   #planos .faixa .color .box {
      width: 100%;
      padding: 0 10px;
   }
}
@media only screen and (max-width: 800px) {
   .modal-dialog{
      max-width: none !important;
   }

   .half-orange{
      width: 49% !important;
   }
   .half-orange:nth-child(2n+2){
      margin-right: 0 !important;
      margin-bottom: 15px;
   }
   .full-orange{
      width: 100% !important;
      margin-right: 0 !important;
   }

}

@media (min-width: 768px) and (max-width: 991px) {
   #media-query{
      background-color: orange
   }

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
   #media-query{
      background-color: greenyellow
   }
   .only-desktop{
      display: none;
   }
   .only-mobile{
      display: initial;
   }
   #menu .box {
      width: 100%;
      padding: 0 90px 0px 5px;
   }
   #menu .button a {
      padding: 10px 15px;
   }
   #planos .faixa {
      height: 115px;
      padding-top: 0;
   }
   #planos .faixa.left .color img {
      width: 230px;
   }
   #planos .faixa .color .box {
      height: 100px;
   }
   #planos .faixa .title {
      font-size: 25px;
      letter-spacing: 1px;
      padding-top: 10px;
   }
   #planos .faixa .subtitle {
      font-size: 18px;
   }
   #planos .checklist {
      width: 78%;
      font-size: 18px;
   }
   #planos .checklist .fa-times,
   #planos .checklist .fa-check {
      font-size: 22px;
   }
   #planos .image {
      top: 10px;
      width: 20%;
   }
   #planos .each .box{
      width: 98%;
   }
   #planos .each {
      margin-top: 70px;
   }
   .cs3 {
      width: 50% !important;
      height: 160px !important;
   }
   .cs3:last-child{
      display: none;
   }
   #footer .info img {
      width: 160px;
   }
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
   #media-query{
      background-color: purple
   }
   #menu .button a {
      padding: 10px;
      font-size: 14px;
   }
   #cotacao .form .input-wrap,
   #cotacao .form .input-dates{
      width: 100% !important;
      margin-bottom: 15px;
   }
   #cotacao .form .row {
      margin-bottom: 0;
   }
   .cs3 {
      width: 100% !important;
      height: 215px !important;
   }
   #planos .faixa {
      padding-top: 8px;
   }
   #planos .faixa.left .color img {
      display: none;
   }
   #footer .info img {
      width: 110px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }
   #footer .box{
      width: 100%;
      padding-top: 40px;
   }
}