@font-face {
    font-family: 'sarala';
    src: url('../fonts/sarala-regular-webfont.woff2') format('woff2'),
         url('../fonts/sarala-regular-webfont.woff') format('woff'),
         url('../fonts/sarala-bold-webfont.woff2') format('woff2'),
         url('../fonts/sarala-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

a {
    color: #333;
    text-decoration: none;
    transition: all .3s;
}

a:hover {
    color: #819732;
    transition: all .3s;
}

body {
    background: #fff;
    font-family: 'sarala', Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#header {
    min-height: 90vh;
}

.banner {	
    z-index: -10;
    width: 100%;
    height: 90vh;
    position: absolute;
    top: 0px;
}

.image1 {
	background: #aaa url('../img/banner1.jpg') no-repeat top left;
    background-size: cover;
}

.image2 {
	background: #aaa url('../img/banner2.jpg') no-repeat top left;
    background-size: cover;
}

@media (max-width: 768px) {
	
	.image1 {
		background: #aaa url('../img/banner1.jpg') no-repeat left center;
		background-size: cover;
	}

	.image2 {
		background: #aaa url('../img/banner2.jpg') no-repeat bottom right;
		background-size: cover;
	}
	
}

#header .intro {
    display: block;
    font-size: 400%;
    color: #fff;
    line-height: 1em;
    padding-top: 30vh;
    padding-left: 5vw;
    padding-bottom: 1em;
}

#subheader {
    background: #aaa url('../img/header5.jpg') no-repeat top center;
    background-size: cover;
    height: 230px;
}

#topbar {
    position: absolute;
    background: #333;
    top: 0;
    left: 0;
    width: 100%;
    color: #bbb;
    text-align: center;
    padding: .75em;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

#topbar a {
    color: #bbb;
    text-decoration: none;
    border-bottom: solid #bbb 1px;
    transition: all .3s;
}

#topbar a:hover {
    color: #bbb;
    text-decoration: none;
    border-bottom: solid #bbb 0px;
    transition: all .3s;
}

#story {
    background: #aaa url('../img/eyecatcher1.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 15px;
}

#story .intro {
    display: block;
    font-size: 300%;
    color: #fff;
    line-height: 1em;
    padding: 6em 1em 2em 1em;
}

#story a p {
    color: #fff;
}

#words svg {
    margin: 0 0 1em 0;
}

#icons p,
#tasks p {
    font-size: 1.25em;
}

#solutions img,
#icons img,
#tasks img,
#words img {
    opacity: 0.75 !important;
    border-radius: 15px;
    margin: 0 0 1em 0;
    transition: all .3s;
}

#solutions img:hover,
#icons img:hover,
#tasks img:hover,
#words img:hover {
    opacity: 1 !important;
    transition: all .3s;
    margin-top: -10px;
}

#footer {
    background: #f2f2f2;
    padding: 5em 2em 2em 2em;
    margin-top: 3em;
}

#footer h3 {
    margin-bottom: 1em;
}

@media(max-width:768px){
    #footer .col-md-4 {
        margin-bottom: 4em;
    }
}

#footer hr {
    margin: 2em 0 1em 0;
    border-top: solid #777 1px;
}

#footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2em;
}

.navbar {
    border-radius: 15px !important;
}

.navbar svg {
    margin: 0 10px 0 0;
    position: relative;
    top: -2px;
}

.navbar .nav-link {
    padding: 1em 2em 1em 2em !important;
}

.navbar .placeholder {
    width: 22px;
    height: 22px;
    display: inline-block;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1em;
    z-index: 100;
}

/** FIRE */
@keyframes scaleUpDown {
0%,
100% {
    transform: scaleY(1) scaleX(1);
}
50%,
90% {
    transform: scaleY(1.1);
}
75% {
    transform: scaleY(0.95);
}
80% {
    transform: scaleX(0.95);
}
}

@keyframes shake {
0%,
100% {
    transform: skewX(0) scale(1);
}
50% {
    transform: skewX(5deg) scale(0.9);
}
}

@keyframes particleUp {
0% {
    opacity: 0;
}
20% {
    opacity: 1;
}
80% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
}
}

@keyframes glow {
0%,
100% {
    background-color: #ef5a00;
}
50% {
    background-color: #ff7800;
}
}

.fire {
    display: inline-block;
    position: relative;
    top: 6px;
    left: -10px;
    width: 22px;
    height: 22px;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
}

.fire-main {
position: absolute;
height: 100%;
width: 100%;
animation: scaleUpDown 3s ease-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.fire-main .main-fire {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
}

.fire-main .particle-fire {
position: absolute;
top: 60%;
left: 45%;
width: 10px;
height: 10px;
background-color: #ef5a00;
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.fire-right {
height: 100%;
width: 100%;
position: absolute;
animation: shake 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.fire-right .main-fire {
position: absolute;
top: 15%;
right: -25%;
width: 80%;
height: 80%;
background-color: #ef5a00;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
}

.fire-right .particle-fire {
position: absolute;
top: 45%;
left: 50%;
width: 15px;
height: 15px;
background-color: #ef5a00;
transform: scaleX(0.8) rotate(45deg);
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.fire-left {
position: absolute;
height: 100%;
width: 100%;
animation: shake 3s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.fire-left .main-fire {
position: absolute;
top: 15%;
left: -20%;
width: 80%;
height: 80%;
background-color: #ef5a00;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
}

.fire-left .particle-fire {
position: absolute;
top: 10%;
left: 20%;
width: 10%;
height: 10%;
background-color: #ef5a00;
border-radius: 50%;
animation: particleUp 3s infinite ease-out 0;
animation-fill-mode: both;
}

.fire-bottom .main-fire {
position: absolute;
top: 30%;
left: 20%;
width: 75%;
height: 75%;
background-color: #ff7800;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 100% 40%;
animation: glow 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.hidden {
	display: none;
}

.leform-inline .leform-form:first-child {
	display: block !important;
}