/* .6830 .7513 .8264 .9091 1 1.1 1.21 1.331 1.464 1.611 1.772 1.949 2.144 */

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


body	{ margin: 0; color: #666666; font-family: Lato, sans-serif; font-size: 16px; }
h1	{ font-family: dartangnon_itclight; font-size: 2.5em; font-weight: normal }
a	{ color: #666666; text-decoration: none }
a:focus { outline: none; }
footer	{ background-color: white; padding: 10px; }

/****************************************** Navigation Modification *******************************************/
.nav				{ margin-bottom: 0; }
.navbar-left			{ background-color: #333334; border: medium none; height: 100%; left: 0; position: fixed; top: 0; z-index: 1000; }
.navbar-left ul li		{ position: relative; }
.navbar-left ul li a:link,
.navbar-left ul li a:visited	{ color: #999999; font-size: 18px; padding: 15px; }
.navbar-left ul li a:hover,
.navbar-left ul li a:focus	{ background: none; }
.navbar-left ul li a.enabled	{ color: #FFFFFF; }

.navbar-left .enabled .arrow { background-color: #333334; border: none; width: 15px; height: 15px; position: absolute;  right: -8px; bottom: 20px;
 transform:rotate(225deg); -ms-transform:rotate(225deg); /* IE 9 */ -webkit-transform:rotate(225deg); /* Safari and Chrome */ }

/********************************* Some Bootstrap Override *********************************/

hr				{ border: none;  border-top: 3px solid #FFFFFF; }

textarea, input[type="text"], input[type="submit"]	{ font-family: Lato, sans-serif; font-size: 16px; background-color: #B9C339; color: white; border: 1px solid white; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; width: 97% }
input[type="text"], input[type="submit"]		{ height: 40px; line-height: 40px; margin-bottom: 27px; }
textarea						{ padding-top: 0.5em; margin-bottom: 27px; overflow: auto }
textarea, input[type="text"]				{ padding-left: 1% }
input[type="submit"]:hover				{ color: #333333; background-color: #999999; }
input[type="submit"]					{ width: 150px; text-transform: uppercase; transition: all 0.3s ease 0s; }

/********************************** Scroll to Top link ***********************************/

#scrollToTop		{ width: 58px; height: 58px; position: fixed; bottom: 0; right: 0; display: none; cursor: pointer;
			transition:all 0.3s; z-index: 10000; background: url(../images/top_up.png); }
#scrollToTop:hover	{ background: url(../images/top_down.png) }



.page		{ position: relative; padding: 10px 0; line-height: 1.5; }
.center		{ text-align: center; }
.left		{ text-align: left; }
.right		{ text-align: right; }

.sleeve:after		{ content:''; display:block; clear: both }

div.sleeve > div			{ float: left; margin: 1%; }

div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

div#home > div.sleeve                > div			{ margin: 0 1% }
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(1)	{ width: 14.666%; height: 1px }					/* 2/12  Padder */
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2)	{ width: 56.3333% }						/* 7/12  Logo */
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(3)	{ width: 23% }							/* 3/12  Social buttons */
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1)	{ width: 48% }							/* 6/12  Main nav left */
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2)	{ width: 48%; text-align: right }				/* 6/12  Main nav right */

div#home						  a 			{ display: inline-block; }
div#home > div.sleeve:nth-of-type(1) > div                a			{ width: 56px; height: 56px; margin: 0 1%; }
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(3) a:nth-of-type(1)	{ background: #B9C339 url(../images/2630-46x46.gif) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(3) a:nth-of-type(2)	{ float: right; background: url(../images/contact_social_56.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(3) a:nth-of-type(3)	{ float: right; background: url(../images/fb_social_56.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

div#home > div.sleeve:nth-of-type(2) > div                a			{ width: 140px; height: 66px; margin: 0 1.5%; }
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1) a:nth-of-type(1)	{ background: url(../images/nav/who_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1) a:nth-of-type(2)	{ background: url(../images/nav/what_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1) a:nth-of-type(3)	{ background: url(../images/nav/enrol_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2) a:nth-of-type(1)	{ background: url(../images/nav/skills_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2) a:nth-of-type(2)	{ background: url(../images/nav/clients_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2) a:nth-of-type(3)	{ background: url(../images/nav/contact_nav_up.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 


div#home > div.bg		{ position: absolute; height: 100%; width: 100%; background: url(../images/home_img_main2.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

div#home > div.banner                           { position: absolute; top: 60%; left: 0; Xwidth: 70%; height: auto; margin: 1%; Xborder: 1px solid red  }
div#home > div.banner div                       { font-family: Helvetica; display: inline-block; Xwidth: auto; Xwidth: 820px; Xborder: 1px solid blue}
div#home > div.banner div h2:nth-of-type(1)     { font-weight: 300; font-size: 2em; color: #333333; Xmargin: 0 40px 0 40px; margin: 0 40px }

div#home > div.banner div                       { background: #ffffff; filter: alpha(opacity=70); background: rgba(255, 255, 255, .3);
						  border: 0.0001px solid transparent; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; }

div#home #menubutton { display: none }

div#whoami					{ background-color: #e5e5ad; }
div#whoami > div.sleeve > div:nth-of-type(1)	{ width: 14.666% }					/* 2/12 */
div#whoami > div.sleeve > div:nth-of-type(2)	{ width: 64.666% }				/* 8/12 */
div#whoami > div.sleeve > div:nth-of-type(3)	{ width: 14.444% }				/* 2/12 */
div#whoami img					{ width: 100px; float: right; overflow: hidden }

div#whatwedo					{ background-color: #B9C339; }
div#whatwedo > div.sleeve > div:nth-of-type(1)	{ width: 14.666%; overflow: hidden }			/* 2/12 */
div#whatwedo > div.sleeve > div:nth-of-type(1)	{ width: 14.666%; overflow: hidden }			/* 2/12 */
div#whatwedo > div.sleeve > div:nth-of-type(2)	{ width: 48%;  }					/* 6/12 */
div#whatwedo > div.sleeve > div:nth-of-type(3)	{ width: 31.3333%; overflow: hidden }			/* 4/12 */
div#whatwedo > div.sleeve:nth-of-type(3) > div:nth-of-type(2)		{ width: 48% }			/* 6/12 */
div#whatwedo > div.sleeve:nth-of-type(2) > div:nth-of-type(1) img 	{ width: 100px; float: right; margin-right: 30% }
div#whatwedo > div.sleeve:nth-of-type(2) > div:nth-of-type(3) img	{ width: 250px; float: left; margin-left: 20% }
div#whatwedo > div.sleeve:nth-of-type(3) > div:nth-of-type(1) img	{ width: 150px; float: right }

div#enrolwithus						{ background-color: white; }
div#enrolwithus > div.sleeve > div:nth-of-type(1)	{ width: 14.666% }				/* 2/12 */
div#enrolwithus > div.sleeve > div:nth-of-type(2)	{ width: 48%;  }				/* 6/12 */
div#enrolwithus > div.sleeve > div:nth-of-type(3)	{ width: 31.3333%;  }				/* 4/12 */
div#enrolwithus > div.sleeve > div:nth-of-type(2) a	{ display: inline-block; height: 68px; width: 68px; position: relative; top: 30px; left: 20px; background: #000000 url(../images/go_to_link.jpg) }
div#enrolwithus img					{ width: 100% }

div#ourskills					{ background-color: #B9C339; }
div#ourskills > div.sleeve > div:nth-of-type(1)	{ width: 14.666% }					/* 2/12 */
div#ourskills > div.sleeve > div:nth-of-type(2)	{ width: 48% }						/* 6/12 */
div#ourskills > div.sleeve > div:nth-of-type(3)	{ width: 31.333% }					/* 4/12 */

div#clients					{ background-color: white; }
div#clients > div.sleeve > div:nth-of-type(1)	{ width: 14.666% }					/* 2/12 */
div#clients > div.sleeve > div:nth-of-type(2)	{ width: 48% }						/* 6/12 */
div#clients > div.sleeve > div:nth-of-type(3)	{ width: 31.3333% }					/* 4/12 */
div#clients > div.sleeve > div:nth-of-type(3) img { width: 40%; margin: 5%; float: left }
div#clients > div.sleeve > div:nth-of-type(2) li { float: left; width: 48%; padding-left: 0; margin: 0 1% }
div#clients > div.sleeve > div:nth-of-type(2) ul { padding: 0 2em } 

div#contactus							{ background-color: #B9C339; }
div#contactus > div.sleeve:nth-of-type(1) > div:nth-of-type(1)	{ width: 14.666% }					/* 2/12 */
div#contactus > div.sleeve:nth-of-type(1) > div:nth-of-type(2)	{ width: 23% }						/* 3/12 */
div#contactus > div.sleeve                > div:nth-of-type(3)	{ width: 48% }						/* 5/12 */
div#contactus > div.sleeve:nth-of-type(2) > div:nth-of-type(1)	{ width: 6.333% }					/* 1/12 */
div#contactus > div.sleeve:nth-of-type(2) > div:nth-of-type(2)	{ width: 31.333% }					/* 4/12 */

/* responsive */

@media (min-width: 1200px) {

div#home > div.sleeve:nth-of-type(2) > div                a                     { margin: 0; }
 div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(1)       { width: 0%; margin: 0 0%; height: 1px }				/* remove lh panel */
 div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2)       { width: 73%; text-align: left }               			/* logo */
 div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2) img { Xwidth: 360px; Xheight: 138px; width: 390px; margin-left: -40px; }	/* logo */
 div#home > div.sleeve:nth-of-type(2) 				{ position: absolute; top: 90px; Xwidth: 100%; left: 340px; }		/* menu */
 div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1)       { margin: 0; width: auto }						/* 6/12  Main nav */
 div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2)       { margin: 0; width: auto }						/* 6/12  Main nav */
 div#home > div.bg			{ Xmargin-top: 20px; background: url(../images/home_img_main1.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
}


@media (max-width: 1023px) {
 div#home > div.banner div h2:nth-of-type(1)			{ font-size: 1.8em; }
 div#home > div.sleeve:nth-of-type(1) > div a			{ width: 45px; height: 45px; }
 div#home > div.sleeve:nth-of-type(2) > div a			{ width: 120px; height: 56.7px; margin: 0}

 div#home > div.banner div 					{ Xwidth: 670px;  }
}
@media (max-width: 770px) {
 body								{ font-size: 13px; }
 div#home > div.sleeve:nth-of-type(2) > div a			{ width: 93px; height: 43.84px; margin: 0}
 div#clients > div.sleeve > div:nth-of-type(3) img		{ width: 60%; display: block; margin: 1%; }
 div#home > div.banner div					{ Xwidth: 520px;  }
 div#home > div.banner div h2:nth-of-type(1)			{ font-size: 1.6em; }
}
@media (max-width: 599px) {
 div div.sleeve > div						{ width: 98% !important }
 div#home #menubutton						{ display: inline-block }
 div#home #mymainnav						{ display: none; background: white; margin-top: 20px; }
div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2) img { position: absolute; width: 160px; left: 15%; top: 0; margin-left: 0px; }     /* logo */
 div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1)	{ width: 98%; text-align: center }
 div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2)	{ width: 98%; text-align: center }
X div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1) a	{ width: 112px; height: 52.8px; margin: 0 1.5%; }
X div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2) a	{ width: 112px; height: 52.8px; margin: 0 1.5%; }
 div#whoami img							{ position: absolute; right: 0; top: 0 }
 div#clients > div.sleeve > div:nth-of-type(3) img		{ width: 23%; margin: 0 1%; float: left }
 div#whatwedo > div.sleeve > div:nth-of-type(3)			{ width: 100px; position: absolute;  }			/* 4/12 */
 div#whatwedo > div.sleeve:nth-of-type(2) > div:nth-of-type(3) img	{ width: 130px; float: right; margin-left: 20%; margin-top: 100px }
 div#whatwedo > div.sleeve:nth-of-type(2) > div:nth-of-type(1) img	{ display: none }
 div#whatwedo > div.sleeve:nth-of-type(3) > div:nth-of-type(1) img	{ display: none }
 div#home > div.banner div 					{ Xwidth: 390px;  }
 div#home > div.banner div h2:nth-of-type(1)			{ font-size: 1.4em; }
 div#home > div.bg			{ Xmargin-top: 20px; background: url(../images/home_img_main3.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
}
@media (max-width: 399px) {
.x div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(1) a	{ margin: 0 -10px}
.x div#home > div.sleeve:nth-of-type(2) > div:nth-of-type(2) a	{ margin: 0 -10px; }
X div#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2) img	{ width: 100% }
.xdiv#home > div.sleeve:nth-of-type(1) > div:nth-of-type(2) img { width: 130px }
.x div#home > div.sleeve:nth-of-type(1) > div a			{ width: 35px; height: 35px; }
 div#home > div.banner div					{ Xwidth: 300px;  }
 div#home > div.banner div h2:nth-of-type(1)			{ font-size: 1.2em; }
}