@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");



.story .title h3 {
  color:black;
  font-size:larger;
  margin-bottom: 0;
}




/********* Top listing of Programs **********/

.abroadtypes {
  padding: 0 55px;
  background-image: url("Images/globe-bg2.png");
  background-position: right bottom;  
  background-repeat: no-repeat;  
}

.abroadtypes h2 {
  margin-bottom: 0 !important;
  margin-top: 24px;
}



/********************************************/
/**************** Carousel ******************/
/********************************************/


/**************** Top of Map ******************/
.hBold {
  font-weight: bold;
}

.mapcontainer_miller {
  /*background-color: #7CA6C0; */
  background-color: #555960;
  padding: 10px 0px;
}

#numStudents {
    color: white;
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 5px;
    font-size: 15px;
}

#gradientBox {
    color: white;
    margin-left: 10px;
    padding: 5px;
    height: 30px;
    width: 200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #EBD99F, #8E6F3E); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #EBD99F, #8E6F3E); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #EBD99F, #8E6F3E); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #EBD99F, #8E6F3E); /* Standard syntax */
}


/**************** Text Display ******************/
.myText {
    background-color: rgb(52,52,52);
    color: #fff;
    overflow: auto;
    display: none;
}

.myText p {
    font-size: 13px !important;
    margin: 0 0 10px;
}

#myTextInfo {
  pointer-events: none;
}

#countryName, #programs strong, #majors strong, #universities strong, #experiences strong, #partners strong, #geare strong {
    color: #8E6F3E;
}



/**************** Image Carousel Display ******************/
.carousel-inner>.carousel-item>img, .carousel-inner>.carousel-item>a>img {
   max-width:none;
}

#carousel {
  padding-bottom: 10px;
}

.carousel-caption {
  left: 0px;
  bottom: 0px;
  padding-bottom: 0px;
  width: 100%;
}

.carousel-caption p {
  background-color: rgba(52,52,52,0.8);
  color: white;
  font-size: 13pt;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  left: 0%;
}

.fa-chevron-right, .fa-chevron-left {
  color: white;
} 

.carousel-item img {
    max-height: 250px;
    margin: auto;
}



/**************** mapael.js ******************/
.mapael .map {
    position: relative;
}

.mapael .mapTooltip {
    position: absolute;
    background-color: white;
    border-radius: 10px;
    border: 2px solid #8E6F3E;
    padding: 5px 15px;
    z-index: 1000;
    max-width: 250px;
    display: none;
    color: #fff;
    pointer-events: none;
}

#tooltipHead {
  color: #8E6F3E;
  text-transform: uppercase;
  font-weight: bold;
  margin: 5px;
}

#tooltipSub {
  color: black;
  font-weight: bold;
  margin: 5px
}

#tooltipHref {
  color: grey;
  font-size: 10pt;
  margin: 5px;
}

.close2 {
    position: absolute;
    right: 0;
    color: #fff;
    margin-right: 5px;
    margin-top: 4px;
    text-shadow: 0 2px 0 #000;
    opacity: .7;
    cursor: pointer;
}

.mapael .zoomButton {
    background-color: #fff;
    border: 1px solid #C4BFC0;
    color: #000;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    font-weight: bold;
    left: 10px;

    -webkit-user-select: none;
    -ms-user-select : none;
    -moz-user-select: none;
    -o-user-select : none;
    user-select: none;
}

/* Reset Zoom button first */
.mapael .zoomReset {
    bottom: 10px;
}

/* Then Zoom In button */
.mapael .zoomIn {
    bottom: 30px;
}

/* Then Zoom Out button */
.mapael .zoomOut {
    bottom: 50px;
}









@media (min-width: 490px) {
  .middle {
    width: 100%;
    text-align: left;
    border-bottom: 2px solid #8E6F3E;
    line-height: 0.1em;
    margin: 10px 0 20px;
  }

  .hBold span {
    background: #fff;
    padding: 0 10px;
    margin-left: 30px;
  }
  
 
}

@media(min-width: 768px) {
 
  #gradientBox {
    height: 25px;
  }
  
}

@media (min-width: 992px) { 
  .myText {
      /*max-width: 950px;*/
      position: absolute;
      top: 0;
      height: 100%;
  }
  
  #carousel {
    padding-bottom: 0px;
  }
  
  #numStudents {
    font-size: 20px;
  }
}