@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'icomoon';
		src: url('../fonts/icomoon.svg#icomoon') format('svg');
	};
}

.icon-seminor, .icon-consulting, .icon-home, .icon-planning, .icon-aboutus, .icon-contact, .icon-menu {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-seminor:before {
	content: "\e900";
}

.icon-consulting:before {
	content: "\e901";
}

.icon-home:before {
	content: "\e904";
}

.icon-planning:before {
	content: "\e902";
}

.icon-aboutus:before {
	content: "\e905";
}

.icon-contact:before {
	content: "\e903";
}

.icon-menu:before {
	content: "\e9bd";
}

a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* section & article settings */

.info {
	height:auto;
	border-radius:10px;
    -webkit-border-radius:10px; 
    -moz-border-radius:10px;
	overflow:hidden;
	}

.info ul {
	margin:-5px -3px 0 0;
	padding-right:18px;
	}


#seminar .info ul, #consulting .info ul {
	margin-left:-15px;
	padding-right:18px;
	}

.info p {
	margin:10px 20px;
	}

.rc:first-letter {
	font-size:1.6em;
	font-weight:bold;
	padding-right:3px;
	}

.ttlbg {
	margin-bottom:20px;
	padding:10px 0 0 20px;
	}

.ttlbg {
	border-top-left-radius:10px; 
    -webkit-border-top-left-radius:10px; 
    -moz-border-top-left-radius:10px;
	border-top-right-radius:10px; 
    -webkit-border-top-right-radius:10px; 
    -moz-border-top-right-radius:10px;
	}

.article {
	margin-bottom:20px;
	padding-bottom:15px;
	}

#home .info_left .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/rooves.png) no-repeat;
	background-position:40% 40%;
	}

#home .info span {
	border-bottom:dotted 1px #666666;
	}

#planning .info span {
	border-bottom:dotted 1px #FCAF22;
	}

#planning #pagenav {
	margin:5px 20px 0 0;
	font-size:0.8em;
	}

#planning #pagenav a:hover {
	color:#E8822A;
	}

/*
#planning .info ul li {
	margin-right:20px;
	}
*/
#home .info_right p {
	margin:10px 20px;
	}

#home .info_right span {
	border-bottom:dotted 1px #FF99CC;
	}

#home .info_right .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/rooves.png) no-repeat;
	background-position:30% 48%;
	}

#home .info_right img {
	float:right;
	width:50%;
	max-width:240px;
	margin-left:5px;
	}

#aboutus .info .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_pink.png) no-repeat;
	background-position:right top;
	}

#aboutus .info ul {
	margin-left:-1%;
	}

#aboutus .info li {
	margin-right:4%;
	margin-bottom:5px;
	line-height:1.4em;
	border-bottom: 1px dotted #FF99CC;
	}

#aboutus .img {
	margin-top:-5px;
	width:25%;
	}

#company {
	width:94%;
	margin-left:3%;
	}

#company td {
	border-bottom: 1px dotted #FF99CC;
	}

#planning .img, #consulting .img, #seminar .img, #contact .img  {
	width:38%;
	margin-left:10px;
	}

#planning .img img, #aboutus .img img, #consulting .img img, #seminar .img img, #contact .img img {
	width:100%;
	}

#planning .info .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_yellow.png) no-repeat;
	background-position:right top;
	}

#planning .info_wide .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_w_yellow.png) no-repeat;
	background-position:right top;
	}

#info .info_wide .ttlbg_p {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_w_pink.png) no-repeat;
	background-position:right top;
	padding:10px 0 0 15px;
	}

#info_writing .info_wide .ttlbg_g {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_w_green.png) no-repeat;
	background-position:right top;
	padding:10px 0 0 15px;
	}

#info_seminar .info_wide .ttlbg_b {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_w_blue.png) no-repeat;
	background-position:right top;
	padding:10px 0 0 15px;
	}

#info .article ul {
	margin-top:10px;
	margin-bottom:15px;
	}

#info .article li {
	line-height:1.25em;
	}

#info .nest {
	margin-left:-60px;
	border-bottom: 1px dotted #FF99CC;
	}

#info #bulletin .ul_wrap {
	
	}

/* section & article - seminar & consulting pages */

#consulting .info .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_green.png) no-repeat;
	background-position:right top;
	}

#consulting .info span {
	border-bottom:dotted 1px #00695B;
	}

#seminar .info .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_blue.png) no-repeat;
	background-position:right top;
	}

#seminar .info span {
	border-bottom:dotted 1px #20B2AA;
	}

#seminar .spncr {
	margin-left:15px;
	}

#seminar h4 {
	margin:0 0 5px 12px;
	}

#contact .info .ttlbg {
	width:100%;
	height:50px;
	background:url(../img/sec_bg_brown.png) no-repeat;
	background-position:right top;
	}

#contact .info_left span {
	border-bottom:dotted 1px #57462D;
	}

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 90%;
        height: 25px !important;
}
 
.wpcf7 textarea[name="your-message"] {
        width: 90%;
        height: 250px !important;
}


.accordion {
	width: 100%;
	margin:0;
	}

.accordion ul {
	width:100%;
	list-style:none;
	}

.accordion > ul > li {
	border-bottom:dotted 1px #20B2AA;
	}

.accordion > ul > li > a {
	display: block;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	}

.accordion > ul > li > a:hover{
	color: #5997a7;
	}

.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
	margin-left:10px;
	color: #2f7f99;
	}

.accordion > ul > li > a:after{
	content: "▼";
	}

.accordion > ul > li > a.active:after{
	content: "▲";
	}

.accordion > ul > li > ul {
	display: none;
	}

.accordion > ul > li > ul > li {
	margin-left:-15px;
	}

.accordion > ul > li > ul > li > ul >li {
	margin-left:-20px;
	}

.accordion > ul > li > ul > li img {
	width:180px;
	margin:10px -30px 5px 5px;
	}

iframe {
	margin:10px -30px 5px 5px;
	}

.accordion > ul > li > ul > li > a{
	display: block;
	color: #fff;
	background-color: #79c9b8;
	padding: 6px 12px;
	p osition: relative;
	}

.accordion > ul > li > ul > li > a:hover{
	background-color: #67ab9c;
	}



/* Global CSS that are applied for all screen sizes */

.nav ul {
	max-width: 1240px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.2em;
	font-weight: 390;
	}

.nav li span {
	display: block;
	}

.nav a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
	}

.nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}

/* Remove the blue Webkit background when element is tapped */

a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {
	color: rgba(249, 249, 249, .5);
	}

.no-touch .nav ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);
	}

/* Adding some background color to the different menu items */
/* index red */
.nav li:nth-child(6n+1) {
	background: rgb(198,57,98);
	}
/* about us pink */
.nav li:nth-child(6n+2) {
	background: rgb(212,122,159);
	}
/* planning yellow */
.nav li:nth-child(6n+3) {
	background: rgb(225,160,71);
	}
/* consulting green */
.nav li:nth-child(6n+4) {
	background: rgb(63,170,141);
	}
/* seminar blue */
.nav li:nth-child(6n+5) {
	background: rgb(54,148,199);
	}
/* contact brown */
.nav li:nth-child(6n+6) {
	background: rgb(88,66,69);
	}


.header h1 img {
	width:100%;
	max-width:1000px;
	}

.ttlimg, .logomark {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}

.ttlimg_sub, .logomark_sub {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}

.ttlimg img, .logomark img {
	width:100%;
	max-width:1000px;
	}

.ttlimg_sub img, .logomark_sub img {
	width:100%;
	max-width:1000px;
	}

.titleset {
		margin-top:10px;
		}

.bg {
	width:100%;
	height:30%;
	background:url(../img/cityscape.png) repeat-x left bottom;
	}

.top_img {
	margin:0 0 10px 10px;
	}

/* For screen bigger than 890px */
@media (min-width: 50em) {

	.header h1 {
		padding-top:30px;
	}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:55px;
		}
	
	.lgmark_n {
		display:none;
		}
	
	/* Transforms the list into a horizontal navigation */
	.nav li {
		float: left;
		width: 16.66666666666667%;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	.nav a {
		display: block;
		width: auto;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	/* index red */
	.no-touch .nav li:nth-child(6n+1) a:hover,
	.no-touch .nav li:nth-child(6n+1) a:active,
	.no-touch .nav li:nth-child(6n+1) a:focus {
		border-bottom: 4px solid rgb(162,58,101);
	}
	/* about us pink */
	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		border-bottom: 4px solid rgb(217,59,106);
	}
	/* planning yellow */
	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		border-bottom: 4px solid rgb(229,126,72);
	}
	/* consulting green */
	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		border-bottom: 4px solid rgb(62,136,122);
	}
	/* seminor blue */
	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		border-bottom: 4px solid rgb(51,108,151);
	}
	/* contact brown */
	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		border-bottom: 4px solid rgb(68,46,49);
	}
	


	/* Placing the icon */
	
	.icon {
		padding-top: 1em;
	}

	.icon + span {
		margin-top: 1.1em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Animating the height of the element*/
	.nav a {
		height: 7em;
	}

	.no-touch .nav a:hover ,
	.nav a:active ,
	.nav a:focus {
		height: 8em;
	}	

	/* Making the text follow the height animation */
	.no-touch .nav a:hover .icon + span {
		margin-top: 2.3em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Positioning the icons and preparing for the animation*/
	.nav i {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.4em;
		border-radius: 20%;
		font-size: 1.3em;
		box-shadow: 0 0 0 30px transparent;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}	
	
	/* Animate the box-shadow to create the effect */
	.no-touch .nav a:hover i,
	.no-touch .nav a:active i,
	.no-touch .nav a:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
	}
	
	
	/* title image */
	
	.logo mark {
		margin-top:55px;
		}
	
	/* section & article settings */
	
	.section {
		font-size:1.05em;
		line-height:1.75em;
		}
	
	.section {
		margin-top:180px;
		}
	
	.info_wide {
		width:94%;
		margin-left:auto;
		margin-right:auto;
		}

	.info_left {
		width:47%;
		float:left;
		margin-left:10px;
		}
	
	.info_right {
		width:47%;
		float:right;
		margin-right:10px;
		}
	
	.sample {
		margin-left:4.3%;
		width:44%;
		max-width:200px;
		min-width:150px;
		display:inline-block;
		vertical-align:top;
		}
	
	.sample img {
		width:100%;
		margin:0;
	    -webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%);
		transition: 0.2s linear;
		}

	.sample a:hover img {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		filter: grayscale(0%);
		}

	/* Mouseover Sepia
	.sample img {
		width:100%;
		margin:0;
	    -webkit-filter: sepia(100%);
		-moz-filter: sepia(100%);
		-o-filter: sepia(100%);
		-ms-filter: sepia(100%);
		filter: sepia(100%);
		transition: 0.2s linear;
		}

	.sample a:hover img {
		-webkit-filter: sepia(0%);
		-moz-filter: sepia(0%);
		-o-filter: sepia(0%);
		-ms-filter: sepia(0%);
		filter: sepia(0%);
		}
	*/
	/* Mouseover shade
	.sample a:hover img {
  		opacity: 0.7;
  		filter: alpha(opacity=70);
 		-ms-filter: "alpha(opacity=70)";
		}
	*/
	
	.sample p {
		height:auto;
		display:block;
		font-size:0.95em;
		line-height:1.3em;
		margin:0 0 10px 0;
		color:#483F33;
		margin-bottom:15px;
		}
	
	.eg_cptn {
		width:52%;
		margin:-7px 0 0 -7px;
		max-height:120px;
		display:inline-block;
		vertical-align:top;
		overflow:hidden;
		}
	
	.eg_cptn p {
		font-size:0.975em;
		line-height:1.2em
		}
	
	.top_img {
		width:44%;
		max-width:200px;
		min-width:150px;
		}
	
	.top_img img {
		width:100%;
		margin:0;
	}
}

@media (min-width: 50em) and (max-width: 61.250em) {
	
	/* title image */
	
	.logo mark {
		margin-top:50px;
		}
	
	.header h1 {
	padding-top:10px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:50px;
		}
	
	.lgmark_n {
		display:none;
		}

	/* Size and font adjustments to make it fit into the screen*/
	.nav ul {
		font-size: 1.2em;
	}
	
	/* section & article settings */
	
	.section {
		margin-top:180px;
	}
	
	.section {
	font-size:1.05em;
	line-height:1.75em;
	}
}

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {
	
	/* title image */
	
	.logo mark {
		margin-top:50px;
		}
	
	.header h1 {
		padding-top:10px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:55px;
		}
	
	.lgmark_n {
		display:none;
		}
	
	/* Instead of adding a border, we transition the background color */
	/* index red */
	.no-touch .nav ul li:nth-child(6n+1) a:hover,
	.no-touch .nav ul li:nth-child(6n+1) a:active,
	.no-touch .nav ul li:nth-child(6n+1) a:focus {
		background: rgb(236,110,141);
	}
	/* about us pink */
	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		background: rgb(233,172,197);
	}
	/* planning yellow */
	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		background: rgb(235,183,110);
	}
	/* consulting green */
	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		background: rgb(108,193,171);
	}
	/* seminor blue */
	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		background: rgb(101,176,216);
	}
	/* contact brown */
	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		background: rgb(102,96,93);
	}
	
	
	.nav ul li {
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		-ms-transition: background 0.5s;
		transition: background 0.5s;
	}
	
	/* section & article settings */
	.section {
		margin-top:320px;
		}
	
	.section {
	font-size:1.05em;
	line-height:1.75em;
	}

	.article {
		margin-top:40px;
		}
		
	#aboutus .img {
	margin-top:-5px;
	width:20%;
	}
}


/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
	
	/* title image */
	
	.logo mark {
		margin-top:30px;
		}
	
	.header h1 {
	padding-top:10px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:55px;
		}
	
	.lgmark_n {
		display:none;
		}
	
	/* Creating the 2 column layout using floating elements once again */
	.nav li {
		display: block;
		float: left;
		width: 50%;
	}
	
	/* Adding some padding to make the elements look nicer*/
	.nav a {
		padding: 0.8em;		
	}

	/* Displaying the icons on the left, and the text on the right side using inlin-block*/
	.nav li span, 
	.nav li span.icon {
		display: inline-block;
	}

	.nav li span.icon {
		width: 50%;
	}

	.nav li .icon + span {
		font-size: 1em;
	}

	.icon + span {
		position: relative;
		top: -0.2em;
	}

	/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
	.nav li i {
		display: inline-block;
		padding: 8% 9%;
		border: 4px solid transparent;
		border-radius: 20%;
		font-size: 1.5em;
		background: rgba(255,255,255,0.1);
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	/* Transition effect on the border color */
	.no-touch .nav li:hover i,
	.no-touch .nav li:active i,
	.no-touch .nav li:focus i {
		border: 4px solid rgba(255,255,255,0.1);
	}
	
	.section {
		font-size:1.05em;
		line-height:1.75em;
	}

}

/*
@media (min-width:32.5em) and (max-width: 49.938em) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.section {
		font-size:.85em;
		line-height:1.25em;
		}
}
*/

/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
	
	/* title image */
	
	.logo mark {
		margin-top:30px;
		}
	
	.header h1 {
	padding-top:10px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:55px;
		}
	
	.lgmark_n {
		display:none;
		}
	
	/* Creating the 2 column layout using floating elements once again */
	.nav li {
		display: block;
		float: left;
		width: 50%;
	}
	
	/* Adding some padding to make the elements look nicer*/
	.nav a {
		padding: 0.8em;		
	}

	/* Displaying the icons on the left, and the text on the right side using inlin-block*/
	.nav li span, 
	.nav li span.icon {
		display: inline-block;
	}

	.nav li span.icon {
		width: 50%;
	}

	.nav li .icon + span {
		font-size: 1em;
	}

	.icon + span {
		position: relative;
		top: -0.2em;
	}

	/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
	.nav li i {
		display: inline-block;
		padding: 8% 9%;
		border: 4px solid transparent;
		border-radius: 20%;
		font-size: 1.5em;
		background: rgba(255,255,255,0.1);
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	/* Transition effect on the border color */
	.no-touch .nav li:hover i,
	.no-touch .nav li:active i,
	.no-touch .nav li:focus i {
		border: 4px solid rgba(255,255,255,0.1);
	}


	/* Section and Article settings */
	
	.info {
		overflow:hidden;
		font-size:1.05em;
		}
	
	.sample {
		display:inline-block;
		vertical-align:top;
		margin:0 2.2%;
		width:28.5%;
		max-width:220px;
		min-width:120px;
		}
	
	.sample img {
		width:100%;
		margin:0;
	    -webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%);
		transition: 0.2s linear;
		}

	.sample a:hover img {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		filter: grayscale(0%);
		}
	
	.sample p {
		height:auto;
		line-height:1.5em;
		margin:0 0 10px 0;
		color:#483F33;
		margin-bottom:15px;
		}
	
	.eg_cptn {
		width:67%;
		margin:-7px 0 0 -20px;
		max-height:125px;
		display:inline-block;
		vertical-align:top;
		overflow:hidden;
		}
	
	.eg_cptn p {
		font-size:0.975em;
		line-height:1.2em
		}
	
	.top_img {
		width:30%;
		max-width:200px;
		min-width:150px;
		}
	
	.top_img img {
		width:100%;
		margin:0;
	}
	
	#aboutus .img {
	margin-top:-5px;
	width:20%;
	}
}


/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
	
	/* title image */
	
	.logo mark {
		margin-top:30px;
		}
	
	.header h1 {
	padding-top:10px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.ttl_n {
		display:none;
		}
	
	.lgmark_w {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:55px;
		}
	
	.lgmark_n {
		display:none;
		}

	.nav li span.icon {
		width: 50%;
	}

	.nav li .icon + span {
		font-size: 0.9em;
	}

}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal;
	text-align: left;
	color: rgb(7, 16, 15);
	font-size: 1.2em;
	background: none;	
	border: none;
	border-bottom: 4px solid rgb(221, 221, 221);
	cursor: pointer;
}

.navtoogle i{
	z-index:-1;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
}


@media (max-width: 32.438em) {
	
	/* title image */
	
	.logo mark {
		margin-top:20px;
		}
	
	/* Title image swap */
	
	.ttl_w {
		display:none;
		}
	
	.ttl_n {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		}
	
	.titleset {
		margin-top:20px;
		}

	.lgmark_w {
		display:none;
		}
	
	.lgmark_n {
		display:block;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		padding-top:60px;
		}

	/* Unhiding the styled menu link */
	.nav .navtoogle{
		margin: 0;
		display: block;
	}
	
	/* Animating the height of the navigation when the button is clicked */
	
	/* When JavaScript is disabled, we hide the menu */
	.no-js .nav ul {
		max-height: 30em;
		overflow: hidden;
	}
	
	/* When JavaScript is enabled, we hide the menu */
	.js .nav ul {
		max-height: 0em;
		overflow: hidden;
	}
	
	/* Displaying the menu when the user has clicked on the button*/
	.js .nav .active + ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}

	/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
	
	.nav li span {
		display: inline-block;
		height: 100%;
	}

	.nav a {
		padding: 0.5em;		
	}
	
	.icon + span {
		margin-left: 1em;
		font-size: 0.8em;
	}
	
	/* Adding a left border of 8 px with a different color for each menu item*/
	/* index red */
	.nav li:nth-child(6n+1) {
		border-left: 8px solid rgb(162,58,101);
	}
	/* about us pink */
	.nav li:nth-child(6n+2) {
		border-left: 8px solid rgb(217,59,106);
	}
	/* planning yellow */
	.nav li:nth-child(6n+3) {
		border-left: 8px solid rgb(229,126,72);
	}
	/* consulting green */
	.nav li:nth-child(6n+4) {
		border-left: 8px solid rgb(62,136,122);
	}
	/* seminor blue */
	.nav li:nth-child(6n+5) {
		border-left: 8px solid rgb(51,108,151);
	}
	/* contact brown */
	.nav li:nth-child(6n+6) {
		border-left: 8px solid rgb(6,4,4);
	}

	/* make the nav bigger on touch screens */
	.touch .nav a {
		padding: 0.8em;
	}
	
	/* section & article settings */
	.section {
		margin-top:40px;
		}
	
	.section {
		font-size:1.05em;
		line-height:1.75em;
		}
	
	.article {
		margin-top:40px;
		}
	
	.info {
		overflow:hidden;
		}
	
	.sample {
		display:inline-block;
		vertical-align:top;
		margin:0 2.2%;
		width:96%;
		max-width:400px;
		min-width:120px;
		}
	
	.sample img {
		width:100%;
		margin:0;
	    -webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%);
		transition: 0.2s linear;
		}

	.sample a:hover img {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		filter: grayscale(0%);
		}
	
	.sample p {
		height:auto;
		line-height:1.5em;
		margin:0 0 10px 0;
		color:#483F33;
		margin-bottom:15px;
		}
	
	.eg_cptn {
		width:96%;
		margin:-7px 0 10px -10px;
		display:inline-block;
		vertical-align:top;
		overflow:hidden;
		}
	
	.eg_cptn p {
		font-size:0.975em;
		line-height:1.2em
		}
	
	.top_img {
		width:45%;
		max-width:200px;
		min-width:150px;
		}
	
	.top_img img {
		width:100%;
		margin:0;
	}
	
	#aboutus .img {
	margin-top:-5px;
	width:25%;
	}
}