[class^="container-"] {
    position:relative;
    margin-bottom: 4em;
}

[class^="container-"] img:nth-of-type(1) {
    position:relative;    
    opacity: 1;
    transition: opacity 900ms linear;    
}

[class^="container-"] img:nth-of-type(2) {
    position:absolute;
    opacity: 0;
    transition: opacity 900ms linear;    
    top:0;
    left:0;
}



.image-wrap-1 {
    z-index:10400;
    position:absolute;       
    background-color: #fff;
    top:-0.5%;
    height:18%;    
    left:-0.15em;
    width:1.5em; 
}

.image-wrap-2 {
    z-index:10400;
    position:absolute;
    background: linear-gradient(to right, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%);    
    /*background: linear-gradient(to right, rgba(61,162,61,0.75) 0%,rgba(0,0,0,0) 100%);*/
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    left:0;
    width:80%;
    top:17.5%;        
    height:20%;
    padding: 0.1em 0 0 0;
}

.sub-wrap-1 {  
    display:flex;    
    align-items:center;
    justify-content: flex-start;    
    height:50%;
    padding:0 0 0 0.5em;
}
.sub-wrap-1 > a:link, .sub-wrap-1 > a:visited {
    color:#fff;    
    text-shadow: 0px 0px 14px #fff;
    font-family: 'font-std-5';
}
.sub-wrap-1 > a:hover, .sub-wrap-1 > a:focus, .sub-wrap-1 > a:active {
    
}


.sub-wrap-2 {
    display:flex;    
    align-items:center;
    justify-content: flex-start;
    font-family: 'font-std-1';
    color:#fff;
    height:50%;
    padding:0 0 0 2em;    
}


.image-wrap-3 {
    z-index:10500;
    position:absolute;    
    top:37.5%;
    left:0;
    width:1.36em;
    height:0;
    border-right: 1.36em solid rgba(0,0,0,0.7);
    border-bottom: 1em solid #fff;
}

.image-wrap-4 {
    z-index:10400;
    position:absolute;    
    left:-0.15em;
    top:37.5%;    
    height:40%; 
    width:1.5em;    
    background-color: #fff;    
}

.image-wrap-5 {
    z-index:10400;
    position:absolute;    
    left:-0.15em;
    bottom:-0.15em;    
    height:40%; 
    width:1.5em;    
    background-color: #fff;    
}




.image-wrap-6 {
    z-index:10100;
    position:absolute;
    top:-0.5%;
    right:-0.15em;
    width:1.5em;
    height:60%;
    background-color: #fff;    
}

.image-wrap-7 {
    
    z-index:10200;
    position:absolute;   
    right:0;
    width:97%;
    top:59.5%;
    height:25%;    
    /*background: linear-gradient(to left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%);*/ 
    background: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
    text-align:right;
}

.sub-wrap-3 {    
    display:flex;    
    align-items:center;
    justify-content: flex-end;
    color:#fff;    
    font-family: 'font-std-5';
    text-shadow: 0px 0px 2px #fff;
    height:45%;
    padding: 0 .5em 0 0;
}

[class^='subitem'] {
    border-bottom: 1px solid transparent;
}

[class^='subitem']:hover {
    cursor:pointer;
}

.sub-wrap-4 {
    display:flex;    
    align-items:center;
    justify-content: flex-end;   
    color:#fff;
    height:55%;    
    padding: 0 1em 0 0;
}

.sub-wrap-4 > a:link, .sub-wrap-4 > a:visited {
    color:#fff;
    transition: opacity 600ms;
    font-family: 'font-std-1';
}

.sub-wrap-4 > a:hover, .sub-wrap-4 > a:focus, .sub-wrap-4 > a:active {
    text-shadow: 0px 0px 2px #fff;
}

.image-wrap-8 {
    z-index:10200;
    position:absolute;    
    top:84.5%;
    right:0em;    
    height:0;
    width:1.36em;
    border-left: 1.36em solid rgba(0,0,0,0.7);
    border-bottom: 0.9em solid transparent;
}

.image-wrap-9 {
    z-index:10100;
    position:absolute;    
    right:-0.15em;
    top:84.5%;
    height:10%;
    width:1.5em;    
    background-color: #fff;
}

.image-wrap-10 {
    z-index:10100;
    position:absolute;    
    right:-0.15em;   
    width:1.5em;
    bottom:-.5%;
    height:10%;
    background-color: #fff;
}



.sub-item-active {
    border-bottom:2px solid #3DA23D;
}






@media screen and (max-width: 360px) {
    [class^="container-"] {
        width:97%;
    }
    .image-wrap-1 {
       
    }
    .image-wrap-2 {
        height:25%;
    }
    .image-wrap-3 {
        top:42.5%;        
    }
    .image-wrap-4 {        
        top:42.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:55%;  
    }
    .image-wrap-7 {        
        top:54.5%;
        height:33%;
    }
    .image-wrap-8 {
        top:87.5%;        
    }
    .image-wrap-9 {        
        top:87.5%;
        height:8%;
    }
    .image-wrap-10 {
        height:6%;
    }
    .sub-wrap-1 {
        font-size: 1.9em;
    }
    .sub-wrap-2 {
        font-size:1.1em;
    }
    .sub-wrap-3 {
        font-size: 1.6em;
    }
    .sub-wrap-4 {
        font-size:1.15em;
    }
}
@media screen and (min-width: 361px) and (max-width: 480px) {
    [class^="container-"] {
        width:97%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:27%;
    }
    .image-wrap-3 {        
        top:41.5%;        
    }
    .image-wrap-4 {
        top:41.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:55%;  
    }
    .image-wrap-7 {        
        top:54.5%;
        height:33%;
    }
    .image-wrap-8 {
        top:87.5%;        
    }
    .image-wrap-9 {        
        top:87.5%;
        height:8%;
    }
    .image-wrap-10 {
        height:6%;
    }
    .sub-wrap-1 {
        font-size: 1.85em;
    }
    .sub-wrap-2 {
        font-size: 1.1em;
    }
    .sub-wrap-3 {
        font-size: 1.67em;
    }
    .sub-wrap-4 {
        font-size: 1.1em;
    }
}
@media screen and (min-width: 481px) and (max-width: 640px) {
    [class^="container-"] {
        width:80%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:27%;
    }
    .image-wrap-3 {        
        top:41.5%;        
    }
    .image-wrap-4 {
        top:41.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:57%;  
    }
    .image-wrap-7 {        
        top:56.5%;
        height:30%;
    }
    .image-wrap-8 {
        top:86.5%;        
    }
    .image-wrap-9 {        
        top:86.5%;
        height:8%;
    }
    .image-wrap-10 {
        height:6%;
    }
    .sub-wrap-1 {
        font-size: 2.3em;
    }
    .sub-wrap-2 {
        font-size: 1.3em;
    }
    .sub-wrap-3 {
        font-size: 1.75em;
    }
    .sub-wrap-4 {
        font-size: 1.3em;
    }
}


@media screen and (min-width: 641px) and (max-width: 800px) {
    [class^="container-"] {
        width:85%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:27%;
    }
    .image-wrap-3 {        
        top:41.5%;        
    }
    .image-wrap-4 {
        top:41.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:57%;  
    }
    .image-wrap-7 {        
        top:56.5%;
        height:30%;
    }
    .image-wrap-8 {
        top:86.5%;        
    }
    .image-wrap-9 {        
        top:86.5%;
        height:8%;
    }
    .image-wrap-10 {
        height:6%;
    }
    .sub-wrap-1 {
        font-size: 2.5em;
    }
    .sub-wrap-2 {
        font-size: 1.35em;
    }
    .sub-wrap-3 {
        font-size: 2.15em;
    }
    .sub-wrap-4 {
        font-size: 1.35em;
    }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
    [class^="container-"] {
        width:80%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:21%;
    }
    .image-wrap-3 {        
        top:35.5%;        
    }
    .image-wrap-4 {
        top:35.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:59%;  
    }
    .image-wrap-7 {        
        top:58.5%;
        height:23%;
        width:87%;
    }
    .image-wrap-8 {
        top:81.5%;        
    }
    .image-wrap-9 {        
        top:81.5%;
        height:11%;
    }
    .image-wrap-10 {
        height:11%;
    }
    .sub-wrap-1 {
        font-size: 2.5em;
    }
    .sub-wrap-2 {
        font-size: 1.35em;
    }
    .sub-wrap-3 {
        font-size: 2.15em;
    }
    .sub-wrap-4 {
        font-size: 1.35em;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1152px) {    
    [class^="container-"] {
        width:80%;
    }
    .image-wrap-1 {        
        height:17%;
    }
    .image-wrap-2 {
        top:16.5%; 
        height:17%;
    }
    .image-wrap-3 {        
        top:33.5%;        
    }
    .image-wrap-4 {
        top:33.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:61%;  
    }
    .image-wrap-7 {        
        top:60.5%;
        height:21%;
        width:85%;
        background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%);
    }
    .image-wrap-8 {
        top:81.5%;        
    }
    .image-wrap-9 {        
        top:81.5%;
        height:11%;
    }
    .image-wrap-10 {
        height:11%;
    }
    .sub-wrap-1 {
        font-size: 2.2em;
    }
    .sub-wrap-2 {
        font-size: 1.15em;
    }
    .sub-wrap-3 {
        font-size: 2em;
    }
    .sub-wrap-4 {
        font-size: 1.1em;
    }
}

@media screen and (min-width: 1153px) and (max-width: 1280px) {    
    [class^="container-"] {
        width:70%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:19%;
    }
    .image-wrap-3 {        
        top:33.5%;        
    }
    .image-wrap-4 {
        top:33.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:63%;  
    }
    .image-wrap-7 {        
        top:62.5%;
        height:23%;
        width:95%;
        background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
    }
    .image-wrap-8 {
        top:85.5%;        
    }
    .image-wrap-9 {        
        top:85.5%;
        height:11%;
    }
    .image-wrap-10 {
        height:11%;
    }
    .sub-wrap-1 {
        font-size: 2.3em;
    }
    .sub-wrap-2 {
        font-size: 1.15em;
    }
    .sub-wrap-3 {
        font-size: 2.1em;
        height:45%;
    }
    .sub-wrap-4 {
        font-size: 1.10em;
        height:55%;
    }
}


@media screen and (min-width: 1281px) {   
    [class^="container-"] {
        width:80%;
    }
    .image-wrap-1 {        
        height:15%;
    }
    .image-wrap-2 {
        top:14.5%; 
        height:17%;
    }
    .image-wrap-3 {        
        top:31.5%;        
    }
    .image-wrap-4 {
        top:31.5%;
    }
    .image-wrap-5 {
     
    }
    
    .image-wrap-6 {        
        height:63%;  
    }
    .image-wrap-7 {        
        top:62.5%;
        height:19%;
        width:95%;
        background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
    }
    .image-wrap-8 {
        top:81.5%;        
    }
    .image-wrap-9 {        
        top:81.5%;
        height:11%;
    }
    .image-wrap-10 {
        height:11%;
    }
    .sub-wrap-1 {
        font-size: 2.3em;
    }
    .sub-wrap-2 {
        font-size: 1.15em;
    }
    .sub-wrap-3 {
        font-size: 2.1em;
        height:50%;
    }
    .sub-wrap-4 {
        font-size: 1.15em;
        height:50%;
    }
}