@import url(https://fonts.bunny.net/css?family=dosis:300,500,600|gochi-hand:400);
  
   body {
     font-family: "Dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 18px;

     color: #666666;
   }

   h1 {
     font-family: 'Gochi Hand', cursive;
     font-size: 2.5em;
   }

   .green-ok {
     color: #2196f3;
     font-size: x-large;
   }

   .page-header {
     position: relative;
   }

   .page-header.page-header-with-icon {
     text-align: center;
     border-top: 2px solid #2196f3;
     border-bottom: none;
     padding-bottom: 0;
     padding-top: 16px;
     margin: 50px 0 50px 0;
   }

   .page-header.page-header-with-icon>[class^="fa-"],
   .page-header.page-header-with-icon>[class*=" fa-"] {
     position: absolute;
     display: block;
     left: 50%;
     top: -25px;
     margin-left: -50px;
     color: #2196f3;
     background-color: white;
     font-size: 33px;
     line-height: 50px;
     width: 100px;
     height: 50px;
   }

   .page-header.page-header-with-icon h1,
   .page-header.page-header-with-icon h2,
   .page-header.page-header-with-icon h3,
   .page-header.page-header-with-icon h4,
   .page-header.page-header-with-icon h5,
   .page-header.page-header-with-icon h6 {
     /*text-transform: uppercase;*/
     font-weight: 400;
     margin: 20px 10px;
     font-size: 26px;
   }

   .page-header.page-header-with-icon small {
     display: block;
     text-transform: none;
     font-size: 16px;
   }

   .borderline {
     border-left-width: 1px;
     border-left-color: cornflowerblue;
     border-left-style: dotted;
   }

   .head,
   .grayscale {
     filter: grayscale(100%);
   }

   .head:hover,
   .grayscale:hover {
     filter: inherit;
   }

   
   .media-body {
     line-height: 1.2;
     font-size: 90%;
   }

   .backhome {
     margin-top: 100px;
   }
   /* tools */

   .clickable {
     cursor: pointer;
   }
   .nowrap {
    white-space: nowrap;
   }