@charset "utf-8";
/* CSS Document */
body{font-family:'Roboto Slab';}
*{padding: 0px; margin: 0px;}
.top-header{ width:100%; background-color:#126ead; float:left;}
.hd-menu{width:100%; background-color:#3f4749; float:left;}
.hd-menu ul{ margin-top:6px;}
.hd-menu ul li{ display:inline;}
.hd-menu ul li a{ color:#fff;font-family:'Roboto Slab'; font-size:13px; margin-left:28px;}

.ann{ float:left; width:100%; background-image:url(../images/arrow.png); background-position:right; background-repeat:no-repeat;}
.ann p{ color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:15px; padding-top:5px; margin: 0 0 3px;}
.news{ float:left; width:100%; padding-top:5px;}
.news p{color:#fff; font-family:'Roboto Slab'; font-size:15px; padding-top:1px; margin: 0 0 3px; }
.logo-bro-contact{ width:100%; float:left; padding:25px 0px 15px 0px;}
.logo{ width:100%; float:left;}
.app-d{ margin-top:15px;}
.app{ color:#fff; background-color:#d9534f; border-radius:5px; padding:7px 18px; font-family:'Roboto Slab'; font-size:14px; margin-right:5px; margin-top:10px;}
.app:hover{ background-color:#d33f3b; color:#fff; text-decoration:none}
.down{color:#fff; background-color:#337ab7; border-radius:5px; padding:7px 18px; font-family:'Roboto Slab'; font-size:14px; margin-right:5px; margin-top:10px;}
.down:hover{color:#fff; text-decoration:none; background-color:#1a6aaf;}
.phone-nember{}
.phone-nember p{ font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#353535; font-weight:bold; line-height:20px;}
.email p{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#353535; font-weight:bold; line-height:35px;}

.bannner{ float:left; width:100%; }
.menu-cus{ background-color:rgba(53,53,53,0.8); float:left; width:100%; z-index:9999; position:absolute; top:208px}
.advanced{ background-color:#126ead; float:left; width:100%;margin-top: -1px; text-align: center;}
.advanced ul{ margin:8px; padding-left: 0px !important}
.advanced ul li{ list-style:none; display:inline}
.advanced ul li a{font-family:'Roboto'; font-size:16px; color:#fff; padding:0px 40px; margin-left:0px; font-weight:400; border-right:1px solid #ffa656;}
.why-ocbridge{background-color:#292780; float:left; width:100%; padding:5px 15px;}

.new-nav{background-color:#f4f4f4; float:left; width:100%;}
.new-nav ul{margin:8px; padding-left: 0px !important}
.new-nav ul li{ list-style:none; display:inline}
.new-nav ul li a{color: #333;
font-size: 14px;
line-height: 25px;padding: 12px 20px; text-align:center; font-family:'Roboto';
    background-position-x: 0px;
    background-position-y: 2px;}
.new-nav ul li a.Programs {
    background-position: 0 -27px;
}
.new-nav ul li a.Campus {
    background-position: 0 -57px;}
.new-nav ul li a.Placements {
    background-position: 0 -87px;
}
.new-nav ul li a.About {
    background-position: 0 -117px;
}
.wel-come{ width:100%; float:left; margin:40px 0px;}
.wel-co{ background-color:#eaeaea; width:100%; padding:10px; float:left; border-radius:5px;}
.wel-co h1{ font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#126ead; text-transform:uppercase; font-weight:bold; letter-spacing:1px;}
.wel-co h2{ font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#000; font-weight:bold;}
.wel-co h2 span{ color:#126ead;}
.wel-co p{font-family:'Roboto Slab'; font-size:13px; color:#222222; line-height:23px; text-align:justify;}
.our-mission{background-color:#eaeaea; width:100%;  float:left; height:248px;}
.our-mission h2{ background-color:#25287f; text-align:center; color:#fff; font-family:'Roboto Slab'; font-size:23px; margin:0px; padding:6px 0px;}
.our-mission p{font-family:'Roboto Slab'; font-size:13px; color:#222222; line-height:25px; text-align:justify; padding:10px 15px;}
.courses{ width:100%; float:left; background-image:url(../images/header-pattern.png); padding:15px 0px;}
.courses h2{font-family:'Roboto Slab'; font-size:20px; color:#353535; margin:0px; padding:0px;}
.courses h2 span{ color:#126ead; text-transform:uppercase; font-size:33px; font-weight:bold;}
.bor{border-right:1px solid #2e319c;}
.life{ width:100%; float:left; background-color:#272782; padding:15px 0px;}
.life-ox{width:100%; float:left;}
.life-ox h2{font-family:'Roboto Slab'; font-size:29px; color:#fff;}
.life-ox h2 span{font-family:'Roboto Slab'; font-size:33px; color:#fff; text-transform:uppercase}
.life-ox p{font-family:'Roboto Slab'; font-size:13px; color:#fff; line-height:25px; text-align:justify; }
.life-ox ul{ display:inline; margin-left:10px; padding:0px;}
.life-ox ul li{ display:inline; list-style:none; margin-right:15px; margin-top:5px;}
.compus{ float:left; width:100%; padding:25px 0px;}
.placement-cell{float:left; width:90%;}
.placement-cell h2{font-family:'Roboto Slab'; font-size:24px; color:#126ead; text-transform:uppercase; padding:0px; margin:0px; margin-bottom:10px;}
.oxbridge-allumini{ float:left; width:100%;}
.oxbridge-allumini h2{font-family:'Roboto Slab'; font-size:24px; color:#126ead; text-transform:uppercase; padding:0px; margin:0px; margin-bottom:10px;}
.toppers{ float:left; width:100%; padding:15px 0px;}
.toppers h2{font-family:'Roboto Slab'; font-size:25px; color:#126ead; text-transform:uppercase; padding:0px; margin:0px; margin-bottom:5px; text-align:center; margin-top:15px; font-weight:bold;}
.toppers p{font-family:'Roboto Slab'; font-size:14px; text-align:center; color:#000;}
.tp1{ margin-right:25px !important;}

.footcont{background-image: url("../images/footerimg.jpg"); float: left; width: 100%; height: auto; padding-top: 15px; padding-bottom: 10px}
.footcont h5{font-family: "Hobo BT"; font-size: 25px; color: #fff}
.footcont .indexone li{list-style-image: url("../images/footicon.png"); line-height: 36px; font-size: 14px; margin-left: 25px; text-decoration: none; }
.footcont p{color: #fff; text-align: justify;}
.footcont .indexone li a{color: #fff; text-decoration: none;}
.footcont .indexone li a:hover{color: #f3bf47}
.form-control{border-radius: 10px; background-color: #4f4f4f; color: #a3a3a3; border:3px solid #242424; font-size: 12px;padding: 10px; height: auto}
.button1{background-color: #126ead; padding:5px 20px; color: #fff; border-radius: 5px; border:none; float: right; font-family: "Hobo BT"; font-size: 12px}
.footertwo{background-color: #126ead; float: left; width: 100%}
.footertwo p{color: #fff; text-align: center; padding-top:10px;}
.newsone li.one::before{content: url("../images/news1.png");}
.form-group{margin-bottom: 5px !important}
.simply-scroll .simply-scroll-clip {
    width: 100% !important;
    height: 200px;
    margin-left: 0px !important;
}
.newsone p{padding-bottom: 10px}
.form-control{
	border-radius: 10px !important;
	background-color: #4f4f4f !important;
    color: #a3a3a3 !important;
	border:3px solid #242424 !important;
	font-size: 12px !important;
	padding: 10px !important;
	height: auto !important;
	}
	
	/* about content*/
	
	.sidebar{background-color:#eaeaea; width:100%;  float:left; height:auto;}
.sidebar h2{ background-color:#25287f; text-align:center; color:#fff; font-family:'Roboto Slab'; font-size:23px; margin:0px; padding:6px 0px;}
.sidebar h6 { background-color:#e1e1e1; border-bottom:1px dashed #25287f; border-top:1px dashed #25287f; padding:5px; font-family:'Roboto Slab'; font-size:15px; font-weight:bold; color:#25287f;}
.sidebar h6 a{color:#25287f;}
.sidebar ul{ margin:0px; padding:0px;}
.sidebar ul li{ list-style:none;}
.sidebar ul li a{font-family:'Roboto Slab'; font-size:13px; color:#222222; line-height:25px; text-align:justify; padding:10px 15px;}
.sidebar p{font-family:'Roboto Slab'; font-size:13px; color:#222222; line-height:25px; text-align:justify; padding:10px 15px;}
.wel-co table{ border:1px dashed #CCC; width:80%;}
.wel-co table td{ border:1px dashed #CCC; padding:5px;}
.wel-co ul { margin:0px; padding:0px; margin-left:25px;}
.wel-co ul li{font-family: 'Roboto Slab';
font-size: 13px;
color: #222222;
line-height: 23px;
text-align: justify; list-style:url(../images/footicon.png)}
.wel-co h3{color: #126ead;
text-transform: uppercase;
font-size: 23px;
font-weight: bold;font-family: 'Roboto Slab';}

.ramram, .table-bordered{ border:1px dashed #CCC; width:100% !important;}
.ramram td{ border:1px dashed #CCC; padding:5px;}

.undergraduate{float: left; width: 100%; margin: 20px 0 20px }
.udpogram{background-color: #EAEAEA; padding: 15px}
.udpogram h3{margin: 0px 0px !important; padding: 10px 15px; color: #000; letter-spacing: 1px; font-size: 24px}
.sample{background-color: #fff; margin: 10px !important; border-radius: 4px}
.sample h4{color: #126ead;}
.btn-info {margin: 50px 10px !important; background-color: #292780 !important; border:none !important;}
.btn-info3 {margin: 86px 41px !important; background-color: #292780 !important; border:none !important; color: #fff !important}
.btn-info1 {margin: 10px 10px !important; background-color: #292780 !important; border:none !important; color: #fff !important;}
.btn-info2 {margin: 15px 10px !important; background-color: #292780 !important; border:none !important; color: #fff !important;}
.btn-info2 a:hover{color: #fff !important}
.udpogram h2{margin: 0px 0px !important; color: #126ead; letter-spacing: 1px; font-size: 24px}
.udpogram p{font-size: 14px; margin: 10px 0px; line-height: 27px; text-align: justify;}
.mega-menu .menu-links > li > a {
    margin: 0px !important;
    padding: 0px 20px !important;
    display: inline-block;
    float: none;
    width: 100%;
    color: #fff;
    font-size: 15px;
    line-height: 30px;
    position: relative;
    font-family: 'Gill Sans', Calibri, 'Helvetica Neue', Arial, sans-serif;
}


.library{float: left; width: 100%; padding: 20px 0px}
.library h3{font-size: 20px; color: #126ead; font-weight: 600; letter-spacing: .7px}
.library h4{font-size: 16px; color: #126ead; font-weight: 600; letter-spacing: .7px}
.library p{font-size: 14px; font-family: 'Roboto Slab', serif; line-height: 25px; text-align: left;}
.library img{border-radius: 5px; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);}
.scholarship{float: left; width: 100%; padding: 20px 0px}
.resp-tabs-container h3{margin-top: 0px !important; font-size: 24px; font-weight: 600; letter-spacing: .7px; color: #292780}
.resp-tabs-container p{padding:0px 10px; font-size: 14px; font-family: 'Roboto Slab', serif; line-height: 25px}
.resp-tabs-container ul li{font-size: 16px; font-family: 'Roboto Slab', serif; }
.resp-tabs-container h4{text-align: center;}
.resp-tabs-container h5{text-align: center; font-size: 20px; font-weight: 600; }
.resp-tabs-container h6{text-align: center; font-size: 20px; font-weight: 600; color: #126ead}

.events{float: left; width: 100%; margin: 20px 0px}

.career{float: left; width: 100%; margin: 20px 0px}
.career h3{text-align: left; font-size: 24px; color: #126ead}
.career h2{text-align: center; font-size: 24px; color: #126ead}
.career p{text-align: left; font-size: 14px; color: #000; font-family:'Roboto Slab', serif; line-height: 30px }

/*Top navigation bar*/
#main {
  float: left;
  width: 100%;
  background-color: #3F4749;
  position: relative;
}

#main #navMenu {
  text-align: center;
  position: relative; 
}

#main #navMenu #navMenu-wrapper {
  overflow: hidden;
  height: auto;
  padding: 0 30px;
}

#navMenu-items {
  margin: 0 0px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#main #menuSelector {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}

.active p, .active a { color: #fff !important; }

#main #navMenu ul li {
  display: inline-block;
  margin: 7px 10px;
}

#main p, #main a {
  color: #EFEBE8;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a, a:visited, p {
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.25px;
  font-family: 'Gill Sans',  Calibri,  'Helvetica Neue',  Arial,  sans-serif;
  font-weight: 100;
  
}

.navMenu-item a { font-size: 14px; }

.navMenu-item p { font-size: 1.5rem; }

.slick-prev, .icon-chevronleft { transform: rotate(180deg); }

.icon-chevronleft, .icon-chevronright {
  background-image: url('../images/arrowone.png');
  background-repeat: no-repeat;
  background-size: 20px;
}

.navMenu-paddle-left{
  cursor: pointer;
  border: none;
  position: absolute;
  top: 4px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}
.navMenu-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 7px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.slick-prev, .navMenu-paddle-left { left: 0; }

.arrow {
  width: 25px;
  margin-left: auto;
  margin-right: auto;
}

.slick-next, .navMenu-paddle-right { right: 0; }

.left_Floter {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 36px;
    background: #282888;
    left: 0;
    height: 183px;
    z-index: 999999;
}
.left_Floter a:hover{background-color: #126ead}
.left_Floter a:first-child {
    background-position: center 10px;
}
.left_Floter a {
    width: 36px;
    height: 36px;
    background: url('../images/icon_05.png') no-repeat center center;
        background-position-x: center;
        background-position-y: center;
    border-bottom: 1px solid #fff;
    float: LEFT;
}
.left_Floter a:nth-child(2) {
    background-position: center -25px;
}
.left_Floter a:nth-child(4) {
    background-position: center -94px;
}
.left_Floter a:nth-child(5) {
    background-position: center -125px;
    border: 0;
}
.udpogram h3{color: #126ead}

.online_application{float: left; width: 100%; margin-bottom: 20px; padding: 15px}
.online_application h3{color: #126ead}
.onlineform {background-color: #F4F4F4; padding:15px;}

.form-control1{
  border-radius: 0px !important;
  background-color: #fff !important;
    color: #272782 !important;
  border:none !important;
  font-size: 12px !important;
  padding: 10px !important;
  height: auto !important;
  width: 100%
  }

  .button2{margin:15px;background-color: #126ead; padding:5px 20px; color: #fff; border-radius: 5px; border:none; float: left; font-family: "Hobo BT"; font-size: 12px}

  .aboutinfo{float: left; width: 100%; position: relative; z-index: -999}
  .aboutinfo h3{margin: 5px 0px; }

  .blog-banner {
    float: left;
    padding: 50px 0;
    color: #fff;
    width: 100%;
    background-image: url(../images/banntwo.jpg); 
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
}
.breadcrumb-area h1 {
    margin: 150px 0 15px;
    font-weight: 700;
  
    text-transform: uppercase;
    text-align: center;
}
.breadcrumbs ul{padding: 0px !important; text-align: center;}
.breadcrumbs li {
    display: inline-block;
    list-style: none;
    font-weight: 600;
    font-size: 18px;

}
.breadcrumbs li a{color: #fff; font-weight: 600; padding: 0px 10px; }
.breadcrumbs li a:hover {
    color: #95c41f;
}
.breadcrumbs li a:hover{text-decoration: none;}

.attach{background-color: #126ead; color: #fff;}

.pn-ProductNav_Wrapper {
  position: relative;
  padding: 0 11px;
}

.pn-ProductNav { overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;white-space: nowrap;
    .js & {-ms-overflow-style: -ms-autohiding-scrollbar;
        &::-webkit-scrollbar {
            display: none;
        }
    }
  position: relative;
}

.pn-ProductNav_Contents {

  transition: transform .2s ease-in-out;
  text-align: center;
}

.pn-ProductNav_Contents-no-transition {
  transition: none;
}

.pn-ProductNav_Link {
  text-decoration: none;
  color: #fff;
  font-size: 1.2em;
  font-family: -apple-system, sans-serif;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0px 20px;
  & + & {
    margin-left: 11px;
    padding-left: 11px;
    border-left: 1px solid #eee;
  }
  &[aria-selected="true"] {
    color: #111;
  }
}

.pn-ProductNav_Link:hover{text-decoration: none; color: #fff;}
.pn-Advancer {
  /* Reset the button */
  appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  &:focus {
    outline: 0;
  }
  &:hover {
    cursor: pointer;
  }
  /* Now style it as needed */
  position: absolute;
  top: 0;
  bottom: 0;
  /* Set the buttons invisible by default */
  opacity: 0;
  transition: opacity .3s;
}

.dropbtn {
    background-color: #126ead;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #126ead;
}

.footerone{display: none;}




.navigation{display: none;}

@charset "UTF-8";
.navigation {
  height: 70px;
  
}

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

.mobileox {
  float: right;
}
.mobileox ul {
  list-style: none;
  margin-top: 15px;
  padding: 0;
}
.mobileox ul li {
  float: left;
  position: relative;
}
.mobileox ul li a,
.mobileox ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #ffffff;
  color: #262626;
  text-decoration: none;
}
.mobileox ul li a:hover,
.mobileox ul li a:visited:hover {
  background: #126ead;
  color: #ffffff;
}
.mobileox ul li a:not(:only-child):after,
.mobileox ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
.mobileox ul li ul li {
  min-width: 190px;
}
.mobileox ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}


.nav-mobile {
  display: none;
  position: absolute;
  top: 70px;
  right: 0;
  background: #126ead;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }

  .mobileox {
    width: 100%;
    padding: 57px 0 15px;
  }
  .mobileox ul {
    display: none;
  }
  .mobileox ul li {
    float: none;
  }
  .mobileox ul li a {
    padding: 15px;
    line-height: 20px;
    text-align: left;
font-size: 16px;
font-weight: 500;
  }
  .mobileox ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}
.toppers{float: left; width: 100%}
.toppers h2{color: #126ead}


.photogallery{margin-top: 25px; float: left; width: 100%}
.photogallery h2{text-align: center; color: #126ead; padding-bottom: 20px}
/*.videogallery{margin-top: 25px; float: left; width: 100%}
.videogallery h2{text-align: center; color: #126ead; padding-bottom: 20px}*/

.section{margin-top: 25px; float: left; width: 100%}
.demo-gallery.dark > ul > li a {
    border: 3px solid #04070a;
}
.demo-gallery > ul > li a {
    border: 3px solid #FFF;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    position: relative;
    float: left;
}
.demo-gallery > ul > li a > img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    width: 100%;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.demo-gallery > ul > li a .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color 0.15s ease 0s;
    -o-transition: background-color 0.15s ease 0s;
    transition: background-color 0.15s ease 0s;
}
.demo-gallery .video .demo-gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: 0.8;
    width: 48px;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
    left: 50%;
    position: absolute;
    top: 50%;
    transition: opacity 0.3s ease 0s;
}

.campus, .gall, .lab, .lib, .sports
{ display: inline-block; background: url('../images/icons.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.campus { background-position: -0px -0px; width: 79px; height: 101px; }
.gall { background-position: -79px -0px; width: 79px; height: 101px; }
.lab { background-position: -0px -101px; width: 79px; height: 101px; }
.lib { background-position: -79px -101px; width: 79px; height: 101px; }
.sports { background-position: -0px -202px; width: 79px; height: 101px; }

.email-icons, .phone-icons, .footicon, .arrow
{ display: inline-block; background: url('../images/pan.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.email-icons { background-position: -0px -0px; width: 42px; height: 42px; }
.phone-icons { background-position: -0px -42px; width: 42px; height: 42px; }
.footicon { background-position: -0px -84px; width: 18px; height: 15px; }
.arrow { background-position: -18px -84px; width: 10px; height: 30px; }


.trigger_popup {
      transform: rotate(270deg);
      position: fixed;
      top: 50%;
      right: -3.7%;
      z-index: 99999;
      cursor: pointer;
      background-color: #126ead;
      border-color: #0097da;
      border-radius: 5px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      padding: 10px 16px;
      font-size: 15px;
      color: #fff;
      line-height: 1.33;
      padding: 10px 20px;
      text-transform: uppercase;
      font-weight: bold;
      cursor: pointer;
    }
  
    .trigger_popup:hover {
      background-color:#0097da;
      border-color:#0097da;
    }
  
    /* The Modal (background) */
    .modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 9999999;
      /* Sit on top */
      padding-top: 35px;
      /* Location of the box */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
  
    /* Modal Content */
    .modal-content {
      background-color: transparent;
      margin: auto;
      padding: 0;
      border: 0px solid #888;
      max-width: 420px;
      position: relative;
      box-shadow: none;
    }
  
    /* The Close Button */
    .close {
      color: #fff;
      float: right;
      font-size: 30px;
      font-weight: bold;
      position: absolute;
      right: 5px;
      z-index: 9999;
      top: 0px;
      opacity: 0.8;
      box-shadow: 0px 0px 0px 0px rgba( 80, 80, 80, 0.23 );
      text-shadow: 0px 0px 0px rgba( 80, 80, 80, 0.23 );
      background-color: transparent;
      padding: 0 5px;
    }
  
    .close:hover,
    .close:focus {
      color: #797878;
      text-decoration: none;
      cursor: pointer;
    }
    span.close:hover {
      color: #fff;
  }
    .head_text {
      background-color: #0097da;
      color: #fff;
      text-align: center;
      padding: 0px;
      font-size: 22px;
      padding-bottom: 5px;
      border-top-left-radius: 10px;
      padding-top: 10px;
    }
    span#connect {
      color: #0f62da;
      cursor: pointer;
  }
  span#connect:hover {
      text-decoration: underline;
  }
    @media (max-width: 768px) {
      .trigger_popup {
        transform: rotate(0);
        bottom: 0;
        top: 90%;
        right: unset;
        margin: 0;
        left: 15%;
        font-size: 14px;
        padding: 6px 10px;
      }
  
      .popupCloseButton {
        top: -10px;
        right: -2px;
      }
      .trigger_popup{display: none;}
    }