@charset "utf-8";
/* CSS Document */
/**************************************************

	Item Name  : Metro - CSS3 Mega Menu
	Item URI   : http://codecanyon.net/item/metro-css3-mega-menu/1402313?ref=downv
	Author     : Valeriu Timbuc
	Version    : 2.0
	Author URI : http://vtimbuc.net/

**************************************************/

/**************************************************
	
	Table of Contents

	01. BASIC MENU LAYOUT
	02. BOX TYPES & STYLES
	03. CSS3 ANIMATIONS
	04. MEGA DROP DOWNS
	05. CONTENT STYLES

**************************************************/



/* BASIC MENU LAYOUT | START */
/* ********************************************** */

@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis:400,500);

*{
	margin:0;
	padding:0;
}
body{	background-color:#e9e9e9;}

/* Global Times Versions Available: */
.gtva{
    padding-bottom:5%;
}
.gtva p{
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#ed1b23;
}
	
/* ul .metro */
ul.metro {
	position: relative;
	z-index: 200;
	clear: both;
	margin:0 auto;
	width:90%;
}
ul.metro2 {
	position: relative;
	z-index: 200;
	clear: both;
	margin:0 auto;
	padding-top: 3%;
	width:90%;
}

ul.metro:before,
ul.metro:after {
	display: block;
	float: none;
	clear: both;
}
ul.metro2:before,
ul.metro2:after {
	display: block;
	float: none;
	clear: both;
}
ul.metro li {
	list-style: none;
	float:left;
	width:49.9%;
}
ul.metro2 li {
	list-style: none;
	float:left;
	width:99.8%;
}
ul.metro li a.tile {
	text-decoration: none;
	position: relative;
	display: block;
	background-size:contain;
	margin:5px;
	height: auto;
	overflow: hidden;
}

ul.metro2 li a.tile2 {
	text-decoration: none;
	position: relative;
	display: block;
	background-size:contain;
	margin:5px;
	height: auto;
	overflow: hidden;
}

/* CSS3 ANIMATIONS | START */
/* ********************************************** */

ul.metro li a.tile img {
	background-color: #fff;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .2s ease-in-out;
}

ul.metro2 li a.tile2 img {
	background-color: #e50014;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .2s ease-in-out;
}
/* Rotate 360deg Animation */
ul.metro li.rotate360 a.tile:hover img,
ul.metro2 li.rotate360 a.tile2:hover img {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

/* Rotate 180deg Animation */
ul.metro li.rotate180 a.tile:hover img,
ul.metro2 li.rotate180 a.tile2:hover img {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* Scale 10% Animation */
ul.metro li.scale10 a.tile:hover img,
ul.metro2 li.scale10 a.tile2:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/* Scale -10% Animation */
ul.metro li.envato a.tile:hover img,
ul.metro2 li.envato a.tile2:hover img {
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-o-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
}

/* Flip Animation */
ul.metro li.flip a.tile:hover img,
ul.metro2 li.flip a.tile2:hover img {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}

/* ********************************************** */
/* CSS3 ANIMATIONS | END */

/* MEGA DROP DOWNS | END */
/* ********************************************** */

/* Drop Box Style */
ul.metro > li > div,
ul.metro2 > li > div {
	position: absolute;
	z-index: 290;
	top: 100px;
	left: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	overflow: hidden;
	height: 0;
	background: #eeeeee;
	padding: 0;

	-webkit-transition: opacity 200ms ease-in-out 200ms;
	-moz-transition: opacity 200ms ease-in-out 200ms;
	-o-transition: opacity 200ms ease-in-out 200ms;
	-ms-transition: opacity 200ms ease-in-out 200ms;
	transition: opacity 200ms ease-in-out 200ms;
}

ul.metro > li:hover > div
ul.metro2 > li:hover > div {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	overflow: visible;
	height: auto;
	padding: 10px;
}


/* Drop Box Size */
ul.metro li .drop-1-col { width: 190px; }
ul.metro li .drop-2-col { width: 380px; }
ul.metro li .drop-3-col { width: 570px; }
ul.metro li .drop-4-col { width: 760px; }

/* Drop Box Columns Size */
ul.metro .col-1 { width: 170px; }
ul.metro .col-2 { width: 360px; }
ul.metro .col-3 { width: 550px; }
ul.metro .col-4 { width: 740px; }

ul.metro .col-1,
ul.metro .col-2,
ul.metro .col-3,
ul.metro .col-4 {
	float: left;
	margin: 10px;
}

/* Drop Box Arrow */
ul.metro > li > div:before,
ul.metro2 > li > div:before {
	width: 0;
	height: 0;
	border-bottom: 10px solid #eeeeee;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	content: '';
	position: absolute;
	top: -7px;
	left: 40px;
}

ul.metro > li.big-tile-text > div:before,
ul.metro > li.big-tile-image > div:before {
	top: -10px;
	left: 95px;
}

/* 1 Columns Center Align */
ul.metro li.center .drop-1-col {
	left: -55px;
}

ul.metro li.center .drop-1-col:before {
	left: 95px;
}

ul.metro li.big-tile-text.center .drop-1-col,
ul.metro li.big-tile-image.center .drop-1-col {
	left: 0px;
}

/* 2 Columns Center Align */
ul.metro li.center .drop-2-col {
	left: -150px;
}

ul.metro li.big-tile-text.center .drop-2-col,
ul.metro li.big-tile-image.center .drop-2-col {
	left: -95px;
}

ul.metro li.center .drop-2-col:before,
ul.metro li.big-tile-text.center .drop-2-col:before,
ul.metro li.big-tile-image.center .drop-2-col:before {
	left: 190px;
}

/* 3 Columns Center Align */
ul.metro li.center .drop-3-col {
	left: -245px;
}

ul.metro li.big-tile-text.center .drop-3-col,
ul.metro li.big-tile-image.center .drop-3-col {
	left: -190px;
}

ul.metro li.center .drop-3-col:before,
ul.metro li.big-tile-text.center .drop-3-col:before,
ul.metro li.big-tile-image.center .drop-3-col:before {
	left: 285px;
}

/* 4 Columns Center Align */
ul.metro li.center .drop-4-col {
	left: -340px;
}

ul.metro li.big-tile-text.center .drop-4-col,
ul.metro li.big-tile-image.center .drop-4-col {
	left: -285px;
}

ul.metro li.center .drop-4-col:before,
ul.metro li.big-tile-text.center .drop-4-col:before,
ul.metro li.big-tile-image.center .drop-4-col:before {
	left: 380px;
}

/* 1, 2, 3, 4 Columns Right Align */
ul.metro > li.right > div {
	left: auto;
	right: 0;
}

ul.metro > li.right > div:before {
	left: auto;
	right: 40px;
}

ul.metro > li.big-tile-text.right > div:before,
ul.metro > li.big-tile-image.right > div:before {
	left: auto;
	right: 95px;
}

/* Right Side for SideBar */
ul.metro > li.right-top > div {
	top: 0;
	left: 100%;
}

ul.metro > li.right-bottom > div {
	bottom: 0;
	top: auto;
	left: 100%;
}

ul.metro > li.right-top > div:before,
ul.metro > li.right-bottom > div:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #eeeeee;
	border-left: 10px solid transparent;
}

ul.metro > li.right-top > div:before {
	top: 40px;
	left: -17px;
}

ul.metro > li.right-bottom > div:before {
	bottom: 40px;
	top: auto;
	left: -17px;
}

/* Left Side for SideBar */
ul.metro > li.left-top > div {
	top: 0;
	right: 100%;
	left: auto;
}

ul.metro > li.left-bottom > div {
	bottom: -14px;
	top: auto;
	right: 13px;
	left: auto;
}

ul.metro > li.left-top > div:before,
ul.metro > li.left-bottom > div:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
	border-left: 10px solid #eeeeee;
}

ul.metro > li.left-top > div:before {
	top: 40px;
	right: -17px;
	left: auto;
}

ul.metro > li.left-bottom > div:before {
	bottom: 40px;
	top: auto;
	right: -17px;
	left: auto;
}

/* ********************************************** */
/* MEGA DROP DOWNS | END */



/* CONTENT STYLES | END */
/* ********************************************** */

/* Styles Reset */
ul.metro div a,
ul.metro div p,
ul.metro div img,
ul.metro div ul,
ul.metro div ul li,
ul.metro div ul li a,
ul.metro2 div a,
ul.metro2 div p,
ul.metro2 div img,
ul.metro2 div ul,
ul.metro2 div ul li,
ul.metro2 div ul li a, {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
	float: none;
	text-decoration: none;
	font: 13px Tahoma, Geneva, sans-serif;
	color: 333;
}

/* Paragraph */
ul.metro div p,
ul.metro2 div p {
	line-height: 18px;
}

/* Links */
ul.metro div a,
ul.metro2 div a {
	color: #333;
}

ul.metro div a:hover,
ul.metro2 div a:hover {
	color: #666;
}

/* Links List */
ul.metro div ul.links li,
ul.metro2 div ul.links li {
	padding: 10px 0;
	border-bottom: 1px solid #e1e1e1;
}

ul.metro div ul.links li:first-child,
ul.metro2 div ul.links li:first-child {
	margin-top: none;
}

ul.metro div ul.links li:last-child,
ul.metro2 div ul.links li:last-child {
	margin-bottom: none;
	border: none;
}

ul.metro div ul.links li a,
ul.metro2 div ul.links li a {
	font-size: 14px;
}

/* ********************************************** */
/* CONTENT STYLES | END */
/* Envato Custom Tiles Colors: */
ul.metro li.envato a.tile,ul.metro li.envato a.tile {
	background-color: #FFF;
}                                                        
/*ul.metro2 li.envato a.tile2 {
	background-color: #ed1b23;
}                                                        */
/* Example: ul.metro li.yourColorClass a.tile { background-color: #ffffff; } */