/*Color Variables*/
:root {
	/*primary colors*/
	 --cherry: #BA0C2F;
	 --silver: #A7A8AA;
	 --turquoise: #007A86;
	 --lobo-gray: #63666A;
	/*secondary colors*/
	 --high-noon: #FFC600;
	 --sandia-sunset: #ED8B00;
	 --terra: #C05131;
	 --mesa: #D6A461;
	 --green-chile: #A8AA19;
	 --deep-dusk: #8A387C;
	 --white: #FFFFFF;
	 --secondary-white: #F5F5F5;
	 --black: #222222;
}
body{
  background: var(--white)!important;
}

.sl-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 80%;
  margin-left: 10%;
  /*background-color: black;*/
}
.sl-card{
  background-color: var(--cherry);
  width: 350px;
  height: 400px;
  margin: 10px;
  position: relative;
  min-width: 300px;
  border-radius: 10px;
  padding-right: 2%;
  -webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	-webkit-transition-timing-function: cubic-bezier(0,0,.78,2.5);
	-o-transition-timing-function: cubic-bezier(0,0,.78,2.5);
	transition-timing-function: cubic-bezier(0,0,.78,2.5);
}
.sl-card:hover, .sl-card:active, .sl-card:focus-within{
	 -webkit-transition: .3s ease-in-out;
	 -o-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
	 -webkit-transform: scale(1.03);
	 -ms-transform: scale(1.03);
	 transform: scale(1.03);
	 -webkit-transition-timing-function: cubic-bezier(0,0,.78,2.5);
	 -o-transition-timing-function: cubic-bezier(0,0,.78,2.5);
	 transition-timing-function: cubic-bezier(0,0,.78,2.5);
}
.sl-card:focus-within{
  border: 5px solid var(--cherry);
}
.sl-card:hover, .sl-card>button:hover{
  cursor:pointer;
}
.sl-card-title{
  padding-top: 25px;
  margin-left: 20px;
  color: var(--white);
  font-family: "Vitesse", Cambria, Rockwell, "Times New Roman", serif;
  font-weight: 700;
}

#student-hub-logo{
  width: 160px;
  margin-top: -5%;
}
svg{
  margin-bottom: -2%;
  padding: 1%;
}
.sl-card-description{
  background-color: #63666Add;
  color: var(--white);
  width: 100%;
  padding: 20px 0px;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 10px 10px;
}
.sl-card-description > p{
  margin: 0 20px;
}

/*Cards Backgrounds*/
#student-hub {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/student-hub.png);
  background-position: 55% 0%;
  background-size: cover;
}
#canvas {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/canvas.png);
  background-position: 75% 0%;
  background-size: cover;
}
#libraries {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/libraries.png);
  background-position: 55% 0%;
  background-size: cover;
}
#lobo-mail {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/lobomail.png);
  background-position: 55% 0%;
  background-size: cover;
}
#loboweb-and-classes {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/loboweb-and-classes.png);
  background-position: 0% 0%;
  background-size: cover;
}
#campus-housing-food-computing {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/campus-housing-and-food.png);
  background-position: 100% 0%;
  background-size: cover;
}
#support-connection-engagement {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/engagement.png);
  background-position: 55% 100%;
  background-size: cover;
}
#well-being {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/well-being.png);
  background-position: 65% 0%;
  background-size: cover;
}
#financial-aid {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/financial-aid.png);
  background-position: 65% 0%;
  background-size: cover;
}
#still-need-help {
  background: URL(https://it.unm.edu/assets/img/myunm-studentlife/still-need-help.png);
  background-position: 0% 0%;
  background-size: cover;
}
/*End Cards Backgrounds*/
#student-hub-button, #canvas-button, #libraries-button, #lobo-mail-button, #lobo-web-and-classes-button, #campus-housing-food-computing-button, #support-connection-engagement-button, #well-being-button, #still-need-help-button, #financial-aid-button{
  height: 100%;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  border: none;
  background-color: #ffffff00;
  z-index: 2;
  border-radius: 10px;
}
/*Screens >1700*/
@media (max-width: 1700px){
  .sl-card{
    height: 350px;
    width: 350px;
  }
    .sl-card-title{
    font-size: 2em;
  }
    /*Cards Backgrounds*/
  #student-hub {
  background-position: 55% 0%;
  }
  #canvas {
  background-position: 55% 0%;
  }
  #libraries {
  background-position: 55% 0%;
  }
  #lobo-mail {
   background-position: 55% 0%;
  }
  #loboweb-and-classes {
    background-position: 55% 0%;
  }
  #campus-housing-food-computing {
    background-position: 70% 0%;
  }
  #support-connection-engagement {
    background-position: 55% 100%;
  }
  #well-being {
    background-position: 55% 0%;
  }
  #financial-aid{
    background-position: 50% 50%;
  }
  #still-need-help {
    background-position: 0% 0%;
  }
  /*End Cards Backgrounds*/
}
/*End Screens >1700*/

/*Screens >1500*/
@media (max-width: 1500px){
  .sl-card{
    height: 320px;
    width: 320px;
  }
    .sl-card-title{
    font-size: 2em;
  }
    /*Cards Backgrounds*/
  #student-hub {
  background-position: 55% 0%;
  }
  #canvas {
  background-position: 55% 0%;
  }
  #libraries {
  background-position: 55% 0%;
  }
  #lobo-mail {
   background-position: 55% 0%;
  }
  #loboweb-and-classes {
    background-position: 55% 0%;
  }
  #campus-housing-food-computing {
    background-position: 70% 0%;
  }
  #support-connection-engagement {
    background-position: 55% 100%;
  }
  #well-being {
    background-position: 55% 0%;
  }
    #financial-aid{
    background-position: 50% 50%;
  }
  #still-need-help {
    background-position: 0% 0%;
  }
  /*End Cards Backgrounds*/
}
/*End Screens >1500*/

/*Tablet Breakpoint*/
@media (max-width: 1440px){
  .sl-container{
    width: 100%;
    margin: 0;
  }
  .sl-card{
     height: 320px;
     width: 320px;
  }
  .sl-card-title{
    font-size: 1.5em;
  }
  /*Cards Backgrounds*/
  #student-hub {
  background-position: 55% 0%;
  }
  #canvas {
  background-position: 55% 0%;
  }
  #libraries {
  background-position: 55% 0%;
  }
  #lobo-mail {
   background-position: 55% 0%;
  }
  #loboweb-and-classes {
    background-position: 55% 0%;
  }
  #campus-housing-food-computing {
    background-position: 70% 0%;
  }
  #support-connection-engagement {
    background-position: 55% 100%;
  }
  #well-being {
    background-position: 55% 0%;
  }
    #financial-aid{
    background-position: 50% 50%;
  }
  #still-need-help {
    background-position: 0% 0%;
  }
  /*End Cards Backgrounds*/
}
/*End Tablet Breakpoint*/

/*Screens >1370*/
@media (max-width: 1370px){
  .sl-card{
    height: 350px;
    width: 240px;
  }
    .sl-card-title{
    font-size: 1.5em;
  }
}
/*End Screens >1370*/


/*Phone Breakpoint*/
@media (max-width: 667px){
  .sl-container{
    width: 100%;
    margin: 0;
  }
  .sl-card-title{
    font-size: 1.5em;
  }
  .sl-card{
    height: 350px;
    width: 300px;
  }
  /*Cards Backgrounds*/
  #student-hub {
    background-position: 55% 0%;
  }
  #canvas {
    background-position: 55% 0%;
  }
  #libraries {
    background-position: 48% 0%;
  }
  #lobo-mail {
   background-position: 55% 0%;
  }
  #loboweb-and-classes {
    background-position: 55% 0%;
  }
  #campus-housing-food-computing {
    background-position: 70% 0%;
  }
  #support-connection-engagement {
    background-position: 55% 100%;
  }
  #well-being {
    background-position: 60% 100%;
  }
    #financial-aid{
    background-position: 50% 50%;
  }
  #still-need-help {
    background-position: 0% 0%;
  }
  /*End Cards Backgrounds*/
}
/*End Phone Breakpoint*/