/**
    Document   : base
    Created on : August 04, 2016, 13:40
    Author     : Kom Sihon & W1773ND (wilfriedwillend@gmail.com)
    Description:
        Additional basic display rules for Ikwen apps [Commercial default version]
*/

@import url('https://fonts.googleapis.com/css?family=Lato:300|PT+Sans:400,700');


html { height: 100vh; }
body { background-color: #f4f5f6; color: #464646; display: flex; flex-direction: column;
        height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */}
a {/* text-decoration: none !important; */}


.working {cursor: wait}
.success {background: #B6F1B6; border: 1px solid; border-radius: 3px; color: #039B03}
.msg-tag.info {background: #dde9f1;border: 1px solid;border-radius: 3px;color: #1d2e9b}
.failure, .floating-notice.error, .msg-tag.error {background: #FFB6C1; border: 1px solid; border-radius: 3px; color:  #F00}

.btn { min-width: 200px !important; }

.btn-outline-primary { color: #007bff; background-color: transparent; background-image: none; border-color: #007bff; }
.btn-outline-primary:hover { color: #fff !important; background-color: #007bff; border-color: #007bff; }
.btn-outline-primary:focus, .btn-outline-primary.focus { color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #007bff; background-color: transparent; }
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: #007bff; border-color: #007bff; }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }

.btn-outline-white { color: #ffffff; background-color: transparent; background-image: none; border-color: #ffffff; }
.btn-outline-white:hover { color: #000000 !important; background-color: #ffffff; border-color: #ffffff; }
.btn-outline-white:focus, .btn-outline-white.focus { color: #ffffff; box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
.btn-outline-white.disabled, .btn-outline-white:disabled { color: #ffffff; background-color: transparent; }
.btn-outline-white:not(:disabled):not(.disabled):active,
.btn-outline-white:not(:disabled):not(.disabled).active,
.show > .btn-outline-white.dropdown-toggle { color: #fff; background-color: #ffffff; border-color: #ffffff; }
.btn-outline-white:not(:disabled):not(.disabled):active:focus,
.btn-outline-white:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }

.clear {clear: both}
.container { flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */ }
.text-muted {color: #888}
.help {color: #888; font-size: 14px}
.arrow {color: #bbb; margin: auto; width: 40px}
.arrow div {float: left; height: 20px; width: 20px}
.arrow.up div:first-child {border-right: 1px solid; transform: skewX(-30deg); transform-origin: 10px 0 0}
.arrow.up div:last-child {border-left: 1px solid; margin-left: -1px; transform: skewX(30deg); transform-origin: 10px 0 0}
.tpl, .hide {display: none}
.actions {
    border: 1px solid transparent;
    color: #888;
    cursor: pointer;
    margin-left: 6px;
    text-decoration: none;
    }
/*.fab { font-size: 25px}*/
.modal .actions {clear: both}
.no-border { border: none !important; }
.actions {border: 1px solid #ddd; border-radius: 3px}
.cta {font-family: "PT Sans", Lato, sans-serif;font-weight: 700;letter-spacing: 0.5px}
.stretched {height: 100%; width: 100%}
.errorlist {color: #e74c3c}
.input-error {border-color: #e74c3c}
#content .errorlist.username, #content .errorlist.phone {padding-left: 18px}
#content .errorlist.username li, #content .errorlist.phone li {list-style-type: disc}

.payment-method {display: block;cursor: pointer;margin-bottom: 1em;}
.payment-method .logo {display: block; text-align: center}
.om-instructions {display: none; margin-top: 10px;}

.modal-backdrop {background: #fff}
.modal-backdrop.in {opacity: .7; filter: Alpha(opacity=70)}

/* Modal vertical alignment trick : BEGIN */
.vertical-alignment-helper { display:table; height: 100%; width: 100%; }
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}
/* Modal vertical alignment trick : END */


.spinner-container {-webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; z-index: 2}
.spinner-container .path {
  stroke-dasharray: 1,150;
  stroke-dashoffset: 0;
  stroke: rgba(69, 151, 255, 0.85);
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes dash {
    0% {stroke-dasharray: 1,150; stroke-dashoffset: 0}
    50% {stroke-dasharray: 90,150; stroke-dashoffset: -35}
    100% {stroke-dasharray: 90,150; stroke-dashoffset: -124}
}
@-webkit-keyframes dash {
    0% {stroke-dasharray: 1, 150; stroke-dashoffset: 0}
    50% {stroke-dasharray: 90, 150; stroke-dashoffset: -35}
    100% {stroke-dasharray: 90, 150; stroke-dashoffset: -124}
}

#top-notice-ctnr {left: 0;position: fixed;text-align: center;top: 66px;width: 100%;z-index: 10000;}
.floating-notice {background: #F6FF8C; border: 1px solid #CDD570; border-radius: 2px; color: #484B2B; padding: 9px 24px; position: absolute}
.floating-notice.failure {border: 1px solid; color:  #F00}
.floating-notice .action {cursor: pointer; text-decoration: underline}
.status-bullet {border-radius: 50%;display: block;height: 15px;width: 15px;float: left;margin: 2px 10px 0 0;}
.status-bullet.warning, .status-bullet.pending {background: #FF9800;}
.status-bullet.primary {background: #3498db}
.status-bullet.success {background: #2ab732}
.status-bullet.danger, .status-bullet.canceled, .status-bullet.rejected {background: #ee4032}
.color-pending {color: #FF9800}
.color-expired, .color-rejected, .color-danger {color: #ee4032}
.color-active, .color-confirmed, .color-success {color: #2ab732}

.member, .ik-li {background: #fff; border-bottom: 1px solid #eee;display: block;float: left;padding: 10px;width: 100%;transition: border .1s;}
.ik-li.clearfix {border-bottom: none}
.member:hover, .ik-li:hover {background: #f8f8f8}
.member.active, .ik-li.active {background: #f8f6f6;}
.member .photo, .ik-li .image {background: no-repeat center;background-size: 100% auto;float: left;height: 60px;width: 60px;}
.member .photo, .ik-li .image.rounded {border-radius: 30px; overflow: hidden}
.member .info, .ik-li .info {float: left;margin-left: 10px;max-width: 225px;width: auto;}
.member .full_name, .ik-li .name, .ik-li .title {cursor: pointer;color: #333;font-size: 15px;padding: 5px 0 0;}
.member .about, .ik-li .about {color: #888;font-size: 13px;}
.ik-li .select {background: #fff;color:#9433ff; border-radius: 10px;display: none; height: 20px;position: absolute;width: 20px;margin: -20px 0 0 -10px;}
.ik-li.selected .select {background: #9433ff; color: #fff; display: block}
.ik-li .date {font-size: 11px}

.ik-li.selected {border: 3px solid #9433ff; transition: border .1s}
.ik-li.selected + .ik-li.selected {border-top: none}
.ik-li .actions {display: none;float: right;}
.ik-li:hover .select, .ik-li:not(.selected):hover .actions {display: block}
time {color: #888;float: right;font-size: 11px; font-weight: normal; padding: 0;}


.tiles {margin-top: -15px}
.tiles .ik-li {height: 280px;width: 100%;border-bottom: none;}
.tiles .ik-li .select {
    margin: -10px 0 0 -6px;
}
.tiles .ik-li > .content {background: #fff;border: 1px solid #eee;padding: 6px;}
.tiles .ik-li .image {background-size: cover}
.tiles .ik-li.selected {border: none}
.tiles .ik-li.selected .content {border: 3px solid #9433ff}
.tiles .ik-li.selected + .ik-li.selected {border-top: none}
.tiles .ik-li:hover, .tiles .ik-li.active {background: none}
.tiles .ik-li .image {height: 200px;width: 100%;}
.tiles .ik-li .info {margin: 7px 0 0 0; max-width: 70%;}

.tiles .sortable-placeholder {
    border: 3px dashed #777;
    float: left;
    display: block
}
.add-new-tile {float: left; padding: 10px 15px 5px 0}

.ik-li .actions {margin-top: 7px;}

.has-shade {box-shadow: 1px 1px 9px 4px rgba(0, 0, 0, .1)}
.bottom-shade {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1)}
.text-has-shade {text-shadow: 1px 2px 2px rgba(0, 0, 0, .7)}
.inner-shade {box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);}
.subtle-shade {box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .15);}
#navbar {background-color: rgba(248, 249, 250, 0); height: 55px;min-height: 50px;position: fixed;width: 100%;}
.menu-button {float: left;padding: 20px 15px 0 20px;}
.icon-bar {
    background: #217dbb;
    display: block;
    margin-bottom: 5px;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}


#navbar-search.active input {background: #1a275d; color: #ffffff;}

.navbar.active { background: #233682 !important; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.navbar.active .icon-bar { background: #ffffff !important; }
.navbar.active .navbar-brand { display: block; color: #ffffff !important; }
.navbar.active .navbar-nav>li>a { color: #ffffff !important; }
.navbar-brand > img {height: 23px !important;}
#navbar .back {display: none;float:left;font-size: 24px;margin: 12px 15px 0 10px;}
.navbar-default .navbar-brand {padding: 18px 0 0 0;margin-left: 10px;}
.letter-i {color: #26C6DA;float: none;}
#navbar .navbar-header {height: 55px;/* overflow: hidden */}
#navbar-search {
    display: none;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    margin-left: 2%;
    padding: 10px;
    position: fixed !important;
    top: 3px;
    width: 96%;
    z-index: 1001;
}
#navbar-search .hide-search {color: #bbb;float: left;font-size: 24px;margin-top: 5px;}
#navbar-search input {background: none;border: none;float: left !important; width: 88% !important;}
.navbar-brand { display: none; color: #217dbb !important; }
.navbar-nav>li>a {color: #217dbb !important; /*font-size: 1.5vw;*/}

#navbar-results {clear: both}
#navbar-results .stage {max-height: 300px; overflow: auto}
#navbar-results .ik-li {padding: 3px 0;}
#navbar-results .ik-li .full_name {text-transform: capitalize;color: #666;font-weight: 700;}
#navbar-results .ik-li .info {margin-left: 6px;max-width: 220px}
#navbar-results .ik-li .title {margin-top: 0;}
#navbar-results .ik-li .about {height: 35px; margin-bottom: 0;overflow: hidden;}


#nav-xs > li {float: left;}
#nav-xs {padding: 0;margin: 0}
#site-menu {background: #2c3e50;padding: 0;}

#content {padding: 55px 0 0;}
#content.form {padding-top: 15%;}
#content.form > div {margin: auto}
#content.form .directions {font-size: 16px; margin-top: 90px; text-align: center}
#content.form form {border: 2px solid #dce4ec;border-radius: 4px;margin-top: 25px;padding: 30px;}
#content form .hint {color: #8D96C5; font-size: 14px}
#content form ul.errorlist {padding-left: 0}
#content form ul.errorlist li {color: #FF0808; list-style-type: none}

.edge-swipe-overlay {background: rgba(0, 0, 0, .3);display: none; height: 100%;overflow: hidden;position: fixed;top: 0;width: 100%;z-index: 1000;}
.edge-panel-left {
    background: #ffffff;
    display: none;
    height: 100%;
    left: 0;
    margin-left: -300px;
    max-width: 300px;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 90%;
    z-index: 1;
    }
.edge-panel-left .wrapper {padding: 20px 0 120px}
.edge-panel-left footer {
    bottom: 0;
    margin: 0;
    padding: 10px;
    position: fixed;
    text-align: left;
    max-width: 299px;
    width: 89%;
    }
.edge-panel-left .stage {padding: 0 0 90px; width: 100%}
.edge-panel-left .menu {float: left;padding: 0 10px;width: 100%;}
.edge-panel-right {background: #fff; display: none; height: 100%; max-width: 300px;
    position: fixed; right: 0; width: 90%; overflow: auto; margin-right: -300px}
.divider {border-top: 1px solid #eee;clear:  both;margin: 15px 0;}
.nav > .tab {position: relative; display: block;}
.nav > .tab > a {position: relative;display: block;padding: 10px 6px;text-decoration: none;}
.nav-tabs > .tab {float: left;margin-bottom: -1px;}
.nav-tabs > .tab > a {line-height: 1.42857143;/* border: 1px solid transparent; */border-radius: 4px 4px 0 0;}
.nav-tabs > .tab.active > a, .nav-tabs > .tab.active > a:hover, .nav-tabs > .tab.active > a:focus {
    color: #2c3e50;
    background-color: #f6f6f6;
    border-bottom: 3px solid #1565C0;
    /* border-bottom-color: #3F51B5; */
    cursor: default;
}
.social-sharing .dropdown-menu a i {float: left;font-size: 25px;margin: 6px 10px 0 0;width: 22px;}
.social-sharing .fa-whatsapp {color: #4CAF50;}
.social-sharing .fa-facebook {color: #1976D2;}
.social-sharing .fa-twitter {color: #00BCD4;}
.social-sharing .dropdown-menu a i.fa-google-plus {color: #FF5722; font-size: 22px}
.social-sharing .fa-comment {color: #FFC107;}


li.dropdown:hover > ul.dropdown-menu { background: transparent }
li.dropdown:hover > ul.dropdown-menu.page-scrolled { background: #FFF !important; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color: #7b8a8b;background-color: #eee}
.dropdown-menu>li>a { color: #217DBB !important; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color: #FFF !important;background-color: #217DBB !important;}
.dropdown-menu .username { color: #233682 }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-nav>li>a:hover { color: #1f356a!important; }
.navbar-default.active .navbar-brand:hover, .navbar-default.active .navbar-nav>li>a:hover { color: #ef6900 !important; }

.btn .fa {margin: 0 10px 0 -10px}



.error-page #content {padding-left: 15px; padding-right: 15px}
.error-page h1 {font-size: 4em;}
.error-page footer, .error-page footer a {color: #fff}

.item-preview {background: #f6f6f6;border-radius: 5px;overflow: hidden;margin-top: 5px;}
.item-preview .img {background: no-repeat center;background-size: cover;float: left;height: 100px;width: 100px;}
.item-preview .name {float: left;font-size: 18px;margin: 10px 10px 0;}
.item-preview .about {clear: both; float: left; margin: 10px 10px 0}
.autocomplete-suggestions {background: #fff; box-shadow: 1px 1px 9px 4px rgba(0, 0, 0, .1)}
.autocomplete-suggestion {cursor: pointer; padding: 10px;}
.autocomplete-suggestion:not(:first-child) {border-top: 1px solid #ddd}

.swiper-button-prev, .swiper-button-next {background: #fff !important;font-size: 24px; height: 36px !important;text-align: center; width: 28px !important}
.swiper-button-next {right: 0 !important;border-top-left-radius: 3px;border-bottom-left-radius: 3px;}
.swiper-button-prev {left: 0 !important;border-top-right-radius: 3px;border-bottom-right-radius: 3px;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {pointer-events: visible !important;}

.fa-chevron-circle-up { color: #319dd5; }

/* Back to top button BEGIN */
.back-to-top { font-size: 3.5vw; position: fixed; bottom: 1%; text-align: right; z-index: 1; transition: all 1s; }

.hiding { opacity: 0; right: -100%; }

.showing { opacity: 0.8; right: 20px; }
/* Back to top button END */



.lang-switcher {/* float: right; *//* margin: 30px 20px; */}
.lang-switcher i {color: #fff; font-size: 23px; margin-left: -42px; position: absolute}
.lang-switcher select {/* background: transparent; *//* border: none; *//* color: #FFF */}
.flag-lang-switcher {background: transparent!important;border: none!important;padding: 0!important;/* width: 50px !important; */}

.ico { color: #676767 }

.ico-facebook:hover { color: #1d4b99 }
.ico-linkedin:hover { color: #0170ac }
.ico-twitter:hover { color: #1c9dec }
.ico-youtube:hover { color: #f80000 }


.footer {
            /* background-color: #233682; */
            /* flex-shrink: 0; */  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
            /* padding: 3px 0; */
            }
.footer-copyright { color: #ffffff}

footer {color: #999;font-size: 12px;text-align: center;}

@media (max-width: 767px) {
    li.dropdown:hover > ul.dropdown-menu { background: #FFF !important; }
    .dropdown-menu>li>a { color: #217DBB !important; }
    .dropdown-menu .username { color: #233682 }

    .card-xs {padding: 0}
    .modal .actions .action, .modal .actions .btn {margin-top: .6em}
    .ik-li.img-lg {padding: 8px 6px}
    .ik-li.img-lg .image {height: 100px; width: 130px;}
    .ik-li.img-lg .info {margin-left: 10px;width: 160px;}
    .ik-li .meta {display: block}
    .ik-li:not(.selected):hover .actions {background: #fff;border-radius: 3px;box-shadow: -1px 1px 7px 3px rgba(0, 0, 0, .1);margin-top: 0;position: absolute;padding: 3px 3px 5px;}
    .input-sm {font-size: 15px}
    #nav-xs.navbar-nav>li>a {padding: 16px 12px;float: left;}
    #nav-xs.navbar-nav>li:first-child>a {padding-left: 0}
    .navbar-default .navbar-brand {margin-left: 0;max-width: 100px;overflow: hidden;}
    .navbar-default .navbar-brand > * {float: left; width: 300%}
    .navbar-default .navbar-brand .letter-i {float: none}
    .container-fluid > strong.navbar-header {float: left;margin-left: 0;}
    #navbar > .container-fluid {padding: 0}
    #nav-xs.navbar-nav .open .dropdown-menu {
        background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 4px;
        border-top-color: #e9e9e9;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        margin-top: -5px;
        position: absolute;
    }
    .navbar-default #nav-xs.navbar-nav .open .dropdown-menu>li>a {color: #3498db;line-height: 35px;}
    .navbar-right .dropdown-menu {left: auto;right: 3px;top: 40px;}
    #navbar-results {border-top: 1px solid #eee}
    .nav-tabs.swiper-wrapper {background: #f8f6f6; border-bottom: none}
    .nav-tabs > .tab {margin-bottom: -2px}
    .nav-tabs > .tab > a {border-radius: 0;border-top: 2px solid transparent;border-bottom: 2px solid transparent;color: #aaa;font-weight: 700;line-height: 1.2;text-align: center;}
    .nav-tabs > .tab.active > a, .nav-tabs > .tab.active > a:hover, .nav-tabs > .tab.active > a:focus {
        background: none;
        border: none;
        border-bottom: 2px solid #1b6d85;
        color: #555
    }
    .nav>li>a {font-size: 16px; font-weight: 700; padding: 10px 30px }
    .bottom-shade-xs {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1)}
    .ik-li .date {position: absolute; right: 6px}

    .footer-logo { max-width: 20vw !important; }
    footer h5 { font-size: 4vw !important; margin-top: 4vh !important; }
    footer h4 { font-size: 5vw !important; }
    footer ul { font-size: 3.5vw !important; }

}
@media (min-width: 768px) {
    .modal .actions {margin-top: 2em}
    #content {padding-top: 75px; min-height: 450px}
    .form-wrapper {width: 360px}
    #navbar .navbar-header {float: left; height: auto}
    .menu-button {cursor: pointer;padding: 24px 15px 0 0; display: none}
    .icon-bar {
        width: 26px;
        height: 3px;
    }
    #user-menu-xs {display: none}
    .navbar-default .navbar-brand {padding: 22px 15px 19px 0;}
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0}
    #navbar-search {
        background: transparent;
        display: block;
        margin: 0 0 0 210px;
        padding-left: 0;
        padding-right: 0;
        position: static;
        box-shadow: none;
        width: 300px;
        }
    #navbar-search input {
        background: rgba(221, 221, 221, 0.5);
        border-radius: 3px;
        color: #3c3c3c;
        float: right;
        width: 100%;
        margin-top: 5px;
        padding-left: 35px;
    }

    #navbar i.fa-search {
        color: rgba(33, 125, 187, 0.5); font-size: 15px; margin: 15px 0 0 10px; position: absolute;
    }

    form#search .spinner {
        margin: 0 0 0 280px;
    }

    #navbar {height: 65px;}
    #navbar-results {margin-top: 1px;float: left; width: 100%}
    #navbar-results .stage {background: #fff;box-shadow: 1px 1px 9px 4px rgba(0, 0, 0, .1)}
    #navbar-results .ik-li {padding: 3px}
    #site-menu {background:none; }
    .navbar-nav>li>a:not(.icon) {line-height: 25px;}
    #content.container {padding-top: 75px;}
    .edge-panel-right {display: block;margin-right: 0;z-index: 20;}
    .tiles .ik-li {height: 280px;width: 33.33%;}
    .nav > .tab > a {padding: 10px 15px}
    .ik-li .date {float: right}
    .payment-method {display: inline}

}
@media (max-width: 991px) {
    li.dropdown:hover > ul.dropdown-menu { max-height: 450px; overflow: auto; }
    .dropdown-menu>li>a {line-height: 35px;}
}
@media (min-width: 992px) {
    .tiles {margin-left: -15px}
    .ik-li .select {margin: -25px}
    .tiles .ik-li > .content {padding: 10px}
    #navbar-search {margin-left: 210px;width: 360px}
    form#search .spinner {
        margin: 0 0 0 330px
    }
    #navbar-results {box-sizing: content-box;margin-top: 0;margin-left: -45px;padding: 1px 45px 45px;}
    #navbar-results .ik-li a {cursor: pointer; padding: 7px;}
    #navbar-results .ik-li .info {margin-left: 15px;max-width: 265px}
    #navbar-results .ik-li .about {max-width: 240px;}
    #content.form {
        padding-top: 7%
    }
    .edge-panel-left {display: block;margin-left: 0;}
    .social-sharing .dropdown-menu a {line-height: 35px;}
}
@media (min-width: 1200px) {
    .tiles .ik-li {height: 300px;width: 25%;}
    .menu-button {margin: -2px 0px 0 0;}
    .icon-bar {
        width: 30px;
        height: 3px;
        margin-bottom: 7px;
    }
    #navbar-search {margin-left: 210px;width: 450px;}
    #navbar-results .ik-li .info {max-width: 340px;}
    #navbar-results .ik-li .about {max-width: 330px;}
    #item-detail #navbar-results .ik-li .info {max-width: 305px}
    #item-detail #navbar-results .ik-li .about {max-width: 310px;}
    .member, .ik-li {padding: 15px;}
    .member .info, .ik-li .info {float: left; margin-left: 30px}

    form#search .spinner {
        margin: 0 0 0 420px
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation: portrait) {

    .back-to-top { font-size: 10vw }
}
/* Landscape */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    .back-to-top { font-size: 6.5vw; }
}