/*Contents
1. CSS reset
2. Global elements
3. Layout
4. Menu
5. Content
6. Images and gallery
7. Footer
8. Media queries
*/

/* 1. CSS reset
-------------------------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 2. Global elements
-------------------------------------------------------------- */

body {
    line-height: 1.7em;
    color: #000;
    font-size: 13px;
    background: #fff url("../../img/background.jpg") repeat; 
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #34495e;
}

p {
	font-size: 90%;
	text-align: left;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/* 3. Layout
-------------------------------------------------------------- */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}

.is-right {
	text-align: right;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}

/* #form */
.notice {
  border: 1px solid gold;
  background: lightyellow;
  padding: 10px 20px 10px 10px;
  margin: 10px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #DEAE00;
  line-height: 120%;
  vertical-align: center;
  text-shadow: 0px 1px rgba(255,255,255,0.5);
  position: relative;
  top: 0;
  left: 0;
  clear: both;
}

.notice.success {
  border: 1px solid green;
  background: lightgreen;
  color: green;
}

.notice.error {
  border: 1px solid red;
  background: pink;
  color: red;
}

/* #form */
.notice {
  border: 1px solid gold;
  background: lightyellow;
  padding: 10px 20px 10px 10px;
  margin: 10px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #DEAE00;
  line-height: 120%;
  vertical-align: center;
  text-shadow: 0px 1px rgba(255,255,255,0.5);
  position: relative;
  top: 0;
  left: 0;
  clear: both;
}

.notice.success {
  border: 1px solid green;
  background: lightgreen;
  color: green;
}

.notice.error {
  border: 1px solid red;
  background: pink;
  color: red;
}

/* LEFT AND RIGHT INSET SHADOW */
.effect7
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/* 4. Menu
-------------------------------------------------------------- */
.home-menu {
    text-align: center;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 100%;
}

.home-menu .pure-menu-selected a {
    font-weight: bold;
}

.slicknav_nav .pure-menu-selected a {
    font-weight: bold;
	color: #fff;
}

.home-menu a {
    color: #000;
    text-transform: uppercase;
    font-size: 75%;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #010;
}
.home-menu a.first_item {
    padding-left: 35px;
}
.home-menu a.last_item {
    padding-right: 35px;
}

.home-menu .pure-menu-list {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: #b3b3b3 2px 2px 2px;
}

/* 5. Content
-------------------------------------------------------------- */
.header .pure-g, .home-menu, .banner, .our-mission, .services, .my-slider, .contact-banner, .footer .pure-g,
.page-content-image, .page-content {
    max-width: 1280px;
    margin: 0 auto;
}

.header {
    border-top: 10px solid #178a45;
}

.header .contact-info {
    text-align: right;
    padding: 35px 20px 35px 0;
	color: #34495e;
	font-weight: bold;
}

.header .contact-info span {
    text-align: right;
    color: #1b2642;
    font-size: 115%;
    font-weight: bold;
}

.our-mission h2 {
    color: #1f294c;
    font-style: italic;
}

blockquote {
    margin: 5px;
    background-image: url(../../img/open_quote.jpg);
    background-position: top left;
    background-repeat: no-repeat;
}
blockquote span {
    display: block;
    background-image: url(../../img/close_quote.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
	margin: 0 50px;
}

.business-description {
    padding: 15px;
    background-color: #e2e2e2;
    border-radius: 5px;
}

.services img {
    float: left;
    margin-right: 15px;
}
.services h3 {
    background-color: #2b395e;
    color: #fff;
    border-radius: 5px;
    padding: 10px 55px 10px 10px;
    box-shadow: #5c6a85 2px 2px 2px;
    display: inline-block;
    margin: 0;
}

.read-more {
    color: #2b395e;
    text-decoration: none;
    font-weight: bold;
}

.contact-banner {
	background-image: url(../../img/left_bracket.jpg), url(../../img/right_bracket.jpg);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
	background-color: #f4f4f4;
	padding-top: 0;
	padding-bottom: 0;
	display: table;
	width: 100%;
	margin: 40px auto;
}

.contact-banner div {
	min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	height: 121px;
}

.contact-banner p {
    font-size: 288%;
    font-weight: bold;
    line-height: 36px;
    text-transform: uppercase;
	text-align: center;
	padding: 0 14px;
	margin: 0;
}

.contact-banner p a {
    color: #2b395e;
	text-decoration: none;
}

.contact-banner img {
	position: relative;
	top: 0;
	left: 0;
}

.page-banner .pure-g, .page-content .pure-g {
    max-width: 1248px;
    margin: 0 auto;
}

.page-banner {
	background: #fff;
}

.page-banner .pure-g {
	background: #acacac;
}

.page-banner h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 40px;
	font-weight: normal;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px rgba(138, 137, 137, 0.75);
	color: #1a2b57;
	padding: 14px 0 20px 20px;
	line-height: 35px;
}

.page-banner blockquote {
	color: #fff;
}

.page-content-image .pure-g {
	padding-left: 40px;
}

.page-content-image .l-box {
	padding-top: 0;
}

.page-content {
	margin-top: 20px;
}

.page-content h2 {
	text-transform: uppercase;
	font-size: 150%;
}

/* 6. Images and gallery
-------------------------------------------------------------- */
.slider {
    background-color: #fff;
}

.slider ul {
    padding: 0;
	margin: 0;
}

.my-slider {
	max-width: 1244px
}

/* 7. Footer
-------------------------------------------------------------- */
.footer {
		background: #908c8c;
		margin-top: 20px;
		border-bottom: 5px solid #d1d1d1;
}

.footer h4 {
		color: 	#fff;
		font-weight: normal;
		margin: 0;
		line-height: 52px;
		text-align: left;
}

.footer p {
		color: 	#fff;
		font-size: 80%;
		margin-top: 0;
}

.footer img.map {
	color: 	#fff;
	font-size: 75%;
	margin-top: 9px;
}

.footer .pure-button {
	float: left;
	margin-top: 10px;
}

.footer .pure-button {
	border: 10px solid #b2b2b2;
	border-radius: 0;
	background: #fff;
	color: #1b2e58;
	font-weight: bold;
}

.footer a {
	text-decoration: none;
	color: #fff;
}

.subfooter p {
	font-size: 70%;
}

/* 9. Media queries
-------------------------------------------------------------- */

@media (min-width: 35.5em) {

}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    /* We want to give the content area some more padding */
    .content {
        padding: 1em;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: center;
    }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
	
}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
}

/* -- menu */
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 78em) {
	/* #menu is the original menu */
	.js #menu {
		display: none;
	}
	
	.js .slicknav_menu {
		display: block;
	}
	.home-menu {
		display: none;
	}
}