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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800);
/*@import url('nav.css');*/

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont78ce.eot?v=4.2.0'); src: url('../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont78ce.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont78ce.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont78ce.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #FFF; }
body, html { height: 100%; }
body { padding: 0; margin: 0; color: #151515; font-size: 100%; font-family: 'Open Sans', sans-serif; font-size: 14px; }
div, p, form, ul, li, h1, h2, h3, h4, h5, h6, a, span, form, img, br, input, textarea, label, dd, small { padding: 0; margin: 0; }
a, input { text-decoration: none; outline: none; }
img { border: 0; outline: none; }
ul { list-style-type: none; }
*:focus { outline: none; }
.clear { clear: both; line-height: 0 !important; font-size: 0 !important; height: 0px !important; }
.left { float: left; }
.right { float: right !important; }
.block { display: block; }
.inlineblock { display: inline-block; }
.relative { position: relative }
.absolute { position: absolute; }
.bdrT { border-top: 1px solid #d6d5d5; }
.bdrB { border-bottom: 1px solid #d6d5d5; }
.text { font-family: 'Open Sans', sans-serif; font-size: 18px; color: #536e00; font-weight: 600; }
.text2 { color: #598103; font: bold 14px Tahoma, Geneva, sans-serif; }
.link { color: #FFF; font-size: 11px; font-weight: 400px; font-style: italic; }
.link:hover { text-decoration: none; }
.link2 { color: #FFF; font-size: 16px; font-weight: 600px; text-decoration: none; }
.link2:hover { text-decoration: underline; }
.link3 { color: #df2026; text-decoration: none; }
.link3:hover { text-decoration: underline; }
.pdfLink { background: url(../images/pdfIcon.html) no-repeat 0 0; padding: 7px 0 8px 30px; color: #000; font: normal 12px/18px Tahoma, Geneva, sans-serif; text-decoration: none; }
.pdfLink:hover { text-decoration: underline; }
/*------------------------------------------------------------------*/

.column1 { background: #010948; height: 100%; width:159px; float: left; color: #FFF; position: relative; }
.logo { background: #FFF; padding: 10px 0; height: 100px; text-align: center; }
.logo a { display: inline-block; }
.desktopLogo { display: block; }
.mobileLogo { display: none; }
.SliderNavBtn { display: none; }

.nav { }
.nav li { background: #010948; border-bottom: 1px dotted #4e537f; text-align: left; overflow: hidden; position: relative; padding-left:25%;}
.nav li a { color: #FFF; display: block; padding: 10px 0; font-size: .63em; font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: uppercase; background: url(../images/navHover.png) repeat-x 0 0; position: relative; z-index: 2; }
.nav li b { position: absolute; z-index: 1; display: block; background: #cf1218; width: 100%; height: 200px; left: 0; top: 0; }
.nav li a span {/*  display: inline-block; background-image: url(../images/navIcons.png); background-repeat: no-repeat; padding-top: 22px; background-position: 50% 0; */ }
.nav li a.company span { background-position: 50% -100px; }
.nav li a.team span { background-position: 50% -301px; }
.nav li a.solutions span { background-position: 50% -505px; }
.nav li a.showcase span { background-position: 50% -699px; }
.nav li a.clients span { background-position: 50% -900px; }
.nav li a.careers span { background-position: 50% -1106px; padding-top: 26px; }
.nav li a.contact span { background-position: 50% -1316px; }
.nav li.navActive { background: #cf1218; }
.nav li:hover a.company span { background-position: 50% 0; }
.nav li:hover a.team span { background-position: 50% -200px; }
.nav li:hover a.solutions span { background-position: 50% -402px; }
.nav li:hover a.showcase span { background-position: 50% -607px; }
.nav li:hover a.clients span { background-position: 50% -802px; }
.nav li:hover a.careers span { background-position: 50% -998px; padding-top: 26px; }
.nav li:hover a.contact span { background-position: 50% -1213px; }
.nav li.navActive a.company span { background-position: 50% 0; }
.nav li.navActive a.team span { background-position: 50% -200px; }
.nav li.navActive a.solutions span { background-position: 50% -402px; }
.nav li.navActive a.showcase span { background-position: 50% -607px; }
.nav li.navActive a.clients span { background-position: 50% -802px; }
.nav li.navActive a.careers span { background-position: 50% -998px; padding-top: 26px; }
.nav li.navActive a.contact span { background-position: 50% -1213px; }
/* another menu */
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:#010948;
    border-bottom:dotted 1px #4e537f;
    width:145px;
    cursor:pointer;
	
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#ec3636;
    position:relative;
	/* border-bottom:1px dotted #fff; */
	/* width:155px; */width:105%;
}
#menuwrapper ul li:nth-child(3):hover{
    background-color:#a90177;
	/* border-bottom:1px dotted #fff; */
}
#menuwrapper ul li:nth-child(4):hover{
    background-color:#64006b;
	/* border-bottom:1px dotted #fff; */
}
#menuwrapper ul li:nth-child(5):hover{
    background-color:#24418f;
	/* border-bottom:1px dotted #fff; */
}
#menuwrapper ul li:nth-child(6):hover{
    background-color:#00a5cb;
	/* border-bottom:1px dotted #fff; */
}
#menuwrapper ul li:nth-child(7):hover{
    background-color:#d89b2b;
	/* border-bottom:1px dotted #fff; */
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:13px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
	font-size:10px;
	font-weight:bold;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
	z-index:999;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:155px;
    top:0px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li:hover li{
	border-bottom:1px dotted #fff;}
#menuwrapper ul li ul li{
    background-color:#ec3636;
}
.menu-background2 li{background-color:#ec3636 !important;} /*school*/
.menu-background2 li:hover{background-color:#fff !important;}
.menu-background2 li:hover a{color:#ec3636 !important;}

.menu-background3 li{background-color:#a90177 !important;} /*school*/
.menu-background3 li:hover{background-color:#fff !important;}
.menu-background3 li:hover a{color:#a90177 !important;}

.menu-background4 li{background-color:#64006b !important;} /*admission */
.menu-background4 li:hover{background-color:#fff !important;}
.menu-background4 li:hover a{color:#64006b !important;}

.menu-background5 li{background-color:#24418f !important;} /* people */
.menu-background5 li:hover{background-color:#fff !important;}
.menu-background5 li:hover a{color:#24418f !important;}

.menu-background6 li{background-color:#00a5cb !important;} /* reseach */
.menu-background6 li:hover{background-color:#fff !important;}
.menu-background6 li:hover a{color:#00a5cb !important;}

.menu-background7 li{background-color:#d89b2b !important;} /* reseach */
.menu-background7 li:hover{background-color:#fff !important;}
.menu-background7 li:hover a{color:#d89b2b !important;}
.menu-color1{border-left:4px solid transparent;}
.menu-color2{border-left:4px solid #ec3636;}
.menu-color3{border-left:4px solid #a90177;}
.menu-color4{border-left:4px solid #64006b;}
.menu-color5{border-left:4px solid #24418f;}
.menu-color6{border-left:4px solid #00a5cb;}
.menu-color7{border-left:4px solid #d89b2b;}
.menu-color8{border-left:4px solid transparent;}
.menu-color9{border-left:4px solid transparent;}
.menu-color10{border-left:4px solid transparent;}
.menu-color11{border-left:4px solid transparent;}
/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#fff;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;
}

/* mega menu */
.menu-bgcolor2{background-color:#ec3636;}
.menu-bgcolor3{background-color:#a90177;}
.menu-bgcolor4{background-color:#64006b;}
.menu-bgcolor5{background-color:#24418f;}
.menu-bgcolor6{background-color:#00a5cb;}
.menu-bgcolor7{background-color:#d89b2b;}
.mega-drop-menu{width:400px;padding: 0px 25px 25px 25px;}
.mega-drop-menu h2{font-size:14px;padding:5px 0;border-bottom:1px dotted #fff;}
.menu-inner-left{float:left;width:44%;padding-right:5%;}
.menu-inner-right{float:left;width:44%;padding-left:5%;border-left:1px dotted #fff;}
.mega-menu-pst p{border-bottom:1px dotted #fff;padding:6px 5px;font-size:11px;}
.mmp-color2 p:hover{background:#fff;color:#ec3636;}
.mmp-color3 p:hover{background:#fff;color:#a90177;}
.mmp-color4 p:hover{background:#fff;color:#64006b;}
.mmp-color5 p:hover{background:#fff;color:#24418f;}
.mmp-color6 p:hover{background:#fff;color:#00a5cb;}
.mmp-color7 p:hover{background:#fff;color:#d89b2b;}
.height5{height:5px;}
.height10{height:10px;}
.pic {
    max-width: 100%;
    display: inline-block;
    line-height: 0px;
}




.footerCommon { position: absolute; left: 0; bottom:10px; width: 149px; color: #ababab; font: normal 9px Arial, Helvetica, sans-serif;}
.batchmates_logo { display: block; text-align: center; position:relative; width:125px; height:51px; margin:0 auto; }
.batchmates_logo a{text-align: center; position:absolute; left:0; top:0; width:125px; height:51px; }
.footerCommon a.footerLink { display: block; color: #959595; font: normal 10px Arial, Helvetica, sans-serif; margin: 0 0 2px 10px; }
.footerCommon span { display: block; margin: 5px 0 0 10px; }
.smedia {/*  background: #1e1e1e; padding: 7px 0; border-bottom: 1px solid #2f2f2f; border-top: 1px solid #2f2f2f; font-size: 12px; margin: 10px 0; text-align:center; */     font-size: 12px;
    margin: 10px;}
.smedia a { display: inline-block; margin-right:10px; }

@media screen and (max-width: 1000px) {
body { overflow-x: hidden }
.column1 { background: #FFF; height: auto; width: 100%; }
.desktopLogo { display: none; }
.mobileLogo { display: block; }
.logo { float: left; padding: 5px 0 0px; height: auto; }
.SliderNavBtn { display: block; float: left; background: url(../images/snavbtn.gif) no-repeat 50% 50%; height: 60px; width: 54px; border-right: 1px solid #dddcdc; text-indent: -9999px; }
#slidingNav { display: block; width: 200px; background: #272727; position: absolute; left: -200px; top: 60px; z-index: 9999; overflow: auto; }
.footerMobile { background: #272727; height: auto; }
.footerCommon { display: none; }
.mobilefooterCommon { padding: 15px 0; display: inline-block; width: 100%; text-align: center; border-top: 1px solid #2f2f2f; color: #595959; }
.mobilefooterCommon a.footerLink { color: #595959; }
.smedia { text-align: center; }
.mobilefooterCommon span { display: block; }
}