/*----- Default -----*/
*:before,*:after{box-sizing:inherit}

html, body {
	padding:0px; margin:0px;
	background:transparent;
	font-family: Ubuntu, 'Open Sans', Helvetica, Arial, sans-serif;
	font-size:13px;
	color:#000;
	background-color:#fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	/*text-transform: uppercase;*/
	font-size: 150%;
}

h2 {
	text-transform: uppercase;
	font-size: 36px;
	font-family:Ubuntu;
	font-weight:bold;
	line-height:120%;
}

h3 {
	font-size: 24px;
	font-family:Ubuntu;
	font-weight:bold;
}
p, div{
	line-height: 160%;
	margin:0;
}
p {
	font-family:'Open Sans';
	font-size: 20px;
}
p.subhead {
	font-family:'Open Sans';
	font-size:24px;
	padding:20px 0 0 0;
}
a {
	text-decoration: none;
	color: #4e3c3e;
	outline: none;
}
a:hover,
a:focus {
	color: #b50000;
}
a.linkstyle{
	color: #ffffff;
}
a.linkstyle:hover, a.linkstyle:focus{
	color: #f48b95;
}
.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}
table {
	border-collapse: collapse;
	width:100%;
}
table, td, th {
    /*border: 1px solid #725100;*/
    text-align: left;
    padding: 8px;
}
th {
	background-color: #896100;
	color:#ffffff; 
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
td {
	vertical-align: top;
}
.t-scrollbar {
	overflow-x:auto;
}

#error {
	display:block;
	margin:5px;
	color:#4d4948;
	background-color:#fffebe;
	border: 1px solid #cbcbcb;
	font-size:90%;
}

#success {
	margin:5px;
	color:#4d4948;
	background-color:#bce9b5;
	border: 1px solid #7ace6c;
	font-size:90%;
}

.clr { 
	clear:both;
	margin:0;
	padding:0;
}

.form-error-style{color:red;}
/*for layout and menu */
.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}
/*for button */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cf:before,
.cf:after {
	content: '';
	display: table;
}
.cf:after {
	clear: both;
}

/* Button Color */

.button {
	float: left;
	min-width: 150px;
	max-width: 300px;
	display: inline-block;
	margin: 1em 0em;
	padding: 1em 2.4em;
	border: none;
	background: none;
	color: inherit;
	font-family:'Open Sans';
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
.bg-1 .button {
	color: #37474f;
	border-color: #37474f;
}
.bg-2 .button {
	color: #ECEFF1;
	border-color: #ECEFF1;
}
.bg-3 .button {
	color: #fff;
	border-color: #fff;
}

/* Sizes */
.button--size-s {
	font-size: 14px;
}
.button--size-m {
	font-size: 16px;
}
.button--size-l {
	font-size: 22px;
}

/* Typography and Roundedness */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}
.button--text-thin {
	font-weight: 300;
}
.button--text-medium {
	font-weight: 500;
}
.button--text-thick {
	font-weight: 600;
}
.button--round-s {
	border-radius: 5px;
}
.button--round-m {
	border-radius: 15px;
}
.button--round-l {
	border-radius: 40px;
}

/* Borders */
.button--border-thin {
	/* border: 1px solid; */
}
.button--border-medium {
	border: 2px solid;
}
.button--border-thick {
	border: 3px solid;
}

/* Individual button styles */

/* Saqui */
.button.button--saqui {
	overflow: hidden;
	color: #fff;
	background: #37474f;
	-webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
	transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.button--saqui.button--inverted {
	background: #970000;
	color: #fff;
}
.button--saqui::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 2em;
	color: #970000;
	-webkit-transform-origin: -25% 50%;
	transform-origin: -25% 50%;
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	transform: rotate3d(0, 0, 1, 45deg);
	-webkit-transition: -webkit-transform 0.3s ease-in;
	transition: transform 0.3s ease-in;
}
.button--saqui.button--inverted::after {
	color: #fff;
}
.button--saqui:hover::after,
.button--saqui:hover {
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.button--saqui:hover {
	background-color: #7986cb;
	color: #7986cb;
}
.button--saqui.button--inverted:hover {
	background-color: #000;
	color: #fff;
}
.button--saqui:hover::after {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
}
/* END Button Color */
/************ Content Area ****************/
#main-content
{
	overflow:hidden;
	margin: 0 auto 0 auto;
	width:100%;
	/*width: 980px;*/
}

/****************** HEADER SECTION ***************************/
.header
{
	background:#fff;	
	position: fixed; 
	top: 0px; 
	margin-top: 0px; 
	z-index: 500; 
	left: 0px; 
	width: 100%;
	border-bottom: 1px solid #f1f1f1;
}
.header #logo
{
	margin:34px 0 0px 100px;	
	padding:0px;
	/*width:27%;*/
	float:left;
	display:block;
	line-height:0;
	font-size:0;
}
.header #logo img
{
	width:220px;
}
/* Menu Start */
.header #menu
{
	margin:30px 68px 30px 0px;
	padding:0px;
	float:right;
	display:block;
}

.menu {
	line-height: 1;
	margin: 0 auto 0px;
}

.menu__list {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__item {
	display: block;
	margin: 0 1em;
}

a.menu__link {
	font-size: 18px;
	font-family:Ubuntu;
	display: block;
	padding: 0.7em 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	position: relative;
	text-align: center;
	color: #000;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

a.menu__link:hover,
a.menu__link:focus {
	outline: none;
}


.menu a.menu__link:hover,
.menu a.menu__link:focus {
	color: #b50000;
}

.menu .menu__item--current a.menu__link {
	color: #b50000;
}

.menu .menu__link::before,
.menu .menu__link::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 15px;
	opacity: 0;
	border: 2px solid #b50000;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
	transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}

.menu .menu__link::before {
	top: 0;
	left: 0;
	border-width: 3px 0 0 4px;
	-webkit-transform: translate3d(10px, 10px, 0);
	transform: translate3d(10px, 10px, 0);
}

.menu .menu__link::after {
	right: 0;
	bottom: 0;
	border-width: 0 4px 3px 0;
	-webkit-transform: translate3d(-10px, -10px, 0);
	transform: translate3d(-10px, -10px, 0);
}

.menu .menu__item--current .menu__link::before,
.menu .menu__item--current .menu__link::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.icon {
	display:none;
}

/* END OF MENU */
/* CLONE MENU */

.header.cloned
{
	opacity:0.8;
}

.header.cloned #logo img
{
	width:100px;
}
/* END OF CLONE MENU */
/****************** END HEADER SECTION **********************/
/****************** Content Area **********************/
#content
{
	margin:0;	
	padding:0;
	width:100%;
	display:block;
	overflow: hidden;
	
}



/* START OF Carousel */

.bxslider #slide-1
{
	width:100%;	
	min-height:600px;
	background:#F5F5F5 url(../img/masthead-01.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	overflow: hidden;
}
.bxslider #slide-2
{
	width:100%;	
	min-height:600px;
	background:#2e7699 url(../img/masthead-02.svg);
	background-repeat:no-repeat;
	background-position:90% 50%;
	overflow: hidden;
}
.bxslider #slide-1 h1, .bxslider #slide-2 h1
{
	font-size: 42px;
	font-family:Ubuntu;
	font-weight:bold;
	line-height:120%;
	padding:8% 0 0 100px;
	color:#ffffff;
}
.bxslider #slide-1 h2, .bxslider #slide-2 h2
{
	
	font-size: 28px;
	font-family:'Open Sans';
	font-weight:lighter;
	line-height:120%;
	padding:0px 0 0 100px;
	color:#ffffff;
	text-transform: none;
}
.bxslider #slide-1 button, .bxslider #slide-2 button
{
	
	font-size: 22px;
	font-family:'Open Sans';
	font-weight:700;
	margin:20px 0 0 100px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto
{
	position: absolute;
    bottom: 30px;
    width: 100%;
}

/* END Carousel */
/* START OF Services */
#service-title
{
	margin: 0px auto;
	padding:100px 0px;
	background:#f1f4f9;
	text-align:center;
	float:left;
	display:block;
}
#service-title h2 {
	margin: 0px;
}
.line {
	width:200px;
	height:2px;
	display:block;
	margin:30px auto;
	background:#b50000;
}
#collection
{
	width:100%;
	padding:0px 100px;
	margin-top:40px;
	text-align:left;
	list-style:none;
	font-size: 0;
	line-height:0;
	display:inline-block;
}
.item
{
	width:100%;
	display:inline-block;
	vertical-align: top;
	background:#ffffff;
	padding:30px;
	margin:20px 0px;
	text-align:left;
	/*min-height:220px;*/
}
.item .left-img {
	float:left;
	width:18%;
}
.item .icon {
	display:block;
	width:102px;
	height:102px;
}
.item .right-content {
	float:left;
	width:78%;
}
.item .right-content p {
	padding:0px;
}
.item h3
{
	margin:0px 0px 20px 0px;
	line-height:120%;
}
/*
.item:before, .item:after {
	content:"";
	display:table;
	clear:both;
}*/
/* END Services */
/* START OF About */

#about-title
{
	width:100%;	
	background:url(../img/about.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	min-height:auto;
}
#about-title h2 {
	margin: 0px;
}
#about-title .inner-wrapper
{
	width:70%;
	padding:100px 0px;
	margin:0 auto;
	text-align:center;
	color:#fff;
}
#about-title div h2,p
{
	padding:20px 0;
}
#about-title p {
	font-size:24px;
	font-weight: 600;
}
/* END OF ABOUT */
/* START OF portfolio */

#portfolio-title
{
	width:100%;	
	min-height:auto;
	
}
#portfolio-title .inner-wrapper
{
	width:80%;
	padding:100px 2%;
	margin:0 auto;
	text-align:center;	
}
#portfolio-title h2{
	margin:0;
}
#portfolio-title .inner-wrapper button
{
	float:none;
}
#portfolio-title p {
	font-size:24px;
	font-weight: 600;
}
/* END OF portfolio */
/* START OF Contact */

#contact-title
{
	width:100%;	
	min-height:auto;
	background-color:#343434;
}
#contact-title h2 {
	margin:0;
}
#contact-title p {
	font-size:24px;
	font-weight: 600;
	padding:20px 0 0 0;
}
#contact-title div.appform-container
{
	width:80%;
	padding:100px 0px;
	margin:0 auto;
	text-align:center;
	color:white;
}
#contact-title div.appform-container .line2{
	width:200px;
	height:2px;
	display:block;
	margin:30px auto;
	background:#484848;
}
#contact-title div.appform-container input
{
	/*padding:20px;*/
	float:none;
}
input[type=text],input[type=password],select {
	padding:20px; 
	margin:10px 0;
	border:2px solid #ccc; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width:100%;
	font-size:18px;

}
input[type=text]:focus,input[type=password]:focus {
	border-color:#c00;
}
input[type="text"]::-webkit-input-placeholder, 
input[type="text"]::-moz-placeholder, 
input[type="text"]:-ms-input-placeholder, 
input[type="text"]:-moz-placeholder, 
textarea::-webkit-input-placeholder, 
textarea::-moz-placeholder, 
textarea:-ms-input-placeholder, 
textarea:-moz-placeholder 
{ 
	font-family:'Open Sans';
	font-size: 18px;
	font-weight:600;
	color:#8b8b8b;
	text-align:center !important;
}

textarea.contact
{
	padding:20px; 
	margin:10px 0;
	height:100px;
	width:100%;
	font-size:18px;
	border:2px solid #ccc; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#contact-title #success-message
{
	font-size:24px;
	font-weight:bold;
	display:none;
	color:#0F0;
}
#contact-title #fail-message
{
	font-size:24px;
	font-weight:bold;
	display:none;
	color:#F00;
}
.formcontainer {
	width:70%;
	margin:0 auto;
}
/* END OF Contact */
/****************** END Content Area **********************/
/****************** START footer Area **********************/
#footer
{
	width:100%;
	background:#1e1e1e;
}
#footer p{
	font-family: 'Open Sans';
	font-size:16px;
	color:#bdbdbd;
	margin:0;
	padding-left:100px;
}
/****************** END footer Area **********************/

@media screen and (max-width: 1440px) {
	.header #logo img{
		width:200px;
	}
	.bxslider #slide-1 h1, .bxslider #slide-2 h1
	{
		font-size: 40px;
	}
	.bxslider #slide-1 h2, .bxslider #slide-2 h2
	{	
		font-size: 24px;
	}
}

/* Stack items for smaller screens */
@media screen and (max-width:1280px) {

	/* Start of MENU */
	.header #logo img{
		width:180px;
	}
	.menu a.menu__link::before,
	.menu a.menu__link::after {
		width: 20px;
		height: 10px;
	}
	/* END OF MENU */

	/* make it font smaller start from 1280 screen size */
	h2 { font-size:30px; }
	p.subhead { font-size:20px; }
	#about-title p, #contact-title p { font-size:20px; }
	#about-title .inner-wrapper {
		width:60%;
	}
}

@media screen and (max-width:1024px) {
	.header #logo {
		margin:34px 0 30px 60px;
	}
	.header #logo img{
		width:160px;
	}
	.header #menu {
		margin: 30px 38px 0px 0px;
	}
	/* Start OF MENU */
	a.menu__link {
		font-size: 16px;
		padding: 0.6em 0.8em;
	}
	/* END OF MENU */
	/* START OF Carousel */
	.bxslider #slide-1, .bxslider #slide-2 {
		min-height:450px;
	}
	.bxslider #slide-1 h1, .bxslider #slide-2 h1{
		font-size: 36px;
		padding: 8% 0 0 60px;
	}
	.bxslider #slide-1 h2, .bxslider #slide-2 h2{
		font-size: 20px;
		padding: 0 0 0 60px;
		/*width:70%;*/
	}
	.bxslider #slide-1 button, .bxslider #slide-2 button{
		font-size:20px;
		margin: 20px 0 0 60px;
	}
	/* END Carousel */
	.button {
		padding: 0.8em 1.7em;
	}
	.button--saqui::after {
		padding: 0.8em 1.7em;
	}
	.button--size-l {
		font-size: 18px !important;
	}
	/* GENERAL : make it font smaller start from 1024 screen size */
	h2 { font-size:30px; }
	p.subhead { font-size:18px; }
	#collection .right-content h3 { font-size:20px;}
	#collection .right-content p, #about-title p, #contact-title p { font-size:18px; }
	#about-title .inner-wrapper {
		width:70%;
		padding:60px 0px;
	}
	#service-title { padding:60px 0px; }
	#collection{ padding: 0px 60px;}
	#contact-title div.appform-container { padding: 60px 0px;}
	#footer p { padding-left:60px;}
} 

@media screen and (max-width: 850px) {
	/* Start OF Carousel */
	.bxslider #slide-2 {
		background-size:40%;
	}
	.bxslider #slide-1 h2 {
		line-height: 140%;
	}
	.bxslider #slide-2 h2 {
		width: 52%;
		line-height: 140%;
	}
	/* END OF Carousel*/
	/* Start OF MENU */
	.menu li{display: none;}
	.section{	z-index:9999;}
	#menu .icon {
		float: right;
		display: block;
		font-size:36px;
		padding:40px 60px 40px 0px;
		position:absolute;
		top:0;
		right:0;
		color:#000;
	}
	a.menu__link {
		font-size:22px;
	}
	a.icon:hover {
		color:#b50000 !important;
	}
	.responsive a.icon:active {
		color:#b50000 !important;
	}
	.section
	{
		position:absolute;
		top:30px;
		left:0;
		background:#fff;
		width: 100%;
		display: block;
		margin-top:63px;
	}
	.menu .menu__list {height:100%;}
	.responsive li {
		width:100%;
		display: block;
		color:#fff;
		font-size:0;
	}
	a.menu__link{
		padding:1em;
	}
	.menu a.menu__link::before,
	.menu a.menu__link::after {
		width: 0px;
		height: 0px;
		border:0px;
	}
	/* END OF MENU */
	.header.cloned #logo
	{
		width:15%;
	}
	/* START OF services */
	.item .icon {
		width:86px;
		height:86px;
	}
	/* END services */
}

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

	/* START OF services */
	#service-title p.subhead {
		padding: 20px 60px 0 60px;
	}
	.item .left-img {
		float:none;
		width:100%;
		padding:0 0 30px 0;
	}
	.item .icon {
		width:86px;
		height:86px;
		margin:0 auto;
	}
	.item .right-content {
		float:none;
		width:100%;
		text-align:center;
	}
	/* END services */
	.formcontainer {
		width:100%;
	}
	#footer {
		text-align:center;
	}
	#footer p {
		padding:20px 0px;
	}
}

/* small tablet samsung and microsoft product */
@media screen and (max-width:640px) {
	/* Start OF Carousel */
	.bxslider #slide-1 {
		background-position: 10% 0;
	}
	.bxslider #slide-2 {
		background-position: 90% 62%;
	}
	/* END OF Carousel*/
}

/* all mobile screen */
@media screen and (max-width:450px) {
	/* START OF header */
	.header #logo {
		margin: 34px 0 30px 30px
	}
	#menu .icon {
		padding: 40px 30px 40px 0px;
	}
	/* END header */
	/* START OF Carousel */
	.bxslider #slide-1 {
		background-position: 36% 0%;
	}
	.bxslider #slide-1, .bxslider #slide-2 {
		min-height:450px;
	}
	.bxslider #slide-1 h1, .bxslider #slide-2 h1{
		font-size: 30px;
		padding: 10% 0 0 30px;
	}
	.bxslider #slide-1 h2, .bxslider #slide-2 h2{
		font-size: 18px;
		padding: 0 0 0 30px;
		width:70%;
	}
	.bxslider #slide-1 button, .bxslider #slide-2 button{
		font-size:18px;
		margin: 20px 0 0 30px;
	}
	/* END Carousel */
	/* START OF Service */
	#service-title p.subhead {
		padding: 20px 30px 0 30px;
	}
	/* END Service */
	/* GENERAL : make it font smaller start from 450 screen size */
	h2 { font-size:26px; }
	p.subhead { font-size:16px; }
	#collection .right-content h3 { font-size:18px;}
	#collection .right-content p, #about-title p, #contact-title p { font-size:16px; }
	#about-title .inner-wrapper {
		width:80%;
	}
	#collection { padding: 0px 30px; }


}
@media screen and (max-width:370px) {
	/* START OF Carousel */
	.bxslider #slide-1 h1, .bxslider #slide-2 h1{
		font-size: 26px;
		padding: 16% 0 0 30px;
	}
	.bxslider #slide-1 h2, .bxslider #slide-2 h2{
		width:90%;
	}
	.bxslider #slide-1 button, .bxslider #slide-2 button{
		font-size:16px !important;
	}
	/* END Carousel */
	.button {
		min-width:120px;
	}
	.button--size-l {
		font-size:16px !important;
	}
}