@font-face {
    font-family: Ubuntu;
    src: url(../fonts/Ubuntu-R.ttf);
}

@font-face {
    font-family: Alegreya;
    src: url(../fonts/Alegreya-Regular.otf);
}

@font-face {
    font-family: Alegreya-italic;
    src: url(../fonts/Alegreya-Italic.otf);
}


body, p, h1, h2, h3, h4, h5, div, img {
    margin:0;
    padding: 0;
    border: 0;
    
}

body{
    font-family: Ubuntu, sans-serif;
    background: #FFF;
}



    
/*
     @media only screen and (orientation:landscape){
        body{
            background: white;   
        }
        
    }
    
    
     @media only screen and (orientation:portrait){
        body{
            background: green;   
        }
        
    }
*/





#wrapper{
    float:left;
}


#border_left{
    position: absolute;
    top:0;
    left:0;
    width:26px;
    height:100%;
    z-index: 10;
}

#border_left img, #border_right img{
    padding:0;
    margin:0;
    height:25px;
    width:26px;
}


/*///////////////////////////prvi prostor//////////////////////////////////////*/
#header{
    float:left;
    position: relative;
    height: 100%;
    z-index:1;
}


#header img{
    height:100%;
    width:auto;
}



#cv{
    position: absolute;
    height: 10.1%;
    top:39.72%;
    /*left:0.64%;*/
    left:2.4%;
}
#cv img{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}



#logo{
    position: absolute;
    height:28.6%;
    top:10.18%;
    left:6.4%;
    z-index:12
}
#logo img{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}



#installation{
    position: absolute;
    height:78%;
    left:30%;
    top:10%;
}

#installation img{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

#installation a{
    display: block;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
 
}


/*///////////////////////////drugi prostor//////////////////////////////////////*/
#heading{
    float:left;
    width:418px;
    padding: 0 0 0 0.3%;
}

#heading{
    margin: 0;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#heading img{
    display:block;
    padding:0 0 0px 0;
    width:100%;
    height: 0 auto;
}

#heading p{
    font-size: 1.18em;
    padding: 0 0 4% 0;
    line-height: 1.6em;
    text-align: center
}

#heading h3{
    font-size: 1.563em;
    padding:0 0 0 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 0.1em;
    color:#ec008c;
}

#heading h4{
    font-size: 1.46em;
    /*font-family: Alegreya;*/
    /*font-style: italic;*/
    padding:9px 0 8px 0;
    font-weight: normal;
    line-height: 0.9em;
    color:#ec008c;
}

#heading a{
    color:#000;
    text-decoration:none;
}

#heading span{
    font-family: Alegreya-italic;
}


#border_article_left{
    float:left;
    width:6px;
    height: 86.7%;
}

.article_border{
    width:6px;
    height: 100%;
    padding:0;
    margin:0;
    background: transparent url('../img/content_border_vertical_bottom_center.gif') repeat-y left bottom;
}
.article_border img{
    display: block;
    padding: 0;
    margin: 0;
}



/*///////////////////////////peti prostor//////////////////////////////////////*/
#plan{
    float:right;
    /*padding:0 0 0 1.2%;*/
    padding:0;
}

#plan{
    margin: 0;
    position: relative;
    bottom: 0;
    /*transform: translate(0, -50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);*/
    
}
#plan img{
    display: block;
    width:100%;
    height: auto;
    bottom: 0;
}



/* debug */

/*
#border_left{
    background:cyan;
}


#wrapper{
    background: red;   
}

#header{
    background: blue;   
}

#heading{
    background: yellow;
}

#article{
    background: purple;
}
#article p{
    background: green;
}
#aside{   
    background: pink;
}
#plan{
    background: orange;   
}
#story_footer{
    background: grey;
}

#story{
    background: #894500;   
}

#border_right{
    background-color: magenta;
}
*/




/*
@media only screen and (orientation:portrait){
        #wrapper {  
              -webkit-transform: rotate(90deg);
              -moz-transform: rotate(90deg);
              -o-transform: rotate(90deg);
              -ms-transform: rotate(90deg);
              transform: rotate(90deg);
             }

}
@media only screen and (orientation:landscape){
        #wrapper {  
              -webkit-transform: rotate(0deg);
              -moz-transform: rotate(0deg);
              -o-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              transform: rotate(0deg);
             }
}*/









/*//////////////////////////////                    1050px                                 /////////////////////////*/


@media (max-height: 1050px) {
/*    div, p, img, h1, h2, h3, h4, #wrapper, #header, #heading, #article, #aside, #plan, #story_footer, #heading img, #heading p, #heading h3, #heading h4, #article .column, #article .column p,
    #aside p, #aside h3,
    #plan img,
    #story_footer p
    {
        padding:0;
        margin:0
        
    }*/
    
    #cv{
        top:39.72%;
        left:3.6%;
    }

    #logo{
        top:10.18%;
        left:7.2%;
    }
    
    #installation{
        top:10%;
        left:30%;
    }
    
    #heading{
	width:400px; 
    }
    
    #heading img{
        display:block;
        padding:0;
        /*width:395px;*/
        height: auto;
    
    }
    
    
    

}

/*//////////////////////////////                    800                               /////////////////////////*/


@media (max-height: 800px) {   
    
    #cv{
        top:39.72%;
        left:5%;
    }

    #logo{
        top:10.18%;
        left:8%;
    }
    
    #installation{
        top:10%;
        left:30%;
    }
    
    
    
    
    #heading{
        /*width:500px;*/
        padding:0;
    }
    
    #heading img{
        display:block;
        padding:0 0 0 0;
        height: auto;
    }
    
    #heading p{
        font-size: 1.18em;
/*        padding: 0 0 20px 0;*/
    }

    #heading h3{
        font-size: 1.563em;
/*        padding:0 0 15px 0;*/
    }

    #heading h4{
        font-size: 1.375em;
/*        padding:0 0 15px 0;*/
    }
    

}




/*//////////////////////////////                    480                                  /////////////////////////*/

@media (max-height: 484px) {
    #wrapper{
        float:left;
    }


    #border_left{
        position: absolute;
        top:0;
        left:0;
        width:12px;
        height:100%;
        z-index: 10;
    }
    
    #border_left img, #border_right img{
        display: block;
        padding:0;
        margin:0;
        height:12px;
        width:12px;
    }

    
    #heading{
        /*width:330px;  */
        /*padding:0 0 0 30px;*/
    }
    
    #heading img{
        display:block;
        /*padding:0 0 35px 0;
        width:280px;*/
        height: auto;
    
    }
    
    #heading p{
       font-size: 1em;
        padding: 0 0 5px 0;
    }

    #heading h3{
        font-size: 0.875em;
        padding:0 0 3px 0;
    }

    #heading h4{
        font-size: 0.813em;
        padding:4px 0 4px 0;
    }
    
}


/*//////////////////////////////                    350                                 /////////////////////////*/



@media (max-height: 296px) {
     #heading{
        width:270px;  
        /*padding:0 0 0 30px;*/
    }
    
    #heading img{
        display:block;
        /*padding:0 0 12px 0;*/
        /*width:240px;*/
        height: auto;
    
    }
    
    #heading p{
       font-size: 0.75em;
        /*padding: 0 0 4px 0;*/
    }

    #heading h3{
        font-size: 0.875em;
        padding:0 0 4px 0;
    }

    #heading h4{
        font-size: 0.813em;
        padding:0 0 7px 0;
    }
}



/*//////////////////////////////                    280                                 /////////////////////////*/

@media (max-height: 270px) {    
    #cv{
        top:39.72%;
        left:5.6%;
    }

    #logo{
        /*top:0;*/
        left:8.4%;
    }
    
    #installation{
        top:10%;
        left:30%;
    }
    
    
    
    #heading{
        width:270px;  
        /*padding:0 0 0 30px;*/
    }
    
/*    #heading img{
        display:block;
        padding:0 0 12px 0;
        width:240px;
        height: auto;
    
    }
    
    #heading p{
       font-size: 0.75em;
        padding: 0 0 4px 0;
    }

    #heading h3{
        font-size: 0.875em;
        padding:0 0 1px 0;
    }

    #heading h4{
        font-size: 0.813em;
        padding:0 0 2px 0;
    }*/
    
    

    
    
 
/*
div.portrait_mode {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
*/




@media (max-height: 250px) {
    #heading{
        width:270px;  
        /*padding:0 0 0 30px;*/
    }
    
    #heading img{
        display:block;
        /*padding:0 0 8px 0;*/
        /*width:200px;*/
        height: auto;
    
    }
    
    #heading p{
       font-size: 0.6em;
       /*padding: 0 0 2px 0;*/
    }

    #heading h3{
        font-size: 0.8em;
        padding:0 0 1px 0;
    }

    #heading h4{
        font-size: 0.8em;
        padding:0 0 6px 0;
    }
    
}