﻿


@media screen and (min-width: 450px) and (max-width: 599px) {
    h1 {
        font-size: 45px;
    }
}

@media screen and (min-width: 600px) and (max-width: 766px) {
    h1 {
        font-size: 65px;
    }
}

@media screen and (min-width: 767px) {

    h1 {
        font-size: 80px;
    }

    #mobileIconRow {
        display: none;
    }
        #navigation li {
            text-align: center;
            display: inline-block;
            background-color:transparent !important;
            border:none;
            /*adjust width depending on nav styling and amount of nav buttons*/
            /*width: 15%;*/
        }

    #navigation li a {
        font-size: 1.4em;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .stickyNavigation {
        position: fixed;
        z-index: 150;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        box-shadow: 0 2px 3px rgba(0,0,0,.5);
        max-width: 100% !important;
        width: 100% !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        background-color: rgba(255,255,255, .8) !important;
    }

    .fixedMainImage {
        display: inline-block !important;
        width: 125% !important;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

    .mainImgLi {
        right:3%;
    }

    .mainImg {
        content: url("../Images/trio.png");
        display:none;
    }

    #navigationDiv{display:inherit;  
    }
    #navAndHeader {
        height: 45%;
    }

    #navigation {
        background-color:none;
        padding:0;
        width:100%;
        background-color: rgba(255,255,255,.5);
        border-top-style:solid;
        border-bottom-style:solid; 
        border-top-width:4px; 
        border-bottom-width:4px; 
        border-color:black !important;
        /*margin-top:0 !important;
        margin-bottom:0 !important;*/
    }

    #navigation li.main_social a:hover {
        border: none;
        background-color: transparent;
    }
    .navOption {
        bottom: 15px;
    }
    .main_social {
        width: 8%;
    }

    .main_social a {
        width: 100%;
    }

    .social_img {
        width: 100%;
        height: 100%;
        margin-bottom: -25px;
        opacity:.5;
    }
    .social_img:hover{
        opacity:1;
    }

    .mainImg {
        display:inline;
        width: 100%;
        margin-top:-40px;
    }

    #shows li{
        width:70%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1090px) {
  #navigation li a {
          padding: 5px 5px;
          font-size:1em;
    }

  .mainImgLi {
      display:none !important;
  }
}

#loadOverlay{display: none;}