/*
 * Font
 * Normalise 
 * layout 
 * Helper  
 */ 


/*-----------------------*
   Font
-----------------------*/

@import url(../fonts/fonts.css);

/*-----------------------*
   Normalise
-----------------------*/
/*article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

h1{ font-size:1.9em} 
h2{ font-size:1.5em}
h3{ font-size:1em}
p{ font-size:0.88em} 
img{ width:100%; height:auto; border:none; outline:none; } 
a img, a img:focus, a:focus, a:active{ outline:none; }
.bold{ font-weight:bold }
.relate{ position:relative }

input[type="radio"]{ cursor:pointer; outline:none; border:none; }
hr{ margin:0; padding:0; }
*/
/*-----------------------*
   Layout Common
-----------------------*/
/**{ margin:0; padding:0;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; }  */

.fullwidth{ width: 100%; /*border: 2px dotted green;*/   }
.container{ margin:0 auto; height:auto; /*background:url(../img/12_col.gif) top center;*/ }

/*-----------------------*
   Helper
-----------------------*/

.hidden { display: none; }
.bordercheck{ border:1px solid #000 !important; }

.clearfix{ zoom: 1;}
.clearfix:before, .clearfix:after{ content: ""; display: table;}
.clearfix:after { clear: both;}
 
.browsehappy{ position:relative; top:0; z-index:2; display:block; padding:10px; background:#FFCC33; color:#000000; text-align:center; }
.browsehappy a{ color:#e60000; }
.browsehappy a:hover{ text-decoration:none; }

.fl{ float: left; }
.fr{ float: right; }

header ul { list-style-type: none; list-style-image: none; padding: 0; margin: 0;}

.unstyled{
	/*margin: 0 auto;
	padding: 0;
	border: 0;
	list-style-type: none;
	width: 100%;
	width:100%\9; */
} 

/* -- Mobile Burger -- */ 
#simple-menu{
	display: none;
} 

/*-----------------------*
   Layout
-----------------------*/ 
/*.page{
	width: 100%;
	height: 99%;
	overflow: auto;
	padding-right: 15px; 
}*/

.isotope {
  display:block; 
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto; 
  max-width: 1250px;     
  position:relative; 
}
.isotope:after {
  content: '';
  display: block;
  clear: both;
} 
 
.project {   
  width: 25%;/*290px*/  
  height: auto; 
  float: left;
  /*padding: 1% !important;  */
  padding: 1% 1.6% 1% 0 !important;
} 
.project > img{
  width: 100%;
  height: auto;
  display: block;
} 
.tile{
  width: 100%;
  background: #fff;
  border: 1px solid #cdd1d3;
  overflow: hidden;
  font-size: 1em;
  font-family: 'FS-Albert-Light', Arial, Helvetica, sans-serif;
  position: relative;
  z-index: 1;
} 
.tile:hover{ 
  /*border-radius: 7px; */
}
.tile h3{
  margin: 0;
  padding: 1.5em 20px 0;
  font-family: 'robotoregular', Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-size: 14px;
  text-align: left;
  /*text-transform: uppercase;*/
  color: #343434;
}
.about-project{
  padding: 10px 20px 36px;
}
.tile p{
  margin: 0;
  padding: 0; 
  margin-bottom: 0;
  text-align: left;
  font-family: 'robotoregular', Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 15px;
  color: #666666;
}
.main-category{  
  display: inline-block; 
  float: left; 
}
.main-category>a{
	font-weight: normal;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 1em 1em 0.915em 2.5em;
	text-align: right;
} 
a.link.phone{
	
}
.subCategory{ 
  color: #a1a1a1;
  font-size: .8em;
} 
.galleryicon{
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0;
  float: left;
  font-style: normal;
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.galleryicon.image {
  background-position: center 2px;
  background-repeat: no-repeat;
}

.link.image, .galleryicon.image {
  background-image: url(../img/image_icon.png);
}

.galleryicon.video {
  background-position: center 2px;
  background-repeat: no-repeat;
}

.link.video, .galleryicon.video {
  background-image: url(../img/video_icon.png);
}

.project > div > img{
	overflow: hidden;
	transition: .2s;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	cursor: pointer; 
}

.project > div:hover > img{
	overflow: hidden;
	transition: .2s;
	-webkit-transform: scale(1.05, 1.05);
   transform: scale(1.05, 1.05); 
}

.project > div:hover{
	overflow: hidden; 
	-webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
   	      backface-visibility: visible;
}

.link{
	background-repeat: no-repeat;
	background-position: 10px 12px;  
}
.link.all{
	/*background-image:url(../img/latest_icon.png);*/
	background-color: #193B56;
}



/*header*/
header{
	/*background: #1e64a1;*/
	position: relative;/*fixed*/
	top: 0; 
	padding: 0; /*0 1%*/
	width: 100%;
	height: auto;
	/*max-width: 1600px;*/
	margin: 0 auto;
	font-family: 'FS-Albert-Light', Arial, Helvetica, sans-serif;
	transition: top 0.2s ease-in-out;
	z-index: 15;
}

.nav-up {
  top: -120px;
}

.wrap1600{
	text-align: center;
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1600px;
	background-color: #1e64a1;
}

.head-wrap{
	background: #1e64a1; /*114b79*/
	/*height: 48px;*/
	height: 49px;
	/*padding:0 1%;	*/
	position: fixed;
	z-index: 3;
	top: 0;
	display: none;
}

.navigation{
	/*position: relative;*/
	float: right;
	/*display: block;*/ 
	width: auto;
	/*top: -43px;*/
	display: none;
}


.sub-category-list{
  position: absolute; 
	width: 100%; 
	left: 0; 
	top: 48px;
	padding: 0;
	display: none;
}

.sub-category-list:before{
	content: '';
	width: 100%;
	left: -100%; 
	top: 0;
	position: absolute;  
	padding: 1.3em 0; 
	padding: 1.35em 0\9;
	background-color: inherit; 
}
.sub-category-list:after{
	content: '';
	width: 100%;
	right: -100%;
	right: 0\9;
	top: 0;
	position: absolute; 
	padding: 1.3em 0; 
	padding: 1.35em 0\9;
	background-color: inherit; 
}
  
.shiftdown{
  padding-top: 50px; 
}
.more{
  padding-top: 90px;
  /*min-height: 600px; */
}

.sub-category-list li{ 
	float: left;
	padding: 0 .25em 0 .25em; 
}

.sub-category-list li a{ 
	color: #fff;
	padding: 0.5em;
	text-decoration: none;
	display: inline-block;   
	font-size: .9em;
  line-height: 1.75em;
  border-bottom: 3px solid transparent;
}
.sub-category-list li a:hover{
	color: #ffffff;
	background-color:rgba(255,255,255,.2); 
} 

.print.sub-category-list.sub-category-list li a:hover, .print.sub-category-list.sub-category-list li a.active{
	color: #ffffff;
	/*background-color: #1D9648; */
	border-bottom: 3px solid #1D9648; 
}
.mobile.sub-category-list.sub-category-list li a:hover, .mobile.sub-category-list.sub-category-list li a.active{
	color: #ffffff;
	/*background-color: #CB741E; */
	border-bottom: 3px solid #CB741E;  
} 
.digital.sub-category-list.sub-category-list li a:hover, .digital.sub-category-list.sub-category-list li a.active{
	color: #ffffff;
	/*background-color: #CF2E7B;*/
	border-bottom: 3px solid #CF2E7B;  
} 
.web.sub-category-list.sub-category-list li a:hover, .web.sub-category-list.sub-category-list li a.active{
	color: #ffffff;
	/*background-color: #008FC3;*/
	border-bottom: 3px solid #008FC3; 
}

/* Demo and live links */
.about-project a{ 
	text-decoration: none;
	border: 1px solid #dddddd;
	border-radius: 10px;
	/*background: url('../img/project-link-bg.jpg') repeat-x 0 0;*/
	background-size: contain; 
	-webkit-border-radius: 10px;
	-ms-border-radius: 5px;
	color: inherit;
	display: block;
	float: left;
	font-size: .9em;
	margin-left: 5%; 
	padding: 3.5% 5%;
	text-align: center; 
	width: 42.25%;
	transition: all .2s;
} 
.about-project a:hover{
	background: url('../img/project-link-bg_h.jpg') repeat-x 0 0;
	background-size: contain;
	color: #00afef; /*#ec4794*/ 
}
.web .about-project a:hover{
	background: url('../img/project-link-bg_h.jpg') repeat-x 0 0;
	background-size: contain;
	color: #00afef; /*#ec4794*/
	box-shadow: 0px 0px 7px #5DE4F5; 
}
.demo-live-links{
	border-top: 1px solid #ebebeb;
}
	

/*.sub-category-list li a:first-child{ 
	margin: 0 1em 0 0;
}*/ 


/*@media screen and (min-width: 1601px){ 
	.unstyled{  
	  width: 100%; 
	} 
}*/
.video-wrap { 
	padding: 0; margin: 0;
	position: absolute; 
	width: auto;  
	display: block;
	visibility: hidden; 
}
video {
	width: 100%;
	/*max-width: 720px;*/
	height: auto;
	position: relative;
	margin: 0 auto;
	display: block;
	transition: none; 
}

iframe,
embed,
object {
	max-width: 100%;
}

.popup {
	width: 100%; 
	margin:0px auto; 
	position: fixed;
	height: 100%;
	z-index: 3;
	text-align: center;
	display: inline-block;
	overflow: hidden;
	display: none;
	background: url('../img/fancybox_overlay.png'); 
	top: 0;
	left: 0;
}

ul.gallery{
	display: none;
}

.vendor {
	padding: 2%;
	background: #d1eed1;
	margin-bottom: 2em;
}

.unsupported {
	background: #fddfde;
}

#closeVideoPop{ 
	position: absolute;
	top: -15px;
	right: -15px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 10;
	background-image: url('../img/fancybox_sprite.png'); 
} 

video#video_background{
	/*visibility: hidden;*/
	display: none;
	height: 100%;
	z-index: 3 !important;
	/*width: 100% !important;*/
	max-width: 100% !important;
	/*height: 100% !important;*/
	left: auto;
	right: auto;
	background-color: #000;
	transition: none;  
	object-fit: cover !important;
}

.video-controls{
	position: fixed;
	width: 100%;
	text-align: center;
	height: auto;
	/*background: red;*/
	z-index: 4;
	bottom: 0; 
	padding-bottom: .75em;
} 
.video-controls button{
	background-color: none;
	border: none;
}
.video-controls button:focus{ 
	outline: none;
}
#play{
	position: absolute;
	left: 1%;
	top: 15px;
	width: 36px;
	height: 36px;
	background:url(../img/play-pause.png) no-repeat 0 0;
	display:none;
}
#pause{
	position: absolute;
	left: 1%;
	top: 15px;
	width: 36px;
	height: 36px; 
	background:url(../img/play-pause.png) no-repeat 0 -36px;
}
#skip{
	width: auto;
	color: #fff;
	height: 50px;
	position: relative;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	background:url(../img/scroll-down.png) no-repeat center 0;
	line-height: 5em;
	/*background-color: #02457C;*/
}

#fullscreen{
	position: absolute;
	right: 1%;
	top: 15px;
	width: 32px;
	height: 32px;
	background:url(../img/fullscreen-icon.png) no-repeat 0 0;
}

#videoPosterImg{
	background: url('../video/poster.jpg') 50% 50% no-repeat;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute; /*fixed*/
	z-index: 3;
	width: 100%;
	height: 100%;
	display: none; 
}

   .backdrop{
			position: fixed;
			background:rgba(0,0,0,0.7);
			width: 100%;
			height: 100%;
			z-index: 2;
			top: 0;
			left: 0;
			display: none;  
		}
		.related-popup{ z-index: 2; position: absolute;}
		.work{ 
			z-index: 2;
			position: relative;
			width: 100%;
			max-width: 768px;
			margin: 0 auto;
			padding: 2.25em 0; 
			height: auto; 
		}
		.current{
			font-family: 'FS-Albert-Light', Arial, Helvetica, sans-serif;
			font-size: 1em;
			width: 768px; /* 74% / 100% */
			overflow: hidden;
			/*overflow: auto;
			height: 500px;*/
			position: relative;
			float: left;
			margin: 0 0 0 0;
			/*height: auto;*/
			/*background-color: #f1f1f1;  
			-webik-border-radius: 10px;
			  -moz-border-radius: 10px;
			       border-radius: 10px;*/
		}
		
		.current::-webkit-scrollbar { width: 0 !important; }
		.current { /*overflow: -moz-scrollbars-none;*/ -ms-overflow-style: none; }
		
		.current > .demo-live-links a{
			padding: 1.5% 5%;
			text-align: center;
			width: auto;
			margin-left: 2%;
		}
		.current > .demo-live-links a:hover{  
			box-shadow: 0px 0px 7px #5DE4F5; 
		}
		.current > .demo-live-links a:first-child{
			/*margin-left: 0;*/ 			
		}		
			
		.related{
			width: 25%;
			position: relative;
			font-family: 'FS-Albert-Light', Arial, Helvetica, sans-serif;
			float: right;
			background: #fff;
			margin: 0 0;
			border-radius: 10px;
			overflow: hidden; 
			height: 600px; 
		}
		.related>h3{
			background-color: #f1f1f1;
			padding: .5em;
		}
		.pop-main-category{
			display: block;
			overflow-y: scroll;
			height: 93%;
			padding-bottom: .25em;  
		}
		.pop-main-category li{
			width: 92%; 
			display: block;
			margin: 0 auto;
			height: auto;
			overflow: hidden;
			border: 1px solid #D5D5D5; 
			margin-top: 0.4em;
			-webik-border-radius: 10px;
			  -moz-border-radius: 10px;
			       border-radius: 10px;
		}
		.pop-main-category a{ text-decoration: none; display: block; color: inherit; }
		.pop-main-category img{ display: block; }
		
		.pop-main-category .icon{ margin: 0 .4em 6px; }
		.pop-main-category .mainCategory{ padding-top: .1em; }
		.pop-main-category .subCategory{ font-size: .75em; }
		.pop-main-category .about-project{ padding: .5em 0; } 
		img.current-img{ 
			width: 100%;
			display: block;
			height: auto; 
		}  
		h1.current-title{
			font-size: 1em;
			background-color: #000;
			padding: .5em;
			margin-top: 0;			
		}
		h1.current-title span{
			display: inline-block;
      width: 70%; /*72.5%*/
			padding: 10px 0px 5px;
			font-size: 18px;
			font-family: 'robotoregular', arial;
			color: #fff;
			font-weight: normal;
			text-transform: uppercase;
		}

		h1.current-title p {
			font-family: 'robotoregular', arial;
			color: #fff;
			font-weight: normal;	
		}
		.current-title .about-project{
			position: relative;
			float: none;
  			width: 100%;
			display: block; 
			padding: 0;
		}
		.current-title .icon{
			margin: 0 10px 0 0;
		}
		.close-work{
			display: block; 
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 0;
			width: 35px;
			height: 35px;
			background:url(../img/close-work.png) no-repeat right center;
			z-index: 10;
		}

/*footer{
	position: relative;
	color: #FFFFFF;
  font-size: .8em;
  text-align: center;
  padding: 1em;
  margin-top: 2em;
  background: #1E64A1; 
	width: 100%; 
}*/

/*footer a{
	color: #FFFFFF; 
  text-decoration: underline; 
}

footer a:hover{ 
  text-decoration: none; 
}
*/
/* Intro Text */

.intro-box{ 
	position: relative;
	padding: 1%;
	width: 100%;
	max-width: 1600px;
	margin: 1em auto 0; 
	font-family: 'FS-Albert-Light', Arial, Helvetica, sans-serif;
}

.intro-box > div{
	padding: 2%;
	border: 1px solid #cdd1d3;
	border-radius: 10px;
	background-color: #fff;
}

.idea{ 
	position: relative;
	width: 32.875%;
	text-align: center;
	padding-top: 5em;
  -webkit-transition: visibility 2s ease;
  -o-transition: visibility 2s ease;
  transition: visibility 2s ease;
}
.visibile-me{
	visibility: visible;
  -webkit-transition: visibility 2s ease;
  -o-transition: visibility 2s ease;
  transition: visibility 2s ease;
}

.idea h3{
	text-transform: uppercase;
	font-weight: bold;
	color: #1e64a1;
	font-size: 1.35em;
	line-height: 1.5em;
}

.idea p.dream-text{
	color: #00afef; 
}
p.dream-text.big{
	font-size: 1.35em;
	line-height: 1.5em;
}
p.dream-text{
	font-size: 1.65em;
}

div.line{ 
	position: relative;
	width: 0;
	height: 2px;
	margin: 1.4em auto 1em;
	background-color: #1e64a1;
}
div.line.width80p{
	width: 80%;
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	transition: width .5s ease;
}
div.line.width0p{
	width: 0%;
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	transition: width .5s ease;
}
.down.animated, .up.animated{
  animation-duration: 1.5s;
}
.line:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1E64A1;
  left: 0;
  top: -4px;
  border-radius: 10px;
}
.line:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1E64A1;
  right: 0;
  top: -4px;
  border-radius: 10px;
}

.idea p.tagline{
	color: #052b54;
	font-size: 1.1em;
	line-height: 1.5em;
}
	/*
	.head-infographics{
		position: absolute;
		right: 20px;
		top: 0;
		float: right; 
	}
	.head-infographics .unstyled li{
		margin-left: 10px;
		width: 38px;
		height: 49px;
		position: relative;
		float: left;
		background: no-repeat center center;
	}
	.unstyled li.h1{
		background-image: url('../img/intro/head1.png');
		-webkit-animation-duration: 1.5s;
  	animation-duration: 1.5s;
	}
	.unstyled li.h2{
		background-image: url('../img/intro/head2.png');
		-webkit-animation-duration: 1s;
  	animation-duration: 1s;
	}
	.unstyled li.h3{
		background-image: url('../img/intro/head3.png');
		-webkit-animation-duration: .5s;
  	animation-duration: .5s;
	}
*/
.welcome-text{
	background: url('../img/intro/seperator-vertical.jpg') no-repeat left center;
	width: 67.125%;
  padding: 2% 5%;
}

.welcome-text>h3{
	color: #21b354;
	font-size: 1.5em;
	line-height: 2.5em;
}
.welcome-text>.text{
	margin-bottom: 1em;
}
.welcome-text p{
	font-size: 1.05em;
	line-height: 1.75em;
}


/* EndOf Intro Text */

.selectpicker {
	float: left;
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #8f8e8e;
	border: 1px solid #e4e2e2;
	-webkit-appearance: normal;
	-webkit-appearance: initial;
	appearance: initial;
	background: url(../img/dd-arrow.jpg) no-repeat 95% center;
	width: 30%;
	max-width:90px; 
}

#galleryContainer .project {
	transition:none;
}



@media screen and (max-width: 1600px){ 
/*	.unstyled{  
	  width: 100%; 
	} */
}

@media screen and (max-width: 960px) {
	/*header{ padding: 0; }
	#logo.fl {
		float: none;
		margin: 0 auto;
		padding: 0.75em 0 0.75em 0;
  }
  .navigation{ 
		float: none;
		margin: 0 auto;
		width: 562px; 
	}*/
	/*.shiftdown{

		padding-top: 120px;
		padding-bottom: 120px;
	}*/
	.more{
		padding-top: 155px
	}
	.main-category > a.link{
		background-image: none;
		background-position: center center;
	}
	.main-category>a { 
		padding: 1em; 
	}
	/*header{
		background: #114b79 !important; 
	}
	.head-wrap { 
		padding: 0;
	}*/

	.current {
		width: 90%;
		margin:0 auto; 
	}
}

@media screen and (min-width: 1281px) {
	.project {   
		/*width: 16.65%;*/
		width:25%;
	}
	.isotope { max-width: 1250px; }
}

@media screen and (max-width: 1280px) {
	.project {   
		width: 25%;   
	}
}

@media screen and (max-width: 960px){
  .project {   
    width: 33.33%; 
  }
	.sub-category-list { 
		top: 115px; 
	} 
	.header{
		background: #114b79;  
	}
} 

@media screen and (max-width: 1023px){
  .project {   
    width: 50%;/*290px*/   
  }
	.navigation{
		display: none;
	} 
	#simple-menu{
		display: block;
		color: #fff;
		text-decoration: none;
		position: fixed;
		top: 0;
		right: 10px;
		width: 22px;
		height: 22px;
		padding: 30px 15px;
		background: url(../images/menu.png) no-repeat center center;
		cursor: pointer;
		z-index: 10000;
	}
	.shiftdown{
		padding-top: 70px;
	}
}

@media screen and (max-width: 360px){
  .project {   
    width: 50%;/*290px*/   
  }
	ul.navigation{
		display: none;
	}
}    
@media only screen and (max-width: 730px){
	.current{
		width: 90%;
		float: none;
	}
	.related{
		width: 100%;
		margin-top: 1em;
		background: none;
		height: 350px;
	}
	.pop-main-category{ background: #fff; padding: .25em .25em .9em .25em; }
	.pop-main-category > li {
		width: 32.3333333333%;
		float: left;
		margin: .5%;
		background: #fff;
		border: 1px solid #D5D5D5;
		overflow: hidden;
		/* background-color: rgba(0,0,255,0.5); */
		-webik-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
/*	.about-project{
		padding: .25em 0
	}*/
	.related-popup{
		width: 98%;
    margin: 0 auto; 
	}
	.idea { 
	  width: 100%;
	  float: none;
	  -webkit-transition: all .2s ease;
	  -o-transition: all .2s ease;
	  transition: all .2s ease;
	  margin-bottom: 1em;
	}
	.intro-box{
		margin: 1em auto 1em;
	}
	.welcome-text{
		padding: 7.5% 5%;
		width: 100%;
		background: url('../img/intro/seperator-horizontal.jpg') no-repeat center top;
	}
}

@media only screen and (max-width: 565px){ 
	h1.current-title span {
		display: inline-block;
		width: 67%;
	}
}

@media only screen and (max-width: 480px){ 
	.pop-main-category{ background-color: none; padding: .25em .25em .9em .25em; } 
	.pop-main-category > li {
			width: 49%;
			margin: 1% .5%;
	}
	.about-project{ text-align: center; }
	.about-project p{ display: none;  }
	.about-project .icon{ display: inline-block; float: none; margin: 0; }
	
	h1.current-title span {
		display: inline-block;
		width: 90%;
	}
	.current-title .about-project{ width: 10%; }
}

@media only screen and (max-width: 340px){
	body{
		min-width: 320px;
		overflow-x: scroll; 
	} 
}