* {
    color: #262c39;
    font-size: 16px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: "EB Garamond";
    font-weight: 300;
    position: relative;
    line-height: 120%;

}

html,
body {
    width: 100%;
    
}

body {
	background: #fff no-repeat;
	background-image: url("dfp_bg.png");
	background-size:  contain;
	background-position: center;
	background-attachment: fixed;
}


#links {
    width: 20%;
    right: 5%;
	padding:.5% .5% 0 .5%;
    top:1%;
		line-height:1.5vw;
	text-align: justify;
    position: fixed;
	background: linear-gradient(80deg, rgba(255,128,26, .7), rgba(159, 203, 214, 1));
    background-size: 4000% 4000%;
    animation: gradient 10s ease infinite;
	 z-index: 100;
	 
}
	
	#links a{
		font-size: 1vw;
		text-transform: uppercase;
	
		
}


#links a:hover{
}

}

head {
    margin: 80px 35% 20px 35%;
    min-width: 300px;
}
.article {
	border-top: 4px solid #b3001b;
	padding-top:20px;
    margin: 0% 25% 130px 25%;
    min-width: 400px;

}
.article ul{
	padding-left: 3%;
	
}

.article li{
	    list-style: square;
		font-size: 16px;
}

.article img {
    width: 100%;
    height: auto;
}

img {
    width: 49%;
    height: auto;
}
main {
    margin-top: 20px;
    margin-bottom: 160px;
}
a {
    color: #b3001b;
}

a:hover{text-decoration:underline;}
h1 {
    font-family: "Frank Ruhl Libre";
    font-size: 5vw;
    color: #b3001b;
    
    text-align: center;
}
h2 {
    font-size: 32px;
    line-height: 100%;
	margin-bottom:10px;
}
h3 {
    text-align: left;
	padding: 10px 0 5px 0;
    font-size: 24px;
}
h4 {
    font-size: 18px;
    line-height: 220%;
}
h5 {
    font-size: 16px;
    line-height: 120%;
	text-align: left;
}

p {
    margin-bottom: 10px;
}
.media {
    margin: 60px auto;
    padding: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
video {
    width: 100%;
}
audio {
    width: 100%;
}
.gallery {
    width: 100%;
    align-items: center;
}

.gallery .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}
.gallery .column {
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
}
.gallery .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}



#menu {
    width: 15%;
    margin-left: 10%;
   list-style: none;  
position: fixed;
	line-height: 20%;
	
	
}

# menuitem .ul{
	padding-bottom:20px;
}

#menu a{
	font-size: 18px;
	line-height: 20%;
}


#mobile,
#menu label,
#hamburger {
    display: none;
}
#menu li {
    margin-top: 10px;
}
#news {
    width: 15%;
    right: 5%;
   
	text-align: right;
    position: fixed;
	text-justify: inter-word;
}
footer {
    margin: 150px 30% 10px 30%;
    text-align: center;
}



  
@media screen and (max-width: 1000px) {
    .gallery .column {
        flex: 1000%;
        max-width: 100%;
    }
    
    * {
        line-height: 140%;
    }
    
    .article {
        margin: 30px 30% 150px 25%;
        min-width: 400px;
    }
    
    h1 {
        font-size: 10.5vw;
        margin: 0px 40% 0px 25%;
        min-width: 350px;
    }
    
    h2 {
        font-size: 24px;
        line-height: 240%;
    }
    
    h4 {
        line-height: 150%;
    }
    
video {
    width: 100%;
}
audio {
    width: 100%;
}
.gallery {
    width: 100%;
    align-items: center;
}

    
    #menu {
        width: 20%;
        top: 10px;
        margin-left: 3%;
    }
    
		#menu a{
	font-size: 1.2vw;
	line-height: 20%;
}

	
    #menu li {
        margin-top: 10px;
    }
    
    #news {
        width: 25%;
        padding-left: 3%;
        right: 3%;
        top: .4%;
        text-justify: none !important;
    }
    
    footer {
        margin: 10px auto 10px auto;
    }
}
@media screen and (max-width: 800px) {
    main {
        width: 100%;
		margin-bottom:0px;
		padding-bottom:800px;
    }
    
    #nonmobile {
        display: none;
    }
    
	  #links {
		  font-size: 16px;
        min-width: 150px;
        margin: 5%;
        position: relative;
		top:5px;
     width: 90%;
    right: 0;
	line-height:18px;
	padding:15px 15px 5px 15px;
	background: linear-gradient(80deg, rgba(222, 247, 217, 1), rgba(159, 203, 214, 1));
    background-size: 4000% 4000%;
    animation: gradient 10s ease infinite;
	 z-index: 100;
	 color: #f00;
		  }
	
		  #links a{ 
		  font-size:16px;
		  color: #f00;
		  }
	
    #mobile {
        display: block;
    }
   
	
	
    .article {
        min-width: 150px;
        margin: 5%;
        position: float;
    }
    
    h1 {
        margin: 30px 3%;
        font-size: 20vw;
    }
    
    #menu {
        width: 100%;
        background-color: rgba(222, 247, 217, 1);
        top: 0;
        z-index: 1000;
		position: relative;
		display: block; 
		margin-left: 0;
		left:0;
		padding-bottom: 0px;
    }
    
    #news{
        width: 90%;
        margin: 3%;
        position: absolute;
		bottom:0;
		top: initial;
		
    }
    
    #menu label {
		cursor: pointer;
        display: inline-block;
        color: white;
        background: #b3001b;
        font-style: normal;
        font-size: 1.8em;
        padding: 20px;
		width: 100%;
    }
    /* Break down menu items into vertical */
    
	    #menu a:hover {
        background-color: rgba(159, 203, 214, 1);
		color: #fff;
        box-sizing: border-box;
        font-size: 1.2em;
        display: block;
        width: 100%;
        padding: 10px 20px;
    }
	
	
    #menu a {
        background-color: rgba(222, 247, 217, 1);
        box-sizing: border-box;
        font-size: 1.2em;
        display: block;
        width: 100%;
        padding: 10px 20px;
    }
    /* Toggle Show/Hide Menu */
    
    #menuitem {
        display: none;
    }
    
    #menu input:checked~#menuitem {
        display: block;
    }
    
    #menuitem input:checked~#menuitem {
        display: none;
    }
}

.video {
    width: 100%;
}
.audio {
    width: 100%;
}
.gallery {
    width: 100%;
    align-items: center;
}




/* eb-garamond-regular - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('eb-garamond-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('eb-garamond-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('eb-garamond-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('eb-garamond-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('eb-garamond-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('eb-garamond-v26-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}

/* eb-garamond-800 - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 800;
  src: url('eb-garamond-v26-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('eb-garamond-v26-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('eb-garamond-v26-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('eb-garamond-v26-latin-800.woff') format('woff'), /* Modern Browsers */
       url('eb-garamond-v26-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('eb-garamond-v26-latin-800.svg#EBGaramond') format('svg'); /* Legacy iOS */
}

b {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 800;
  src: url('eb-garamond-v26-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('eb-garamond-v26-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('eb-garamond-v26-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('eb-garamond-v26-latin-800.woff') format('woff'), /* Modern Browsers */
       url('eb-garamond-v26-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('eb-garamond-v26-latin-800.svg#EBGaramond') format('svg'); /* Legacy iOS */
}



/* eb-garamond-600italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 600;
  src: url('eb-garamond-v26-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('eb-garamond-v26-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('eb-garamond-v26-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('eb-garamond-v26-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('eb-garamond-v26-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('eb-garamond-v26-latin-600italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}