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

@font-face {
    font-family: Alegreya;
    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%;
}
#logo img{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}



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

#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:500px;
    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 10px 0;
    width:85%;
    height: auto;
}

#heading p{
    font-size: 1.18em;
    padding: 0 0 0 0;
    line-height: 1.6em
}

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

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

#heading span{
    font-family: Alegreya, serif;
}


#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:left;
    padding:0 0 0 1.2%;
}

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



/* 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.2%;
        left:30%;
    }
    
    #heading{
/*        width:432px;   */
    }
    
    #heading img{
        display:block;
        padding:0 0 46px 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.2%;
        left:30%;
    }
    
    
    
    
    #heading{
        width:500px;
        padding:0;
    }
    
    #heading img{
        display:block;
        padding:0 0 46px 0;
        width:327px;
        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: 0.75em;
        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:10.18%;
        left:8.4%;
    }
    
    #installation{
        top:10.2%;
        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;
    }
    
}