@font-face
{
	font-family: 'Gotham SSM';
	font-weight: 200;
    src: url(../fonts/gotham-xlight.woff);
}


@font-face
{
	font-family: 'Gotham SSM';
	font-weight: 400;
    src: url(../fonts/gotham-book.woff);
}


@font-face
{
	font-family: 'Gotham SSM';
	font-weight: 500;
    src: url(../fonts/gotham-medium.woff);
}


body
{
	background-color: #2e3037;
	font-family: 'Gotham SSM', sans-serif;
	font-size: 12px;
	color: #eee;
}


.container
{
	max-width: 970px;
}


.about
{
	margin-top: 80px;
	margin-bottom: 85px;
}


.about .logo
{

}


.about .title
{
	font-weight: 200;
	line-height: 0.85em;
	margin-top: 14px;
	margin-bottom: 14px;
}


@media (min-width: 420px)
{
	.title-fix
	{
		font-size: 48px;
	}
}


@media (max-width: 420px)
{
	.title-fix
	{
		font-size: 40px;
	}
}


@media (max-width: 355px)
{
	.title-fix
	{
		font-size: 36px;
	}
}


@media (max-width: 325px)
{
	.title-fix
	{
		font-size: 32px;
	}
}


.about .subtitle
{
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: #ccc;
	margin-bottom: 20px;
}


.about .subtitle span
{
	color: #f67b37;
}


.about .button a,
.about .button a:hover
{
	font-size: 12px;
	font-weight: 500;
	background-color: #f17a38;
	background: linear-gradient(to right, #f67b37, #f04a5e);
	color: #2e3037;
	padding: 7px 12px;
	border: 0px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
}


.about .button a:hover
{
	padding: 7px 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}


.about .button .icon
{
	font-size: 14px;
}


.services
{
	margin-bottom: 40px;
}


.services .item
{
	margin-bottom: 20px;
	text-align: justify;
}


.services .item .headline
{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #ccc;
	margin-bottom: 5px;
}


.services .item .headline span
{
	color: #ff9d31;
}


.services .item .description
{
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
}


.services .item .description a
{
	color: #bbb;
	font-weight: 500;
}


.services .item .description a:hover
{
	color: #f67b37;
	text-decoration: none;
}


.portfolio
{
	margin-bottom: 20px;
}


.portfolio .title
{
	font-size: 36px;
	font-weight: 200;
	margin-bottom: 40px;
}


/*.portfolio .tabs
{
	margin-left: 380px;
	margin-bottom: 20px;
}


.portfolio .tabs .item a, a:hover, a:focus
{
	font-size: 11px;
	font-weight: 500;
	background-color: transparent;
	color: #ff9d31;
	padding: 0px;
	padding-bottom: 3px;
	border-radius: 0px;
	border-bottom: 2px solid transparent;
	margin: 0px 10px;
}


.portfolio .tabs .item a:active
{
	border-bottom: 2px solid #ff9d31;
}*/


.portfolio .project
{
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
	margin-bottom: 20px;
}


.portfolio .project .title
{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	background: linear-gradient(to right, #f67b37, #f04a5e);
	color: #2e3037;
	padding: 5px 12px;
	border-radius: 10px 10px 10px 0px;
	margin-bottom: 15px;
	max-width: 195px;
}


.portfolio .project .feature
{
	padding-left: 10px;
	margin-bottom: 15px;
	border-left: 2px solid #ff9d31;
}


.portfolio .project .feature.dotted
{
	border-left: 2px dashed #ff9d31;
}


.portfolio .project .feature .tagline
{
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #bbb;
}


.portfolio .project .feature .details
{
	
}


.portfolio .project .feature .details a
{
	color: #bbb;
	font-weight: 500;
}


.portfolio .project .feature .details a:hover
{
	color: #f67b37;
	text-decoration: none;
}


.portfolio .project .demo
{
	margin-top: 20px;
	margin-bottom: 20px;
}


.portfolio .project .offset
{
	margin-right: 50px;
}


.portfolio .project .offset.large
{
	margin-right: 90px;
}



.portfolio .project .demo a,
.portfolio .project .demo a:hover
{
	font-size: 10px;
	font-weight: 500;
	padding: 5px 10px;
	margin: 0px;
	border: 1px solid #999;
}


.portfolio .project .demo a,
.portfolio .project .demo a:focus,
.portfolio .project .demo a:active
{
	color: #999;
	text-decoration: none;
}


.portfolio .project .demo a:hover
{
	color: #2e3037;
	text-decoration: none;
}


.portfolio .project .demo #messenger 
{
	border-radius: 50px 0px 0px 50px;
	transition: all 0.5s ease;
}


.portfolio .project .demo #messenger:hover 
{
	background: linear-gradient(to right, #66bbac, #6586bb);
}


.portfolio .project .demo #telegram
{
	border-radius: 0px;
	margin-left: -1px;
	transition: all 0.5s ease;
}


.portfolio .project .demo #telegram:hover 
{
	background: linear-gradient(to right, #6586bb, #7b66a5);
}


.portfolio .project .demo #widget
{
	border-radius: 0px 50px 50px 0px;
	margin-left: -1px;
	transition: all 0.5s ease;
}


.portfolio .project .demo #widget:hover 
{
	background: linear-gradient(to right, #7b66a5, #b1519a);
}


.portfolio .project .demo #demopage
{
	font-size: 10px;
	font-weight: 500;
	padding: 4px 10px;
	margin: 0px;
	margin-top: -50px;
	border: 1px solid #777;
	border-radius: 50px;
	color: #777;
	display: inline-block;
}


.portfolio .project .demo #peoplespeak,
.portfolio .project .demo #massagebook
{
	border-radius: 50px;
	transition: all 0.5s ease;
}


.portfolio .project .demo #peoplespeak:hover 
{
	background: linear-gradient(to right, #6586bb, #7b66a5);
}


.portfolio .project .demo #massagebook:hover 
{
	background: linear-gradient(to right, #66bbac, #6586bb);
}


.feedback
{
	margin-bottom: 100px;
}


.feedback .title
{
	font-size: 28px;
	font-weight: 200;
	margin-bottom: 40px;
}


.feedback .carousel
{
	margin-bottom: 40px;
}


@media (min-width: 768px)
{
	.carousel-sm
	{
		max-width: 580px;
		margin-left: 11%;
	}
}


@media (min-width: 992px)
{
	.carousel-md
	{
		max-width: 580px;
		margin-left: 20%;
	}
}


.feedback .carousel .item
{
	
}



@media (max-width: 500px)
{
	.item-fix
	{
		min-height: 90px;
	}
}


@media (max-width: 400px)
{
	.item-fix
	{
		min-height: 110px;
	}
}


.feedback .carousel .item .comment
{
	padding-left: 70px;
	padding-right: 50px;
	font-weight: 400;
	color: #bbb;
	margin-bottom: 5px;
}


.feedback .carousel .item .author
{
	padding-left: 70px;
	padding-right: 70px;
	font-weight: 500;
	color: #ccc;
}


.feedback .carousel .item .quotation
{
	max-width: 33px;
	position: absolute;
	margin-top: 10px;
}


.feedback .carousel .item .quotation.left
{
	left: 0px;
	margin-left: 15px;
}


.feedback .carousel .item .quotation.right
{
	right: 0px;
	margin-right: 15px;
}



.feedback .button a,
.feedback .button a:hover
{
	font-size: 12px;
	font-weight: 500;
	background-color: #f17a38;
	background: linear-gradient(to right, #f67b37, #f04a5e);
	color: #2e3037;
	padding: 7px 12px;
	border: 0px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
}


.feedback .button a:hover
{
	padding: 7px 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}


.feedback .button .icon
{
	font-size: 14px;
}


.footer,
.footer a
{
	color: #999;
	margin-bottom: 20px;
}


/****************************
	Carousel fade in/out
*****************************/


.carousel-fade .carousel-inner .item
{
	opacity: 0;
	/*-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-ms-transition: opacity; 
	-o-transition-property: opacity;
	transition-property: opacity;*/
	-webkit-transition: opacity 2s ease;
	-moz-transition: opacity 2s ease;
	-ms-transition: opacity 2s ease;
	-o-transition: opacity 2s ease;
	transition: opacity 2s ease;
}


.carousel-fade .carousel-inner .active
{
 	opacity: 1;
}


.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
{
	left: 0;
	opacity: 0;
	z-index: 1;
}


.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right
{
	opacity: 1;
}


.lg-backdrop.in
{
	opacity: 0.8
}