body{
	font-family: 'Newsreader', serif;
	}

hr{
	margin: 0;
	margin-top: .5rem;
	margin-bottom: .5rem;
	border: 0;
	border-top: 3px solid rgba(0,0,0, 0.4);
	}

a{
	color: rgba(220, 53, 69, 1);
	text-decoration: none;
	font-weight: 600;
	}

a:hover{color: rgba(0, 105, 62, .3);}

tr,td,th {
	border-bottom: 0;
	}

h2 {font-family: Libre Franklin, sans serif;}

h3 {font-family: Libre Franklin, sans serif;}

h5 {font-family: Libre Franklin, sans serif;}

/* .container (960px) set in skeleton.css with media break options */

.container{padding: 10px;}

/* End reset */

.header{grid-area: header;}

.contact{
	grid-area: contact;
	font-size: 110%;
	}

.photo{grid-area: photo;}

.links{
	grid-area: links;
	text-align: center;
	font-size: 140%;
	font-family: Libre Franklin, sans serif;
	}

.footer{grid-area: footer;}

img.rounded-corners{border-radius: 6px;}

/* Added by me */
.fullwidth{
	width: 100%;
	}

.fit{
	width: 100%;
	height: 100%;
	}

.toprightname{
	position: absolute;
	top: 10px;
	right: 20px;
	color: #fff;
	font-family: Newsreader, serif;
	font-size: 300%;
	font-weight: 500;
	text-size-adjust: auto;
	}

.toprightcredentials{
	position: absolute;
	top: 70px;
	right: 20px;
	color: #fff;
	font-family: Libre Franklin, sans serif;
	font-size: 160%;
	font-weight: normal;
	font-style: italic;
	text-align: end;
	text-size-adjust: auto;
	}

.wrapper{
	display: grid;
	grid-gap: 0em;
	grid-template-areas:
	  "header"
	  "links"
	  "contact"
	  "footer"
	  "photo";
	background-color: #fff;
	}

@media only screen and (min-width: 700px) {
	.wrapper{
		grid-gap: 20px;
		grid-template-columns: auto minmax(150px,auto) ;
		grid-template-areas:
			"header  header"
			"links links"
			"contact photo"
			"contact ..."
			"footer ...";
		}
	}

@media only screen and (min-width: 1000px) {
	.wrapper{
		grid-gap: 20px;
		grid-template-columns: auto minmax(auto, 650px);
			grid-template-areas:
			"header  header"
			"contact photo"
			"links links"
			"contact ..."
			"footer  ...";
		}
	}

.box{
	background-color: #fff;
	color: #000;
	border-radius: 10px;
	padding: 10px;
	}

.tightbox{
	background-color: #fff;
	color: #000;
	padding: 0px;
	}

.framebox{
	background-color: #fff;
	color: #000;
	border-radius: 10px;
	padding: 20px 20px 0px 20px;
	font-size: 110%;
	border: 2px solid rgba(0, 105, 62, 0.4);
	}

hr.dg15{
	width: 15%;
	border-top: 3px rgba(245, 198, 203, 1);
	// border-top: 4px solid rgba(220, 53, 69, 1);
	}
	
hr.dg100{
	width: 100%;
	border-top: 3px solid rgba(220, 53, 69, 1);
	}

hr.b15{
	width: 15%;
	border-top: 3px solid rgba(1,1,1, 0.4);
	}

.bgcolor-red{
    background-color: rgba(220, 53, 69, 1);
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}

.bgcolor-pale-red{
    background-color: rgba(245, 198, 203, 1); /* bootstrap danger #f5c6cb */
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}
	
.bgcolor-pale-blue{
    background-color: rgba(190, 229, 235, 1); /* bootstrap info #bee5eb; */
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}

.bgcolor-pale-green{
    background-color: rgba(195, 230, 203, .5); /* bootstrap success #c3e6cb; */
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}
 
.bgcolor-green{
    background-color: rgba(141, 169, 150, 1); 
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
}
 
.bgcolor-pale-blue{
    background-color: rgba(190, 229, 235, 1); /* bootstrap info #c3e6cb; */
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}

.bgcolor-pale-yellow{
    backgound-color:  rgba(255, 238, 186, 1)/* bootstrap warning #ffeeba; */
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
	}

.color-pale-red{
    color: rgba(245, 198, 203, 1); /* bootstrap danger #f5c6cb */
	}

.color-red{
    color: rgba(220, 53, 69, 1);
    font-weight: bold;
	}
.color-gray{
     color:rgba(0, 0, 0, 0.075); /* bootstrap active  */
     font-weight: bold;
	}

.color-green{
    color: rgba(40, 167, 69, .4);
    font-weight: bold;
	}

.color-pale-green{
    color: rgba(195, 230, 203, 1)); /* bootstrap success #c3e6cb; */
    font-weight: bold;
	}

.color-pale-blue{
    color: rgba(190, 229, 235, 1); /* bootstrap info #c3e6cb; */
    font-weight: bold;
	}
 
.color-yellow{
    color:  rgba(255, 238, 186, 1)/* bootstrap warning #ffeeba; */
    font-weight: bold;
	}
	
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}