@font-face {
	font-family: AndulkaSansLight;
	src: url('../Fonts/AndulkaSansLight.otf') format('opentype');
}
@font-face {
    font-family: AndulkaSansBookBold;
    src: url("../Fonts/AndulkaSansBookBold.otf");
}


html,
        body {
            margin: 0;
            padding: 0;
            color: #000;
            background-color: #282828;
        }
        .text_header {
            color: #787777;
        }
        a{
            text-decoration: none;
            /*color:black;*/
            color:#787777;
        }
        
        .header_a{
            color: #787777;
        }
        

        .title_red {
            color: #f03434;
            font-size: 19pt;
            font-family: AndulkaSansBookBold;
        }
        .title_standard {
            font-family: AndulkaSansLight;
        }
        .tile1 {
            font-family: AndulkaSansLight;
            font-size: 18pt;
            color: white;
            position: relative;
            top: 130px;
            left: 10px;
        }
@media screen and (max-width: 1024px) {
    .tile1 {
            font-family: AndulkaSansLight;
            font-size: 16pt;
            color: white;
            position: relative;
            top: 140px;
            left: 10px;
        }
}

        .tile2 {
            font-family: AndulkaSansLight;
            font-size: 18pt;
            color: white;
            position: relative;
            top: 100px;
            left: 10px;
        }
@media screen and (max-width: 1024px) {
    .tile2 {
            font-family: AndulkaSansLight;
            font-size: 16pt;
            color: white;
            position: relative;
            top: 110px;
            left: 10px;
        }
}

        .tile3 {
            font-family: AndulkaSansLight;
            font-size: 18pt;
            color: white;
            position: relative;
            top: 60px;
            left: 10px;
        }
@media screen and (max-width: 1024px) {
    .tile3 {
            font-family: AndulkaSansLight;
            font-size: 16pt;
            color: white;
            position: relative;
            top: 60px;
            left: 10px;
        }
}
        .tile4 {
            font-family: AndulkaSansLight;
            font-size: 18pt;
            color: white;
            position: relative;
            top: 70px;
            left: 10px;
        }
@media screen and (max-width: 1024px) {
     .tile4 {
            font-family: AndulkaSansLight;
            font-size: 16pt;
            color: white;
            position: relative;
            top: 70px;
            left: 10px;
        }
}

        .tile_center {
            font-family: AndulkaSansLight;
            font-size: 18pt;
            color: white;
            position: relative;
            top: 160px;
            left: 10px;
        }

        .tile_right {
            font-family: AndulkaSansLight;
            font-size: 14pt;
            color: white;
            position: relative;           
            /*left: 10px;*/
            top: 10px;
        }

@media screen and (max-width: 1024px) {
    .tile_right {
            font-family: AndulkaSansLight;
            font-size: 8pt;
            color: white;
            position: relative;           
            left: 5px;
            top: 10px;
        }
}

        #body {
            width: 1400px;
            height: 100%;
            margin: 0 auto;
            background: #fff;
        }

        @media screen and (max-width: 1024px)
        {
            #body {
                width: 768px;
                height: 100%;
                margin: 0 auto;
                background: #fff;
            }
        }

        #header {
            
            background: #fff;
            height: 180px;
        }
        #header_top {
            background-image: url("../Images/header_bg.png");
            height: 70px;
            margin: 0 auto;
            padding: 0 auto;
        }
        #header_lang {
            color: #787777;
            float: right;
            margin-right: 100px;
            margin-top: 28px;
            font-family: Calibri;
            font-size: 18pt;
            position:relative;
        }
@media screen and (max-width: 1024px) {
     #header_lang {
            color: #787777;
            float: right;
            margin-right:20px;
            margin-top: 28px;
            font-family: Calibri;
            font-size: 14pt;
            position:relative;
        }
}
        #header_logo {
            background-image: url("../Images/logo.png");
            background-repeat: no-repeat;
            height: 123px;
            /*display: block;*/
            position: relative;
            left: 110px;
            width:300px;
            top: -70px;      
            
        }

@media screen and (max-width: 1024px) {
    #header_logo {
         background-image: url("../Images/logo.png");
            background-repeat: no-repeat;
            height: 123px;
            /*display: block;*/
            position: relative;
            left: 10px;
            width:300px;
            top: -70px;  
    }
}

        #header_slogan {
            float: right;
            position: relative;
            width: 780px;
            margin-right: 110px;
            margin-top: -100px;
            font-family: Calibri;
        }

@media screen and (max-width: 1024px) {
    #header_slogan {
            float: right;
            position: relative;
            width: 710px;
            margin-right: 20px;
            margin-top: -60px;
            font-family: Calibri;
        }
}

        #content-1 {
            float: left;
            width: 330px;
        }

@media screen and (max-width: 1024px) {
    #content-1 {
            float: left;
            width: 230px;
        }
}
        #content-1_tile1 {
            background-image: url("../Images/tile1.png");
            background-repeat: no-repeat;
            height: 170px;
            left: 100px;
            top: -20px;
            position: relative;
            padding: 2px;
        }


@media screen and (max-width: 1024px) {
    #content-1_tile1 {
            background-image: url("../Images/tile1.png");
            background-repeat: no-repeat;
            height: 170px;
            left: 10px;
            top: 20px;
            position: relative;
            padding: 2px;
            width:200px;
        }
}

        #content-1_tile2 {
            background-image: url("../Images/tile2.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 100px;
            /*top: -20px;*/
            position: relative;
            padding: 2px;
        }

@media screen and (max-width: 1024px) {
     #content-1_tile2 {
            background-image: url("../Images/tile2.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 10px;
            top: 30px;
            position: relative;
             width:200px;
        }
}
        #content-1_tile3 {
            background-image: url("../Images/tile1_2.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 100px;
            /*top: -20px;*/
            position: relative;
            padding: 2px;
        }

@media screen and (max-width: 1024px) {
    #content-1_tile3 {
            background-image: url("../Images/tile1_2.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 10px;
            top: 35px;
            position: relative;
             width:200px;
        }
}

        #content-1_tile4 {
            background-image: url("../Images/tile1_3.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 100px;
            /*top: -20px;*/
            position: relative;
            padding: 2px;
        }

@media screen and (max-width: 1024px) {
    #content-1_tile4 {
            background-image: url("../Images/tile1_3.png");
            background-repeat: no-repeat;
            height: 155px;
            left: 10px;
            top: 35px;
            position: relative;
            width:200px;
        }
}

        #content-2 {
            float: right;
            width: 954px;
        }

@media screen and (max-width: 1024px) {
     #content-2 {
            float: right;
            width: 530px;
            
        }
}

        #content-2-1 {
            float: left;
            width: 508px;
            padding: 10px;
            
        }

@media screen and (max-width: 1024px) {
        #content-2-1 {
            float: left;
            width: 350px;
            padding: 10px;
           
            
        }
}

        #content-2-1_tile1 {
            background-image: url("../Images/meteo.png");
            background-repeat: no-repeat;
            position: relative;
            height: 207px;
            width: 508px;
            right: 15px;
        }
@media screen and (max-width: 1024px) {
    #content-2-1_tile1 {
            background-image: url("../Images/meteo.png");
            background-repeat: no-repeat;
            position: relative;
            height: 207px;
            width: 340px;
            right: 20px;
            top:38px;
        }
}
        #content-2-1_tile2 {
            background-image: url("../Images/Monitoring.png");
            background-repeat: no-repeat;
            position: relative;
            height: 215px;
            width: 508px;
            right: 15px;
        }
@media screen and (max-width: 1024px) {
    #content-2-1_tile2 {
            background-image: url("../Images/Monitoring.png");
            background-repeat: no-repeat;
            position: relative;
            height: 207px;
            width: 340px;
            right: 20px;
            top:38px;
        }
}
        #content-2-1_tile3 {
            background-image: url("../Images/AplikaceRodos.png");
            background-repeat: no-repeat;
            position: relative;
            height: 215px;
            width: 508px;
            right: 15px;
            top: 6px;
        }

@media screen and (max-width: 1024px) {
    #content-2-1_tile3 {
            background-image: url("../Images/AplikaceRodos.png");
            background-repeat: no-repeat;
            position: relative;
            height: 207px;
            width: 340px;
            right: 20px;
            top:48px;
        }
}

        #content-2-2 {
            float: right;
            width: 330px;
            padding: 10px;
           right:100px;

        }

@media screen and (max-width: 1024px) {
     #content-2-2 {
            float: right;
            width: 135px;
           
        }

      
}

.content-dyn-text {
            
            font-family:AndulkaSansLight;
            font-size:11pt; 
            text-align:left;  

            /*max-width:290px; */        
            /*padding:10px;*/
            margin:0px;
            position:relative;
            top:20px;      
                         
        }

.content-dyn{
    display:none;
    /*min-height:640px; */  
    height:640px;
    overflow:hidden;
    position:relative;
    z-index:99;
    background-repeat:no-repeat;
    right:100px;
}

        #content-2-2-text {
            
            font-family:AndulkaSansLight;
            font-size:11pt; 
            text-align:left;  

            /*max-width:290px; */        
            /*padding:10px;*/
            margin:0px;
            position:relative;
            top:20px;
            
           
        }
@media screen and (max-width: 1024px) {
     #content-2-2-text {
            font-family:AndulkaSansLight;
            font-size:8pt;            
            /*padding:10px;*/
            margin:0px;
            position:relative;
            top:20px;
           
        }
}
        #content-2-2_title{
            left:10px;
            position:relative
        }

        #content-2-2_tile1 {
            background-image: url("../Images/tile_3_large.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 330px;
            right: 100px;
            z-index:1;
        }
@media screen and (max-width: 1024px) {
    #content-2-2_tile1 {
            background-image: url("../Images/tile_3_large.png");
            background-repeat: no-repeat;
            position: relative;
            min-height: 154px;
            width: 180px;
            right: 40px;
            top:40px;
            z-index:-1;
        }
}
        #content-2-2_tile2 {
             background-image: url("../Images/tile_3_2_large.png");
            /*background-repeat: no-repeat;*/
            position: relative;
            height:154px;
            /*height: 154px;*/
            width: 330px;
            right: 100px;
            top: 7px;
             z-index:1;
        }
@media screen and (max-width: 1024px) {
    #content-2-2_tile2 {
            background-image: url("../Images/tile_3_2_large.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 180px;
            right: 40px;
            top:44px;
        }
}

        #content-2-2_tile3 {
            background-image: url("../Images/tile_3_3.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 330px;
            right: 100px;
            top: 14px;
        }
@media screen and (max-width: 1024px) {
    #content-2-2_tile3 {
            background-image: url("../Images/tile_3_3.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 180px;
           right: 40px;
            top:50px;
        }
}

        #content-2-2_tile4 {
            background-image: url("../Images/tile_3_4_large.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 330px;
            right: 100px;
            top: 20px;
        }
@media screen and (max-width: 1024px) {
    #content-2-2_tile4 {
            background-image: url("../Images/tile_3_4_large.png");
            background-repeat: no-repeat;
            position: relative;
            height: 154px;
            width: 180px;
            right: 40px;
            top:55px;
        }
}
       #empty{
           height:50px;
       }

        #footer {
            
            height: 215px;
            background-image: url("../Images/footer_bg.png");
            background-repeat: repeat-x;
        }

        #footer_contact {
            font-family: Calibri;
            font-size: 8pt;
            color: #4b4b4c;
            position: relative;
            float: left;
            left: 100px;
            top: 64px;
        }
@media screen and (max-width: 1024px) {
     #footer_contact {
            font-family: Calibri;
            font-size: 8pt;
            color: #4b4b4c;
            position: relative;
            float: left;
            left: 10px;
            top: 64px;
        }
}

        #footer_copy {
            
            position: relative;
            float: right;                       
            right: 100px;
        }
@media screen and (max-width: 1024px) {
     #footer_copy {
            
            position: relative;
            float: right;                       
            right: 20px;
        }
}
        #copy {
            font-family: Calibri;
            font-size: 8pt;
            color: #4b4b4c;
            position: relative;
            padding: 50px;
            float: left;
            top: 34px;
        }
@media screen and (max-width: 1024px) {
    #copy {
            font-family: Calibri;
            font-size: 8pt;
            color: #4b4b4c;
            position: relative;
           
            float: left;
            top: -60px;
        }
}
        #copy_logo {
            width: 180px;
            position: relative;
            float: right;
            top: 64px;
        }
@media screen and (max-width: 1024px) {
    #copy_logo {
            width: 180px;
            position: relative;
            float: right;
            top: -30px;
        }
}
        /* Easy clearing of floats (see http://positioniseverything.net/easyclearing.html) */
        .cf:after {
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
            content: " ";
            font-size: 0;
        }
        /* Does not validate – use conditional comments for this bit if you want valid CSS */
        .cf {
            *zoom: 1;
        }