/* -- import Roboto Font ------------------------------ */
/* -- box model --------------------------------------- */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* -- Base style -------------------------------------- */
html {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- Google typography ------------------------------- */
.title {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.1;
  color: #212121;
  text-transform: inherit;
  letter-spacing: inherit;
}

.caption {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.1;
  color: #bdbdbd;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* -- Ripple-effect ----------------------------------- */
.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translatez(0);
}
.ink {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
}
.ink {
  background: #fff;
  opacity: 1;
}
.ink.animate {
  -webkit-animation: ripple-effect 0.5s linear;
  -o-animation: ripple-effect 0.5s linear;
  animation: ripple-effect 0.5s linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-moz-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-ms-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-o-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}

/* -- Dashboard --------------------------------------- */
.dashboard {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  padding: 5px;
  margin: 0;
}
.dashboard > * {
  display: block;
  float: left;
  margin: 5px;
}

/* -- Tiles ------------------------------------------- */
.tile {
  color: #212121;
  overflow: hidden;
  cursor: pointer;
  outline: 0;
  border: 0;
  border-radius: 0;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.tile:hover,
.tile:active,
.tile.active,
.tile:focus,
.tile:active:focus,
.tile.active:focus {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* -- Tiles content ----------------------------------- */
.tile .content-wrapper {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.tile .content-wrapper .tile-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tile .content-wrapper .tile-content .tile-img {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
.tile .content-wrapper .tile-content .tile-img.tile-img-sm {
  position: absolute;
  margin: 0;
  padding: 0;
  display: block;
  opacity: 0.3;
}
.tile .content-wrapper .tile-content .tile-img.tile-img-bg {
  position: absolute;
  background-position: left top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.tile .content-wrapper .tile-content .tile-holder {
  position: relative;
  display: block;
  padding: 0;
}
.tile .content-wrapper .tile-content .tile-holder.tile-holder-sm {
  position: absolute;
  margin: 0;
  padding: 0;
}

/* begin colors */

/*begin col1*/
/* Tile init color */
.tile-col1 {
  background-color: #003F72;
}
/* font color */
.tile-col1 .tile-content,
.tile-col1 .title {
  color: #eceff1;
}
/* hover color */
.tile-col1:hover,
.tile-col1:active,
.tile-col1.active {
  background-color: #08477a;
}

/* post-click color */
.tile-col1:focus {
  background-color: #08477a;
}
.tile-col1:disabled,
.tile-col1.disabled,
.tile-col1[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col1 .ink {
  background-color: #FFFFFF;
}
  

/*begin col2*/
/* Tile init color */
.tile-col2 {
  background-color: #EF476F;
}
/* font color */
.tile-col2 .tile-content,
.tile-col2 .title {
  color: #eceff1;
}
/* hover color */
.tile-col2:hover,
.tile-col2:active,
.tile-col2.active {
  background-color: #f2547a;
}

/* post-click color */
.tile-col2:focus {
  background-color: #f2547a;
}
.tile-col2:disabled,
.tile-col2.disabled,
.tile-col2[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col2 .ink {
  background-color: #FFFFFF;  
}





/*begin col3*/
/* Tile init color */
.tile-col3 {
  background-color: #FFD166;
}
/* font color */
.tile-col3 .tile-content,
.tile-col3 .title {
  color: #2b2b2b;
}
/* hover color */
.tile-col3:hover,
.tile-col3:active,
.tile-col3.active {
  background-color: #ffd268;
}

/* post-click color */
.tile-col3:focus {
  background-color: #ffd268;
}
.tile-col3:disabled,
.tile-col3.disabled,
.tile-col3[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col3 .ink {
  background-color: #FFFFFF;  
}




/*begin col4*/
/* Tile init color */
.tile-col4 {
  background-color: #e7d7d7;
}
/* font color */
.tile-col4 .tile-content,
.tile-col4 .title {
  color: #2b2b2b;
}
/* hover color */
.tile-col4:hover,
.tile-col4:active,
.tile-col4.active {
  background-color: #eadbdb;
}

/* post-click color */
.tile-col4:focus {
  background-color: #eadbdb;
}
.tile-col4:disabled,
.tile-col4.disabled,
.tile-col4[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col4 .ink {
  background-color: #FFFFFF;  
}






/*begin col5*/
/* Tile init color */
.tile-col5 {
  background-color: #118AB2;
}
/* font color */
.tile-col5 .tile-content,
.tile-col5 .title {
  color: #FFFFFF;
}
/* hover color */
.tile-col5:hover,
.tile-col5:active,
.tile-col5.active {
  background-color: #1690b8;
}

/* post-click color */
.tile-col5:focus {
  background-color: #1690b8;
}
.tile-col5:disabled,
.tile-col5.disabled,
.tile-col5[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col5 .ink {
  background-color: #FFFFFF;  
}



/*begin col6*/
/* Tile init color */
.tile-col6 {
  background-color: #7DDF64;
}
/* font color */
.tile-col6 .tile-content,
.tile-col6 .title {
  color: #3e3e3e;
}
/* hover color */
.tile-col6:hover,
.tile-col6:active,
.tile-col6.active {
  background-color: #86df6f;
}

/* post-click color */
.tile-col6:focus {
  background-color: #86df6f;
}
.tile-col6:disabled,
.tile-col6.disabled,
.tile-col6[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col6 .ink {
  background-color: #FFFFFF;  
}




/*begin col7*/
/* Tile init color */
.tile-col7 {
  background-color: #003F72;
}
/* font color */
.tile-col7 .tile-content,
.tile-col7 .title {
  color: #3e3e3e;
}
/* hover color */
.tile-col7:hover,
.tile-col7:active,
.tile-col7.active {
  background-color: #ffe2a4;
}

/* post-click color */
.tile-col7:focus {
  background-color: #ffe2a4;
}
.tile-col7:disabled,
.tile-col7.disabled,
.tile-col7[disabled] {
  background-color: #FFFFFF;
}
/* splash color */
.tile-col7 .ink {
  background-color: #FFFFFF;  
}





/*-- Tiles size --------------------------------------- */
.tile {
  width: 270px;
  height: 130px;
}
.tile .content-wrapper .tile-content {
  height: 130px;
  padding: 10px;
}
.tile .content-wrapper .tile-content .tile-img {
  height: 86.66666667px;
}
.tile .content-wrapper .tile-content .tile-img-bg {
  width: 270px;
  height: 130px;
  margin-left: -10px;
  margin-top: -10px;
}
.tile .content-wrapper .tile-content .tile-img-sm {
  width: 65px;
  height: 43.33333333px;
}
.tile .content-wrapper .tile-content .tile-img-sm,
.tile .content-wrapper .tile-content .tile-holder-sm {
  bottom: 10px;
  left: 10px;
}
.tile.tile-sqr {
  width: 33%;
}
.tile.tile-sqr .content-wrapper .tile-content .tile-img-bg {
  width: 130px;
}
.tile-lg {
  width: 33%;
  min-width:250px;
  height: 270px;
}
.tile-lg .content-wrapper .tile-content {
  height: 270px;
  padding: 20px;
}
.tile-lg .content-wrapper .tile-content .tile-img {
  height: 85%;
}
.tile-lg .content-wrapper .tile-content .tile-img-bg {

  height: 75%;
  margin-top: 20px;
  margin-bottom: 20px;
  
}
.tile-lg .content-wrapper .tile-content .tile-img-sm {
  width: 135px;
  height: 90px;
}
.tile-lg .content-wrapper .tile-content .tile-img-sm,
.tile-lg .content-wrapper .tile-content .tile-holder-sm {
  bottom: 20px;
  left: 20px;
}
/* le crux */
.tile-lg.tile-sqr {
  width: 31%;
  min-width: 320px;
}
.tile-lg.tile-sqr .content-wrapper .tile-content .tile-img-bg {
  width: 270px;
}
.tile-sm {
  width: 15%;
  min-width: 150px;
  
}
.tile-sm .content-wrapper .tile-content {
  height: 60px;
  padding: 5px;
}
.tile-sm .content-wrapper .tile-content .tile-img {
  height: 40px;
}
.tile-sm .content-wrapper .tile-content .tile-img-bg {
  width: 130px;
  height: 60px;
  margin-left: -5px;
  margin-top: -5px;
}
.tile-sm .content-wrapper .tile-content .tile-img-sm {
  width: 30px;
  height: 20px;
}
.tile-sm .content-wrapper .tile-content .tile-img-sm,
.tile-sm .content-wrapper .tile-content .tile-holder-sm {
  bottom: 5px;
  left: 5px;
}
.tile-sm.tile-sqr {
  width: 100px;
}
.tile-sm.tile-sqr .content-wrapper .tile-content .tile-img-bg {
  width: 60px;
}
/*-- Display animation -------------------------------- */
.display-animation > * {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.display-animation > .animated {
  -webkit-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
  -o-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
  animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
.no-js .display-animation > * {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

@keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-o-keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-ms-keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}