@charset "UTF-8"; /*/////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////																												/////*/
/*/////		Andaman Energy & Infrastructure																			/////*/
/*/////						- Website & CSS																			/////*/
/*/////																												/////*/
/*/////		--------------------------------------------------------------------------------------------------- 	/////*/
/*/////																												/////*/
/*/////														Design by Alex Cowley - http://www.alexcowley.co.uk		/////*/
/*/////																												/////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i');


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////		CSS Reset																								/////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

* { display:inherit; text-decoration:none; border:none; padding:0px; margin:0px; outline:none;} 
base, basefont, datalist, head, meta, script, style, title, noembed, param, template { display: none; }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////		Base Code																								/////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

body	{
	background:#EC644C;
	color:#FFF;
	font-family:Raleway, Arial, Helvetica, sans-serif;
	font-size:15px;
}

header	{
	position:fixed; top:0px; left:0px; right:0px; z-index:100;
	color:#FFF;
	text-align:center;
	
	padding:50px 50px;
	
	transition:ease-in-out 350ms;
}
	
	header h1	{
		display:inline-block;
		text-indent:-50000px;
		width:0px; height:40px;
		padding:0px 0px;
		position:relative; z-index:1000000000000;
		
		transform:translateY(-50%);
		transition:ease-in-out 200ms 350ms, opacity ease-in-out 600ms;
	}
		header h1:after	{
			content:""; display:block;
			position:absolute; left:10px; top:0px; z-index:1000;
			height:60px; width:0px;
			
			background:url(images/icon.png) center no-repeat;
			background-size:60px;
			
			opacity:0;
			transform:scale(0);
			transition:ease-in-out 600ms 350ms, opacity ease-in-out 600ms, transform ease-in-out 400ms;
		}
		
		header.min h1	{
			padding:0px 25px;
			width:40px;
			
			opacity:1;
				
			transition:ease-in-out 200ms;
		}
			header.min h1:after	{
				width:60px;
				transform:scale(1);
				opacity:1;
				transition:ease-in-out 600ms, transform ease-in-out 400ms 350ms;
			}
	
	nav a	{
		display:inline-block;
		padding:0px 15px;
		position:relative;
		
		color:rgba(255,184,174,1);
		
		transition:ease-in-out 750ms, color ease-in-out 200ms;
	}
	
		nav a:before	{
			display:block; content:""; clear:both;
			position:absolute; bottom:-8px; left:15px; right:15px; z-index:100;
			height:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px;
			background:#FFF; opacity:0;
			
			transform:translateX(80%) scale(2,.5);
			transform-origin:left;
			transition:ease-in-out 150ms;
		}
		nav a:after	{
			display:block; content:""; clear:both;
			position:absolute; bottom:-8px; left:15px; right:15px; z-index:200;
			height:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px;
			background:#F9DF34;
			opacity:0;
			
			transform:translateX(-80%) scale(2,.5);
			transform-origin:right;
			transition:ease-in-out 200ms;
		}
		nav a:hover:before	{
			height:4px;
			opacity:.5;
			transform:translateX(0) scale(1);
		}
		nav a:hover:after	{
			height:4px;
			opacity:1;
			transform:translateX(0) scale(1);
		}
		.min nav a	{
			color:rgba(255,255,255,0.2);
		}
		nav:hover a	{
			color:rgba(255,255,255,0.25);
			
			transition:ease-in-out 750ms;
		}
		nav a:hover, .min nav a:hover	{
			color:rgba(255,255,255,1);
			
			transition:ease-in-out 160ms;
		}
		


section	{
	display:block;
	min-height:100vh;
}
	section.split:after	{
		content:""; display:block; clear:both;
	}
	section.split .left	{
		width:50%; min-height:100vh;
		float:left;
		box-sizing:border-box;
		padding:50px;
		position:relative;
	}
	section.split .right	{
		width:50%; min-height:100vh;
		float:right;
		box-sizing:border-box;
		padding:50px;
		position:relative;
	}

blockquote	{
	max-width:20vw;
	display:block;
	font-size:32px;
	padding:50px;
	
	color:#CCC;
	font-weight:bold;
	
	border-left:#252525 20px solid;
}

footer	{
	display:block;
	padding:100px;
	text-align:center;
	
	background:#2C2C2C;
	color:#888;
}
	footer p	{
		display:block;
		padding-top:15px;
	}
	footer a	{
		display:inline-block;
		position:relative;
		color:#AAA;
	
		transition:ease-in-out 160ms;
	}
		footer a:after	{
			display:block; content:""; 
			position:absolute; left:0px; bottom:-4px; right:0px;
			height:4px; background:#444;
			
			transition:ease-in-out 160ms;
		}
	footer a:hover	{
		color:#EEE;
	}
		footer a:hover:after	{
			background:#EC644C;
		}






section.home	{
	background:#EC644C url(images/turbine_bg_2.jpg) center right no-repeat;
	background-size:cover;
}
	
	.home h1	{
		display:block;
		position:absolute; top:50%;
		width:400px; height:150px;
		text-indent:-50000px;
		
		background:url(images/logo-1.png) center no-repeat;
		
		transform:translateY(-50%) translateX(30vh);
		background-size:contain;
	}

section.tagline	{
	background:#2C2C2C;
	position:relative;
}
	.tagline:after	{
		background:#EC644C;
		content:""; clear:both; display:block; height:200px; width:100vw;
		position:absolute; left:0px; top:0px; z-index:1;
	}
	.tagline .left	{
		background:#EC644C;
		z-index:1;
		border-bottom-right-radius:150px;
	}
	.tagline .right	{
		background:#2C2C2C;
		z-index:2;
		border-top-left-radius:150px;
	}
	
	.tagline blockquote	{
		position:absolute; left:50%; top:50%;
		transform:translate(-50%,-50%);
		border-top-left-radius:20px;
	}
	
	.mask	{
		width:25vw; height:25vw;
		position:absolute; left:50%; top:50%;
		transform:translate(-50%,-50%);
		overflow:hidden;
	}
		.mask:after	{
			content:""; display:block;
			width:25vw; height:25vw;
			position:absolute; left:0px; top:0px;
			
			background:url(images/mask_a.png) center no-repeat;
			background-size:100%;
			
			transform:scale(1.02)
		}
		
	.slider	{
		display:block;
		width:24vw; height:24vw;
		margin:4px;
		overflow:hidden;
		transform:rotate(-44deg) scale(1.25);
		
	}
		.scroll	{
			display:block;
			height:600px; width:3000px;
			background:url(images/tide_scroll.jpg) left;
			background-size:auto 600px;
			
            animation: scroller 45s infinite linear;
      		-moz-animation: scroller 45s infinite linear;
    		-webkit-animation: scroller 45s infinite linear;
         	-o-animation: scroller 45s infinite linear;
		}
		.scroll-clouds	{
			display:block;
			height:600px; width:3000px;
			background:url(images/cloud_scroll.png) left;
			background-size:auto 600px;
			position:absolute; left:0px; top:0px;
			
            animation: scroller 30s infinite linear;
      		-moz-animation: scroller 30s infinite linear;
    		-webkit-animation: scroller 30s infinite linear;
         	-o-animation: scroller 30s infinite linear;
		}
		.scroll-clouds-2	{
			display:block;
			height:600px; width:3000px;
			background:url(images/cloud_scroll.png) left;
			background-size:auto 600px;
			position:absolute; left:0px; top:0px;
			
            animation: scroller 15s infinite linear;
      		-moz-animation: scroller 15s infinite linear;
    		-webkit-animation: scroller 15s infinite linear;
         	-o-animation: scroller 15s infinite linear;
		}
		

/* Animation Keyframes*/
@keyframes scroller {
    0% { transform:translateX(0px) }
    100% { transform:translateX(-1500px) }}
@-moz-keyframes scroller {
    0% { transform:translateX(0px) }
    100% { transform:translateX(-1500px) }}
@-webkit-keyframes scroller {
    0% { transform:translateX(0px) }
    100% { transform:translateX(-1500px) }}
@-o-keyframes scroller {
    0% { transform:translateX(0px) }
    100% { transform:translateX(-1500px) }}



.whatwedo	{
	color:#FFF;
	background:#2C2C2C;
}
	.whatwedo .left	{
		background:#2C2C2C;
	}
	.whatwedo .right	{
		background:url(images/structure.jpg) center no-repeat;
		background-size:cover;
		border-top-left-radius:150px;
	}
	.whatwedo .left span	{
		display:block; padding:50px;
		width:60%;
		position:absolute; top:50%; left:50%;
		transform:translateY(-50%) translateX(-50%);
	}
	.whatwedo h2	{
		display:block;
		margin-bottom:15px;
		font-size:32px;
		font-weight:bold;
	}
	.whatwedo p	{
		display:block;
		line-height:1.75em;
		margin-bottom:15px;
	}






.ourinspiration	{
	color:#FFF;
	background:#139BB3 url(images/island.jpg) no-repeat left;
	background-size:contain;
}
	.ourinspiration .right span	{
		display:block; padding:50px; width:60%;
		position:absolute; top:50%; left:50%;
		transform:translateY(-50%) translateX(-50%);
	}
	.ourinspiration h2	{
		display:block;
		margin-bottom:15px;
		font-size:32px;
		font-weight:bold;
	}
	.ourinspiration p	{
		display:block;
		line-height:1.75em;
		margin-bottom:15px;
	}
	
	
	
	

.team	{
	color:#FFF;
	background:#2C2C2C;
	text-align:center;
}
	.team h1	{
		display:block;
		padding-top:20vh;
		padding-bottom:50px;
		
		font-size:72px;
		font-weight:bold;
		color:#CCC;
	}
	
	
	.tabs	{
		display:block;
		width:80%; min-height:550px;
		margin:0px auto;
		position:relative; 
		
	}
		.tabs_fade	{
			display:block; margin-left:-50px; margin-right:-50px;
			position:relative;
			padding-left:50px; padding-right:50px;
			padding-top:50px;
			height:20vw;
		}
			.tabs_fade:before	{
				content:""; display:block; clear:both;
				position:absolute; left:-1px; top:0px; bottom:0px; z-index:100000;
				width:50px;
				background:url(images/tab_fade_left.png) left repeat-y;
			}
			.tabs_fade:after	{
				content:""; display:block; clear:both;
				position:absolute; right:-1px; top:0px; bottom:0px; z-index:100000;
				width:50px;
				background:url(images/tab_fade_right.png) right repeat-y;
			}
		.tabs_header	{
			display:block; margin-left:-50px; margin-right:-50px;
			position:relative;
			padding-left:50px; padding-right:50px;
			height:20vw; overflow:hidden; overflow-x:scroll;
		}
		.tabs_header::-webkit-scrollbar { 
			display: none; 
		}
			.tabs_header ul	{
				display:block;
				position:relative; z-index:10;
				width:auto; height:20vw;
				white-space:nowrap;
			}
			.tabs_header li	{
				display:inline-block;
				height:20vw; width:auto;
				margin-right:13px;
				position:relative;
				border-radius:5px;
				overflow:hidden;
			}
				.tabs_header li:last-child	{
					margin-right:0px;
				}
			.tabs_header li:before	{
				display:block; content:""; clear:both;
				position:absolute; bottom:0px; left:50%; z-index:1000;
				height:60px; width:60px; background:#EC644C;
				transform:translateX(-50%) translateY(80px) rotate(45deg);
				transition:ease-in-out 160ms;
			}
			.tabs_header li:after	{
				display:block; content:""; clear:both;
				position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:10000;
				border:0px #EC644C solid;
				pointer-events:none; cursor:pointer;
				opacity:0;
				transition:ease-in-out 420ms;
			}
			.tabs_header li.active:after	{
				opacity:1;
				border:10px #EC644C solid;
			}
			.tabs_header li.active:before	{
				transform:translateX(-50%) translateY(40px) rotate(45deg);
				transition:ease-in-out 460ms;
			}
			.tabs_header li img	{
				height:20vw; width:auto;
				cursor:pointer;
				opacity:.25;
				position:relative; z-index:100;
				border-radius:5px;
					
				transition:ease-in-out 160ms;
			}
			.tabs_header li img:hover	{
				opacity:.55;
			}
			.tabs_header li.active img	{
				opacity:1;
			}
			.tabs_header li img:active	{
				transform:scale(0.98);
			}
			.tabs_header li span	{
				display:block;
				position:absolute; left:0px; top:0px; right:0px; z-index:500;
				background:rgba(155,155,155,0.75);
				padding:10px; padding-top:12px;
				box-shadow:0px 0px 4px rgba(0,0,0,0.2);
				transition:ease-in-out 460ms;
				opacity:1;
			}
			.tabs_header li.active span	{
				opacity:0;
			}
	
	.tab-content	{
		display:block;
		padding:50px; margin-top:20px;
		
		background:#EC644C url(images/turbine_bg_2.jpg) right bottom no-repeat;
		background-size:30vw;
		border-radius:5px;
		
		text-align:left;
	}
		.tabs h2	{
			display:block;
			padding-bottom:35px;
			
			font-size:32px;
			font-weight:bold;
		}
			.tabs h2 em	{
				display:inline-block;
				padding-left:25px;
				font-size:12px;
				text-transform:uppercase;
				letter-spacing:2px;
				font-weight:normal;
			}
			
		.tab_text	{
			display:block;
			width:80%;
			line-height:1.75em;
			color:#ffcec8;
			margin-bottom:50px;
			
			-webkit-column-count: 2; /* Chrome, Safari, Opera */
			-moz-column-count: 2; /* Firefox */
			column-count: 2;
			
			-webkit-column-gap: 50px;
			-moz-column-gap: 50px;
			column-gap: 50px;
		}
			.tab_text p	{
				display:block;
				margin-bottom:25px;
			}
			
		.tab-content ul	{
			display:block;
		}
		.tab-content li	{
			display:inline-block;
		}
		.tab-content ul a	{
			display:inline-block;
			padding:20px 30px;
			margin-right:16px;
			border-radius:5px;
			font-weight:bold;
			
			background:#2C2C2C;
			color:#FFF;
		
			transition:ease-in-out 100ms;
		}
			.tab-content ul a:hover	{
				background:#F9DF34;
				color:#2C2C2C;
			}
	
	















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

section.home	{
	background:url(images/turbine_bg_2.jpg) #EC644C bottom right no-repeat;
	background-size:110vh;
	border-bottom-left-radius:150px;
}
	.home h1	{
		left:50%; top:45%;
		width:300px;
		
		transform:translateY(-50%) translateX(-50%);
		background-size:contain;
	}
section.home:after	{
	content:""; display:block; clear:both;
	position:absolute; bottom:0px; left:0px; right:0px; z-index:-1;
	height:160px;
	background:#2C2C2C;
}
	
	
section.split.tagline	{
	min-height:100px;
}
section.split.tagline:after	{
	display:none;
}
	section.split.tagline .right	{
		float:none;
		width:100%;
		border-top-left-radius:0px;
		min-height:100px;
		padding:100px;
	}
		section.split.tagline .right blockquote	{
			position:relative; top:auto; left:auto;
			transform:none;
			max-width:100%;
			border:none;
			text-align:center;
			line-height:1.25em;
		}
		
	section.split.tagline .left	{
		display:none;
	}
	
	
section.split.whatwedo	{
	min-height:100px;
}
	section.split.whatwedo .left	{
		min-height:100px;
		width:100%;
		background:#EC644C;
		border-top-right-radius:150px;
	}
		section.split.whatwedo .left span	{
			position:relative; left:auto; top:auto;
			transform:none;
			min-width:100px;
			width:auto;
		}
	section.split.whatwedo .right	{
		display:none;
	}


	
	
.ourinspiration	{
	background-size:auto 100%; background-position:-50vh;
}
	section.split.ourinspiration  .right	{
		width:65%;
	}
	
	
			
.tab_text	{
	width:100%;
}
	
}

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

section.home	{
	background-size:80vh;
	background-position:right 50vh;
	border-bottom-left-radius:0px;
}
	.home h1	{
		top:50%;
		width:65vw;
	}
section.home:after	{
	display:none;
}

nav	{display:none;}
	
	
section.split.tagline	{
	min-height:100px;
}
	section.split.tagline .right	{
		width:100%;
		padding:5px;
	}
		section.split.tagline .right blockquote	{
			font-size:20px;
			text-align:center;
			line-height:1.25em;
		}
		
	section.split.tagline .left	{
		display:block; float:none;
		width:100%;
		min-height:100px; padding:0px;
		border-radius:0px;
	}
		.mask	{
			width:100vw; height:75vw;
			position:relative; left:auto; top:auto;
			transform:none;
			margin:0px auto;
		}
			.mask:before	{
				display:block; content:""; clear:both;
				position:absolute; left:50%; top:50%; z-index:1000;
				width:30vw; height:30vw;
				background:url(images/icon.png) center no-repeat;
				background-size:contain;
				transform:translate(-50%,-50%);
			}
			.mask:after	{
				display:none;
			}
			
		.slider	{
			width:100vw; height:100vw;
			transform:translateY(-15%) rotate(-44deg) scale(1.35);
			
		}
	
	
	
	
	
	
	

section.split.whatwedo .left	{
	background:none;
	border-top-right-radius:0px;
	padding:0px;
}


	
	
.ourinspiration	{
	background-size:200vw; background-position:center -65vw;
	min-height:100px;
}
	section.split.ourinspiration .right	{
		float:none;
		width:100%; min-height:100px;
	}
		section.split.ourinspiration .right span	{
			position:relative; left:auto; top:auto;
			transform:none;
			min-width:50%; width:100%;
			box-sizing:border-box;
			padding:0px; margin-top:50vw;
		}
	
	
	
.team	{
}
	.team h1	{
		display:block;
		padding-top:10vh; padding-bottom:25px;
		
		font-size:32px;
		color:#FFF;
	}
	
	
	.tabs	{
		width:100%;
	}
		.tabs_fade	{
			margin-left:0px; margin-right:0px;
			padding-left:50px; padding-right:50px;
			padding-top:50px;
			height:50vw;
			overflow:hidden;
		}
		
		.tabs_header	{
			display:block; margin-left:-50px; margin-right:-50px;
			position:relative;
			padding-left:75px; padding-right:75px;
			height:50vw; overflow:hidden; overflow-x:scroll;
		}
		.tabs_header::-webkit-scrollbar { 
			display: none; 
		}
			.tabs_header ul	{
				height:50vw;
			}
			.tabs_header li	{
				display:inline-block;
				height:50vw; width:auto;
				margin-right:16px;
				position:relative;
				border-radius:5px;
				overflow:hidden;
			}
				.tabs_header li:last-child	{
					margin-right:50px;
				}
			.tabs_header li:before	{
				display:block; content:""; clear:both;
				position:absolute; bottom:0px; left:50%; z-index:1000;
				height:60px; width:60px; background:#EC644C;
				transform:translateX(-50%) translateY(80px) rotate(45deg);
				transition:ease-in-out 160ms;
			}
			.tabs_header li:after	{
				display:block; content:""; clear:both;
				position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:10000;
				border:0px #EC644C solid;
				pointer-events:none; cursor:pointer;
				opacity:0;
				transition:ease-in-out 420ms;
			}
			.tabs_header li.active:after	{
				opacity:1;
				border:10px #EC644C solid;
			}
			.tabs_header li.active:before	{
				transform:translateX(-50%) translateY(40px) rotate(45deg);
				transition:ease-in-out 460ms;
			}
			.tabs_header li img	{
				height:50vw; width:auto;
				cursor:pointer;
				opacity:.25;
				position:relative; z-index:100;
				border-radius:5px;
					
				transition:ease-in-out 160ms;
			}
			.tabs_header li img:hover	{
				opacity:.55;
			}
			.tabs_header li.active img	{
				opacity:1;
			}
			.tabs_header li img:active	{
				transform:scale(0.98);
			}
	
	.tab-content	{
		display:block;
		padding:50px; margin-top:20px;
		
		background:#EC644C url(images/turbine_bg_2.jpg) right bottom no-repeat;
		background-size:30vw;
		border-radius:0px;
		
		text-align:left;
	}
		.tabs h2	{
			display:block;
			padding-bottom:35px;
			
			font-size:32px;
			font-weight:bold;
		}
			.tabs h2 em	{
				display:block;
				padding-left:0px; padding-top:15px;
				font-size:12px;
				text-transform:uppercase;
				letter-spacing:2px;
				font-weight:normal;
			}
			
		.tab_text	{
			display:block;
			width:100%;
			line-height:1.75em;
			color:#ffcec8;
			margin-bottom:50px;
			
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
			
			-webkit-column-gap: 0px;
			-moz-column-gap: 0px;
			column-gap: 0px;
		}
			.tab_text p	{
				display:block;
				margin-bottom:25px;
			}
			
		.tab-content ul	{
			display:block;
		}
		.tab-content li	{
			display:inline-block;
		}
		.tab-content ul a	{
			display:block;
			padding:16px 20px 15px;
			margin-right:16px; margin-bottom:10px;
			border-radius:5px;
			font-weight:bold;
			
			background:#2C2C2C;
			color:#FFF;
		
			transition:ease-in-out 100ms;
		}
			.tab-content ul a:hover	{
				background:#F9DF34;
				color:#2C2C2C;
			}
	
}