/*
Theme Name: Kreme
Theme URI: http://kreme.mtheme.org/
Author: mTheme
Author URI: http://themeforest.net/user/mtheme_market
Description: This wordpress theme is tailor made for puppy shops, however it’s use is designed to easily suit pet stores of all variety.
Version: 1.0.9
License: license purchased
License URI: http://themeforest.net/licenses
Tags: two-columns, custom-colors, custom-header, custom-menu, editor-style, featured-images
Text Domain: kreme
*/

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);

section {
  position: relative;
  width: 100%;
  height: 100%;
}
section::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 80%;
  background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #212A44;
  font : normal 300 64px/1 'Dosis Sans', sans-serif;
  text-align: center;
  white-space: nowrap;

}

#section08 a {
  padding-top: 60px;
}
#section08 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #212A44;
  border-radius: 50px;
  box-sizing: border-box;
}
#section08 a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #212A44;
  border-radius: 100%;
  box-sizing: border-box;
}

#section08 { background: url(https://www.nxworld.net/example/css-scroll-down-button/bg08.jpg) center center / cover no-repeat;}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #212A44;
  font : normal 400 20px/1 'Dosis', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
  font-weight: bold;
}
.demo a:hover {
  opacity: .5;
}

#section01 a {
  padding-top: 60px;
}
#section01 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 5px solid #212A44;
  border-bottom: 5px solid #212A44;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}


section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font : normal 300 64px/1 'Josefin Sans', sans-serif;
  text-align: center;
  white-space: nowrap;
}




@media screen and (max-width: 420px) {
   .demo {
     display: none;
   }
   }