a:link {
    color: #0098d0;
	text-decoration: none;
}

a:hover {
    text-decoration: underline;	
}

a:visited {
    color: #0098d0;
}


#hop {
      border-radius: 50%;
  -webkit-transition: -webkit-transform .5s ease-in-out;
          transition:         transform .5s ease-in-out;
    
    
}

#hop:hover {
    -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
    
}

#zoomi {
transition: all .2s;    
}

#zoomi:focus,
#zoomi:hover {
  transform: scale(0.95);  
}



.buttonbluesmall {
        color: #ffffff !important;
        background: #0098d0;  
        border: 8px solid #0098d0; 
        padding: 0 10px;
        font-family: sans-serif; 
        font-size: 13px; 
        line-height: 1.1; 
        text-align: center; 
        text-decoration: none !important; 
        display: block; 
        border-radius: 3px; 
        font-weight: bold;
        transition: all 100ms ease-in;
}

.buttonbluesmall:hover { 
 background: #3ba8de;
 border: 8px solid #3ba8de;
}

.masseffect {
  color: #ffffff !important;
  background: #0098d0;  
  border: 17px solid #0098d0; 
  padding: 0 20px;
  font-family: sans-serif; 
  font-size: 23px; 
  line-height: 1.1; 
  text-align: center; 
  text-decoration: none !important; 
  display: block; 
  border-radius: 3px; 
  font-weight: bold;
  transition: all 100ms ease-in;
     
}


.masseffect:hover {
 background: #3ba8de;
 border: 21px solid #3ba8de;    
    
}
.jimmy {
 transition: box-shadow .2s;    
    
}

.jimmy:hover {
  box-shadow: 0px 2px 17px 1px #dfdfdf;  
}

.card { 
display:inline-block; 
max-width:25%; 
margin: 0 -2px; 
min-width:200px; 
vertical-align:top; 
width:100%;
}

/*
img {
  background: #fff;  
  transition: box-shadow .2s;  
}

img:hover {
 box-shadow: 0px 4px 27px 1px #c3c3c3;
}
*/


/*--------------------------- MEDIA QUERY ---------------------------*/

@media screen and (max-width: 380px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid, .fluid-centered {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column, .stack-column-center {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
	text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
	text-align: center !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}
table.center-on-narrow {
	display: inline-block !important;
}
}