/*
Theme Name: DZ42
Theme URI: http://www.dizajnzona42.hr/
Description:
Author: Dizajn Zona 42
Version: 1.0
Tags:
*/


/*---general---*/
*{margin:0; padding:0; border:0; outline:0}
*, ::before, ::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body{font-family: 'Muli', sans-serif; font-weight: 400; color:#2c2c2a; font-size:16px; line-height:1.5;}

ul {list-style: none;}
h1, h2, h3, h4, h5, h6{font-weight:700; line-height:1.3;color:#2c2c2a}
a{text-decoration:none; color:#2c2c2a}
a:hover{text-decoration:none; color:#7e4f25}
b, strong, th{font-weight:700;}

a img{transition: all 0.5s ease}
#header  a:hover img {opacity:0.75}

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

input[type=text], input[type=password], textarea {font-family: 'Muli', sans-serif; font-weight: 400;}
 
::selection {background: #2c2c2a; color:#FFF} 
::-moz-selection {background: #2c2c2a;color:#FFF}

.kolona1{width:100%; height:auto}
.bck_brown{background:#7e4f25}
.bck_lightbrown{background:#e1d4c8}


.left{float:left}
.right{float:right}
.center{text-align:center}
.radius{-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.box{position: relative; float:left}
.transition {transition: all 0.5s ease;}


.container{float:none; margin:0 auto; max-width:1020px}

#header{padding:40px 0 25px 0;}
#footer{margin-top:80px}
#footer-inner{padding:135px 0 135px 0;}

/*--- ---------------- Grid ---------------- ---*/
/* - half - */
.kolona12{ width: 48.7115%; margin-right: 2.577%;}
.kolona12:nth-of-type(2n){ margin-right: 0px; }
.kolona12.topic{ width: 48.0115%; margin-right: 1.9885%;}
.kolona12.topic:nth-of-type(2n){ margin-right: 0px; }

/* - third - */
.kolona13{ width: 31.615%; margin-right: 2.577%; }
.kolona13:nth-of-type(3n){ margin-right: 0px; }
.kolona23{ width: 65.808%; margin-right: 2.577%; }
.kolona1 .kolona23 + .kolona13 {margin-right:0;}
.kolona1 .kolona13 + .kolona23 {margin-right:0;}
.kolona1 .kolona14 + .kolona14 + .kolona12 {margin-right:0;width: 48.7115%;}

/* - fourth - */
.kolona14{ width: 23.067%; margin-right: 2.577%;}
.kolona14:nth-of-type(4n){ margin-right: 0px;}
.kolona34{ width: 74.356%; margin-right: 2.577%; }

.kolona1 .kolona34 + .kolona14{margin-right:0;}
.kolona1 .kolona12 + .kolona14 + .kolona14 {margin-right:0;}
.kolona1 .kolona14 + .kolona34{margin-right:0;}

/* - fifth - */
.kolona15{ width: 17.9384%; margin-right: 2.577%;}
.kolona15:nth-of-type(5n){ margin-right: 0px; }



/* glavni izbornik */
#header_main_nav{width:100%; 
	transition: all 0.5s ease}
.menu-glavni-izbornik-container, .menu-user-page-menu-container{float:right;}
#header_main_nav ul {width: auto;list-style-type: none;}
#header_main_nav ul li {position:relative; float:left;}
#header_main_nav ul li a{position:relative; float:left; padding:10px 15px;font-size:16px; color:#2c2c2a;text-transform: uppercase;transition: all 0.5s ease;}
#header_main_nav ul li a:hover {color:#949494}


#glavna-slika{width:100%; height:1000px}
#main-text{padding:65px 85px}


.main_content h1{font-size: 30px;font-weight:700; padding-bottom:16px}
.main_content h2	{font-size:24px; font-weight:700; padding-bottom:16px}
.main_content h3	{font-size:21px; font-weight:700; padding-bottom:16px}
.main_content h4	{font-size:19px; font-weight:700; padding-bottom:16px}
.main_content h5	{font-size:17px; font-weight:700; padding-bottom:16px}
.main_content h6	{font-size:15px; font-weight:700; padding-bottom:16px}
.main_content, .main_content p, .main_content ul, .main_content ol{font-size:16px; font-weight:400; padding-bottom:16px}

.main_content ul li{position:relative; padding-left:16px}
.main_content ol {list-style-position: inside;}


.main_content ul li::before {
	content: "\2212";
	font-size:10px;
	color:#FFF;
	position:absolute;
	top: 4px;
    left: 0;
}

.alignright {position:relative; float:right; margin:5px 0px 6px 15px}
.alignleft {position:relative; float:left; margin:5px 15px 6px 0px}

/* Headline */
.home_img_text_wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home_img_text_wrap_inner {
    padding: 40px 40px 40px 40px;
    text-align: center;
    max-width: 720px;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFF;
}





#slika-headline{position:relative; float:left; }
.speech-bubble {
    border: 1px solid #FFF;
    padding: 15px 25px;
    position: absolute;
    bottom: 30%;
    left: 80px;
    font-size: 30px;
    font-weight: 700;
    color: #FFF;
}
.speech-bubble .arrow {
    border-top-style: hidden;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position: absolute;
    right: 0px;
}
 
.bottom {
    border-color: #FFF transparent transparent transparent;
    border-width: 10px 20px 0px 10px;
    bottom: -23px;
}
.bottom:after {
    border-color: #FFF transparent transparent transparent;
    border-style: solid;
    border-width: 22px 0px 0px 13px;
    bottom: 1px;
    content: "";
    position: absolute;
    right: 30px;
}

.footer-arrow {
    position: relative;
    float: left;
    margin-top: -135px;
}
.footer-arrow:after {
    border-color: transparent transparent transparent #ffffff;
    border-style: solid;
    border-width: 0px 0px 42px 26px;
    bottom: 1px;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
}

/*------------login--------------------*/
#login{
margin-top:80px;
padding:80px 65px;
}


/* Removing input background colour for Chrome autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #e1d4c8 inset;
}
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: #2c2c2a !important;
}

#login input[type="text"], #login input[type="password"], #login textarea {
	width:100%;
  background-color : #e1d4c8; 
  padding:7px;
  transition: all 0.5s ease;

}
#login input[type="text"]:focus , #login input[type="password"]:focus { 
  background-color: #fffbf6;
}

#login input[type="submit"] { 
	padding: 10px 20px;
    background: transparent;
    border: 3px solid #e1d4c8;
    color: #e1d4c8;
    cursor: pointer;
	transition: all 0.5s ease;
}

#login input[type="submit"]:hover { 
    background: #e1d4c83b;
}
	
#login input[type="submit"]:disabled {
  border: 3px solid #88603d;
    color: #e1d4c882;
    background: #e1d4c83d;
}

#login label{color: #e1d4c8}
#login .lwa td { padding-top: 0px;padding-bottom: 15px;}
#login .lwa td.nopadd { padding-bottom: 0;}
#login .lwa td.lwa-password-input, #login .lwa td.lwa-password-label,  #login .lwa td.lwa-submit-button { padding-top: 0px;padding-bottom: 0px;}
	
#login.lwa .lwa-username-label, #login .lwa .lwa-password-label {
padding-right: 15px;}
	
#login.main_content h6{font-size:30px; color:#FFF; font-weight:700;}
#login .lwa-status{margin-bottom: 20px;}
#login input[type="checkbox"] { 
    width: auto;
    margin-top: 20px;
}

#termslabel a{    color: #e1d4c8; 
    border-bottom: 1px solid #e1d4c8;transition: all 0.5s ease;}
#termslabel a:hover{    color: #e1d4c8;
    border-bottom: 1px solid #FFF;}
#lwa_wp-submit{z-index:1001}
#submit-wrapper{position:relative; float:left; width:auto; height:auto; z-index:1002}	
#submit-wrapper.hidesubmitwrapper{width:0; height:0; z-index:1000}
input[disabled] {pointer-events:none}




#modal.modal{ z-index: 2000;display:none;      padding: 30px 30px 20px 30px;  font-size: 15px;}
.jquery-modal {z-index: 2000!important;}

a#closemodal{
    background: #7e4f25;
    padding: 7px 21px;
    float: right;
    position: relative;
    color: #FFF;
    font-size: 14px;
	transition: all 0.5s ease;
}
a#closemodal:hover{
    background: #96704e;
}



#modal.modal a.close-modal {
position: absolute;
    top: -12.5px;
    right: -12.5px;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    background: #7e4f25;
    border-radius: 50%;
	transition: all 0.5s ease;
}
#modal.modal a.close-modal:hover {

    background: #96704e;

}
#modal.modal a.close-modal:after {
    content: '';
    height: 20px;
    border-left: 3px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    left: 18px;
    top: 9px;
}


#modal.modal a.close-modal:before {
    content: '';
    height: 20px;
    border-left: 3px solid #fff;
    position: absolute;
    transform: rotate(-45deg);
    left: 18px;
    top: 9px;
}
#modal h5{font-size:18px; padding-bottom:15px;}
#modal p{font-size:15px; padding-bottom:15px;}
.accept-terms-info {
    margin: 0px 0px 5px;
    padding: 10px 10px;
    color: #333;
    border-radius: 3px;
    display: none;
	background-color: #FFEBE8;
    border: 1px solid #C00;
    margin-bottom: 20px;
	transition: all 0.5s ease;
}
.ati-show{
display: block !important;}



/* ---------------checkbox--------------------- */
.chkcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.chkcontainer input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
	background-color: #7e4f25;
  border:1px solid #e1d4c8;
  transition: all 0.5s ease;
}

/* On mouse-over, add a grey background color */
.chkcontainer:hover input[type="checkbox"] ~ .checkmark {
  background-color: #9d7959;
  border:1px solid #e1d4c8;
}

/* When the checkbox is checked, add a blue background */
.chkcontainer input[type="checkbox"]:checked ~ .checkmark {
  background-color: #7e4f25;
  border:1px solid #e1d4c8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chkcontainer input[type="checkbox"]:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.chkcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*------------account--------------------*/
#my-account{border-bottom:1px solid #e1d4c8}
#my-account h4{color:#7e4f25;
    border-bottom: 1px solid #e1d4c8;}

#my-documents{border-top: 1px solid #e1d4c8;
    padding-top: 50px;
        margin-bottom: 16px;}
#my-documents h4{color:#7e4f25;
    border-bottom: 1px solid #e1d4c8;margin-bottom: 16px;}

#user-page-submit {
    padding: 14px 22px;
	background: #7e4f25;
    color: #FFF;
    cursor: pointer;
    transition: all 0.5s ease;
    margin-top: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
#user-page-submit:hover{
	 background: #7e4f25cc;
}

#data-updated   {padding: 10px;
    background: #4caf501c;}
	
	
	
#my-account .acf-fields.-left > .acf-field:before{background: #ffffff;
    border-color: #ffffff;}	
	
	
#my-account .acf-field input[type="text"], #my-account .acf-field input[type="password"], #my-account .acf-field input[type="number"], #my-account .acf-field input[type="search"], #my-account .acf-field input[type="email"], #my-account .acf-field input[type="url"], #my-account .acf-field textarea, #my-account .acf-field select {
    width: 100%;
    background-color : #e1d4c8; 
	padding:10px;
	height: auto;
  transition: all 0.5s ease;
    resize: none;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.3;
}


#my-account .acf-field input[type="text"]:focus, #my-account .acf-field input[type="password"]:focus, #my-account .acf-field input[type="number"]:focus, #my-account .acf-field input[type="search"]:focus, #my-account .acf-field input[type="email"]:focus, #my-account .acf-field input[type="url"]:focus, #my-account .acf-field textarea:focus, #my-account .acf-field select:focus {
  background-color: #fffbf6;
}

#my-account .acf-fields.-left > .acf-field {
    padding: 10px 0;
}
#my-account .acf-fields > .acf-field {
    border-top: 0;
}


#my-account .acf-fields.-left > .acf-field > .acf-label {
    float: left;
    width: 20%;
    margin: 0;
    padding: 9px 0px 0 0;
    text-align: right;
    font-size: 16px;
    line-height: 1.3;
}

#my-account .acf-form-submit{text-align:right}

#my-account .acf-fields.-left > .acf-field > .acf-input {
    padding: 0 0 0 10px;
}


/* Documents */

.docswrap h3{color:#7e4f25; font-size:18px; padding-bottom: 4px;}
.docswrap  a{color:#7e4f25; border-bottom:1px solid #FFF;transition: all 0.5s ease;}
.docswrap  a:hover{color:#7e4f25; border-bottom:1px solid #7e4f25}
.docswrap  p{padding-bottom:0; font-size:13px}

.docswrap a.filetype {
    width: 90%;
    height: auto;
    background: #7e4f25;
    display: block;
    padding: 20px 3px;
    text-align: center;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}


.docswrap  a.filetype{border-bottom:0;transition: all 0.5s ease;}
.docswrap  a.filetype:hover{color:#FFF; border-bottom:0; background: #7e4f25cc; }


#main-text h1, #main-text p, #main-text h2, #main-text h3, #main-text h4, #main-text h5, #main-text h6, #main-text ol, #main-text ul {color:#FFF}
#main-text a, #footer a{text-decoration:none; color:#FFF;transition: all 0.5s ease; border-bottom:1px solid #7e4f25}
#main-text a:hover, #footer a:hover{text-decoration:none; color:#FFF; border-bottom:1px solid #FFF}
#footer p{color:#FFF; font-size:15px}


#expand{display:none;}

#navwrap {
    position: absolute;
    float: left;
    top: -80px;
    right: 0px;
    width: 80%;
}


		
@media (max-width:1090px){
	.container{float:left; margin:0 auto; width:100%; padding:0 20px;}
	#footer-inner{padding-left:20px; padding-right:20px }
	.container.respfull{width:100%;padding: 0;}
	#main-text {padding: 40px 20px;}
	.container.respfull{width:100%}
	.speech-bubble .arrow{display:none}
}

		
@media (max-width:1040px){
	#navwrap {
		right:5px;
	}
}

@media (max-width:900px){
#my-documents  .docswrap  .kolona14 {width:100%; margin:0}
#my-documents  .docswrap  .kolona14  .kolona14{    width: 23.067%;
    margin-right: 2.577%;}
	
	.speech-bubble {
		border: 1px solid #FFF;
		padding: 15px 25px;
		position: absolute;
		bottom: auto;
		left: 20px;
		right: 20px;
		top: 40%;
		font-size: 24px;
		font-weight: 700;
		color: #FFF;
		text-align: center;
		line-height: 1.3;
		background: #40435e2b;
	}
	
	
	
#expand {
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: -80px;
    right: 0;
    margin: 0px 20px 20px 0px;
    color: #FFF;
}


.barscontainer {
  display: inline-block;
  cursor: pointer;
  border: 3px solid #7e4f25;
  padding:10px;
}

.bar1, .bar2, .bar3 {
  width: 24px;
  height: 3px;
  background-color: #7e4f25;
  margin: 4px 0;
  transition: 0.4s;
}

.changebar .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 4px);
  transform: rotate(-45deg) translate(-5px, 4px);
  
}

.changebar .bar2 {opacity: 0;}

.changebar .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
  transform: rotate(45deg) translate(-5px, -5px);
}

	
	#expand a{color: #FFF; }
		#control-expand {
			width: auto;
			height: auto;
			position: relative;
			float: right;
			color: #FFF;
			font-size: 14px;
			text-transform: uppercase;
			line-height: 14px;
			font-weight: 600;
		}
		
		.open{background: url(media/icon-menu.png) 8px 8px no-repeat;}
		.close{background:url(media/icon-menu-close.png) 8px 8px no-repeat;}
		
#navwrap {
    position: relative;
    float: left;
    top: auto;
    right: auto;
	width: 100%;
}

#header_main_nav{display:none}	
#header_main_nav.shownav{display:block}

	#header_main_nav ul {
		width: auto;
		list-style-type: none;
		float: left;
	}	
	#header_main_nav {
		    width: 100%;
    background: #7e4f25;
    position: relative;
    float: left;
    z-index: 2001;
	}	
	#header_main_nav ul li a{color: #ffffff;}
	#header_main_nav ul li a:hover {
		color: #ffffff;
		background: #8f6641;
	}
	
	
}

@media (max-width:700px){
	#my-account .acf-fields.-left > .acf-field > .acf-label{
	width: 100%;
	padding: 9px 0px 3px 0;
    text-align: left;
	}
	#my-account .acf-fields.-left > .acf-field > .acf-input{
		width: 100%;
		padding:0;
	}
	
	#respt1{width: 100%;
    margin: 0;}
	#respt2{width: 0%;
    overflow: hidden;
    margin: 0;}
	#respt3{    width: 100%;
    margin: 0;}
	
	#login {
		margin-top: 0px;
		padding: 40px 20px;
	}
	#footer {
		margin-top: 40px;
	}
	
	#footer-inner {
		    padding: 85px 20px;
	}
	.footer-arrow {
		margin-top: -85px;
	}
}

@media (max-width:535px){
	.speech-bubble {
		border: 1px solid #FFF;
		padding: 15px 25px;
		position: absolute;
		bottom: auto;
		left: 20px;
		right: 20px;
		top: 25%;
		font-size: 22px;
		font-weight: 700;
		color: #FFF;
		text-align: center;
		line-height: 1.3;
		background: #40435e2b;
	}
	
	
	#header_main_nav ul {
		width: 100%;
	}
	#header_main_nav ul li {
		width: 100%;
	}
	
	#header_main_nav ul li a {
		width: 100%;
	}
}