/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

 html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%
 }

 body {
   margin: 0
 }

 a {
   background-color: transparent
 }

 [hidden] {
   display: none
 }

 html {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   line-height: 1.5
 }

 *, :after, :before {
   box-sizing: border-box;
   border: 0 solid #e2e8f0
 }

 a {
   color: inherit;
   text-decoration: inherit
 }

 svg, video {
   display: block;
   vertical-align: middle
 }

 video {
   max-width: 100%;
   height: auto
 }

 .bg-white {
   --bg-opacity: 1;
   background-color: #fff;
   background-color: rgba(255, 255, 255, var(--bg-opacity))
 }

 .bg-gray-100 {
   --bg-opacity: 1;
   background-color: #f7fafc;
   background-color: rgba(247, 250, 252, var(--bg-opacity))
 }

 .border-gray-200 {
   --border-opacity: 1;
   border-color: #edf2f7;
   border-color: rgba(237, 242, 247, var(--border-opacity))
 }

 .border-t {
   border-top-width: 1px
 }

 .flex {
   display: flex
 }

 .grid {
   display: grid
 }

 .hidden {
   display: none
 }

 .items-center {
   align-items: center
 }

 .justify-center {
   justify-content: center
 }

 .font-semibold {
   font-weight: 600
 }

 .h-5 {
   height: 1.25rem
 }

 .h-8 {
   height: 2rem
 }

 .h-16 {
   height: 4rem
 }

 .text-sm {
   font-size: .875rem
 }

 .text-lg {
   font-size: 1.125rem
 }

 .leading-7 {
   line-height: 1.75rem
 }

 .mx-auto {
   margin-left: auto;
   margin-right: auto
 }

 .ml-1 {
   margin-left: .25rem
 }

 .mt-2 {
   margin-top: .5rem
 }

 .mr-2 {
   margin-right: .5rem
 }

 .ml-2 {
   margin-left: .5rem
 }

 .mt-4 {
   margin-top: 1rem
 }

 .ml-4 {
   margin-left: 1rem
 }

 .mt-8 {
   margin-top: 2rem
 }

 .ml-12 {
   margin-left: 3rem
 }

 .-mt-px {
   margin-top: -1px
 }

 .max-w-6xl {
   max-width: 72rem
 }

 .min-h-screen {
   min-height: 100vh
 }

 .overflow-hidden {
   overflow: hidden
 }

 .p-6 {
   padding: 1.5rem
 }

 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem
 }

 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem
 }

 .pt-8 {
   padding-top: 2rem
 }

 .fixed {
   position: fixed
 }

 .relative {
   position: relative
 }

 .top-0 {
   top: 0
 }

 .right-0 {
   right: 0
 }

 .shadow {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
 }

 .text-center {
   text-align: center
 }

 .text-gray-200 {
   --text-opacity: 1;
   color: #edf2f7;
   color: rgba(237, 242, 247, var(--text-opacity))
 }

 .text-gray-300 {
   --text-opacity: 1;
   color: #e2e8f0;
   color: rgba(226, 232, 240, var(--text-opacity))
 }

 .text-gray-400 {
   --text-opacity: 1;
   color: #cbd5e0;
   color: rgba(203, 213, 224, var(--text-opacity))
 }

 .text-gray-500 {
   --text-opacity: 1;
   color: #a0aec0;
   color: rgba(160, 174, 192, var(--text-opacity))
 }

 .text-gray-600 {
   --text-opacity: 1;
   color: #718096;
   color: rgba(113, 128, 150, var(--text-opacity))
 }

 .text-gray-700 {
   --text-opacity: 1;
   color: #4a5568;
   color: rgba(74, 85, 104, var(--text-opacity))
 }

 .text-gray-900 {
   --text-opacity: 1;
   color: #1a202c;
   color: rgba(26, 32, 44, var(--text-opacity))
 }

 .underline {
   text-decoration: underline
 }

 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
 }

 .w-5 {
   width: 1.25rem
 }

 .w-8 {
   width: 2rem
 }

 .w-auto {
   width: auto
 }

 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr))
 }

 @media (min-width:640px) {
   .sm\:rounded-lg {
     border-radius: .5rem
   }
   .sm\:block {
     display: block
   }
   .sm\:items-center {
     align-items: center
   }
   .sm\:justify-start {
     justify-content: flex-start
   }
   .sm\:justify-between {
     justify-content: space-between
   }
   .sm\:h-20 {
     height: 5rem
   }
   .sm\:ml-0 {
     margin-left: 0
   }
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem
   }
   .sm\:pt-0 {
     padding-top: 0
   }
   .sm\:text-left {
     text-align: left
   }
   .sm\:text-right {
     text-align: right
   }
 }

 @media (min-width:768px) {
   .md\:border-t-0 {
     border-top-width: 0
   }
   .md\:border-l {
     border-left-width: 1px
   }
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr))
   }
 }

 @media (min-width:1024px) {
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem
   }
 }

 @media (prefers-color-scheme:dark) {
   .dark\:bg-gray-800 {
     --bg-opacity: 1;
     background-color: #2d3748;
     background-color: rgba(45, 55, 72, var(--bg-opacity))
   }
   .dark\:bg-gray-900 {
     --bg-opacity: 1;
     background-color: #1a202c;
     background-color: rgba(26, 32, 44, var(--bg-opacity))
   }
   .dark\:border-gray-700 {
     --border-opacity: 1;
     border-color: #4a5568;
     border-color: rgba(74, 85, 104, var(--border-opacity))
   }
   .dark\:text-white {
     --text-opacity: 1;
     color: #fff;
     color: rgba(255, 255, 255, var(--text-opacity))
   }
   .dark\:text-gray-400 {
     --text-opacity: 1;
     color: #cbd5e0;
     color: rgba(203, 213, 224, var(--text-opacity))
   }
 }

 /* -------------------------------- 

Primary style

-------------------------------- */

 html * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 *, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 body {
   font-size: 100%;
   font-family: "PT Sans", sans-serif;
   color: #505260;
   background-color: #fff;
 }

 a {
   color: #d85269;
   text-decoration: none;
 }

 img {
   max-width: 100%;
 }

 input, textarea {
   font-family: "PT Sans", sans-serif;
   font-size: 16px;
   font-size: 1rem;
 }

 input::-ms-clear, textarea::-ms-clear {
   display: none;
 }

 /* -------------------------------- 

Main components 

-------------------------------- */

 header[role=banner] {
   position: relative;
   height: 50px;
   background: #343642;
 }

 header[role=banner] #cd-logo {
   float: left;
   margin: 4px 0 0 5%;
   /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
   -webkit-transform-origin: 0 50%;
   -moz-transform-origin: 0 50%;
   -ms-transform-origin: 0 50%;
   -o-transform-origin: 0 50%;
   transform-origin: 0 50%;
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
   -o-transform: scale(0.8);
   transform: scale(0.8);
 }

 header[role=banner] #cd-logo img {
   display: block;
 }

 header[role=banner]::after {
   /* clearfix */
   content: "";
   display: table;
   clear: both;
 }

 @media only screen and (min-width: 768px) {
   header[role=banner] {
     height: 80px;
   }
   header[role=banner] #cd-logo {
     margin: 20px 0 0 5%;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
   }
 }

 .main-nav {
   float: right;
   margin-right: 5%;
   width: 44px;
   height: 100%;
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-menu.svg") no-repeat center center;
   cursor: pointer;
 }

 .main-nav ul {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   -webkit-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   -o-transform: translateY(-100%);
   transform: translateY(-100%);
   padding-left: 0;
 }

 .main-nav ul.is-visible {
   -webkit-transform: translateY(50px);
   -moz-transform: translateY(50px);
   -ms-transform: translateY(50px);
   -o-transform: translateY(50px);
   transform: translateY(50px);
 }

 .main-nav li {
   list-style: none;
 }

 .main-nav a {
   display: block;
   height: 50px;
   line-height: 50px;
   padding-left: 5%;
   background: #292a34;
   border-top: 1px solid #3b3d4b;
   color: #FFF;
 }

 @media only screen and (min-width: 795px) {
   .main-nav {
     width: auto;
     height: auto;
     background: none;
     cursor: auto;
   }
   .main-nav ul {
     position: static;
     width: auto;
     -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
     transform: translateY(0);
     line-height: 80px;
   }
   .main-nav ul.is-visible {
     -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
     transform: translateY(0);
   }
   .main-nav li {
     display: inline-block;
     margin-left: 1em;
   }
   .main-nav li:nth-last-child(2) {
     margin-left: 2em;
   }
   .main-nav a {
     display: inline-block;
     height: auto;
     line-height: normal;
     background: transparent;
   }
   .main-nav a.cd-signin, .main-nav a.cd-signup {
     padding: 0.6em 1em;
     border: 1px solid rgba(255, 255, 255, 0.6);
     border-radius: 50em;
   }
   .main-nav a.cd-signup {
     background: #d85269;
     border: none;
   }
 }

 /* -------------------------------- 

xsigin/signup popup 

-------------------------------- */

 .cd-user-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(52, 54, 66, 0.9);
   z-index: 3;
   overflow-y: auto;
   cursor: pointer;
   visibility: hidden;
   opacity: 0;
   -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;
   -moz-transition: opacity 0.3s 0, visibility 0 0.3s;
   transition: opacity 0.3s 0, visibility 0 0.3s;
   border: solid 3px #909199;
   border-radius: 0px!important;
 }

 .cd-user-modal.is-visible {
   visibility: visible;
   opacity: 1;
   -webkit-transition: opacity 0.3s 0, visibility 0 0;
   -moz-transition: opacity 0.3s 0, visibility 0 0;
   transition: opacity 0.3s 0, visibility 0 0;
 }

 .cd-user-modal.is-visible .cd-user-modal-container {
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
   border-top: solid 5px #d85269;
 }

 .cd-user-modal-container li {
   list-style: none;
 }

 .cd-switcher {
   padding: 0!important;
 }

 .cd-user-modal-container {
   position: relative;
   width: 90%;
   max-width: 600px;
   background: #FFF;
   margin: 3em auto 4em;
   cursor: auto;
   border-radius: 0.25em;
   -webkit-transform: translateY(-30px);
   -moz-transform: translateY(-30px);
   -ms-transform: translateY(-30px);
   -o-transform: translateY(-30px);
   transform: translateY(-30px);
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   transition-property: transform;
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }

 .cd-user-modal-container .cd-switcher::after {
   clear: both;
   content: "";
   display: table;
 }

 .cd-user-modal-container .cd-switcher li {
   width: 50%;
   float: left;
   text-align: center;
 }

 .cd-user-modal-container .cd-switcher li:first-child a {
   border-radius: 0 0 0 0;
 }

 .cd-user-modal-container .cd-switcher li:last-child a {
   border-radius: 0 0 0 0;
 }

 .cd-user-modal-container .cd-switcher a {
   display: block;
   width: 100%;
   height: 50px;
   line-height: 50px;
   background: #343642;
   color: #809191;
 }

 .cd-user-modal-container .cd-switcher a.selected {
   background: #FFF;
   color: #505260;
 }

 @media only screen and (min-width: 600px) {
   .cd-user-modal-container {
     margin: 4em auto;
   }
   .cd-user-modal-container .cd-switcher a {
     height: 70px;
     line-height: 70px;
   }
 }

 .cd-form {
   padding: 1.4em;
 }

 .cd-form .fieldset {
   position: relative;
   margin: 1.4em 0;
 }

 .cd-form .fieldset:first-child {
   margin-top: 0;
 }

 .cd-form .fieldset:last-child {
   margin-bottom: 0;
 }

 .cd-form label {
   font-size: 14px;
   font-size: 0.875rem;
 }

 .cd-form label.image-replace {
   /* replace text with an icon */
   display: inline-block;
   position: absolute;
   left: 15px;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   height: 20px;
   width: 20px;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   color: transparent;
   text-shadow: none;
   background-repeat: no-repeat;
   background-position: 50% 0;
 }

 .cd-form label.cd-username {
   background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-username.svg");
 }

 .cd-form label.cd-email {
   background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-email.svg");
 }

 .cd-form label.cd-password {
   background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-password.svg");
 }

 .cd-form input {
   margin: 0;
   padding: 0;
   border-radius: 0.25em;
 }

 .cd-form input.full-width {
   width: 100%;
 }

 .cd-form input.has-padding {
   padding: 12px 20px 12px 50px;
 }

 .cd-form input.has-border {
   border: 1px solid #343642;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
 }

 .cd-form input.has-border:focus {
   border-color: #343642;
   box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
   outline: none;
 }

 .cd-form input.has-error {
   border: 1px solid #d76666;
 }

 .cd-form input[type=password] {
   /* space left for the HIDE button */
   padding-right: 65px;
 }

 .cd-form input[type=submit] {
   padding: 16px 0;
   cursor: pointer;
   background: #d85269;
   color: #FFF;
   font-weight: bold;
   border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
 }

 .no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus {
   background: #3599ae;
   outline: none;
 }

 .cd-form .hide-password {
   display: inline-block;
   position: absolute;
   right: 0;
   top: 0;
   padding: 6px 15px;
   border-left: 1px solid #343642;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   font-size: 14px;
   font-size: 0.875rem;
   color: #343642;
 }

 .cd-form .cd-error-message {
   display: inline-block;
   position: absolute;
   left: -5px;
   bottom: -35px;
   background: rgba(215, 102, 102, 0.9);
   padding: 0.8em;
   z-index: 2;
   color: #FFF;
   font-size: 13px;
   font-size: 0.8125rem;
   border-radius: 0.25em;
   /* prevent click and touch events */
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
   -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
   -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
   transition: opacity 0.2s 0, visibility 0 0.2s;
 }

 .cd-form .cd-error-message::after {
   /* triangle */
   content: "";
   position: absolute;
   left: 22px;
   bottom: 100%;
   height: 0;
   width: 0;
   border-bottom: 8px solid rgba(215, 102, 102, 0.9);
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
 }

 .cd-form .cd-error-message.is-visible {
   opacity: 1;
   visibility: visible;
   -webkit-transition: opacity 0.2s 0, visibility 0 0;
   -moz-transition: opacity 0.2s 0, visibility 0 0;
   transition: opacity 0.2s 0, visibility 0 0;
 }

 @media only screen and (min-width: 600px) {
   .cd-form {
     padding: 2em;
   }
   .cd-form .fieldset {
     margin: 2em 0;
   }
   .cd-form .fieldset:first-child {
     margin-top: 0;
   }
   .cd-form .fieldset:last-child {
     margin-bottom: 0;
   }
   .cd-form input.has-padding {
     padding: 16px 20px 16px 50px;
   }
   .cd-form input[type=submit] {
     padding: 16px 0;
   }
 }

 .cd-form-message {
   padding: 1.4em 1.4em 0;
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.4;
   text-align: center;
 }

 @media only screen and (min-width: 600px) {
   .cd-form-message {
     padding: 2em 2em 0;
   }
 }

 .cd-form-bottom-message {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: -50px;
   text-align: center;
   font-size: 14px;
   font-size: 0.875rem;
 }

 .cd-form-bottom-message a {
   color: #FFF;
   text-decoration: underline;
 }

 .cd-close-form {
   /* form X button on top right */
   display: block;
   position: absolute;
   width: 40px;
   height: 40px;
   right: 0;
   top: -40px;
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close.svg") no-repeat center center;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
 }

 @media only screen and (min-width: 1170px) {
   .cd-close-form {
     display: none;
   }
 }

 #cd-login, #cd-signup, #cd-reset-password {
   display: none;
 }

 #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
   display: block;
 }

 .btn-primary {
   background-color: #343642!important;
   border: none!important;
 }

 .search-breadcumb {
   background: url('/troopika-front/img/breadcumb.jpg');
   background-size: cover;
 }

 .card-details {
   position: absolute;
   top: 0px;
   display: flex;
   color: white;
   padding: 5px;
 }

 .free {
   background: green;
 }

 .for-sall {
   background: red;
 }