body {

background-image: url(images/spell.jpg), url(images/bg1.jpg), url(images/bg.jpg);
background-repeat: no-repeat, repeat-x, repeat;
background-color: #D3CF8F;
background-position: top right;
background-attachment: absolute;display: flex;
  flex-direction: column;
  align-items: center;
}

::-webkit-scrollbar {width: 21px; height: 3px; background: #E9EDD9;}
::-webkit-scrollbar-thumb {background-color: #D3CF8F; border: 0px;}


.picture {
float:left;
margin:2px;
}

#container {
width:790px; margin-left: auto;
margin-top: 609px;
margin-right:100px; flex: 1 1 auto;  /*grow vertically*/}


p {
font-size: 14px;color:#80755E;font-weight: normal;
       font-family: 'Gabriela', serif; letter-spacing:1px; text-align:justify; line-height:23px;}

p2 {
font-size: 14px;color:#80755E;font-weight: normal;
       font-family: 'Gabriela', serif; letter-spacing:1px; text-align:justify; line-height:23px;}

h1 {
letter-spacing:4px;font-size: 48px;
color:#AACC9F;text-align:center;
margin:0px;
font-weight: normal;
font-family: 'Gabriela', cursive;
text-align:justify;
        background-color: #E2F4DC;
border-radius: 40px;
	 -moz-border-radius: 40px;
	 -webkit-border-radius: 40px;
	
}

font-weight: normal;
font-family: 'Gabriela', serif;
}


#content {
width:790px;
}

.contentx  {
background-repeat: repeat;
margin-bottom:14px;
width:790px;
padding: 10px 20px;
}

#navi{
	position: absolute;
	width: 300px;
	right:950px;
	top: 630px;
  z-index:2;
}

a.navi {
color: #A8856D;
	letter-spacing: 3px;
        font: bold 18px 'Gabriela', sans-serif;
	background: no-repeat top center #E2EAD5;
background-repeat: repeat;
	line-height: 15px;
	padding: 15px;
	display: block;
        border: 0px;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
	text-shadow: none;
        width: 230px;
        margin: 10px;
opacity: 0.6;

	}

a.navi:link {
color: #A8856D;
	letter-spacing: 3px;
        font: bold 18px 'Gabriela', sans-serif;
	background: no-repeat top center #E2EAD5;
background-repeat: repeat;
	line-height: 15px;
	padding: 15px;
	display: block;
        border: 0px;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
	text-shadow: none;
        width: 230px;
        margin: 10px;
opacity: 0.6;

	}


a.navi:active {
color: #A8856D;
	letter-spacing: 3px;
        font: bold 18px 'Gabriela', sans-serif;
	background: no-repeat top center #E2EAD5;
background-repeat: repeat;
	line-height: 15px;
	padding: 15px;
	display: block;
        border: 0px;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
	text-shadow: none;
        width: 230px;
        margin: 10px;
opacity: 0.6;
	}

a.navi:visited {
color: #A8856D;
	letter-spacing: 3px;
        font: bold 18px 'Gabriela', sans-serif;
	background: no-repeat top center #E2EAD5;
background-repeat: repeat;
	line-height: 15px;
	padding: 15px;
	display: block;
        border: 0px;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
	text-shadow: none;
        width: 230px;
        margin: 10px;
opacity: 0.6;}


a.navi:hover{
color: #9EB180;
	background: no-repeat top center #ffffff;
background-repeat: repeat;
	text-decoration: none;
	text-shadow: none;
opacity: 0.6;
}

#navigation i {
	font-family: 'FontAwesome';
	font-style: normal;
        color:inherit;
        font-size:inherit;
}



#footer {
clear:both;
text-align:center;
}












a:link {color:#9EB180;
font-size: 14px;
        letter-spacing:1px;
font-family: 'Gabriela', cursive;
        font-weight: bold;
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;}






a:visited {color:#9EB180;

text-decoration:none;
font-size: 14px;
        letter-spacing:1px;
font-family: 'Gabriela', cursive;
        font-weight: bold;
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;


}


a:hover {
transition:  .9s ease-out;
-moz-transition:  .9s ease-out;
-webkit-transition: .9s ease-out;
-o-transition: .9s ease-out;
color:#9EB180;
cursor:pointer;
font-size: 14px;
        letter-spacing:1px;
font-family: 'Gabriela', cursive;
        font-weight: bold;
     border-bottom: 0;
opacity:0.7;
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;

}  




b { 
        color: #9EB180; 
        background-color: #ffffff;
        text-decoration:none;
	font-size: 19px;
        letter-spacing:2px;
font-family: 'Jim Nightshade', cursive;
        font-weight: 500;
        text-transform: uppercase; 
        padding-top:3px;
        padding-bottom:3px;
        padding-left:6px;
        padding-right:6px;
  opacity: 0.8;

}


i { 
        color: #9EB180;
        background-color: #ffffff;
text-decoration:none;
	font-size: 19px;
        letter-spacing:2px;
font-family: 'Jim Nightshade', cursive;
        font-weight: 500;
        text-transform: uppercase; 
        padding-top:3px;
        padding-bottom:3px;
        padding-left:6px;
        padding-right:6px;
  opacity: 0.8;
}



blockquote {
 	background-color:#E1E5B7;
background-repeat: repeat;
background-repeat: repeat;
 	padding: 9px;
	text-align:justify;
	color:#9EB180;
	font-style:italic;
border-radius: 40px;
	 -moz-border-radius: 40px;
	 -webkit-border-radius: 40px;
}

.contentx input, textarea, select {
background-color: #E1E5B7;
  border: 2px dashed #BAB9A2;
  padding:4px;
  color:#BAB9A2;
border-radius: 40px;
	 -moz-border-radius: 40px;
	 -webkit-border-radius: 40px;
   opacity: 0.8;
}