*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    //outline:1px solid red;
}

body{
    font-family: "Open Sans";
    font-weight: 500;
    font-size:14px;
    text-align:center;
    color: #777;
    background-color: #000;
}


/****HEADER****/
#main-header .jumbotron{
    background: #fff;
    height: 300px;
}

#main-header .jumbotron .container{
    position:relative;
    right:5%;
}

    nav#main{
        position:relative;
        bottom:70px;
    }

    nav#main li{
            display:inline;
    }

    nav#main a{
        font-size: 22px;
        padding: 12px;
        color:inherit;
        transition:color 0.2s ease-in,font-size 0.4s ease-in;
    }

    nav#main a:hover{
        text-decoration: none;
        color:#220000;
        font-size:23px;
    }

    nav#main a#active{
        text-decoration: none;
        color:#220000;
        font-size:23px;
    }
    nav#main-mobile{
        display: none;
    }


/****MAIN-CONTENT****/

nav#genres{
    padding-left:8%;
    text-align: left;
    position: relative;
    bottom: 50px;
}

nav#genres a{
    color:inherit;
    font-size:13px;
    transition:color 0.2s ease-out;
}

nav#genres a:hover{
    text-decoration:none;
    color:#220000;
}

nav#genres a#active-genre{
    text-decoration:none;
    color:#220000;
}

.cell{
    float:left;
    width:310px;
    height:175px;
}
    

.cell_content{
        position:absolute;
        width:310px;
        z-index:0;
        height:175px;
}
#content_autumn{
	background: url('../images/autumn_in_subotica.jpg') no-repeat;
}
#content_oh_dear{
	background: url('../images/oh_dear.jpg') no-repeat;
}
#content_the_man{
    background: url('../images/the_man.jpg') no-repeat;
}
#content_tron{
    background: url('../images/tron.jpg') no-repeat;
}
#content_all_rounder{
    background: url('../images/all_rounder.jpg') no-repeat;
}
#content_exodus{
    background: url('../images/exodus.jpg') no-repeat;
}
#content_izotopi{
    background: url('../images/izotopi.png') no-repeat;
}
#content_hedonist{
    background: url('../images/hedonisti.jpg') no-repeat;
}
#content_speed_matters{
    background: url('../images/speed_matters.jpg') no-repeat;
}
#content_wooden_ambulance{
    background: url('../images/wooden_ambulance.jpg') no-repeat;
}
#content_interrogation{
    background: url('../images/interrogation.jpg') no-repeat;
}
#content_faces{
    background: url('../images/faces.jpg') no-repeat;
}
#content_fr_apr{
    background: url('../images/fr_apr.jpg') no-repeat;
}
#content_fr_march{
    background: url('../images/fr_march.jpg') no-repeat;
}
#content_fr_jan{
    background: url('../images/fr_jan.jpg') no-repeat;
}
#content_tracking{
    background: url('../images/tracking.jpg') no-repeat;
}
#content_smart_house{
    background: url('../images/smart_house.jpg') no-repeat;
}
#content_something{
    background: url('../images/something.jpg') no-repeat;
}
#content_wake_up{
    background: url('../images/wake_up.jpg') no-repeat;
}



.videos{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    margin-top: 0px;
    width:inherit;
    z-index: 1;
    height:175px;
    visibility: hidden;
    background: rgba(0,0,0,0.6);
}
    
.videos h1{
    font-size:26px;
    padding-top: 15px;
    color:white;
}

/****FOOTER****/

footer{
    background: #fff;
    text-align:left;
    clear:both;
    padding-top:30px;
}

footer ul{
    list-style-type: none;
}

footer li{
    display: inline;
}

.gens{
    position:relative;
    top:30px;
    font-size:12px;
    line-height: 22px;
}
.gens a{
    color: #777;
}

.info{
    padding-top: 20px;
    line-height: 22px;
    color:inherit;
}

.info-mobile{
    padding-top: 20px;
    line-height: 22px;
    color:inherit;
}

hr#break{
    clear:both;
    border-color:#aaa;
}

.author{
    color:inherit;
    font-size:12px;
    padding-bottom:5px;
    text-align: center;
}


/****MAIN-CONTENT****/


/****ABOUT PAGE****/

#cv_video {
    width:900px;
    height:505px;
}

#cv_desc{
    font-size:16px;
    color:#444;
}

/****CONTACT ***/
div#contact-pic>img{
    width: 100%;
}

div#contact-text{
    font-size: 20px;
    padding:20px;
    padding-top:100px;
    text-align: center;
}
div#contact-text>ul{
    list-style-type: none;
}
div#contact-text>ul>li{
    display: inline;
    width: 14%;
}


    
@media screen and (min-width:1px) and (max-width: 499px){
    
    #cv_video{
        width:200px;height:120px;
    }

}



@media (min-width:500px) and (max-width: 899px){

    #cv_video{    
        width:500px;height:300px;
    }

}


@media (min-width:1367px) and (max-width: 1920px){
    
    #cv_video{
        width:1250px;height:700px;
    }
}