@media (min-width: 1024px) and (max-width: 1280px) and (orientation: portrait){

    .header > h1 {

        font-size:  		84px;
        margin-top: 		15%;
    }

    .header > hr {

        max-width:  		800px;
    }

    .container {

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

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

        top:       			45%;
    }

    .slides {

        font-size: 			56px;
    }
    
    .modal {
    
		top:				15%;
		padding-top:		5px;
		height:				100%;    
    }

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

    #m_btn {
    
		margin-top:			10%;
    }
}    

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

    .header > h1 {

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

    .header > hr {

        max-width:  600px;
    }

    .container {

        max-width:  600px;
        margin:     auto;
    }
	
	.example {
		
		height: 	300px;
	}
	
	.article {
		
		max-width: 	600px;
	}
    
	code {
		
		max-width: 	550px;
	}
	
    .slideshow {

        top:        45%;
    }

    .slides {

        font-size:  44px;
    }
    
    .modal {
    
		top:				15%;
		padding-top:		5px;
		height:				100%;    
    }

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

    #m_btn {
    
		margin-top:			10%;
    }    
}

@media (min-width: 600px) and (max-width: 767px) and (orientation: portrait){

    .header > h1 {

        font-size:  48px;
        margin-top: 15%;
    }

    .header > hr {

        max-width:  450px;
    }

    .container {

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

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

        top:        45%;
    }

    .slides {

        font-size:  36px;
    }
    
    .modal {
    
		top:				15%;
		padding-top:		5px;
		height:				100%;    
    }
 
    .modal-header > p {
    
		font-size:			18px;    
    }
    
    .modal-select > a > h4 {
    
		font-size:			14px;    
    }
    
    .close {
    
		font-size:			14px;    
    }

    #m_btn {
        
        margin-top:         10%;
    }
}

@media (min-width: 400px) and (max-width: 599px) and (orientation: portrait){

    .header > h1 {

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

    .header > hr {

        max-width:  		300px;
    }

    .container {

        max-width:  		300px;
        margin:     		auto;
    }
	
	.example {
		
		height: 			250px;
	}
	
	.article {
		
		max-width: 			300px;
	}
	
	.video {
	
		height:				250px;
		margin-top:			5%;
		margin-bottom:		10%;
	}
	
	.poster {
	
		height:				240px;
		margin-top:			5%;
		margin-bottom:		10%;
	}

	code {
		
		max-width: 			300px;
	}

    .slideshow {

        top:        		50%;
    }

    .slides {

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

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

    #m_btn {
    
		margin-top:			5%;    
    }
}

@media (min-width: 320px) and (max-width: 399px) and (orientation: portrait){

    .header > h1 {

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

    .header > hr {

        max-width:  		275px;
    }

    .container {

        max-width:  		275px;
        margin:     		auto;
    }
	
	.example {
		
		height: 			250px;
	}
    
    .article {
    
		max-width: 			275px;
    }
    
    .slideshow {

        top:        		50%;
    }

    .slides {

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

    .modal-header > p {
    
		font-size:			14px;    
    }
    
    .modal-select > a > h4 {
    
		font-size:			14px;    
    }
    
    .close {
    
		font-size:			14px;    
    }
    
    #m_btn {
    
		margin-top:			5%;    
    }
}