/* SHORTCODES */

/* ALERTS */
.alert {
    position: relative; padding: 1.2em 2em; font-size: 14px; line-height: 1.4; margin-bottom: 2em; border: 3px solid #ffd460;
	}
.alert.success {
    border-color: #8EE1A8;
	}
.alert.error {
 	border-color: #FF6140;
	}

/* SOCIAL */
html a.social-link {
	display: inline-block; padding: 0; margin-bottom: -3px; margin: 0 .4em .3em 0; text-align: center; font-size: 13px; font-family: "fontello"; width: 40px; line-height: 38px; color: inherit; border: 1px solid rgba(28, 38, 43, 0.10); border-radius: 50%;
	}
a.social-link:hover {
	color: #fff;
	}
.social-link.facebook:before {
	content: '\e825'
	}
.social-link.twitter:before {
	content: '\e826'
	}
.social-link.flickr:before {
	content: '\e835'
	}
.social-link.rss:before {
	content: '\e82f'
	}
.social-link.dribbble:before {
	content: '\e82c'
	}
.social-link.lastfm:before {
	content: '\e82e'
	}
.social-link.linkedin:before {
	content: '\e827'
	}
.social-link.vimeo:before {
	content: '\e830'
	}
.social-link.forrst:before {
	content: '\e831'
	}
.social-link.skype:before {
	content: '\e832'
	}
.social-link.tumblr:before {
	content: '\e836'
	}
.social-link.behance:before {
	content: '\e82b'
	}
.social-link.blogger:before {
	content: '\e837'
	}
.social-link.delicious:before {
	content: '\e838'
	}
.social-link.digg:before {
	content: '\e839'
	}
.social-link.github:before {
	content: '\e82a'
	}
.social-link.wordpress:before {
	content: '\e83b'
	}
.social-link.google-plus:before {
	content: '\e801'
	}
.social-link.youtube:before {
	content: "\e834"
	}
.social-link.pinterest:before {
	content: "\e829"
	}
.social-link.instagram:before {
	content: "\e82d"
	}
.social-link.stack-overflow:before {
	content: "\e83c"
	}
.social-link.foursquare:before {
	content: "\e83d"
	}
.social-link.xing:before {
	content: "\e83e"
	}
.social-link.weibo:before {
	content: "\e83f"
	}
.social-link.soundcloud:before {
	content: "\e840"
	}
.social-link.fivehundredpx:before {
	content: "\e841"
	}
.social-link.slideshare:before {
	content: "\e842"
	}
.social-link.vine:before {
	content: "\e863"
	}
.social-link.vkontakte:before {
	content: "\e846"
	}
.social-link.spotify:before {
	content: "\e803"
	}
.social-link.facebook:hover {
	background-color: #3c5fac;
	}
.social-link.twitter:hover {
	background-color: #5ec3df;
	}
.social-link.flickr:hover {
	background-color: #FF0084;
	}
.social-link.rss:hover {
	background-color: #ff9900;
	}
.social-link.dribbble:hover {
	background-color: #EA4C89;
	}
.social-link.lastfm:hover {
	background-color: #D51007;
	}
.social-link.linkedin:hover {
	background-color: #2089b5;
	}
.social-link.vimeo:hover {
	background-color: #0dadd6;
	}
.social-link.google-plus:hover {
	background-color: #c63d2d;
	}
.social-link.forrst:hover {
	background-color: #5b9a68;
	}
.social-link.skype:hover {
	background-color: #00aff0;
	}
.social-link.picassa:hover {
	background-color: #ffd34e;
	}
.social-link.youtube:hover {
	background-color: #c8312b;
	}
.social-link.pinterest:hover {
	background-color: #cb2027;
	}
.social-link.tumblr:hover {
	background-color: #2C4762;
	}
.social-link.behance:hover {
	background-color: #3878F6;
	}
.social-link.blogger:hover {
	background-color: #fc9947;
	}
.social-link.delicious:hover {
	background-color: #3274d1;
	}
.social-link.digg:hover {
	background-color: #205891;
	}
.social-link.github:hover {
	background-color: #222;
	}
.social-link.wordpress:hover {
	background-color: #0083b3;
	}
.social-link.instagram:hover {
	background-color: #3f729b;
	}
.social-link.stack-overflow:hover {
	background-color: #F90;
	}
.social-link.foursquare:hover {
	background-color: #009FE0;
	}
.social-link.xing:hover {
	background-color: #006567;
	}
.social-link.weibo:hover {
	background-color: #E64141;
	}
.social-link.soundcloud:hover {
	background-color: #FA3219;
	}
.social-link.fivehundredpx:hover {
	background-color: #222;
	}
.social-link.slideshare:hover {
	background-color: #ED9D2C;
	}
.social-link.vine:hover {
	background-color: #00BF8F;
	}
.social-link.vkontakte:hover {
	background-color: #6383A8;
	}
.social-link.spotify:hover {
	background-color: #2ebd59;
	}

/* TABS */
.tabs {
 	font-size: 1em; margin-bottom: 2em;
	}
	.tabs .tab-titles {
 		padding: 0; margin: 0 0 -1px 0;
		}
		.tabs .tab-titles li {
 			display: inline-block
			}
			.tabs .tab-titles li a {
 				display: inline-block; padding: 1em 2em; font-weight: bold; font-size: 13px; letter-spacing: 0; border: 0; cursor: pointer;
				}
			.tabs .tab-titles li a.active {
 				border-bottom: 6px solid #555;
				}
	.tabs .tab-content {
 		margin-top: -1px; font-size: 14px; border: 1px solid #EAEEEF;
		}
		.tabs .tab-content > div {
 			padding: 1.8em; display: none;
			}
			
/* TOGGLES */
.toggle-group {
	margin-bottom: 2em;
	}
	.toggle h4 {
        position: relative; font-size: 13px; font-weight: 600; border-left: 0; padding: .9em 1em .6em 1.8em; margin: 0; cursor: pointer; border-bottom: 1px solid #F4F3EF;
		}
	.toggle h4.active {
 		 border-bottom: 0;
		}
	.toggle h4:before {
 		content: "\e823"; opacity: .6; position: absolute; top: 1em; left: 0; font-size: 14px; line-height: 1;
		}
	.toggle h4.active:before {
 		content: '\e89a'; 
		}
	.toggle .toggle-content {
        display: none; padding: 1.2em 0 2em 1.8em; font-size: 14px; border-bottom: 1px solid #eee;
		}

/* BUTTONS */
input[type=submit],
input[type=button],
button,
a.button {
 	display: inline-block; position: relative; padding: 1.1em 2em; margin-bottom: .25em; font-size: 11px; font-weight: bold; text-transform: uppercase; line-height: 1.2; letter-spacing: .08em; outline: 0; border: 2px solid #345; color: #345; text-shadow: none; background: none; border-radius: 0;
	}
input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover {
 	color: #fff; background-color: #8ACB82; border-color: transparent;
	}
input[type=submit]:active,
input[type=button]:active,
button:active,
a.button:active {
	opacity: .8;
	}
/* Large Buttons */
input[type=submit].big,
input[type=button].big,
button.big,
a.button.big {
 	font-size: 12px; padding: 1.5em 2.6em;
	}
/* Small Buttons */
input[type=submit].small,
input[type=button].small,
button.small,
a.button.small {
 	padding: .6em 1.4em; font-size: 11px;
	}
/* Buttons with icons */
input[type=submit] i,
input[type=button] i,
button i,
a.button i {
 	display: inline; line-height: 1; font-size: 16px; font-weight: bold; margin-right: .4em; margin-left: -0.35em; margin-bottom: -1em; vertical-align: middle;
	}
input[type=submit].big i,
input[type=button].big i,
button.big i,
a.button.big i {
 	top: .7em; left: 1.2em; font-size: 18px;
	}


/* TIMELINE */
.event {
	position: relative; padding: 0 1em 2em 3.2em;
	}
    .event:before { 
        content : ""; position: absolute; top: 10px; bottom: -10px; left: 12px; width: 4px; background: #F9F9F9;
        }
    .event:after { 
        content : ""; position: absolute; top: 6px; left: 7px; width: 14px; height: 14px; border-radius: 50%; background: #f1f1f1;
        }
	.event:nth-of-type(2):after {
        background-color: #8ACB82;
		}
    .event h2 {
 		font-size: 1em; font-weight: 400; letter-spacing: 1px;
		}
    .event h2 + p i,
	.event h2 + p img {
        display: block; text-align: center; font-size: 32px; font-weight: bold; position: absolute; top: -14px; left: -10px; width: 52px; line-height: 52px; margin: 0;  z-index: 120; color: #345; background: #fff;
        }
    .event h2 + p i:before {
        margin:0; 
        }	
    .event h2 + p img {
		padding: 10px; border-radius: 4px;
        }
	.event h3 {
        display: inline-block; position: relative; padding: 3px 8px; font-size: 10px; line-height: 1.3; font-weight: bold; letter-spacing: 0.03em; margin: 0 0 1.5em 0; text-transform: uppercase; color: #2c8f8a; border: 1px solid #2c8f8a;
		}
	.event:last-of-type {
		padding-bottom: 0; margin-bottom: 3em;
		}
    .event:last-of-type:before {
        bottom: 4px;
		}
	.event h4 {
		font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 0 0 .2em 0; padding: 0;
		}
	.event h5 {
        margin: 0; padding: 0 0 .3em 0; font-size: 10px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: rgba(28, 38, 43, 0.35);
		}
	.event p {
		margin: .6em 0 .2em 0; font-size: 13px; letter-spacing: .3px;
		}
    .event p:last-child {
		margin-bottom: 0;
		}

/* SKILLS */
.skill-unit {
 	padding-bottom: 1.1em;
	}
	.skill-unit h4 {
 		margin: 0 0 4px 4px; font-weight: 400; font-size: 11px; position: relative; z-index: 100; padding-left: 0px; display: inline-block; vertical-align: super; letter-spacing: 0.03em;
		}
	.skill-unit i {
    font-size: 22px;
		}
	.skill-unit .bar {
		position: relative; width: 100%; height: 4px; background: #eee;
		}
		.skill-unit .bar .progress {
            position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #2c8f8a; border-radius: 16px; -webkit-transition: width 1s ease-out; transition: width 1s ease-out;
			}
      
		.skill-unit .bar .progress span {
         	 position: absolute; top: -18px; left: 100%; margin-left: -28px; font-size: 10px; font-weight: bold; text-align: center; width: 28px; line-height: 22px; color: #fff; padding: 0 6px; background: #345;
			   }
		

/* TESTIMONIAL */
.testo {
    position: relative; padding: 1.4em 1.8em; margin: 4em 0; border: 1px solid #f1f1f1;
	}
	.testo img {
 		display: block; margin: -60px auto 16px auto; width: auto; max-height: 62px; border-radius: 8px;
		}
	.testo h4 {
		position: relative; text-align: center; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
		}
	.testo h5 {
		margin-top: 0; font-size: 11px; font-weight: 400; text-align: center; color: rgba(28, 38, 43, 0.35); text-transform: uppercase; letter-spacing: 0.04em;
		}
	.testo p {
		position: relative; margin: 1em 0 0.2em 0; font-size: 13px; text-align: center; letter-spacing: 0.03px;
		}

/* SERVICE */
.service {
    padding: 0.2em 0;
	}
	.service i,
	.service img { 
        display: inline-block; float: left; width: 50px; margin: 0; line-height: 50px; font-size: 40px; text-align: center;
		}
	.service i:before { 
		margin: 0 .2em; display: inline-block; 
		}
	.service p {
        margin-top: .2em; margin-left: 68px; font-size: 14px; line-height: 1.45; color: rgba(28, 38, 43, 0.5);
		}
	.service h4 {
        margin-top: 0; margin-left: 68px; margin-bottom: .3em; font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
		}

/* PROCESS */
.process { 
	position: relative; text-align: center; width: 80px; height: 80px; padding: 10px; margin: 0 auto 1.6em; border-radius: 50%; color: #345; background: #fff;
	}
.process:after { 
	content: ""; position:absolute; top: 50%; left: 100%; width: 120%; height: 0; border-bottom: 1px dashed #DADADA;
	}
.process i { 
	font-size: 42px; line-height: 1;
	}
.process img { 
	max-width: 60%; margin: 0;
	}
.process h4 { 
	margin: 10px 0 0; font-size: 11px; font-weight: 300; letter-spacing: .08em;
	}
.row [class^="col-"]:nth-child(3n) .process:after { 
    display: none; 
    }
.row > div:first-child .process {
	background: #F7F9E5;
	}
.row > div:first-child .process i,
.row > div:last-child .process i {
	font-size: 72px; margin-top: -26px;
	}
.row > div:last-child .process {
	background: #A5FFC1;
	}
		
/* FUN FACT */
.fun-fact { 
	padding-right: 1em; margin-bottom: 1.4em; text-align: center;
	}
	.fun-fact i { 
		display: inline-block; margin-bottom: 18px; line-height: 1; font-size: 56px;
		}
	.fun-fact i:before { 
		margin: 0 .2em; display: inline-block; 
		}
	.fun-fact img { 
		max-width: 54px; margin: 0; margin-bottom: 14px;
		}
	.fun-fact h4 { 
		max-width: 140px; margin: 0 auto; font-size: 13px; line-height: 1.4; font-weight: 300; letter-spacing: .02em; text-transform: uppercase; 
		}

/* CLIENT */
.client { 
	margin: 1em 0; min-height: 60px;  text-align: center;
	}
	.client img { 
		margin: 0 auto; width: auto; max-height: 80px; display:block; 
		}

/* SECTION TITLE */
.section-title { 
	margin: 2em 0 2em; position: relative; z-index: 10; 
	}
.page-title + .section-title,
.section-title:first-child { 
	margin-top: 0; 
	}
.section-title h2, 
.cat-links, 
.filters li a,
.mini-text h3,
.mini-text h4 { 
	margin: 0; font-size: 11px; text-transform: uppercase; position: relative; display: inline-block; font-weight: normal; letter-spacing: 0.2em; /*white-space: nowrap;*/ text-align: center; color: #345;
	}
.section-title h2:after, 
.section-title h2:before {
	content: " "; display: block; position: absolute;
	}
.section-title h2 i, 
.cat-links a, 
.filters li a:hover, 
.filters .current > a,
.mini-text h3,
.mini-text h4 {
	display: inline-block; position: relative; padding: 0; font-style: normal; box-shadow: inset 0 -6px 0px #ffd460; color: #345;
}
.section-title h2 i:after, 
h2 i:before {
	content: " "; display: block; position: absolute; width: 0; height: 0; bottom: -.5em; left: -.05em; 
	}
			
/* MAP */
.map {
	position: relative; overflow: hidden;
	}
	.map iframe {
 		width: 100%; border-width: 0; outline: none;
		}
.map-canvas {
	height: 360px; margin: 0px; padding: 0px; line-height: 1.6;
	}
	.map-canvas img { 
		max-width: none; 
		}
	.map .gmnoprint,
	.map .gm-style-cc {
    	display: none;
		}

/* CONTACT FORM */
.contact-form {
 	margin: 1.6em auto 3em auto; max-width: 600px; overflow: auto;
	}
	.contact-form p {
		margin: 0 0 1.8em 0;
		}		
	.contact-form input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]),
	.contact-form textarea {
		width: 100%; max-width: none; display: block; font-size: 14px;
		}
	.contact-form textarea {
		height: 100px;
		}
	.contact-form .antispam { 
		display: none; 
		}

/* MINI TEXT */
.mini-text {
	max-width: 460px; margin: 2em auto 3em; padding: 0 2em; text-align: center;
	}
.mini-text h3 { 
	font-size: 1.2em; margin-bottom: 18px;
	}
.mini-text h4 { 
	font-size: 1em; margin-bottom: 6px;
	}
.mini-text p { 
	line-height: 1.7;
	}


/* TABLETS */
@media screen and (min-width: 768px) { 
 	
	/* PROCESS */
	.row [class^="col-"]:nth-child(n) .process:after { 
		display: inline-block; 
		}
    .row [class^="col-"]:last-child .process:after { 
		display: none; 
		}
    
    /* CONTACT FORM */
	.contact-form p {
		width: 50%; float: left;
		}
	.contact-form p:nth-of-type(1) {
		padding-right: 32px;
		}
	.contact-form p:nth-of-type(n+3){
		 width: 100%;
		}
    	
    /* TIMELINE */
    .event {
        padding: 0 1em 3em 4em;
        }
    .event h3 {
		margin-left: -1.6em;
		}
    .event [class^="icon-"], .event [class*=" icon-"], .event .fa {
        font-size: 25px; top: -16px; left: -20px; width: 66px; line-height: 66px; margin: 0;  z-index: 120;
        }

}