@charset "UTF-8";
/*Feature Box Section*******************************************************/
    
#feature-box{
    display:flex;
    flex-flow:row wrap; 
    gap:2.5em 3%; 
    padding:0 3%;
    margin: 3% 0; 
    justify-content: space-between;
}
    @media only screen and (max-width:767px) and (orientation:portrait)
        {#feature-box{flex-flow:column wrap;justify-content: flex-start; width:100vw; margin: 0 0 5% 0;}}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
        {#feature-box{flex-flow:row wrap;justify-content: flex-start; width:100vw; margin: 0 0 5% 0;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
        {#feature-box{justify-content: flex-start; align-items:stretch; width:100vw; margin: 0 0 5% 0;}}
 
    
    .feature-box-child{
        flex-basis: 31%;
        background-color: #e0e0e0;
        order-top: solid 1.5vmin #cefafe; 
        padding: 2% 2%;
    }
    @media only screen and (max-width:767px) and (orientation:portrait)
		    {.feature-box-child {padding: 4% 5%}} 
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
		    {.feature-box-child {flex-basis:48%;padding: 4% 5%}}  
    @media only screen and (max-width:767px) and (orientation:landscape)
		    {.feature-box-child {flex-basis: 48%;}}
        
    .feature-box-headline {
        font-size:2em; 
        font-weight:bold;
    }
    @media only screen and (max-width:767px) and (orientation:portrait)
		    {.feature-box-headline {font-size:2.5em;}}
    @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
		    {.feature-box-headline {font-size:1.8em;}}
    @media only screen and (max-width:767px) and (orientation:landscape)
		    {.feature-box-headline {font-size:4.5em;}}
    
    .feature-box-image {
        float:right;
    }
    @media only screen and (max-width:767px) and (orientation:landscape)
    {.feature-box-image:has(.landscape){float:none; text-align:center;}}
    
    .feature-box-image.charter{
        height:80%;
        width:50%;
        margin-left:3%;
        margin-bottom: 3%; 
        display:flex;
        flex-flow:row wrap;
        row-gap: 0.25em;
        column-gap:0.5em;
        justify-content:center;
        align-items:center;
    }
        @media only screen and (max-width:767px) and (orientation:portrait)
		    {.feature-box-image.charter img{width:20vw;}}
        @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
            {.feature-box-image.charter{height:auto;width:20%;}
             .feature-box-image.charter img{width:10vw;}}
        @media only screen and (max-width:1400px) and (orientation:landscape)
            {.feature-box-image.charter{height:50%;width:30%;justify-content: center;}
             .feature-box-image.charter img{width:8vw;}}
         @media only screen and (max-width:767px) and (orientation:landscape)
             {.feature-box-image.charter{row-gap:1em;}}
         @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:landscape)
             {.feature-box-image.charter{row-gap:0.5em;}}
    
    .feature-box-image img{
        margin-left:0.3em; 
        margin-bottom:0.3em;
    }
        @media only screen and (max-width:767px) and (orientation:portrait)
		    {.feature-box-image img{width:35vw;}}
        @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
		    {.feature-box-image img{width:15vw;}
             .feature-box-image img.landscape{width:20vw;}}
        @media only screen and (max-width:767px) and (orientation:landscape)
            {.feature-box-image img{width:20vw;}
             .feature-box-image img.landscape{width:40vw;}}
    
    .feature-box-content {
        padding-top:3%;
        font-size:1.3em;
    }
        @media only screen and (max-width:767px) and (orientation:portrait)
            {.feature-box-content {font-size:1.6em;}}
        @media only screen and (min-width:768px) and (max-width:1400px) and (orientation:portrait)
            {.feature-box-content {font-size:1em;}}
        @media only screen and (max-width:767px) and (orientation:landscape)
            {.feature-box-content {font-size:3em;}}