html,
body {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden; }

img {
  max-width: 100%; }

header {
  background: #c6cb24;
  min-height: 100%;
  height: 1px; }
  header div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box; }
  header h1 {
    margin: 0;
    padding: 0; }

header:after {
  display: block;
  content: ' ';
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 14px;
  background: url(../img/rip.png); }

nav {
  color: #483e35; }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  nav li {
    margin-bottom: 5px; }
  nav a:link,
  nav a:visited,
  nav a:hover,
  nav a:active {
    display: block;
    color: #483e35;
    background: #d9de44;
    padding: 0.65em 1em;
    text-decoration: none;
    border-left: solid 3px #9ca01c;
    transition: all 300ms; }
  nav a:hover,
  nav a:active {
    border-left: solid 10px #9ca01c; }

p {
  line-height: 1.5em; }

section {
  padding: 20px;
  box-sizing: border-box; }

#about {
  background: #f1d414;
  color: #483e35; }
  #about .bg {
    display: none; }

#dog-walking {
  background: #483e35; }
  #dog-walking,
  #dog-walking a:link,
  #dog-walking a:visited,
  #dog-walking a:hover,
  #dog-walking a:focus {
    color: #fff; }
  #dog-walking h1, #dog-walking h2 {
    color: #c6cb24; }

#pet-sitting {
  background: #6ea0c4;
  color: #fff; }
  #pet-sitting .prices {
    color: #c6cb24; }

#accommodation {
  background: #feedf4; }
  #accommodation,
  #accommodation a:link,
  #accommodation a:visited,
  #accommodation a:hover,
  #accommodation a:focus {
    color: #483e35; }
	
	
	#playground {
  background: #c6cb24; }

#playground a{
	color: black
}
#contact-m {
  position: relative;
  background: #6ea0c4; }

#contact,
#contact a:link,
#contact a:visited,
#contact a:hover,
#contact a:active {
  color: #fff;
  text-decoration: none; }
#contact .bg {
  position: absolute;
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  z-index: 5;
  transform: none; }

#contact h1,
#contact form div,
#contact .success,
#contact .methods,
#contact button {
  z-index: 10;
  position: relative; }

.recaptcha-group {
  float: right;
  margin-bottom: 10px; }

#contact form .group,
#contact .methods {
  background: #87accc;
  padding: 20px;
  box-sizing: border-box;
  clear: both; }

#contact .methods .label {
  display: inline-block;
  width: 1.5em; }

#contact button {
  clear: both;
  float: right;
  margin-bottom: 1em; }

#contact .errors,
#contact .errors label {
  color: #941c1c; }

#contact .success {
  color: #9cff9c; }

address {
  margin: 2em 0 1em;
  font-style: normal; }

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

label {
  display: block;
  margin-bottom: 5px;
  color: #fff; }

input,
textarea {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  border: none; }

textarea {
  height: 7em; }

button {
  padding: 0.5em 2em;
  background: #4486ce;
  color: #fff;
  border: none;
  transition: background-color 0.5s; }

button:hover,
button:active {
  background: #2e6db1; }

.facebook {
  float: right; }

@media (min-width: 768px) {
  nav,
  nav ul {
    display: flex;
    align-items: center; }
	
	 nav li {
    font-size: 1em; }

  header {
    min-height: 0;
    height: auto;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; }

  header nav,
  header h1 {
    padding: 0; }

  header div {
    flex-direction: row;
    max-width: 1180px;
    margin: 0 auto;
    min-height: 0;
    padding: 0; }

  nav ul a:link,
  nav ul a:visited,
  nav ul a:hover,
  nav ul a:active {
    padding: 5px;
    border-left: none;
    background-color: transparent; }
  nav ul span {
    display: none; }

  header h1 img {
    width: 150px;
    vertical-align: bottom; }

  .m {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 100vh;
    overflow: hidden; }
    .m .bg {
      max-width: none;
      min-width: 100vw;
      min-height: 100vh;
      display: block !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1; }
    .m section {
      width: 50%; }

  #about .bg-sm {
    display: none; }

  #about,
  #accommodation,
  #playground{
    margin-left: auto; }

  #about .bg {
    left: -260px; }

  #dog-walking .bg {
    right: -520px; }

  #accommodation .bg {
    left: -360px; }

  #pet-sitting .bg {
    right: -500px; }

  #playground .bg {
    right: -500px; }	}
@media (min-width: 900px) {
  nav li {
    font-size: 1em; }
    nav li span {
      display: inline; } }
@media (min-width: 1024px) {
  nav li {
    font-size: 1.2em; }

  #about .bg {
    left: -260px; }

  #dog-walking .bg {
    right: -460px; }

  #accommodation .bg {
    left: -310px; }

  #pet-sitting .bg {
    right: -680px; } 
	
	 #playground .bg {
    right: -680px; }}
@media (min-width: 1130px) {
  nav li {
    font-size: 1.1em; }
    nav li a:link,
    nav li a:visited,
    nav li a:hover,
    nav li a:active {
      padding: 0.5em 1.2em; }
      nav li a:link:last-child,
      nav li a:visited:last-child,
      nav li a:hover:last-child,
      nav li a:active:last-child {
        margin-right: -1.2em; } }
@media (min-width: 1180px) {
  #about,
  #dog-walking,
  #accommodation,
  #pet-sitting ,
  #playground{
    max-width: 590px;
    margin-left: 50%; }

  #dog-walking,
  #pet-sitting  {
    margin-left: auto;
    margin-right: 50%; }

  #contact {
    width: 1180px;
    margin: 0 auto;
    background: transparent; }
    #contact .row {
      display: flex; }
    #contact h1 {
      width: 100%; }
    #contact form,
    #contact .methods {
      width: 50%; }
    #contact .methods {
      margin-left: 18px;
      font-size: 1.18em; }
    #contact button {
      margin-bottom: 0; } }
@media (min-width: 1400px) {
  #about .bg,
  #accommodation .bg,
  #dog-walking .bg,
  #pet-sitting .bg,
	#playground .bg  {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%); } }

/*# sourceMappingURL=main.css.map */