/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

html, body {
    background-color: #ffffff;
    color: #444444;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.12rem;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

section {
	clear: both;
    max-width: 720px;
    margin: 60px auto;
    text-align: center;
}

h1, h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    color: #333333;
    text-transform: uppercase;
}

h1 { font-size: 120%; margin: 10px 20px 20px 20px; }
h2 { font-size: 100%; margin: 60px 20px 20px 20px; }

p { line-height: 1.4; margin: 20px 0px; }

ul { line-height: 1.4; margin: 20px 0px 20px 30px; }

a:link, a:visited {
    color: #000000;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

a:hover, a:active { color: #CD205C; }

/* ----------------------------------------------- */
/* STICKY NAVIGATION BARS */
/* ----------------------------------------------- */

.nav-bar {
    position: fixed;
    left: 0px;
    width: 100%;
    height: 40px;
}

.nav-bar-top {
    top: 0px;
    background-color: #CD205C;
    border-bottom: 1px solid #ffffff;
    z-index: 9998;
}

.nav-bar-top-left {
    float: left;
    margin: 9px 0px 0px 10px;
}

.nav-bar-top-right {
    float: right;
    margin: 9px 10px 0px 0px;
}

.nav-bar-bottom {
    bottom: 0px;
    padding-top: 7px;
    background-color: #1EA0AF;
    border-top: 1px solid #ffffff;
    font-size: 1.06rem;
    text-align: center;
    z-index: 9997;
}

.flk:link, .flk:visited,
.fbs:link, .fbs:visited,
.tws:link, .tws:visited,
.lnk:link, .lnk:visited,
.was:link, .was:visited,
.nav-bar-top-left a:link,
.nav-bar-top-left a:visited,
.nav-bar-bottom a:link, .nav-bar-bottom a:visited {
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.flk:hover, .flk:active { color: #4267B2; }
.fbs:hover, .fbs:active { color: #4267B2; }
.tws:hover, .tws:active { color: #1DA1F2; }
.lnk:hover, .lnk:active { color: #2867B2; }
.was:hover, .was:active { color: #25D366; }
.nav-bar-top-left a:hover,
.nav-bar-top-left a:active { color: #FFC000; }
.nav-bar-bottom a:hover,
.nav-bar-bottom a:active { color: #CD205C; }

/* ----------------------------------------------- */
/* GRID COMPONENTS */
/* ----------------------------------------------- */

.full {
    width: 700px;
    border-radius: 10px;
    padding: 10px;
    margin: 30px 10px 10px 10px;
    border: 1px solid #1EA0AF;
    text-align: left;
}

.half {
    float: left;
    width: 340px;
    height: 340px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

.half::after {
  content: "";
  clear: both;
  display: table;
}

.left-half {
    border: 1px solid #CD205C;
    text-align: center;
}

.right-half {
    border: 1px solid #1EA0AF;
    text-align: left;
}

.bottomframe { padding: 40px 0px 20px 0px; }

.midframe {
    position: relative;
    top: 50px;
    padding-bottom: 40px;
}

/* ----------------------------------------------- */
/* MAIN */
/* ----------------------------------------------- */

.logoimg { width: 64px; }
.onleft { text-align: left; }
.bldtxt { font-weight: 700; }
.errtxt { color: #ff0000; }
.lngtxt { word-break: break-all; }
.indented { padding: 0px 20px; }

/* ----------------------------------------------- */
/* MEDIA QUERIES */
/* ----------------------------------------------- */

@media only screen and (max-width: 740px) {
    section { padding: 0px 10px; }
    .full { width: 100%; margin: 10px 0px; }
    .midframe { top: 0px; padding-bottom: 0px; }
    .half {
        float: none;
        width: 100%;
        margin: 10px 0px;
        height: auto;
    }
    .bottomframe { padding: 0px 0px 20px 0px; }
}

@media only screen and (max-width: 360px) {
    img { width: 100%; }
}