/*
Theme Name: Dragan
Author: Dragan Janković
Description: Worpress tema za poslove
Version: 1.0
Text Domain: dragan
*/

/*Import google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;600&display=swap');

/*header*/

#wrap {
    position: relative;
	font-family: "Playfair Display", Helvetica, Arial, Verdana, sans-serif;
    background-color: black !important;
    /*border: 24px solid seashell;*/
    min-height: calc(100vh - 48px);
    box-sizing: border-box;
}

#wrap p{
	font-family: 'Inter', Helvetica, Arial, Verdana, sans-serif;
    line-height: 1;
}

.complited {
    color: #f1ece7 !important;
}
/* #Header
   ========================================================================== */
#header {
	background: #3d3c3cb3;
    position: fixed;
    z-index: 1;
    width: calc(100%);
}
.h3, h3 {
    font-size: 21px;
    color: #fff;
}
p.tags a {
    padding: 2px 5px;
    border: 1px solid #eee;
    color: #ada6a6;
    margin-right: 5px;
	line-height:2
}
p.category a {
    border: 1px solid #ccc;
    padding: 2px 5px;
	line-height:2
}
p.tags a:hover,p.category a:hover{
	background:#eee;
}
a h2{
	font-size:18px;
    color: #f1ece7;
    line-height: 1;
    margin-bottom: 4px;
}

a p{
	font-size:15px;
    color: #f1ece7;
    line-height: 1;
}

p a{
    color: #fff !important;
}

p a:hover{
    color: #000000 !important;
}



/*team*/
.page-id-574 .container img {
    border-radius: 50%;
}
@media (min-width: 1025px) {

    .stuck {
        position: fixed !important;
        z-index: 1100;
        top: 0;
        width: 100% !important;
    }

    #header.stuck {
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        background: #fff;
    }

    .stuck #logo {
        margin: 15px 0;
    }

    .stuck #logo img {
        height: 35px;
    }

    .stuck .sf-menu {
        margin-top: 14px;
    }

    .stuck .sf-menu > li > a,
    .stuck .sf-menu > li.dropdown > a {
        padding-bottom: 15px;
    }

    .stuck .sf-menu li.dropdown ul {
        margin-top: 8px;
    }

    .stuck .sf-mega {
        margin-top: 0;
    }

    .stuck #custom-search-form {
        top: 10px;
    }

}

/* Logo */

#logo {
    display: block;
    margin: 0;
}

#logo img {
    display: block;

    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.72));
}

/* Menu basics */

.sf-menu,
.sf-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sf-menu > li {
    float: left;
}

.sf-menu > li > a {
    position: relative;
    display: flex;
    border: 2px solid aqua;
}

.sf-menu .sf-mega,
.sf-menu li.dropdown ul {
    position: absolute;
    z-index: 210;
    top: 100%;
    left: 0;
    display: none;
}

.sf-menu li.dropdown {
    position: relative;
}

.sf-menu li.dropdown ul ul {
    top: -1px;
    left: 100%;
}

.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega,
.sf-menu li.dropdown:hover > ul,
.sf-menu li.dropdown.sfHover > ul {
    display: block;
}

/* Menu Skin */

.sf-menu {
    
    /*width: 100%;
    margin-top: 67px;*/
    /*border: 1px solid orange;*/
}

.sf-menu a {
    display: block;
    padding: 10px 0;
    font-family: "Inter", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 400;
	font-size:16px;
    color: #f1ece8;
    text-decoration: none;
}

.sf-menu li:last-child > a {
    border-bottom: none;
}

.sf-menu > li > a,
.sf-menu > li.dropdown > a {
    padding: 0 0 0 0;
    border: none;
    font-family: "Inter", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 400;
	font-size:16px;
	line-height:4;
    text-transform: uppercase;
}

.sf-menu > li a i {
    margin-right: 5px;
}

.sf-menu > li > a span {
    padding: 7px 15px;
}

.sf-menu > li > a.sf-with-ul span {
    padding-right: 30px;
}

.sf-menu li.sfHover > a,
.sf-menu a:hover,
.sf-menu li.sfHover a:hover {
    color: #fff;
    text-decoration: none;
}

.sf-menu > li.active > a span {
    background-color: #eee;
}

.sf-menu > li.active > a,
.sf-menu > li.active > a:hover {
    color: #fff;
}

/**
  * 1. allow long menu items to determine submenu width
  */

.sf-menu li.dropdown ul {
    min-width: 180px; /* 1 */
    /*border: 1px solid rgba(0, 0, 0, 0.1);*/
    background-color: #121212;/*DROPDOWN BACKGROUND COLOR*/
}


.sf-menu > li.dropdown > ul li a {
    padding: 15px 15px;
}

/* mega menu dropdown */

.sf-mega {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    /*border: 1px solid rgba(0, 0, 0, 0.1);*/
    border-bottom: 3px solid #d91f3d;
    background-color: #fff;
}

.sf-mega-section {
    float: left;
    min-width: 155px;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    border-right: 1px solid #efefef;
}

.sf-mega-section:last-child {
    border-right: none;
}

/* arrows */

/* styling for both css and generated arrows */

.current.sf-with-ul::after {
    position: absolute;
    top: 8px;
    right: 0px;
    font-family: 'iconfontcustom';
    font-size: 9px;
    content: "";
    margin-right: 4px;
    color: #fff;
}

.sf-with-ul::after {
    position: absolute;
    top: 8px;
    right: 0px;
    font-family: 'iconfontcustom';
    font-size: 9px;
    content: "";
    margin-right: 4px;
    color: #022b36;
}

/* styling for right-facing arrows */
.sf-with-ul-right:after {
    position: absolute;
    top: 10px;
    right: 5px;
    font-family: 'iconfontcustom';
    font-size: 10px;
    content: "";
}

li:hover.sf-with-ul-right:after {
    color: #d91f3d;
}

/* Mobile Menu  */

#mobile-menu {
	z-index: 20;
    border-bottom: 1px solid #b4bfc3;
    margin-bottom: 0;
    position: fixed;
	background:#3d3c3cb3;
    width: calc(100% - 48px);
    top: 176px;
	padding:0;
}

#mobile-menu li {
    display: block;
    margin: 0;
}

#mobile-menu > li > ul,
#mobile-menu > li > ul > li > ul {
    display: none;
    margin-left: 0;
}

#mobile-menu .sf-mega {
    display: none;
    padding: 0;
    border: none;
    margin: 0;
}

#mobile-menu .sf-mega-section {
    float: none;
    width: 100%;
    padding: 0;
    border: none;
}

#mobile-menu .sf-mega-section ul {
    margin-left: 0;
}

#mobile-menu li a {
    position: relative;
    display: block;
    padding: 15px 25px;
    border-top: 1px solid #b4bfc3;
    color: #fff;
    font-size: 18px;
    text-align: left;
    text-decoration: none;
}
.sf-with-ul::after {
	color:transparent;
}
#mobile-menu ul a {
    padding-left: 45px;
}

#mobile-menu ul li ul a {
    padding-left: 65px;
}

#mobile-menu .mobile-menu-submenu-arrow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 70px;
    border-left: 1px solid #b4bfc3;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

#mobile-menu .mobile-menu-submenu-arrow:hover {
    background-color: #c8d3d7;
}

#mobile-menu li a:hover {
}

#mobile-menu {
    display: none;
}

/* Mobile menu trigger  */

#mobile-menu-trigger {
    float: right;
    display: none;
    margin-top: 14px;
    font-size: 32px;
}

/* Custom Search Form */

#custom-search-form {
    position: absolute;
    top: 20px;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    /*border: 1px solid hotpink;*/
}

#custom-search-form + .sf-menu {
    margin-right: 40px;
}

#custom-search-form #s {
    height: 36px;
    width: 36px;
    border: red;
    background: transparent url(images/bg-search-2.png) no-repeat 0 0;
    background-size: cover;
    color: #022b36;
	margin-right:15px;

}

#custom-search-form #s:hover {
    cursor: pointer;
}

#custom-search-form #s.open {
    padding-left: 30px;
	background:#fff;
    border: 1px solid #b4bfc3;
}

/*gallery*/
.bg-dark{
	/*background:#3d3c3cb3;*/
	color:black;
}
figure {
    margin: 0;
    padding: 4px;
}
figure.col-xs-12{
	padding:4px;
}
figure.col-xs-3 {
    padding: 4px;
    float: left;
    opacity: 0.5;
}
figure.col-xs-3:hover {
    opacity: 1;
}
img {
    max-width: 100%;
    height: auto;
}
img.size-medium {
    clear: both;
    display: block;
    margin-bottom: 50px;
}
img.size-medium.alignleft {
    float: left;
    clear: unset;
    margin-right: 20px;
}
/*text*/

h2{
	font-size:23px;
	font-weight:400;
	font-family: "Playfair Display", Helvetica, Arial, Verdana, sans-serif;
	display: block;
    width: 100%;
    color: #fff;
}
hr {
    width: 100%;
    border-top: 1px solid #00000026;
    margin-top: 30px;
    padding-bottom: 30px;
}
p{
    font-family: "Playfair Display", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 150%;
}
.background h1 {
    width: 100%;
    text-align: center;
    padding: 200px 0 150px;
    background: #00000073;
    margin-bottom: 0;
    font-family: "Playfair Display";
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    color: #fff;
    font-size: 70px;
	margin:0
}
.background {
    width: 100%;
    background-size: cover;
    background-position: center center;
    margin-bottom: 50px;
}
p.copyright  {
    text-align: left;
    font-weight: 300;
    font-size: 16px;
    padding-top: 70px;
    margin-bottom: 80px;
    color: #fff;
}
.contact p {
    padding: 47px 10px 0px;
    font-size: 15px;
    color: #eee;
}
.category{
    padding: 0;
    margin-top: 0;
    line-height: 100%;
    font-size: 13px;
    color: #999999;
}



.tags{
    padding: 0;
    line-height: 100%;
    font-size: 13px;
	margin-bottom:30px;
}
iframe{
	max-width:100%;
	max-height:500px;
}
/*cat-tag search*/
.cat-tag a ,.owl-carousel a{
    margin-bottom: 10px;
    display: block;
    color: #333;
    padding-bottom: 28px;
}
.cat-tag a:hover,.owl-carousel a:hover {
	text-decoration:none;
	color:#007096;
}
strong{
	font-weight:400;
}
.bg-light {
    background: #f6f5f5;
    padding: 30px 0;
    margin-top: 30px;
}
a:focus{
	text-decoration:none;
}
.complited a {
    border: 3px solid #f1ece7;
    color: #f1ece7;
    padding: 5px 10px;
    display: inline-block;
    margin-top: 10px;
	font-family: "Playfair Display", Helvetica, Arial, Verdana, sans-serif;
}
.complited a:hover{
    text-decoration:none;
	color:#fff;
	background:#333;
}
.complited h2{
	clear:both;
	display:block;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}
/*carousel*/
.owl-carousel {
    margin-top: 62px;
}
.owl-nav {
	position: absolute;
    width: 100%;
    top: 0;
    margin-top: -70px !important;
    font-size: 44px;
    display: block;
    right: 0;
	text-align: right;
}
button.owl-prev i,button.owl-next i {
    padding: 17px 13px 15px;
    border: 1px solid #333;
    display: inline-flex;
    line-height: 0;
    margin-right: 10px;
    font-size: 27px;;
}
button.owl-prev i:hover,button.owl-next i:hover {
    background:#eee;
}
button.owl-prev,button.owl-next,button.owl-prev:focus,button.owl-next:focus {
    width: 50px;
    height: 50px;
}
button:focus,button:active {
   outline: none !important;
   box-shadow: none;
}
.paralax a {
    font-size: 26px;
    color: #eee;
    border: 1px solid #eee;
    padding: 0 10px;
}
.paralax a:hover {
    background: #eee;
	color:#333;
	text-decoration:none;
}
.paralax h2 {
    font-size: 50px;
    color: #fff;
    margin-bottom: 35px;
}
.pagination a {
    float: left;
    padding: 3px 10px !important;
    border: 1px solid #ccc;
    display: inline !important;
    line-height: 1;
    font-size: 19px;
    margin-right: 5px;
}
.pagination a:hover {
    background:#eee;
}
.pagination span {
    float: left;
    padding: 3px 10px !important;
    display: inline !important;
    line-height: 1;
    font-size: 19px;
    margin-right: 5px;
}
p.copyright.col-md-12 img {
    width: 30px;
    margin: 5px; 
}
#panel-590-0-0-4> .panel-widget-style {
    background-color: #fff !important;
}

a.n2-ow{
    white-space: normal !important;
}

@media (max-width: 1200px) {
    a.n2-ow{
        font-size: 54px !important;
    }
}

/* #Smaller then 1024px width
   ========================================================================== */

@media (max-width: 1024px) {

    #wrap {
    }

    #header {
    }

    #content {
    }

    #footer {
    }

    a.n2-ow{
        font-size: 54px !important;
        padding-left:24px;
        padding-right:24px;
    }

}

/* #Tablet (Portrait)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 979px) {
    #wrap {
    }

    #header {
    }

    #menu {
        display: none;
    }

    #mobile-menu-trigger {
		display: block;
		margin-top: 14px;
		margin-right: 80px;
		color:#fff;
    }

    #custom-search-form {
        right: 28px;
    }

    #content {
    }

    #footer {
    }

        a.n2-ow{
        font-size: 48px !important;
        padding-left:24px;
        padding-right:24px;
    }

}

/* #Mobile (Portrait and Landscape )
   ========================================================================== */

@media (max-width: 767px) {

    body {
        background: none;
        background-color: #fff;
    }
	.background h1 {
		font-size: 60px;
	}

    #header-top {
        display: none;
    }

    #header {
    }

    #logo {
    }

    #menu {
        display: none;
    }

    #mobile-menu {
        top: 190px;
    }

    #mobile-menu-trigger {
        position: absolute;
        top: -36px;
        right: 50px;
        display: block;
        padding: 10px;
        margin-top: 0;
		color:#fff;
    }

    #custom-search-form {
        top: -20px;
    }

    #content {
    }

    #footer {
    }
	iframe {
		max-height: 400px;
	}



}

/* #Mobile ( Landscape )
  ========================================================================== */

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


	.background h1 {
		font-size: 50px;
	}
    #mobile-menu-trigger {
        right: 60px;
		top:-24px;
		color: #fff;
    }
        #custom-search-form {
        top: -8px;
    }


}
@media only screen and (max-width: 480px){
	iframe {
		max-height: 218px;
	}
	p.copyright img{
		display:block;
	}

}









.slidetext {
    /*border: 1px solid pink !important;*/
    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.72));
}

#panel-590-0-0-0{
    background-color: green;
}

/*HEADER*/
#header .row {
    display: flex;
    align-items: center;
}

#header .col-lg-2 {
    display: flex;
    align-items: center;
    /*border: 1px solid red;*/
}

.img-fluid{
    padding:0;
}

#logo img{
    padding: 24px;
}




.cat-tag a {
  color: #f1ece7 !important;
  text-decoration: none;
  transition: color 0.3s ease;

  position: relative;
  display: block;
  overflow: hidden;
}

.cat-tag a:hover {
  color: #fff !important;
}

.cat-tag a:hover img {
  filter: brightness(0.8) sepia(1) hue-rotate(-38deg) saturate(1);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.cat-tag a * {
  color: inherit;
}

.col-md-12 p{
    color: #f1ece7;
}

p.category a{
    color: #fff;
}

.ssliderr{
    margin-top:120px;
}


  #n2-ss-2 .n2-ss-slider { /* replace #n2-ss-1 with your slider’s ID */
    min-height: calc(100vh - 48px) !important;
    border: 4px solid red;
  }

  .n2-ss-slider-2{
    min-height: calc(100vh - 24px - 240px) !important;
    border: 4px solid red;
  }
.n2-bullet.n2-style-7ee626a9d3256034db98f87cfee44359-dot.n2-active {
    background-color: #ffffff !important;     
}