/*100%       #ffffff
95%          #eef6f6
90%          #ddedee
85%          #cce5e5
80%          #bbdcdd
75%          #aad3d4
70%          #99cacc
65%          #88c1c3
60%          #77b8bb
55%          #66b0b2
50%          #55a7aa
45%          #4d9699
43%          #499092
40%          #448588
35%          #3c7577
30%          #336466
25%          #2b5355
20%          #224344
15%          #1a3233
10%          #112122
5%           #091111
0%           #000000 */


/* Core Stuff */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

body { font-size: 1.2rem; line-height: 1.5; letter-spacing: .14rem; color: #000; font-family: "Glory", san-serif; margin: 0;}
.mn {width:1000px;margin: auto;}

h1,h2,h3,h4,h5,h6 { color: #064d51; }
.site-title{text-align:center;font-size: 5rem; color: #fff; font-weight: 100; font-style: normal; display:table-cell; vertical-align:middle;}
.heavy{font-weight: 400;}
.light{font-weight: 100 }
h1 {margin: 0;}
h1 {text-align:center; font-size: 2.4rem;font-weight: 300;}
h2 {font-size: 1.8rem; font-weight: 300; margin:0;}
h3 {font-size: 1.6rem; font-weight: 300; margin:0;}

a { color: #2c5658; text-decoration: none; font-weight: 600; }
a:hover { color: #499092; text-decoration: underline;}

a.u-url{font-weight: 300;}

/* Unused */
pre { background: #F0F0F0; margin: 1rem 0; border-radius: 2px;}

/* Grav Utility Classes */
/*.wrapper { margin: 0 3rem; }*/
.padding { padding: .5rem .5rem; }
.left {float: left;}
.right {float: right}
.text-center {text-align: center;}
.text-right {text-align: right;}

.text-left {text-align: left;}

/* Content Styling */
.header .padding {padding: 1rem 0;}
.header {color:#fff; background:#064d51;background-image:linear-gradient(160deg, #499092 , #003f48);}
.header a, .footer a {color: #fff;}
.main-nav,.footer {color:#fff; background:#064d51;background-image:linear-gradient(160deg, #499092 , #003f48); width:100%; clear: both;}
.footer{margin-top:35px;}

/* Menu Settings - all up for grabs! */
.main-nav ul {
    text-align: center;
    letter-spacing: -1em;
    margin: 0;
    padding: 0;
}

.main-nav ul li {
    display: inline-block;
    letter-spacing: normal;
}

.main-nav ul li a {
    position: relative;
    display: block;
    line-height: 45px;
    color: #fff;
    padding: 0 20px;
    white-space: nowrap;
}

.main-nav > ul > li > a {
    border-radius: 2px;
}

/*Active dropdown nav item */
.main-nav .flxb:hover {
    background-color: #448588;
}

/* Selected Dropdown nav item */
.main-nav .flxb.selected {
    background-color: #3c7577;
}

/* Dropdown CSS */
.main-nav ul li {position: relative;}

.main-nav ul li ul {
    position: absolute;
    background-color: #1F8DD6;
    min-width: 100%;
    text-align: left;
    z-index: 999;

    display: none;
}
.main-nav ul li ul li {
    display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
    left: 100%;
    top: 0;
}

/* Child Indicator */
.main-nav .has-children > a {
    padding-right: 30px;
}
.main-nav .has-children > a:after {
    font-family: FontAwesome;
    content: '\f107';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 0;
}

.main-nav .has-children .has-children > a:after {
    content: '\f105';
}

.main-nav a{color:#fff;}

/* Qt bits */
.list-item, .pie-item{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 20px; margin:20px 20px 20px 0; padding: 25px;}
.blog-list{width:70%; float: left}
.sidebar{width:25%; float: right}
.p-category{background: #003f48; color:#fff; padding: 4px 12px; border-radius:20px; margin:2px 0; display: inline-block;font-size:.8rem;font-weight:400;}
.p-category:hover{background: #499092;; color:#fff;text-decoration:none;}
.header{height:400px;text-align:center;margin: 0;display:table;width:100%;}
.archive_date{padding-right:12px;}
.flxc{display: flex; flex-direction: row; gap: 5%; align-items: center; justify-content:space-evenly;margin:auto; width:480px;}
.flxb{margin: 10px 0; padding: 12px; text-align: center; border-radius: 12px;}
.blog-image{display: block; margin:auto;max-width:600px;}
blockquote{font-size:1.6rem; font-style: italic; text-align: center; color: #448588}
.dt-published{text-align:center;color:#999;width:100%;display:inline-block;margin-bottom:15px}
.tags{margin:15px 0;}
.wsfld {display: none;}
input, textarea {width:100%; font-family: "Glory", sans-serif; padding: 6px 12px; border-radius: 8px; font-size: .9em}
textarea{height: 5em}
label{color:#bbdcdd;font-size: .9em;}
.form-label{margin-top: 10px;padding-left:14px;}
  .flxo{display: flex; justify-content: space-between; width: 70%; padding: 4px; margin:auto;}
  .flxi{color: #fff; padding: 10px 0; border-radius: 10px; margin: 2px 8px; }
  .grw{flex-grow: 1; text-align: center; width:0;}

  .bg1{background: #1a3233}
  .bg2{background: #224344}
  .bg3{background: #336466}
  .bg4{background: #448588}
  .bg5{background: #4d9699}
  .bg6{background: #66b0b2}

  .grd{background-image:linear-gradient(160deg, #336466 , #1a3233);}
  .ctag{color: #fff; padding: 6px 30px; border-radius: 12px; display: inline-block; }
  .cmt{ border-radius: 15px; padding: 32px 0 20px 20px; background:#fff; }
  .outr {border: 2px solid #1a3233; padding: 3px; display: inline-block; translate: 20px 26px; border-radius: 17px;background: #fff;}
  .sml {margin-left: 20px;}
  .white {color:#fff}
  .blk{margin: 0; padding: 30px 0;}
  .pc {margin: 0}
  .pcd{color: #999;margin:6px 0 0 0;font-size: .7em}

  .button {background:#336466; color:#fff; padding: 6px 15px; border-radius: 12px; border: 2px solid #fff; font-size: .9em; margin: 6px 0;}
  .button:hover {background: #1a3233;}
  .alert{color:#fff; margin: 10px 0;}

  .btmnav{width:100%;margin-bottom: 80px;clear: both;}

.pie-img{height:180px;}

.pie-list{display: flex; justify-content: space-evenly;}
.pie-item{height:280px; width:250px;text-align: center; }
.pie-list p{margin:0;}

#listing, .tags{margin-bottom:40px;}

table {width:100%;}

@media screen and (min-width:800px) and (max-width: 1100px){
 .mn {width:90%;}
}

@media screen and (max-width: 800px){   
.mn, .flxc {width:90%;}
.flxo {width:100%}
.flxi{margin: 2px 4px; font-size: .85em;}
  .grw{flex-grow: 1; text-align: center; width:0;}
.blog-list, .sidebar{width:100%; float: none}
.list-item {margin: 20px 0;}
table{width:80%;margin:auto;}
.tags, .sidebar-content h4{text-align:center;}
.blog-image{max-width:90%;}
}