html, body { height: 100%; }

body
{
    color: #454545;
    background: #a6ba8e;
    font-size: 18px;
    font-family: 'Overpass', sans-serif;
    line-height: 150%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clear { clear: both; }
.hidden { display: none; }

.title { font-size: 26px; color: #333; padding: 20px 0 10px 0; }
a.button { width: 100%; height: 48px; font-size: 26px; color: #563d22; padding: 0 20px 0 20px; line-height: 48px; display: inline-block; background: url('../images/button.png') repeat-x; background-size: auto 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 10px; border-radius: 10px; }
.section { text-align: center; overflow: hidden; }
.section-container { width: 100%; max-width: 800px; height: 100%; margin: 0 auto; position: relative; padding: 0 20px 0 20px; }
.section-content { position: relative; z-index: 10; }
.form-error { width: 100%; color: #cd5454; margin: 0 8px 5px 8px; }

.image-cloud-1 { width: 198px; height: 64px; background: url('../images/cloud_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-cloud-2 { width: 145px; height: 47px; background: url('../images/cloud_2.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-cloud-3 { width: 198px; height: 64px; background: url('../images/cloud_3.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-cloud-4 { width: 300px; height: 79px; background: url('../images/cloud_4.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-cloud-5 { width: 400px; height: 92px; background: url('../images/cloud_5.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-cloud-6 { width: 400px; height: 112px; background: url('../images/cloud_6.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;}
.image-cloud-7 { width: 400px; height: 88px; background: url('../images/cloud_7.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-cloud-8 { width: 400px; height: 97px; background: url('../images/cloud_8.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-mountaint-1 { width: 450px; height: 169px; margin-left: -225px; background: url('../images/mountains_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-mountaint-2 { width: 350px; height: 170px; margin-left: -175px; background: url('../images/mountains_2.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }

.image-tree-1 { width: 36px; height: 58px; margin-left: -35px; background: url('../images/tree_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0;  }
.image-tree-2 { width: 53px; height: 85px; margin-left: -52px; background: url('../images/tree_2.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-tree-3 { width: 69px; height: 111px; margin-left: -68px; background: url('../images/tree_3.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-tree-4 { width: 50px; height: 80px; margin-left: -50px; background: url('../images/tree_4.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-tree-5 { width: 79px; height: 127px; margin-left: -79px; background: url('../images/tree_5.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-balloon-1 { width: 126px; height: 218px; margin-left: -63px; background: url('../images/balloon_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-umbrella-1 { width: 113px; height: 107px; margin-left: -56px; background: url('../images/umbrella_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }
.image-star-1 { width: 15px; height: 15px; margin-left: -7px; background: url('../images/star_1.png') no-repeat 100% 100%; display: block; position: absolute; z-index: 0; }

.header { height: 60%; background: #7ab6d5; }
.header-sun { width: 520px; height: 520px; position: absolute; top: -200px; left: 50%; background: url('../images/sun.png') no-repeat; background-size: 100% 100%; display: block; z-index: 80; }
.header-logo { width: 100%; position: absolute; top: 33%; left: 0; text-align: center; }
.header-logo img { max-width: 500px; width: 80%; vertical-align: middle; display: inline-block; }
.header-mountaints { width: 100%; height: 100%; left: 0; bottom: 0; background-size: contain; background-position: center bottom; background-image: url('../images/mountains.png'); background-repeat: no-repeat; position: absolute; }
.header-mountaint-1 { bottom: 0; left: -5%; }
.header-mountaint-2 { bottom: 0; left: 50%; }
.header-mountaint-3 { bottom: 0; left: 105%; }
.header-cloud-1 { top: 10%; left: 40px; z-index: 60; }
.header-cloud-2 { top: 40%; left: -40px; z-index: 40; }
.header-cloud-3 { top: 25%; right: -40px; z-index: 100; }
.header-cloud-4 { bottom: 40%; right: 0; z-index: 20; }

.download { height: 40%; background: #c6c682; background: url('../images/grass.png') no-repeat top center; background-size: 100% 100%; }
.download-badge a img { width: 300px; max-width: 60%; padding-top: 10px; }

.download-tree-1 { top: 25%; left: 30%; }
.download-tree-2 { bottom: 8%; right: 27%; }
.download-tree-3 { bottom: 0%; right: 0%; }
.download-tree-4 { bottom: 15%; right: -10%; }
.download-tree-5 { bottom: 5%; left: -10%; }
.download-tree-6 { bottom: 0%; left: 0%; }
.download-tree-7 { bottom: 20%; right: 30%; }
.download-tree-8 { top: 10%; right: 20%; }

.feedback { background: #8c5163; color: #cbbbc2; padding: 10px 0 60px 0; }
.feedback a { color: #fff; }
.feedback-star-1 { top: 10%; left: 12%; }
.feedback-star-2 { top: 30%; left: 18%; }
.feedback-star-3 { top: 70%; left: -10%; }
.feedback-star-4 { top: 130%; left: 38%; }
.feedback-star-5 { top: 15%; right: 8%; }
.feedback-star-6 { top: 24%; right: 20%; }
.feedback-star-7 { top: 62%; right: -10%; }
.feedback-star-8 { top: 110%; right: 12%; }

.preview { height: 100%; position: relative; background: #d87556; padding-top: 50px; }
.preview-phone { width: 360px; max-width: 60%; position: relative; z-index: 200; padding: 12px; margin: 0 auto;  }
.preview-phone-frame { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #fff; background-color: rgba(0,0,0,0.6); }
.preview-phone img { width: 100%; height: 100%;  display: block; margin: 0; padding: 0; }

.carousel { height: 100%; }
.carousel-inner { height: 100%; }
.carousel-item { height: 100%; }
.carousel-control-prev-icon,
.carousel-control-next-icon { z-index: 250; height: 20px; width: 20px; }
.carousel-control-next-icon { background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; }
.carousel-control-prev-icon { background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; }

.preview-cloud-1 { top: 2%; left: -10%; }
.preview-cloud-2 { top: 7%; left: 0%; }
.preview-cloud-3 { top: 44%; left: 20%; }
.preview-cloud-4 { top: 45%; left: -10%; }
.preview-cloud-5 { top: 18%; right: 0; }
.preview-cloud-6 { top: 22%; right: -18%; }
.preview-cloud-7 { bottom: 15%; right: 18%; }
.preview-cloud-8 { bottom: 8%; right: -10%; }
.preview-balloon-1 { top: 300px; right: -5%; z-index: 50; }

.paper { height: 768px; background-image: url("../images/paper_background.png"); background-repeat: repeat-x; border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
.paper-container { height: 760px; background: url("../images/paper.png") no-repeat center center; }

.contact { background: #c6c682; padding-bottom: 80px; }

.footer { height: 300px; background: #f7ae18 url('../images/sand.png') no-repeat top center; background-size: 100% 100%; position: relative; overflow: visible; }
.footer-content { font-size: 10px; line-height: 16px; color: #3b3e37; position: absolute; bottom: 5px; text-align: center; width: 100%; padding: 0 8px 0 8px; z-index: 2; }
.footer-umbrella-1 { top: -40px; left: 10%; }