/*
Theme Name: 
Theme URI: dankanic.com
Author:  Kiril Dankanic  
Author URI: https://dankanic.com
Description: Theme specially designed 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 

BLUE    074fd3
ORANGE  ef9528

*/



/*----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: 'Fira Sans', sans-serif; margin:0; padding:0; color:#000;}
body {margin: 0;}

:root {
    --blue: #074fd3;
    --orange: #ef9528;
    --green: #039401;
}

.orange {color: var(--orange);}
.blue {color: var(--blue);}
.green {color: var(--green);}


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;}

img {max-width: 100%;}

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

.showup, .showup_later {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-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;}

.gap40 {gap: 40px;}

.align_self {align-self: center;}

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

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; z-index: 11; top: 0; left: 0; padding: 20px 0; box-sizing: border-box;}

.header_container img {width: auto; height: 80px;}
.main_image {height: 85vh; z-index: 0; border-width: 0 0 1px 0; border-color: var(--orange); border-style: solid;}

.main_info {position: relative; bottom: 0; left: 0; padding: 20px 0; box-sizing: border-box; height: 100%;}
.main_info .fixed-1200 {height: 100%;}

.see_more_blue {padding: 10px 20px; box-sizing: border-box; background-color: rgba(7, 79, 211, 0.03); border: solid 1px var(--blue); border-radius: 40px; color: var(--blue); font-weight: 700; font-size: 16px; text-decoration: none; display: block; width: fit-content;}

.see_more_blue:hover {background-color: var(--blue); color: #fff; transform: scale(1.02);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}

.see_more_orange {padding: 10px 20px; box-sizing: border-box; background-color: var(--orange); border: solid 1px var(--orange); border-radius: 40px; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; display: block; width: fit-content;}
.see_more_orange:hover {background-color: var(--orange); color: #fff; transform: scale(1.02);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}

.home_buttons a {margin-right: 20px;}


.main_info h1 {font-size: 40px; font-weight: 800; color: var(--blue);}
.main_info p {font-size: 18px; margin-bottom: 40px; font-weight: 400;}

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

.trigger {position:absolute; top: 50%;}

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


.whoami {font-size: 40px; color: var(--orange); font-weight: 700;}
.shortinfo {font-size: 18px; font-weight: 400; color: #000;}
.big {font-size: 24px; font-weight: 600;}

.zaro {margin-bottom: -5px; position: relative; z-index: -1;}
.simple_shadow {position: absolute; bottom: -2px; left: 0; width: 100%; height: auto;}

.text_info {background-color: #074fd3; padding: 60px 0; box-sizing: border-box;}
.text_info p {color: #fff; font-weight: 600; font-size: 22px; text-align: center;}
.ab_white {opacity: 0.2;}

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

.classroom_logo {width: 160px; height: auto; display: block; margin: 0 auto;}

.onlinecourse {padding: 40px 0; box-sizing: border-box;}
.onlinecourse h2 {font-size: 36px; color: var(--blue); font-weight: 600; text-align: center;}

.onlinecourse_title .small {display: block; font-weight: 600; color: var(--orange); font-size: 18px;}

.signup .small {font-size: 14px; font-weight: 300; display: block;}

.course {padding: 40px 0; box-sizing: border-box;}
.course_icon {width: 80px; height: auto; display: block; margin: 10px auto;}

.course p {text-align: center; font-weight: 600; font-size: 20px;}

.course_info {padding: 20px 0; box-sizing: border-box;}
.course_info div {padding: 20px; box-sizing: border-box; background-color: #f4f4f4; border-radius: 20px; display: flex; align-items: center; justify-content: center;}
.course_info p {text-align: center; align-self: center; display: block; font-weight: 600;}

.course_info .small {font-size: 14px; font-weight: 400;}


.signup {padding: 40px 0; box-sizing: border-box;}
.signup h2 {font-size: 36px; color: var(--orange); font-weight: 600; text-align: center;}


.frm_forms input, .frm_forms textarea, .frm_forms button {border-radius:15px !important; font-family:'Fira Sans', sans-serif !important; box-shadow:none !important; font-size:16px !important; border-color:#c0c0c0 !important; padding: 15px 20px !important; box-sizing: border-box !important;}
.frm_forms button {border:none !important; font-weight:600 !important; margin:0 !important; background-color:var(--orange) !important; color: #fff !important; padding: 20px 40px !important; box-sizing: border-box; display: block; margin: 0 auto !important;}
.frm_forms button:hover {background-color:#707070 !important; color:#fff !important;}
.frm_form_field {margin:0 0 10px 0 !important;}

.frm_forms label {display: none !important;}
.frm_forms {margin-top: 40px !important;}

.signup .instructions {font-size: 16px; font-weight: 600; color: #000; text-align: center; padding: 20px 0; box-sizing: border-box;}


.footer_container {padding: 80px 0; box-sizing: border-box; background-color: #f4f4f4;}

.for_questions {text-align: right; font-size: 28px;}

.contacts a {display: block; width: fit-content; text-decoration: none; color: #000; font-size: 34px; font-weight: 700; margin: 10px 0;}
.contacts a:hover {color: var(--orange);}

.rights {padding: 60px 0 0 0; box-sizing: border-box;}
.rights p {text-align: center; color: #707070;}

.course_text {padding: 40px 0; box-sizing: border-box; margin-top: 40px;}
.course_text p {font-size: 18px; font-weight: 400;}

.course_text .grid_text {padding: 30px 0; box-sizing: border-box;}
.course_text img {border-radius: 20px; overflow: hidden;}

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

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

.bonuses div {padding: 20px 20px 20px 40px; box-sizing: border-box; border-radius: 20px; border: solid 1px #0eaa57; position: relative;}
.bonuses div::before {content: '\f058'; display: block; width: 20px; height: 20px; position: absolute; left: 10px; top: 10px; color: #0eaa57; font-family: "Font Awesome 5 Free"; font-size: 20px;}

.facebook {display: block; width: fit-content; padding: 7px 10px 5px 10px; box-sizing: border-box; background-color: #074fd3; color: #fff; font-size: 16px; text-decoration: none; margin-top: 30px; border-radius: 8px;}


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

.testimonials div {padding: 20px 20px 20px 40px; box-sizing: border-box; border-radius: 20px; /*border: solid 1px #074fd3;*/ position: relative; background-color: rgba(7, 79, 211, 0.05);}
.testimonials div::before {content: '\f10d'; display: block; width: 20px; height: 20px; position: absolute; left: 10px; top: 10px; color: #074fd3; font-family: "Font Awesome 5 Free"; font-size: 20px; font-weight: 600;}
.testimonials .name {font-weight: 600; text-align: right; margin-top: 20px; color: #074fd3;}



.testimonials_green div {padding: 20px 20px 20px 40px; box-sizing: border-box; border-radius: 20px; /*border: solid 1px #074fd3;*/ position: relative; background-color: rgba(3, 148, 1, 0.05); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);}
.testimonials_green div::before {content: '\f10d'; display: block; width: 20px; height: 20px; position: absolute; left: 10px; top: 10px; color: #039401; font-family: "Font Awesome 5 Free"; font-size: 20px; font-weight: 600;}
.testimonials_green .name {font-weight: 600; text-align: right; margin-top: 20px; color: #039401;}

.probna_container {padding: 80px 0 60px 0; box-sizing: border-box;}

.probna_matura {background-color: #f1f1f1; border-radius: 20px; overflow: hidden; box-shadow: 2px 2px 40px rgba(0, 0, 0, 0.4);}

.probna_image {border-radius: 20px;}

.probna_info {padding: 60px 20px; box-sizing: border-box;}
.probna_info span {border-radius: 8px; padding: 5px 10px; background-color: var(--orange); color: #fff; font-size: 12px; font-weight: 800;}
.probna_info h2 {font-size: 44px; font-weight: 800; color: var(--blue); margin: 0;}
.probna_info .sub_heading {font-weight: 600; font-size: 20px; margin-bottom: 40px;}
.probna_info .probna_text {font-size: 14px; font-weight: 400;}

.probna_info a {margin-top: 20px;}
































/* SMALLER SCREEN DEKSTOP */

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

    

}








































/* --- 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;}


}
















































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

    .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%;}


    .main_image {height: 60vh;}


    .main_info h1 {font-size: 22px; font-weight: 800; color: var(--blue);}
    .main_info p {font-size: 14px; margin-bottom: 40px; font-weight: 400;}

    .footer_container .grid2,
    .probna_container .grid2 {grid-template-columns: 1fr;}

    .about_me .grid2 {grid-template-columns: 1fr;}
    .probna_image {aspect-ratio: 1/ .8;}
    .probna_info {padding: 20px;}
    
    .probna_info h2 {font-size: 38px;}

    .home_buttons .see_more_orange {margin-bottom: 10px;}

    .for_questions {text-align: center; font-size: 20px;}

    .contacts a {display: block; width: fit-content; text-decoration: none; color: #000; font-size: 24px; font-weight: 700; margin: 10px auto; text-align: center;}
    .contacts a:hover {color: var(--orange);}
    .rights {padding: 60px 0 0 0;}

    .header_container img {width: 65%; height: auto;}

    .main_info {height: auto; position: absolute; bottom: 0; left: 0; width: 100%;}
    .main_info .flex-50 {flex: 0 0 70%;}

    .who .grid3 {grid-template-columns: 1fr;}
    .or1 {order: 1;}
    .or2 {order: 2;}
    .or3 {order: 3;}

    .who .showup_later {top: 0; opacity: 1;}
    .who p {text-align: center;}

    .pomagalo .grid5 {grid-template-columns: 1fr 1fr;}

    .onlinecourse {padding: 60px 0;}
    .course {padding: 40px 20px;}

    .onlinecourse h2 {font-size: 24px;}
    .classroom_logo {width: 40%; height: auto;}

    .onlinecourse .grid2, .onlinecourse .grid3 {grid-template-columns: 1fr;}

    .oc_images {height: 240px;}
    .grid_text {text-align: center;}


.see_more_orange {padding: 10px 20px; box-sizing: border-box; background-color: var(--orange); border:none; border-radius: 40px; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;}
.see_more_orange:hover {background-color: var(--orange); color: #fff;}

.grid3 {grid-template-columns: 1fr;}




}