@charset "utf-8";

/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto);
#tiles-list{

    margin-top: 20px;

}

.tile{

    background-color: #FFF;

    border: 1px solid #D9D9D9;

    float: left;

    padding: 10px;

    width: 330px;

    height: auto;

    vertical-align: baseline;

    float: left;

    margin-top: 10px;

    margin-right: 15px;

    overflow: hidden;

}


.no-border{

    border: 1px solid transparent;

    background-color: transparent;

}

.tile-circle{

    width: 300px;

    height: 300px;

    padding: 10px;

    background-color: #ccc;

    float: left;

    vertical-align: baseline;

    margin-bottom: 5px;

    margin-right: 5px;

    overflow: hidden;

    border-radius: 100%;

    -moz-border-radius: 100%;

    -khtml-border-radius: 100%;

    -webkit-border-radius: 100%;

    background-repeat:no-repeat;

}

 

.tile .tile-image {

    background-color: #CCC;

    height: 230px;

    position: relative;

}



.tile .tile-image .hover {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-color: #000;

    filter: alpha(opacity=0);

    opacity: 0;

    -webkit-transition: opacity .25s ease-in-out;

    -moz-transition: opacity .25s ease-in-out;

    -ms-transition: opacity .25s ease-in-out;

    -o-transition: opacity .25s ease-in-out;

    transition: opacity .25s ease-in-out;   

}



.tile .tile-image:hover .hover {

    opacity: 0.8;

}





.tile .tile-image .hover .icon-wrap {

    opacity: 1;

    color: #fff;

    display: inline-block;

    position: absolute;

    text-align: center;

    top: 50px;

    width: 100%;

}



.tile .tile-image .hover .icon-wrap img {

    float: none;

    margin: 5px;

}



.tile .tile-image .hover .icon-wrap p {

    line-height: 1.5;

    padding: 0px;

    margin: 0px;

}



.tile .tile-contant {

    position:relative;

    margin-top:10px;

}



.tile .tile-contant h1 {

    font-size: 16px;

    font-weight: normal;

    color: #000;

    text-transform: uppercase;

    border-bottom: solid 1px #dfdfdf;

    margin: 0px 0px 5px 0px;

    padding: 0px 0px 5px 0px;

    line-height: 20px;

    text-align: left;	

}



 

.tile .tile-contant p {

    font-size:14px;

    line-height: 1.5;

    padding:0px;

    margin:0px;

    font-weight:normal;

}



.backgroundGreen{

    background-color: #008803;

}



.backgroundRed{

    background-color: #FF0000;

}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .tile{
        width: 280px;
    }
    
.tile-circle{

    width: 250px;

    height: 250px;
 
}
    
    
}