/* This is the syntax for a comment in CSS */


/* This stylesheet file is named starter. css. Rename it to whatever you want, and then connect it to your HTML file by adding the LINK tag with appropriate attributes and attribute values in the right place in your html file.

Say you named this css file "style.css". In that case, to connect it to your html page, the code you add to your html file will look something like this:
<link href="style.css" rel="stylesheet" type="text/css" />

NOTE: The attribute HREF is telling the browser where to look for the css file in relationship to the HTML file. If the css file is in a directory, you will need to include that directory name in the HREF attribute value so the browser knows to look in the directory for the css file, like href="css/style.css" as an example. */
   
   
/****** Begin Browser Reset - Place your custom css code AFTER this code block ******/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/****** End Browser Reset ******/   

html {
	font-size: medium; /* setting up responsive text sizes */
}

/***** Begin Your Custom Code After This Line ******/

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	margin: 1em 0 0.5em;
	color: #026895;
	line-height: 1.25;
}

h1 {
	font-size: 300%;
	font-family: "fredericka the great";
}

h2 {
	font-size: 200%;
	font-family: "Julius Sans One";
	color: #fc9269;
}

h3 {
	font-size: 160%;
	font-family: "Julius Sans One";	
}

h4 {
	font-size: 140%;
	color: #02cccc;
	font-family: "Kaushan Script";
	padding-bottom: 15px;
	border-bottom: 1px solid #fc9269; /*salmon*/
}

h5 {
	font-size: 125%;
}

h6 {
	font-size: 100%;
}
/***** END Heading Element Styles *****/

body {
	border-top: 4px solid #026895;
	font-family: "open sans", sans-serif;
}

header {
	background-image: url("../img/sandy-background.jpg");
	background-size: 100%;
	border-top: 8px solid #02cccc; /* #026895; */
}

header > div {
	background-color: rgba(255,255,255,0.7);
}

#branding img {
	max-width: 500px;
}

footer {
	/* background-color: #fc9269; /*salmon*/
	background-image: url("../img/sandy-background.jpg");
	background-size: 100%;	
	text-align: center;
}

footer > div {
	padding: 30px;
	background-color: rgba(255,255,255,0.7);	
}

footer nav {
	margin-bottom: 20px;
}

footer ul {
	text-align: center;
}

footer nav ul li {
	display: inline-block;
	margin-left: 0;
	border-right: 1px solid #000000;
}

footer nav ul li:last-child {
	border-right: none;
}

footer nav ul li a {
	display: inline-block;
	text-decoration: none;
	padding: 0 10px;
}

footer p {
	font-size: 0.9rem;
}

a {
	color: #13a2e2; /* light blue */
}

i {
	font-style: italic;
}

/****** Main Menu Bar ******/

nav.main {
	display: inline-block;
	position: relative;
	padding: 0 40px;
	text-align: right;
	border: dotted 3px #eaeaea; /* you can remove this line when you want your row to be invisible... this is just here so you can see what you are building*/	
}

nav.main ul {
	font-size: 1rem;
}

nav.main ul li {
	display: inline-block;
	margin: 0;	
}

nav.main ul li a {
	display: block;
	text-decoration: none;
	padding: 1rem 0;
	margin: 5px 0;
	max-width: 0;
	transition: all ease-in-out 1s;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
}

#menu-label {
	position: absolute;
	bottom: 1.25rem;
	right: 10px;	
}

#menu-label span {
	display: block;
	height: 3px;
	width: 24px;
	background-color: #026895;
	margin: 5px;
	transition: all ease 0.5s;
}

input#menu {
	visibility: hidden;
	max-height: 0;
}

input[type=checkbox]#menu:checked ~ #menu-label span:first-child {
	transform: rotate(45deg);
	position: relative;
	top: 8px;
}

input[type=checkbox]#menu:checked ~ #menu-label span:nth-child(2) {
	opacity: 0;
}

input[type=checkbox]#menu:checked ~ #menu-label span:last-child {
	transform: rotate(-45deg);
	position: relative;
	bottom: 8px;	
}

input[type=checkbox]#menu:checked ~ ul li a {
	max-width: 180px;
	padding: 1rem;
	margin: 5px;
	border: dotted 3px #fc9269; /* you can remove this line when you want your row to be invisible... this is just here so you can see what you are building*/		
}

input[type=checkbox]#menu:checked ~ ul li a.active {

}

/****** Main Menu Bar ******/



/***** Paragraph Element *****/
p {
	font-size: 120%;
	line-height: 1.4;
	margin-bottom: 20px;
}

img {
	max-width: 100%;
}

#true-nature p {
	font-size: 120%;
}

#heart-image {
	width: 345px;
}

.row {
	text-align: center;
	padding: 1rem;
	/*border: dotted 3px #eaeaea; /* you can remove this line when you want your row to be invisible... this is just here so you can see what you are building*/
}

/****** Row with two blocks, equal spaced ******/
.row.two-blocks .inner-width {
	display: flex;
	justify-content: center;
	align-items: center;	
}

.row.two-blocks .inner-width > div {
	box-sizing: border-box;
	width: 45%;
	padding: 1rem;
	/*border: dotted 3px #ffaaaa; /* you can remove this line when you want your row to be invisible... this is just here so you can see what you are building*/
}

/****** END Row with two blocks ******/

/****** Row with three blocks ******/

.row.three-blocks .inner-width {
	display: flex;
	justify-content: center;
	align-items: center;	
}

.row.three-blocks .inner-width > div {
	box-sizing: border-box;
	width: 30%;
	padding: 1rem;
	/* border: dotted 3px #ffaaaa; /* you can remove this line when you want your row to be invisible... this is just here so you can see what you are building*/
}

/****** END Row with three blocks ******/


.inner-width {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}

#tutorials .inner-width {
	margin-bottom: 80px;
}

#creatorship .inner-width {
	align-items: flex-start;
}

#creatorship .inner-width > div::before {
	font-family: "fredericka the great";
	font-size: 120px;
	margin-bottom: 20px;
	color: #026895;
}

#creatorship .inner-width > div:first-child::before {
	content: "1.";
}

#creatorship .inner-width > div:nth-child(2)::before {
	content: "2.";
}

#creatorship .inner-width > div:last-child::before {
	content: "3.";
}

#creatorship .inner-width > div {
	padding: 30px;
}

#creatorship .inner-width > div p {
	margin-top: 15px;
	padding-top: 20px;
	border-top: 1px solid #fc9269;
}

/****** Responsive iFrame ******/

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/****** END Responsive iFrame ******/

/***** Bulleted List *****/
ul {
	font-size: 1.2rem; /* same as 120% of the font-size set on the HTML element */
	list-style-type: disc;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

ul li {
	margin-left: 40px;
	margin-bottom: 15px;
	line-height: 1.4;
}

/***** END Bulleted List *****/

.image-left, .image-right {
	background-repeat: no-repeat;
}

.image-left {
	padding-top: 40px;
	padding-bottom: 40px;	
	text-align: left;
	padding-left: 300px;
	background-position: left 100px center;
	background-size: auto 75%;	
}

.image-right {
	padding-top: 40px;
	padding-bottom: 40px;	
	text-align: right;
	padding-right: 300px;
	background-position: right 100px center;
	background-size: auto 75%;	
}

.light-teal {
	background-color: #cbf5f5;
}

.light-salmon {
	background-color: #f5d1c3;
}

#confused .inner-width {
	background-image: url('../img/flower-2.png');
}

#unique .inner-width {
	background-image: url('../img/flower-5.png');
}

#gift .inner-width {
	background-image: url('../img/flower-4.png');
}

#heal .inner-width {
	background-image: url('../img/flower-1.png');
}