/*--------------------------------------------------------------------------
   

	Typefolio

	LESS-based responsive grid system

	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
	1. Body
	2. Typography
	3. Pages
		3.0. Common Elements
		3.1. Navigation
		3.2. Header
		3.3. Home
		3.4. About
		3.5. Works
		3.6. Shop
		3.7. Archive (Blog)
		3.8. Contact
		3.9. Footer
	4. jQuery Plugins
		4.1. iosSlider
		4.2. Flexslider

--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
	0. Personalized CSS
--------------------------------------------------------------------------*/


/* preloader styles
/* ========================================== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #fff;
}

.sk-spinner-pulse {
  width: 60px;
  height: 60px;
  background-color: #111112;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
          animation: sk-pulseScaleOut 1s infinite ease-in-out; }

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }


#scroll{

}

html { scroll-behavior: smooth; } 

/*--------------------------------------------------------------------------
	0.0 Previous Version Project Page
--------------------------------------------------------------------------*/

.cap {
  font-size: 0.8rem; 
  color: #777;
  line-height: 24px;
  font-family: "Source Sans 3",sans-serif; 
}

.cap li{
	line-height: 24px !important;
}

video{
  width: 100%    !important;
  height: auto   !important;
}



.iframe-container{
  position: relative;
  overflow:hidden;
  padding-bottom: 75%;
}

.iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/*--------------------------------------------------------------------------
	0.1 Card Hover
--------------------------------------------------------------------------*/

.hover-effect {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Zalando Sans SemiExpanded', sans-serif;
  font-size: 20px;
  font-weight: lighter;
  letter-spacing: 2px;
  transition: 1s box-shadow;
  transition: 0.4s transform;
}

.hover-effect:hover {
  box-shadow: 0 5px 25px 0px rgba(0,0,0,.1);
  transform: translate(-6px,-6px)
}

.hover-effect:before{
  display: block;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #3676BC;
  z-index: -1; 
  transition: 0.4s transform;
}

.hover-effect:hover::before{
  transform: translate(14px,14px)
}


/*--------------------------------------------------------------------------
	0.2 Main background
--------------------------------------------------------------------------*/


.wrapper-background {
  background: url("https://images.unsplash.com/photo-1564772255985-c7ca28689bae?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0MXx8fGVufDB8fHx8fA%3D%3D");
  color: #eee; 
  width: 100%;
/*  height: 80vh;*/
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  animation: animation 100s linear infinite;

  /* CHANGE 'height: 80vh' TO 'min-height: 80vh' */
  min-height: 76vh; 
  height: auto !important; /* Allow it to grow if text is huge */
  padding-bottom: 20px;  
  padding-top: 20px;   /* Add space for the 'Get in touch' links */
}

@keyframes animation {
   100%{
    background-position:0px -3000px;
  }
}


.wrapper-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Just a simple dark tint to anchor the white text */
  background: rgba(0, 0, 0, 0.3); 
  pointer-events: none; 
  z-index: 1;
}

.wrapper-background > * {
  position: relative;
  z-index: 2; /* Keeps your text above the tint */
}

/* The Normal State */
a.light-link {
    color: #ffffff !important; /* Forces white text */
    border-bottom: 2px solid;  /* Inherits the white color automatically */
    transition: opacity 0.2s;  /* Makes the hover smooth */
}

/* The Hover State */
a.light-link:hover {
    color: #8BB9F5 !important; /* Turns light grey on hover */
}

h1.hero-title {
/*  font-size: clamp(24px, 5vw, 38px) !important; */
  line-height: 1.6 !important;
  font-weight: 700;
  color:white !important;
}

/*--------------------------------------------------------------------------
	0.3 Project Background Parallax
--------------------------------------------------------------------------*/

.title-masking {
  background-attachment: fixed; 
  -webkit-text-fill-color: rgb(16,25,56,0.3); 
  -webkit-background-clip: text; 
  padding:10px 0;
}


.parallax-1{
  /* The image used */
  background: url('../images/rentalscape-header-min.png') no-repeat;
  background-attachment: fixed;
  min-height:50vh;
  background-size: 100% auto;
}


.parallax-2{
  /* The image used */
  background: url('../images/placer-header-min.png') no-repeat;
  background-attachment: fixed;
  min-height:50vh;
  background-size: 100% auto;
}


.parallax-3{
  background: url('../images/ar-gamedesign-min.png') no-repeat;
  background-attachment: fixed;
  min-height:50vh;
  background-size: 100% auto;
}

.parallax-4{
  background: url('../images/burrito-header-min.png') no-repeat;
  background-attachment: fixed;
  min-height:50vh;
  background-size: 100% auto;
}

.parallax-5{
  background: url('../images/header-ds-min.png') no-repeat;
  background-attachment: fixed;
  min-height:50vh;
  background-size: 100% auto;
}

.parallax-6{
	background: url('../images/AAC-Header-min.jpg') no-repeat;
	background-attachment: fixed;
	min-height:50vh;
	background-size: 100% auto;
  }

.parallax-7{
	background: url('../images/HP-enduser-header.jpg') no-repeat;
	background-attachment: fixed;
	min-height:50vh;
	background-size: 100% auto;
	box-shadow: inset 0px -20px 40px -15px rgba(0, 0, 0, 0.04);
  }

 .parallax-8{
	background: url('../images/HP-cloud-header.jpg') no-repeat;
	background-attachment: fixed;
	min-height:50vh;
	background-size: 100% auto;
	box-shadow: inset 0px -20px 80px -15px rgba(0, 0, 0, 0.04);
  }

  .parallax-9{
	background: url('../images/HP-portal-header.jpg') no-repeat;
	background-attachment: fixed;
	min-height:50vh;
	background-size: 100% auto;
	box-shadow: inset 0px -20px 80px -15px rgba(0, 0, 0, 0.04);
  }


@media screen and (max-width: 1280px) { 
	.parallax-1,.parallax-2,.parallax-3,.parallax-4,.parallax-5,.parallax-6, .parallax-7,.parallax-8,.parallax-9{
	  min-height:26vh;
	}
}

@media screen and (max-width: 768px) { 
    .parallax-7, .parallax-8, .parallax-9 {
        min-height: 20vh;
    }
}

@media screen and (max-width: 520px) { 
	.parallax-1,.parallax-2,.parallax-3,.parallax-4,.parallax-5,.parallax-6, .parallax-7,.parallax-8,.parallax-9{
	  min-height:16vh;
	}
}

/*--------------------------------------------------------------------------
	0.4 Spacer
--------------------------------------------------------------------------*/


.spacer{
	height: 6vh;
}

.spacer-lg{
	height: 12vh;
}

.spacer-sm{
	height: 3vh;
}

.spacer-xs{
	height: 1vh;
}

.sleek-line {
    border: 0; /* Kills the default 3D look */
    height: 1px; /* Sets the thickness */
    background: rgba(0, 0, 0, 0.1); /* Very subtle grey (10% opacity) */
    margin: 6vh 0; /* Adds the breathing room you need */
}

/*--------------------------------------------------------------------------
	0.4 Back to Top and Nav Bar
--------------------------------------------------------------------------*/

.nav-up {
    top: -46px;

}

.nav-down{
	background: "transparent";
}



header {
    height: 46px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color:"transparent";

    -webkit-transition: background-color 1000ms ease-in-out;
    -ms-transition: background-color 1000ms ease-in-out;
    transition: background-color 1000ms ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.header-menu {
  padding-left: 2vw;
  padding-right: 2vw;
}

.header-menu h1{
  font-size: 1.6em; 
  display: inline-block; 
  line-height: 48px;
}

.header-menu h6{
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
  line-height: 48px;
  float: right;
  padding-left: 16px;
}


.header-menu a{
  border-bottom-color: transparent;
  text-decoration: none;
}

.header-menu h6> a{
  position: relative;
}

/*.header-menu h6> a:hover{
  color: #C89E74;
}
*/

.header-menu h6> a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -0.8vh;
  left: 0;
  background-color: #333;
/*  visibility: hidden;*/
  -webkit-transition: ease all .3s;;
  transition: ease all .3s;;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.header-menu h6> a:hover:before {

/*  visibility: visible;*/
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* return to top
/* ========================================== */


.gotop{ 
  display:block;  
  width:40px; 
  height:40px;
  position:fixed;  
  bottom:6vh;  
  right:3vw; 
  border-style: hidden hidden solid hidden; 
  border-width: 2px;
  border-color: #232323;
  background-color:transparent;  
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
  opacity: 0;
}

.gotop img {
    color: #232323;
    position: relative;
    width: 40px;
    text-align: center;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.gotop:hover img {
/*    color: #C89E74;*/
  transform: translate(0,-10px);
}

.image {
	margin-top: 0.3vh;

}

@media screen and (max-width: 813px) {
	.image{
	margin-top: 0;
	}
}


.swiper-container {
      width: 100%;
      height: 100%;
	  overflow-x: hidden;
}

.swiper-scroller{
	width: 100%;
	height:54vh;
	overflow: scroll;
}


--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

body {
	font-family: "Source Sans 3", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
	/* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 767px) { 
	body {
		font-size: 12px;
		line-height: 23px;
	}
}

p, li{
	font-family: 'Source Sans 3', sans-serif;
	color: #000;
	opacity: 0.85;
}

/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 600; 
font-family: 'Zalando Sans SemiExpanded', sans-serif;}



/* Links */
a,
a:visited {
	color: #424242;
	text-decoration: none;
	outline: 0;
}

a:hover,
a:focus { color: black; }
p a,
p a:visited { line-height: inherit; }



/* Visibility */
.hide { display: none !important; }



/* Selection Highlighted Text */
::selection {
	background: #3676BC;
	color: white;
	text-shadow: none;
}

::-moz-selection {
	background: #3676BC;
	color: white;
	text-shadow: none;
}



/* Formatting */
em,
i,
.italic { font-style: italic; }
b, strong { font-weight: bold; }

.underline {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid #3676BC;
}



/* Colors */
.font-color-primary { color: #3676BC;; }
.background-color-primary { background: #3676BC; }

.font-color-secondary { color: #a33; }
.font-color-black { color: black; }
.font-color-white { color: white; }
.background-color-white { background: white; }






/*--------------------------------------------------------------------------
	3. Pages
--------------------------------------------------------------------------*/

	/*---------------------------------------------------
			3.0 Common Elements
	---------------------------------------------------*/

	/* Responsive images */
	img { width: 100%; }



	/* Used to remove whitespace below an image */
	.remove-line-height { line-height: 0; }



	/* Vertical spacing */
	.padding-vertical { 
		padding-top: 50px; 
		padding-bottom: 50px;  
	}



	/* Used frequently to apply a light border on top */
	.border-top {
		border-top: 1px solid #f5f5f5;
		padding-top: 30px;
	}


	/* Used frequently to apply a light border on top */
	.border-bottom {
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 30px;
	}


	/* Used frequently to apply a light border on top */
	.border-top-noline {
		padding-top: 10vh;
	}



	/* Featured image */
	.post img.featured { margin-bottom: 50px; }



	/* Buttons */
	button,
	.button,
	a.button {
		color: white;
		background: #3676BC;
		font-size: 14px; 
		font-weight: bold; 
		text-align: center;
		padding: 20px 25px 18px 25px;
		border-bottom: 2px solid #3676BC; 
		cursor: poSource Sans 3;
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
		border-radius: 4px;
	}

		button.small,
		.button.small,
		a.button.small {
			font-size: 14px;
			line-height: 24px;
			padding: 16px 24px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-ms-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
		}

		button.full,
		.button.full,
		a.button.full {
			display: block;
			width: 100%;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
			padding: 30px 40px 26px 40px;
			border-bottom: 4px solid #3676BC; 
		}

			button:hover,
			.button:hover,
			a.button:hover { background: #3676BC; }

			button.black,
			.button.black,
			a.button.black {
				color: white;
				background: #000; 
				border-color: #111; 
			}

			button.black:hover,
			.button.black:hover,
			a.button.black:hover {
				color: #3676BC;
				background: #111;
			}



	/* Forms */
	form p,
	label,
	legend {
		font-size: 16px;
		line-height: 24px;
	}

	label {
		display: block;
		color: #111;
		font-size: 13px;
		line-height: 23px;
		margin: 20px 0;
	}

	input[type=text],
	input[type=url],
	input[type=tel],
	input[type=number],
	input[type=color],
	input[type=email], 
	input[type=password], 
	textarea,
	select {
		width: 100%;
		padding: 20px 25px;
		color: #111;
		margin: 0 0 15px 0;
		border: 1px solid #ddd;
		outline: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

		input[type=text]:focus,
		input[type=url]:focus,
		input[type=tel]:focus,
		input[type=number]:focus,
		input[type=color]:focus,
		input[type=email]:focus, 
		input[type=password]:focus, 
		textarea:focus,
		select:focus {
			color: #3676BC;
			border: 1px solid #3676BC;
		}



	/* Placeholder */
	::-webkit-input-placeholder { color: #ddd; }
	::-moz-placeholder { color: #ddd; }
	:-ms-input-placeholder { color: #ddd; }
	input:-moz-placeholder { color: #ddd; }



	/* Input - submit */
	input[type=submit] {
		border: none; 
	}



	/* Required */
	span.required { color: #3676BC; }



	/* Page elements */
	.page p.title-desc {
		color: #ddd;
		font-weight: bold;
		margin-top: 0;
	}

	.page p.page-desc {
		color: #222;
		font-family: 'Roboto Slab', Georgia, serif;
		font-size: 34px;
		line-height: 60px;
		font-weight: 300; 
		margin-top: 30px;
		margin-bottom: 50px;
	}

		@media screen and (max-width: 767px) { 
			.page p.page-desc {
				font-size: 24px;
				line-height: 42px;
			}
		}

		@media screen and (max-width: 479px) { 
			.page p.page-desc {
				font-size: 20px;
				line-height: 36px;
			}
		}

	.page p { margin-top: 30px; }



	/* Sidebar (sticky) */
	.sidebar { padding-bottom: 20px; }

		.sidebar.sticked {
			background: white; 
			display: none;
			padding: 0 20px 20px 20px;
		}

			.sidebar.sticked h3.border-top { border-top: 0; }



	/* Page Navigation */
	.nav-pages {
		font-size: 11px;
		margin-top: 30px;
	}

		.nav-pages a.link-prev,
		.nav-pages a.link-next {
			color: #555;
			text-transform: uppercase;
			letter-spacing: 2px;
			text-align: center;
			padding: 25px 0;
			display: block;
			width: 50%;
			float: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

			.nav-pages a.link-prev span,
			.nav-pages a.link-next span {
				display: inline-block;
				padding-bottom: 4px;
				border-bottom: 1px solid #555555;
			}

			.nav-pages a.link-prev div { padding-right: 33.33333333%; }
			
			@media screen and (min-width: 1300px) { 
				.nav-pages a.link-prev div { padding-right: 50%; }
			}

			@media screen and (max-width: 959px) { 
				.nav-pages a.link-prev div { padding-right: 0%; }
			}

			.nav-pages a.link-next div { padding-left: 33.33333333%; }

			@media screen and (min-width: 1300px) { 
				.nav-pages a.link-next div { padding-left: 50%; }
			}

			@media screen and (max-width: 959px) { 
				.nav-pages a.link-next div { padding-left: 0%; }
			}

			.nav-pages a:hover { color: #3676BC; }

				.nav-pages a:hover span { border-bottom-color: #3676BC; }

			.container .nav-pages a.link-prev,
			.container .nav-pages a.link-next { padding: 20px 0; }
			.container .nav-pages a.link-prev { text-align: left; }
			.container .nav-pages a.link-next { text-align: right; }




	/*---------------------------------------------------
			3.1 Navigation
	---------------------------------------------------*/

	ul#nav {
		font-size: 12px;
		line-height: 21px;
		font-weight: bold;
		overflow: visible;
	}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		ul#nav {
			font-size: 11px;
			line-height: 21px;
		}
	}

	@media screen and (max-width: 767px) { 
		ul#nav { display: none; }
	}

	ul#nav li { position: relative; }

		ul#nav li ul a {
			color: #555;
			padding: 25px 0;
/*			border-bottom: 1px solid #222;*/
		}

	ul#nav > li {
		zoom: 1;
		width: 25%;
		display: inline;
		float: left;
	}

		ul#nav > li a {
			color: #929692;
			display: block;
			padding: 18px 0 15px 0;
			margin: 0 20px;
/*			border-bottom: 1px solid #f5f5f5;*/
		}

			ul#nav > li a span.count {
				color: #ddd;
				display: block;
				font-size: 11px;
			}

		ul#nav > li a:hover {
			color: white;
			border-bottom: none;
		}

			ul#nav > li a:hover span.count { color: white; }

	ul#nav > li:hover,
	ul#nav > li.hover {
		background: #111;
		margin: 0;
	}

		ul#nav > li:hover a,
		ul#nav > li.hover a {
			color: white;
			border-bottom: none;
		}

			ul#nav > li:hover a span.count,
			ul#nav > li.hover a span.count { color: white; }

		ul#nav > li:hover ul li:last-child > a,
		ul#nav > li.hover ul li:last-child > a,
		ul#nav > li:hover ul li.last-child > a,
		ul#nav > li.hover ul li.last-child > a { border-bottom: none; }

	ul#nav > li.hasChild:hover a,
	ul#nav > li.hasChild.hover a { border-bottom: 1px solid #222; }

	ul#nav li ul {
		background: #111;
		width: 100%;
		visibility: hidden;
		position: absolute;
		z-index: 10;
		top: 100%;
		left: 0px;
	}

		ul#nav li:hover > ul,
		ul#nav li.hover > ul {
			visibility: visible;
		}
		
		ul#nav li ul a:hover,
		ul#nav li ul a:focus {
			color: #3676BC;
/*			border-bottom: 1px solid #222;*/
		}

		ul#nav li ul li:last-child > a,
		ul#nav li ul li.last-child > a { border-bottom: none; }

	ul#nav > li ul ul {
		position: absolute;
		top: 0;
		left: 100%;
	}



	/* Mobile Menu */
	#menu-mobile-wrapper { display: none; }

	@media screen and (max-width: 767px) { 
		#menu-mobile-wrapper { display: block; }
	}

	#menu-mobile-wrapper #toggle-menu {
		cursor: poSource Sans 3;
		color: #222;
		display: block;
		font-size: 15px;
		font-family: 'Source Sans 3', sans-serif;
		line-height: 25px;
		padding: 20px 0 20px 30px;
		background: url('../images/menu_open.png') no-repeat left center;
		border-bottom: 1px solid #f5f5f5;
	}

	#menu-mobile-wrapper.toggle-open #toggle-menu { background-image: url('../images/menu_closed.png'); }
	#menu-mobile-wrapper ul#menu-mobile {
		display: none;
		margin-bottom: 15px;
		overflow: hidden;
	}

		#menu-mobile-wrapper ul#menu-mobile li {
			font-size: 12px;
			line-height: 21px;
			display: block;
		}

			#menu-mobile-wrapper ul#menu-mobile li a {
				color: #444;
				display: block;
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;
			}

			#menu-mobile-wrapper ul#menu-mobile li a:hover { color: #3676BC; }




	/*---------------------------------------------------
			3.2 Header
	---------------------------------------------------*/
	
	#header .logo-wrap { padding: 40px 0 40px 0; }

	#header h1 {
		font-size: 24px;
		line-height: 34px;
		font-weight: bold;
	}

	#header p.site-desc {
		color: #929692;
		font-size: 12px;
		line-height: 19px;
	}

	#header {
		background: rgba(0, 0, 0, 0)
	}




	/*---------------------------------------------------
			3.3 Home
	---------------------------------------------------*/
	
	/* Recent Posts */
	.box-recent h3 {
		font-size: 16px;
		line-height: 26px;
		padding: 30px 0 20px 0;
	}

		.box-recent h3 a { color: #ddd; }

	.box-recent a.permalink {
		display: block;
		border-top: 1px solid #eee;
	}

		.box-recent a.permalink h4 {
			color: #444; 
			font-size: 22px;
			line-height: 36px;
			font-weight: normal;
			margin-bottom: 5px;
		}

			.box-recent a.permalink:hover h4 {
				color: #3676BC; 
			}

		.box-recent a.permalink p.meta { color: #3676BC; }

			.box-recent a.permalink p.meta span { color: #929692; }

	.box-recent a.permalink:hover {
		color: #3676BC;
		border-top: 1px solid #3676BC;
	}

		.box-recent a.permalink:hover p.meta span { color: #3676BC; }
	
	.box-recent .item { padding: 20px 0; }
	
	@media screen and (max-width: 767px) { 
		.box-recent a.permalink h4 {
			font-size: 16px;
			line-height: 26px;
		}
	}
	


	/* About box */
	.box-about { 
		margin-top: 30px; 
	}

		.box-about h3 { margin-bottom: 50px; }

		.box-about p.tagline {
			font-family: 'Roboto Slab', Georgia, serif;
			font-size: 24px;
			line-height: 44px;
			font-weight: 300; 
			margin-top: 30px;
			margin-bottom: 30px;
		}

	@media screen and (max-width: 767px) { 
		.box-about p.tagline {
			font-size: 20px;
			line-height: 36px;
		}
	}




	/*---------------------------------------------------
			3.4 About
	---------------------------------------------------*/


	#about ul{
		list-style-type:circle;
		padding-left: 16px;
	}

	#about li{
		line-height: 32px;

	}

	#about h2 { padding-top: 30px; }

	#about .services h1 {
		font-size: 72px;
		line-height: 72px;
		padding: 6px 0;
		font-weight: 700;
	}

	#about .services h2 {
		font-size: 24px;
		line-height: 36px;
		padding: 10px 0;
		letter-spacing: 0px;
	}

	#about .services h3 {
		font-size: 28px;
		line-height: 40px;
		padding: 6px 0;
	}

	#about .services .item { padding: 16px 0; }

	#about .services h4 {
		font-size: 16px;
		line-height: 26px;
		display: inline-block;
		padding-bottom: 5px;
	}


	#about .services h5 {
		font-size: 18px;
		line-height: 32px;
		display: inline-block;
		font-weight: 400;
	}


	#about .services h6 {
		font-size: 18px;
		line-height: 24px;
		display: inline-block;
	}

	#about .services p {
		font-size: 18px;
		line-height: 32px;
		margin: 10px 0;
	}

	#about .services p.caption {
		font-weight: 300;
		color: #313A5B;
		font-size:16px;
		line-height: 24px;

	}

	@media screen and (max-width: 767px) {

		#about .services h3 {
		font-size: 20px;
		line-height: 30px;
		padding: 2px 0;
		}

		#about .services p {
			font-size: 14px; 
			line-height: 24px; 
		}

		#about .services h1 {
			font-size: 32px;
			line-height: 32px;
		}

		#about .services h2 {
			font-size: 18px;
			line-height: 26px;
		}

		#about .services h6 {
			font-size: 14px;
			line-height: 24px;
		}


		#about .services h5 {
			font-size: 18px;
			line-height: 24px;
		}

	}


	/*---------------------------------------------------
			3.5 Works
	---------------------------------------------------*/
	#works h1{
		font-size: 220%;
		line-height: 1.5;
		font-weight: 300;
		color: #222;
	}
	
	#works .item { margin-bottom: 40px; }

		#works .item h3 {
			color: #555;
			font-size: 1rem;
			line-height: 2;
		}

		#works a.permalink:hover h3 { color: #111; }

	#works .item span.category {
		color: #929692;
		display: block;
		font-size: 0.9rem;
		line-height: 1.6;
		margin-bottom: 1vh;
		font-family: "Source Sans 3";
	}

		#works a.permalink:hover span.category { color: #3676BC; }

	#works .item p.excerpt {
		font-size: 13px;
		line-height: 18px;
		margin-top: 10px;
	}

	/* Stackgrid */
	#works.stackgrid .item {
		width: 25%;
		float: left;
		margin-bottom: 0;
		position: relative;
	}

		#works.stackgrid .item img {
			width: 100%; 
		}

	@media screen and (min-width: 1600px) { 
		#works.stackgrid .item { width: 20%; }
	}

	@media screen and (min-width: 960px) and (max-width: 1599px) { 
		#works.stackgrid .item { width: 25%; }
	}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		#works.stackgrid .item { width: 33.333333%; }
	}

	@media screen and (min-width: 480px) and (max-width: 767px) { 
		#works.stackgrid .item { width: 50%; }
	}

	@media screen and (max-width: 479px) { 
		#works.stackgrid .item { width: 100%; }
		#works h1{font-size: 200%; font-weight: 500;}
		img.logo{width:70%}
	}

	#works.stackgrid .item .box-desc {
		padding: 15px 30px;
		text-align: center;
	}

	#works.stackgrid.images-only {
		/* Navigation */
		margin-top: 0;
	}

		#works.stackgrid.images-only .item .box-desc {
			display: none;
			text-align: left;
			padding: 25px 30px;
			background: url('../images/alpha/bg_alpha60.png');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
			
			#works.stackgrid.images-only .item .box-desc h3 { color: white; }

		#works.stackgrid.images-only .nav-pages { margin-top: 0; }

			#works.stackgrid.images-only .nav-pages a.link-prev,
			#works.stackgrid.images-only .nav-pages a.link-next { border-top: none; }

		#works.stackgrid.images-only a.link-prev,
		#works.stackgrid.images-only a.link-next { border-top: none; }

			#works.stackgrid .item .box-desc span.category {
				margin-bottom: 2px;
			}


	
	/* Single */
	#works.single {
	
	}

		#works.single img { 
			margin-bottom: 60px; 
		}

		#works.single .box-info {
			margin-bottom: 25px; 
			font-size: 16px;
			line-height: 28px;
			color: #313A5B;
		}
			
			#works.single .box-info p.project-desc {
				margin-top: 4px; 
			}

			#works.single .box-info h4 {
				font-size: 12px;
				line-height: 22px;
				display: inline-block;
				text-transform: uppercase;
				letter-spacing: 1px;
				font-weight: 700;
			}

				#works.single .box-info h4.border-top {
					padding-top: 20px; 
				}

			#works.single .box-info p {
				margin-top: 12px; 
				letter-spacing: 0.02em;
			}

			@media screen and (max-width: 767px) {
				#works.single .box-info p {
					font-size: 12px; 
					line-height: 24px; 
				}
			}




	/*---------------------------------------------------
			3.6 Shop
	---------------------------------------------------*/
	

	/* Shop */
	#shop h2 {
		font-size: 16px; 
		line-height: 26px; 
		margin-bottom: 30px;
	}

		#shop .shop-info p {
			color: #111; 
			font-size: 13px; 
			line-height: 26px; 
			margin-top: 20px; 
		}

	
	@media screen and (min-width: 960px) {
		#shop .shop-info h2 {
			margin-bottom: 40px; 
		}

		#shop .shop-info p {
			margin-top: 40px; 
		}
	}


	#shop .cart-item {
		font-size: 12px;
		line-height: 22px;
		margin-bottom: 40px; 
	}

	#shop .cart-item .item-info {
		margin-top: 15px; 
	}

		#shop .cart-item .item-name {
			width: 55%;
			float: left; 
		}

			#shop .cart-item .item-name h4 {
				color: #929692;
				font-weight: bold;
			}

			#shop .cart-item .item-name span.category {
				color: #929692;
			}

		#shop .cart-item .item-price {
			color: #222;
			width: 30%;
			float: right;
			text-align: right;
			border-left: 1px solid #f5f5f5;
		}

			#shop .cart-item .item-price span.markdown {
				color: #929692;
				text-decoration: line-through;
				display: block;
			}

			#shop .cart-item .item-price span.item_price {
				color: #f54;
				display: block;
			}

		#shop .cart-item a:hover .item-name h4 { 
			color: #222; 
		}

		#shop .cart-item a:hover .item-name span.category { 
			color: #999; 
		}

		#shop .cart-item a:hover .item-price { 
			border-color: #ddd;
		}



	@media screen and (max-width: 767px) {

		#shop .cart-item {
			font-size: 11px;
			line-height: 21px;
		}

			#shop .cart-item .item-info {
				margin-top: 10px; 
			}

				#shop .cart-item .item-name {
					width: 100%;
					float: none;
				}

				#shop .cart-item .item-price {
					width: 100%;
					float: none;
					text-align: left;
					border-left: none;
				}
	}

	form#item-selection {
		margin-top: 30px;
		margin-bottom: 10px; 
	}

	h2.item-name {
		position: relative; 
	}

		h2.item-name span.item-price {
			color: #ff5544;
			float: right; 
		}

	#shop .sidecart {
		padding-bottom: 20px; 
	}

	#shop .sidecart span.simpleCart_quantity {
		font-weight: bold; 
	}

	#shop .sidecart h2 a:hover {
		color: #3676BC; 
	}
	
	#shop .sidecart h4 {
		color: #929692; 
	}

		#shop .sidecart h4 a {
			background: url('../images/icons/icon_cart_white.png') no-repeat 20px center;
			display: block;
		}

		#shop .sidecart p.desc {
			color: #929692; 
			margin-top: 20px; 
		}

	section#cart h3 { padding: 30px 0; }

		section#cart h3 a { color: #333; }

	section#cart .sidebar p.title-desc { margin-bottom: 20px; }

	#shop p.vertical-divider,
	#cart p.vertical-divider {
		color: #ddd;
		font-size: 16px;
		font-style: italic;
		font-weight: bold;
		text-align: center;
		padding: 15px 0;
	}




	
	/* Cart */
	.table-cart {

	}

	.cart-header {
		font-weight: bold; 
	}

		.cart-header > div {
			padding: 20px 0; 
			border-top: 1px solid #f5f5f5; 
			border-bottom: 1px solid #f5f5f5;
		}

	.product-item {
		margin-top: 20px; 
	}

		.product-item:after {
			content: "."; 
			visibility: hidden; 
			display: block; 
			height: 0; 
			clear: both;
		}

	/* Cart - for a width of 660px */
	.product-thumbnail,
	.product-name,
	.product-price,
	.product-quantity,
	.product-subtotal,
	.product-remove {
		float: left; 
	}

	.product-thumbnail {
		width: 100px; 
	}

	.product-name {
		width: 200px; 
		margin-left: 20px; 
	}

	.product-price {
		width: 80px; 
		margin-left: 20px; 
	}

	.product-quantity {
		width: 60px; 
		margin-left: 20px; 
	}

	.product-subtotal {
		width: 80px; 
		margin-left: 20px; 
	}

	.product-remove {
		width: 60px;
		margin-left: 20px; 
	}


	@media screen and (min-width: 1300px) {
		.product-name {
			width: 260px; 
		}

		.product-price {
			width: 100px; 
		}

		.product-quantity {
			width: 100px; 
		}

		.product-subtotal {
			width: 100px; 
		}

		.product-remove {
			width: 100px;
		}
	}




	#checkout {

	}

	#checkout label {
		display: block;
		color: #111;
		font-size: 13px;
		line-height: 23px;
		margin: 10px 0 6px 0;
	}

	#checkout input[type=text],
	#checkout input[type=url],
	#checkout input[type=tel],
	#checkout input[type=number],
	#checkout input[type=color],
	#checkout input[type=email], 
	#checkout input[type=password], 
	#checkout textarea,
	#checkout select {
		width: 100%;
		color: #111;
		background: #f5f5f5; 
		padding: 20px 25px;
		margin: 0 0 12px 0;
		border: 1px solid #ddd;
		outline: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

		#checkout input[type=text]:focus,
		#checkout input[type=url]:focus,
		#checkout input[type=tel]:focus,
		#checkout input[type=number]:focus,
		#checkout input[type=color]:focus,
		#checkout input[type=email]:focus, 
		#checkout input[type=password]:focus, 
		#checkout textarea:focus,
		#checkout select:focus {
			color: #3676BC;
			background: white; 
			border: 1px solid #3676BC;
		}



	/* Placeholder */
	#checkout ::-webkit-input-placeholder { color: #ddd; }
	#checkout ::-moz-placeholder { color: #ddd; }
	#checkout :-ms-input-placeholder { color: #ddd; }
	#checkout input:-moz-placeholder { color: #ddd; }



	/* Input - submit */
	#checkout input[type=submit] {
		border: none; 
	}



	/*---------------------------------------------------
			3.7 Archive (Blog)
	---------------------------------------------------*/
	
	#archive .entry { margin-bottom: 80px; }
	#archive .entry .box-content { padding-top: 30px; }
	


	/* Meta */
	#archive .box-meta {
		padding-top: 30px; 
	}

		#archive .box-meta span.category,
		#archive .box-meta span.date {
			color: #929692;
			font-size: 12px;
			line-height: 22px;
		}
		
		#archive .box-meta span.category {
			color: #333;
			font-weight: bold;
		}

	

	/* Tags */
	#archive .entry .box-tags {
		margin-top: 30px; 
	}

	#archive .entry h4 {
		font-family: 'Roboto Slab', Georgia, serif;
		font-size: 26px;
		line-height: 40px;
		font-weight: 300; 
		margin-bottom: 28px;
	}

	#archive .entry p {
		color: #111;
		margin-top: 40px;
		font-size: 16px;
		line-height: 32px;
	}

		#archive .entry a:hover h4 { 
			color: #3676BC; 
		}

		#archive .entry a:hover p { 
			color: #111; 
		}

	#archive .entry .box-tags h5 {
	}

	#archive .entry p.tags {
		font-size: 12px; 
		line-height: 22px; 
		margin-top: 0; 
	}

		#archive .entry p.tags a {
			color: #111; 
			display: inline-block; 
			padding-bottom: 3px; 
			border-bottom: 1px solid #111; 
			margin-right: 5px; 
		}

			#archive .entry p.tags a:hover {
				color: #3676BC; 
				border-bottom: 1px solid #3676BC; 
			}

	@media screen and (max-width: 959px) { 
		#archive .entry p {
			font-size: 13px;
			line-height: 25px;
		}

		#archive .entry .box-content { border-top: none; }
	}



	/* BLockquote */
	#archive .entry blockquote {
		margin-bottom: 15px; 
	}

		#archive .entry blockquote p {
			font-family: 'Roboto Slab', Georgia, serif;
			font-size: 36px;
			line-height: 60px;
			font-style: italic; 
			font-weight: 300;
			margin-bottom: 10px;
		}

		#archive .entry blockquote footer { 
			color: #3676BC;  
			font-size: 12px; 
			line-height: 22px; 
			font-style: italic; 
			display: inline-block; 
			margin-top: 10px; 
			padding-top: 4px; 
			border-top: 1px solid #3676BC; 
		}

	@media screen and (max-width: 959px) { 
		#archive .entry blockquote p {
			font-size: 22px;
			line-height: 40px;
		}
	}




	/*---------------------------------------------------
			3.8 Contact
	---------------------------------------------------*/

	section#contact { /* Register Form */:  }

		section#contact p.title-desc { margin-bottom: 40px; }

		section#contact form { margin-bottom: 40px; }

		section#contact #contact-warning {
			color: white;
			background: #ee3a22;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact #contact-success {
			color: #3676BC;
			background: #111;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact .box-contact {
			font-size: 14px;
			line-height: 28px;
			background-size: cover;
		}

			section#contact .box-contact h3 {
				color: #3676BC;
				font-size: 14px;
				line-height: 24px;
				font-weight: normal;
				margin-bottom: 15px;
			}

			section#contact .box-contact p { margin-top: 0; }

		
		@media screen and (max-width: 767px) { 
			section#contact .box-contact {
				font-size: 12px; 
				line-height: 24px; 
				margin-bottom: 30px; 
			}
		}

		@media screen and (max-width: 479px) { 
			section#contact .box-contact {
				font-size: 11px; 
				line-height: 22px; 
			}
		}
		


		/* Map */
		section#contact #map {
			height: 500px;
			margin-bottom: 30px;
		}




	/*---------------------------------------------------
			3.9 Footer
	---------------------------------------------------*/

	#footer {
		font-size: 13px;
		line-height: 24px;
		padding: 30px 0;
	}

		#footer p { margin-top: 30px; }

			#footer p a { color: #3676BC; }

		#footer ul#social li {
			display: inline-block;
			float: left;
		}

			#footer ul#social li a {
				display: block;
				padding: 30px 40px 30px 0;
			}

		@media screen and (max-width: 767px) { 
			#footer ul#social {
				margin-top: 30px; 
			}
			#footer ul#social li {
				display: block;
				float: none;
			}

				#footer ul#social li a {
					display: block;
					padding: 20px 0; 
					border-top: 1px solid #eee; 
				}
		}





/*--------------------------------------------------------------------------
	4. jQuery Plugins
--------------------------------------------------------------------------*/

	/*---------------------------------------------------
			4.1 iosSlider
	---------------------------------------------------*/

	.containerOuter {
		background: #111;
		height: 357px;
		overflow: hidden;
	}

	.iosContainer {
		position: relative;
		width: 100%;
		height: 357px;
		margin: 0 auto;
		overflow: visible;
	}

		.iosContainer .iosSliderContainer {
			width: 100%;
			height: 357px;
			margin: 0;
			overflow: visible;
		}

	.iosSlider {
		position: relative;
		top: 0;
		left: 0;
		overflow: visible;
		width: 100%;
		height: 357px;
	}

		.iosSlider .slider {
			width: 10000px;
			height: 100%;
		}

			.iosSlider .slider .item {
				float: left;
				width: 920px;
				height: 100%;
			}
				.iosSlider .slider .item img { width: 100%; }

	.iosThumb2Load {
		height: 93px;
		background: #111;
	}

		.iosThumb2Load .slider {
			width: 100%;
			height: 100%;
		}

		.iosThumb2Load .button-thumb {
			float: left;
			margin: 0;
			width: 240px;
			height: 93px;
			opacity: 0.5;
			-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(50));
			filter: alpha(opacity = (50));
		}

		.iosThumb2Load .selected {
			opacity: 1;
			-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
			filter: alpha(opacity = (100));
		}

	@media screen and (min-width: 1300px) { 
		.iosSlider .slider .item { width: 1160px; }
		.containerOuter,
		.iosContainer,
		.iosContainer .iosSliderContainer,
		.iosSlider { height: 450px; }
	}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		.iosSlider .slider .item { width: 660px; }
		.containerOuter,
		.iosContainer,
		.iosContainer .iosSliderContainer,
		.iosSlider { height: 256px; }
	}

	@media screen and (max-width: 767px) { 
		.iosSlider .slider .item { width: 280px; }
		.containerOuter,
		.iosContainer,
		.iosContainer .iosSliderContainer,
		.iosSlider { height: 109px; }
		.iosThumb2Load {
			visibility: hidden;
			margin: 0;
			height: 0;
		}
	}

	@media screen and (min-width: 480px) and (max-width: 767px) { 
		.iosSlider .slider .item { width: 400px; }
		.containerOuter,
		.iosContainer,
		.iosContainer .iosSliderContainer,
		.iosSlider { height: 150px; }
		.iosThumb2Load {
			visibility: hidden;
			margin: 0;
			height: 0;
		}
	}



	/*---------------------------------------------------
			4.2 FlexSlider
	---------------------------------------------------*/
	/*
	* 	jQuery FlexSlider v2.0
	* 	http://www.woothemes.com/flexslider/
	*
	* 	Copyright 2012 WooThemes
	* 	Free to use under the GPLv2 license.
	* 	http://www.gnu.org/licenses/gpl-2.0.html
	*
	* 	Contributing author: Tyler Smith (@mbmufffin)
	*/

	/* FlexSlider Necessary Styles
	*********************************/


	#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
	}

	@-webkit-keyframes slide {
	    100% { left: 0; }
	}

	@keyframes slide {
	    100% { left: 0; }
	}

	
	.flexslider .slides > div {
		display: none;
		-webkit-backface-visibility: hidden;
	}

	/* Hide the slides before the JS is loaded. Avoids image jumping */
	.flexslider .slides img {
		display: block;
		width: 100%;
	}

	.flex-pauseplay span { text-transform: capitalize; }

	/* Clearfix for the .slides element */
	.slides:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

	html[xmlns] .slides { display: block; }
	* html .slides { height: 1%; }
	


	/* FlexSlider for TypeFolio
	*********************************/
	.flexslider {
		position: relative;
		zoom: 1;
		overflow: hidden;
	}

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

	.loading .flex-viewport { max-height: 300px; }

	.flexslider .slides { zoom: 1; }

	/* Direction Nav */
	.flex-direction-nav { *height: 0; }

		.flex-direction-nav a {
			width: 30px;
			height: 30px;
			margin: -20px 0 0;
			display: block;
			background: url(../images/bg_direction_nav.png) no-repeat 0 0;
			position: absolute;
			top: 50%;
			z-index: 10;
			cursor: poSource Sans 3;
			text-indent: -9999px;
			opacity: 0;
			-webkit-transition: all .3s ease;
		}

		.flex-direction-nav .flex-next {
			background-position: 100% 0;
			right: -36px;
		}

		.flex-direction-nav .flex-prev { left: -36px; }

	.flexslider:hover .flex-next {
		opacity: 0.8;
		right: 5px;
	}

	.flexslider:hover .flex-prev {
		opacity: 0.8;
		left: 5px;
	}

	.flexslider:hover .flex-next:hover,
	.flexslider:hover .flex-prev:hover { 
		opacity: 1;
	}

	.flex-direction-nav .flex-disabled {
		opacity: .3!important;
		filter: alpha(opacity=30);
		cursor: default;
	}

	/* Control Nav */
	.flex-control-nav {
		width: 100%;
		position: absolute;
		bottom: -40px;
		text-align: center;
	}

		.flex-control-nav li {
			margin: 0 6px;
			display: inline-block;
			zoom: 1;
			*display: inline;
		}

	.flex-control-paging li a {
		width: 11px;
		height: 11px;
		display: block;
		background: #666;
		background: rgba(0, 0, 0, 0.5);
		cursor: poSource Sans 3;
		text-indent: -9999px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		border-radius: 20px;
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.flex-control-paging li a:hover {
		background: #333;
		background: rgba(0, 0, 0, 0.7);
	}

	.flex-control-paging li a.flex-active {
		background: black;
		background: rgba(0, 0, 0, 0.9);
		cursor: default;
	}

	.flex-control-thumbs {
		margin: 5px 0 0;
		position: static;
		overflow: hidden;
	}

		.flex-control-thumbs li {
			width: 25%;
			float: left;
			margin: 0;
		}

		.flex-control-thumbs img {
			width: 100%;
			display: block;
			opacity: .7;
			cursor: poSource Sans 3;
		}

		.flex-control-thumbs img:hover { opacity: 1; }
		.flex-control-thumbs .flex-active {
			opacity: 1;
			cursor: default;
		}

	.flexslider-nav-carousel {
		background: #111;
		margin-bottom: 30px;
	}

	.item-nav {
		cursor: poSource Sans 3;
		padding: 27px 0;
		border-right: 1px solid #222; 
	}

		.item-nav h4 {
			color: #444;
			font-size: 20px;
			line-height: 30px;
		}

		.item-nav span.category {
			display: inline-block;
			color: #444;
			font-size: 11px;
			line-height: 21px;
			text-transform: uppercase; 
			letter-spacing: 2px; 
			margin-top: 10px; 
			border-top: 1px solid #333; 
			padding-top: 10px; 
		}

	.item-nav.flex-active {}

	.item-nav.flex-active h4 { 
		color: white; 
	}

	.item-nav.flex-active span.category { 
		color: #777; 
		border-top: 1px solid #3676BC; 
	}

	@media screen and (max-width: 860px) { 

		.flex-direction-nav .flex-prev {
			opacity: 1;
			left: 0;
		}
		.flex-direction-nav .flex-next {
			opacity: 1;
			right: 0;
		}

	}