@media only screen and (max-width:1450px) {
    
    #birds {
        top:160px;
        left:60px;
    }
    
    #header_line:first-of-type {
        left:-35%;
    }
    
    #header_line:last-of-type {
        right:-35%;
    }
    
    #text-panel {
        width:60%;
    }
}

@media only screen and (max-width:1250px) {
 
    #header_line:first-of-type {
        left:-40%;
    }
    
    #header_line:last-of-type {
        right:-40%;
    }
    
    #text-panel {
        width:70%;
    }
}

/* tablets - landscape */
@media only screen and (max-width:1024px) {
    
    header h1 {
        font-size:650%;
    }
    
    #header_line {
        display:none;
    }
    
    #birds {
        top:145px;
        left:-30px;
    }
    
    #text-panel {
        width:80%;
    }
}

/* tablets - portrait */
@media only screen and (max-width:768px) {
    
    #top span {float:none; display:block; margin:0; padding-top:15px; text-align:center;}
    
    #top ul {display:none;}
    
    header h1 {
        font-size:600%;
    }
    
    #birds {
        display:none;
    }
    
    footer h5:first-child {
        width:50%;
    }
}

@media only screen and (max-width:668px) {
    
    header h1 {
        font-size:500%;
    }

    header h5 {
        font-size:150%;
    }
}

@media only screen and (max-width:568px) {

    header h1 {
        font-size:425%;
    }
    
    #text-panel {
        font-size:125%; /* 150px default */
    }
    
    section {
        font-size:125%; /* 150px default */
    }
}

/* mobiles */
@media only screen and (max-width:480px) {
    
    #top {
        font-size:100%;
    }
    
    header h1 {
        font-size:350%;  
    }
    
    header h5 {
        font-size:135%;
    }
    
    #text-panel {
        width:85%;
        font-size:110%;
    }

    #text-panel nav {margin-top:0;}
    #text-panel nav ul li:nth-child(even) {display:none;}
    #text-panel nav ul li {display:block; background-color:#ccc; padding:5px 0; margin:7.5px auto; width:90%;}
    #text-panel h5 span {margin-left:0;}
    
    section #first_section p, section #second_section p, section #third_section p {
        width:85%;
    }
        
    section {
        font-size:110%;
    }
     
    footer {
        font-size:105%;
	}
}

@media only screen and (max-width:400px) {
    
    header h1 {
        font-size:300%;
    }
}

@media only screen and (max-width:350px) {
    
    header h1 {
        font-size:275%;
    }
}

/* mobiles - set width */
@media only screen and (max-width:320px) {
    
    #wrapper {
        width:320px;
        max-width:320px;
    }
}