/******* Content Box & Link Box *******/

* {box-sizing:border-box;}
body, html {height:100%; margin:0; font-family:Arial; overflow-y:hidden; background-color:#FFF;} /* Set height of body and the document to 100% */

/* Style the tab content. */
div.contentBox div.tabcontent {display:none; color:white; padding:1.5rem; height:100%; opacity:.5; overflow:auto; -webkit-overflow-scrolling:touch; transition:padding .25s;}
div.contentBox div#home {background-color:red;}
div.contentBox div#news {background-color:green;}
div.contentBox div#contact {background-color:blue;}
div.contentBox div#about {background-color:orange;}
div.contentBox div#podcast {background-color:purple;}

/* Style the tab link box. */
div.tablinkBox {box-shadow:rgba(0,0,0,.25) 0px -2px 2px; border-top:0px solid #09C; overflow-y:hidden; transition:1s padding;}
div.tablinkBox button.tablink {background-color:#FFF; color:#666; float:left; border:none; outline:none; cursor:pointer; font-size:1rem; width:20%; transition:.1s; text-align:center; position:relative; overflow-x:hidden; padding:0;}
div.tablinkBox button.tablink div.bubble {border-radius:50%; background-color:rgba(22,22,22,0.15); opacity:0; padding:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:.05s; z-index:1;}
div.tablinkBox button.tablink:active div.bubble {opacity:1; padding:32px;}
div.tablinkBox button.tablink i.fa {font-size:1.5rem; margin:.25rem 0; z-index:1;}
div.tablinkBox button.tablink div.title {font-size:.6rem; margin:0 0 .25rem; z-index:1;}

/* mobile(xxs) */
@media screen and (max-width:399px) {
	div.tablinkBox {padding:0 2.5%;}
}
/* mobile(xs) */
@media screen and (min-width:400px) {
	div.tablinkBox {padding:0 5%;}
}
/* mobile(sm) */
@media screen and (min-width:576px) {
	div.tablinkBox {padding:0 10%;}
}
/* tablet(md) */
@media screen and (min-width:768px) {
	div.tablinkBox {padding:0 20%;}
}
/* laptop(lg), desktop(xl) */
@media screen and (min-width:992px) {
	div.tablinkBox {padding:0 30%;}
}


/****** Navbar & Side Navigation ******/

body.fixed {position:fixed; top:0; right:0; bottom:0; left:0; overflow:hidden;}
div#overlay {display:none; position:fixed; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:2; cursor:pointer;}
div.sidenav {height:100%; width:0; max-width:80%; position:fixed; z-index:2; top:0; left:0; background-color:#FFF; transition:0.25s; overflow-x:hidden;}
div.sidenav.open {width:240px; width:15rem;}
div.sidenav div.container {padding:1rem 0 3rem;}
div.sidenav div.container hr {border:0 none; border-top:1px solid rgba(0,0,0,0.1);}
div.sidenav div.container hr.full {margin:0 0 1rem;}
div.sidenav div.container hr.open {margin:.75rem 0 .75rem 3rem;}
div.sidenav div.container a {padding:.75rem 1.5rem; text-decoration:none; font-size:.8rem; color:#818181; display:block; transition:0.3s; /*display:none;*/ position:relative; font-weight:400;}
div.sidenav div.container a.logoBtn {margin:0 auto; /*display:inline-block;*/}
div.sidenav div.container a.logoBtn img {height:2.5rem;}
div.sidenav div.container a.logoBtn .text {font-size:1.25rem; padding:.75rem 0 .75rem .25rem; height:100%; display:inline-block; transform:translateY(-25%);}
div.sidenav div.container a.navBtn {}
div.sidenav div.container a i.fa {min-width:1.75em; /*position:absolute; left:0;*/ /*transform:translateX(-50%);*/}
div.sidenav div.container a:hover {color:#f1f1f1;}
div.sidenav div.container a.closeBtn {display:none; position:absolute; top:0; right:12px; font-size:24px; margin-left:50px;}


/****** Navbar & Side Navigation ******/

div.floatContainer {position:absolute; left:0; right:0; width:100%; transition:.25s;}
div.floatContainer div.floatBar {position:relative; z-index:1; background-color:#FFF; border:1px solid #DCDCDE; border-radius:8px; box-shadow:rgba(0,0,0,.25) 0px 1px 1px;}
div.floatContainer.b div.floatBar {height:2.5rem;}
div.floatContainer.a div.floatBar input#searchBox {width:100%; font-size:1em; border:0; border-radius:8px; /*opacity:.25;*/ padding:11px 52px; transition:1s;}
div.floatContainer.b div.floatBar input#searchBox {display:none;}
div.floatContainer div.floatBar div.btn {cursor:pointer; transition:0.1s;}
div.floatContainer.a div.floatBar div.btn {position:absolute; top:50%; transform:translateY(-50%);}
div.floatContainer.b div.floatBar div.btn {float:right;}
div.floatContainer.a div.floatBar div.btn.left {left:4px; padding:12px 6px 12px 12px;}
div.floatContainer.b div.floatBar div.btn.left {float:left;}
div.floatContainer.a div.floatBar div.btn.right {right:16px;}
div.floatContainer.b div.floatBar div.btn.right {float:right;}
div.floatContainer div.floatBar div.btn div.icon-bar {height:2px; background-color:#3e4245;}

/* Search Bar Default State */
div.floatContainer div.floatBar div.menuBtn, 
div.floatContainer div.floatBar div.acctBtn {display:block;}
div.floatContainer div.floatBar div.backBtn, 
div.floatContainer div.floatBar div.clearBtn, 
div.floatContainer div.floatBar div.dictateBtn {display:none;}
/* Search Bar Ready State */
div.floatContainer div.floatBar.searchReady div.menuBtn, 
div.floatContainer div.floatBar.searchReady div.acctBtn {display:none;}
div.floatContainer div.floatBar.searchReady div.backBtn {display:block;}
div.floatContainer div.floatBar.searchReady div.clearBtn {display:none;}
div.floatContainer div.floatBar.searchReady div.dictateBtn {display:block;}
/* Search Bar Active State */
div.floatContainer div.floatBar.searchActive div.menuBtn, 
div.floatContainer div.floatBar.searchActive div.acctBtn {display:none;}
div.floatContainer div.floatBar.searchActive div.backBtn {display:block;}
div.floatContainer div.floatBar.searchActive div.clearBtn {display:block;}
div.floatContainer div.floatBar.searchActive div.dictateBtn {display:none;}

/* Search Bar Button Components */
div.floatContainer div.floatBar div.menuBtn div.icon-bar {width:16px; border-radius:2px; position:relative; transition:.5s;}
div.floatContainer div.floatBar div.menuBtn div.icon-bar:nth-of-type(1) {bottom:2px;}
div.floatContainer div.floatBar div.menuBtn div.icon-bar:nth-of-type(2) {}
div.floatContainer div.floatBar div.menuBtn div.icon-bar:nth-of-type(3) {top:2px;}
div.floatContainer div.floatBar div.menuBtn.open div.icon-bar {opacity:0.1;}
div.floatContainer div.floatBar div.acctBtn img {border-radius:50%; height:24px; width:24px; position:absolute; top:50%; right:0; transform:translateY(-50%);}
div.floatContainer div.floatBar div.backBtn div.icon-box {transform:rotate(-45deg); border:solid #3e4245; border-width:2px 0 0 2px; padding:5px; cursor:pointer;}
div.floatContainer div.floatBar div.clearBtn div.icon-bar {width:14px; position:absolute; top:50%; left:50%;}
div.floatContainer div.floatBar div.clearBtn div.icon-bar:nth-of-type(1) {transform:translate(-50%,-50%) rotate(-45deg);}
div.floatContainer div.floatBar div.clearBtn div.icon-bar:nth-of-type(2) {transform:translate(-50%,-50%) rotate(45deg);}
div.floatContainer div.floatBar div.clearBtn span.icon-box {background-color:transparent; position:relative; height:14px; width:14px; display:block;}

/* mobile(xs), mobile(sm) */
@media screen and (max-width:767px) {
	div.floatContainer {top:.75rem; padding:0 .5rem;}
	div.contentBox div.tabcontent {padding-top:4.25rem;}
}
/* tablet(md), laptop(lg), desktop(xl) */
@media screen and (min-width:768px) {
	div.floatContainer {top:1.5rem; padding:0 1em;}
	div.contentBox div.tabcontent {padding-top:5rem;}
}
/* laptop(lg), desktop(xl) */
@media screen and (min-width:992px) {
	div.floatContainer {width:40%;}
}