@font-face {
font-family: 'Raleway';
src: url('../fonts/raleway-light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Raleway';
src: url('../fonts/raleway-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Raleway';
src: url('../fonts/raleway-medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}


@font-face {
font-family: 'Raleway';
src: url('../fonts/raleway-semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
}


/*** General ***/

html {
height: 100%;
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}


body {
margin: 0;
padding: 0;
font: 400 18px/normal 'Raleway', serif;
color: #000;
background-color: #fff;
}
.section {
position: relative;
padding: 0 40px;
}
/*.section.illustrated {
padding: 0 20px;
}
.section.illustrated .lining {
max-width: 1240px;
}
.section.illustrated h1,
.section.illustrated #pagenav {
margin-left: 20px;
margin-right: 20px;
}
.usluge #section4 .section.illustrated h1 {
margin-bottom: 30px;
}*/


.lining {
position: relative;
width: 100%;
padding: 40px 0;
max-width: 1200px;
margin: 0 auto;
}
.lining:after {
display: block;
content: "";
height: 0;
visibility: hidden;
clear: both;
}
h1 {
font: 300 44px/44px 'Raleway';
margin: 0;
}

a {
color: #000;
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: #ee3c3d;
}
a.active {
color: #ee3c3d;
}
p {
margin: 1em 0;
}
img {
display: block;
border: none;
}
b {
font-weight: 600;
}


/* CSS table */

.table {
display: table;
width: 100%;
border-collapse: collapse;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
vertical-align: top;
}

/*** end General ***/






#coordinates {
border-bottom: 1px dotted #999;
/*background-color: #8182AD;*/
}
#coordinates .lining {
height: 39px;
padding: 0;
font-size: 14px;
line-height: 39px;
/*color: #fff;*/
}





/*** Head ***/

#head {
height: 125px;
}
#head .lining {
padding-top: 35px;
padding-bottom: ;
}
#head img {
display: block;
float: left;
height: 66px;
}
#site_title {
float: left;
font-weight: 500;
font-size: 28px;
line-height: 28px;
text-transform: uppercase;
padding-top: 18px;
padding-left: 10px;
}

#topnav {
padding-top: 26px;
float: right;
}
#topnav_short {
display: none;
margin: 0 -20px;
padding: 0;
font-weight: 600;
font-size: 18px;
line-height: 50px;
background-color: #000;
}
#topnav a,
#topnav_short a {
display: inline-block;
padding-left: 15px;
}
#topnav_short a {
color: #fff;
}
#topnav_short a:hover,
#topnav_short a:focus {
color: #0ABAF3;
}
#topnav_short a.active {
color: #999;
}
#xyy {
color: #0099FF;
}


#reklama {
padding: 1em 1em 2em;
text-align: center;
font-size: 21px;
font-weight: 500;
font-variant: small-caps;
color: #fff;
background: linear-gradient(0deg, #0099FF, #FFEDA4, #FF9900);
background-size: 600% 600%;
-webkit-animation: colorchange 10s ease infinite;
-moz-animation: colorchange 10s ease infinite;
-o-animation: colorchange 10s ease infinite;
animation: colorchange 10s ease infinite;
}

@-webkit-keyframes colorchange {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes colorchange {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-o-keyframes colorchange {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes colorchange {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

#reklama span {
display: inline-block;
padding: 1em 1em  0;
}
.sc {
font-weight: 600;
color: #000;
}


/*** end Head ***/











/*** Slider ***/

.sliderwrap {
position: relative;
background-color: rgba(0,198,255,0.9);
}
.slider {
position: relative;
height: 100px;
overflow: hidden; 
-ms-touch-action: pan-y; 
touch-action: pan-y; 
}

.slider div {
display: table;
width: 100%;
height: 100px;
}
.slider p {
display: table-cell;
vertical-align: middle;
height: 80px;
margin: 0;
padding: 0 30px;
font-size: 22px;
}

a.as-prev-arrow,
a.as-next-arrow {
display: block;
padding: 10px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
position: absolute;
top: 0;
z-index: 100;
}
a.as-prev-arrow {
left: 0;
}
a.as-right-arrow {
right: 0;
}

/* Slide indicator */
.as-nav {
/*display: none;*/
border-top: 1px solid #6ADEFF;
padding: 15px 30px;
}

.as-nav a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 4px -1px;
overflow: hidden;
text-indent: 100%;
font-size: 1px;
line-height: 1px;
background: url(../img/bullets.png) no-repeat;
}

a.as-active, .as-nav a:hover {
background-position: 0 -16px;
}

/*** end Slider ***/









/*** Navmain ***/

#navmain {
position: fixed;
top: 165px;
right: 0;
z-index: 100;
background-color: rgba(240,77,78,0.9);
/*background: url(../img/bg_red90.png);*/
}
#navmainswitch {
display: block;
position: fixed;
top: 165px;
right: 0;
width: 60px;
height: 60px;
background: #f04d4e url(../img/trigger2.png) no-repeat center center;
z-index: 110;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#navmainswitch.active {
background-color: #F58787;
}

#nav {
display: none;
width: 240px;
margin: 61px 0 30px;
/*border-top: 1px solid #fff;*/
}
#nav a {
display: block;
width: 240px;
padding: 15px 30px;
color: #fff;
border-bottom: 1px solid #F58787;
}
#nav a:hover/*,
#nav a:focus*/ {
color: #fff;
background-color: #F58787;
}



/*** end Navmain ***/








/*** Sections ***/


#section0 {
height: 250px;
background: url(../img/section1old_bg.jpg) no-repeat center center;
background-size: cover;
}



#section1 {
background: url(../img/section1old_bg.jpg) no-repeat center center;
background-size: cover;
color: #fff;
}
#section1 .lining {
height: 900px;
}
#section1 h1 {
margin-bottom: 30px;
text-transform: uppercase;
}
.section-content {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
}



#section2 {
/*min-height: 668px;*/
background-color: #edeef0;
}
#section2 .image-frame {
display: none;
}
#section2 .lining {
padding: 0;
}
#section2 h1 {
position: absolute;
top: 70px;
color: #8055ca;
}
#section2 .table-cell {
vertical-align: bottom;
width: 70%;
}
#section2 .table-cell:nth-of-type(1) {
padding-bottom: 30px;
}
#section2 .table-cell:nth-of-type(2) {
width: 30%;
padding-top: 30px;
}
#section2 p {
font-size: 17px;
line-height: 150%;
margin: 1em 2em 1em 0;
}







#section3 {
min-height: 780px;
background: url(../img/section3old_bg.jpg) no-repeat center top;
background-size: cover;
}
.section#section3 {
padding: 0;
}
#section3 .lining {
max-width: 1280px;
padding: 40px 0;
margin: 0 auto;
}
#section3 h1 {
color: #fff;
text-transform: uppercase;
margin: 20px 40px;
}
#section3 h2 {
font: 500 21px/21px 'Raleway';
color: #d47300;
padding: 25px 20px 20px;
margin: 0;
border-bottom: 1px solid #fff;
}
#section3 h2 a {
color: #d47300;
}
#section3 h2 a:hover {
color: #ee3c3d;
}

/*#textbox-holder {

}
*/
.textbox {
position: relative;
float: left;
width: 346px;
height: 210px;
margin: 40px;
background-color: rgba(255,255,255,0.85);
}
.textbox p {
margin: 0;
padding: 20px 20px 25px;
font-size: 17px;
}
.readmore {
position: absolute;
left: 20px;
bottom: 25px;
display: block;
width: 36px;
height: 36px;
border-radius: 18px;
background: #6D6481 url(../img/pointer1.png) no-repeat center center;
}
.readmore.prev {
background: #6D6481 url(../img/pointer2.png) no-repeat center center;
}
.readmore:hover,
.readmore:focus {
background-color: #E88000;
}
#pagenav .readmore {
display: inline-block;
position: static;
margin-right: 40px;
}
#pagenav {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ccc;
}







#section4 .lining {
padding-top: 60px;
padding-bottom: 80px;
font-size: 17px;
}
#section4 h1 {
color: #ee3c3d;
}
.usluge #section4 h1 {
color: #E88000;
margin-bottom: 1em;
}
.priclelist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 0 30px;
/*-webkit-perspective: 1;
-webkit-columns: 3 360px;
-moz-columns: 3 360px;
columns: 3 360px;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;*/
margin: 50px 0 30px;
}

.priclelist p {
margin: 0;
padding: 15px 0;
border-bottom: 1px solid #cfcfcf;
}


#section6 {
color: #615973;
background-color: #edeef0;
}
#section6 .lining {
display: flex;
align-items: center;
min-height: 200px;
/*padding: 20px 0;
background: url(../img/section6_bg.jpg) no-repeat center center;
background-size: cover;
background-clip: content-box;*/
}

#section6 p {
margin: 1em 0 0;
}

#section6 a {
font-size: 21px;
font-weight: 500;
color: #d47300;
}
#section6 a:hover {
color: #ee3c3d;
}



.album {
display: flex;
flex-flow: row wrap;
align-items: stretch;
margin: 0 -10px;
}
.album .item {
flex: 0 1 33.33%;
border: 10px solid transparent;
background-color: #eee;
background-clip: content-box;
}
h3.album_title {
font-size: 1em;
font-weight: 500;
margin: 2em 0 .75em;
max-width: 66.66%;
}
.item img {
width: 100%;
}
.album p {
margin: 0;
padding: 15px;
line-height: 140%;
}


.services {
width: 600px;
margin: 50px 0 0;
line-height: 150%;
}
/*.illustrated .services {
width: auto;
margin: 0;
padding: 0 20px;
}

.album {
display: flex;
flex-flow: row wrap;
padding: 0 20px;
}
.album div {
flex: 1 1 42%;
padding: 2%;
}
.album div p {
margin: 0;
}*/

.services h2 {
font-size: 22px;
font-weight: 500;
color: #d47300;
margin: 30px 0 20px;
}
.services h3 {
font-size: 19px;
font-weight: 500;
margin: 0 0 15px;
}

/*h3.album_title.first {
margin: 0 0 1em;
}
*/







#section5 {
min-height: 678px;
background: url(../img/section5old_bg.jpg) no-repeat center center;
background-size: cover;
color: #fff;
}
.usluge #section5 {
min-height: 428px;
background: url(../img/section5old_bg.jpg) no-repeat center center;
}
#section5 .lining {
padding-top: 0;
padding-bottom: 0;
font-size: 17px;
}
#section5 h1 {
float: left;
text-transform: uppercase;
margin-top: 70px;
}
.contact-info {
float: right;
width: 306px;
min-height: 678px;
padding: 70px 30px;
background-color: rgba(116,71,199,0.88);
}
.usluge .contact-info {
min-height: 538px;
}
.contact-info a {
color: #FFFF2B;
}
.contact-info a:hover,
.contact-info a:focus {
color: #fff;
}



.logo_bottom {
height: 60px;}
#map {
display: inline;
vertical-align: middle;
margin-right: 15px;
}

.xl {
font-size: 1.25em;
}















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


}










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

#section2 h1 {
position: static;
margin: 60px 0 40px;
}
#section2 {
padding-right: 0;
}
#section2 .table-cell:nth-of-type(1) {
padding-bottom: 40px;
width: 50%;
max-width: 340px;
vertical-align: top;
}
#section2 .table-cell:nth-of-type(2) {
width: 50%;
/*max-width: 340px;*/
background: url(../img/lidija5.jpg) no-repeat -40px bottom;
background-size: cover;
}
#section2 .table-cell:nth-of-type(2) img {
display: none;
}

}









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

#section1 .lining {
height: 600px;
}
#section1 .section-content {
position: absolute;
bottom: 40px;
left: 0;
}

}






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

#head .lining {
padding-top: 30px;
}
/*#head*/.section {
padding: 0 20px;
}
.slider p {
font-size: 20px;
}
#section3 h1 {
margin: 20px;
}
.textbox {
margin: 20px;
}
#section5, .contact-info {
min-height: 360px;
}
.section#section5 {
padding-right: 0;
}
.flex_cols {
flex-flow: row wrap;
}
h3.album_title {
max-width: none;
}

}



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

#section2 {
padding-right: 20px;
}
#section2 h1 {
margin: 0;
padding: 50px 0 30px;
}
#section2 .table,
#section2 .table-row,
#section2 .table-cell {
display: block;
width: 100%;
}
#section2 .table-cell:nth-of-type(1),
#section2 .table-cell:nth-of-type(2) {
max-width: none;
width: 100%;
/*padding: 0;*/
}
#section2 .table-cell:nth-of-type(2) {
display: none;
}
#section2 .image-frame {
display: block;
margin-bottom: 30px;
}
#section2 .image-frame img {
width: 70%;
}
#section2 p {
margin: 1em 0;
}

.services {
width: auto;
}


}







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

#section3 h1 {
color: #000;
margin: 0 20px 40px;
}
.textbox {
float: none;
width: auto;
height: auto;
margin: 20px;
padding-bottom: 25px;
}
.readmore {
position: static;
margin: 0 20px;
}
#pagenav .readmore {
margin: 0 40px 0 0;
}

.album .item {
flex: 0 1 50%;
}


}








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

#coordinates {
display: none;
}
#topnav_short {
display: block;
}
#topnav {
display: none;
}
#head {
height: auto;
}

#navmain, #navmainswitch {
top: 0;
}
#navmainswitch {
top: 0;
width: 50px;
height: 50px;
background: #f04d4e url(../img/trigger1.png) no-repeat center center;
}

.slider, .slider div {
height: 120px;
}
.slider p {
font-size: 18px;
padding: 0 15px;
}
.as-nav {
padding: 15px;
}
#section2 .image-frame img {
width: 80%;
}


}







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

#section4 .lining {
padding-bottom: 50px;
}
#section5 {
padding-left: 0;
}
#section5, .contact-info {
min-height: 0;
}
#section5 h1 {
float: none;
margin-top: 0;
padding: 40px 20px 90px;
}
.contact-info {
float: none;
width: auto;
padding: 30px 20px 50px;
}
.usluge .contact-info {
min-height: 0;

}





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

#section2 .image-frame img {
width: 100%;
}
.album .item {
flex: 1 1 auto;

}







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

#section1 .lining {
height: 300px;
}

h1 {
font-size: 38px;
line-height: 38px;
}
#section1 h1 {
padding: 15px;
margin-bottom: 1px;
background-color: rgba(0,198,255,0.9);
}

}












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

#head.section {
padding: 0 20px;
}
#head img {
height: 60px;
}

#site_title {
font-size: 24px;
line-height: 24px;
padding-top: 15px;
}

}





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

#head img {
height: 50px;
}
#site_title {
font-size: 22px;
line-height: 22px;
padding-top: 12px;
}

}



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

#topnav_short {
font-size: 16px;
}
#site_title {
font-weight: 600;
line-height: 19px;
padding-top: 12px;
}

h1 {
font-size: 34px;
line-height: 34px;
}
.slider p {
font-size: 17px;
}
#section2 p {
font-size: 16px;
}
#section3 h2 {
font-size: 19px;
line-height: 19px;
}
.textbox p, #section4 .lining {
font-size: 16px;
}

.usluge #section4 .lining {
padding: 40px 0 30px;
}
/*.section.illustrated {
padding: 0;
}*/

.services {
margin: 30px 0 15px;
}
}