/* 
    calendar layout v.1
    
    modes: single month view - multiple month view
    with animated transition between modes

    single month view - scaled month widget at the center
    multiple months view - top left aligned

    year page contains =12 month widgets
    different year page layouts (r1c12, r2c6, r4c3) are supported

    year pages can be organized as vertical or horizontal list

    scrollable in the container, scrollbars appear as needed
*/



/* core behaviour change */
.cal-month {
    display: block;
    
    transition-property: transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-timing-function: ease, linear;
    -webkit-transition-timing-function: ease, linear;
    transform-origin: top center;
    -webkit-transform-origin: top center;
}



.davinci-year-page {
    width: 100%;
    height: 100%;
    right: 100%;
    display: block;
    line-height: 1.2em;
    position: absolute;
    pointer-events: none;

    transition-property: transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-timing-function: ease, linear;
    -webkit-transition-timing-function: ease, linear;
}

.davinci-month-page {
    width: auto;
    height: auto;
    left: 100%;
    display: block;
    line-height: 1.2em;
    position: absolute;
    pointer-events: none;

    transition-property: transform;
    -webkit-transition-property: -webkit-transform;
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
}



[data-ml="r4c3"] :nth-child(1) > .cal-month  { 
    transform: translate3d(  0%,   0%, 0); 
    -webkit-transform: translate3d(  0%,   0%, 0); 
}
[data-ml="r4c3"] :nth-child(2) > .cal-month  { 
    transform: translate3d(100%,   0%, 0); 
    -webkit-transform: translate3d(100%,   0%, 0);
}
[data-ml="r4c3"] :nth-child(3) > .cal-month  { 
    transform: translate3d(200%,   0%, 0); 
    -webkit-transform: translate3d(200%,   0%, 0);
}
[data-ml="r4c3"] :nth-child(4) > .cal-month  { 
    transform: translate3d(  0%, 100%, 0); 
    -webkit-transform: translate3d(  0%, 100%, 0);
}
[data-ml="r4c3"] :nth-child(5) > .cal-month  { 
    transform: translate3d(100%, 100%, 0); 
    -webkit-transform: translate3d(100%, 100%, 0);
}
[data-ml="r4c3"] :nth-child(6) > .cal-month  { 
    transform: translate3d(200%, 100%, 0); 
    -webkit-transform: translate3d(200%, 100%, 0);
}
[data-ml="r4c3"] :nth-child(7) > .cal-month  { 
    transform: translate3d(  0%, 200%, 0); 
    -webkit-transform: translate3d(  0%, 200%, 0);
}
[data-ml="r4c3"] :nth-child(8) > .cal-month  { 
    transform: translate3d(100%, 200%, 0); 
    -webkit-transform: translate3d(100%, 200%, 0);
}
[data-ml="r4c3"] :nth-child(9) > .cal-month  { 
    transform: translate3d(200%, 200%, 0); 
    -webkit-transform: translate3d(200%, 200%, 0);
}
[data-ml="r4c3"] :nth-child(10) > .cal-month { 
    transform: translate3d(  0%, 300%, 0); 
    -webkit-transform: translate3d(  0%, 300%, 0);
}
[data-ml="r4c3"] :nth-child(11) > .cal-month { 
    transform: translate3d(100%, 300%, 0); 
    -webkit-transform: translate3d(100%, 300%, 0);
}
[data-ml="r4c3"] :nth-child(12) > .cal-month { 
    transform: translate3d(200%, 300%, 0); 
    -webkit-transform: translate3d(200%, 300%, 0);
}

/* ******************* */
[data-ml="r2c6"] :nth-child(1) > .cal-month  { 
    transform: translate3d(  0%,   0%, 0); 
    -webkit-transform: translate3d(  0%,   0%, 0); 
}
[data-ml="r2c6"] :nth-child(2) > .cal-month  { 
    transform: translate3d(100%,   0%, 0); 
    -webkit-transform: translate3d(100%,   0%, 0);
}
[data-ml="r2c6"] :nth-child(3) > .cal-month  { 
    transform: translate3d(200%,   0%, 0); 
    -webkit-transform: translate3d(200%,   0%, 0);
}
[data-ml="r2c6"] :nth-child(4) > .cal-month  { 
    transform: translate3d(300%,   0%, 0); 
    -webkit-transform: translate3d(300%,   0%, 0);
}
[data-ml="r2c6"] :nth-child(5) > .cal-month  { 
    transform: translate3d(400%,   0%, 0); 
    -webkit-transform: translate3d(400%,   0%, 0);
}
[data-ml="r2c6"] :nth-child(6) > .cal-month  { 
    transform: translate3d(500%,   0%, 0); 
    -webkit-transform: translate3d(500%,   0%, 0);
}
[data-ml="r2c6"] :nth-child(7) > .cal-month  { 
    transform: translate3d(  0%, 100%, 0); 
    -webkit-transform: translate3d(  0%, 100%, 0);
}
[data-ml="r2c6"] :nth-child(8) > .cal-month  { 
    transform: translate3d(100%, 100%, 0); 
    -webkit-transform: translate3d(100%, 100%, 0);
}
[data-ml="r2c6"] :nth-child(9) > .cal-month  { 
    transform: translate3d(200%, 100%, 0); 
    -webkit-transform: translate3d(200%, 100%, 0);
}
[data-ml="r2c6"] :nth-child(10) > .cal-month { 
    transform: translate3d(300%, 100%, 0); 
    -webkit-transform: translate3d(300%, 100%, 0);
}
[data-ml="r2c6"] :nth-child(11) > .cal-month { 
    transform: translate3d(400%, 100%, 0); 
    -webkit-transform: translate3d(400%, 100%, 0);
}
[data-ml="r2c6"] :nth-child(12) > .cal-month { 
    transform: translate3d(500%, 100%, 0); 
    -webkit-transform: translate3d(500%, 100%, 0);
}

/* ******************* */
[data-ml="r1c12"] :nth-child(1) > .cal-month  { 
    transform: translate3d(  0%,   0%, 0); 
    -webkit-transform: translate3d(  0%,   0%, 0); 
}
[data-ml="r1c12"] :nth-child(2) > .cal-month  { 
    transform: translate3d(100%,   0%, 0); 
    -webkit-transform: translate3d(100%,   0%, 0);
}
[data-ml="r1c12"] :nth-child(3) > .cal-month  { 
    transform: translate3d(200%,   0%, 0); 
    -webkit-transform: translate3d(200%,   0%, 0);
}
[data-ml="r1c12"] :nth-child(4) > .cal-month  { 
    transform: translate3d(300%,   0%, 0); 
    -webkit-transform: translate3d(300%,   0%, 0);
}
[data-ml="r1c12"] :nth-child(5) > .cal-month  { 
    transform: translate3d(400%,   0%, 0); 
    -webkit-transform: translate3d(400%,   0%, 0);
}
[data-ml="r1c12"] :nth-child(6) > .cal-month  { 
    transform: translate3d(500%,   0, 0); 
    -webkit-transform: translate3d(500%,   0, 0);
}
[data-ml="r1c12"] :nth-child(7) > .cal-month  { 
    transform: translate3d(600%, 0, 0); 
    -webkit-transform: translate3d(600%, 0, 0);
}
[data-ml="r1c12"] :nth-child(8) > .cal-month  { 
    transform: translate3d(700%,  0, 0); 
    -webkit-transform: translate3d(700%, 0, 0);
}
[data-ml="r1c12"] :nth-child(9) > .cal-month  { 
    transform: translate3d(800%, 0, 0); 
    -webkit-transform: translate3d(800%, 0, 0);
}
[data-ml="r1c12"] :nth-child(10) > .cal-month { 
    transform: translate3d(900%, 0, 0); 
    -webkit-transform: translate3d(900%, 0, 0);
}
[data-ml="r1c12"] :nth-child(11) > .cal-month { 
    transform: translate3d(1000%, 0, 0); 
    -webkit-transform: translate3d(1000%, 0, 0);
}
[data-ml="r1c12"] :nth-child(12) > .cal-month { 
    transform: translate3d(1100%, 0, 0); 
    -webkit-transform: translate3d(1100%, 0, 0);
}



.cal-month {
    pointer-events: auto;
}

.cal-view[data-ml][data-mw] .cal-month { 
    pointer-events: none;
    opacity: 0; 
}

    
.cal-view[data-ml][data-yw] .davinci-year-page 
{
    opacity: 0;
    transform: translate3d(50%, 0, 0);
    -webkit-transform: translate3d(50%, 0, 0);
}

.cal-view[data-ml][data-yw="1"] .davinci-year-page:nth-child(1),
.cal-view[data-ml][data-yw="2"] .davinci-year-page:nth-child(2),
.cal-view[data-ml][data-yw="3"] .davinci-year-page:nth-child(3),
.cal-view[data-ml][data-yw="4"] .davinci-year-page:nth-child(4),
.cal-view[data-ml][data-yw="5"] .davinci-year-page:nth-child(5)
{
    opacity: 1;
}


[data-yl="h3"] :nth-child(1) > .davinci-month-page { 
    transform: translate3d(   0%, 0, 0); 
    -webkit-transform: translate3d(   0%, 0, 0);
}
[data-yl="h3"] :nth-child(2) > .davinci-month-page { 
    transform: translate3d( 310%, 0, 0); 
    -webkit-transform: translate3d( 310%, 0, 0);
}
[data-yl="h3"] :nth-child(3) > .davinci-month-page { 
    transform: translate3d( 620%, 0, 0); 
    -webkit-transform: translate3d( 620%, 0, 0);
}
[data-yl="h3"] :nth-child(4) > .davinci-month-page { 
    transform: translate3d( 930%, 0, 0); 
    -webkit-transform: translate3d( 930%, 0, 0);
}
[data-yl="h3"] :nth-child(5) > .davinci-month-page { 
    transform: translate3d(1240%, 0, 0); 
    -webkit-transform: translate3d(1240%, 0, 0);
}

[data-yl="h6"] :nth-child(1) > .davinci-month-page { 
    transform: translate3d(   0%, 0, 0); 
    -webkit-transform: translate3d(   0%, 0, 0);
}
[data-yl="h6"] :nth-child(2) > .davinci-month-page { 
    transform: translate3d( 610%, 0, 0); 
    -webkit-transform: translate3d( 610%, 0, 0);
}
[data-yl="h6"] :nth-child(3) > .davinci-month-page { 
    transform: translate3d( 1220%, 0, 0); 
    -webkit-transform: translate3d( 1220%, 0, 0);
}
[data-yl="h6"] :nth-child(4) > .davinci-month-page { 
    transform: translate3d( 1830%, 0, 0); 
    -webkit-transform: translate3d( 1830%, 0, 0);
}
[data-yl="h6"] :nth-child(5) > .davinci-month-page { 
    transform: translate3d(2440%, 0, 0); 
    -webkit-transform: translate3d(2440%, 0, 0);
}


/* *********************** */
[data-yl="v2"] :nth-child(1) > .davinci-month-page { 
    transform: translate3d(   0, 0, 0); 
    -webkit-transform: translate3d(   0, 0, 0);
}
[data-yl="v2"] :nth-child(2) > .davinci-month-page { 
    transform: translate3d( 0, 210%, 0); 
    -webkit-transform: translate3d( 0, 210%, 0);
}
[data-yl="v2"] :nth-child(3) > .davinci-month-page { 
    transform: translate3d( 0, 420%, 0); 
    -webkit-transform: translate3d( 0, 420%, 0);
}
[data-yl="v2"] :nth-child(4) > .davinci-month-page { 
    transform: translate3d( 0, 630%, 0); 
    -webkit-transform: translate3d( 0, 630%, 0);
}
[data-yl="v2"] :nth-child(5) > .davinci-month-page { 
    transform: translate3d(0, 840%, 0); 
    -webkit-transform: translate3d(0, 840%, 0);
}

/* *********************** */
[data-yl="v1"] :nth-child(1) > .davinci-month-page { 
    transform: translate3d(   0, 0, 0); 
    -webkit-transform: translate3d(   0, 0, 0);
}
[data-yl="v1"] :nth-child(2) > .davinci-month-page { 
    transform: translate3d( 0, 110%, 0); 
    -webkit-transform: translate3d( 0, 110%, 0);
}
[data-yl="v1"] :nth-child(3) > .davinci-month-page { 
    transform: translate3d( 0, 220%, 0); 
    -webkit-transform: translate3d( 0, 220%, 0);
}
[data-yl="v1"] :nth-child(4) > .davinci-month-page { 
    transform: translate3d( 0, 330%, 0); 
    -webkit-transform: translate3d( 0, 330%, 0);
}
[data-yl="v1"] :nth-child(5) > .davinci-month-page { 
    transform: translate3d(0, 440%, 0); 
    -webkit-transform: translate3d(0, 440%, 0);
}


.cal-view[data-ml][data-yw] .davinci-month-page
{
    transform: translate3d(-50%, 0%, 0);
    -webkit-transform: translate3d(-50%, 0%, 0);
}


.cal-view[data-ml][data-mw] .cal-month {
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);
}

.cal-view[data-mw="1"] :nth-child(1) > .cal-month,
.cal-view[data-mw="2"] :nth-child(2) > .cal-month,
.cal-view[data-mw="3"] :nth-child(3) > .cal-month,
.cal-view[data-mw="4"] :nth-child(4) > .cal-month,
.cal-view[data-mw="5"] :nth-child(5) > .cal-month,
.cal-view[data-mw="6"] :nth-child(6) > .cal-month,
.cal-view[data-mw="7"] :nth-child(7) > .cal-month,
.cal-view[data-mw="8"] :nth-child(8) > .cal-month,
.cal-view[data-mw="9"] :nth-child(9) > .cal-month,
.cal-view[data-mw="10"] :nth-child(10) > .cal-month,
.cal-view[data-mw="11"] :nth-child(11) > .cal-month,
.cal-view[data-mw="12"] :nth-child(12) > .cal-month
{ 
    transform: scale(3, 3); 
    -webkit-transform: scale(3, 3); 
    opacity: 1; 
    pointer-events: auto; 
}

.cal-view[data-yw="1"] .davinci-year-page:not(:nth-child(1)) .cal-month,
.cal-view[data-yw="2"] .davinci-year-page:not(:nth-child(2)) .cal-month,
.cal-view[data-yw="3"] .davinci-year-page:not(:nth-child(3)) .cal-month,
.cal-view[data-yw="4"] .davinci-year-page:not(:nth-child(4)) .cal-month,
.cal-view[data-yw="5"] .davinci-year-page:not(:nth-child(5)) .cal-month
{
    pointer-events: none; 
}



.cal-monthheader::before {
    opacity: 0;

    transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}



.cal-view[data-mw] .cal-monthheader::before,
[data-yearchange] .cal-monthheader::before,
.davinci-month-page:first-child .cal-monthheader::before
{
    opacity: 1;
}

/* ************************************************** */

/* transform, opacity */
.davinci-year-page,
.davinci-month-page,
.cal-month
{
    transition-duration: 500ms, 000ms;
    transition-delay: 0ms, 500ms;
    -webkit-transition-duration: 500ms, 200ms;
    -webkit-transition-delay: 0ms, 500ms;
}

.cal-view[data-ml][data-yw] .davinci-month-page,
.cal-view[data-ml][data-mw] .cal-month,
.cal-view[data-ml][data-yw] .davinci-year-page
{
    transition-delay: 000ms, 0ms;
    -webkit-transition-delay: 200ms, 0ms;
}

/* opacity */
.cal-monthheader::before
{
    transition-duration: 000ms; 
    transition-delay: 0ms;
    -webkit-transition-duration: 500ms; 
    -webkit-transition-delay: 0ms;
}

.cal-view[data-mw] .cal-monthheader::before
{
    transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
}