.wrapHeaderAndContent > .main
{
    margin-top: 20px;
}

.wrapArticleContent, .wrapArticleMenu
{
    float: left;
}

    .boxArticleMenu
    {
        width: 90%;
    }
    
        .boxArticleMenu .level1, .boxArticleMenu .level2, .boxArticleMenu .level3, .boxArticleMenu .level4, .boxArticleMenu .level5
        {
            padding: 0 0 0 16px; 
            margin-bottom: 5px;
            list-style-type: none; 
            background: transparent url('../../__shared__/images/circle-blue-8.svg') no-repeat 0px 8px; 
            background-size: 9px;               
        }

            .boxArticleMenu .dir
            {
                position: relative;
                display: block;
                width: calc(100% - 20px);                
            }

            .boxArticleMenu .dir::before
            {
                position: absolute;
                top: 5px;
                right: 0;
                display: block;
                width: 14px;
                height: 10px;
                
                background: transparent url('../../__shared__/images/down-arrow-blue-8.svg') no-repeat right 5px; 
                background-size: 14px;               
            }            
            
            .boxArticleMenu .openedSubmenu.dir::before
            {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
                
            }            
            
            .boxArticleMenu .dir + div
            {
                display: none;
            }      
            
            .boxArticleMenu a 
            {
                text-decoration: none;
            }
            
            .boxArticleMenu a:hover 
            {
                text-decoration: underline;
            }            
        
.wrapBasicVideo
{
    position: relative;
    
    display: flex;
    justify-content: center;
    
    width: 100%;
    margin-bottom: 60px;
}   

    .wrapBasicVideo video
    {
        max-width: 100%;
        width: 100%;
    }  
    
    
    
    
/*************************************/
/* reference */
/*************************************/

.wrapReference
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    justify-content: flex-start;
    align-content: flex-start;
}

.wrapReference
{
    margin-top: 64px;
}

    .wrapReferenceImage
    {
        min-height: 200px;
    }
    
        .boxReferenceImage
        {
            aspect-ratio: 4 / 3;

            background-position: center top;
            background-repeat: no-repeat;
            background-size: contain;            
        }
    
    .boxReferenceContent
    {
        padding-left: 32px;
    }    
    
    .wrapReference:nth-of-type(even) .boxReferenceContent
    {
        padding-left: 0px;
        padding-right: 32px;
    }        
    
        .referenceContentItem
        {
            
        }
        
            .referenceContentItem p, .referenceLabel a
            {
                margin-top: 12px;
            }
        
            .referenceLabel, .referenceValue
            {
                color: var(--color-bg-blue-dark);
            }
            
            .referenceLabel a
            {
                display: inline-block;
            }
            
            .referenceValue
            {
                font-weight: 600;
            }            
            
            .referenceTitle h3
            {
                margin-bottom: 12px;
            }

            .referenceValue span
            {
                margin-left: 12px;
                
                font-size: 90%;
                font-weight: 600;
            }
            
            .referenceTitle ul li
            {
                margin-bottom: 4px;
            }

            
/* střídání dlaždic referencí */            
.wrapReference:nth-of-type(odd) .wrapReferenceImage { order: 1; }
.wrapReference:nth-of-type(odd) .boxReferenceContent { order: 2; }    

.wrapReference:nth-of-type(even) .wrapReferenceImage { order: 2; }
.wrapReference:nth-of-type(even) .boxReferenceContent { order: 1; }    



/* filtr kategorií*/
.wrapReferenceCategoreisFilter
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;    
}

.wrapReference + .wrapReferenceCategoreisFilter, p + .wrapWidget 
{
    margin: 48px 0;
}



/* štítky kategorií referencí */
.aReferenceCategory, .aReferenceCategory:hover, .aReferenceCategory:link
{
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid var(--color-text-anchor);
        
    font-size: 78%;
    font-weight: 600;    
    text-decoration: none;        
}

.aReferenceCategory:hover
{
    background: var(--color-text-anchor);
    border: 1px solid var(--color-text-anchor);
        
    color: #fff;
}

.aReferenceCategory + .aReferenceCategory
{
    margin-left: 12px;
}



/*************************************/
/* reference */
/*************************************/

.wrapDemoProjects
{
    justify-content: center;
}

    .wrapDemoProject
    {
        
    }
    
        .boxDemoProject
        {
            margin: 24px;
            padding: 24px;
            background: var(--color-bg-blue-light);
        }    

            .boxDemoProject h2
            {
                width: 100%;
                
                text-align: center;
                font-size: 125%;
                font-weight: 600;
            }
            
            .boxDemoProject img
            {
                width: 100%;
                max-width: 100%;
                margin-bottom: 16px;
            }

            .textDemoProject
            {
                margin: 8px 0 12px;
            }
            
                .textDemoProject ul li
                {
                    font-size: 87.5%;
                }
                        
            .butDemoProject
            {
                justify-content: center;
            }
            
.wrapInputSelctedProject
{
    margin-bottom: 24px;
}