@media only screen and (max-width : 1599px) and (min-width: 767px) {
}

@media only screen and (max-width : 1199px) and (min-width : 992px){
	.self-box h2 {
		padding: 88px 0 0 0;
	}
	.nice-box h2, .nice-price {
		font-size: 24px;
	}
}

@media only screen and (max-width : 991px) {
    .btn-wrap, .logo-wrap {
        position: relative;
        z-index: 5;
    }
    .main-content.hm {
        padding-top: 0;
    }
    .cat-desc {
        text-align: center;
    }
    .self-care.home {
        min-width: auto;
        max-width: 620px;
        min-width: 620px;
    }
    .header-inner {
        display: none;
    }
    .bread-btn {
        font-size: 10px;
    }
	.btn-mob-selfcare {
		top: 0;
		color: #fff!important;
	}
	.logo-hej {
	    height: 60px;
		padding: 0;
		margin-top: 0;
	}
	.selfcare-menu .wrapper {
		padding: 0!important;
	}
	.selfcare-wrapper {
		border-left: 0;
		padding: 200px 0 20px 
	}
	.selfcare-menu ul {
        padding: 0;
        position: fixed;
        width: 100%;
        left: 0;
        background: linear-gradient(
        45deg,
        #9b29af 0%,
        #3c1565 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1;

        height: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch!important;

        /* height animacija, ALI s delayem kod zatvaranja */
        transition: height .4s ease .4s;
    }

    .logo-outside img {
        width: 60px;
    }

    .selfcare-menu ul li {
        opacity: 0;
        transition: opacity .4s ease;
    }
    .selfcare-menu ul.active {
        height: 100%;
        transition-delay: 0s; /* otvara se odmah */
    }

    .selfcare-menu ul {
        will-change: height;
    }

    .selfcare-menu ul.active li {
        opacity: 1;
        transition-delay: .4s; /* li se pojave nakon što se ul otvori */
    }
	.selfcare-menu ul li {
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		text-transform: inherit;
	}
    .selfcare-menu ul  li:first-child {
        
    }
	.selfcare-menu .right-btns a.btn-white {
		color: #f2652b;
		margin-top: 0;
        background-color: #fff;
        border-radius: 30px;
        overflow: hidden;
	}
	.selfcare-menu {
		position: fixed;
	    top: 0;
	    height: 110px;
	    width: 100%;
	    left: 0;
	    z-index: 200000;
	    border-bottom: none;
	}
	.selfcare-menu ul li a {
	    padding: 15px 15px;
	    display: block;
	    font-size: 23px;
	    background: none;
	    font-weight: 500;
        text-transform: uppercase;
	    line-height: 24px;
	    position: relative;
        text-align: center;
	}
	.selfcare-menu ul li:first-child a {
		border-top: none;
	}

	.selfcare-menu ul li.small a {
		font-weight: 400;
	}

	.selfcare-menu ul li:last-child a {
		border-bottom: 0;
	}
	.selfcare-wrapper {
		padding: 85px 0 0px;
	}
    .selfcare-wrapper.add-pd-top {
        padding-top: 85px;
    }
	.selfcare .right-btns {
	    position: absolute;
	    right: 60px;
	    top: 0;
	    padding: 22px 0;
	}
	.selfcare-menu .wrapper {
	    padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 605.55px;
        margin: 0 auto;
	}
    .h1-title {
        font-size: 3.5rem;
    }
    .btn-mob-selfcare img {
        width: 50px;
    }
    .selfcare-menu {
        padding-top: 25px;
    }
    .status-bill a {
        font-size: 12px;
    }
    .status-bill a img {
        width: 18px;
    }
    .box-purple {
        min-width: auto;
    }
}

@media only screen and (min-width : 768px) and (max-width : 991px) {
	.selfcare-menu ul {
		top: 0px;
	}
	.btn-mob-selfcare {
	    font-size: 33px;
	    line-height: 33px;
	    padding: 6px 0px 6px 30px;
	    right: 0;
        background: none;
	}
	.self-box h2 {
	    font-size: 25px;
	    padding: 0 0 0px;
	}
    .reg-box h2 {
        font-size: 25px;
    }
	.self-box {
	    padding: 0;
	    min-height: auto;
	}
	.sms-login .form-row {
		margin-top: 15px;
	}
	.self-care.home {
		margin-top: 75px;
	}
    .logo-outside {
        margin-bottom: 25px;
    }
}


@media only screen and (max-width : 767px) {
    .alert-normal.none {
        margin-bottom: 30px;
    }
    .alert-normal p {
        font-size: 18px;
        color: #fff;
        margin-bottom: 5px;
    }
    /* #launcher {
        bottom: 30px!important;
    } */
     .zopim-box-widget {
    transform: translateY(-30px);
}
    html, body {
        /* height: 100lvh; */
        min-height: 100lvh;
        background-color: #4d207d;
    }
    body::before  {
        display: none;
        height: 100%;
    }
    body {
        /* main.css (html, body { height: 100% }) locks body to the viewport height,
           so the cover background filled only one screen and got cut off (flat
           #4d207d below) on any page that scrolls. Letting body grow to its full
           content height makes the gradient cover the whole page. min-height keeps
           it filling the screen on short pages too. */
        height: auto;
        min-height: 100lvh;
        background: url(/assets/images/bg-new.jpg) no-repeat top center /cover;
        background-size: cover;
        background-attachment: scroll;
    }
    .form-control, .form-select {
        padding: 0.404rem 1rem;
    }
    .final-success {
        font-size: 1.35rem;
        padding: 12px 15px 15px;
    }
    a.btn-link-clear {
        font-size: 12px;
    }
    .logo-outside {
        margin-bottom: 25px;
        margin-top: 45px;
    }
    .logo-outside img {
        width: 50px;
    }
    #balanceTransferForm {
        padding: 15px;
    }
    .banner-swiper {
        margin: 0 0 15px;
    }
    .status-box {
        margin-bottom: 20px;
    }
    .box-purple {
        padding: 15px;
    }
    .funds-box a.custom-btn {
        position: relative;
        bottom: 0;
    }
    .main-content.hm {
        padding-top: 0;
    }
    .modal-content {
        margin: 0 15px;
        padding: 30px 35px;
    }
    .active-options ul li {
        line-height: 1.1;
        font-size: 23px;
    }
    .active-options ul li select {
        margin-top: 13px;
    }
    .nice-box.overview-box p {
        font-size: 19px;
    }
    .status-heading {
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
    .status-box {
        padding: 7.5px 13px;
    }
    .status-box p img {
        margin: 0 2.5px 0 -2.5px;
    }
	.selfcare-wrapper .top-info {
		margin-bottom: 20px;
		padding-bottom: 0;
	}
	.more-options .custom-control i.custom-note {
		font-size: 16px;
	}
	.scs-register-form .form-control, .scs-register-form, .scs-register-form .form-check-label {
		font-size: .85rem;
	}
	.self-care.home {
		margin-top: 0px;
	}
	.selfcare-menu ul {
		top: 0px;
	}
	.btn-mob-selfcare {
	    font-size: 22px;
	    line-height: 22px;
	    padding: 0px 0 0px 14px;
	    right: 0;
	    top: 45%;
        background: none;
	}
    .btn-mob-selfcare img {
        height: 44px;
    }
	.selfcare-menu .right-btns a.btn-white {
		margin-top: 0px;
	}
	.logo-hej {
		height: 50px;
		padding: 0;
		margin-top: 0;
	}
	.selfcare-menu {
        height: 80px;
    	padding: 15px 0 0 0;
	}
	.selfcare-menu .right-btns {
		top: 42%;
	}
	.self-box.self-box-hej {
	    min-height: auto;
	    margin: 0 0 15px;
	    padding: 20px;
	}
    .bread {
        display: none;
    }
	/* #formSection .tab-data span {
	    display: inline;
	    font-size: 18px;
	    line-height: 20px;
	}
	#formSection .tab-data span i {
	    font-size: 15px;
	    line-height: 18px;
	    margin-top: 2px;
	}
	.formSection {
	    min-width: 320px;
	    top: 55%;
	} */
	.self-box {
	    padding: 0;
    	min-height: auto;
	}
	.self-box h2 {
	    padding: 0;
	    margin: 10px 0 2px;
	}
	.reg-box h2 {
		font-size: 22px;
	}
	.formSection.second {
	    max-width: 320px;
	    min-width: 320px;
	}
	.form-nav {
	    margin-bottom: 20px;
	    padding-top: 15px;
	}
	.selfcare-wrapper .show-info img, .scs-register-box .show-info img {
	    max-width: 250px;
	}
	.status-box p {
	    font-size: 14px;
	}
	.show-info {
		margin: 0px 0 20px;
	}
	.status-current .bigger {
	    padding-left: 0;
	}
	.status-current .bigger span {
	    line-height: 28px;
	    font-size: 28px;
	}
	.status-bill {
	    padding: 15px 15px 15px;
	    margin-top: 3px;
	}
	.status-current {
	    float: left;
	    text-align: left;
	}
	.self-box figure {
		min-height: 85px;
	}
	.imenik-cnt button, input.btn, .float-menu .btn-buy, a.rounded-link, .btn-vise, .summary-box .btn-buy, .fixed-price-container .btn-buy, .btn-go, .add-funds-btn, .self-box .btn-hej, .reg-box .btn, .self-box a.btn.bigone, .btn-buy {
    	padding: 7px 15px;
    	font-size: 12px;
	}
	.nice-box.overview-box .nice-price {
	    font-size: 14.5px;
	    line-height: 17px;
	}
    .form-group label.nr-pr {
        font-size: 17px;
    }
    .swal2-popup {
        width: 30em!important;
    }
    .user-box {
        font-size: 25px;
    }
	.selfcare-wrapper h2 {
	    font-size: 30px;
	    line-height: 1.1;
	    margin: 0px 0 15px!important;
	}
    .selfcare-wrapper .nice-box.orange h2 {
        margin-bottom: 0px !important;
    }
    .selfcare-wrapper h2.offer-title {
        margin: 0px 0 5px!important;
        font-size: 22px;
    }
	.form-check-label.custom-control-label {
   		line-height: 18px!important;
    	font-size: 15px;
        font-weight: 400;
	}
	.modal-title {
	    font-size: 17px;
	    line-height: 20px;
	}
	.funds-box h3 {
	    font-size: 20px;
	    line-height: 19px;
        margin-top: 0;
	}
	.selfcare-wrapper .credit-cards-wrapper-inner {
	    margin: 0 10px 15px -2px;
	}
    .status-heading {
        font-size: 16px;
    }
    .status-bill.fr .status-first  {
        padding-top: 5px;
    }
    .nice-block {
        padding: 15px!important;
    }
    #user-data-form {
        padding: 15px;
    }
    .selfcare-wrapper .top-info {
        padding: 15px;
    }
	.funds-box {
	    margin: 0 0 15px;
	    height: auto;
	}
	.km-span {
	    font-size: 20px;
	}
	.inp-big {
		width: 130px;
		margin-left: 5px;
	}
	.nice-box.big.cat.first h2 {
		font-size: 25px;
        margin-bottom: 5px!important;
	}
	.nice-box.big.cat {
		min-height: 150px;
		margin:  0 0 15px;
	}
	.nice-box.big.cat span {
		padding: 9px 17px 19px 8px;
	}
	a.grey-link, a.grey-link i {
		font-size: .85rem;
	}
	.selfcare-wrapper .more-options .custom-control {
		padding-left: 20px;
		margin: 0 0 15px;
	}
    .custom-input-wrapper {
        padding-left: 0;
    }
	.selfcare-wrapper .more-options .custom-control-label {
	    line-height: 22px !important;
        font-size: 18px;
        font-weight: 700;
	}
	.selfcare-wrapper .more-options .custom-control-label:before, .selfcare-wrapper .more-options .custom-control-label:after {
	    width: 1.5rem;
	    height: 1.5rem;
	    left: -2rem;
	    top: 1px;
	}
	.nice-box a.custom-btn {
	    font-size: 12px;
	    padding: 7px 15px 7px 15px;
	}
    .custom-desc {
        margin-top: 0px;
        line-height: 1.35;
        font-size: 14px;
    }
    .more-options .custom-control  {
       
    }
    .more-options .custom-control.form-check .form-check-input {
        /* width: 15px;
        height: 15px; */
    }
    .custom-input-wrapper {
        padding-right: 0px;
    }
	.options-cont .nice-box.has-btn p {
		font-size: 14px;
		font-weight: 400;
	}
	.more-options .custom-control {
		line-height: 26px;
	}
	.offer-title {
		position: relative;
		/* padding: 0 0 0 27px; */
	}
	.offer-title i {
		position: absolute;
		left: 0;
	}
	.selfcare-wrapper .nice-price {
	    font-size: 19px;
	    line-height: 28px;
	    margin:  0 0 10px;
	}
	.selfcare-wrapper .nice-box.big {
		margin:  0 0 15px;
	}
    .selfcare-wrapper .nice-box.big:last-child {
        margin-bottom: 0;
    }
	.sprt-box {
		margin:  0 0 15px;
        text-align: center;
        padding: 15px 40px;
	}
    .funds-box {
        padding: 20px 15px;
    }
	.selfcare-wrapper .sprt-box h2 {
		margin-top: 0!important;
        margin-bottom: 7.5px!important;
        font-size: 22px;
	}
	.nice-box.has-btn {
	    padding: 15px 20px 55px;
	}
	.self-box h2 {
		font-size: 22px;
	}
    .reg-box .btn {
        margin-top: 5px;
    }
    .reg-box {
        padding-left: 45px;
        padding-right: 45px;

    }
    .self-box.self-box-hej p {
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 5px;
    }
	.h1-title {
		font-size: 30px;
		margin:  130px 0 20px;
	}
    .h1-title.small {
		font-size: 30px;
		margin:  0px 0 20px;
	}
    .main-content {
        height: calc(100vh - 13px);
        min-height: 300px;
        padding-bottom: 50px;
        align-items: start;
    }
    .login-home.main-content {
        height: auto;
        padding-bottom: 25px;
        padding-top: 0;
    }
    .sms-login.main-content, .login-cont.main-content, .registration-page.main-content {
        height: auto;
    }
    .login-home.main-content .h1-title {
        margin-top: 0;
    }
	.logotype-hej {
	    width: 60px;
	}
    .register-simple {
        padding: 15px;
    }
    .register-simple a.password-link {
        margin-left: 0;
    }
	.self-box p {
		font-size: 14px;
	}
	.tab-data span i {
		font-size: 14px;
	}
	.breadcrumbs {
	    margin-top: 0;
	}
	.btn-group.btn-breadcrumb {
	    margin-top: 0;
	}
	.custom-control-label::before {
		top: 0rem;
	}
    .register-simple p span {
        display: block;
    }
    .reg-box {
        margin-bottom: 40px;
    }
    .registration-page .form-check-label.custom-control-label {
        line-height: 19px !important;
        font-size: 13px;
    }
    .registration-page .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-right: 7px;
    }
    .nice-box.overview-box h2 {
        margin: 0!important;
    }
    .self-care.home {
        padding-bottom: 0px;
        min-width: 100%;
    }
    .options-cont .nice-box.has-btn p.notice {
        padding-right: 0;
        margin-top: 5px;
    }
    h4 a.grey-link img {
        height: 23px;
        margin-left: -5px;
    }
    .show-info {
        padding: 20px;
    }
    .selfcare-wrapper .show-info img {
        max-width: 150px;
        margin-bottom: -20px;
        margin-right: 0;
        margin-top: 0;
    }
    .selfcare-wrapper .top-info label a,
    .status-bill a,
    .btn-fake, .btn-buy {
        font-size: 12px;
    }
    .funds-box a.custom-btn {
        font-size: 13px;
    }
    .selfcare-wrapper .nice-box h2.offer-title.inner {
        font-size: 18px;
        line-height: 22px;
    }
    .reg-box {
        padding-top: 30px;
    }
    .options-cont .nice-box.big.cat.first p {
        padding-right: 0;
    }
    .selfcare-wrapper .category-name {
        font-size: 30px;
    }
    .box-purple p {
        line-height: 1.4;
        padding-right: 80px;
    }
    .active-options ul {
        margin: 5px 10px 10px;
    }
    a.custom-btn {
        padding: 7px 15px;
    }
    .form-group label {
        font-size: 14px;
    }
    .status-box p img {
        height: 17px;
    }
    .sprt-box ul {
        justify-content: center;
    }
    .box-purple p {
        font-size: 16px;
        line-height: 1.2!important;
    }
    .balloon-text {
        font-size: 23px;
    }
    body {
        /* was a fixed width % (143%/207%) which sized the image to a fixed height
           and got cut off on long pages. 100% 100% stretches it to the full body
           (now height:auto) so the gradient covers the whole page, any length. */
        background-size: 100% 100%;
    }
    .selfcare-wrapper .status-current .bigger span {
        display: block;
        line-height: normal;
    }
    .selfcare-wrapper .nice-box.orange h2 {
        font-size: 22px;
    }
    .selfcare-wrapper .nice-box.has-btn.big h2 {
        font-size: 22px;
        margin-bottom: 0px !important;
        /* text-align: center; */
    }
    .alert-box-text {
        padding-right: 35px;
    }
    .alert-box-text {
        text-align: center;
        padding: 0 25px;
    }
    .selfcare-wrapper .nice-box h2 b {
        display: block;
        margin-top: 3px;
    }
    .change-btn img {
        height: 19px;
    }
    .swiper-pagination-bullet {
        width: 1.25em;
        height: 1.25em;
    }
    .swipper-wrap {
        padding-bottom: 30px;
    }
    .swiper-pagination {
        bottom: 5px !important;
    }
    .w-reg {
        min-width: auto;
    }

}

@media (max-width: 375px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .status-current .bigger span {
        font-size: 23px;
        line-height: 25px;
    }
    .nice-box.overview-box .nice-price {
        font-size: 12px;
    }
    .nice-box.overview-box p {
        font-size: 16px;
    }
    .status-box p {
        font-size: 13px;
    }
    .status-box p img {
        height: 20px;
    }
    .change-btn img {
        height: 20px;
    }
    .modal-content {
        margin: 0 15px;
        padding: 30px 25px;
    }
    .active-options ul li {
        font-size: 20px;
    }
    .modal-custom .modal-header .modal-title {
        font-size: 14px;
    }
    .modal-custom .modal-content {
        margin: 0 10px;
    }
    .more-options .custom-control.form-check .form-check-input {
        width: 21px;
        height: 21px;
    }
    .show-info a p {
        font-size: 12px;
    }   
    .selfcare-menu ul li a {
        font-size: 20px;
    }
     .reg-box {
        padding-left: 20px;
        padding-right: 20px;
    }
    .change-btn img {
        display: none;
    }
    .form-group label {
        font-size: 13px;
    }
}

@media (max-width: 820px) and (orientation: landscape) {
}