/* ctapp page style */

.ctapp-pane-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.ctapp-pic-placement {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* align-items: flex-start; */
    justify-content: center;
    flex-direction: column;
    /* border: solid;
    border-width: 0.01px; */
}

.ctapp-pic-placement-wborder{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* align-items: flex-start; */
    justify-content: center;
    flex-direction: column;    
}

.ctapp-pic-placement p {
    text-align: center;
}

.ctapp-pane-title {
    width: 70%;
    padding: 10px;
    margin: 20px;
    text-align: center;
    color: white;    
    align-self: center;
    border-width: 1px;    
    background-image: linear-gradient(to right, darkblue, blue, darkblue);
    border-radius: 10px;
}

.ctapp-pane-title h4{
    margin:0;
}

.ctapp-pic-wborder {
    width: 100%;
    padding: 5px;
    align-self: center;
    border: solid rgba(0,0,0,0.35);
    border-width: 0px;
    box-shadow: 0px 12px 3px rgba(0,0,0,0.15);
    transition: all 170ms fade-in-out;    
}

.ctapp-pic-wborder:hover, .ctapp-pic-wborder:focus {
    transform:scale(1.02);
}

.ctapp-pic {
    width: 100%;
    padding: 5px;
    align-self: center;   
}

.ctapp-pics {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: flex-end;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-basis: 100%;
}

.ctapp-pics-start {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: flex-start;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-basis: 100%;
}

.ctapp-pics-double {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: flex-end;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-basis: 100%;
}

.half-width-tab-div{
    width:50%;
    align-self: center;
}

.ctapp-pics-single {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
    align-items: flex-end;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-basis: 100%;
}

@media (max-width:820px) {
    .ctapp-pics {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: flex-end;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-basis: 100%;
    }
    .ctapp-pics-start {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: flex-start;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-basis: 100%;
    }
}

@media (max-width:576px) {
    .ctapp-pics {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
        align-items: flex-end;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-basis: 100%;
    }
    .ctapp-pics-double {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
        align-items: flex-end;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-basis: 100%;
    }
    .ctapp-pics-start {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
        align-items: flex-start;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-basis: 100%;
    }
    
    .half-width-tab-div{
        width:100%;
        align-self: center;
    }
}