/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
/* Variables =================================================== */
/* Mixins =================================================== */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

header.banner {
  height:77px;
  background: url('flowers.png');
  background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top:13%;
}
h1 {font-family: mplus-2p-bold;
	font-size: 2em;
  text-align: center;}
article {
  width: 60%;
  margin: auto;
  font-family: mplus-1p-regular;
  font-size: 1em;
}
.h2 {font-family: mplus-1p-medium;
  text-align: left;
  color: #444444;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
  display:inline-block;
    position:relative;
    margin:20px;
}
/* Some stylesheet reset */
.nav, .nav ul {
        width:60%;
	margin: auto;
	padding: 0;
	list-style: none;
	line-height: 1;
}

/* The top navigation menu */
.nav {
	/* Layout & positioning */
	display: block;
	position: relative;
	width: 100%;
	height: 34px;
	border-bottom: 3px solid #45c3f2;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;

	/* Background & effects */
	background: #494949; /* Background for Internet Explorer 9 and older browsers */
	background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
	background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
	background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
	background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
}

/* The link containers */
.nav>li {
	display: block;
	float:left;
	position: relative;
	margin: auto;
	padding: 0;
}

/* The main navigation links */
.nav>li>a {
	/* Layout & positioning */
	display: block;
	width: 90px;
	padding: 11px 0px;
	border-right: 1px dotted #393939;
	border-left: 1px dotted #595959;

	/* Typography */
	font-family: mplus-2p-medium;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	color: #fff;
	text-shadow: 0 1px 0 #2a2a2a;
	text-align: center;

	/* Chaning the background on hover with a smooth transition */
	-webkit-transition: background .35s linear;
	-moz-transition: background .35s linear;
	-ms-transition: background .35s linear;
	-o-transition: background .35s linear;
	transition: background .35s linear;
}

/* Chaning the background on hover */
.nav>li>a:hover, .nav>li:hover>a {
	background: rgba(0, 0, 0, .15);
	background: #414141;
}

.nav>li:first-child a {
	border-top-left-radius: 3px;
}

/* The pointer arrow */
.arrow {
	cursor: pointer;
    height: 0px;
    border: 3px solid transparent;
    border-bottom-color: #45c3f2;
    left: 43px;
    position: absolute;
    bottom: 0px;
    width: 0;
    z-index: 0;

    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.arrow:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

.nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow {
    left: 43px;
}
.nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow {
    left: 134px;
}
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow {
    left: 226px;
}
.nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow {
    left: 318px;
}
.nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow {
    left: 410px;
}
.nav li:nth-child(6):hover ~ .arrow, .nav .active:nth-child(6) ~ .arrow {
    left: 502px;
}
.nav li:nth-child(7):hover ~ .arrow, .nav .active:nth-child(7) ~ .arrow {
    left: 594px;
}
.nav li:nth-child(8):hover ~ .arrow, .nav .active:nth-child(8) ~ .arrow {
    left: 686px;
}

/* General styling for the submenus */
.nav ul {
	display: block;
	position: absolute;
	left: -9999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* Level 1 submenus */
.nav>li>ul {
	cursor: pointer;
	padding-top: 0px;
	z-index: 200;
	top: 34px;
	
}

/* Making the level 1 submenu to appear on hover */
.nav>li:hover>ul {
	left: -1px;
}

/* Level 2+ submenus */
.nav ul ul {
	left: -9999px;
	top: 0px;
	z-index: 399;
}

/* Making the level 2+ submenu to appear on hover */
.nav ul>li:hover>ul {
	left: 135px;
	top: 0px;
}

/* The submenu link containers */
.nav ul li {
	position: relative;
	display: block;
	
	/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
	height: 0px;
	-webkit-transition: height .2s;
	-moz-transition: height .2s;
	-o-transition: height .2s;
	-ms-transition: height .2s;
}

/* Expanding the list elements which contain the links */
.nav li:hover>ul>li {
	height: 24px;
}

.nav>li:hover>ul>li:first-child {
	height: 27px;
}

.nav>li>ul>li:first-child>a {
	border-top: 3px solid #45c3f2;
}

.nav>li>ul>li.dropdown:first-child>ul {
	top: 3px;
}

/* The links of the submenus */
.nav ul li a {
	/* Layout */
	display: block;
	width: 105px;
	padding: 6px 10px 6px 20px;

	/* Typography */
	font-size: 1em;
	color: #999;
	font-family: mplus-1p-medium;
	text-decoration: none;
	background: #f0f0f0;

	/* Every change to the links (background, color etc) will be made with a smooth transition */
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}

.nav>li>ul>li:first-child>a::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 6px;
	background: transparent;
	top: -6px;
	left: 0;
	z-index: 9999;
}


/* The hover state of the links */
.nav ul li:hover>a, .nav ul li>a:hover {
	background: #e7e7e7;
	color: #45c3f2;
}

/* The arrow indicating a level 2+ submenu */
.nav ul>.dropdown>a::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 3px;
	width: 0px;
	height: 0px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 3px solid #999;
	border-right: 3px solid transparent;
}

/* Changing the color of the arrow on hover */
.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
	border-left-color: #45c3f2;
}
div.content {
  background-image: url(sb1.jpg);
  color: #444444;
  padding-bottom: 15px;
}
.well {
  min-height: 21px;
  padding: 11px;
  margin-bottom: 1.5em;
  background-color: #f3f5f6;
  border: 1px solid #b8c1cb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px #d6dbe1;
  -moz-box-shadow: inset 0 1px 10px #d6dbe1;
  box-shadow: inset 0 1px 10px #d6dbe1;
}
.well p:last-child {
  margin-bottom: 0;
}
.well-large {
  padding: 22px;
}
.well-small {
  padding: 6px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.h4 {
  margin-bottom: 1.5em;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.25;
}

/*
body {
background-color: grey;
}
@media screen and (max-width:960px) {
body {
background-color: red;
}
}
@media screen and (max-width:768px) {
body {
background-color: orange;
}
}
@media screen and (max-width:550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width:320px) {
body {
background-color: green;
}
}*/
/*---------------------------------
RESETS 
------------------------------------------*/

* { 
    margin: 0; 
    padding: 0; 
}

a  { 
	text-decoration: none; 
	outline: 0; 
}

a img { border: 0; }

.stretch,
.clear {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1px;
}

.clearfix:after {
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
	content: ".";
}

p { line-height: 1.5; margin: 0 0 15px 0; }


/*-------------------------------------
GLOBAL
------------------------------------------*/

html, body { 
	margin: 20px 0 0 0; 
 	padding:0 0 0 10px;
 	background-color: #f9f9f9;
 	text-align: center; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

/*-------------------------------------
HEADINGS
------------------------------------------*/

h1 {
	margin: 0 0 0.5em 0;
	padding: 0;	
	line-height: 1.5em;	
	font-size: 14px;
	color: #000000;
}

h2 {
	margin: 0 0 0.5em 0;
	padding: 0;	
	line-height: 1.5em;	
	font-size: 12px;
	color: #000000;
}

/*-------------------------------------
LINKS
------------------------------------------*/

a:link { color: #06C; text-decoration: underline; }
a:visited { color: #06C; text-decoration: underline; }
a:hover { color: #06C; text-decoration: underline; }
a:active { color: #06C; text-decoration: underline; }


/*-------------------------------------
LISTS
------------------------------------------*/

ul {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 14px;
}

ul li {
	margin: 0 0 3px 15px;
	padding: 0;
}

ol {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 14px;
}

ol li {
	margin: 0 0 3px 30px;
	padding: 0;
}

label.error { 
	display: block;
	color: red;                              
	font-size: 11px; 
	font-weight: bold;
}

/*-------------------------------------
FORM CORE
------------------------------------------*/

form#contact fieldset {
	padding: 10px 20px 20px 20px;
	margin: 0 auto;
	border: 0;
	background-color: #fff;
	width: 290px;
	text-align: left;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -moz-box-shadow: 0px 0px 10px #d3d3d3; 
	-webkit-box-shadow: 0px 2px 10px #d3d3d3; 
	box-shadow: 0px 0px 10px #d3d3d3; 
}

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea {
	margin: 3px 0 0 0;
	padding: 6px; 
	width: 260px; 
	font-family: arial, sans-serif; 
	font-size: 12px; 
	border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}

form#contact textarea {
	width: 275px; 
	height: 150px;
}

form#contact label {
	display: block;
	font-size: 13px;
	color: #666;
	margin-top: 10px;
	font-weight: bold;
}

form#contact label.error { 
	width: 270px;
	margin: 3px 0 0 0;
	display: block;
	color: #cf0101;                              
	font-size: 11px; 
	text-align: right;
}

form#contact .placeholder {
	color: #aaa;
}

form#contact .button {
	display: inline-block;
	margin: 15px 0 0 90px;
	padding: 5px 15px 5px 15px;
	background-color: #ff9e00;
	border: none;
	color: #fff;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

form#contact .button:hover {
	background-color: #fc8500;
	cursor: pointer;
}

form#contact .button:active {
	margin-top: 16px;
	background-color: #f08004;
	cursor: pointer;
}