/* adding search mode to hide all other */
 .search-mode .main-header,
 .search-mode .section,
 .search-mode footer,
 #search-container,
 #search-container .search-close {
     display: none;
 }

 .search-mode #search-container,
 .search-mode #search-container .search-close {
     display: block;
 }
 
 /* not a must i just liked the dark background */
 #search-container, .search-mode  {
     background-color: #303d49;
 }

 /* overriding default behavior of a panel */
 #search-container > .panel {
     margin-bottom: 0;
     background-color: transparent ;
     border: none;
     border-radius: 0px;
     -webkit-box-shadow: none;
     box-shadow: none;
 }

 #search-container .search_box {
     background-color: #3b4856;
     flex: 0 0 auto;
     position: fixed;
     width: 100%;
     height: 238px;
 }

 /* some cleanup of inherited css */
 #search-container .panel-heading {
     padding: 0px;
 }

 #search-container .panel + h1 {
     display:none;
 }

 /* styling the input */
 #search-container input#q {
     color: white;
     text-align: left;
     height: 212px;
     overflow: hidden;
     z-index: auto;
     position: relative;
     line-height: normal;
     font-size: 46px !important;
     transition: none;
     background: transparent !important;
     border: 0;
     outline: 0;
     resize: none;
     padding: 11px;
 }

 #search-container form {
     transition: none;
     background: transparent !important;
     border: 0;
     outline: 0;
     resize: none;
 }

 /* styling the text result (basic so its look good and show part of the content)  */
 #search-container .hit {
     padding-bottom: 50px;
 }    

 #search-container .hit .attribute {
     color: rgb(156, 179, 201);
 }

#search-container .no-results {
    color:white;
}

 #search-container .hit .attribute .title a {
    font-size: 24px;
    color: #52c5d7!important;
    line-height: 28px;
 }

 #search-container .hit .attribute > span {
     display: block;
     text-transform: capitalize;
     font-weight: bold;
     line-height: 1.9;
     color: rgb(211, 233, 255);
 }
 /* for now hiding text */
 #search-container .hit .attribute:first-child {
     display: block;
 }

 #search-container .hit  em {
     background-color: #4c82b8;
     color: #fff;
     font-style: normal;
 }

 #search-container .container-snow-header {
     height: 160px;
     width: 200px;
     position: absolute;
     right: 30px;
     top: 0;
     opacity: .1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
     filter: alpha(opacity=10);
 }
 #search-container .search-label {
     float: left;
     color: white;
     margin-right: 11px;
     font-family: Roboto, sans-serif;
     margin-top: 10px;
     font-size: 16px;
 }

 #search-container .powered-by {
    font-weight: 400;
    margin-left: 25px;
}

 #search-container input#q {
     width: 50%;
     margin-right: 25%;
     margin-left: 25%;
 }
 /* adjusting results */
 #search-container #hits {
     margin-top: 250px;
 }

 #search-container #hits,
 #search-container #show-more-container {
     padding: 0 25%;
     padding-top: 25px;
 }

 #search-container .loading #hits,
 #search-container .loading #show-more-container {
     display: none;
 }

 /* log adjustments */
 #search-container .container-logo {
     margin-right: 25%;
     margin-left: 25%;
 }
 #search-container .logo {
     margin: 0;
 }
 #search-container .logo a {
    float: left;
 }
 #search-container .logo img {
     width: 200px;
 }

 #search-container .search-close {
     animation: fadeIn .2s;
     transition: all .2s;
     z-index: 1;
     height: 16px;
     width: 16px;
     right: 25%;
     position: fixed;
     top: 10px;
     cursor: pointer;
 }

 /* support nicely in mobile */
 @media only screen and (max-width: 400px) {
     #search-container input#q {
         width: 90%;
         margin-right: 5%;
         margin-left: 5%;
     }
     /* adjusting results */
     #search-container #hits,
     #search-container #show-more-container {
         padding: 0 5%;
     }

     /* log adjustments */
     #search-container .container-logo {
         margin-right: 5%;
         margin-left: 5%;
     }
     #search-container .search_box {
         position: relative;
     }
     #search-container #hits {
         margin-top: 0;
     }
     #search-container .search-close {
         right: 5%;
     }
 }

 /* Loading */

 #search-container .swlw-label {
   color: lightgrey;
   font-size: 26px;
   position: absolute;
   top: 35%;
   left: 25%;
 }

 #search-container #swlw-loader {
   position: absolute;
   top: 350px;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
 #search-container .loading #swlw-loader {
     display: none;
 }

 #search-container .show-more-container {
     height: 57px;
     text-align: center;
     margin-top: 25px;
     margin-bottom: 95px;
 }

 #search-container .search-close svg {
     fill: white;
 }
 #search-container .search-close:hover {
     fill: #e6375a;
     transform: rotate(90deg);
 }

 #search-container #swlw-loader {
   -webkit-transform: translate(-50%, -50%) scale(0.6);
           transform: translate(-50%, -50%) scale(0.6);
 }
 #search-container #swlw-loader .logo {
   width: 70px;
 }

 #search-container #swlw {
   width: 104px;
   height: 121px;
   overflow: visible;
   background-color: transparent;
 }

 #search-container #swlw #swlw-base,
 #search-container #swlw #swlw-line-animation {
   fill: transparent;
   stroke-miterlimit: 10;
   stroke-width: 4px;
 }

 #search-container #swlw #swlw-base {
   stroke: lightgrey;
 }

 #search-container #swlw #swlw-line-animation {
   stroke: #57dee1;
   stroke-linecap: round;
   /* optional, this is to get border from color line animation rounded instead of cut */
   -webkit-animation: dash 1.5s linear;
           animation: dash 1.5s linear;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
 }

 #search-button {
    padding-top: 5px;
    margin-bottom: -5px;
    text-align: center;
 }

 #search-button a:hover {
     text-decoration: none !important;
     color: #ff8b00;
     transition: .2s color ease;
 }

 #search-button a {
     color: #52c5d7;
     transition: .2s color ease;
 }

 @-webkit-keyframes dash {
   0% {
     /* Stroke-dasharray: first value is the width of the animated stroke(aka dash); second value is the width of the space between each dash.
          * In this case, the first value is 60% of total path length, the second is 40%.
          */
     stroke-dasharray: 260.22 173.48;
     /* Stroke-dashoffset: is the point where stroke-dasharray will begin.
          * So in this case for anim, it needs to be at the start, and finish at the end of the swlw shape (aka the length of the path shape)
          */
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 1 431.7;
   }
   100% {
     stroke-dasharray: 260.22 173.48;
     stroke-dashoffset: -867.4;
   }
 }

 @keyframes dash {
   0% {
     /* Stroke-dasharray: first value is the width of the animated stroke(aka dash); second value is the width of the space between each dash.
          * In this case, the first value is 60% of total path length, the second is 40%.
          */
     stroke-dasharray: 260.22 173.48;
     /* Stroke-dashoffset: is the point where stroke-dasharray will begin.
          * So in this case for anim, it needs to be at the start, and finish at the end of the swlw shape (aka the length of the path shape)
          */
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 1 431.7;
   }
   100% {
     stroke-dasharray: 260.22 173.48;
     stroke-dashoffset: -867.4;
   }
 }