/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('../fonts/fonts.css');

/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Helvetica', sans-serif; font-size: 12px; color: #000; }
body { background: #fff; }
input, select, textarea { font-family: 'Helvetica', sans-serif; font-size: 12px; color: #000; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }
h1, h2, h3, h4, h5, h6 { font-family: Helvetica, sans-serif; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1100px; }
.centered { padding-right: calc((100% - 1100px) / 2); padding-left: calc((100% - 1100px) / 2); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; }

	/* ### header container ### */
	#headerCntr { padding-top: 60px; padding-bottom: 60px; overflow: hidden; position: relative; width: 100%; }
	#headerCntr .logo { float: left; background: url(../img/mj-icon.svg) no-repeat left; background-size: 70px; height: 70px; padding-left: 80px; color: #000; text-decoration: none; font-size: 25px; text-transform: uppercase; font-family: Helvetica, sans-serif; font-weight: bold; padding-top: 10px; }
#headerCntr .logo span { display: block; color: #9c9c9c; font-style: italic; font-family: 'Times New Roman', sans-serif; font-size: 13px; text-transform: none; font-weight:normal;}

	#headerCntr .mobileMenu { display: none; cursor: pointer; z-index: 15; float: right; margin-top: 10px; width: 40px; height: 40px; position: relative; transition: 0.2s;
	overflow: hidden; }
	#headerCntr .mobileMenu span { display: block; height: 4px; text-indent: -9999px; border-radius: 5px; background: #000; position: absolute; top: 50%; right: 20%; left: 20%;
	transition: 0.2s; }
	#headerCntr .mobileMenu span:before,
	#headerCntr .mobileMenu span:after { display: block; width: 100%; height: 4px; content: ''; border-radius: 5px; background-color: #000; transition-duration: 0.2s,0.2s;
	position: absolute; left: 0; }
	#headerCntr .mobileMenu span:before { top: -7px; }
	#headerCntr .mobileMenu span:after { bottom: -7px; }
	.mm-opened #headerCntr .mobileMenu span { background: none; }
	.mm-opened #headerCntr .mobileMenu.is-active span:before,
	.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
	.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    #headerCntr.fixed { padding: 10px 0; position: fixed; left: 50%; transform: translateX(-50%); top: 0px; width: 1100px; background: #fff; z-index: 1000; }

	/* ### menu box ### */
	.menuBox:not(.mm-menu) { float: right; }
	.menuBox:not(.mm-menu) ul { padding-top: 20px; overflow: hidden; width: auto; }
	.menuBox:not(.mm-menu) ul li { padding-left: 50px; float: left; font-family: Helvetica, sans-serif; }
	.menuBox:not(.mm-menu) ul li a { padding-bottom: 5px; display: block; font-size: 16px; color: #5C5C5C; text-decoration: none; border-bottom: 3px solid transparent; }
	.menuBox:not(.mm-menu) ul li a:hover, .menuBox:not(.mm-menu) ul li.is-active a { color: #000;  border-bottom: 3px solid #000; }

	/* ### slider box ### */
	.sliderBox { width: 100%; overflow: hidden; height: 726px; position: relative; }
	.sliderBox .center { height: 100%; }
	.sliderBox ul { list-style: none; width: 100%; height: 100%; }
	.sliderBox li { overflow: hidden; width: 100%; height: 100%; position: relative; background-position: center top; background-repeat:no-repeat; background-size: cover; }
	.sliderBox li:before { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; content: '';
     background: linear-gradient(to bottom, rgba(255,250,239,0.04) 0%,rgba(255,250,239,0.16) 43%,rgba(0,0,0,0.32) 100%);}
	.sliderBox .detail { padding: 0px 0px 60px 22px; border-left: 1px solid #fff; position: absolute; left: 50px; bottom: 0px; }
	.sliderBox .title { display: block; font-size: 30px; color: #fff; margin-top: -6px; font-family: Helvetica, sans-serif; }
	.sliderBox p { font-size: 18px; color: #fff; }
	.sliderBox .next, .sliderBox .prev { position: absolute; right: 40px; bottom: 38px; font-size: 21px; color: #fff; text-decoration: none; z-index: 101; }
	.sliderBox .prev { right: 60px; }
	.sliderBox .prev:after { content:'|'; margin-left: 10px; position: relative; top: -1px; }

/* ### content container ### */
#contentCntr { width: 100%; }

	/* ### text box ### */
	.textBox { text-align:justify;margin: 148px 0 0 50px; padding: 0px 35px 50px 22px; overflow: hidden; }
	.textBox h1 { font-size: 27px; color: #000000; font-weight: normal; text-transform: uppercase; line-height: 27px; }
	.textBox p { padding: 36px 0px 0px 0px; font-size: 18px; color: #5C5C5C; line-height: 22px; }
    .textBox span { text-transform: uppercase; }

	/* ### service box ### */
	.serviceBox { margin: 100px 0 154px 50px; padding: 0px 35px 0px 22px; overflow: hidden; }
	.serviceBox ul { margin-right: -46px; text-align: center; }
	.serviceBox li { padding: 0px 46px 0px 0px; width: 33.3%; float:left; }
	.serviceBox h2 { padding-bottom: 106px; font-size: 27px; color: #000000; font-weight: normal;  }
	.serviceBox .title { font-size: 20px; color: #000000; display: block; height: 168px; }
	.serviceBox .title:before { content:''; width: 68px; height: 86px; display: block; margin: 0px auto 22px auto; background: url(../img/service-icon.png) left top no-repeat;}
	.serviceBox .title.marketing:before {content:''; width: 129px; background: url(../img/service-icon2.png) left top no-repeat;}
	.serviceBox .title.investment:before {content:''; width: 87px; background: url(../img/service-icon3.png) left top no-repeat;}
	.serviceBox p { padding: 38px 0px 0px 0px; font-size: 18px; color: #5C5C5C; line-height: 22px; text-align:justify;}
    .serviceBox p span { text-transform: uppercase; }

	/* ### project box ### */
	.projectBox {  overflow: hidden; position: relative; padding-bottom: 200px; }
	.projectBox h3 { margin: 0px 0 0px 50px; padding: 0px 0px 28px 22px; font-size: 27px; color: #000000; font-weight: normal;  }
	.projectBox ul { list-style: none; margin-right: -70px; }
	.projectBox li { padding: 0px 70px 0px 0px; width: 50%; float: left; }
	.projectBox img { width: 100%; }
	.projectBox h4 { padding: 28px 0px; font-size: 27px; color: #000000; text-transform: uppercase; }
	.projectBox p { padding: 0px 0px 36px 0px; font-size: 18px; color: #5C5C5C; line-height: 22px;}
	.projectBox .info { text-align:justify;position: relative; padding-right: 20px; }
	.projectBox .next, .projectBox .prev { position: absolute; right: 28px; top: 30px; font-size: 19px; color: #000; text-decoration: none; }
	.projectBox .control { position: absolute; top: -30px; right: 0px; }
	.projectBox .prev { right: 45px; }
	.projectBox .prev:after { content:'|'; margin-left: 7px; position: relative; top: -1px; }
	.projectBox .slider { position: relative; }
	.projectBox .border:before { position: absolute; left: 50px; top: -60px; height: calc(100% + 60px); content:''; z-index: 101; }
	

	/* ### over box ### */
	.overBox { margin: 0 0 230px 50px; padding: 0px 35px 0px 22px; overflow: hidden; }
	.overBox h3 { padding-bottom: 43px; font-size: 27px; color: #000000; font-weight: normal;  }
	.overBox .block { overflow: hidden; }
	.overBox .block.space { padding-bottom: 106px; }
	.overBox .image { float:left; }
	.overBox .content { overflow: hidden; padding: 10px 0px 0px 55px; }
	.overBox .title { font-size: 27px; color: #000000; display: block; }
	.overBox p { padding: 20px 0 0 0; font-size: 18px; color: #5C5C5C; line-height: 30px;}

	.overBox .credentials {
		margin-top: 20px;
	}
		
	.overBox .credentials p {
		padding:0;
	}
	.overBox .credentials img {
		position:relative;
		top:5px;
		margin-right:4px;
	}

	
	.content a { color: #000000; text-decoration: underline; }
	.content a:hover { text-decoration: none; }
	 

	/* ### contact box ### */
	.contactBox { width: 100%; overflow: hidden; }
	.contactBox H3 { padding-bottom: 35px; font-size: 27px; color: #000000; text-align: center; display: block; font-weight:normal; }
	.contactBox p { font-size: 18px; color: #5C5C5C; text-align: center;}
	.contactBox a { color: #000000; text-decoration: underline; }
	.contactBox a:hover { text-decoration: none; }
	
	
	

/* ### footer container ### */
#footerCntr { padding-bottom: 30px; padding-top: 220px; overflow: hidden; width: 100%; }
#footerCntr p { font-size: 13px; color: #5C5C5C; text-align: center; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1099px) {
	.center { padding-left: 10px; padding-right: 10px; }
	.centered { padding-left: 10px; padding-right: 10px;}
	#headerCntr, #headerCntr.fixed { padding: 30px 10px; width: 100%; left: 0; transform: none!important; }

	.textBox { margin: 80px 0 109px 50px; }
	.serviceBox { margin: 0px 0 105px 50px; }
	.overBox { margin: 100px 0 100px 50px; }
	#footerCntr { padding-top: 100px; }
}

@media only screen and (max-width: 979px) {
	.menuBox:not(.mm-menu) ul li { padding-left: 30px; }
	.sliderBox { height: 500px; }
	.sliderBox li { background-size: cover; }
	.textBox { margin: 50px 0 80px 20px; }
	.serviceBox { margin: 0px 0 80px 20px; }
	.serviceBox ul { margin-right: -20px; }
	.serviceBox li { padding-right: 20px; }
	.serviceBox p { padding-top: 15px; font-size: 16px; }
	.projectBox h2 { margin-left: 20px; }
	.projectBox .border::before { left: 20px; }
	.projectBox ul { margin-right: -40px; }
	.projectBox li { padding-right: 40px; }
	.overBox { margin: 50px 0 50px 20px; }
	.contactBox p { font-size: 22px; line-height: 32px; }
	.overBox .block.space { padding-bottom: 60px; }
	.overBox .content { padding-left: 30px; }
	.sliderBox .detail { left: 20px; }
}

@media only screen and (max-width: 767px) {
	.menuBox:not(.mm-menu) { display: none; }
	#headerCntr .mobileMenu { display: block; }
	#headerCntr { padding-top: 13px; padding-bottom: 13px; }
	.sliderBox .detail { left: 10px; }
	.textBox { margin:30px 0 50px 10px; }
	.textBox p { font-size: 16px; padding-top: 25px; }
	.serviceBox { margin: 0px 0 80px 10px; padding: 0px 22px; }
	.serviceBox ul { margin: 0px; }
	.serviceBox li { width: 100%; padding: 0 0 20px 0;}
	.serviceBox h2 { padding-bottom: 40px; }
	.serviceBox .title { height: auto; }
	.projectBox ul { margin: 0px; }
	.projectBox li { width: 100%; padding: 0px 0 20px 0;}
	.projectBox .border::before { left: 10px; }
	.projectBox h2 { margin-left: 10px; }
	.overBox { margin:30px 0 50px 10px;}
	.overBox .image { width: 150px; }
	.overBox .content { padding: 0 0 0 22px; }
	.overBox .title { font-size: 20px; }
	.overBox p { padding: 11px 0px 0px 0px; font-size: 16px; line-height: 24px; }
	.overBox .credentials img {
		top:2px;
	}
	.overBox .block.space { padding-bottom: 30px; }
	.contactBox p { font-size: 18px; }
	#footerCntr { padding-top: 50px; }
}

@media only screen and (max-width: 479px) {
	#headerCntr .logo { font-size: 20px; padding-left: 60px; background-size: 50px; padding-top: 15px; }
	#headerCntr .logo span { font-size: 11px; }
	.sliderBox { height: 400px; }
	.sliderBox .detail { padding-left: 15px; }
	.textBox { padding: 0px 10px 0px 15px; }
	.serviceBox { padding: 0px  15px; margin-bottom: 50px; }
	.overBox { padding: 0px  15px; }
	.overBox .image { width: 100%; }
	.overBox .content { width: 100%; padding: 15px 0px; }
	.contactBox p { font-size: 16px; line-height: 27px; }
}