/* General site content */

#back-top {display: none !important}

.logo {
    width: 50vw;}
    
@media only screen and (max-width: 950px) {
    .logo {width: 80vw; margin: 10px;}
}

h1.intro {
    font-size: 2.3em; 
    font-family: Lato, sans-serif; 
    font-weight: 300; 
}

p.slogan {line-height: 42px;}

/* Accordion styles */

.accordion {
    	margin: 0 auto 20px auto;
		max-width: 700px;
        width: 90vw;
}

.panel-info-dark .panel-heading {background-color: #3274ad; }
    
.panel-plus-link {padding: 10px 10px;}

.panel-plus-link a {padding-top: 0 !important; padding-bottom: 0px !important;}

.panel-heading.panel-plus-link > a, .panel-heading-link > a {padding-left: 0px;}

.panel-group .panel > .panel-heading.panel-plus-link a.collapsed:before {font-size: 16px;}

.panel-group .panel > .panel-heading.panel-plus-link a:before {font-size: 16px;}

.panel-plus-link h2 {font-size: 1.4em; display: inline;}
.panel-plus-link h3 {font-size: 1.2em; display: inline;}

 @media screen and (min-width:768px) {
    .panel-plus-link h2 {font-size: 1.7em;}
    .panel-plus-link h3 {font-size: 1.4em;}
}

/* Posters / Flyers / Social Media Downloads */

img.flyer {border: 1px solid black; margin-bottom: 10px;}
    
@media screen and (max-width: 1199px){
	row.flyer h3 {font-size: 1.5em;}
}

.row.flyer .col-sm-6 {min-height: 525px;} /* to allow proper wrapping at narrower screen widths */


/* Footer */

#btheone-sitefooter {
    text-align: center;
    padding-bottom: 30px;
    }

@media only screen and (max-device-width: 991px) {
    #btheone-sitefooter {padding-bottom: 0px;}
    #btheone-sitefooter .partner-logo {margin-bottom: 30px;}
}

/* Google Translate widget - adjust colors for accessibility */
.goog-te-gadget,
#footer-widgets a {color: #fff;}
select.goog-te-combo {color: #000;}


/* ----------------
   Ray's styles 
-----------------*/

body {font-family: 'Rubik'; font-size: 19px; line-height: 1.2em; color: #003046; /* overflow-x: hidden; */}
p, h1, h2 {margin: 0.6em;}
h1 {font-size: 28px; color: #004767; font-weight: 900}
h2 {font-size: 24px; line-height: 1em; font-weight: 800; text-align: center; color: #004767;}
p {font-weight: 500;}
a {font-weight: 500; color: inherit; text-decoration: underline; transition: 1s color}

.bluebox {background-color: #3474af;}
.purplebox {background-color: #6F69AF;}
.tealbox {background-color: #39BEB6;}

.bto-box {
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100vw;}
    
.bto-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: -1px;}
    
.bto-row2 {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: -1px}
    
.imgbox {
    width: 50%;
    margin: 0vw;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
.left {
    padding: 2vw 3vw 2vw 10vw}
    
.right {
    padding: 2vw 10vw 2vw 3vw}
    
.textbox {
    margin: 0vw;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;}
    
.textbox p {max-width: 100%;} /* for proper flex display in IE */
    
p img {width: 100%}

.imgbox img{
    width: 40vw;
    max-width: 1000px;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;}
    
.imgbox iframe, .textbox iframe {
    width: 40vw;
    max-width: 1000px;
    height: 22.695vw;
    margin-top: 25px;
    margin-bottom: 25px;
    opacity: 1;}
   
#vertical {
    width: 22.5vw;
    height: 40vw;
    margin-top: 25px;
    margin-bottom: 25px;
    opacity: 1;}
    
.sticky {
  position: fixed;
  top: 0;
}

#menubar {
    width: 100vw; 
    background-color: #004767; 
    z-index: 10;
}

.menu {
    display: flex; 
	align-items: flex-end; 
	justify-content: center;
	padding: 5px 0px 0px 5px;
	margin: auto;
	justify-content: space-evenly;
    width: 30vw; 
}

.menu button {
    border-top-left-radius: 10px; 
	border-top-right-radius: 10px; 
	margin: 0; 
	background-color: transparent;
    transition: background-color 0.5s;
    line-height: 16px;
	padding: 5px 10px 5px 10px; 
	border: none;
	font-family: "Rubik";
	font-size: 12px;
	font-weight: 500;
	color: white;
	outline: 0;
	flex-grow: 1;
    /* flex: 1 0 auto;
    max-width: 100%;;
    box-sizing:border-box; */
}

.tab {background-color: #003046; 
	color: white; 
	font-family: "Rubik";
	font-size: 22px; 
	font-weight: 500;
	display: flex; 
	justify-content: center; 
	align-items: center; 
	padding: 10px;
	line-height: 22px;}

.tab a {margin-left: 10px; margin-right: 10px;}

button:focus {text-decoration: underline}

.logomini {opacity: 0; height: 3em;}

.navfade {transition: opacity 0.25s; opacity: 1;}
 
@keyframes swipeup {100% {height: auto}}

@media only screen and (max-width: 1200px) {
    .imgbox img, .imgbox iframe {width: 45vw;}
    .imgbox iframe {height: 25.3vw;}}
    

 
@media only screen and (max-width: 950px) {
    .tab {flex-direction: column; align-items: stretch;}
    .menu {margin-top: 0px; width: 100vw;}
    .bto-row, .bto-row2 {flex-direction: column;}
    .imgbox {width: 100vw;}
    .imgbox img, .imgbox-center img {width: 100vw; margin-top: 4px; margin-bottom: 4px}
    .imgbox iframe, .textbox iframe {width: 90vw; height: 50.625vw; margin-top: 4vw; margin-bottom: 4vw;}
    .textbox {width: 100vw}
    body {line-height: 18px;}
    body p, body li {font-size: 16px;}
    body h1 {font-size: 20px;}
    #menubar {position: fixed; bottom: 0; left: 0;}
    .bluebox, .purplebox, .tealbox {color: white; background-color: #004767;}
    .left, .right, .textbox {padding: 2vw 5vw 3vw 5vw;}
    #vertical {width: 90vw; height: 160vw;}
}



@media only screen and (min-width: 1800px) {
    body p, body li, body a {font-size: 20px;}
    body h1 {font-size: 28px;}
    body h2 {font-size: 24px;}
    /* body h2 {font-size: 80px;} */


@media only screen and (max-width: 402px) {
    #ar-brand img {width: 260px;}
}