/*
Theme Name: 
Theme URI: dankanic.com
Author:  Kiril Dankanic  
Author URI: https://dankanic.com
Description: Theme specially designet for 

Version: 1.0
License: Private theme, All rights reserved.
License URI: LICENSE
Text Domain: theme-folder


This theme is exclusively made for Kiril Dankanic only.

The main theme color is 0086cb

*/



/*----INITIAL-----*/

* {
    -webkit-font-feature-settings: "locl" 0;
    -moz-font-feature-settings:    "locl" 0;
    -ms-font-feature-settings:     "locl" 0;
    font-feature-settings:         "locl" 0;
}


html {font-family: 'Exo 2', sans-serif; margin:0; padding:0; color:#000;}
body {margin: 0;}

:root {
    --mainBlue: #0086cb;
    --darkerBlue: #0078b4;
    --brighterBlue: #119be0;
}


a, p {font-size: 16px; font-weight: 300; margin:0; padding:0;}

h1 {font-size: 24px; margin:0; padding:0;}
h2 {font-size: 24px; margin:0; padding:0;}
h3 {font-size: 24px; margin:0; padding:0;}
h4 {font-size: 24px; margin:0; padding:0;}
h5 {font-size: 24px; margin:0; padding:0;}
h6 {font-size: 24px; margin:0; padding:0;}

.padding40 {padding-top: 40px; padding-bottom: 40px;}

img {max-width: 100%;}

.scaled_up {transform: scale(1.1); z-index: -2;}
.scale_down {transform: scale(1); transition: all 4000ms;}

.showup {top: 30px; opacity: 0; position: relative;}

.absolute {position: absolute;}
.relative {position: relative;}
.fixed {position: fixed;}

.loader_cont {position: fixed; width: 100%; height: 100%; z-index: 1000; background-color: #131c26;}
.loader_box {width: 200px; height: 200px;}
.loadingbar {width: 0; height: 1px; background-color: #fff; margin: 20px 0; position: relative;
    animation-name: load; bottom: 0; animation-duration: 1400ms; animation-iteration-count: infinite;}

    @keyframes load {
        0% {width: 0;}
        50% {width: 100%; left: 0;}
        100% {width: 0; left: 100%;}
    }

.fixed-1200 {width: 1200px; height: auto; margin: 0 auto;}
.fixed-1000 {width: 1000px; height: auto; margin: 0 auto;}
.fixed-800 {width: 800px; height: auto; margin: 0 auto;}
.fixed-300 {width: 300px; height: auto; margin: 0 auto;}
.full-width {width: 100%; height: auto; margin: 0 auto;}

.flex-s-b {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.flex-c-c {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.flex-f-s {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.flex-f-e {display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
.flex-f-e-at {display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap;}
.flex-f-s-nw {display: flex; justify-content: flex-start; align-items: center;}
.flex-s-b-s {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.flex-s-b-at {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.flex-s-b-at2 {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.flex-s-b-ab {display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;}
.flex-c-t {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

.flex-100 {flex:0 0 100%;}
.flex-75 {flex:0 0 75%;}
.flex-70 {flex:0 0 70%;}
.flex-64 {flex:0 0 66%;}
.flex-60 {flex:0 0 60%;}
.flex-50 {flex:0 0 50%;}
.flex-40 {flex:0 0 40%;}
.flex-495 {flex:0 0 49.5%;}
.flex-49 {flex:0 0 49%;}
.flex-48 {flex:0 0 48%;}
.flex-35 {flex:0 0 35%;}
.flex-30 {flex:0 0 30%;}
.flex-32 {flex:0 0 32%;}
.flex-25 {flex:0 0 23%;}
.flex-19 {flex:0 0 19%;}
.flex-16 {flex:0 0 15%;}

.img_back {position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}

.a_left {text-align: left;}
.a_center {text-align: center;}
.a_right {text-align: right;}

.grid2 {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.grid3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.grid4 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;}
.grid5 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 20px;}

.gap30 {gap: 30px;}

.col1 {grid-column: auto / span 1;}
.col2 {grid-column: auto / span 2;}

i {margin-right: 5px;}

.topdown_gradient {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);}


.desktop_header {position: absolute; top: 0; left: 0; z-index: 999;}

.header_container {padding: 20px 0; box-sizing: border-box;}

.main_logo {flex: 0 0 20%;}
.navigation {flex: 0 0 78%;}

.navigation a {font-size: 24px; font-weight: 700; text-decoration: none; color: var(--mainBlue); padding: 15px 20px; box-sizing: border-box; display: block; width: fit-content; line-height: 65%; margin: 0 10px 0 0; border-radius: 20px;}

.navigation a:hover {background-color: var(--brighterBlue); color: #fff;}

.navigation a span {font-weight: 600; font-size: 14px; color: #000;}

.navigation a:hover span {color: #fff;}

.active {background-color: rgba(0, 134, 203, 0.15);}


.main_image {width: 100%; height: 80vh; z-index: 0; overflow: hidden;}


.bottom_info {position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; padding: 200px 0 20px 0; box-sizing: border-box; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}


.main_title {flex: 0 0 60%;}
.degraf_image {flex:0 0 38%;}

.main_title p {font-size: 44px; font-weight: 700; color:#ce171f; line-height: 70%;}
.main_title p span {color: var(--mainBlue); font-size: 26px; font-weight: 600; display: block;}

.silvabor {padding: 0 0 30px 0; box-sizing: border-box;}


.main_heading {padding: 60px 0; box-sizing: border-box; text-align: center;}
.main_heading h1, .main_heading h2 {font-size: 52px; color: var(--mainBlue);}
.main_heading p {font-size: 34px; color: #ce171f; font-weight: 600; margin-bottom: 40px;}

.main_heading p span {font-size: 20px; font-weight: 400; color: #000; display: block; margin-top: 20px;}


.smaller_heading {padding: 60px 0; box-sizing: border-box; text-align: center;}
.smaller_heading h2 {font-size: 38px; color: var(--mainBlue);}


.top_futures {flex: 0 0 24%; text-align: center;}
.top_futures img {margin: 0 auto 20px auto; width: 60%; height: auto;}
.top_futures p {font-size: 20px; font-weight: 600; color: #ce171f;}


.nevro_futures {flex: 0 0 19%; text-align: center;}
.nevro_futures img {margin: 0 auto 20px auto; width: 60%; height: auto;}
.nevro_futures p {font-size: 18px; font-weight: 600; color: #d8001b;}


.shadow {opacity: 0.2; text-align: center; padding: 40px 0; box-sizing: border-box;}

.content {padding: 40px 0; box-sizing: border-box;}

.happy_block {padding: 280px 0 20px 0; box-sizing: border-box; text-align: center;}

.happy_block img {opacity: 1;}

.short_info_container {z-index: 2;}
.watermark_protect {z-index: 1;  opacity: 0.4; }

.short_info {padding: 20px; box-sizing: border-box; background-color: rgba(255, 255, 255,0.95); border-radius: 20px; flex: 0 0 30%;}
.short_info h2 {font-size: 20px; font-weight: 600; color: var(--mainBlue);}
.short_info p {font-size: 16px; color: #000;}


.work_info {flex: 0 0 48%;}

.work_image {height: 240px; border-radius: 20px; overflow: hidden;}
.work_text {padding: 20px 0; box-sizing: border-box;}
.work_text h3 {font-weight: 600; color: #ce171f;}


.vitamins_container {padding: 20px 0 20px 0; box-sizing: border-box;}
.additional_info {padding: 20px 0; box-sizing: border-box;}

.additional_info h2 {font-size: 26px; margin-bottom: 40px; color: var(--mainBlue); text-align: center;}
.additional_info h3{font-size: 18px; color: #000;}

.additional_info p {font-size: 16px; color: #000;}



.footer_container {background-color: #f4f4f4; padding: 40px 0; box-sizing: border-box; margin-top: 20px;}

.footer_logo {width: 45%; height: auto; margin: 60px auto; opacity: 0.2;}

.bottom_degraf_box {width: 30%; height: auto; margin: 20px auto;}

.quick_info {padding: 20px 0; box-sizing: border-box;}
.quick_info h2 {margin-top: 20px;}

.grey_back {position: absolute; width: 100%; height: auto; top: 0; left: 0; z-index: -1; opacity: .2;}


.simple_text {text-align: center; font-size: 18px; padding: 20px 0; box-sizing: border-box;}

.magnegraf_systavki {margin: 40px 0;}

.mg_icon {flex: 0 0 19%; text-align: center; margin-bottom: 20px;}
.mg_icon p {color: #7f197d; font-size: 22px; font-weight: 600; word-wrap: break-word;}
.mg_icon img {width: 60%; height: auto; margin: 20px auto;}




/*NEVROGRAF*/

.check {flex: 0 0 20%;}
.check_text {flex: 0 0 78%;}
.check_text p {padding: 10px 0 0 0; box-sizing: border-box; font-size: 18px; color: #e4001a; font-weight: 600;}

.block_image_text {padding-top: 40px; padding-bottom: 40px; box-sizing: border-box;}
.block_image_text img {border-radius: 30px;}
.block_image_text p {padding: 20px 0; box-sizing: border-box; font-size: 18px; font-weight: 400;}

























/* SMALLER SCREEN DEKSTOP */

@media only screen and (max-width: 1400px) {

    .main_image {width: 100%; height: 100vh; z-index: 0;}

}








































/* --- TABLET --- TABLET --- TABLET --- TABLET --- TABLET --- TABLET --- TABLET --- TABLET --- */

@media only screen and (max-width: 1180px) and (orientation:landscape) {

    .fixed-1200 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-1000 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-900 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-800 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}


}











































.hide_on_desktop {display: none;}
.hide_on_mobile {display: initial;}

.mobile_header, .mobile_menu {display: none;}

.refl {-webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


@media only screen and (max-width: 800px) and (orientation:portrait) {

    
.hide_on_desktop {display: block;}
.hide_on_mobile {display: none;}

    .fixed-1200 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-1000 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-900 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-800 {width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .fixed-300 {width: 100%; height: auto; margin: 0 auto;}
    .full-width {width: 100%; height: auto; margin: 0 auto;}
    .flex-100 {flex:0 0 100%;}
    .flex-75 {flex:0 0 100%;}
    .flex-70 {flex:0 0 100%;}
    .flex-64 {flex:0 0 100%;}
    .flex-60 {flex:0 0 100%;}
    .flex-50 {flex:0 0 100%;}
    .flex-40 {flex:0 0 100%;}
    .flex-495 {flex:0 0 100%;}
    .flex-49 {flex:0 0 100%;}
    .flex-48 {flex:0 0 100%;}
    .flex-35 {flex:0 0 100%;}
    .flex-30 {flex:0 0 100%;}
    .flex-32 {flex:0 0 100%;}
    .flex-25 {flex:0 0 100%;}
    .flex-19 {flex:0 0 100%;}
    .flex-16 {flex:0 0 100%;}


    .desktop_header {display: none;}

    .mobile_header {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; box-sizing: border-box;  background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.2); z-index: 999; position: fixed;}

    .mob_logo, .mob_nav {flex: 0 0 48%;}

    .mob_logo img {width: auto; height: 60px;}



    .mob_menu_box {width: 25px; height: 20px; margin-left: 15px; top: -3px; display: block;}
    .bar {position: absolute; right: 0; width: 100%; background-color: var(--mainBlue); height: 25%; transition: all 200ms;}
    .bar1 {top: 0;}
    .bar2 {top: 37.5%;}
    .bar3 {top: 75%;}

    .active .bar1 {top: 37.5%; transition: all 200ms;}
    .active .bar3 {top: 37.5%; transition: all 200ms;}

    .mobile_menu {position: relative; width: 100%; height: 0; padding: 0 20px 0 20px; box-sizing: border-box; z-index: 888; transition: all 200ms; overflow: hidden; display: block;}

    .mobile_menu a {display: block; padding: 20px; box-sizing: border-box; border-radius: 20px; text-decoration: none; font-size: 20px; font-weight: 600; color: var(--mainBlue);}

    .mobile_menu a span {color: #000; font-size: 18px;}


    .active_mm { padding: 140px 20px 100px 20px; transition: all 200ms; height: auto;}



    .main_image {width: 100%; height: 60vh; z-index: 0;}

    .main_title p {font-size: 24px; font-weight: 700; color:#ce171f; line-height: 90%;}
    .main_title p span {color: var(--mainBlue); font-size: 18px; font-weight: 600; display: block; margin-top: 10px;}
    
.bottom_info {position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; padding: 150px 0 20px 0; box-sizing: border-box; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}

.main_heading {padding: 80px 20px 40px 20px; box-sizing: border-box; text-align: center;}
.main_heading h1, .main_heading h2 {font-size: 28px; color: var(--mainBlue);}
.main_heading p {font-size: 22px; color: #ce171f; font-weight: 600; margin-bottom: 20px;}

.top_futures {flex: 0 0 48%; margin-bottom: 30px;}
.top_futures p {font-size: 16px; font-weight: 600; color: #ce171f;}

.short_info {padding: 20px; box-sizing: border-box; background-color: rgba(255, 255, 255,0.95); border-radius: 20px; flex: 0 0 100%; margin-bottom: 20px;}
.short_info h2 {font-size: 20px; font-weight: 600; color: var(--mainBlue);}
.short_info p {font-size: 16px; color: #000;}

.happy_block {padding: 250px 0 20px 0; box-sizing: border-box; text-align: center;}

.work_info {flex: 0 0 100%;}


.grid4 {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}

.bottom_degraf_box {width: 60%; height: auto; margin: 20px auto;}

.grid2, .grid3 {display: grid; grid-template-columns: 1fr; gap: 20px;}

.mg_icon {flex: 0 0 49%;}
.mg_icon p {font-size: 14px;}


.check_text {flex: 0 0 100%;}


.smaller_heading {padding: 60px 20px; box-sizing: border-box; text-align: center;}
.smaller_heading h2 {font-size: 28px; color: var(--mainBlue);}


.asp_ratio_5_3 {aspect-ratio: 5 / 3;}




}



.purple p {color: #7f197d;}
.purplecolor {color: #7f197d !important;}