@import "../vars.less";

@media (min-width: 768px) 
{
    .banner, .banner .banner-left
    {
        height: 200px;
    }
    .banner-left
    {
        border-top-right-radius: 15% 100%;
    }
    .navbar
    {
        background-color: #fff;
    }
    nav .navbar-nav li:first-child a
    {
        padding-left: 0 !important;
    }    
    nav .navbar-nav li:last-child
    {
        padding-right: 0;
    }
    .dropdown-menu
    {
        border-radius: 0;
        padding: 0;
    }
    .dropdown-menu a.dropdown-item:focus, .dropdown-menu a.dropdown-item:hover
    {
        background-color: @primaryColor;
        color: #fff;
    }          
    .carousel-item
    {
        margin-right: 0;        
    }
    #carouselHome .carousel-item
    {
        height: 550px;        
    }
    .carousel-indicators li
    {
        background-color: #fff;
        /*background-color: rgba(0,0,0,.5);*/
    }
    .carousel-caption, .carousel-indicators
    {
        right: 5%;
        left: unset;
    }
    .carousel-caption
    {
        width: 350px;
        height: 350px;
        padding: 1.5rem;
        background-color: @primaryColor;
        color: #fff;
        bottom: 20%;
        /*background-color: #fff;
        color: rgba(0,0,0,.5);*/
    }
    .carousel-caption h5
    {
        font-size: 1.7rem;
        padding-bottom: 1rem;
        /*color: rgba(0,0,0,.5);*/
    }
    .carousel-caption a
    {
        color: #fff;
        /*color: rgba(0,0,0,.5);*/
    }
    .carousel-intro-caption
    {
        width: 100%;
    }
    .carousel-intro-caption h5, .carousel-intro-caption p
    {
        padding: 0 2rem;
    }
    .carousel-intro-caption h5
    {
        font-size: 3rem;
        padding-bottom: 1rem;   
        bottom: 50%;
    }
    .carousel-intro-caption p
    {
        font-size: 1.7rem;
        padding-bottom: 1rem;
        bottom: 20%;
    }
    .carousel-indicators
    {
        bottom: 20%;
        width: 350px;
    }
    .partners
    {
        .carousel-item
        {
            margin-right: 0;
        }

        #supporters-carousel .carousel-item
        {
            margin-left: auto;
            margin-right: auto;
        }

        /* show 5 items */
        .carousel-inner .active,
        .carousel-inner .active + .carousel-item,
        .carousel-inner .active + .carousel-item + .carousel-item,
        .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item,
        .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            display: block;
        }

        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item,
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .carousel-inner .carousel-item-next,
        .carousel-inner .carousel-item-prev {
            position: relative;
            transform: translate3d(0, 0, 0);
        }

        .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

        /* left or forward direction */
        .active.carousel-item-left + .carousel-item-next.carousel-item-left,
        .carousel-item-next.carousel-item-left + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }

        /* farthest right hidden item must be abso position for animations */
        .carousel-inner .carousel-item-prev.carousel-item-right {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            visibility: visible;
        }

        /* right or prev direction */
        .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
        .carousel-item-prev.carousel-item-right + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(100%, 0, 0);
            visibility: visible;
            display: block;
            visibility: visible;
        }
    }
    .facts
    {
        background-position: 80%;
        background-size: 300px;
    }
    .content .col-md-9 p
    {
        width: 95%;
    }
    .full-profile .col-md-4 .btn
    {
        max-width: 255px;
    }   
    .full-profile > .row > div:first-child
    {
        text-align: left;
    }
    /*.secondary ol, .secondary ul
    {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
    }
    .secondary ol li:nth-child(even), .secondary ul li:nth-child(even)
    {
        border-bottom: 3px solid @olBorderColor;
    }*/
    .footer-left, .footer-right
    {
        text-align: left;
    } 
    .tiles .card
    {
        max-width: 148px;
        height: 148px;
        font-size: 0.9rem;
    }
    .tiles .card img
    {
        max-height: 114px;
    }
    .media
    {
        flex-direction: unset;
    }
    .news .card, .events .card
    {
        height: 350px;
    }
    .research-cta
    {
        border: none;
    }
    .research + .secondary .grid-section > div:nth-child(even) h2
    {
        padding-top: 0;
    }
    .events .card
    {
        height: 240px;
    }
    .resources .column .col-md-3 .card
    {
        height: 320px;
    }
    .resources .column .col-md-4 .card
    {
        height: 440px;
    }
    .resources .column .col-md-3 .resource-image, .partners .carousel-item.col-md-3
    {
        width: 150px;
        height: 100px;
    }
    .resources .column .col-md-3 .resource-image img
    {
        max-width: 150px;
        max-height: 100px;
        margin: auto;
    }
    .partners .carousel-item.col-md-3 img
    {
        max-width: 210px;
        max-height: 150px;
        margin: auto;
    }
    .resources .column .col-md-4 .resource-image, .partners .carousel-item.col-md-4
    {
        width: 210px;
        height: 105px;
    }
    .resources .column .col-md-4 .resource-image img, .partners .carousel-item.col-md-4 img
    {
        max-width: 210px;
        max-height: 105px;
    }
}