@import url('bootstrap.css');
@media (min-width:481px) and (max-width:799px){
    
    #logo{
        width: 100%;
        height: 160px;
        margin:0 auto;
        margin-top:40px;
    }
    #logo img{
        width:390px;
    }

    .main-container{
        width:310px;
        margin:0 auto;
    }
    
    nav#main-mobile{
        display: none;
    }
    
    #first-mobile,#second-mobile,#third-mobile,#fourth-mobile,#fifth-mobile,#sixth-mobile{
        display: none;
    }
    
    #vimeo-link{
        display:block;
    }
    
    .info-mobile{
        display: none;
    }
    
}

@media (min-width:1px) and (max-width:480px){
    
    #logo{
        width: 100%;
        height: 160px;
        margin:0 auto;
        position:relative;
        top:30px;
    }
    #logo img{
        width:250px;
    }

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

    nav#main li{
            display:inline;
    }

    nav#main a{
        font-size: 20px;
        padding: 10px;
        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:21px;
    }

    nav#main a#active{
        text-decoration: none;
        color:#220000;
        font-size:21px;
    }
    
    nav#genres a{
        color:inherit;
        font-size:12px;
        transition:color 0.2s ease-out;
    }
    .main-container{
        width:250px;
        margin:0 auto;
    }
    
    nav#main-mobile{
        display: none;
    }
    .cell{
        float:left;
        width:250px;
        height:140px;
    }
    #first-mobile,#second-mobile,#third-mobile,#fourth-mobile,#fifth-mobile,#sixth-mobile{
        display: none;
    }
    
    .content{
        width:250px;
        height:140px;
    }
	#content_autumn{
		background: url('../images/autumn_in_subotica_small.jpg') no-repeat;
	}
	#content_oh_dear{
		background: url('../images/oh_dear_small.jpg') no-repeat;
	}
	#content_the_man{
		background: url('../images/the_man_small.jpg') no-repeat;
	}
	#content_tron{
		background: url('../images/tron_small.jpg') no-repeat;
	}
	#content_all_rounder{
		background: url('../images/all_rounder_small.jpg') no-repeat;
	}
    #content_exodus{
        background: url('../images/exodus_small.jpg') no-repeat;
    }
    #content_izotopi{
        background: url('../images/izotop_small.jpg') no-repeat;
    }
    #content_hedonist{
        background: url('../images/hedonisti_small.jpg') no-repeat;
    }
    #content_speed_matters{
        background: url('../images/speed_matters_small.jpg') no-repeat;
    }
    #content_wooden_ambulance{
        background: url('../images/wooden_ambulance_small.jpg') no-repeat;
    }
    #content_interrogation{
        background: url('../images/interrogation_small.jpg') no-repeat;
    }
    #content_faces{
        background: url('../images/faces_small.jpg') no-repeat;
    }
    #content_fr_apr{
        background: url('../images/fr_apr_small.jpg') no-repeat;        
    }
    #content_fr_march{
        background: url('../images/fr_march_small.jpg') no-repeat;        
    }
    #content_fr_jan{
        background: url('../images/fr_jan_small.jpg') no-repeat;        
    }
    #content_tracking{
        background: url('../images/tracking_small.jpg') no-repeat;        
    }
    #content_smart_house{
        background: url('../images/smart_house_small.jpg') no-repeat;        
    }
    #content_wake_up{
        background: url('../images/wake_up_small.jpg') no-repeat;        
    }
    

    .videos{
        position: absolute;
        margin-left: 0;
        width:250px;
        height:140px;
    }

    .videos h1{
        font-size:18px;
    }
    
    #vimeo-link{
        display:block;
    }
    
    .info-mobile{
        display: none;
    }
    
}