@media (min-width: 1280px) and (orientation: landscape){

    .header > h1 {

        font-size:  64px;
        margin-top: 10%;
    }

    .header > hr {

        max-width:  900px;
    }

    .container {

        max-width:  700px;
        margin:     auto;
    }      

	.example {
		
		height: 		350px;
	}
	
    .slideshow {

        top:        40%;
    }

    .slides > p {

        font-size:  48px;
    }
    
    .modal {
    
		top:				10%;
		padding-top:		10px;
		height:				100%;    
    }

    .modal-header > p {
    
		font-size:		20px;    
    }
    
    .modal-select > a > h4 {
    
		font-size:		18px;    
    }
    
    .close {
    
		font-size:		18px;    
    }

    #m_btn {
    
		padding:		4px;    
    }
}  

@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape){

    .header > h1 {

        font-size:  	56px;
        margin-top: 	7%;
    }

    .header > hr {

        max-width:  	800px;
    }

    .container {

        max-width:  	700px;
        margin:     	auto;
    }
	
	.example {
		
		height: 		300px;
	}

    .slideshow {

        top:        	35%;
    }

    .slides > p {

        font-size:  	36px;
    }
    
    .modal {
    
		top:			10%;
		padding-top:	10px;
		height:			100%;
    }

    .modal-header > p {
    
		font-size:		20px;
    }
    
    .modal-select > a > h4 {
    
		font-size:		18px;
    }
    
    .close {
    
		font-size:		14px;
    }

    #m_btn {
    
		padding:		4px;
		margin-top:		10%;
    }    
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape){

    .header > h1 {

        font-size:  	42px;
        margin-top: 	7%;
    }

    .header > hr {

        max-width:  	600px;
    }

    .container {

        max-width:  	600px;
        margin:     	auto;
    }
	
	.example {
		
		height: 		250px;
	}

    .slideshow {

        top:        	45%;
    }

    .slides > p {

        font-size:  	24px;
    }
    
    .modal {
    
		top:			10%;
		padding-top:	10px;
		height:			100%;
    }

    .modal-header > p {
    
		font-size:		18px;
    }
    
    .modal-select > a > h4 {
    
		font-size:		16px;
    }
    
    .close {
    
		font-size:		14px;
    }

    #m_btn {
    
		padding:		4px;
    }
}

@media (min-width: 601px) and (max-width: 767px) and (orientation: landscape){

    .header > h1 {

        font-size:  	36px;
        margin-top: 	5%;
    }

    .header > hr {

        max-width:  	450px;
    }

    .container {

        max-width:  	450px;
        margin:     	auto;
    }
	.example {
		
		height:			200px;	
	}
	
    .slideshow {

        top:        	45%;
    }

    .slides > p {

        font-size:  	20px;
    }
    
    .modal {
    
		top:			10%;
		padding-top:	10px;
		height:			100%;
    }

    .modal-header > p {
    
		font-size:		16px;
    }
    
    .modal-select > a > h4 {
    
		font-size:		14px;
    }
    
    .close {
    
		font-size:		14px;
    }

    #m_btn {
    
		padding:		4px;
    }    
}

@media (min-width: 480px) and (max-width: 600px) and (orientation: landscape){

    .header > h1 {

        font-size:  30px;
        margin-top: 5%;
    }

    .header > hr {

        max-width:  400px;
    }

    .container {

        max-width:  400px;
        margin:     auto;
    }
	
	.example {
		
		height: 	200px;
	}

	code {
		
		max-width: 	350px;
	}
	
    .slideshow {

        top:        	50%;
    }

    .slides > p {

        font-size:  	20px;
    }
    
    .modal {
    
		top:			10%;
		padding-top:	10px;
		height:			100%;
    }

    .modal-header > p {
    
		font-size:		14px;
    }
    
    .modal-select > a > h4 {
    
		font-size:		14px;
    }
    
    .close {
    
		font-size:		14px;
    }

    #m_btn {
    
		padding:		4px;
    }      
}