.ContentBox
{
font-size: 140%;    
}

.Content
{
width: 60%;
}
    
@media 
(orientation: landscape) {
    .ContentBox
    {
    top: 3%;
    left: 20%;	
    min-width: calc(55% + 40px);
    width: calc(65% + 40px);
    max-width: calc(75% + 40px);
    }
    .Content
    {
    margin-bottom: 60px;    
    }
    #ContentImg1
    {
    margin-right: -30px;
    width: calc(20%);
    }
    #ContentImg2
    {
    clear: right;
    margin-bottom: 80px;
    width: calc(25%);
    margin-left: 80px;
	margin-right: -40px;
    }
	#Content2, #Content3
    {
	margin-left: 60px;	
	}
    #Content3
    {
    /*width: calc(63%);*/
    /*margin-left: calc(32% + 40px);*/
    margin-bottom: 100px;
    }
		
    .ContentImg img 
    {
    width: calc(100%);
    }
}    
@media 
(orientation: portrait) {
    .ContentBox
    {
    top: 5%;
    left: 20%;	
    min-width: calc(57%);
    width: calc(67%);
    max-width: calc(77%);
    font-size: 100%;
    }
	
    .Content
    {
    clear: both;
    width: 100%;
    margin-bottom: 40px;
    }
	
    .ContentImg
    {
    clear: both;
    margin-bottom: -30px;
    }

    #ContentImg1
    {
    width: 70%;
    }

    #ContentImg2
    {
    width: 100%;
    }
		
    .ContentImg img 
    {
    width: 100%;
    padding-bottom: 20px;
    }
}


@media 
(orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 600px)
{
    .ContentBox
    {
    top: 1%;
    left: 14%;	
    min-width: calc(60%);
    width: calc(70%);
    max-width: calc(80%);
    }
}
@media 
(orientation: landscape) and (max-aspect-ratio: 5/3)
{
    .ContentBox
    {
    top: 10%;
    left: 25%;
    min-width: calc(57%);
    width: calc(67%);
    max-width: calc(77%);
    }
}