body, div
{

  font-family: roboto, Arial;
}


#Menu2 div {
    font-size: 16px;
    color: #0E569C;
    padding-bottom: 3px;
    padding-right: 0px;
background-color:#d6d9db;
}

#Menu2 a {
    font-size: 16px;
    color: #0E569C;
}


    #Menu2 a:hover {
        color: #1372d1;
    }


.styled-text {
    -moz-border-radius: 33px;
    border-radius: 33px;
    border: solid 1px white;
    padding-top: 9px;
   padding-bottom: 11px;
padding-left: 15px;
    color: gray;
    width: 500px;
    font-size: 19px;
}


.styled-btn {
    border: 0;
    background: none;
    margin: 0;
    position: absolute;
    top: 2px;
     margin-left: -52px;
width: 56px;
    
}




	 .shadow {
											  -moz-box-shadow:    4px 3px 20px 5px #a0a0a0;
											  -webkit-box-shadow: 4px 3px 20px 5px #a0a0a0;
											  box-shadow:         4px 3px 20px 5px #a0a0a0;
											}
											.centerIT
											{
												 max-width: 100%;
											  background-color: transparent;
											  text-align:center;
											  width: 100%
												
												
												}


@media only screen and (min-width: 200px) and (max-width: 768px) {

    .styled-text {
        -moz-border-radius: 16px;
        border-radius: 16px;
        border: solid 1px white;
        padding: 5px;
	padding-left: 10px;
        color: gray;
        width: 295px;
        font-size: 14px;
    }


.styled-btn {
    border: 0;
    background: none;
    margin: 0;
    position: absolute;
    top: 4px;
     margin-left: -35px;
width: 40px;
    
}


}

/*FOR THE CARDS*/
.card1 {
    float: left;
    padding: 0 2.6rem;
    height: 230px;
width:500px;
}

.card {
    float: left;
    padding: 0 2.6rem;
    height: 300px;

}


    .card .wrapper {
        background-color: #fff;
        height: 270px;
        max-width: 250px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 9px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2);
    }

        .card .wrapper:hover .data {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

    .card .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        -webkit-transform: translateY(86px);
        transform: translateY(86px);
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
    }

        .card .data .content {
            padding: 1em;
            position: relative;
            z-index: 1;
        }


    .card .title {
        position: relative;
        margin-top: 0px;
        margin-left: 0px;
        text-align: center;
        color: #024da0;
        font-weight: bold;
        padding-bottom: 35px;
        font-size: 24px;
        background-color: #ffffff;
    }

    .card .text {
        height: 45px;
        font-size: 14px;
        margin: 0;
        background-color: #ffffff;
        overflow: hidden;
    }


.Undergraduate .wrapper {
    background: url(http://www.balamand.edu.lb/Library/PublishingImages/Undergraduate.jpg) no-repeat;
    background-size: 100%;
}

.Graduate .wrapper {
    background: url(http://www.balamand.edu.lb/Library/PublishingImages/Graduate.jpg) no-repeat;
    background-size: 100%;
}

.Faculty .wrapper {
    background: url(http://www.balamand.edu.lb/Library/PublishingImages/Faculty.jpg) no-repeat;
    background-size: 100%;
}

.Visitor .wrapper {
    background: url(http://www.balamand.edu.lb/Library/PublishingImages/Visitor.jpg) no-repeat;
    background-size: 100%;
}

.Undergraduate .content {
    background-color: #ffffff;
}

.Undergraduate .title a {
    color: black;
}



.Graduate .content {
    background-color: #ffffff;
}

.Graduate .title a {
    color: black;
}


.Faculty .content {
    background-color: #ffffff;
}

.Faculty .title a {
    color: BLACK;
}


.Visitor .content {
    background-color: #ffffff;
}

.Visitor .title a {
    color: BLUE;
}



/*FOR THE CARDS*/


/*Opening Hours*/
.OHUnderline {
    background-color: #ffcd36;
    height: 5px;
    margin: 5px 0px 10px 0px;
    width: 100%;
    content: '_';
    display: block;
}
.OHUnderlinemobile {
    background-color: #ffcd36;
    height: 5px;
    margin: 5px 0px 10px 0px;
    width: 50%;
    content: '_';
    display: block;
}

.OHTitle {
    font-family: Arial Black;
    font-size: 28px;
    font-weight: bold;
    color: #0e559c;
}

/*Opening Hours*/

.OHLoc {
    font-family: Arial;
    font-size: 14px;
    color: #0e559c;
    padding-bottom: 5px;
}


.OHTime {
    font-family: Arial;
    font-size: 14px;
    color: #545555;
    padding-bottom: 5px;
}


.btnAsk {
    max-height: 25px;
}

a.btnAskLBL {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    color: #0e559c;
    text-align: center;
    vertical-align: bottom;
    display: table-cell;
    margin-left: 15px;
    margin-right: 15px;
}



.btnAskLBLBorder {
    border-right: 2px solid #b4b9bc;
}

/*Opening Hours*/

/*Footer*/
.bgfooter {
    background:
    /* top, transparent red, faked with gradient */
    linear-gradient( rgba(14, 85, 156, 0.8), rgba(14, 85, 156, 0.8) ),
    /* bottom, image */
    url(/Library/PublishingImages/Footer2.jpg);
    background-size: cover;
    padding: 25px 0px 25px 0px;
}

.txtFooter {
    color: #ffffff;
    font-family: "Arial Narrow";
    font-size: 30px;
    line-height: 40px;
    text-align: right;
    padding-right: 15px;
}

.txtFooterBig {
    color: #ffffff;
    font-family: Arial;
    font-size: 50px;
    font-weight: bold;
    text-align: right;
    line-height: 60px;
    padding-right: 15px;
    text-transform: uppercase;
}

/*Footer*/



.hotspot {
  position: absolute;
  cursor: pointer;
  /*left: 50%;*/
  top: 50%;
  /*color: #fff;*/
  -webkit-animation: none 3s linear infinite;
  -moz-animation: none 3s linear infinite;
  -ms-animation: none 3s linear infinite;
  -o-animation: none 3s linear infinite;
  animation: none 3s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: hotspot-vertical-top;
  -moz-animation-name: hotspot-vertical-top;
  -ms-animation-name: hotspot-vertical-top;
  -o-animation-name: hotspot-vertical-top;
  animation-name: hotspot-vertical-top;
}

.hotspot-inner {
  position: absolute;
  bottom: 0;
margin-bottom: -13px; 
/* left: -20px;
  
  background: #0e569c;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #0e569c;*/
}

.hotspot-inner:before {
  content: '';
  position: absolute;
  left: -25px;
  top: 10px;
 /* margin-left: -5px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #0e569c;
  border-top-color: #0e569c;*/
}

.icn {
  display: inline-block;
  height: 30px;
  width: 39px;
  
}

@-webkit-keyframes hotspot-vertical-top {
  0%,
  30%,
  40%,
  53.3%,
  66.667%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: translate3d(0, 12.5px, 0);
    -moz-transform: translate3d(0, 12.5px, 0);
    -ms-transform: translate3d(0, 12.5px, 0);
    -o-transform: translate3d(0, 12.5px, 0);
    transform: translate3d(0, 12.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  46.667% {
    -webkit-transform: translate3d(0, 6.5px, 0);
    -moz-transform: translate3d(0, 6.5px, 0);
    -ms-transform: translate3d(0, 6.5px, 0);
    -o-transform: translate3d(0, 6.5px, 0);
    transform: translate3d(0, 6.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate3d(0, 3.25px, 0);
    -moz-transform: translate3d(0, 3.25px, 0);
    -ms-transform: translate3d(0, 3.25px, 0);
    -o-transform: translate3d(0, 3.25px, 0);
    transform: translate3d(0, 3.25px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-moz-keyframes hotspot-vertical-top {
  0%,
  30%,
  40%,
  53.3%,
  66.667%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: translate3d(0, 12.5px, 0);
    -moz-transform: translate3d(0, 12.5px, 0);
    -ms-transform: translate3d(0, 12.5px, 0);
    -o-transform: translate3d(0, 12.5px, 0);
    transform: translate3d(0, 12.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  46.667% {
    -webkit-transform: translate3d(0, 6.5px, 0);
    -moz-transform: translate3d(0, 6.5px, 0);
    -ms-transform: translate3d(0, 6.5px, 0);
    -o-transform: translate3d(0, 6.5px, 0);
    transform: translate3d(0, 6.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate3d(0, 3.25px, 0);
    -moz-transform: translate3d(0, 3.25px, 0);
    -ms-transform: translate3d(0, 3.25px, 0);
    -o-transform: translate3d(0, 3.25px, 0);
    transform: translate3d(0, 3.25px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-ms-keyframes hotspot-vertical-top {
  0%,
  30%,
  40%,
  53.3%,
  66.667%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: translate3d(0, 12.5px, 0);
    -moz-transform: translate3d(0, 12.5px, 0);
    -ms-transform: translate3d(0, 12.5px, 0);
    -o-transform: translate3d(0, 12.5px, 0);
    transform: translate3d(0, 12.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  46.667% {
    -webkit-transform: translate3d(0, 6.5px, 0);
    -moz-transform: translate3d(0, 6.5px, 0);
    -ms-transform: translate3d(0, 6.5px, 0);
    -o-transform: translate3d(0, 6.5px, 0);
    transform: translate3d(0, 6.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate3d(0, 3.25px, 0);
    -moz-transform: translate3d(0, 3.25px, 0);
    -ms-transform: translate3d(0, 3.25px, 0);
    -o-transform: translate3d(0, 3.25px, 0);
    transform: translate3d(0, 3.25px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes hotspot-vertical-top {
  0%,
  30%,
  40%,
  53.3%,
  66.667%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: translate3d(0, 12.5px, 0);
    -moz-transform: translate3d(0, 12.5px, 0);
    -ms-transform: translate3d(0, 12.5px, 0);
    -o-transform: translate3d(0, 12.5px, 0);
    transform: translate3d(0, 12.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  46.667% {
    -webkit-transform: translate3d(0, 6.5px, 0);
    -moz-transform: translate3d(0, 6.5px, 0);
    -ms-transform: translate3d(0, 6.5px, 0);
    -o-transform: translate3d(0, 6.5px, 0);
    transform: translate3d(0, 6.5px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate3d(0, 3.25px, 0);
    -moz-transform: translate3d(0, 3.25px, 0);
    -ms-transform: translate3d(0, 3.25px, 0);
    -o-transform: translate3d(0, 3.25px, 0);
    transform: translate3d(0, 3.25px, 0);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

/* for the inner pages */
.withborder{
border-color: #3A6BA6;
border-style: solid;
border-width: 1px;
}

.withbordergrey{
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
}


.bg1 {
background-color:#EDB329;
}

.bg2 {
background-color:#FEDE58;
}

.bg3 {
background-color:#40628E;
}

.bg5 {
background-color:#B3B3B3;
}

.bg6
{
background-color:#21517F;
}


/*Start of backgrounds for subpage tables */
.bg7
{ 
background-color:#00466B;
}

.bg8
{ 
background-color:#366092;
}

.bg9
{ 
background-color:#4F81BD;
}

.bg10
{ 
background-color:#699CD9;
}

.bgAlt
{ 
background-color:#F0F0F0;
}

.bg11
{

background-color:#CCCCCC;
}


.bg12
{
background-color:#85B1E5;
}

.bg13
{
background-color:#78aae5;
}

.tblTitle {
	padding: 2px;}
    

.tblDesc {
	padding: 2px;}




@media only screen and (min-width: 200px) and (max-width: 768px) {

.tblTitle {
    font-size: 11px;
	padding: 2px;}
    

.tblDesc {
    font-size: 11px;
	padding: 2px;}


}
.GoogleNews { 
	/*font-family : Trebuchet MS, Times New Roman, Courier, Garamond, serif;*/
	font-size : 13px;
	color : #ffffff;
	text-align: justify;
	line-height: 19px;	
}	

/* for the inner pages */