/* global */

@media (max-width: 768px) {
    .header-content {

        text-align: center;
    }
}

.header-content {
    /* display: flex;
    flex-wrap: wrap; */
    align-items: center;

    border-bottom: 8px solid #b3cee5;
}

.date-text {
    display: none;
}
.date:hover .date-text {
    display: inline;
}
.date:hover .arc {
    display: none;
}
img.rounded-corners {
	text-align: center;
    --b: 2px; /* border thickness */
  --c: #0015 85%,rgba(37, 145, 158, 0.19); /* define the color here */
  padding: 3px;
/*  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
  background-size: 50px 50px; adjust border length here */
  background-repeat: no-repeat;
  transition: .6s;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

body { 
    margin: 0;
    padding: 0;
	font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
    color: #7A7C80;
}

h1 {
 
  color: #000000;
  margin: 10px;
  padding-left:0px;
  text-shadow: 0px 3px 2px rgba(37, 145, 158, 0.19);
  font-size: 1.6rem;

}

	h1 a {color: #000000; font-size:2.6rem;}

.p2 {
    font-size: 1.1rem;
    padding-bottom: 25px;
    margin-left:4px;
}


.name1 {  
	display: flex;
	justify-content: center;}
	
.name {
  width: 300px;
}
.name a {color:black; font-size: 1.7rem;}

.name1a {  display: flex;
  justify-content: center;
  padding-top:3px;
  font-size: 2rem;
  }
  
.name-other {
    color: #000000;
	display:table;	
	width:100%;
}
.name-other1 {
    color: #000000;
	display:table;	
	width:100%;
	text-align:center;
}
picture {
text-align: center;
}/*
padding-bottom: 5px;
	margin:5px;
			  margin-left:4px;
	    border-radius: 5px;

			  border-bottom: 8px solid #b3cee5;
}*/
h2 {
    color: #000000;
	font-size: 1.22rem;
	text-shadow: 0px 3px 2px rgba(37, 145, 158, 0.19);
	    margin: 10px;
	padding-left:0px;

/*    box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,

0px 30px 60px 30px rgba(0,0,0,0.3);*/
}
.pad {
	padding-bottom: 9px;
}
.section, .section-btm
{
	color: #000000;
		padding: 9px;
		  border-bottom: 8px solid #b3cee5;
		  margin-left:4px;
	    border-radius: 5px;
        box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,  0px 5px 5px 5px rgba(0,0,0,0.3);
}
.section-btm {text-align: center;grid-template-columns: 1fr 1fr;}

.section a, .section-btm a {
    font-size: 1.1rem;
    color: #7A7C80;
    cursor: pointer;
    transition: 0.2s;
}
ul {margin:0px;  list-style-type:none; padding: 0px; list-style-position: outside;}
.section-1 li span {
  position: relative;
  left: -10px;
}
ul a {font-size: 1.4rem}
.section-2 p {padding-bottom: 10px;}
.section-2 ul {
	font-size: 1.1rem;
    list-style:none;
    padding: 9px;
	border-bottom: 8px solid #b3cee5;
	margin-left:4px;
	border-radius: 5px;
    box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,  0px 5px 5px 5px rgba(0,0,0,0.3);

}

.section-2 li {
	color: #000000;
}

.section p {padding-bottom: 9px;}

.white{
    color: #000000;
	padding: 5px;
	margin: 5px;
}
.space {margin:3px}
a{
    color: #7A7C80;
    text-decoration: none;
}
/* section 1 */
.section-1{
    padding-top: 3vh;
/*    padding-bottom: 10vh; */
    

}

.small {
	text-align: center;
    font-size: 0.6rem;
}

.section-1 p{
    font-size: 1.1rem;
    margin:0;
}

.section-1 h2{
    font-size: 1.4rem;
    margin-bottom: 18px;
	text-align: center;
}

.section-1 a{
	text-align:center;
	font-size: 1.6rem;
    padding: 10px;
	    width: 48%;
}
/* section 2 */
.section-2{
    width: 88%;
	display:block;
	padding-bottom: 3vh;
	padding-top:5vh;
}

.section-2 h2{
    font-size: 1.7rem;
    margin-bottom: 1px;
    color: #000000;
}


.section-1 h4{
    font-size: 1.6rem;
    margin: 10px;
    color: #000000;
	padding-left:5px;
	text-shadow: 0px 3px 2px rgba(37, 145, 158, 0.19);
	
}

h3	{
	text-align:center;
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: #000000;
	padding-left:5px;
    display: inline-block;
    border: 3px solid #b3cee5;
    padding-left: 5px;
    padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
    position: relative;
    bottom: 1px
}


.modal-content h3 {
    font-size: 2.1rem;
	vertical-align: top;
    margin-bottom: 10px;
    color: #000000;
	padding-left:5px;
	text-shadow: 0px 3px 2px rgba(37, 145, 158, 0.19);
	
}

.section-1a section {
    color: #000000;
    font-size: 2.10rem;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 18px;
    margin: 5px;
    display: table;
    width: 48%;
    border-bottom: 8px solid #b3cee5;
    margin-left: 4px;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,  0px 5px 5px 5px rgba(0,0,0,0.3);
}

.section-1a h3{				
/*.    color: #000000;
	font-size: 2.10rem;
	background-color: ;
	padding:10px;
	margin:5px;
	display:table;
	width:68%;
		  border-bottom: 8px solid #b3cee5;
		  margin-left:4px;																																			
	    border-radius: 5px;
		box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,

0px 10px 10px 10px rgba(0,0,0,0.3); */
    border: 3px solid #b3cee5;
    padding-left: 5px;
    padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
    position: relative;
    bottom: 1px	
}


.section-2 p {
    font-size: 1.1rem;
padding:9px;
    margin-left:4px;
}

.section-2 img {
	padding-right: 4px;
}

.section-2 a{
    text-decoration: underline;
    padding: 5px;
    font-size: 1.4rem;
    padding-left: 0;
    
}
/* animations / utilities */
.section-2 a:hover{
    color: #000000;
    cursor: pointer;
    transition: 0.2s;
}
	
.section-1 a:hover{
    color: #000000;
    cursor: pointer;
    transition: 0.3s;
}

.white:hover{
    position: relative;
    padding-left: 10px;
}
.section-mini {
	padding: 9px;
	text-align: center;
}

.section-mini img {
	padding-right: 4px;
}

.section-mini a{
	text-decoration: underline;
    padding: 5px;
    font-size: 1.2rem;
    padding-left: 0;
    width: 100px;
}
/* animations / utilities */
.section-mini a:hover{
	
    font-size: 1.3rem;
    color: #000000;
    cursor: pointer;
    transition: 0.2s;
}

.box {
  float: left;
  height: 10px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid #D3D3D3;
  clear: both;
  background-color: #e8f0fe;
  margin-left: 4px;
}

/* media queries */
@media(max-width:780px){
	
	.section-1a section { width:80%}
	
.grid-2{
        grid-template-columns: 1fr;
    }																																								.section-1a h3{				
/*.    color: #000000;
	font-size: 2.10rem;
	background-color: ;
	padding:10px;
	margin:5px;
	display:table;
	width:68%;
		  border-bottom: 8px solid #b3cee5;
		  margin-left:4px;																																			
	    border-radius: 5px;
		box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,

0px 10px 10px 10px rgba(0,0,0,0.3); */
    border: 3px solid #b3cee5;
    padding-left: 5px;
    padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
    position: relative;
    bottom: 1px;
	margin-left: 23px;
}						
.section-1 h3 p{
		font-size: 1.6rem;
}
		
.section-1{	
        padding:0;
        padding-top: 2.7rem;
    }
.section-2{
        padding: 0;
    justify-content: center;
        padding-left: 7%;
		width:85%
    }
	
.name1 h1 {font-size:1.6rem}
	
.name{
	width: 300px;
  padding: 0px;
  font-size:1.6vh;
}
.name-other{
    color: #000000;
	margin:5px;
	font-size: 1.8rem;
	display:table;	
	width:100%;
}
.section-mini {
	flex-direction: column;
		padding: 9px;
	text-align: center;
}
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-content {
	
  color: #000000;
  background-color: #fff;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 2px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
    	  border-bottom: 8px solid #b3cee5;
	  text-align:left;
	      box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,  0px 5px 5px 5px rgba(0,0,0,0.3);
}


@media(min-width:780px){

.section-1a h3{				
/*.    color: #000000;
	font-size: 2.10rem;
	background-color: ;
	padding:10px;
	margin:5px;
	display:table;
	width:68%;
		  border-bottom: 8px solid #b3cee5;
		  margin-left:4px;																																			
	    border-radius: 5px;
		box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,

0px 10px 10px 10px rgba(0,0,0,0.3); */
	margin-left: 180px;

    border: 3px solid #b3cee5;
    padding-left: 5px;
    padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
    position: relative;
    bottom: 1px	
}

.section-1 h3 p{
		font-size: 1.6rem;
}

.modal-content {
	
  color: #000000;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px;
  border: 2px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
    	  border-bottom: 8px solid #b3cee5;
	  text-align:left;
	      box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,  0px 5px 5px 5px rgba(0,0,0,0.3); 
}
.modal-content p{font-size: 13px;} .right { text-align:right; font-size:14px;}

h1 {
  padding-left:20px;
}

h2 {
  padding-left:20px;    
}
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.right {
	text-align:right;
	
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.element {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    color: #000;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.1) inset,

0px 30px 60px -30px rgba(0,0,0,0.3);
}