@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;700;900&display=swap');

body{
  max-width: 100%;
  overflow-x: hidden;
	text-align:center;
	font-size: 14px;
	line-height: 18px;
	font-family: 'Montserrat', sans-serif;
}
*{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
a{color:#333;}

#intro{height:100vh;position: relative;}
#intro .bg{width:100%;height:100vh;position: fixed;background:url('mnt.jpg');background-size:cover;opacity:1;z-index:-10;

background:url('02.jpg');
background-size:cover;


}
#intro .logo{width:12em;position:relative;padding-top: 25vh;z-index: 10;opacity:1;}
#intro .logo svg{max-width:100%;width:100%;}
#intro .tablet{float: right;}
#intro .bird{
    text-align: center;
    position: absolute;
    right: 5%;
    top: 15vh;
    width: 30vw;
    height: 30vw;
}
#intro .bird svg{width: 100%;height: 100%;}
#intro .bird svg{animation: float 10s linear infinite;}
#intro .bird svg #path3049{animation: float2 15s linear infinite;}
#intro .bird svg #path3053{animation: float2 15s linear infinite;}
#intro .bird svg #path3055{animation: float2 15s linear infinite;}
#intro .bird svg #path3057{animation: float2 15s linear infinite;}
#intro .bird svg #path3059{animation: float2 15s linear infinite;}
#intro .bird svg #path3061{animation: float2 15s linear infinite;}

#intro .bird svg #path3070{animation: float3 1.4s linear infinite;}
#intro .bird svg #path3071{animation: float3 1.5s linear infinite;}
#intro .bird svg #path3072{animation: float3 1.7s linear infinite;}
#intro .bird svg #path3073{animation: float3 1.2s linear infinite;}
#intro .bird svg #path3074{animation: float3 1.1s linear infinite;}
#intro .bird svg #path3075{animation: float3 1.3s linear infinite;}

#intro .welcome{max-width: 700px;text-align: left;font-weight:500;color:#111;z-index: 5;}
#intro .welcome h1{text-transform: uppercase;padding: 20px 0 0 0;font-weight:700;font-size: 3em;}
#intro .welcome h1 b{font-weight: 900;}
#intro .welcome ul{padding-left: 1rem;line-height: 30px;font-size: 18px;}
#intro .welcome ul li{list-style-type: none;}

#intro .toServices{position: absolute;left: 0;right: 0;bottom: 10%;margin: auto;}
#intro .toServices .button{display: inline-block;margin: 0 5px;}
#intro .toServices .button span{padding: 0px 10px;background: #111;color:#FFF;display: inline-block;height: 30px;line-height: 30px;margin: 0 -1px;}
#intro .toServices .button span.icon{fill:#FFF;background: #222;text-align: center;position: relative;transition: 0.5s;}
#intro .toServices .button span.icon.left svg{top: -2px;left: -2px;}
#intro .toServices .button span.icon.right svg{top: -2px;left: 0px;}
#intro .toServices .button span.icon svg{height: 16px;fill:#FFF;position: relative;}
#intro .toServices .button:hover span{cursor: pointer;background: #D00000;}
#intro .toServices .button:hover span.icon{animation-name: jump;animation-duration: 1s;animation-iteration-count: 1;animation-timing-function: linear;}
#intro .toServices .button:hover span.icon.left{animation-name: jumpLeft;}
#intro .toServices .button:hover span.icon.right{animation-name: jumpRight;}

#wave{position: absolute;bottom:0;width: 100%;z-index: -1;}
#wave svg{width: 100%;}
#wave2{position: relative;z-index: 0;background:#FFF;}
#wave2 svg{width: 100%;}

#services{padding-top: 50px;position: relative;background: #F0F0F0;}
h2{font-weight:700;text-transform: uppercase;padding: 30px 0 60px 0;}
h2 b{font-weight:900;font-size: 1.5em;}
h3{font-weight:700;text-transform: uppercase;padding: 30px 0 60px 0;color:#FFF;font-size: 14px;}
h3 b{font-weight:900;font-size: 2em;}
#services .list{text-align: center;margin-bottom: 150px;}
#services .list .service{display: inline-block;margin: 30px 30px;width: 270px;vertical-align: top;position: relative;}
#services .list .service .icon svg{width: 50px;height: 50px;fill:#333;}
#services .list .service .title{text-transform: uppercase;font-weight: 700;margin-top: 15px;font-size: 18px;line-height: 24px;}
#services .list .service .title b{font-size: 20px;line-height: 24px;font-weight: 900;}
#services .list .service .price{font-size: 12px;line-height: 14px;background:#9D0208;color: #FFF;position: absolute;top: 40px;left: 165px;padding: 3px 5px;white-space:nowrap;border-radius:0 5px 5px 5px;}

#services .platform{white-space:nowrap;}
#services .pf-icon{width:140px;height:40px;line-height: 40px;position:relative;display:inline-block;vertical-align: top;margin:15px;filter: grayscale(100%);transition:1s;opacity: 0.5;}
#services .pf-icon.text{width: 200px;}
#services .pf-icon span{white-space: normal;text-transform: uppercase;white-space: normal;font-size: 14px;line-height: 14px;display: inline-block;vertical-align: middle;font-weight: 500;}
#services .pf-icon.program{width:40px;height:40px;position:relative;display:inline-block;margin:15px;filter: grayscale(100%);transition:1s;}
#services .pf-icon:hover{filter: grayscale(0%);transition:1s;animation: shake 0.3s;opacity: 1;}
#services .pf-icon img{max-width:100%;max-height:100%;vertical-align:middle;display:inline-block;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}

#process{text-align: right;background:#FFF;padding-bottom:100px;position:relative;}
#process .process svg{width: 70%;transform: rotateX(10deg) rotateY(-10deg);}
#process h2{padding-right: 10%;}
#process .fox svg{width:300px;position:absolute;left:10%;bottom:-17px;}
#process .fox svg path{display:none;transition:0.5s;}
#process .fox svg path:hover{opacity:0.2;}

#contact{line-height: 25px;color:#FFF;background:#222;}
#contact a{color:#FFF;}
#contact .row{padding: 25px 0 15px 0;line-height: 40px;}
#contact .logo svg{height: 50px;position: relative;top: -10px;
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
}
#contact .location svg{height: 20px;fill:#FFF;position: relative;top: -2px;}
#contact .email svg{height: 20px;fill:#FFF;position: relative;top: -2px;}
#contact .call svg{height: 20px;fill:#FFF;position: relative;top: -2px;}

#contactsPage{width:100%;height:100vh;background:#FFF;position:fixed;z-index:20;right:-100%;top:0;}
#contactsPage .container{display:flex;height:100%;}
#contactsPage .vmiddle{margin:auto;position:relative;top:-5%;}
#contactsPage .contacts{text-align:center;}
#contactsPage .contacts a{margin:0 30px;text-decoration:none;}
#contactsPage .contacts .email, #contactsPage .contacts .call{display:inline-block;}
#contactsPage svg{height:30px;}
#contactsPage .socials{width:300px;height:30px;margin:auto;}
#contactsPage .socials > div{display:inline-block;}
#contactsPage .socials > div{display:inline-block;}
#contactsPage .socials > div.facebook svg{height:30px;}
#contactsPage .socials > div.instagram svg{height:30px;}

#contactsPage .cform{width:600px;margin:15px auto;border:1px solid #CCC;border-radius:5px;padding:15px;display: flex;flex-wrap: wrap;text-align:left;position:relative;}
#contactsPage .cform .details{width:47%;position:relative;}
#contactsPage .cform .message{width:50%;position:relative;margin-left:15px;}


#contactsPage .cform label{display:block;margin-left:5px;}
#contactsPage .cform .name,
#contactsPage .cform .email,
#contactsPage .cform .phone{margin-bottom:5px;}
#contactsPage .cform .message textarea{width:100%;height:119px;}

#contactsPage .cform .message textarea,
#contactsPage .cform input{padding:8px;font-size:12px;border-radius:5px;background:#F5F5F5;border:1px solid #F5F5F5;}

#contactsPage .cform .message textarea:focus,
#contactsPage .cform input:focus{border:1px solid #CCC;background:#FFF;outline: none;}

#contactsPage .cform .message textarea:focus::placeholder,
#contactsPage .cform input:focus::placeholder{color: transparent;}

#contactsPage .cform .input{position:relative;}
#contactsPage .cform .input.required:before{content:'*';position:absolute;left:27px;top:2px;color:#999;}
#contactsPage .cform .input svg{position:absolute;width:35px;top:3px;left:0px;fill:#333;border-right:1px solid #DDD;padding:6px;}
#contactsPage .cform .input input{padding-left:45px;width:100%;}

#contactsPage .cform.success input,
#contactsPage .cform.success textarea{background:#FFF;}


#contactsPage .send{width:100%;}
#contactsPage .buttonSend{background:#333;color:#FFF;border:1px solid #333;font-size:14px;line-height:25px;padding:0px 30px;font-size:14px;border-radius:0 0 3px 3px;position:absolute;bottom:-27px;right:15px;}
#contactsPage .buttonSend:hover{background:#189F85;color:#FFF;border:1px solid #189F85;}
#contactsPage .services{display: flex;flex-wrap: wrap;}
#contactsPage .services b{width:100%;margin:5px 15px;}
#contactsPage .services .s{background:#FFF;color:#333;border:1px solid #CCC;border-radius:5px;display:inline-block;padding:0 10px;font-size:12px;line-height:24px;margin:0 5px 5px 0;cursor:pointer;}
#contactsPage .services .s input{display:none;}
#contactsPage .services .s:hover{background:#333;color:#FFF;border:1px solid #333;}
#contactsPage .services .s.checked{background:#189F85;color:#FFF;border:1px solid #189F85;}

#contactsPage .socials > div{margin:0 5px;}

#contactsPage .close{position:absolute;top:-5%;right:0%;cursor:pointer;}
#contactsPage .close svg{width:50px;fill:#333;}

#i-message{font-size: 12px;line-height: 14px;height: 40px;margin: -10px 0 10px 0;padding: 5px;}
#i-message.warning{background: darkred;color: #FFF;}
#i-message.success{background: #189F85;color: #FFF;}


#portfolio{width:100%;height:100vh;background:#FFF;position:fixed;z-index:20;top:0;left:-100%;}
#portfolio .container{display:flex;height:100%;}
#portfolio .vmiddle{margin:auto;position:relative;top:-5%;}

#quote{
background: #1f4037;
background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
background: linear-gradient(to left, #99f2c8, #1f4037);

background: #FDC830;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	padding:50px 0;
	color:#FFF;
}
#quote .quoteBox{text-align:left;padding-left:30px;}
#quote .quoteBox .quote-icon{fill:#FFF;width:18px;position:relative;left:-25px;bottom:-15px;}
#quote .quoteBox .quote{font-size:24px;line-height:30px;font-style:italic;font-weight:bold;}
#quote .quoteBox .author{font-size:12px;font-weight:300;}
#quote .contactUs{background:#1f4037;padding:50px 50px;position:relative;margin-top:-75px;margin-bottom:-75px;text-align:left;}
#quote .contactUs .hey{font-size:24px;line-height:30px;font-weight:bold;display:inline-block;}
#quote .contactUs .button{
	display:inline-block;
	padding: 10px 28px;
    text-transform: uppercase;
    background: #f05a10;
    -webkit-box-shadow: 0px 8px 10px 0 rgb(50 69 79 / 10%);
    box-shadow: 0px 8px 10px 0 rgb(50 69 79 / 10%);
    border: transparent;
    color: #fff;
	margin:0px 0 0px 10px;
}


@media only screen and (max-width: 1000px) {
  #services .platform{white-space:normal;}
  #process svg{width: 100%;}
}
@media only screen and (max-width: 767px) {
	#contactsPage .cform{width:100%;}
	#contactsPage .cform .details{width:100%;}
	#contactsPage .cform .message {width: 100%;margin-left: 0px;}
	#contactsPage svg {height: 25px;}
	#contactsPage .contacts a{margin: 0 15px;}
	#contact .row>* {width: 50%;}
	#services .list .service {margin: 30px 15px;width: 40%;}
	#services .list .service .price {left: 65%;}
}
@media only screen and (max-width: 573px) {
  #intro .bird{
      right: 0;
      top: 5vh;
      width: 70vw;
      height: 50vw;
  }
  #intro .logo {
    padding-top: 15vh;
  }
  #intro .toServices{bottom: 25%;}
  #intro .toServices .button {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    width: 240px;
  }
  #intro .toServices .button span:not(.icon){width: 200px;}
}

.shadow {
  filter:drop-shadow(5px 5px 0px #DDD)
  /* Similar syntax to box-shadow */
}


@keyframes shake{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes float{
	0% {transform: translatex(0px) translatey(0px);}
	50% {transform: translatex(-10px) translatey(15px);}
	100% {transform: translatex(0px) translatey(0px);}
}
@keyframes float2{
	0% {box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);transform: translatex(0px) translatey(0px);}
	50% {box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);transform: translatex(-5px) translatey(6px);}
	100% {box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);transform: translatex(0px) translatey(0px);}
}
@keyframes float3{
	0% {box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);transform: translatex(-250px) translatey(250px);}
	99% {box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);transform: translatex(200px) translatey(-200px);}
	100% {box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);transform: translatex(-250px) translatey(250px);}
}


@keyframes jump {
  from, 20%, 53%, 80%, to {transform: translate3d(0,0,0);}
  40%, 43% {transform: translate3d(0, -15px, 0);}
  70% {transform: translate3d(0, -7px, 0);}
  90% {transform: translate3d(0,-2px,0);}
}
@keyframes jumpLeft{
  from, 20%, 53%, 80%, to {transform: translate3d(0,0,0);}
  40%, 43% {transform: translate3d(-15px, 0, 0);}
  70% {transform: translate3d(-7px, 0px, 0);}
  90% {transform: translate3d(-2px,0px,0);}
}
@keyframes jumpRight{
  from, 20%, 53%, 80%, to {transform: translate3d(0,0,0);}
  40%, 43% {transform: translate3d(15px, 0, 0);}
  70% {transform: translate3d(7px, 0px, 0);}
  90% {transform: translate3d(2px,0px,0);}
}



@media (min-width: 1400px){
	#quote .container,
	#contact .container{
		max-width: 90%;
	}
}




.fogBox{width:100%;height:46%;position:absolute;bottom:0;}

.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 35s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 33s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }