/* Project Colours Displayed on each separate Titile */
.nikecolours {
    color: black;
    background-color: #D8D8D8;
    line-height: normal !important;
    font-weight: bold !important;

}

.tarcolours {
    color:#FFA100;
    background: linear-gradient(-45deg, rgba(23,23,20,1) 0%, rgba(67,67,67,1) 100%);
    line-height: normal !important;
    font-weight: bold !important;

}

.tartext {
    color:#FFA100;
    /* line-height: normal !important; */
    font-weight: bold !important;
}

.cgcolours {
    color:#ffffff;
    background: linear-gradient(-45deg, rgba(38,34,98,1) 0%, rgba(0,174,239,1) 100%);
    line-height: normal !important;
    font-weight: bold !important;

}

.cgtext {
    color:#ffffff;
    /* line-height: normal !important; */
    font-weight: bold !important;
}

/* Colours for colour description */
.ffffff {
    border-color:#ffffff !important;
    border: 40px solid;
    border-radius:50%; 
}

.black {
    border-color:#000000 !important;
    border: 40px solid;
    border-radius:50%; 
}

/*Nike Product Page*/

.d8d8d8 {
    border-color:#d8d8d8 !important;
    border: 40px solid;
    border-radius:50%;
}

.c07A613 {
    border-color:#07A613 !important;
    border: 40px solid;
    border-radius:50%;
}

.c076DA6 {
    border-color:#076DA6 !important;
    border: 40px solid;
    border-radius:50%;
}

.B5B5B5 {
    border-color:#B5B5B5 !important;
    border: 40px solid;
    border-radius:50%;
}

/*Targazon*/

.ffa100 {
    border-color:#ffa100 !important;
    border: 40px solid;
    border-radius:50%;    
}

.ff7900 {
    border-color:#ff7900 !important;
    border: 40px solid;
    border-radius:50%;     
}

.c171714 {
    border-color:#171714 !important;
    border: 40px solid;
    border-radius:50%;     
}

.c434343{
    border-color:#434343 !important;
    border: 40px solid;
    border-radius:50%;   
}


/* Font families & weight */


.bold {
    font-weight:bold;
}

.helvetica-neue {
    font-family: Arial, Helvetica, sans-serif
}

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

/* style for page */

h2 {
    color:#365EAB;
    font-size:2.1875em;
    font-weight:bold;
}

.intro-piece {
    width:100%;
    display: block;
    /* height:91.21706399vh; */
    height:60vh;
    padding-top:3.5em;
}

.job-type {
    padding-top:3em;
    display:block;
    padding-left:2.25em;
}

.job-type p {
    display: block;
    padding:.4em 0;
    font-size:1.5em !important;
}

.indent {
    padding-left:2em;
    display:inline;
}

.project-title {
    display:block;
    position:relative;
    width:100%;
    top:20%;
    text-align: center;
    padding:0 2.25em;
}

.project-info-cont {
    display:block;
    width:100%;
    padding:0 3em;
    /* padding-top:5.625em; */
    margin-bottom:4.6875em; 
}

.project-media-showcase {
    padding-top:4.6875em;
    /* background: rgb(235,235,235);
    background: radial-gradient(circle, rgba(235,235,235,1) 0%, rgba(222,222,222,1) 100%); */
    width:100%;
    display:block;
    margin-bottom:3em;
    grid-column: 1/ span 2;
    text-align: center;
    position:relative;
}

/* VIDEOS */

.desktop_preview{
    width:100%;
}

.mobile_preview {
   display:inline-block;
   width:70%;
   margin:auto;
   padding-bottom:2em;
}

.slideshow-video {
    display:inline-block;
    width:90%;
    margin:0;  
    padding-bottom:0;
}


.slideshow-video video {
    width:inherit;
    height:inherit;
}

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

/*Targazon & CG Display Stuff*/

.logo_size_display {
    width:100%;
    display:inline-block;
    margin-bottom:10em;
    text-align: center;
}

.side_ui_display {
    width:100%;
    display:inline-block;
}

.slideshow {
    width:100%;
    position:relative;
    background-color: #000000;
}

#img1{
    text-align:center;
}

#img2 {
    text-align: center;
}

#next , #previous  {
    /* position:absolute; */
    width:50%;
    cursor:pointer;
    color:red;
    
}



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

.description-cont {
    display:block;

}

.one_column_desktop {
    padding-top:2em;
}


.one_column_desktop > h2 {
    padding-bottom:1em;

}

.column_content > h2 {
    padding-bottom:1em;

}

.column_content {
    padding-top:2em;
}

.description-cont > h2 {
    grid-column:1 / span 2;
    padding-bottom:1em;
    padding-top:1em;
}

.description-cont p {
    margin-bottom:1em;
}

.colours-cont {
    padding-top:3em;
}

.colour-list {
    padding-top:2em;
}

.colour-list > li {
    display:inline-block;
    margin-right:2.5em;

}

.colour {
    display:grid;
}

.colour p {
    padding-top:.5em;
    text-align: center;
}


.typography-cont {
    padding-top:3em;
    padding-left: 0;
    display:grid;
    width:100%;
}

.typography-cont h2 {
    grid-column: 1 / span 2;
}

.typography-cont > div {
    padding-top:1em;

}

.typography-cont a {
    text-decoration: underline;
}

.font-name {
    font-size:1em;
    font-weight:bold;
    display:inline-block;
}

.font-size {
    display:inline-block;
    margin-right:1em;
}

.preview-img-cont img {
    display:inline-block;
    width:17%;
}

.preview-img-cont img:nth-child(1) {
    width:83%;
}

@media only screen and (min-width:1080px) {

    .intro-piece {
        padding-top:70px;
        /* height:91.21706399vh; */
        height:60vh;
    }

    .job-type {
        padding-left:6.875em;
    }

    .job-type p {
        display: inline;
        padding-right: 1em;
    }

    .project-title {
        padding:0;
    }

    .project-info-cont {
        display:grid;
        padding:0 9.8125em 0 9.8125em;
        grid-template-columns: 1fr 1fr;  
    }

    .slideshow-video {
        /* display:inline-block; */
        height:550px;
        margin:0;  
        padding-bottom:0;
    }

    .mobile_preview {
        display:inline-block;
        width: 45%;
        margin:0;  
        padding-bottom:0;

    }

    .desktop_preview {
        display:inline-block;
        width:54%;
        position:absolute;
        top:15%;
    }


    .logo_size_display {
        width:40%;
        margin-right:3em;
        margin-bottom:2em;
    }
    
    .side_ui_display {
        width:55%;
    }

    .description-cont{
        column-gap: 4em;
        grid-column:1 / span 2;
    }

    .two_column_desktop {
        /* padding-top:1em; */
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:0 14%;

    }

    .colour-list li {
        margin-right:5em;
    }

    .typography-cont {
        padding-left:2em;
    }

    .no-padding-left {
        padding-left:0 !important;
    }
}



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

/* #slideshowbox {
    background-color:#e6e6e6;
    text-align: center;
} */

#cgslides, #tarslides {
    display:inline-block;
    text-align:center;
}

#cgslides img {
    width:80%;
    /* height:auto; */
    background-color:#e6e6e6;
    /* height:700px; */
}

#tarslides img {
    width:80%;
    background-color:#e6e6e6;
}

#slideshow-selection {
    /* text-align: center;
    display:inline; */
    width:100%;
    pointer-events: none;
}

.slide-selection {
    color:#939393;
    border: 15px solid;
    border-radius:100%; 
    width:15px;
    display:inline-block;
    margin:.5em;
    cursor: pointer;
    pointer-events: auto;

}

.slide-selection:hover {
    color:#403f3f;
}

.active {
    color:#403f3f;
}