/* ===== mobile / desktop / print ===== */
/* == css styles for @media device adaptive styling == */
.attr-grid-horoscope {
    width: 100%;
aspect-ratio: 1 / 1;
}
/* desktop ? */
@media (min-width:591px) {
    .legacy-xs-6 {
        /* width:33%; */
    }

    /*.legacy-lg-7 {*/
    /*    padding-left:100px !important;*/
    /*}*/
}
@media (min-width:991px) {

    .horoscope-item {
       width: 54% !important;
    }
  #page-content {
      left: 0!important
  }
  .dualPanel {
    width:46%;
    float:left;
  }
  .aspectChart {
      font-size: 0.6em !important;
      /* min-height:30px !important; */
  }

.panel-small .horoscope-header {

height: 125px !important;!import;!importn;!importnt;!importn;!i;!;
}
  .navbar.navbar-fixed-top.slide-active {
      position: fixed
  }
  .navbar-header {
      left: 0!important
  }
  .header-summary {
   font-size:0.6em;
   min-height:100px;
  }
  .panel-small {
      font-size: 1.2em !important;
      margin-bottom: 0px;
      height: 170px !important;
  }
  .attr-image-horoscope {
      max-height:170px !important;
      max-width:170px !important;
  }
  .col-md-25 {
      float:left;
      width:20%;
  }

  .horoscope-phrase {
      width: 99% !important;
      /* display: table-cell; */
      /* margin-right: 5px; */
      font-weight: bold;
      border-radius: 0px;
      /* display: table-cell; */
      text-transform: unset;
      font-size: 1.4em;
      vertical-align: center;
      /* white-space: normal; */
      text-align: center;
      padding-top: 10px;
      height: 70px;
      margin-bottom: 5px;
      color: white !important;
      /* text-shadow: -3px -3px 8px black; */
  }
}
/* -- end of min-width:991px -- */


/* mobile devices? */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .panel-small {
        margin-left:10px;
        margin-right:10px;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}
/* -- end of max-width: 991px -- */


/* Widget CSS ? */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.ig-b-v-24 {
  background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png);
  background-size: 160px 178px; }
}


@media (min-width: 100px) {
    .horoscope-item {
        /* width: 60%; */
        /* width: 55%; */
    }
    .panel-small .attr-image-horoscope {
       /* max-height: 120px; */
       /* min-width: 120px; */
       /* max-width: 120px; */
       max-height: 125px;
    }
}

@media (max-width:320px ) {
    .sticky-panel {
        font-size: 0.8em;
    }
    .header-title {
        font-size: 1.2em !important;
    }
    .panel-small .attr-image-horoscope {
        max-height: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
}



@media (min-width: 991px) {
    .subMenuItem {
    width: 33.2% !important;
    }
    .homeHeader {
        font-size: .9em !important;
    }
    .horoscope-item {
       width: 41%;
    }

    .aspectChart {
           font-size:0.9em;
           /* min-height:70px ; */
       }


    .imgContainerImage {
            margin: 0 auto;
            max-height: 550px !important;
            padding: 0px;
            /* padding-left: 175px !important; */
            /* padding-right: 175px !important; */
    }
    .imgContainer {
        overflow:unset;
    }
    .horoscope-header > h3 {
        font-size: 0.95em !important;
    }
    .md-padding {
        padding: 20px !important;
    }
    .modal-dialog {
         max-width: initial;
    }
    .homepageImage-main {
        width: 100%;
    }
    .homepageImage-side {
              width: 220px;
         height: 220px;

    }
    .homepage-main-text {
      top:55%;
      z-index:10;
      font-size:1.7em;

    }
    .homepage-side-text
    {
        font-size:1em;
        top:35%;
        padding: 10%;
        font-size:1.4em;
    }
    .col-md-8 {
        padding-left:4%;
        padding-right:1%;
        margin-left:2%;
    }
    .panel.panel-view {
        padding: 15px;
        padding-bottom: 26px;
        background-color: rgb(243, 243, 255);
        border-radius:0px;
    }
    .chartAspect {
        width:10%;
    }
    .aspectImage {
        width:20px;
    }
    .summary-moon-img {
        width: 45%;
    }
}


/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */

@media (max-width:991px) {

    .navbar-brand {
        padding-left: 5px !important;
    }

    .homepageImage {
        width: 100% !important;
    }

    .wrapper {
        padding-right: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 0px !important;
        padding-top: 5px !important;
    }

    .horoscope-panel-view {
        width:100% !important;
        margin-bottom:0px !important;
        min-height:350px !important;
    }
    .horoscope-phrase {
        width: 100%;
    }
     #slide-nav .container {
        margin: 0;
        padding: 0!important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }
    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 80%;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        left: -100%;
        width: 80%;
        min-width: 0;
        position: absolute;
        padding-left: 0;
        z-index: 2;
        top: 50px;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 80%;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0
    }
    #slide-nav.navbar-inverse #slidemenu {
        background: #333
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 20px;
        width: 80%;
        left: -80%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center
    }
    #slide-nav .navbar-form .btn {
        width: 100%
    }
}


/* ----- widget ----- */