@import "https://fonts.googleapis.com/css?family=Roboto+Slab";
@import "https://fonts.googleapis.com/css?family=Open+Sans";

body {
	font-family: 'Arial', sans-serif;
	color: #333333;
	background: white;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.65;
}

p {
	background: white;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.65;
}

.drop-letter {
	float: left;
	color: ForestGreen;
	font-family: 'Open Sans', sans-serif;
	font-size: 3.3em;
	font-weight: bold;
	line-height: .9;
	padding-top: 0px;
	padding-right: 8px;
	padding-left: 4px;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto Slab", serif;
	font-weight: 700;
	color: #3d4449;
	line-height: 1.1;
	margin-top: 1em;
	margin-bottom: 1em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1em;
}

.image_label {
	font-size: .8em;
	font-weight: bold;
}

.error {
	color: red;
	font-size: 1.1em;
	font-weight: bold;
}

/********************* nav related *****************************************/

.nav-item {
	font-weight: bold;
}

/* change the background color */
.navbar-custom {
	background-color: purple;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
	color: rgba(255, 255, 255, .8);
}

/* change the box around the link's color */
.navbar-custom .navbar-nav .nav-item:hover,
.navbar-custom .navbar-nav .nav-item:focus {
	background-color: rgba(233, 11, 114, 0.5);
}

/* change the color of active or hovered links */
.navbar-custom .nav-item .nav-link:active,
.navbar-custom .nav-item .nav-link:visited,
.navbar-custom .nav-item .nav-link:link,
.navbar-custom .nav-item .nav-link:focus,
.navbar-custom .nav-item .nav-link:hover {
	color: #ffffff;
}

.navbar-custom .navbar-toggler {
	background-color: rgba(233, 11, 114, 0.5);
	color: white;
	border-color: white;
}

/******************************************************************************/


.site-name {
	font-weight: bold;
	font-size: 1.1em;
}

.site-subtitle {
	font-weight: bold;
	font-style: italic;
}

.content {
	margin: 10px;
}


.fine-print {
	font-size: .5em;
	font-weight: bold;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */



/* smaller than tablet */
@media (max-width: 768px) {
	.small-hide { display: none; }    /* hide it elsewhere */
}

/* Tablet and bigger */
@media ( min-width: 768px ) {
	.small-hide { display: block; } /* show it on small screens */	
}