/*
    main.css goes after bootstrap's css file and overrides defaults with our colors, etc.

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

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

    new site colors:

    https://www.figma.com/file/Eq6xAbjeElzHU8eFBZZ66Scf/Seattle-Colleges-Web-Team-Colors?node-id=0%3A1

    yellows, dark to light
    #A7802D
    #ffc628 *standard yellow
    #F8D88F

    blues, dark to light
    #003C75
    #004DA8 *standard blue
    #026AD1
*/


/********* START GLOBAL STYLES *************/


/************ START clearfix for floats ***********/
* {
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/************** END clearfix for floats ***************/


/*
THE RULES BELOW REMOVED AS MOVED CTAS FROM LEFT, ETC.
possibly putting padding back on main globally due to cta's no longer have color
*/
main {
    /* several elements need to leave space to the left, etc. */
    /* padding: 1.5% 1.5% 0 1.5%;*/
	/* padding: 0 7%; */
    padding: 0 8.5%;
}

/* the old version has specific padding on items, added to main, removed 11/13/2019, re-added 2/4/2020 */

/*
main>p,div.form-group,.breadcrumb-container{
    padding: 0 5%;
}
*/

a {/* no underline on any links, site wide */
	text-decoration: none;
    color:#004da8;
}

/* rules from original stylesheet, edited */
body,H1-H6{
    /* NOT USING THIS EITHER font-family: 'Open Sans', sans-serif;*/
    /*  PREVIOUSLY USED GOOGLE FONT font-family: 'PT Sans', sans-serif; 
        previous font?  (maybe could not find reference)
        font-family: 'myriad-pro', sans-serif; 10/14/2019
    */
    font-family: 'Roboto', sans-serif;
}


.desktop, .show{/* how to show/hide things */
    display:block;
}

.mobile, .hide{
    display:none;
}

/*********** START page id ***********/
/* main H1 gets this rule */
.page-id {
    text-align:left;
    font-weight:700;
    margin: 1% 0%; /* space on all sides */
    font-size: 2.5em;
}
/*********** END page id ***********/

/*********** START H1 on main section pages ***********/
.section-text{
    text-align:center;
    /* margin-top: 1em; */
    font-size:2.5em; /* change to 2em on mobile */
    font-weight:bold;
}
/*********** END H1 on main section pages ***********/

/*********** START H2 on main section pages ***********/
.section-subtext{
    text-align:center;
    margin-top: .5em;
    font-size:1.5em;
    line-height: 1.5;
}
/*********** END H2 on main section pages ***********/

/*********** START next-steps styles ***********/
.next-steps{
    /*icy blue*/
	/*background-color:#4BB4E6;*/
	background-color: #d2e7ff;
}

.next-steps div{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    padding-bottom:3%;
    min-width:80px;
}

.next-steps h2 {
    text-align:center;
    font-weight:700;
    padding-top: 3%; /* space on all sides */
    font-size: 2.5em;
}

a.next-link {
    padding: 3px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    color: #000;
    background-color: #d2e7ff;
    border: 3px solid #000;
    font-weight: 600;
}

a.next-link:hover
{/* color change on hover for button-link */
	color: #FFF;
	background-color: #000;
}

a.next-link-flip {
    min-width:200px;
    padding:0.5% 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    color: #FFF;
	background-color: #000;
    /*border: 3px solid #d2e7ff;*/
    border: 3px solid #000;
    font-weight: 600;
}

a.next-link-flip:hover
{/* color change on hover for button-link */
    border: 3px solid #000;
    color: #000;
    background-color: #d2e7ff;
}
/*********** END next-steps styles ***********/


/************ START social media ************/
.social-media {
	display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-items: center;
}
/************ END social media ************/


/************ START email form styles ************/
.email-form input {
	font-size: 1em;
	font-weight: 100;
	border: 1px solid white;
	color: white;
	background: transparent;
	padding: 6px;
	right: 1%;
}
.email-form button {
	border: 1px solid white;
	background: transparent;
	color: white;
	font-size: 1em;
	padding: 6px;
	left: -1%;
}

button:focus {outline:0;} /* removes outline on buttons */

/* over-ride default BS styles with light yellow on submit buttons */
.btn-info {
    /* previously, was:
    color: #000;
    background-color: #4BB4E6;
    border-color: #4BB4E6;
    changed styles so it would work with filter panel
    */
    color: #fff;
    background-color: #004da8;
    border: 2px solid #004da8;
    border-radius: 0rem;
    font-weight:700;
}

.btn-info:hover {
    color: #000;
    background-color: #fff;
    border: 2px solid #000;
}
/************ END email form styles ************/


/************ START desktop only nav ************/

/* Page Navigation */
#logo {
	/*height: 30.5px;
	width: 252px;*/
    max-width:400px;
	padding-left: 30px;
	position: relative;
	float: left;
}
#logo:hover{
	transform: scale(1.1);
	transform-timing-function: ease-in-out;
}
.navigation {
	overflow: hidden;
	top:0;
	position: fixed;
	width: 100%;
	background-color: transparent;
	z-index: 999;
	/* padding-bottom: 30px; */
}
/* bootstrap transparency */
.navbar {
    /* putting transparency on .navbar is too broad - affects mobile */
    /*background:transparent;*/
}
.section-nav-container{
	padding-top: 3%;
    min-height:112px;
}
.section-nav {
	/* padding-left: 40%; */
	padding-right: 2%;	
}

.section-nav ul {
	font-weight: 700;
	font-size: -.94em;
    color:#fff;
	padding-left: 60px;
	float: right;
	padding-top: 8px;
	display: block;
}

.section-nav a {
	/* font-family: "Arial", sans-serif; */
    font-family: "myriad-pro", sans-serif;
    font-weight: 900;
	font-size: 1.1em;
    color:#fff;
	padding-left: 60px;
	float: right;
	padding-top: 8px;
	display: block;
}
.section-nav a:hover{
	/*color: #122D39;*/
}
.section-nav a:active{
	/*color: #122D39;*/
}

/* color of background changes from transparent to blue on scroll 
.navigation.scrolled {
  background-color: #004da8 !important;
  transition: background-color 200ms linear;
}
*/

.section-nav-container.scrolled {
  background-color: #004da8 !important;
  transition: background-color 200ms linear;
}

/* nav that appears when hamburger icon is clicked in desktop */
nav.top-level {
    float:right;
    /*background-color:#4BB4E6; Sarah thought this was too bright */
	background-color:#d2e7ff;
    padding:0 1.5em;
    display:none;
}

nav.top-level ul {
    list-style-type: none;
    padding: 1em;
    margin-bottom:0;
}

nav.top-level li{
    text-decoration:none;
    padding:.5em .5em  .5em 0;
}

nav.top-level a{
    font-family: "Arial";
    color:#000;
    font-weight: 900;
}
/************ END top-level nav ***********/

/************ START breadcrumb styles ************/
.breadcrumb-container {
    padding-bottom: 20px;
    padding-top: 30px;
    padding-left:0px;
}

.breadcrumb {
    background-color: #fff;
    border-radius: 2px;
    color: #555;
    font-size: 16px;
    margin: 0;
    padding: 0 0 0 4px;
}

.breadcrumb>li {
    display: inline-block;
}





.breadcrumb>li+li:before {
    /*padding: 0 1px;*/
    color: #ccc;
    /*content: "/\00a0";*/
    content: "\00a0/";
}

.breadcrumb li:last-child:before {
    content: "\00a0/\00a0";
}

.breadcrumb a {
    color: #555;
}

.breadcrumb a:hover {
    color: #004da8;
    text-decoration:none;
}

.breadcrumb .active {
    color: #000;
    font-weight: bold;
}

@media only screen and (max-width: 991px){
    .breadcrumb-container {
        padding: 24px 24px 0 24px;
    }
}

@media only screen and (max-width: 1250px){
    .breadcrumb {
        font-size: 12px;
    }
}
/************ END breadcrumb styles ************/

/************ END desktop only nav ************/

/******** START quarter tabs global ********/
/*
div.quarter-tab{
    margin-top:5%;
}
*/
/******** END quarter tabs global *********/


/*********** START dropdown pretty select **********/
.dropdown-item-intl 
{/* dropdown-item in bs4 disallows color change */
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color:#fff;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    margin-left:7.5%;
}

a.dropdown-item-intl:hover 
{/* was showing underline on hover */
  text-decoration: none;
  color: #004da8;    
}
/******* END dropdown pretty select ***********/


/******* START bs4 nav styles - from Bootstrapthemes.co btco-hover-menu *********/

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-hover-menu a ,  .navbar > li > a {
    text-transform: capitalize;
    padding: 10px 15px;
}
.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus ,
.navbar>.show>a,  .navbar>.show>a:focus,  .navbar>.show>a:hover{
    color: #fff;
    background: transparent;
    outline: 0;
}

/*submenu style start from here*/
.dropdown-menu {
    padding: 0px 0; 
    margin: 0 0 0; 
    border: 0px solid transition !important;
    border: 0px solid rgba(0,0,0,.15);	
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #004da8;
}

/*first level*/



/*

was delivering a white background on click (likely focus)
removed all of the below

.btco-hover-menu .collapse ul > li:hover > a{background: #4BB4E6;}
.btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}

*/



/*second level*/
/* .btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;} */

/*third level*/
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#4BB4E6;}
.btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#4BB4E6;}
.btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#4BB4E6;}

/*Drop-down menu work on hover*/
.btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}

@media only screen and (max-width: 991px) {
    .btco-hover-menu .show > .dropdown-toggle::after{
        transform: rotate(-90deg);
    }
}
@media only screen and (min-width: 991px) {

    .btco-hover-menu .collapse ul li{position:relative;}
    .btco-hover-menu .collapse ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
    .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
/******** END bs4 nav styles - from Bootstrapthemes.co btco-hover-menu *******/

/******** END main nav styles *********/

/******** START hero styles, featured pic on key pages **********/
figure.hero
{/*removes odd space (margin) under figure */
    margin:0;
    position:relative;
}

figure.hero img
{/* hero image to be as wide as available space */
    width:100%;
}
/********* END hero styles ************/


/******** START spotlight, banner under hero on key pages *********/
.spotlight{
    /*background-color: #4BB4E6; */
    min-height: 120px;
    padding:1.5% 1.5% 0 1.5%;
    position: absolute;
    left: 55%;
    top: 65%;
    color:#fff;
}

.spotlight-link,section.spotlight a{
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* the following 2 rules work together to keep text from wrapping */
    padding: 3% 7%;
    min-width:300px;
    margin: 0 2% 3% 2%;
	color: #000 !important;
	background-color: #d2e7ff;
	font-size: 1.25em;
    font-weight: 600;
    cursor: pointer;
}

.spotlight-link:hover,section.spotlight a:hover
{/* color change on hover for button */
	color: #fff !important; /* footer color was over-riding link and hover */
	background-color: #000;
    /* border: 3px solid #000; No more Black border */
    text-decoration:none;
}

a.button-link {
    padding: 5% 7%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5% 2%;
    cursor: pointer;
    color: #000;
    background-color: transparent;
    border: 3px solid #000;
    font-weight: 600;
}

a.button-link:hover
{/* color change on hover for button-link */
	color: #FFF;
	background-color: #000;
}
/* social media page buttons need to be same size */
.social-buttons .button-link{
    min-width:175px;
}

.spotlight h3{
        color:#000;
        font-size:2em;
        /* text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; */
    }

span.line-break {
    display: inline; /* undo mobile line break */
}

/******* END spotlight styles ***********/


/******* START global cta styles ********/
section.ctas{
   font-size: 1.1em;
}

section.ctas div.cta > div {
    /* float:left; NO FLOAT FOR FLEXBOX*/
    width:48%;
    /*padding:2%; */
}

/* pic takes up 100% of container */
section.ctas div.cta div.pic img{
    width:100%;   
}

section.ctas div.cta div.text{
    text-align:center;
}

/* puts a little space around the text inside the cta */
section.ctas div.cta div.text p{
    padding:0 8%;
}

/* div.story is an alternate to div.text used on student profile pages */
div.story p{
  padding-right:5%;  
}

a.button-link {
        padding: 2% 7%;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 5% 2%;
        cursor: pointer;
        color: #000;
        background-color: transparent;
        border: 3px solid #000;
        font-weight: 600;
        min-width:152px;
        min-height:42px;
}

a.button-link:hover
{/* color change on hover for button-link */
	color: #FFF;
	background-color: #000;
}

div.cta h3{
    font-family:"Arial Black";
    font-size: 1.25em;
    font-weight: 900;
}

/*
we're no longer odd/even with color backgrounds on ctas - 2/4/2020
section.ctas div.cta:nth-child(odd) {
  background: #4BB4E6;
}

section.ctas div.cta:nth-child(even) {
  background: #FFF;
}
*/

section.ctas div.cta{
    margin-bottom:5%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
    align-items: center;
}    /* embed-container doesn't work on desktop in ctas */
    
    /* chris coyier - embed responsively doesn't work in desktop in the cta
        https://css-tricks.com/responsive-iframes/

        hook to element: style="--aspect-ratio: 16/9;"

    */
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

/* end global cta styles */


/******** START info-boxes desktop *********/

section.info-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-bottom:2%;
}

/* the following dictate how many info box columns we have */

.two-column{
    width:47%;
}

.three-column{
   width:30%; 
}

section.info-boxes > div{
    --webkit-box-shadow: -1px 1px 4px 1px rgba(0,0,0,0.49); 
    box-shadow: -1px 1px 4px 1px rgba(0,0,0,0.49);
    border-top : 8px solid #004da8;
    margin:0 1%;
    min-height:275px; /* used to be 500px; boxes should be same size in desktop */
    padding:2%; /* padding was throwing off embed css - fix later? */
}

/* children of info box divs are 50% on desktop, 100% on mobile */

section.info-boxes > div > section{
    float:left;
    width:50%;
}

section.info-boxes>div h3{
    font-family:"Arial";
    font-size: 1.25em;
    font-weight: 900;
    text-align: center;
}

section.info-boxes p {
    text-align: center;
}

section.info-boxes icon {
    padding-bottom: 5%;
}

section.info-boxes icon-single {
    padding-bottom: 2%;
}

section.info-boxes li:before{
    content:»
}

section.info-boxes ul {
    list-style-type: none;
}
/******** END info-boxes desktop ********/

/******** START quarter tabs desktop dates & deadlines ********/

div.quarter-tab{
    margin-top:3%;
    float:left; 
    width:50%;
}

div.quarter-tab h2{
    margin-bottom:5%;
}

.deadline{
    margin-top:5%; /* space above desktop only */
}

/******** END quarter tabs desktop dates & deadlines *********/

/******* START embed responsively *******/
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
/********** END embed responsively **********/


/********* START awesome searchbar css - based off https://bootsnipp.com/snippets/GaeQR *********/
.searchbar{
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    /*background-color: #4BB4E6;*/
	background-color: #d2e7ff;
    border-radius: 30px;
    padding: 10px;
}

.search_input,.search_majors{
    color: #000;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color:transparent;
    line-height: 40px;
    transition: width .6s linear;
}

.searchbar:hover > .search_input,.searchbar:hover > input.search_majors{
    padding: 0 10px;
    width: 80%;
    caret-color:red;
    transition: width .6s linear;
}

.searchbar:hover > .search_icon, .searchbar:hover > a.search_majors{
    background: white;
    /*color:#4BB4E6;*/
	color:#000;
}

.search_icon,a.search_majors{
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /*color:white;*/
	color:black;
}

.search_input::placeholder,input.search_majors::placeholder {
  /*color:#fff !important;*/
  color:#000 !important;
}

.sc-searchicon{
    cursor:pointer !important; /* cursor is mysteriously an i-beam? */
}
/******** END awesome searchbar css *******/



/********* END GLOBAL STYLES **********/


/******** START margin top - in desktop obscures page header  - investigate duplicate rules? *******/
@media only screen and (min-width: 600px) and (max-width: 1199px)
{
    
    body{
        padding-top:15%;
    }

}

@media only screen and (min-width: 1200px) 
{
    /* when content is at top of page,nav text conflicts due to transparency */
    body{
        padding-top:110px;
    }
    /* class feature on body removes gap at top necessary for text at top */
    body.feature{
        padding-top:0;
    }   
}

@media only screen and (min-width:1400px)
{/* on a wide screen, the nav isn't centered and this helps! */
        .section-nav-container {
            padding-top: 2%;
    }
}

/****** end margin top in desktop **********/


/******* START desktop media query ********/
@media only screen and (min-width: 600px) 
{
    
    #main-nav{
        display:none;
    }
    
    #desktop-nav{
        display:block;
    }

    .email-form{
        margin-bottom:10%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }
    
    footer.default section.contact{
        margin-right:10%;
    }
    
    .social-media span{
        display:inline-block;
        padding-right: 10%;
    }
    
    /* this was changed to a link, should not be a button any longer */
    .spotlight button:hover
    {/* needs to be right side on desktop */
        float:right;
    }
    
    /* show/hide contact sections */
    section.contact-desktop{
        display:block;
        width:40%;
    }
    
    section.contact-mobile{
        display:none;
    }
    
    /* make sign up wider */
    section.contact-desktop input[type=text] {
      width: 75%;
    }
    /* end show/hide contact sections */
    
    /* align right right nav in footer, desktop only */
    footer.default nav:nth-of-type(2){
        text-align:right; /* center in mobile */
    }
    
     /* adds carriage return in jumbotron */
    br.add-break{
        display:none;

    }

}
/********* END desktop media query ********/


/******** START footer styles **********/
footer.default {
    background-color:#004da8;
    padding-top: 3%;
    padding-bottom: 3%;
    
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    clear: both;
}

footer.default a {
    color: white;
    font-size: 1.1em;
    bottom: 1%;
    top: 1%;
}

footer.default hr {
    border:.05em solid #FFF;
}

footer.default nav a:hover {
	/*background-color: rgba(255,255,255,.4);*/
    
}

footer.default nav {
	/* padding: 1.5% 4% 0 4%; */
    padding: 1.5% 7% 0 7%;
	text-align:left; /* center in mobile */
}

footer.default section.contact{
    padding-left:20%;
}

div.mailing-list{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    margin-bottom:5%;
}

/*********** END footer styles **************/


/********* START Accordion *****************/
/* Based off https://codepen.io/frogmcw/pen/deqRwa */
details.accordion {
  /* width: 75%; */
  min-height: 5px;
  /* max-width: 700px; */
  max-width: 100%;
  /*padding: 20px 20px 20px 45px;*/
  padding: 10px 20px;
  margin: 0;
  position: relative;
  font-size: 18px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 0px; /* was 15px before - rounded corners   */
  box-sizing: border-box;
  transition: all .3s;
  /* cursor: pointer;  adds cursor to entire box, but entire box needs to click to open */
}

details.accordion + details.accordion {
  /*margin-top: 20px;*/
  margin-top: 10px;
}

details.accordion[open] {
  min-height: 50px;
  background-color: #f6f7f8;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details.accordion p {
  color: #96999d;
  font-weight: 300;
  margin: 10px 0px;
}

details.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
}

summary:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,0), 0 0 0 5px rgba(0,0,0,0);
}

summary::-webkit-details-marker {
  display: none
}

.control-icon {
  /* fill: rebeccapurple; */
  transition: .3s ease;
  pointer-events: none;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
  transition: .3s ease;
}

details[open] .control-icon-expand {
  display: none;
}

details[open] summary:hover::after {
  animation: pulse 1s ease;
}

@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/********* END Accordion *****************/


/********* START Dynamic Table / Tabs *****************/
.tabs {
    max-width: 100%;
    /* margin: 0 5% auto; */
    padding: 0;
    /* padding: 0 20px; */
}
#tab-button {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#tab-button li {
    display: table-cell;
    width: 20%;
}
#tab-button li a {
    display: block;
    padding: .5em;
    background: #eee;
    border: 1px solid #ddd;
    text-align: center;
    color: #000;
    text-decoration: none;
}
#tab-button li:not(:first-child) a {
    border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
    border-bottom-color: transparent;
    background: #fff;
}
.tab-contents {
    padding: .5em 2em 1em;
    border: 1px solid #ddd;
}

.tab-button-outer {
    display: none;
}
.tab-contents {
    margin-top: 0px;
}
@media screen and (min-width: 768px) {
    .tab-button-outer {
        position: relative;
        z-index: 2;
        display: block;
    }
    .tab-select-outer {
        display: none;
    }
    .tab-contents {
        position: relative;
        top: -1px;
        margin-top: 0;
    }

    .tab-contents h2{
        margin-top:3%;
    }    
}
/*
@media screen and (max-width: 479px) {
    .tab-contents {
        padding: .25em;
    }
}
*/
/********* END Dynamic Table / Tabs *****************/


/********* START Dropdown / Select menu *****************/
.custom-select-lg {
  max-width: 80%;
  margin: 0 5% auto;
}
/********* END Dropdown / Select menu *****************/


/********* START Switch / Toggle button *****************/

/*
.custom-control.custom-switch {
  margin: 0 5% auto;
}
*/
/********* END Switch / Toggle button *****************/


/********* START Jumbotron *****************/
div.jumbotron {
    padding-left: 0;
	margin-bottom: 0;
}

div.jumbotron h2{
    /* margin: 0 5%; */
	margin: 0 7%;
}

div.jumbotron a{
    font-weight: bold;
}
/********* END Jumbotron *****************/


/******************* START Pricing Table *****************/
.demo2{background:#fff;padding:50px 0;}
.pricingTable2{padding-bottom:30px;margin:0;background:#f2f2f2;text-align:center;border-radius:0px;overflow:hidden}
/*.pricingTable2:hover{box-shadow:0 0 10px rgba(195,67,67,.3) inset,0 0 20px -5px rgba(0,0,0,.8)}*/
.pricingTable2 .pricingTable-header{padding:20px 15px 45px;background:#6c757d;-webkit-clip-path:polygon(50% 100%,100% 60%,100% 0,0 0,0 60%);clip-path:polygon(50% 100%,100% 60%,100% 0,0 0,0 60%);position:relative}
/* No Animation
.pricingTable2 .pricingTable-header:before{content:"";width:400px;height:400px;border-radius:50%;position:absolute;right:-50%;top:-130%;background:repeating-radial-gradient(rgba(255,255,255,.05),rgba(255,255,255,.2) 20%);transition:all .5s ease 0s}
*/
/*.pricingTable2:hover .pricingTable-header:before{right:50%}*/
.pricingTable2 .title{font-size:30px;color:#fff;margin:0}
.pricingTable2 .price-value{display:block;font-size:25px;color:#fff;margin:0 0 20px;transition:all .3s ease 0s}
.pricingTable2 .pricing-content{padding:30px 25px 0;margin:0;list-style:none}
.pricingTable2 .pricing-content li{font-size:18px;color:#000;line-height:40px;letter-spacing:1px;text-transform:capitalize;border-bottom:2px solid rgba(0,0,0);margin-bottom:10px;position:relative}
.pricingTable2 .pricing-content li:last-child{border-bottom:none}
.pricingTable2 .pricing-content li i{color:#6c757d}
.pricingTable2 .pricingTable-signup{display:block;padding:18px 0;margin:0 25px;border-radius:10px;background:#6c757d;font-size:20px;color:#fff !important;letter-spacing:1px;text-transform:uppercase;overflow:hidden;position:relative;transition:all .3s ease 0s}
/*.pricingTable2 .pricingTable-signup:hover{letter-spacing:2px;box-shadow:0 0 10px rgba(0,0,0,.7),0 0 0 7px rgba(255,255,255,.5) inset}*/
/* No Animation
.pricingTable2 .pricingTable-signup:before{content:"";width:230px;height:230px;border-radius:50%;background:repeating-radial-gradient(rgba(255,255,255,.05),rgba(255,255,255,.2) 20%);position:absolute;top:-180%;right:-40%;transition:all .8s ease 0s}
*/
/*.pricingTable2 .pricingTable-signup:hover:before{right:40%}*/
.pricingTable2.blue .pricingTable-header,.pricingTable2.blue .pricingTable-signup{background:#6c757d}
.pricingTable2.blue .pricing-content li i{color:#6c757d}
.pricingTable2.pink .pricingTable-header,.pricingTable2.pink .pricingTable-signup{background:#6c757d}
.pricingTable2.pink .pricing-content li i{color:#6c757d}
@media only screen and (max-width:990px){.pricingTable2{margin-bottom:30px}
}
@media only screen and (max-width:479px){.pricingTable2{margin-bottom:20px}
.pricingTable2 .pricing-content li{font-size:15px}
}
/******************* END Pricing Table *****************/


/***************** START Coundown *********************/
/* this countdown is based off https://jsfiddle.net/bootstrapious/0myn62as */
.countdown {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown span {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 3rem;
    margin-left: 0.8rem;
}

.countdown span:first-of-type {
    margin-left: 0;
}

.countdown-circles {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown-circles span {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.countdown-circles span:first-of-type {
    margin-left: 0;
}

.bg-gradient-4 {
	background: #F0F0F0;
	/* background: #D3D3D3; */ 
	/* take out gradient */
    /* background: -webkit-linear-gradient(to left, #D3D3D3, #6c757d);
    background: linear-gradient(to left, #D3D3D3, #6c757d);*/
}

.rounded {
    border-radius: 1rem !important;
}

.btn-demo {
    padding: 0.5rem 2rem !important;
    border-radius: 30rem !important;
    background: #fff;
	/* background: rgba(255, 255, 255, 0.3); */
    /* color: #fff; */
	color: #000;
    text-transform: uppercase;
    font-weight: bold !important;
}

.btn-demo:hover, .btn-demo:focus {
    /* color: #fff; */
	color: #000;
    background: rgba(255, 255, 255, 0.5);
}
/****************** END Countdown **********************/

/* start admin styles */

/*
    Administrative styles for example on tables, etc.

*/

table.admin {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #fff;
    background-color: #d2e7ff;
    margin: 1em 0;
    font-family: 'Open Sans', sans-serif;
}

table.admin th {
    padding: 4px;
    border-style: solid;
    color: #000;
    background-color: #FFF;
    border: 1px solid #000;
}

table.admin td {
    border: 1px solid #fff;
    padding: 4px;
}

table.admin h3 {
    font-size: 1.8em;
}

table.admin b {
    font-size: 1.20em;
}

/* adds color to upload box */
.admin-uploads table{
    background-color: #d2e7ff;
    border: 1px solid #fff;
}



/* end admin styles */

/* alert styles */

.alert-success{
    color:#468847;
}

.alert-danger{
    color:#fff;
    background-color:#a81f00;
    border-color:#a81f00;
}

.alert-danger a{
    background-color:#ef4034;
    color:#fff;
}

/* end alert styles */

/* start icon list styles */

section.icons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

section.icons div{
    margin-top:5%;
    /* width:200px; */
    width:20%;
    text-align:center;
}

section.icons icon:hover{
    /* add color*/
    color:#000 !important; 
    
    /*box-shadow: 10px 10px 5px 0px #D3D3D3;*/
    /*box-shadow: 5px 5px 2.5px 0px #D3D3D3;*/
}

/* end icon list styles */


 /* start office/office map on central page */
    
    div.office{
        float:left;
        width:40%;
    }

    div.office-map{
        float:right;
        width:60%;
    }
    
 /* end office/office map on central page */ 

/* programs page styles */

.study_choice_selected{
    font-weight:900;
    color: #004da8;
}

/* end program page styles */

/* clear link on career-training page */

span.clear-link {
    font-weight: 900;
    vertical-align: middle;
    display: inline-block;
    padding-top: 3px;
    padding-right: 8px;
}

/* end clear link on career-training page */


/* special bold, since our default bold is subtle */


.special-bold {
    font-family: "myriad-pro", sans-serif;
    font-weight: 900;
}


/* special bold, since our default bold is subtle */

/* start pic-row, used on seattle-central.php */

.pic-row{
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:space-around;
    /*justify-content:space-around;*/
    justify-content:space-between;
    margin:3% 0 8% 0;
}

.pic-item{
    
}

/* end pic-row */

/* start cost table, cost.php */

table.cost td, table.cost th {
    padding: .25rem;
    border-top: 1px solid #6c757d;

}

table.cost th{
    background-color:#e9ecef;
}

/* start scroll on transfer-success.php, removed in mobile */

div.table-header-fixed {
    height: 400px;
    overflow: scroll;
    margin-left: 0px; /* was too far to left */
}

/* end scroll on transfer-success.php, removed in mobile */
/* end cost table, cost.php */

/* adds map qstring attribute on mobile only - remove on desktop */
#map-desktop{
    display:block;
}    

#map-mobile{
    display:none;
}
/* 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:37%;
}    
/* end search box on search-majors page - wider in mobile */

div#search-majors .modal-body{
    padding-left:0;
}

div#search-majors .modal-content{
    border:none;
}

/* start google language select element in the burger menu */

/*
.goog-te-combo{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 70%;
    height: 32px;
    padding: 0px 15px;
    font-size: 18px;
    color: #004DA8;
    background-color: #F8F8F8;
    background-image: none;
    border: none;
    border-radius: 4px;
    -ms-word-break: normal;
    word-break: normal;
}
*/

select.goog-te-combo{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    /* width: 70%; */
    height: 32px;
    padding: 0px 15px;
    font-size: 16px;
    /* color: #004DA8; */
    background-color: #F8F8F8;
    /* background-image: none; */
    border: none;
    border-radius: 4px;
    -ms-word-break: normal;
    word-break: normal;
  /* SVG background image */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: .6em;
    background-position: calc(100% - 1.3em) center;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none;
}

/* end google language select element in the burger menu */

/* start togglePassword */

/* eyeslash image */
#togglePassword{
    width:1.8%;
    height:1%;
    margin-left:-3%;
    display:inline;
    vertical-align:middle;
}

.toggleLogin{
   margin-left:1.5%;
}

/*
width="1.8%" height="1%" 
                style="margin-left: -5%;display:inline;
                vertical-align: middle"
*/

/* end togglePassword */

fieldset{
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
}