"

From 2014.igem.org

@media (min-width: 820px) {

   .card-slide {
       display: table-cell;
   }
   .card-slide .text-card-slide {
       width: 0px;
       visibility: hidden;
       display: inline-block;
       overflow: hidden;
       white-space: nowrap;
       font-size: 25px;
       font-weight: 300;
       height: 100px;
       /* color: #ffffff; */
       font-family: 'Roboto';
       -webkit-transition: all 0.4s;
       -moz-transition: all 0.4s;
       -ms-transition: all 0.4s;
       -o-transition: all 0.4s;
       transition: all 0.4s;
       text-align: left;
       vertical-align: top;
   }
   .card-img > img {
       width: 100px;
       height: 100px;
   }
   .card-slide:hover .text-card-slide {
       visibility: visible;
       width: 200px;
       color: #ffffff;
       height: 100px;
       padding-left: 0;
       margin-left: -3px;
   }
   .text-card-slide a {
       color: white;
   }
   .text-card-slide a:visited {
       color: white;
   }
   .text-card-slide div:hover a, .text-card-slide a:visited:focus {
       color: rgb(52, 152, 219);
       text-decoration: none;
   }
   .text-card-slide div a {
       transition: color 0.3s;
       vertical-align: middle;
       margin-top: auto;
       margin-bottom: auto;
   }
   .text-card-slide div {
       transition: background-color 0.3s;
       height: 50px;
       margin: 0px;
       text-align: left;
       vertical-align: middle;
       text-underline-width: 0px;
       padding-left: 3px;
   }
   .text-card-slide div:hover {
       background-color: white;
   }
   .card-slide img {
       height: 100px;
       width: 100px;
   }

}

@media (max-width: 819px) {

   .card-slide {
       
   }
   .card-slide .text-card-slide {
       width: 0px;
       /* visibility: hidden; */
       display: inline-block;
       overflow: hidden;
       white-space: nowrap;
       font-size: 25px;
       font-weight: 300;
       height: 100px;
       /* color: #ffffff; */
       font-family: 'Roboto';
       -webkit-transition: all 0.4s;
       -moz-transition: all 0.4s;
       -ms-transition: all 0.4s;
       -o-transition: all 0.4s;
       transition: all 0.4s;
       text-align: left;
       vertical-align: top;
   }
   .card-img > img {
       width: 100px;
       height: 100px;
   }
   .card-slide .text-card-slide {
       width:200px;
   }
   .text-card-slide a {
       color: white;
   }
   .text-card-slide a:visited {
       color: white;
   }
   .text-card-slide div:hover a, .text-card-slide a:visited:focus {
       
   }
   .text-card-slide div a {
       transition: color 0.3s;
       vertical-align: middle;
       margin-top: auto;
       margin-bottom: auto;
   }
   .text-card-slide div {
       transition: background-color 0.3s;
       height: 50px;
       margin: 0px;
       text-align: left;
       vertical-align: middle;
       text-underline-width: 0px;
       padding-left: 3px;
   }
   .text-card-slide div:hover {
       
   }
   .card-slide img {
       height: 100px;
       width: 100px;
   }

}