/*
    Credit: Envato Tuts for guidance on CSS grids and stylesheet
    https://cdpn.io/tutsplus/fullpage/YGQKAy */
    /*Define the grid for each pod*/
    .pod { display: grid; grid-gap: 20px;
    grid-template-columns: 32% 65%; width: 90%; max-width: 1200px; margin: 0
    auto; }
    .bar{
    background-color: #fff;
    margin: 10px 10px 10px;
    }
    /*Define the grid for the wholde site*/
    .band { width: 90%; max-width: 1240px; margin: 0 auto; display: grid;
    grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 20px;
    }
    @media only screen and (min-width: 600px) { .band { grid-template-columns:
    1fr 1fr; } }
    @media only screen and (min-width: 600px) { .module-A, .package{
    grid-column: 1/ span 2; } .module-Z{ grid-column-end: span 2;
    } .module-A h2, .package h2, .module-Z h2{font-size:30px; } }
    @media only screen and (min-width: 960px) { .band { grid-template-columns:
    1fr 1fr 1fr 1fr; }
    }
    .wrapper { box-sizing: border-box;
    }
    *, *:before, *:after { box-sizing: inherit;
    }
    .wrapper { font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial,
    sans-serif; background-color: #fafafa;
    } */ /*Styling of columns*/
    .pod{
    width: 90%;
    background-color: black;}
    .col { margin-left: 0.5rem; margin-right: 0.5rem; padding: 1rem;
    }
    .sidebar { flex: 1; }
    .main { flex: 3; } .columns { display: flex; margin: 0 -10px; font: 1em/1.4
    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .column { margin: 0 10px; width: 49%;
    } .columns { margin: 0 auto; max-width: 800px;
    }
    .column { background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.1);
    padding-bottom: 20px;
    }
    .column header { padding: 10px; background-color: rgb(244,250,244); color:
    #1b344b;
    }
    .wrapper .column header h2 { font-size: 1.4rem; font-weight: normal; margin:
    0; padding: 0; }
    .wrapper .column .body h3 {font-size: 1.0rem; font-weight: bold;} .column
    .body { padding: 10px; font-size: .9rem; color: #757575;
    }
    /*Styling of the cards that display the pod and unit summary*/ .card {
    background-color: #fff; text-decoration: none; color: #444; box-shadow: 0
    2px 5px rgba(0,0,0,.1); display: flex; flex-direction: column; min-height:
    100%; position: relativeactive; top:0; transition:all .1s ease-in; }
    .card:hover{ top:-2px; box-shadow: 0 4px 5px rgba(0,0,0,.2);
    } .banner { padding-bottom: 40%; background-size: cover;
    background-position: 50% 50%; box-shadow: 1px 1px 5px rgba(0,0,0,0.6);
    background-color: #819637;
    } .box{ margin-top: 20%; width:100%; height:auto; aspect-ratio:1/1; }
    .thumb-main img{ height:150px; width:100%; object-fit: cover;
    object-position: 50% 50%; width: 100%; box-shadow: 1px 1px 5px
    rgba(0,0,0,0.6);
    }
    .icon { padding: 50%; background-size: cover; background-position: center
    center;
    } .icon_circle { width: 60px; height: 60px; border-radius: 30px; border: 3px
    solid #342B30;
    }
    .icon_main{float: left; width: 60px; height: 60px;}
    .card intro{ padding: 20px; flex:1; display: flex; flex-direction: column;
    justify-content: space-between;
    } .card p { flex: 1; /* make p grow to fill available space*/ line-height:
    1.4;
    }
    .card span { font-size: 12px; font-weight: bold; color: #999;
    text-transform: uppercase; letter-spacing: .05em; margin: 2em 0 0 0;
    } .module-z .card { background-color: #f4f4f4; text-decoration: none; color:
    #000; box-shadow: 0 2px 2px rgba(0,0,0,.8); display: flex; flex-direction:
    column; min-height: 100%; padding: 2px 0px 2px 0px;
    }
    .module-z .card:hover{ top:-2px; box-shadow: 0 4px 5px rgba(0,0,0,.8); }
    /*Styling of the tables that case studies*/
    table { border: 1px solid #002E67; border-width: 2px 1px; font-size: 90%;
    margin-bottom: 1.5em; width: 90%; line-height: 1.8; }
    th { color: #002E67; border-bottom: 1px solid #002E67; text-align: left;
    background-color:#f4f4f4; }
    th, td { padding: 0.125em 0.66em; vertical-align: top; }
    /*Styling of the note where there is a link to the PPT*/
    .note { border-width: 0; width: 90%; margin: 10px 1% 0 10px; padding: 0;
    font: 80% Arial, Verdana, Helvetica, sans-serif; background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3); } .note h5, .note p { text-align:
    left; margin-left: 1em; margin-right: 0; } .note img { float: right; height:
    30px; width: 30px; margin: 0;}
    .note h5 { background-color: #002E67; margin: 0px; padding: 0; font-variant:
    normal; color: #f4f4f4; border-top: 2px solid #002E67; border-radius: 0px; }
    /*Resize images dimensions*/ .image_article img { /* Set rules to fill
    background */ max-height: 853px; min-height: 200px; min-width: 100%; /* Set
    up proportionate scaling */ width: 100%; height: auto; /* Set up positioning
    */ position: relative; top: 0; left: 0;
    }
    /*Elements below here are stable*/ /* Start Typography */ /* End Typography
    */
    /*This controls the avataar box and wrapper*/
    .avatar_wrapper { width: 100%; height: 140px; background: #f4f4f4; border:
    1px solid #002E67; border-radius: 5px; box-shadow: 0 0 10px #ddd; color:
    #555; padding:10px;
    }
    .avatar { float: right; width: 100%; font-family: 'Open Sans', 'Helvetica
    Neue', Helvetica, Arial, sans-serif; overflow: hidden;
    }
    .comment { float: right; width: 60%; color: #002e67;
    }
    .bio_pic_border{ width: 120px; height: 120px; border-radius: 60px; border:
    1px solid #002E67;
    }
    p.clear { clear: both;
    }
    /* create a hidden tio*/
    .ht:hover .tooltip { display:block;
    }
    .tooltip { display: none; background: #C8C8C8; border: 1px solid #000;
    border-radius: 4px; margin-left: 28px; padding: 10px; position: absolute;
    z-index: 1000; width:200px; height:auto;
    }
    /* Tab text under an h5 heading*/
    .tab { margin-left: 12px; }
    /*Video discription*/
    /* set drop cap styles */
    P.drop-cap:first-letter { font-family: Georgia; font-size: 25px; color:
    #ed1c24; line-height : 1.0;
    } /* Drop Caps */ /* set drop cap styles for larger screens */
    P.drop-cap:first-letter { color: #ed1c24; float: left; font-family: Georgia;
    font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px;
    padding-left: 3px; } /* mobile first media query */
    @media only screen and (min-width: 500px) { P.drop-cap:first-letter {
    { font-family: Georgia; font-size: 25px; color: #ed1c24; line-height : 1.0;
    } }
    /*This gives the quote a green background effect
    blockquote{
    margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c;
    background-color: #f6ebc1;
    }*/

blockquote {
    margin: 0 auto;
    padding-top:-50px;
    
}

blockquote {

}


blockquote:before {
color: #819637;
content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

blockquote:after{ float:inline-end; color: #819637; content: close-quote; font-size: 4em;
  
    }


blockquote {
  margin: 1.5em 0 1.5em;
  padding: 1em 2.5em 1em 120px;
  position:relative;
	background: #f9f9f9;
  border-left: 10px solid #bcb234;
      font-family: fanwood_italic-webfont;

quotes: "\201C""\201D""\2018""\2019";


}
blockquote:before
 {
  color: #ccc;
  content: "\201C";
  font-size: 5em;
  position:absolute;
  left:5px;
  top: 0.3em;
  line-height: 0.1em;
}

blockquote:after
 {
   color: #ccc;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:3px;
  bottom: 0em;
  line-height: 0.1em;
}