/* Included color classes.. 
	.red 
	.blue 
	.yellow
	.green
	.orange
	.navy 
*/
/* Icon set - http://ionicons.com */
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

.snip1205 {
    position: relative;
    float: left;
    overflow: hidden;
    /*margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;*/
    width: 100%;
    background: #000000;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

    .snip1205 * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }

    .snip1205 span {
        margin-bottom: 20px;
    }

    .snip1205 img {
        max-width: 100%;
        vertical-align: top;
    }

    .snip1205 .fa {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        font-size: 20px;
        color: #FFF;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background: #545c4d;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }

    .snip1205 .b {
        left: 0;
        right: 0;
        /*top: 0;*/
        bottom: 5%;
        position: absolute;
    }

    .snip1205.blue {
        background-color: #2472a4;
    }

        .snip1205.blue i {
            color: #20638f;
        }

    .snip1205.red {
        background-color: #ab3326;
    }

        .snip1205.red i {
            color: #962d22;
        }

    .snip1205.yellow {
        background-color: #fff;
    }

        .snip1205.yellow a {
            color: #FFF;
        }

    .snip1205.green {
        background-color: #229955;
    }

        .snip1205.green i {
            color: #1e8449;
        }

    .snip1205.orange {
        background-color: #d67118;
    }

        .snip1205.orange i {
            color: #bf6516;
        }

    .snip1205.navy {
        background-color: #2b3c4e;
    }

        .snip1205.navy i {
            color: #222f3d;
        }

    .snip1205:hover img,
    .snip1205.hover img {
        opacity: 0.3;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        cursor: pointer;
    }

    .snip1205:hover a,
    .snip1205.hover a {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

/* Demo purposes only */

@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);

.snip1576 {
    background-color: #fff;
    color: #444;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    /*margin: 8px;
  max-width: 315px;
  min-width: 230px;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

    .snip1576 * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    .snip1576:after {
        background-color: #359ad8;
        height: 150%;
        bottom: -145%;
        content: '';
        left: 0;
        right: 0;
        position: absolute;
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }

    .snip1576 img {
        position: relative;
        vertical-align: top;
        max-width: 100%;
        backface-visibility: hidden;
    }

    .snip1576 figcaption {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.1em;
        opacity: 0;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .snip1576 h3 {
        font-size: 1em;
        font-weight: 400;
        letter-spacing: 1px;
        margin: 0;
        text-transform: uppercase;
    }

        .snip1576 h3 span {
            display: block;
            font-weight: 700;
        }

    .snip1576 .fa {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .snip1576:hover > img,
    .snip1576.hover > img {
        opacity: 0.1;
    }

    .snip1576:hover:after,
    .snip1576.hover:after {
        bottom: 95%;
    }

    .snip1576:hover figcaption,
    .snip1576.hover figcaption {
        opacity: 1;
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }


    @import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1384 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;

  color: #ffffff;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
}
.snip1384 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1384 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1384:after,
.snip1384 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1384:after {
  content: '';
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
.snip1384 figcaption {
  z-index: 1;
  padding: 40px;
}
.snip1384 h3,
.snip1384 .links {
  width: 100%;
  margin: 5px 0;
  padding: 0;
}
.snip1384 h3 {
  line-height: 1.1em;
  font-weight: 700;
  font-size: 1.4em;
  text-transform: uppercase;
  opacity: 0;
}
.snip1384 p {
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
.snip1384 i {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 20px 25px;
  font-size: 34px;
  opacity: 0;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
.snip1384 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1384:hover img,
.snip1384.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
.snip1384:hover:after,
.snip1384.hover:after {
  opacity: 1;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
.snip1384:hover h3,
.snip1384.hover h3,
.snip1384:hover p,
.snip1384.hover p,
.snip1384:hover i,
.snip1384.hover i {
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  opacity: 1;
}

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1252 {
  color: #fff;
  position: relative;
  float: left;
  /*margin: 10px 1%;
  min-width: 310px -60px;
  max-width: 310px;*/
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
  font-size: 16px;
}
.snip1252 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.snip1252 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1252 i {
  position: absolute;
  bottom: 0px;
  right: 15px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 3em;
  line-height: 1em;
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045);
  transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045);
}
.snip1252 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
}
.snip1252 a:before,
.snip1252 a:after {
  width: 1px;
  height: 0;
  background-color: #ffffff;
}
.snip1252 a:before {
  right: 0;
  top: 0;
}
.snip1252 a:after {
  left: 0;
  bottom: 0;
}
.snip1252:before,
.snip1252:after,
.snip1252 a:before,
.snip1252 a:after {
  position: absolute;
  content: '';
  background-color: #ffffff;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0.8;
}
.snip1252:before,
.snip1252:after {
  height: 1px;
  width: 0%;
}
.snip1252:before {
  top: 0;
  left: 0;
}
.snip1252:after {
  bottom: 0;
  right: 0;
}
.snip1252:hover img,
.snip1252.hover img {
  opacity: 0.25;
}
.snip1252:hover a:before,
.snip1252.hover a:before,
.snip1252:hover a:after,
.snip1252.hover a:after {
  height: 100%;
}
.snip1252:hover i,
.snip1252.hover i {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.7;
}
.snip1252:hover:before,
.snip1252.hover:before,
.snip1252:hover:after,
.snip1252.hover:after {
  width: 100%;
}
.snip1252:hover:before,
.snip1252.hover:before,
.snip1252:hover:after,
.snip1252.hover:after,
.snip1252:hover a:before,
.snip1252.hover a:before,
.snip1252:hover a:after,
.snip1252.hover a:after {
  opacity: 0.1;
}
/* Demo purposes only */