/*

Fonts

Website --

Headings: https://www.google.com/fonts/specimen/Trocchi
Text: https://www.google.com/fonts/specimen/Lato

Books --

Headings: http://www.fontspace.com/linux-libertine/linux-biolinum
Text: http://www.fontspace.com/sil-international/gentium-book-basic

Colors 

Blue
5190FC
http://paletton.com/#uid=13H0u0knZZTc3+ciy+3txYVHKVF

Darker blue
0E62F1

Darker darker blue
044DC8

Lighter blue
78A9FC

Orange
feae01
http://paletton.com/#uid=10+0u0kvSvSjrCWoIxIxLoIC+jq

Lighter orange
ffba00

Darker orange
9B6A00

https://coolors.co/a1cca5-8fb996-709775-415d43-111d13
--celtic-blue: #4973b8ff;
--aerospace-orange: #f95300ff;
--silver-lake-blue: #6789bcff;
--sienna: #933619ff;
--jordy-blue: #8dafe3ff;
--sinopia: #cb4a1cff;
--glaucous: #5882c3ff;
--gold: #fdd111ff;
*/

body, html, button {
	margin: 0;
	padding: 4px;
	height: 100%;
	display: block;
	font-family: "Arimo", Arial, sans-serif;
	font-size: calc(15px + 0.390625vw);
	letter-spacing:1px;
	color: white;
	background-image: none;
	background-color:#5190FC;
	margin-bottom:20px;
}
For width 400px and larger:
@media only screen and (min-width: 400px) {
	body {
		/* background-image: url('images/background.png'); */
	}
}

/* grid container */
.right-sidebar-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'right-sidebar'
        'footer';
}

/* general column padding */
.right-sidebar-grid > * {
    /* padding:1rem; */
}

/* assign columns to grid areas */
.right-sidebar-grid > .header {
    grid-area:header;
    background:#5190FC;
}
.right-sidebar-grid > .main-content {
    grid-area:main-content;
    background:#0E62F1;
}
.right-sidebar-grid > .right-sidebar {
    grid-area:right-sidebar;
    background:#78A9FC;
	background-image: url("images/moroccan-flower-dark.png");
}
.right-sidebar-grid > .footer {
    grid-area:footer;
    background:#FEAE01;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .right-sidebar-grid {
        grid-template-columns:repeat(3, 1fr);
        grid-template-areas:
            'header header header'
            'main-content main-content right-sidebar'
            'footer footer footer';
    }
}

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

/* Specific Items */
img {
	border:solid 1px white;
	padding: 2px;
	border-radius: 10px;
}

a {
	color:#FFED9F;
}
a:hover {
	font-weight:700;
}

li {
  margin: 12px 0;
}

.sub_info {
	font-size: 80%;
}

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

/* Menu */

#menu {
	background: #FEAE01;
	height: 80px;
	border-radius: 10px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: center;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 80px;
	padding: 0 5px;
	font-family:"Yanone Kaffeesatz";
	text-decoration: none;
	color: #FFFFFF;
	font-size: 260%;
	font-weight: 700;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	background: #f95300ff;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 60px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 80px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-weight:700;
	font-size: 400%;
	color: #FFFFFF;
	padding-left: 20px;
	content: "\2261"; 
}

/* Flexbox adjustments */
#menu ul {
  display: flex;        /* Enable flexbox */
  justify-content: space-between; /* Align first 6 left, last right */
  width: auto;          /* Allow the menu to take its natural width */
  text-align: left;     /* Align text content to the left */
}

#menu li {
  display: block;       /* Ensure list items are blocks for flexbox */
}

@media screen and (max-width: 900px){
	#menu {position:relative}
	#menu ul {background:#FEAE01;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#FFFFFF}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
	#menu ul { justify-content: flex-start; /* Align all items to the left on mobile */ }

}

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

/* Header */

h1, h2, h3, h4, h5 {
	font-family: "Merriweather";
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 2.2rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size: 1.4rem;
}

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

/* Custom Boxes */

text-frame {
	display: block;
	margin: 10px;
}

header {
	display: block;
}

main {
	display: block;
	border:solid 1px white;
	padding: 10px;
	margin:0 2px;
	border-radius: 10px;
	background-color: #0E62F1;
	margin: 8px 0;
}

section {
	display: block;
	border:solid 1px white;
	margin:0 2px;
	padding: 10px;
	border-radius: 10px;
	margin: 8px 0;
	background-image: url("images/moroccan-flower-dark.png");
	background-color: #78A9FC;
}


footer {
	display: block;
	border:solid 1px white;
	padding: 10px;
	border-radius: 10px;
	background-color: #FEAE01;
	margin: 8px 0 20px 0;
}

show-box-1 {
	display: block;
	border:solid 1px white;
	padding: 10px;
	margin: 5px 0;
	border-radius: 10px;
	background-color: #5190FC;
}

show-box-2 {
	display: block;
	border:solid 1px white;
	padding: 10px;
	margin: 5px 0;
	border-radius: 10px;
	background-color: #044DC8;
}

split-box-container {
    display: flex;
}
split-box-container > split-box {
    width: calc(100%/2); 
}
split-box {
	display: block;
	float:left;
	width:40%;
	border:solid 1px white;
	padding: 10px;
	margin: 5px 0;
	border-radius: 10px;
	background-color: #044DC8;
}


/* Form */

.form-group {
  margin-bottom: 20px;
}

.checkbox {
	display: block;
	width:90%;
	border:solid 1px white;
	padding: 10px;
	margin: 5px 0;
	border-radius: 10px;
	background-color: white;
	color: #0E62F1;
}

label {
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
textarea {
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  resize: vertical;
}

input[type="checkbox"] {
	width: 20px;
	height: 20px;
}


button {
  background-color: #feae01;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 120%;
  font-weight: 700;
}

button:hover {
  background-color: #f95300ff;
}

/* Error messages */

.error_msg,
.error_fname,
.error_lname,
.error_name,
.error_email,
.error_message,
.error_password,
.error_password_confirm,
.error_address,
.error_mobile,
.error_agree_terms {
	color: #FF6A00;
	font-weight:700;
}