/*=Reset
--------------------------------------*/
* { 
  box-sizing: border-box;
}
html, body, div { 
	margin: 0; 
	padding: 0; 
	border: 0;
}



/*=General
---------------------------------------------*/

body {
    font-family: "Georgia Pro", Georgia, Times, "Times New Roman", serif;
    line-height: 1.375; /* 22 pixels */
    -webkit-text-size-adjust: none;
}

h2, h3, h4, h5, h6 {
    font-family: 'Avenir Next', SegoeUI, arial, sans-serif;
}

article {
    margin: 0 auto;
}


/*=Structure (Banner and Navigation)
-------------------------------------------------*/

.banner {
    margin-bottom: 0.9%;
}

.banner-row {
    margin: 0;
}

.masthead {
    background-color: #486a8e;
}

.masthead h1 {
    margin: 0;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #fff;
}

.sidenav {
    height: 80%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ebedee;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #111;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #0099cc;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.nav-featured {
    display: inline-block;
    float: left;
    width: 100%;
    background-color: #12459e;
}

/* This class is added to the header when it reaches its scroll position*/
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

 .nav-sub {
    display: inline-block;
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    overflow-x: hidden;
    background-color: #12459e;
}


.menu-icon {
    cursor: pointer;
    margin-left: 20px;
    font-size: 25px;
    color: #fff;
    font-weight: 800;
    
}

.menu-logo {
    margin-left: 20px;
    font-size: 25px;
    color: #fff;
    font-weight: 800;
    
}

.head-icon {
    font-size: 25px;
    color: #12459e;
}

/*=main
-----------------------------------------------------------*/

.wrapper {
    width: 95%;
    max-width: 76em;
    margin: 0 auto;
}

.story {
    background-color: #eee;
    padding: .6875em;
    hyphens: auto;
}

.story img {
    width: 100%;
}

.story img[alt=dice] {
    width: 0%;
}

.story .bookInfo {
    margin: 0;
    font-weight: 800;
}

.story .bookInfo em {
    font-weight: 500;
}

.story a:link {
    /*text-decoration: none;*/
}

.resourceInfo{
    max-width: 76em;
    margin: 0 auto;
}

.resourceInfo h1,h2,h3,h4,h5,h6 {
    margin-top: 1.5rem;
}

.resourceInfo p {
    color: #3b4348;
    font-size: 1.1rem;
    margin-left: 7px;
    hyphens: auto;
}

.resourceInfo footer {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #3b4348;
}

#video_player {
    width: 100%;
    margin: 0;
}

#video_player video {
    width: 100%;
    min-height: 240px;
    background-color: #000;
    padding-left: 0;
}


#video_container {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
    background-color: #36454f;
}

#video_container img {
    width: 50%;
    height: 80px;
    cursor: pointer;
}

.dload {
    cursor: pointer;
    
}

.featured-story p {
    /*columns: 45em;  */ 
}

.readmore {
    color: #696969; /*dimgrey*/
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.readmore:after {
    content: '\02C7';
    font-size: 20px;
    font-weight: 600;
    float: right;
}

.active, .readmore:hover {
    background-color: #0099cc;
}

.active:after {
    content: '\02C6';
}

.panel {
    background-color: white;
    color: #696969; /*dimgrey*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
}

.panel h5, p {
    margin-left: 25px;
}

.row {
    padding: 0;
    margin: 0 -.6875em;
}

.row:after {
    content: '';
    clear: both;
    display: block;
    height: 0;
}

.col {
    box-sizing: border-box;
    padding: 0 .6875em 1.275em;
    float: left;
    width: 100%;
}


@media only screen and (min-width: 35em) {/* 35em = 560px*/
    .row-quartet > * {
        width: 50%;
    }
    .row-trio > * {
        width: 100%;
    }
    .subcategory-featured {
        width: 100%;
    }
    .microtablet {
        width: 100%;
    }
}

@media only screen and (min-width: 50em) {/* 50em = 800px*/

    .story img[alt=dice] {
        width: 100%;
    }

    
    .row-quartet > * {
        width: 25%;
    }
    .row-trio > * {
        width: 100%;
    }
    .subcategory-featured {
        width: 60%;
    }
    .microtablet {
        width: 40%;
    }
}

@media only screen and (min-width: 70em) {/* 70em = 1120px*/
     .wrapper {
        width: 95%;
        max-width: 76em;
        margin: 0 auto;
    }
    
    .flexbox .row {
         display: flex;
     }
 
     .flexbox .col {
         display: flex;
         flex-direction: column;
     }
 
    .flexbox .col > * {
        flex: 1; /* This is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    }
    
    * {
        box-sizing: border-box;
    }
    
    .row:after {
        content: '';
        clear: both;
        display: block;
        height: 0;
    }
    
    .row {
        margin: 0 -.9%; /* Adjust for the outer margins applied to each column to create gutters */
    }
    .col {
        float: left;
        margin: 0 0% 1.375em; /*top;right;bottom;*/
        min-height: 100px;
    }
    
    .row-quartet > * {
        width: 25%;
    }
    .row-trio > * {
        width: 33.3333%;
    }
    .subcategory-content {
        width: 80%;
    }
    .subcategory-header {
        width: 20%;
    }
    .subcategory-featured {
        width: 75%;
    }
    
    
    
}