/* Procreate: main stylesheet */


/* Table of Contents
-------------------------------------------------------

    # General Styles
    # Navigation
    # Overlay
    # Slider
    # About
    # Services
    # Testimonials
    # Portfolio
    # Carousel
    # Facts
    # Packs
    # Contact Form
*/

/* # General Styles
------------------------------------------------------- */

    html {
    	width: 100%;
    	line-height: 1.15;
        overflow-x: hidden;
    }

    body {
        display: block;
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-size: 1em;
        color: rgb(0, 0, 0);
        text-align: center;
        margin: 0px;
        padding: 0px;
        background: #fff;

        color: #212529;
    }

    ul {
	    margin: 0;
	    padding: 0;
        list-style: none;    	
    }

    h2,
	h3 {
	    vertical-align: baseline;
	    border-width: initial;
	    border-style: none;
	    border-color: initial;
	    border-image: initial;
	    outline: 0px;
	    text-decoration: none;
	    margin: 0px;
	    padding: 0px;
	}

	h2 {
	    font-size: 3.2em;
	    letter-spacing: 0.1em;
	    font-weight: 300;
	    color: rgb(102, 102, 102);
	    font-family: Oswald, sans-serif;
	}

	@media only screen and (max-width: 540px) {
		h2 {
			font-size: 1.8em;
		}
	}

	h3 {
		text-transform: uppercase;
	    letter-spacing: 0.20em;
	    font-weight: 200;
	}

	h4 {
		font-size: 0.9em;
        text-transform: uppercase;
        font-weight: 200;
	}

	h6 {
		font-size: 0.6em;
        text-transform: uppercase;
        font-weight: 200;
	}

    a {
    	text-decoration: none;
    }

    p {
    	font-size: 0.9em;
        max-width: 800px;
        color: rgb(0, 0, 0);
        line-height: 1.8em;
        font-weight: 300;
        padding: 10px;
        margin: 0px auto;
    }

    * {
    	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
    	scrollbar-color: #1587e9 #ffffff;
    }

	.small-separator {
	    width: 100px;
	    height: 3px;
	    background: rgb(210, 210, 210);
	    margin: 20px auto;
	}

    .container {
        max-width: 1200px;
        width: 92%;
        position: relative;
        zoom: 1;
        z-index: 2;
        margin: 0px auto;	
    }

	.content {
	    width: 100%;
	    position: relative;
	    padding: 50px 0 0;
	}

	.sections-head {
	    opacity: 0.9;
	    font-size: 1em;
	    text-transform: uppercase;
	    letter-spacing: 0.2em;
	    font-weight: 200;
	    font-family: Oswald, sans-serif;
	}

    .clearfix {
    	clear:both;
    }

    .white {
    	color: #fff;
    }

	.wrapper {
	    margin-left: 49px;
	    vertical-align: top;
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    right: 0px;
	    z-index: 1;
	    height: 100%;
	}

	@media only screen and (max-width: 959px) {
		.wrapper {
			margin-left:0;
		}
	}

	.sections-head, 
	.inner a:hover, 
	.inner li.current a, 
	.social-list ul li a:hover, 
	#slider h1 span, 
	.bigtext, #options li.actcat, 
    #options li:hover, .planContainer .options li,
    .smallicon i:hover {
    	color: #1587e9 !important;
    }

    .nav-button span,
    .patern span, 	
    .owl-dots button.owl-dot.active span, 
	.owl-dots button.owl-dot:hover span,
	.customNavigation a.next-slide,
	.customNavigation a.close, 	
	.customNavigation a.btn:hover,
	.skillbar-bar,
	.quote-icon,
	.serviseslider .icon-holder,
	.serviseslider h3 span,
	.owl-theme .owl-controls .owl-page.active span,
	.owl-theme .owl-controls .owl-page:hover span,
	#facts ul li h6,
	#facts ul li h6:before,
    .planContainer .price,
    .planContainer .button a,
    .owl-carousel-2,
    #contact_form input:focus,
    #contact_form textarea:focus {
    	background-color: #1587e9;
    }

	#page,
	.loading {
	    -webkit-transition: opacity 1s ease-out;
	    -moz-transition: opacity 1s ease-out;
	    -o-transition: opacity 1s ease-out;
	    transition: opacity 1s ease-out;
	}

	#page {
		opacity: 0;
	}

	.loading {
	    position: fixed;
	    height: 100%;
	    width: 100%;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: #222;
	    z-index: 999;
	}

	#progress {
	    background-color: #fff;
	    width: 0;
	    height: 100%;
	    -webkit-transition: width 0.3s ease-out;
	    -moz-transition: width 0.3s ease-out;
	    -o-transition: width 0.3s ease-out;
	    transition: width 0.3s ease-out;
	}


	.loading-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 70%);
		font-family: sans-serif;
		color: white;
		font-size: 7vw;
		text-shadow: 2px 2px 5px rgba(0, 0, 0.3),5px 5px 70px rgba(255, 255, 255, 0.5);
	}

	.number {
        width: 100%;
        text-align: center;
	}

	#bar {
		width: 300px;
		height: 12px;
		border: 1px solid #fff;
		box-shadow: 2px 2px 5px rgba(0, 0, 0.3),5px 5px 70px rgba(255, 255, 255, 0.5);
	}

/* # Navigation
------------------------------------------------------- */

	.navigation {
		position: fixed !important;
		top: 0;
		height: 100%;
		z-index: 100;
		width: 200px;
		background-color: #212121;
	    left: 0;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		transition: all 300ms linear;
	}

	.nav-overlay {
		background: #212121;
	    position: absolute;
	    top: 0;
	    right: -50px;
	    width: 54px;
	    height: 100%;
	    z-index: -1;
	    border-left: 1px solid #101011;
	    -webkit-transition: none;
	    -moz-transition: none;
	    -o-transition: none;
	    transition: none;
	}

	@media only screen and (max-width: 959px) {
		.nav-overlay {
			background: #212121;
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 50px;
            z-index: -1;
	        -webkit-transition: none;
	        -moz-transition: none;
	        -o-transition: none;
            transition: none;
		}
	}

	.nav-button {
	    width: 46px;
	    height: 36px;
	    position: absolute;
	    top: 50%;
	    margin-top: -18px;
	    right: -48px;
	    cursor: pointer;
	    padding: 7px;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		transition: all 300ms linear;
	}

	@media only screen and (max-width: 959px) {
		.nav-button {
			top: 5px;
            right: -56px;
            margin-top: 0;
		}
	}

	.nav-button span {
		width: 100%;
	    height: 4px;
	    float: left;
	    margin-bottom: 6px;
	}

	.inner {
		float: left;
		width: 100%;
		height: 100%;
	}

	.logo {
		margin-top: 50px;
	    cursor: pointer;
	}

	.link-holder {
		max-width: 500px;
	    margin: 30px auto;
	    position: relative;
	    z-index: 2;
	}
    
	.inner a {
		width: 90%;
	    float: left;
	    font-size: 16px;
	    padding: 10px 10px;
	    text-align: left;
	    text-transform: uppercase;
	    color: #fff;
	    position: relative;
	    font-family: 'Oswald', sans-serif;
	    border-bottom: 1px solid #101011;
	    border-top: 1px solid #38393b;
	    left: -25%;
	}

	.inner a:hover,
	.inner li.current a {
	    border-right: 2px solid #1587e9;
	}

	.rotate {
	    transform: rotate(90deg);
	}

	.isDown {
	    left: -200px !important;
	}

	.isUp {
        left: 0!important;
    }

    .social-list {
        position: absolute;
        bottom: 10px;
        left: -8px;
        width: 100%;
    }

    .social-list ul {
    	position: relative;
    	z-index: 3;
    }

    .social-list ul li {
    	margin-left: 4px;
    	display: inline-block;
    }

    .social-list ul li a {
        float: left;
        border-bottom: 1px solid #101011;
        border-top: 1px solid #38393b;
        color: #fff;
        width: 45px;
        height: 45px;
    }

    .social-list ul li i {
    	margin-top: 6px;
    	font-size: 2em;
    }

/* # Overlay
------------------------------------------------------- */
    
	@keyframes fadeIn {
	    from { opacity: 0; }
	    to { opacity: 0.9; }
	}

	@keyframes fadeOut {
	    from { opacity: 0.9; }
	    to { opacity: 0; }
	}

	.fadeIn {
	    animation: fadeIn 0.2s ease-in forwards;
	}

	.fadeOut {
	    animation: fadeOut 0.2s ease-out forwards;
	}

	.overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.9);
	    z-index: 2;
	}

/* # Slider
------------------------------------------------------- */

	#slider {
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	    height: 100%;
	}

  	.slider-content {
    	height: 100vh;
    	background-size: cover;
    	background-position: center;
    	background-attachment: fixed;
  	}

	#slider .container {
	   top: 25%;
	   position: absolute;
	   width: 100%;
	}

	#slider h1 {
		margin-bottom: 20px;
	    letter-spacing: 0.10em;
	    font-size: 4em;
	    text-transform: uppercase;
	    font-weight: 500;
	    font-family: oswald;
	    line-height: 1.27em;
	}

	@media only screen and (max-width: 959px) {
		#slider h1 {
			font-size: 2.6em;
		}
	} 

	#slider h3 {
	    font-size: 0.8em;
	    text-transform: uppercase;
	    letter-spacing: 0.20em;
	    font-weight: 600;
	    margin-bottom: 0px;
	}

	.patern {
		width: 50%;
	    height: 2px;
	    background: #fff;
	    margin: 0 auto;
	    display: block;
	}

	.patern span {
		width: 30%;
	    height: 2px;
	    display: inline-block;
	    float: right;
	}

    .owl-nav {
        position: absolute;
        top: 50%;
        font-size: 12px;
        color: #fff;
        width: 100%;
	}

	.owl-nav .owl-next {
		right:20px;
		position: absolute;
	}

	.owl-nav .owl-prev {
		left:20px;
		position: absolute;
	}

	.owl-dots {
	    text-align: center;
	    position: absolute;
	    bottom: 12px;
	    width:100%;
	}

	.owl-dots button.owl-dot.active span, 
	.owl-dots button.owl-dot:hover span {
	  height: 6px;
	  width: 40px;
	  position: absolute;
	  top: 0;
	  left: 0;
	}

	.owl-dots button.owl-dot {
	    margin: 5px 7px !important;
	    background: #fff;
	    opacity: 0.8;
	    width: 40px;
	    height: 6px;
	   position: relative;
	}

/* # About
------------------------------------------------------- */

    #about {
    	display: block;
    }

	#carousel {
	    position: relative;
	    width:100%;
	    opacity: 1;
	    display: block;
	}

    .carousel .wrapper-outer {
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	    -webkit-transition: all 1000ms ease 0s;
	    -moz-transition: all 1000ms ease 0s;
	    -o-transition: all 1000ms ease 0s;
	    transition: all 1000ms ease 0s;
	}

	.wrapper-carousel {
	    width: 1195px;
	    left: 0px;
	    display: block;
	    transform: translate3d(0px, 0px, 0px);
	    -webkit-transition: all 0ms ease 0s;
	    -moz-transition: all 0ms ease 0s;
	    -o-transition: all 0ms ease 0s;
	    transition: all 0ms ease 0s;
	    transform-origin: 597.5px center;
	    perspective-origin: 597.5px center;
	    perspective: 597.5px;
	}

	.item-carousel {
		background-color: transparent;
	    width:1195px;
	    float: left;
	    backface-visibility: hidden;
		-webkit-transition: all 1.3s;
		-moz-transition: all 1.3s;
		-o-transition: all 1.3s;
		transition: all 1.3s;
		position: relative;
	}

    .item-carousel:not(:first-child) {
    	position: absolute;
        opacity: 1;
        transform: translateY(-1000px);
    }

	@media only screen and (max-width: 848px) {
		.item-carousel:not(:first-child) {
			margin-top: -16px;
		}
	}

	@media only screen and (max-width: 648px) {
		.item-carousel:not(:first-child) {
            margin-top: 50px;
		}
	}

	@media only screen and (max-width: 668px) {
		.item-carousel:not(:first-child) {
            margin-top: -61px;
		}

	}

	@media only screen and (max-width: 574px) {
		.item-carousel:not(:first-child) {
            margin-top: -96px;
		}

	}

	@media only screen and (max-width: 500px) {
		.item-carousel:not(:first-child) {
            margin-top: -221px;
		}

	}

	@media only screen and (max-width: 298px) and (min-width: 200px) {
		.item-carousel:not(:first-child) {
            margin-top: -407px;
		}

	}

	@media only screen and (max-width: 501px) and (min-width: 481px) {
		.item-carousel:not(:first-child) {
            margin-top: -126px;
		}

	}

	@media only screen and (max-width: 480px) and (min-width: 460px) {
		.item-carousel:not(:first-child) {
            margin-top: -143px;
		}

	}


	@media only screen and (max-width: 244px) and (min-width: 150px) {
		.item-carousel:not(:first-child) {
            margin-top: -575px;
		}

	}

	@media only screen and (max-width: 461px) and (min-width: 401px) {
		.item-carousel:not(:first-child) {
            margin-top: -170px;
		}

	}

	@media only screen and (max-width: 315px) and (min-width: 299px) {
		.item-carousel:not(:first-child) {
            margin-top: -330px;
		}

	}

	@media only screen and (max-width: 959px) {
		.item-carousel:not(:first-child) .item .grid-2 {
            width: 97%;
            margin-bottom: 30px;
		}
	}

	@media only screen and (max-width: 400px) and (min-width: 375px) {
		.item-carousel:not(:first-child) {
            margin-top: -191px;
		}

	}

	.carousel .wrapper-carousel,
	.carousel .item-carousel {
	    backface-visibility: hidden;
	    width: 100%;
	}

	#carousel .item {
	    width: 100%;
	    display: block;
	    position: relative;
	    padding: 10px 0px;
	}

	.customNavigation a.next-slide,
	.customNavigation a.close,
	.customNavigation a.btn:hover {
		-webkit-transition: all 300ms linear; 
		-moz-transition: all 300ms linear; 
		-o-transition: all 300ms linear; 
		transition: all 300ms linear; 
	}


	.customNavigation a.next-slide,
	.customNavigation a.close,
	.serviseslider .icon-holder,
	.serviseslider h3 span,
	.quote-icon {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-o-border-radius: 100%;
		border-radius: 100%;
	}

	.customNavigation a.next-slide {
	    position: absolute;
	    right: 10%;
	    top: 10%;
	    display: block;
	    cursor: pointer;	    
	    color:#fff;
        width: 36px;
        height: 36px;
        border: 6px double #fff;
        opacity: 0.8;
        padding-top: 3px;
        padding-left: 1px;
	}

	.customNavigation a.close {
	    margin: 10px auto;
	    left: 50%;
	    bottom: -37px;
	    display: block;
	    cursor: pointer;
	    width: 36px;
	    height: 36px;
	    color: #fff;
	    border: 6px double #fff;
	    opacity: 0.8;
        padding-top: 3px;
        padding-left: 0px;
	}

	.customNavigation a.btn:hover {
	    color: #fff;
	    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #1587e9, 0 0 0 10px rgba(255,255,255,0.5);
        opacity: 0.5;
        border: 6px solid #fff;
    }

	.customNavigation.clear {
	    cursor: pointer;
	    float: none;
	    clear: both;
	}

	@media screen and (min-width: 640px) {
	    .grid-2 {
	        width: 30.303%;
	    }
	}

	@media screen and (min-width: 480px){
	    .grid-2 {
	       float: left;
	       margin: 0px 1.51515%;
	    }
	}

	@media screen and (max-width: 639px){
	    .grid-2 {
	       width: 100%;
	    }
	}

	#about .item .grid-2 p {
	    text-align: justify;
	}

	.bigtext {
	    font-size: 1em;
	    text-transform: uppercase;
	    letter-spacing: 0.2em;
	    font-weight: 200;
	    font-family: Oswald, sans-serif;
	}

	.skillbar-holder {
	    margin-top: 10px;
	}

	.skillbar-title {
	    float: left;
	    font-size: 13px;
	    color: #000;
	}

	.skillbar-title span {
	    display: block;
	    margin-bottom: 4px;
	}

	.skill-bar-percent {
	    float: right;
	    font-size: 11px;
	    color: #444;
	    margin: 2px 0 0 10px;    
	}

	.skillbar,
	.skillbar-bar,
	.animbox,
	.owl-theme .owl-controls .owl-page span,
	.owl-dots button.owl-dot.active span, 
	.owl-dots button.owl-dot:hover span,
	.owl-dots button.owl-dot,
	#packs .planContainer {
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
		border-radius: 4px;
	}

	.skillbar {
	    float: left;
	    position: relative;
	    display: block;
	    margin-bottom: 15px;
	    width: 100%;
	    background: #eee;
	    height: 10px;
	    overflow: hidden;
	}

	.skillbar-bar {
		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
	    transition: 2s;
	    height: 100%;
	    width: 0;
	}


/* # Services
------------------------------------------------------- */

	#services {
	  background-image: url(../img/services-image.jpg);
	  background-size: cover;
      background-attachment: fixed;
	  background-position: 50% -265px;
	  background-color: #000;
	  position: relative;
	}

	#services .overlay {
	  position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.92);
	}

    #service_boxes {
	    margin-top: 70px;
	}

	.service_box {
	    margin: 0 20px 10px 20px;
	    display: inline-block;
	    width: 250px;
	    position: relative;
	}

	.service_box:before {
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        background-color: #fff;
        bottom: -37px;
        left: 42%;
        transform: rotate(45deg);
        display: none;
	}

	.service_box:after {
        bottom: -19px;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-top-color: #1587e9;
        border-width: 6px;
        margin-left: -6px;
        display: none;
	}

	.animaper {
		transform: translateY(50px); /* initial downward offset */
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.animaper.visible {
		transform: translateY(0); /* Slightly move upward */
	}

	.animbox {
		padding: 17px 35px;
		width: 250px;
		float: left;
		margin-top: 0px;
		margin-bottom: 30px;
		border: 1px solid rgba(255, 255, 255, .5);
		letter-spacing: 1px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		color: #fff;
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
	}

	.serviseslider-holder {
		position: relative;
		z-index: 2;
		background: #fff;
		color: #292929;
		padding: 100px 0;
	}

	.quote-icon {
		position: absolute;
	    top: -36px;
	    left: 50%;
	    margin-left: -35px;
	    width: 70px;
	    height: 70px;
	    border: 2px solid #fff;
	    z-index: 4;
	    color: #fff;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.aactive:before,
	.aactive:after {
        display: block;
	}

	@media only screen and (max-width: 1021px) {
	    .aactive:before,
		.aactive:after {
	        display: none;
		}
	}

   .serviseslider {
	    display: flex;
        justify-content: center;
        position: relative;
        height: auto;
    }

	.flex-viewport {
	    max-height: 2000px;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	    overflow: hidden;
        position: absolute;
	}

	.slides {
	    width: 1000%;
	    transition-duration: 0s;
	    transform: translate3d(-1195px, 0px, 0px);
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
	}

	.slides li {
	    width: 1195px;
	    float: left;
	    display: block;
	}

    .serviseslider .icon-holder {
        width: 90px;
        height: 90px;
        margin: 6px auto 6px;
        line-height: 60px;
        position: relative;
    }

    .icon-holder i {
    	color: #fff;
        margin-top: 25px;
        -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, 0.5)));
    }

   .serviseslider h3 {
	    font-size: 24px;
	    color: #ccc;
	    margin-bottom: 16px;
	    font-family: 'Oswald', sans-serif;
   }

   .serviseslider h3 span {
	   	width: 5px;
	    height: 5px;
	    display: inline-block;
	    float: none;
	    margin: 6px 24px;
   }

   .serviseslider h4 {
   	    margin-top: 10px;
        margin-bottom: 6px;
        font-weight: 400;
   }

/* # Testimonials
------------------------------------------------------- */

	#testimonials .content {
	    padding: 80px 0;
	    background-color: #ddd;
	    border-top: 2px solid #1587e9;
	    border-bottom: 2px solid #1587e9;
		background-image: url(../img/testimonial-image.jpg);
	    background-size: cover;
	    background-attachment: fixed;
	    background-position: top;
	    color: #fff;
	    position: relative;
	}

	#testimonials .content .overlay {
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		background-color: rgba(0,0,0,0.92);
	}

	.owl-theme .owl-controls .owl-page {
	    display: inline-block;
	    zoom: 1;
	    cursor: pointer;
	}

	.owl-theme .owl-controls .owl-page span {
	    font-weight: 100;
	    color: #fff;
	    display: block;
	    margin: 5px 7px !important;
	    background: #fff;
	    opacity: 0.8;
	    width: 40px;
	    height: 6px;
	}

	#clientsay .owl-wrapper-outer {
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	    height: 140px;
	    perspective: 200px;
	    display: flex;
	    justify-content: center;
	    margin-top:60px;
	}

	#clientsay .owl-item {
		position: absolute;
		-webkit-transition: 1.1s;
		-moz-transition: 1.1s;
		-o-transition: 1.1s;
		transition: 1.1s;
		font-weight: initial;
	}

	#clientsay .owl-item.active {
	    top: 0 !important;
	}

	#clientsay p {
		font-size: 20px;
	    font-family: "Times New Roman", Times, serif;
	    font-style: italic;
	    cursor: move;
	    padding: 8px;
	    color:#fff;
	}

	@media only screen and (max-width: 959px) {
	    #clientsay p {
	        font-size: 14px;
	    }
	}

	#clientsay span {
		margin: 20px auto;
	    font-weight: 100;
	    color: #fff;
	    margin-top: 8px;
	    opacity: 0.8;
	}

	#clientsay .owl-prev {
	    display: block;
	    width: 25px;
	    height: 47px;
	    position: absolute;
	    top: 30%;
	    margin-top: -24px;
	    left: -25px;
	    overflow: hidden;
	    cursor: pointer;
	    font-size: 41px;
	}

	#clientsay .owl-next {
	    display: block;
	    width: 25px;
	    height: 47px;
	    position: absolute;
	    top: 30%;
	    margin-top: -24px;
	    right: -25px;
	    overflow: hidden;
	    cursor: pointer;
	    font-size: 41px;
	}

	@media only screen and (max-width: 740px) {
	    #clientsay .owl-next, 
	    #clientsay .owl-prev {
	        display: none;
	    }
	}


/* # Portfolio
------------------------------------------------------- */

	#portfolio {
		-webkit-transition: all 1000ms ease 0s;
		-moz-transition: all 1000ms ease 0s;
		-o-transition: all 1000ms ease 0s;
	    transition: all 1000ms ease 0s;
	    float: left;

	}

	#portfolio .content {
		padding:100px 0 0;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		height: none;
		float:left;
	}

	#options {
		margin: 50px auto 20px;
	    max-width: 600px;
	    text-align: center;
	    position: relative;
	    z-index: 2;
	}

	#options ul {
		position: relative;
	}

	#options li {
		display: inline-block;
	    margin-bottom: 5px;
	    color: #666;
	    font-style: normal;
	    font-weight: 200;
	    line-height: 1.17em;
	    padding: 6px 10px;
	    cursor: pointer;
	    font-family: 'Oswald', sans-serif;
	    position: relative;
	}

	#options li.back {
		border-top: 2px solid #1587e9;
	    z-index: 8;
	    padding: 0;
	    margin-bottom: 5px;
	    position: absolute;
	    bottom: -10px;
	    height: 1px;
	    left: 125px; 
		width: 44px; 
		overflow: hidden;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}

	@media only screen and (max-width:622px) {
		.back {
			display:none !important;
		}
	}

	.aih {
		width: 100%;
	    float: left;
	    padding-bottom: 50px;
	}

	#folio_container {
		position: relative;
	    z-index: 3;
	    width:95%;
	    margin:0 auto;
	    opacity: 1;
	    -webkit-transition: opacity 0.5s ease;
	    -moz-transition: opacity 0.5s ease;
	    -o-transition: opacity 0.5s ease;
	    transition: opacity 0.5s ease;
	}


	.box {
	    opacity: 0; /* Opacity for hidden elements */
	    transform: perspective(1000px) translateX(-20px) translateY(20px) rotateY(90deg); /* Initial position */
	    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
	                transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* Transition to hide */
	    height: 0; /* Hide the default height */
	    overflow: hidden; /* Avoid showing the hidden content */ 
	    float: left;
	    width: 25%;
	    padding: 0;
	    text-align: center;      
	}

	@media only screen and (max-width:959px) {
		.box {
			width:50%;
		}
	}

	@media only screen and (max-width:540px) {
        .box {
        	width: 96.969696969697%;
        	margin: 0 1.315151515152%;
        }
    }

	.box.show {
	    opacity: 1;
	    transform: perspective(1000px) translateX(0px) translateY(20px) rotateY(0deg); /* Normal position */
	    height: max-content;
	}

	.box a {
		position: relative;
	    width: 100%;
	    height: 100%;
	    display: block;
	    color: #000;
	    overflow: hidden;
	}

	.box a:hover img {
	    animation: zoom 12s infinite alternate; /* Hover animation */
	}

	.box a img {
		position: relative;
	    z-index: 1;
	}

	.respimg {
		width: 100%;
	    height: auto;
	    padding: 0 !important;
	}

	.box .overlay {
	    position: absolute;
	    height: 100%;
	    width: 105%;
	    text-align: center;
	    background-color: rgb(21, 135, 233, 0.7);
	    color: #fff;
	}

	.box a h4 {
		width: 100%;
	    position: absolute;
	    top: 30%;
	    text-transform: uppercase;
	    font-size: 18px;
	    font-weight: 100;
	}

	.box a h6 {
		letter-spacing: 1px;
	    width: 100%;
	    position: absolute;
	    top: 45%;
	    font-family: 'Oswald', sans-serif;
	}

	@keyframes zoom {
	    0% {
	        transform: scale(1) rotate(0deg); /* Original size */
	    }
	    100% {
	        transform: scale(1.5) rotate(45deg); /* Zoom at 150% */
	    }
	}

	.hover {
	  overflow: hidden;
	}

	.hover .overlay {
	  transform: translate3d(-100%, 0, 0);
	  animation-duration: 0.5s;
	  animation-fill-mode: forwards;
	  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	/* Mouse enter event */
	.hover.mouseenter.top .overlay {
	  animation-name: slide--enter-top;
	}

	.hover.mouseenter.right .overlay {
	  animation-name: slide--enter-right;
	}

	.hover.mouseenter.bottom .overlay {
	  animation-name: slide--enter-bottom;
	}

	.hover.mouseenter.left .overlay {
	  animation-name: slide--enter-left;
	}

	/* Mouse leave event */
	.hover.mouseleave.top .overlay {
	  animation-name: slide--leave-top;
	}

	.hover.mouseleave.right .overlay {
	  animation-name: slide--leave-right;
	}

	.hover.mouseleave.bottom .overlay {
	  animation-name: slide--leave-bottom;
	}

	.hover.mouseleave.left .overlay {
	  animation-name: slide--leave-left;
	}

	/* Sliding animations ! */
	@keyframes slide--enter-top {
	  0% { transform: translate3d(0, -100%, 0); }
	  100% { transform: none; }
	}

	@keyframes slide--enter-right {
	  0% { transform: translate3d(100%, 0, 0); }
	  100% { transform: none; }
	}

	@keyframes slide--enter-bottom {
	  0% { transform: translate3d(0, 100%, 0); }
	  100% { transform: none; }
	}

	@keyframes slide--enter-left {
	  0% { transform: translate3d(-100%, 0, 0); }
	  100% { transform: none; }
	}

	@keyframes slide--leave-top {
	  0% { transform: none; }
	  100% { transform: translate3d(0, -100%, 0); }
	}

	@keyframes slide--leave-right {
	  0% { transform: none; }
	  100% { transform: translate3d(100%, 0, 0); }
	}

	@keyframes slide--leave-bottom {
	  0% { transform: none; }
	  100% { transform: translate3d(0, 100%, 0); }
	}

	@keyframes slide--leave-left {
	  0% { transform: none; }
	  100% { transform: translate3d(-100%, 0, 0); }
	}

/* # Carousel
------------------------------------------------------- */

	.owl-carousel-2 {
		clear: both;
        height: 111px;
        position: relative;
	}

	.owl-carousel-2 .owl-stage-outer {
		height: 100%;
        position: absolute;
        display: flex;
	}

	.owl-carousel-2 .owl-stage {
		display: flex;
		justify-content: center;
	}

	.owl-carousel-2 .owl-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.owl-carousel-2 img {
		width: 60px;
		height: auto;
	}

	.owl-carousel-2 .owl-nav {
		display: none;
	}

	.owl-carousel-2 .owl-dots {
		display: none;
	}


/* # Facts
------------------------------------------------------- */

	#facts {
	    background-image: url(../img/testimonial-image.jpg);
	    background-size: cover;
	    background-attachment: fixed;
	    background-position: top;
	    color: #fff;
	    position: relative;
	}

	#facts .overlay {
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.92);
	}

	#facts .content {
		position: relative;
		padding: 100px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#facts ul li {
		display: inline-block;
	    position: relative;
	    margin-bottom: 37px;
	}

	.milestone-counter {
	    float: left;
	    width: 100%;
	}

	.num {
		position: relative;
	    z-index: -1;
	    font-size: 96px;
	    font-family: 'Oswald', sans-serif;
	    -webkit-backface-visibility: visible;
	    -webkit-transform-origin: 50% 50%;
	    perspective: 1050px;
	}

	#facts ul li h6 {
		font-size: 13px;
	    color: #fff;
	    font-family: 'Oswald', sans-serif;
	    padding: 12px;
	    clear: both;
	    max-width: 200px;
	    margin: 0 auto;
	    position: relative;
	    display: block;
	}

	#facts ul li h6 i {
		float: left;
	    border-right: 1px solid #fff;
	    padding: 6px;
	    margin-top: -12px;
	    margin-left: -6px;
	}

	#facts ul li h6:before {
	    border-width: 12px;
	    top: -4px;
	    left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 5px;
	    width: 5px;
	    position: absolute;
	    pointer-events: none;
	    transform: rotate(45deg);
	}

	#facts ul li h6:after {
		bottom: -20px;
	    left: 49%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	    border-top-color: #fff;
	    border-width: 6px;
	    bottom:-18px;
	}

/* # Packs
------------------------------------------------------- */

	#packs .content {
		padding: 100px 0;
	}

	#packs .items {
		width:100%;
	}

	#packs .plan {
		width:33.33%;
		float: left;
		background-color: #fff;
		position: relative;
		margin: 0 0 100px;
	}

	@media only screen and (max-width:500px) {
		#packs .plan {
			width:100% !important;
		}
	}

    #packs .plan:nth-child(2) .planContainer .price {
    	background-color: #555252;
    }

	#packs .planContainer {
		border: 1px solid #eaeaea;
		margin:30px 30px;
	}

	#packs .planContainer h3 {
	    font-size: 24px;
	    margin: 9px 0 17px 0;
	    color: #666;
	    letter-spacing: normal;
	}

	.planContainer .price {
	    padding: 18px 0;
	    -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, 0.2)));
	}

	.planContainer .price .term {
		width: 100%;
	    font-size: 14px;
	    color: #fff;
	    font-family: 'Open Sans', sans-serif;
	    opacity: 0.6;
	}

	.planContainer .price .price-nominal {
		color: #fff;
	    font-size: 34px;
	    font-weight: 300;
	    font-family: 'Oswald', sans-serif;
	}

	.planContainer .price .price-nominal span {
		font-size: 18px;
	    color: #fff;
	    font-family: 'Open Sans', sans-serif;
	}

	.planContainer .options {
		margin-top: 50px;
	}

	.planContainer .options li {
		width: 96%;
	    margin-left: 1.5%;
	    background: #F3F4F8;
	    padding: 4px 0;
	    line-height: 2.5;
	    font-size: 16px;
	}

	.planContainer .options li.nocolor {
		background-color: #fff;
	}

	.planContainer .options li span {
		font-weight: 400;
	    color: #979797;
	}

	.planContainer .button a {
		text-transform: uppercase;
	    color: #fff;
	    font-weight: 100;
	    letter-spacing: 3px;
	    line-height: 2.8em;
	    font-family: 'Oswald', sans-serif;
	    display: inline-block;
	    padding: 0 30px;
	    margin: 0 auto;
	    position: relative;
	    top: 25px;
	    -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
	    border-radius: 2px;
	    -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, 0.2)));
	}

	#packs .plan:nth-child(2) .planContainer .button a {
		background-color: #555252;
	}

/* # Contact Form
------------------------------------------------------- */

	.contact {
		background-color: black;
		clear: both;
		color: #fff;
	}

	.contact .content {
		padding: 50px 0;
	}

	.contact .quote-icon {
		cursor: pointer;
	}

	@media screen and (min-width: 640px) {
	    .grid-3, .grid-half {
	        width: 46.969696969697%;
	        display: inline-block;
	        margin: 0 10px;
	    }
	}

	.m-top {
	    float: left;
	    margin-top: 15px;
	    text-align: center;
	    width: 100%;
	}

	.contact-info {
		position: absolute;
	}


	.contact-details {
		margin: 4px 0;
		color:#fff;
	}

	.smallicon {
	    width: 50px;
	    height: 50px;
	    margin: 0 auto;
	    position: relative;
	    z-index: 1;
	    cursor: pointer;
	    top: 25%;
	    opacity: 1;
	}

	.smallicon i {
		color: #fff !important;
		font-size: 22px;
	}

	.smallicon i:hover {
		-webkit-transition: 1.5s;
		-moz-transition: 1.5s;
		-o-transition: 1.5s;
		transition: 1.5s;
	}

	.grid {
	   margin: 117px 0;
	}

	@media screen and (min-width: 640px) {
	    .grid {
	        width: 30.30303030303%;
	        display: inline-block;
	    }
	}

	.showform {
		position: relative;
		bottom : -121px;
		margin-top:130px;
		margin-bottom: 0;
	}

	@media only screen and (max-width:740px) {
		.showform {
			bottom: 0;
		}
	}

	.contact-details span {
		width: 100%;
	    float: left;
	    margin: 30px 0;
	    position: relative;
	    z-index: 3;
	    color: #fff;
	    font-size: 14px;
	    font-weight: 300;
	    line-height: 1.2rem;
	}

	.mapbox {
        display: none;
        height: 460px;
        overflow: hidden;
	}

	@media only screen and (max-width: 630px) {
		.mapbox {
			margin-top: 140px;
		}
	}

	.mapbox div:first-child {
		width: 100% !important;
		height: 100% !important;
		position: relative!important;
	}

	.footer {
		margin-top: 30px;
	}

	.footer p {
		color: #fff;
		padding-bottom: 0;
	}