@import url('https://fonts.googleapis.com/css?family=Raleway:wght@300;400&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica:wght@200;300;400&display=swap'); 

/* import Raleway Italic */

/* 1133 */


/* 
@import must be first line in css file 

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Syne&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*/


html{
  display: flex;
  flex-flow: row nowrap;  
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #444444;
}

body {
  font-family: "Raleway", sans-serif;
  margin-top: 0;
  background-color: white;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  display: block;
  margin-top:0;
  margin-bottom: 9;
}



  

@media screen and (MIN-WIDTH: 901px) {
  div.header {font-size: 20px;}
    div.body {font-size: 20px;}
    
    .p1 {
       display: block;
       align-items: center;
       margin-left: 25%;
       margin-right: 25%;
       max-width: 50%; 
       font-family: "Raleway", sans-serif;
       font-size: 17px; 
       font-weight: 400;
       line-height: 130%;
       margin-bottom: 12px;}

    .list {
       display: block;
       align-items: center;
       margin-left: 25%;
       margin-right: 25%;
       max-width: 50%; 
       font-size: 17px; 
       font-weight: 400;
       line-height: 130%;
       margin-bottom: 6px;}
              
   .p-pg1 {
       display: block;
       align-items: center;
       margin-left: 8%;
       margin-right: 42%;
       font-family: "Raleway", sans-serif;
       font-size: 16px; 
       font-weight: 400;
       line-height: 130%;
       margin-bottom: 12px;}
       
   .flex-container {
     display: flex;
     margin-left: 25%;
     margin-right: 25%;
     width: 50%;
     flex-direction: column;}

  .flex-container-pg1 {
     display: flex;
     margin-left: 8%;
     margin-right: 42%;
     width: 50%;
     flex-direction: column;}
     
  iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;} 
       
    .gray {
         display: block;
         border: 0px solid white;
         border-radius: 25px;
         font-family: 'IM Fell DW Pica', serif;
         font-size: 18px; 
         color: #555;
         background-color: green;
         margin-left: 25%;
         margin-right: 25%;
         margin-bottom: 3px;
         text-align: left;
         display: block;
         padding: 40px;
         align-items: center;
         line-height: 130%;}  
   
     .gray2 {
         display: block;
         border: 0px solid white;
         border-radius: 20px;
         font-family: Raleway, sans-serif;
         color: #eee;
         background-color: #0767A1;  /* C69907  3884BB  323232  */
         margin-left: 23.5%;
         margin-right: 23.5%;
         text-align: left;
         display: block;
         padding: 30px;
         align-items: center;
         font-size: 16px; 
         line-height: 130%;}   

     .block-pg1 {
         display: block;
         border: 0px solid white;
         border-radius: 20px;
         font-family: Raleway, sans-serif;
         color: #eee;
         background-color: #0767A1;  /* C69907  3884BB  323232  */
         margin-left: 6%;
         margin-right: 38%;
         text-align: left;
         display: block;
         padding: 35px;
         padding-top: 25px;
         align-items: center;
         font-size: 16px; 
         margin-bottom: 12px;
         line-height: 130%;} 
         
     .block-gray {
         display: block;
         border: 0px solid white;
         border-radius: 20px;
         font-family: Raleway, sans-serif;
         color: #333;
         background-color: #eee;  
         margin-left: 25%;
         margin-right: 25%;
         text-align: left;
         display: block;
         padding: 35px;
         padding-top: 25px;
         align-items: center;
         font-size: 16px; 
         line-height: 130%;}     
                
    .p2 {
       display: block;
       align-items: center;
       text-align: left;
       margin-left: 15%;
       margin-right: 15%;
       max-width: 70%; 
       font-size: 16px; 
       line-height: 130%;
       margin-bottom: 12px;}
       
    .p3 {
       display: block;
       align-items: center;
       margin-left: 27.5%;
       max-width: 45%; 
       font-size: 16px; 
       line-height: 130%;
       margin-bottom: 12px;}
       
    .p4 {
       display: block;
       align-items: center;
       margin-left: 25%;
       max-width: 50%; 
       font-size: 16px; 
       line-height: 130%;
       margin-bottom: 12px;}            
          
    .h1 {
       display: block;
       margin-left: 25%;
       margin-right: 25%;
       font-size: 24px; 
       font-weight: bold;
       line-height: 130%;
       text-align: left;
       margin-top: 50px;
       margin-bottom: 20px;}     


    .h-pg1 {
       display: block;
       margin-left: 8%;
       margin-right: 42%;
       font-size: 24px; 
       font-weight: bold;
       line-height: 130%;
       text-align: left;
       margin-top: 30px;
       margin-bottom: 30px;}     
      
  
    .h2 {
       display: block;
       margin-left: 15%;
       margin-right: 15%;
       max-width: 70%; 
       font-size: 24px; 
       font-weight: bold;
       line-height: 130%;
       text-align: left;
       margin-top: 40px;
       margin-bottom: 20px;
       margin-right: 20px;}     
  
    .h3 {
       display: block;
       margin-left: 25%;
       font-size: 24px; 
       font-weight: bold;
       line-height: 100%;
       text-align: left;
       margin-bottom: 6px;}           
  
  
    .h4 {
       display: block;
       margin-left: 0px;
       font-size: 18px; 
       font-weight: bold;
       line-height: 100%;
       text-align: left;
       margin-bottom: 6px;
       margin-top: 12px;}
       
                 
    .h5 {
       display: block;
       color: #cc2900;
       font-size: 24px; 
       font-weight: bold;
       line-height: 120%;
       text-align: right;
       margin-top: -100px;
       margin-bottom: 10px;
       margin-right: 20px;
       text-shadow: 2px 2px 4px white;}  
     
    .picwide {
       display: block;
       align-items: center;
       margin-left: 25%;
       margin-right: 25%;
       font-size: 16px; 
       font-weight: 400;
       line-height: 130%;
       margin-top: 20px;
       margin-bottom: 12px;}       
   
   /* Create unequal columns that sit next to each other */
   /* Sidebar/left column */
     .left {
     flex: 8%;
     background-color: white;
     padding: 0px;}

     .main1 {   
     flex: 15%;
     background-color: white;
     padding: 5px;}
     
     .main2 {   
     flex: 35%;
     background-color: white;
     padding: 5px;}
     
     .right {
     flex: 42%;
     background-color: white;
     padding: 0px;}
          
   /* Column container */
   .row {  
     display: flex;
     flex-wrap: wrap;}
     
  .textbox {
     background-color: white;
     width: 100%;
     padding: 0px;}
     
   blockquote {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 19px;
    font-style: regular;
    max-width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 0px;
    padding: 0.35em 35px;
    line-height: 1.2;
    position: relative;
    color: #626262;}

   blockquote:before {
    font-family: 'IM Fell DW Pica', serif;
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 70px;
    position: absolute;
    left: -15px;
    top: -10px;
    color: #555;}

   blockquote cite {
    font-family: 'Raleway', sans-serif;
    color: #555;
    font-size: 15px;
    display: block;
    margin-top: 0px;
    line-height: 1;}

   blockquote cite:before {
    content: "\2009 \2009 \2009 \2009 \2014";}
    
 .footer1 {
   width=100%;
   margin-left: 0%;
   margin-right: 0%;
   line-height: 100%;
   padding: 30px 120px 30px 120px;
   text-align: center;
   background-color: #323232;   
   color: #727272;
   font-size: 16px;
   font-weight: 400;}
}



@media screen and (MAX-WIDTH: 900px) {
  div.header {font-size: 20px;}
    div.body {font-size: 20px;}

    .p1 {
       display: block;
       align-items: center;
       margin-left: 30px;
       margin-right: 30px;
       max-width: 90%; 
       font-family: "Raleway", sans-serif;
       font-size: 15px; 
       line-height: 140%;
       margin-bottom: 12px;}

    .list {
       display: block;
       align-items: center;
       margin-left: 30px;
       margin-right: 30px;
       max-width: 90%; 
       font-size: 17px; 
       font-weight: 400;
       line-height: 130%;
       margin-bottom: 6px;}
       
    .p-pg1 {
       display: block;
       align-items: center;
       margin-left: 30px;
       margin-right: 30px;
       max-width: 90%; 
       font-family: "Raleway", sans-serif;
       font-size: 18px; 
       line-height: 130%;
       margin-bottom: 12px;}     
       
     .block-pg1 {
         display: block;
         border: 0px solid white;
         border-radius: 0px;
         font-family: Raleway, sans-serif;
         color: #eee;
         background-color: #0767A1;  /* C69907  3884BB  323232  */
         margin-left: 0px;
         margin-right: 0px;
         text-align: left;
         display: block;
         padding: 25px;
         align-items: center;
         font-size: 18px; 
         margin-top: 0px;
         margin-bottom: 12px;
         line-height: 130%;}   
       
     iframe { 
    	aspect-ratio: 16 / 9;
	    height: 90%;
	    width: 90%;}
	    
	    
    .gray {
         display: block;
         border: 0px solid white;
         border-radius: 0px;
         font-family: 'IM Fell DW Pica', serif;
         font-size: 18px; 
         color: #555;
         background-color: #eee;
         margin-left: 0%;
         margin-right: 0%;
         text-align: left;
         display: block;
         padding: 30px;
         align-items: center;
         line-height: 130%;}  
     
      .gray2 {
         display: block;
         border: 0px solid white;
         border-radius: 0px;
         font-family: Raleway, sans-serif;
         color: #eee;
         background-color: #0767A1;  /* C69907  3884BB  323232  */
         margin-left: 0px;
         margin-right: 0px;
         text-align: left;
         display: block;
         padding: 30px;
         align-items: center;
         font-size: 16px; 
         line-height: 130%;}   
         
     .block-gray {
         display: block;
         border: 0px solid white;
         border-radius: 20px;
         font-family: Raleway, sans-serif;
         color: #333;
         background-color: #eee;  
         margin-left: 0%;
         margin-right: 0%;
         text-align: left;
         display: block;
         padding: 35px;
         padding-top: 25px;
         align-items: center;
         font-size: 16px; 
         line-height: 130%;}      
    
   .p2 {
       display: block;
       align-items: center;
       margin-left: 30px;
       margin-right: 30px;
       max-width: 90%; 
       font-family: "Raleway", sans-serif;
       font-size: 18px; 
       line-height: 130%;
       margin-bottom: 12px;}       
       
    .p3 {
       display: block;
       align-items: center;
       margin-left: 30px;
       margin-right: 30px;
       max-width: 90%; 
       font-size: 18px; 
       line-height: 130%;
       margin-bottom: 12px;}

    .p4 {
       display: block;
       align-items: center;
       margin-left: 0px;
       margin-right: 0px;
       max-width: 100%; 
       font-size: 18px; 
       line-height: 130%;
       margin-bottom: 12px;}       
       
    .h1 {
       display: block;
       font-size: 18px; 
       font-weight: bold;
       line-height: 130%;
       margin-top: 0px;
       margin-bottom: 20px;
       text-align: left;
       margin-left: 30px;
       margin-right: 20px;}
       
     .h-pg1 {
       display: block;
       font-size: 18px; 
       font-weight: bold;
       line-height: 130%;
       margin-top: 20px;
       margin-bottom: 25px;
       text-align: left;
       margin-left: 30px;
       margin-right: 10px;}
       
   .flex-container {
     display: flex;
     margin-left: 30px;
     margin-right: 30px;
     width: 80%;
     flex-direction: column;}

  .flex-container-pg1 {
     display: flex;
     margin-left: 30px;
     margin-right: 30px;
     width: 100%;
     flex-direction: column;}
     
  
   .h2 {
       display: block;
       font-size: 18px; 
       font-weight: bold;
       line-height: 130%;
       text-align: left;
       margin-left: 10px;
       margin-right: 10px;
       margin-bottom: 10px;}

   .h3 {
       display: block;
       font-size: 20px; 
       font-weight: bold;
       line-height: 100%;
       margin-left: 30px;
       margin-bottom: 6px;}
       
    .h4 {
       display: block;
       margin-left: 0px;
       font-size: 18px; 
       font-weight: bold;
       line-height: 100%;
       text-align: left;
       margin-top: 6px;
       margin-bottom: 6px;}  
       
    .h5 {
       display: block;
       color: #cc2900;
       font-size: 18px; 
       font-weight: bold;
       line-height: 120%;
       text-align: right;
       margin-top: -70px;
       margin-bottom: 10px;
       margin-right: 20px;
       text-shadow: 2px 2px 4px white;}

       
   /* Create unequal columns that sit next to each other */
     .left {
     flex: 2%;
     background-color: white;
     padding: 0px;}

     .main1 {   
     flex: 30%;
     background-color: white;
     padding: 5px;}
     
     .main2 {   
     flex: 66%;
     background-color: white;
     padding: 5px;}
     
     .right {
     flex: 2%;
     background-color: white;
     padding: 0px;}
     
     
   /* Column container */
   .row {  
     display: flex;
     flex-wrap: wrap;}
     
     /* Fake image, just for this example */
     .fakeimg {
       background-color: #aaa;
       width: 100%;
       padding: 0px;}       
          
   blockquote {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 18px;
    font-style: regular;
    max-width: 100%;
    margin-left: 5%;
    margin-right: 5%;
    padding: 0.35em 35px;
    line-height: 1.2;
    position: relative;
    color: #444;}

   blockquote:before {
    font-family: 'IM Fell DW Pica', serif;
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 60px;
    position: absolute;
    left: -10px;
    top: -10px;
    color: #626262;}
    
   blockquote cite {
    font-family: 'Raleway', sans-serif;
    color: #555;
    font-size: 14px;
    display: block;
    margin-top: 0px;
    margin-top: 0px;
    line-height: 2;}
    
   blockquote cite:before {
    content: "\2009 \2009 \2009 \2009 \2014";}

   
 .footer1 {
  text-align: center;
  padding: 10px;
  line-height: 70%;
  background-color: #323232;  
  color: #727272;
  font-size: 10px;
  font-weight: 400;}
}
       
       
       

style samples {
  display: block;
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: gray;
  background-color: tomato;
  border: 4px solid green;
  padding: 10px;}


.flex-container {
  display: flex;
  background-color: black;
}

.flex-container > div {
  text-align: center;
  color: white;
  background-color: black;
  margin-left: 25%;
  margin-right: 25%;
  padding: 0px;
  font-size: 18px;
}

a:link {
  color: gold;
  text-decoration: none;
}


a:link {
  color: DarkGoldenRod;
  text-decoration: none;
}

a:visited {
  color: DarkGoldenRod;
  text-decoration: none;
}

a:hover {
  color: #b0c4ee;
  text-decoration: none;
}

a:active {
  color: gray;
}


/* universal formatting goes here

* {
  text-align: center;
  color: gray;
}

*/


* {
  box-sizing: border-box;
}

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

[class*="col-"] {
  float: left;
  padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.header {
  padding: 0px;}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #ffffff;
  color: #424242;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

.menu li:hover {
  background-color: #0099cc;}


#navbar {
  <!-- background-color: #4682B4; -->;
  background-color: #333;
  position: fixed;
  margin-left: 0%;
  margin-right: 0%;
  width: 100%;
  top: -50px;
  display: block;
  transition: top 0.3s;}

#navbar a {
  float: left;
  display: block;
  color: goldenrod;
  <!-- color: #f2f2f2; -->;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;}

#navbar a:hover {
  background-color: goldenrod;
  color: #333;}