* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    font-family: "Quicksand", sans-serif;
    font-size: 16px; /* 16 px -- */
    -moz-OSx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0);
}

body {
    overflow-y: hidden;
}

a {
    color: aliceblue;
    text-decoration: none;
}

ul {
    list-style-type: none;
}


@media only screen and (max-width: 600px) {
    .container {
        flex: column wrap;
        justify-content: space-around;
    }
    .container__nav-icon {
        font-size: 22px; /* 22 px -- */
    }
    .container__sidebar-nav {
        flex-flow: row wrap;
        justify-content: space-around;
        align-content: stretch;
        padding: 0;
    }
    .container__nav-link {
        padding: 0;
    }
    .container__sidebar-nav:hover .container__nav-link-name {
        visibility: hidden;
        opacity: 0;
    }

}

.wrap-whole{
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  height:100vh;
}

.main-header {
    background: #0596d8;
    padding: 10px;
    box-shadow: 1px 2px 3px #ccc;
    color: white;
    display: flex;
    flex-flow: row nowrap;
}

.main-header-content {
    flex: 1 1 auto;
}
.vertical-nav-bar {
    display: flex;
    flex: 0 0 100px;
    flex-flow: column nowrap;
    text-align: center;
    z-index: 30;
    /*background: #061e2a;*/
    /*background: whitesmoke;*/
    /*background: linear-gradient(to right, white, 99.9%, darkslategray);*/
    border-right: 1px solid whitesmoke;
    padding: 1rem 0 0 0;
    justify-content: flex-start;
}

.menu-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}
.main-nav-link {
    transition: opacity .2s, visibility .2s;
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    position: relative;
}
.main-nav-link a {
    /*font-family: "Whitney Cond A", "Whitney Cond B", "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;*/
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.04rem;
    /*color: #03A9F4;*/

    color: darkslategray;

    /*color: #555555;*/
    padding: 0.75rem 0.5rem;
    /*text-transform: uppercase;*/

}

.main-nav-link a:hover {
  /*background: #6d6268;*/ /* --- */
  color: navy;
  
}

.main-nav-link a:focus {
  /*background: #6d6268;*/ /* --- */
  color: #4F2F2F;  
}

.main-nav-link a:visited {
  /*background: #6d6268;*/ /* --- */
  /*color: #551ABB; */ /* --- IS (purple) */
  
}

.main-nav-link a:active {
  /*background: #6d6268;*/ /* --- */
  color: green; /* --- */ 
}


/* =========================================================== */

.main-nav-link a.live {
  /*color: darkslategray;*/
  cursor: default;
  /* border-bottom: 5px solid maroon; --- */
   position: relative; /* --- */

}


.main-nav-link a.live:after{
	content: '';
	position: absolute;
	width: 25%;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	height: 4px;
	background-color: blue;
	bottom: -5px; /*-.5em*/
}

/* ============================================================ */


.main-nav-icon {
    font-size: 48px; /* --- 50px --- */
    padding: 5px;
}


.vertical-nav-bar:hover .main-nav-link {
    color: yellow;
}

.container__main {
    flex: 1 1 600px;
    overflow-y: auto;
}

.container__header {
    margin-top: 30px; /* --- */
    text-align: center;
    font-size: 30px;
}

.container__content {
    margin: 20px 20px 10px 20px; /* 20 20 10 20 -- */
}

p {
    font-size: 20px; /* 24 px */
    line-height: 1.4;
    margin-bottom: 20px;
}


/*
================================== */
.stylelogo {
	/*text-shadow: .2em .2em .2em rgba(0, 0, 0, 0.3); */

	/*text-shadow: 5px 5px 3px #ccc; */
	text-shadow: 5px 5px 5px rgba(0.7, 0.2, 0, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.2);
}	

.demo li a.live {
  /*color: darkslategray;*/
  cursor: default;
  /* border-bottom: 5px solid maroon; --- */
  position: relative; /* --- */

}

.demo li a.live:after {
	content: '';
	position: absolute;
	width: 25%;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	height: 4px;
	background-color: blue;
	bottom: -5px; /*-.5em*/
}


.demo li a.live:hover {
  text-decoration: underline;

}

/* ================================ */

@media only screen and (max-width: 600px) {
    .vertical-nav-bar {
        display: none;
    }
}

/* ================================ */
.logo {
    /* font-weight: 900;*/
    /* text-shadow: 0 2px 2px rgba(211, 146, 80, 0.89); */
    /* text-shadow: 2px 2px 2px rgba(0.7, 0.7, 0.7, 0.1), 2px 2px 2px rgba(0.7, 0.7, 0.7, 0.1); */
    text-transform: uppercase;
    letter-spacing: .45rem;
}