/*
    mobile.css goes after main.css and stores
    all mobile styles

    Update 12/04/2019 
    Moving to district wide IEP site

    We'll be replacing Central yellow  with
    this blue: #4BB4E6



*/

/* styles for mobile nav (not shown in desktop) */
.navbar {
    background-color: #004da8;
}

a.navbar-brand{
    margin-top: -9px;
    margin-bottom: -9px;
}

element {

}
.navbar-dark .navbar-brand {

    color: #fff;

}
a.navbar-brand {

    margin-left: 5%;

}
a.navbar-brand {

    margin-top: -9px;
    margin-bottom: -9px;

}
.btco-hover-menu a, .navbar > li > a {

    text-transform: capitalize;
    padding: 10px 15px;

}


#navbarNavDropdown .nav-item {
    display:inline-block;
    margin-left:6%; /* move nav under logo on mobile */
}

.navbar-brand {
    margin-right: 3rem; /* moves hamburger more to right on mobile */
} 

/* start mobile sub-menu colors */

.btco-hover-menu .collapse ul > li:hover > a,ul.dropdown-menu li {
    background: #004DA8;
}
/*
ul.dropdown-menu li>a{
    color:#000; 
}
*/

/* end mobile sub-menu colors */


a.navbar-brand img{
    max-height: 50px;
    max-width: 200px;
    height:auto;
}

/* end styles for mobile nav */


/* start mobile media queries */
@media only screen and (max-width: 599px) {
    /* show/hide navs */
   #main-nav{
        display:block;
    }

    #desktop-nav{
        display:none;
    }
    /* end show/hide navs */
    
    /* mobile icon color */
    #main-nav .navbar-toggler {
        color: #fff;
    }
    /* end mobile icon color */

    
    footer.default {
         display:block; /*remove footer flex */
    }

    footer.default hr {
        /* border:.05em solid #122D39;   change color of hr */
        border:.05em solid #fff;
    }
    
    footer.default nav {
        text-align: center; /* center links in mobile */
    }
    
    /*********** START H1 on main section pages ***********/
    .section-text{
        margin-top: .5em;
        font-size:2em; /* smaller on mobile */
    }
    /*********** END H1 on main section pages ***********/
        
    /* start spotlight rules */
    .spotlight h3{
        color:#fff;
        font-size:1.25em; 
    }
    
    .spotlight{
        left: 40%; /* move further left & up */
        top: 40%;
    }
    
    .page-id {
        font-size: 2em; /* page-id a bit too big */
        margin-top:8.5%;
        
    }

    .spotlight button, .mailing-list button
    {/* button too big, text wraps without this */
        float:none; 
        height: 40px;
        font-size: 1em;
    }
    
    .spotlight button
    {/* spotlight button too big, separate from mailing-list */
       width: 150px; 
    }
    
    
    /* https://css-tricks.com/injecting-line-break/ */
    span.line-break {
        display: table;
    }
    
    /* adds carriage return in jumbotron */
    br.add-break{
        display:block;

    }
    
    /* button is too big in mobile */
    .spotlight-link{
        min-width: 150px;
    }
    
    /* end spotlight rules */
    
    a.navbar-brand {
        margin-left: 5%; /* push nav icon right on safari */
    }

    a.next-link {
        padding: 1% 5%; /* helps buttons fit on line in mobile for jumbotron */
    }
    
    a.next-link-flip {
        /*padding: 1% 5%; */
        display:block;
        width:60%;
        margin-bottom:2%;
    }
    
    /* show/hide contact sections */
    section.contact-desktop{
        display:none;
    }
    
    section.contact-mobile {
        display: block;
        text-align: center;
        padding: 1.5em 0;
    }
    /* end show/hide contact sections */
    
    
    section.contact-mobile input[type=text] {
      width: 75%; /* make sign up wider */
    }
    
    section.contact-mobile form {
      margin-bottom:1em;
    }
    
    /* start cta */
    
    section.ctas div.cta div {
        float:none;
        width:100%;
        /* make image go full width - padding-bottom effects responsive embed */
        padding-top:0;
        padding-left:0;
        padding-right:0;
    }
    
    section.ctas div.cta div > p {
        padding: 0 5%; /* adds space around text */
    }
    
    /* div.story is on student profile pages and we need text to align left */
    section.ctas div.cta div.story > p {
        padding:0;
    }
    
    section.ctas div.cta div > h3 {
        margin-top: 1em; /* adds space below pic */
    }
    
    section.ctas div.cta div > button {
        margin-bottom: 1em; /* adds space below button */
    }
    
    /* pic before text in mobile */
    section.ctas div.cta:nth-child(even) .pic {
        order:1;
    }

    section.ctas div.cta:nth-child(even) .text {
        order:2;
    }
    
    /* end cta */
    
    /* start info boxes mobile */
    
    section.info-boxes{
        margin:2%; /*create space around boxes in mobile */
    }

    section.info-boxes div{
        width:100%;
        min-height:initial; /* back to default */
    }

    section.info-boxes div {
        margin-bottom: 4%;
    }
    
    section.info-boxes icon {
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    section.info-boxes icon-single {
        padding-top: 2%;
        padding-bottom: 2%;
    }
    
    section.info-boxes ul {
        padding-left: 5px;
    }
    
    /* section is internal due to name conflict with div */
    section.info-boxes > div > section{
        float:none;
        width:100%;
    }

    /* end info boxes mobile */
    
    
    /* START pricing tables mobile 
    .pricingTable2{
        padding-bottom:5%; /*create space between pricing tables in mobile
    
    }
    
    */
    
    /* END pricing tables mobile */
    
    
    /* start carousel display mobile */
    .carousel-control-next-icon, .carousel-control-prev-icon {
        display: none; /* hide in mobile */
    }

    /* end carousel display mobile */
    
    /******** START quarter tabs mobile ********/

    div.quarter-tab{
        float:none; 
        width:100%;
    }

    /******** END quarter tabs mobile *********/
    
    
    /* start icon list styles */

    section.icons{
        display:block;
    }

    section.icons div{
        margin-top:15%;
        width:100%;
    }

/* end icon list styles */
    
/* hides long chars, for example on panel */
    
    .hide-mobile{
        display:none
    }
    
/* end hides long chars, for example on panel */    
    
 /* start office/office map on central page */
    
    div.office, div.office-map{
        float:none;
        width:100%;
    }
    
    div.office{
        margin-bottom:10%;
    }
    
 /* end office/office map on central page */ 
    
   /* add space below buttons in mobile on CTA */
    div.text .button-link{
        margin:5px 2px 60px 2px;
    }
    
   /* end add space below buttons in mobile on CTA */  
    
    /* career-training filter form space */
    form#careerTrainingForm .col-sm-12{
        margin-bottom:5%;
    }
    
    form#careerTrainingForm .no-margin-mobile{
        margin:0; /* must be below #careerTrainingForm */
    }
    
   /* end career-training filter form space */
    
    
  /* breadcrumb too far right on mobile */
    
    .breadcrumb-container {
        padding-left: 0;
    }
    
  /* end breadcrumb too far right on mobile */ 
    
    
 /* moving filter toggle on mobile - career-training & programs */
    
    .switch {
         margin-left: 5%;
    }
    
    .panel-title {
        margin: 2% 1% 0 0 !important;
    }
    
        
 /* end moving filter toggle on mobile - career-training & programs */
    
    /* start pic-row, used on seattle-central.php */

    .pic-row{
        display:block;
        margin-bottom: 20%;
    }
    
    .pic-item{
        margin:5% 0;
    }
    
    .pic-item img{
        width:100%;
    }
    
    /* end pic-row */  
    
     /* start scroll on transfer-success.php, removed in mobile */

    div.table-header-fixed {
        height: 100%;
        overflow: auto;
    }

    /* end scroll on transfer-success.php, removed in mobile */
    
    
    /* adds map qstring attribute on mobile only - remove on desktop */
    #map-desktop{
        display:none;
    }    
    
    #map-mobile{
        display:block;
    }
    /* end adds map qstring attribute on mobile only - remove on desktop */
    
    /* start search box on search-majors page - wider in mobile */
    div#search-majors{
        width:100%;
    }    
    /* end search box on search-majors page - wider in mobile */
    
    
    searchbar:hover > .search_input{
        width: 80%;
    }
    
    
    /* details element needs more space on mobile */
    
    details.accordion{
        padding:2% 0;
    }
    
    details.accordion p, details.accordion summary{
        padding:0 2%;
    }
    
    main.wide-accordion{
        padding:  0 5%;
    }
    
    /* move the language gadget a bit left on mobile */
    .goog-te-gadget{
        margin-left:3%;
    }
    
    .desktop{/* how to show/hide things */
        display:none;
    }
    
    .mobile{
        display:block;
    }
    
    
    
}/* end mobile media queries */