/* CUSTOM CSS HERE */

.tab-thing{
    position: relative;
    display: block;
    padding: 10px 5px;
}

/*@import url('https://fonts.googleapis.com/css?family=cardo:400i|Rubik:400,700&display=swap');*/
:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: 'Rubik', sans-serif;
  --font-serif: 'cardRo', serif;
}
*{
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  display: grid;
  place-items: center;
}
.page-content {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
  font-family: var(--font-sans);
}
@media (min-width: 600px) {
  .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 100px) {
  .page-content {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cardR {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  .cardR {
    height: 150px;
  }
}
.cardR:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
.cardR:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}
.cardR:nth-child(1):before {
  background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.cardR:nth-child(2):before {
  background-image: url(https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.cardR:nth-child(3):before {
  background-image: url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.cardR:nth-child(4):before {
  background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}
.content > * + * {
  margin-top: 1rem;
}
.title {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}
.copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}
.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
}
.btn:hover {
  background-color: #0d0d0d;
}
.btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}
@media (hover: hover) and (min-width: 600px) {
  .cardR:after {
    transform: translateY(0);
  }
  .content {
    transform: translateY(calc(100% - 4.5rem));
  }
  .content > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
  .cardR:hover, .cardR:focus-within {
    align-items: center;
  }
  .cardR:hover:before, .cardR:focus-within:before {
    transform: translateY(-4%);
  }
  .cardR:hover:after, .cardR:focus-within:after {
    transform: translateY(-50%);
  }
  .cardR:hover .content, .cardR:focus-within .content {
    transform: translateY(0);
  }
  .cardR:hover .content > *:not(.title), .cardR:focus-within .content > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }
  .cardR:focus-within:before, .cardR:focus-within:after, .cardR:focus-within .content, .cardR:focus-within .content > *:not(.title) {
    transition-duration: 0s;
  }
}

/*cardR code with fa-fa*/
.cardR1-image {
    padding: 1em;
    text-align: center;
    font-size: 3em;
}
@media print, screen and (min-width: 40em){
    .cardR1 .cardR1-image {
        max-height: 200px;
    }
}
.cardR1 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 1rem;
    border: 1px solid #e6e6e6;
    background: #fefefe;
    box-shadow: none;
    overflow: hidden;
    color: #3c4c4c;
}
.cardR1 .cardR-image1 {
    overflow: hidden;
    text-align: center;
    max-height: 150px;
    border-bottom: 5px solid #6cc24a;
}
.cardR-image1 {
    min-height: 1px;
}

.hi-icon{line-height:1.4!important;width:1.4em;color:#24b0ed;border-radius:100%;text-align:center;position:relative;z-index:1}
.hi-icon-flash .hi-icon{box-shadow:0 0 0 4px #fff;transition:color .3s}
.hi-icon-flash .hi-icon:after{transform:scale(1.3);opacity:0;transition:transform .2s,opacity .3s;position:absolute;line-height:1.4;width:1.4em;pointer-events:none;border-radius:100%;box-sizing:content-box;content:"-";background:#fff;top:-2px;left:-2px;padding:2px;color:transparent;z-index:-1}
.hi-icon-flash:hover .hi-icon{color:#51b14e}.hi-icon-flash:hover .hi-icon:after{transform:scale(1);opacity:1}


.icon-wrap{background:rgba(0,0,0,.3);width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4em}
a:hover .icon-wrap{background:transparent}

@media print, screen and (min-width: 40em){
    .medium-up-4>.column, .medium-up-4>.columns {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.small-up-2>.column, .small-up-2>.columns {
    flex: 0 0 50%;
    max-width: 50%;
}

@media print, screen and (min-width: 40em){
    .column, .columns {
        padding-right: .9375rem;
        padding-left: .9375rem;
    }
}

.column, .columns {
    flex: 1 1 0px;
    padding-right: .625rem;
    padding-left: .625rem;
    min-width: 0;
}

/*
    

        <main class="page-content">
            <div class="cardR">
                <div class="content">
                    <h2 class="title"><i class="icon-wrench-2" aria-hidden="true"></i>Mountain View</h2>
                    <p class="copy"> you guessed it, the mountains</p><button class="btn">View Trips</button></div>
            </div>
            <div class="cardR">
                <div class="content">
                    <h2 class="title">To The Beach</h2>
                    <p class="copy">Plan your next beach trip with these fabulous destinations</p><button class="btn">View Trips</button></div>
            </div>
            <div class="cardR">
                <div class="content">
                    <h2 class="title">Desert Destinations</h2>
                    <p class="copy">It's the desert you've always dreamed of</p><button class="btn">Book Now</button></div>
            </div>
            <div class="cardR">
                <div class="content">
                    <h2 class="title">Explore The Galaxy</h2>
                    <p class="copy">Seriously, straight up, just blast off into outer space today</p><button class="btn">Book Now</button></div>
            </div>
        </main>



*/

.news-text {
    
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    outline: none;
}
.news-text a{color: #222;}
.news-text >a:hover,a:focus {color: #221111;text-decoration: none; outline:none;}
.fafa-color{
  font-style: #24b0ed;
}
.color1{
  color: #f3f5f8;
  color: #f3f7f8;
}


.medium-up-4{flex-wrap:wrap}.medium-up-4>.column,.medium-up-4>.columns{flex:0 0 25%;max-width:25%}

.car-d{display:flex;flex-direction:column;flex-grow:1;margin-bottom:1rem;border:1px solid #e6e6e6;background:#fefefe;box-shadow:none;overflow:hidden;color:#2474ed}
.car-d>:last-child{margin-bottom:0}.car-d-divider{display:flex;flex:0 1 auto;padding:1rem;background:#e6e6e6}
.car-d-divider>:last-child{margin-bottom:0}.car-d-section{flex:1 0 auto;padding:1rem}.car-d-section>:last-child{margin-bottom:0}
.car-d-image{min-height:1px}
.car-d{transition:all .3s ease-in-out;background-color:#eee;border-radius:0;border:1px solid #ccc;box-shadow:0 2px 4px #ccc;height:100%}

.car-d .car-d-image{
  overflow:hidden;
  text-align:center;
  max-height:150px;
  border-bottom:5px solid #24b0ed;
}

@media print,screen and 
(min-width:40em){
  .car-d .car-d-image{
    height: 250px;
     background-repeat: no-repeat;
   }}

.car-d .car-d-image img{
  transition:all .3s ease-in-out;
  border-top-left-radius:0;
  border-top-right-radius:0;
  width:100%;
  -webkit-filter:grayscale(50%);
}

.car-d .car-d-header{border-bottom:1px solid #ccc;padding:.5rem 1rem 0}.car-d .car-d-copy{font-size:.9em;padding:1rem}
.car-d:focus,.car-d:hover{background-color:#f1f1f1}
.car-d:focus .car-d-image img,.car-d:hover .car-d-image img{-webkit-filter:grayscale(0)}.car-d h2,.car-d h3,.car-d h4{font-size:1em;font-weight:600;margin:0;border:0!important}
@media print,screen and (min-width:40em){.car-d h2,.car-d h3,.car-d h4{font-size:1.2em}}@media print,screen and (min-width:64em){.car-d h2,.car-d h3,.car-d h4{font-size:1.4em}}
.car-d a{color:#24b0ed}.car-d-side{display:flex;flex-direction:inherit;height:auto;color:inherit;border:0!important}
@media screen and (max-width:63.99875em){.car-d-side{margin-bottom:1px}}.car-d-side:hover{color:inherit}
.car-d-side .car-d-image{flex:1;background-repeat:no-repeat;background-position:50%;background-size:cover;min-height:10rem;display:flex;justify-content:center;align-items:center}
.car-d-side .car-d-copy{flex:2;padding:.5rem}
.car-d-side h3{font-size:1em}
.car-d-link{background-color:#eee;border-radius:0;border:1px solid #ddd;box-shadow:none;height:100%}
.car-d-link:focus,.car-d-link:hover{background-color:#f6f6f6;color:inherit;box-shadow:0 2px 4px #ccc;border:1px solid #ccc}
.car-d-cta{align-content:flex-end;width:100%;display:flex;text-align:right}.car-d-cta,.car-d-cta span{flex:1;align-self:flex-end}.car-d-cta span{text-transform:uppercase;padding:.5em}
.car-d-link:hover .car-d-cta span{border-top:1px solid #ccc;font-weight:bolder;color:#24b0ed}
.car-d-nocopy{margin-bottom:0}.car-d-nocopy .car-d-header{display:flex;flex:1;border-bottom:0;padding:10px;text-align:center;align-items:center;align-self:center}.car-d-nocopy .car-d-header h3{font-size:1em}
.car-d-icon{margin-top:-1.4em;text-align:center;z-index:1}.car-d-icon em{background:#24b0ed;border-radius:100%;padding:.2em .25em;color:#fff}

.hi-icon-flash .hi-icon{
  box-shadow:0 0 0 4px #24b0ed;
  transition:color .3s;
}

.hi-icon-flash .hi-icon:after{
  transform:scale(1.3);
  opacity:0;
  transition:transform .2s,opacity .3s;
  position:absolute;
  line-height:1.4;
  width:1.4em;
  pointer-events:none;
  border-radius:100%;
  box-sizing:content-box;
  content:"-";
  background:#24b0ed;
  top:-2px;left:-2px;
  padding:2px;
  color:transparent;
  z-index:-1;

}

.hi-icon-flash:hover .hi-icon{
  color:#caa350;
}

.hi-icon-flash:hover .hi-icon:after{
  transform:scale(1);
  opacity:1;
}

.icon-wrap{background:rgba(0,0,0,.3);width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4em}
a:hover .icon-wrap{background:transparent}

/*
            <!--Test Insert-->
    <div id="bedge" class="row1 small-up-2 medium-up-4">
   	  

        <div class="col-md-4 col-sm-4"> <a class="car-d car-d-link car-d-nocopy hi-icon-flash" href="/academics/binghamton-impact/service-learning.html"> 
                      
            <div class="car-d-image" style="background-image: url(img/1/beauty-blur.PNG);"><em class="hi-icon fa fa-handshake-o" aria-hidden="true">
                  <!----></em></div>
                    
            <div class="car-d-header">
                         
               <h3>Service Learning</h3>
                       
            </div>
                    </a> 
      </div>
              
        <div class="col-md-4 col-sm-4"> <a class="car-d car-d-link car-d-nocopy hi-icon-flash" href="/academics/binghamton-impact/service-learning.html"> 
                      
              <div class="car-d-image" style="background-image: url(img/gallery/pic_10.jpg);"><em class="hi-icon fa fa-handshake-o" aria-hidden="true">
                    <!----></em></div>
                      
              <div class="car-d-header">
                           
                 <h3>Service Learning</h3>
                         
              </div>
                      </a> 
        </div>
              
        <div class="col-md-4 col-sm-4"> <a class="car-d car-d-link car-d-nocopy hi-icon-flash" href="/academics/binghamton-impact/education-abroad.html"> 
                      
              <div class="car-d-image" style="background-image: url(img/gallery/pic_8.jpg);"><em class="hi-icon fa fa-globe" aria-hidden="true">
                    <!----></em></div>
                      
              <div class="car-d-header">
                           
                 <h3>Education Abroad</h3>
                         
              </div>
                      </a> 
        </div>
              
        <div class="col-md-4 col-sm-4"> <a class="car-d car-d-link car-d-nocopy hi-icon-flash" href="/academics/binghamton-impact/research.html"> 
                      
              <div class="car-d-image" style="background-image: url(img/gallery/pic_7.jpg);"><em class="hi-icon bing-icon bi-atom" aria-hidden="true">
                    <!----></em></div>
                      
              <div class="car-d-header">
                           
                 <h3>Research</h3>
                         
              </div>
                      </a> 
        </div>
            
     </div>
    <!--Test Insert End-->
*/