/* Declarations */


@font-face {
    font-family: 'DINRoundPro';
    src: url('fonts/DINRoundPro/DINRoundPro.eot');
    src: url('fonts/DINRoundPro/DINRoundPro.eot?#iefix') format('embedded-opentype'),
        url('fonts/DINRoundPro/DINRoundPro.woff2') format('woff2'),
        url('fonts/DINRoundPro/DINRoundPro.woff') format('woff'),
        url('fonts/DINRoundPro/DINRoundPro.ttf') format('truetype'),
        url('fonts/DINRoundPro/DINRoundPro.svg#DINRoundPro') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINRoundPro-Light';
    src: url('fonts/DINRoundPro-Light/DINRoundPro-Light.eot');
    src: url('fonts/DINRoundPro-Light/DINRoundPro-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/DINRoundPro-Light/DINRoundPro-Light.woff2') format('woff2'),
        url('fonts/DINRoundPro-Light/DINRoundPro-Light.woff') format('woff'),
        url('fonts/DINRoundPro-Light/DINRoundPro-Light.ttf') format('truetype'),
        url('fonts/DINRoundPro-Light/DINRoundPro-Light.svg#DINRoundPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    background: white;
    font: 17px "DINRoundPro", Helvetica, Arial, sans-serif;
    text-align: justify;
    margin: 0px;
    padding: 0px;	
}

a {
    text-decoration: none;
    color:inherit;
} 

a, img {
    border: none;
    outline: none
}


/*http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header*/
a.anchor{
    display: block; 
    position: relative; 
    /*top: -46px; */
    visibility: hidden;
}

h2{
    text-align: left;
}

.clear{
    clear: both;
}
/* !Declarations */

/* Page */
.page {
    background: white;
    margin: 0px auto;
    width: 1024px;
    position: relative;
}
/* !Page */

/* Menu */
#menu-container{
    background-color: rgb(159, 47, 153);
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 100;    
}

#menu{
    height: 46px;
    font-size: 14px;
    text-align: center;
    font-family: "DINRoundPro";
    position: relative;
      top: 102px;		
}

#menu ul {
    height: auto;
    padding: 13px 20px;    
    float: right;
}

#menu li { 
    display: inline; 
    padding: 4px;
}

#menu a {
    color: rgb(159, 47, 153);
    border-bottom: 1px solid transparent;
    transition: all 0.6s;
}

#menu a:hover {
    /* text-decoration: underline; */
    border-bottom: 1px solid rgb(159, 47, 153);

}
/* !Menu */

/* Brand banner*/

#header-wrapper{
    position: relative;    
}

#brand-banner{
    background-color: white;
    position: fixed;	
    min-width: 100%;
    top: 40px;
    z-index: 80;
}


#brand-banner-blue{	
    height: 196px;	
    position: relative;
    margin: 0px auto;
    width: 1024px;

}

#brand-banner-claim{
    /*color: rgb(159, 47, 153);
    font-size: 14px;
    width: 60px;
    position: absolute;
    top: 97px;
    left: 202px;  
    text-align: left;
    font-weight: bold; */

    color: rgb(159, 47, 153);
    font-size: 20px;
    width: 170px;
    position: absolute;
    top: 106px;
    left: 211px;
    line-height: 1;
    text-align: left;
}

#brand-banner-claim-2{    
    color: rgb(159, 47, 153);
    font-size: 16px;
    width: 301px;
    position: absolute;    
    top: 126px;
    left: 334px;
    line-height: 1.3;
    text-align: left;    
}


#brand-banner-logo{
    position: absolute;
    top: 37px;
    left: 138px;
    
    background-image: url(img/dpu-logo-main_2.png); 
    height: 89px;
    width: 65px;
    background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
    #brand-banner-logo{
        background-image: url(img/dpu-logo-main_2_2x.png); 
        background-size: 65px 89px;        
    }
}


.header-navratnost:hover{
    text-decoration: underline;
}

.zobacek{
    position: absolute;	
    top: 141px;
    left: 815px;
}

#image-photo-holder{
    padding-top: 235px;
    text-align: center;
}

#icon-photo-holder{
    width: 1024px;
    margin: 0px auto;
    z-index: 10;
    position: relative;
    z-index: 40;
}

#icon-photo-holder img{
    position: absolute;
    left: 208px;	
}

#icon-photo-holder div{
    position: absolute;
    color: rgb(255, 255, 255);
}

#header-icon-pos{
    top: 50px;    
}

#header-text-pos{
    left: 131px;
    top: 200px;
    text-align: center;
    font-size: 18px;
}
.header-text-pos2{
    top: 217px;
    left: 592px;
    font-size: 18px;
    text-align: left;
}

.header-img{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 325px;
    background-repeat: no-repeat;
    background-position: center center;
}

#img1{background-image: url(img/banner-hp-1.jpg);}

.header-orb{
    width: 144px;
    height: 144px;
    -webkit-border-radius: 72px;
    -moz-border-radius: 72px;
    border-radius: 72px;
    background-color: rgb(51, 204, 204);
    display: none;

}

.header-orb-text{
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 32px;
}

#evb-text-1{
    left: 444px;
    top: 132px;
}

#evb-text-2{
    top: 20px;
    left: 724px;
}

#evb-text-3{
    top: 157px;
    left: 619px;
}

/* !Brand banner*/

/*  Content boxes */

.content-holder{
    margin-left: 120px;
    margin-right: 120px;
    color: rgb(159, 47, 153);
    display: inline-block;
}

.strong{
    font-weight: bold;
}

.pause5{height: 5px;}
.pause33{height: 33px;}
.pause40{height: 40px;}
.pause66{height: 66px;}
.pause70{height: 70px;}
.pause80{height: 80px;}
.pause100{height: 100px;}
.pause110{height: 110px;}

.f11{font-size: 11px;}
.f14{font-size: 14px;}
.f16{font-size: 16px;}
.f18{font-size: 18px;}
.f22{font-size: 22px;}
.f28{font-size: 28px;}

.bold{
    /* font-family: "AvenirNextBold"; */
    font-weight: bold;
}

.left-box{
    float: left;
    width: 370px;
    margin-right: 41px;
}

.right-box{
    float: right;
    width: 370px;

}

.middle-box{
    text-align: center;
    width: 380px;
    margin: 0px auto;
}

.middle-box-full{    
    text-align: center;
    width: 100%;
}

.middle-box h2{
    text-align: center;
}

.content-holder h2{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 26px;
}

.green-bg{background-color: rgb(195, 231, 0);}
.green-gr{background-color: rgb(242, 242, 242);}
.bg-violet{background-color: rgb(153, 51, 153);}

#proces-revitalizace-vis{
    height: 737px;
}

.process{
    margin-right: 110px;
    margin-bottom: 20px;
    padding-left: 140px;
    background-repeat: no-repeat;
    background-position: 65px center;
    display: none;
}

.icon-1{background-image: url(img/icon-1.png);}
.icon-2{background-image: url(img/icon-2.png); min-height: 52px;}
.icon-3{background-image: url(img/icon-3.png);}
.icon-4{background-image: url(img/icon-4.png);}



.zobacek2{
    position: relative;
    top: 200px;
    left: 694px;
    z-index: 10;
}

.o-dpu-revit{
    margin-left: 120px;
    margin-top: 31px;
}

#icon-navratnost{
    height: 130px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(img/icon-navratnost.png);	
    background-position: center center;
    margin-top: 26px;
}

.navratnost-holder{
    width: 200px;
    margin: 0px auto;
    text-align: center;    
    left: -10px;
    position: relative;
    font-size: 18px;
}

.navratnost{	
    margin-top:  20px;
}

.navratnost:hover{	
    text-decoration: underline;
}

#icon-dpu-revit{
    float: right;
    margin-right: 55px;        
}

#icon-dum-plny-uspor{
    margin-left: 50px;
}

.contact-box{
    text-align: center;
    color: rgb(77, 77, 77);
    margin-top: 26px;
}

.icon{
    overflow: hidden;
    background-repeat: no-repeat;
}

.icon-info{
    background-image: url(img/icon-info.png);
    background-position: center center;
    height: 80px;
}

.icon-head{
    background-image: url(img/icon-head.png);
    background-position: center center; 
    height: 80px;
}

.middle-text-block{
    margin: 0 181px;
}

.underline_hover {
  transition: all 0.6s;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.underline_hover:hover{	
    border-bottom: 1px solid rgb(159, 47, 153);
}

/*  !Content boxes */
/* FAQ */
.faq-gray{    
    height: 535px;
    margin-top: 22px;
}

.faq{
    font-size: 22px;
    text-align: left;
    color: rgb(0, 153, 133);
}

.faq li{
    padding-top: 22px;    
}

.faq li:hover{
    text-decoration: underline;
    cursor: pointer;
    color: rgb(159, 47, 153);
}

.faq-active{
    text-decoration: underline;
    color: rgb(159, 47, 153);
}


.faq-reply{
    color: rgb(159, 47, 153);
    background: rgb(239, 239, 239);
    padding: 22px;    
    text-align: left;
    width: 253px;
    height: 401px;
}

.faq-reply p{
    margin-top: 0px;
}

.faq-question{
    font-size: 22px;
    text-align: left;	
}

.faq-top{
    position: relative;
    top: 6px;
}

.faq-bottom{
    position: relative;
    top: -5px;
}
/* !FAQ*/
/* Contact form */

#mycontactform{
    width: 330px;
    margin-left: 14px;
    margin-top: 26px;
}

#mycontactform label{
    font-size: 16px;
}

#mycontactform input[type="text"], textarea{
    width: 100%;
    border: none;
    background: rgb(242, 242, 242);
    color: rgb(159, 47, 153);
    height: 30px;
    padding-left: 12px;
    width: 331px;
    margin-top: 5px;
    margin-bottom: 15px;
}

#mycontactform textarea{
    height: 100px;
    padding-top: 12px;
    width: 328px;
}

#mycontactform input[type="button"]{
    outline: 0;
    background: none;
    border: 0;
    float: right;    
    color: rgb(0, 0, 0);
    font-size: 16px;
    border-bottom: 1px rgb(0, 0, 0) solid;
    padding: 0px;
    margin-top: 15px;
    transition: all 0.4s;
}

#mycontactform input[type="button"]:hover{
    color: rgb(159, 47, 153);
    border-bottom-color: rgb(159, 47, 153);
}

.mail-hlaska{
    margin-top: 15px;
    font-size: 16px
}

#mail-ok{
    color: rgb(159, 47, 153);
    font-weight: bold;
}

/* !Contact form */

/* Schema */
.schema-h2 h2{
    color: rgb(51, 204, 204); 
    font-size: 35px; 
    font-weight: normal;
}

.schema-1-h{
    height: 270px;
    width: 750px;       
    margin: 0 auto;    
    position: relative;
    left: -53px;
}

.schema-2-h{
    height: 600px;
    width: 540px;       
    margin: 0 auto;    
    position: relative;

}

.schema-3-h{
    height: 600px;
    width: 660px;       
    margin: 0px 67px;   
    position: relative;    
}

.s-icon{
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute
}
.schema-kolecko{
    background-image: url(img/schema1/kolecko.png);
    top: 60px;
    left: 348px;
    width: 161px;
    height: 161px;
} 

.schema-sipka{
    background-image: url(img/schema1/sipka.png);
    top: 105px;
    left: 385px;
    width: 85px;
    height: 72px;
}

.animuj-schema{
    display: none;
}

.animuj-schema2{
    /*display: none;*/
    opacity: 0;
}

.animuj-schema3{
    /*display: none;*/
    opacity: 0;
}

.s1{
    background-image: url(img/schema1/1.png);
    top: 13px;
    left: 465px;
    width: 282px;
    height: 85px;
}

.s2{
    background-image: url(img/schema1/2.png);
    top: 127px;
    left: 493px;
    width: 198px;
    height: 31px;
}

.s3{
    background-image: url(img/schema1/3.png);
    top: 187px;
    left: 465px;
    width: 270px;
    height: 78px;
}

.s4{
    background-image: url(img/schema1/4.png);
    top: 187px;
    left: 225px;
    width: 169px;
    height: 60px;
}

.s5{
    background-image: url(img/schema1/5.png);
    top: 111px;
    left: -5px;
    width: 369px;
    height: 61px;
}

.s6{
    background-image: url(img/schema1/6.png);
    top: 9px;
    left: 99px;
    width: 294px;
    height: 84px;
}

.schema-2-icon{
    background-image: url(img/schema2/icon.png);
    top: 202px;
    left: 218px;
    width: 104px;
    height: 142px;
}

.s2-1{    
    background-image: url(img/schema2/1.png);
    top: 26px;
    left: 320px;
    width: 179px;
    height: 180px;
}

.s2-2{    
    background-image: url(img/schema2/2.png);
    top: 196px;
    left: 331px;
    width: 221px;
    height: 147px;
}

.s2-3{    
    background-image: url(img/schema2/3.png);
    top: 341px;
    left: 332px;
    width: 169px;
    height: 176px;
}

.s2-4{    
    background-image: url(img/schema2/4.png);
    top: 332px;
    left: 29px;
    width: 172px;
    height: 180px;
}

.s2-5{    
    background-image: url(img/schema2/5.png);
    top: 180px;
    left: -31px;
    width: 231px;
    height: 147px;
}

.s2-6{    
    background-image: url(img/schema2/6.png);
    top: 14px;
    left: 54px;
    width: 159px;
    height: 186px;
}

.s3-1{    
    background-image: url(img/schema3/1.png);
    top: 10px;
    left: 67px;
    width: 258px;
    height: 123px;
}

.s3-2{
    top: 85px;
    left: 350px;
    width: 154px;
    height: 89px;
    background-image: url(img/schema3/2.png);
}

.s3-3{    
    top: 161px;
    left: 94px;
    width: 231px;
    height: 93px;
    background-image: url(img/schema3/3.png);
}

.s3-4{
    top: 236px;
    left: 350px;
    width: 198px;
    height: 89px;
    background-image: url(img/schema3/4.png);
}

.s3-5{
    top: 312px;
    left: 10px;
    width: 316px;
    height: 120px;
    background-image: url(img/schema3/5.png);
}

.s3-6{
    top: 387px;
    left: 350px;
    width: 242px;
    height: 134px;
    background-image: url(img/schema3/6.png);
}


.lomitko1{
    top: 70px;
    left: 325px;
    width: 23px;
    height: 20px;
    background-image: url(img/schema3/lomitko.png);
}

.lomitko2{
    top: 147px;
    left: 325px;
    width: 23px;
    height: 20px;
    background-image: url(img/schema3/lomitko_back.png);    
}

.lomitko3{
    top: 223px;
    left: 325px;
    width: 23px;
    height: 20px;
    background-image: url(img/schema3/lomitko.png);
}

.lomitko4{
    top: 300px;
    left: 325px;
    width: 23px;
    height: 20px;
    background-image: url(img/schema3/lomitko_back.png);    
}

.lomitko5{
    top: 373px;
    left: 325px;
    width: 23px;
    height: 20px;
    background-image: url(img/schema3/lomitko.png);
}


.schema2-orb{
    border: 1px solid rgb(0, 153, 153);
    color: rgb(0, 153, 153);
    /* display: none; */
    left: 33px;
    position: absolute;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}

.schema2-orb-big{
    width: 144px;
    height: 144px;
    -webkit-border-radius: 72px;
    -moz-border-radius: 72px;
    border-radius: 72px;
}

.schema2-orb-small{
    width: 114px;
    height: 114px;
    -webkit-border-radius: 56px;
    -moz-border-radius: 56px;
    border-radius: 56px;
}

.schema2-orb-text{    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 32px;
}

/* _ANIMACE */
@-webkit-keyframes pulse {
    0% {-webkit-transform: scale(0, 0);}
70% {-webkit-transform: scale(1.1, 1.1);}
100% {-webkit-transform: scale(1, 1);}
}

@keyframes pulse {
    0% {transform: scale(0, 0);}
70% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}

.show_1s {
    -webkit-animation: pulse 800ms linear;
    animation: pulse 800ms linear;
    opacity: 1;
}
/* !!ANIMACE */
/* !Schema */

/*Fialové tabulky*/

.tables-h{
    position: relative;
    width: 750px;
    height: 620px;
}

.table1{
    left: 430px;
    top: 100px;    
    position: absolute;
}

.table-label{
    position: absolute;
    font-size: 24px;
    color: rgb(255, 255, 255);
    background-repeat: no-repeat;
    background-position: center bottom;

}

.table-label1{
    left: 175px;
    top: 121px;
    background-image: url(img/table2-icon.png);
    height: 92px;
}

.table-label2{
    left: 175px;
    top: 360px;
    background-image: url(img/table2-icon2.png);
    height: 92px;
}



.table2{
    left: 462px;
    top: 315px;    
    position: absolute;
}



.white-table{
    color: white;
    font-size: 15px;  
    Border-collapse: collapse;
}

.white-table td{
    border: 2px solid white;
    padding: 5px;    
}

.top-none{border-top: none !important;}    
.left-none{border-left: none !important;}    
.right-none{border-right: none !important;}    
.bottom-none{border-bottom: none !important;}    

.t-left{text-align: left;}
.t-center{text-align: center;}
.t-right{text-align: right;}

.va-top{vertical-align: top;}

/*!Fialové tabulky*/

/*Footer*/
.width-img{
    max-width: 100%;
    min-width: 1024px;
}

#footer-holder{
    background: rgb(235, 235, 235);
    margin: 0px;
    padding: 0px;
    position: relative;
}

#footer{
    background: rgb(235, 235, 235);
    height: 450px;
    width: 1024px;
    margin: 0px auto;
}

#footer-menu{
    color: rgb(51, 51, 51);
    font-size: 14px;
    font-family: "DINRoundPro"; 
    margin-top: 87px
}

#footer-menu ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

#footer-menu li { 
    padding-bottom: 5px;
}

#footer-menu a {
    border-bottom: 1px solid transparent;
    transition: all 0.6s;
}

#footer-menu a:hover {
    /* text-decoration: underline;*/
    border-bottom: 1px solid rgb(51, 51, 51);
}

.footer-menu-title{
    font-size: 18px;
    margin-bottom: 22px;
}

#dpu-logo{
    position: relative;
    top: 50px;
    left: 125px;
}

#cc {
    font-family: "DINRoundPro";
    font-size: 12px;
    position: relative;
    top: 80px;
    left: 127px;
    width: 259px;
}
/*!Footer*/

/*Slideshow-photo*/

.slideshow-photo {
    width: 794px; 
    height: 400px;
    overflow-x: scroll; 
    overflow-y: hidden;	
    position: relative;
}

.slideshow-photo ul {
    width: 6120px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left:0;
    top:0
}

.slideshow-photo ul li {
    float: left;
}


.slide-photo{
    width: 315px;
    height: 400px;
    position: relative;
    color: rgb(159, 47, 153);
    text-align: left;
    margin-left: 40px;
    margin-right: 40px;
}

.ref-h{
    font-size: 20px;
    margin-top: 8px;
}

.ref-t{    
    margin-top: 16px;
}
.nav-bocni-ref{
    height: 404px;
    width: 110px;    
    position: absolute;
    top: 0px;

    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(img/pribeh/navigace-sipka.png); 
    cursor: pointer;
    top: 44px; 
    background-image: url(img/navigace-sipka.png);
}

.nav-forward{
    left: 914px;
}

.nav-backward{
    left: 0px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
/*!Slidehow-photo*/

/*slideshow-header*/

.slideshow-header {
    width: 1024px; 
    height: 400px;
    overflow-x: scroll; 
    overflow-y: hidden;	
    position: relative;
}

.slideshow-header ul {
    width: 8192px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left:0;
    top:0
}

.slideshow-header ul li {
    float: left;
}


.slide-header{
    width: 1024px;
    height: 400px;
    position: relative;    
    background: rgb(48, 207, 188);

}

.slider-main-text{   
    position: absolute;
    left: 611px;
    top: 88px;
    width: 300px;
    font-size: 29px;
    color: rgb(159, 47, 153);
    text-align: left;
}

.main-text-sub{
    margin-top: 20px;
    font-size: 20px;
}

.slider-button{
    font-size: 14px;
    border: 1px rgb(159, 47, 153) solid;
    padding: 8px;
    position: absolute;
    left: 611px;
    top: 315px;
    color: rgb(159, 47, 153);
}


.slider-button:hover {
    color: white;
    background-color: rgb(159, 47, 153)
}

/*!Slidehow-header*/

/*slideshow-napsali*/


.slideshow-napsali {
    width: 794px; 
    /*height: 400px;*/
    height: 200px;
    overflow-x: scroll; 
    overflow-y: hidden;	
    position: relative;
    font-size: 15px;
}

.slideshow-napsali ul {
    width: 5200px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left:0;
    top:0
}

.slideshow-napsali ul li {
    float: left;
    width: 380px;
    margin-right: 32px;
}

.slideshow-napsali ul li a {
    float: left;
    width: 380px;
    height: 123px;
    border-bottom: 1px solid black;
    margin-top: 23px;
    padding-bottom: 10px;

}

.napsali-date{

    color: rgb(153,153,153);
    margin-bottom: 20px;
}

.napsali-text{
    margin-bottom: 10px;
    color: rgb(153,153,153);
}

.napsali-link{
    float: right;    
    color: black;
}


/*!Slidehow-napsali*/

/* footer loga*/
.logo-tile{
    float: left;
    height: 80px;  
    margin-right: 8%;
}
.logo-tile-ws{
    width: 60px;
}
.logo-tile-wl{
    width: 160px;
}
.last{
    margin-right: 0px;
}
/* !footer loga*/

.cookie-notice
{
    font-size: 15px;

    line-height: 30px;
    padding: 10px 5px;

    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;

    display: none;

    width: 100%;

    text-align: center;

    color: #fff;
    background: rgb(159, 47, 153);
}

.cookie-notice button
{
    display: inline-block;

    margin-left: 10px;
    padding: 0 15px;

    color: rgb(159, 47, 153);
    background: #fff;
    line-height: 30px;
    border: none;
    cursor: pointer;
    vertical-align: top;
    font-size: 15px;
    font-family: 'DINRoundPro';
}

.cookie-notice button:hover {
    text-decoration: underline;
}