:root {
    --headerSee: url(/video/video.mp4)
}


.header.spark {
    background-image: url(/pics/m2.jpg);
}

.header.more.center h2{
    align-items: center;
    max-width: fit-content;
    min-width: fit-content;
    scale: 1.7;
}


.h1F {
    font-weight: 500;
    font-size: xx-large;
    color: #d4d4d4;
}

/*--End of header--*/

.header.see {
    opacity: .8;
    position: relative;
}

.open-main {
    position: absolute;
}

.textdiv {
    position: absolute;
}

.video {
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

#myVideo {
    scale: 0.5;
}

@media (min-width: 733px) {
    #myVideo {
        scale: 1;
    }
}

@media (min-width: 1067px) {
    #myVideo {
        scale: 1.3;
    }
}

/*--Header--*/

.header.head {
    justify-content: start;
    background-image: url(/images/main0.jpg);
}

.header.head :nth-child(1) {
    margin-top: 70px;
}

/*--End of header--*/

/*--Cards--*/

.cards {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    width: calc(100% - 20px);
    margin: 10px;
    height: fit-content;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 122px;
}

@media (min-width: 744px) {
    .cards {
        max-width: 744px;
        grid-template-rows: 135px;
        grid-auto-rows: 135px;
    }
}

@media (min-width: 1067px) {
    .cards {
        max-width: 1440px;
        grid-template-rows: 190px;
        grid-auto-rows: 190px;
    }
}

@media (max-width: 743px) {
    .cards {
        max-width: 434px;
    }

    .card {
       height: 405px;
    }
}


.card {
    display: flex;
    margin: 10px;
    position: relative;
    align-items: center;
    flex-direction: column;
    background-color: #f3f3f3;
    border: solid #313131 1px;
    background-size: cover;
    background-position: center;
    border-radius: 25px;
    text-decoration: none;
    transition: all 460ms ease;
}

.card:hover {
    transform: scale(1.01);
}

.card h1 {
    margin-top: 31px;
}

@media (min-width: 744px) {
    
    .card {
        border-radius: 17px;
        margin: 6px;
    }

    .card.l {
        grid-gap: 10px;
        grid-column: span 12;
        grid-row: span 4;
    }

    .card.s.h {
        grid-column: span 7;
        grid-row: span 4;
    }

    .card.s.w {
       grid-column: span 5;
       grid-row: span 2;
    }

    .card.s.w.h {
       grid-column: span 5;
       grid-row: span 4;
    }
    
    .card.w {
        grid-column: span 5;
        grid-row: span 2;
    }

    .card.h {
        grid-column: span 4;
        grid-row: span 4;
    }

    .card.l.w {
        grid-column: span 6;
        grid-row: span 4;
    }
    
    .card.l.h {
        grid-column: span 8;
        grid-row: span 4;
    }
    
    
}

@media (min-width: 1067px) {
    .card {
        margin: 10px;
    }    
}

@media (max-width: 743px) {
    .card {
        grid-column: span 12;
    }


}

/*--End of cards--*/

/*--card things--*/

#a {
    background-image: url(/pics/m2.jpg);
}

#b {
    background-image: url(/pics/m3.jpg);
}

#c {
    background-image: url(/pics/m5.jpg);
}

#d {
    background-image: url(/pics/m1.jpg);
}

#e {
    background-image: url(/pics/n1.jpg);
}

#f {
    background-image: url(/pics/n2.jpg);
}

#g {
    background-image: url(/pics/n3.jpg);
}

#h {
    background-image: url(/pics/n4.jpg);
}

#i {
    background-image: url(/pics/n5.jpg);
}

#j {
    background-image: url(/pics/t1.jpg);
}

#k {
    background-image: url(/pics/t2.jpg);
}

#l {
    background-image: url(/pics/standalone.jpg);
    background-position-y: 70%;
}

/* apstract cards */


#aa {
    background-image: url(/pics/a1.jpg);
}

#bb {
    background-image: url(/pics/a2.jpg);
}

#cc {
    background-image: url(/pics/a3.jpg);
}

#dd {
    background-image: url(/pics/a4.jpg);
}

#ee {
    background-image: url(/pics/a5.jpg);
}

#ff {
    background-image: url(/pics/a6.jpg);
}

#gg {
    background-image: url(/pics/a7.jpg);
}

#hh {
    background-image: url(/pics/a8.jpg);
}

#ii {
    background-image: url(/pics/a9.jpg);
}

#jj {
    background-image: url(/pics/a10.jpg);
}

#kk {
    background-image: url(/pics/a11.jpg);
}

#ll {
    background-image: url(/pics/a12.jpg);
}

#mm {
    background-image: url(/pics/a13.jpg);
}

#nn {
    background-image: url(/pics/a14.jpg);
}

#oo {
    background-image: url(/pics/a15.jpg);
}

/*--card things--*/

#m {
    background-image: url(/pics/c4.jpg);
}

#n {
    background-image: url(/pics/c2.jpg);
}

#o {
    background-image: url(/pics/c3.jpg);
}

#p {
    background-image: url(/pics/c1.jpg);
}

#q {
    background-image: url(/pics/c5.jpg);
}

#r {
    background-image: url(/pics/c7.jpg);
}

#s {
    background-image: url(/pics/c8.jpg);
}

#t {
    background-image: url(/pics/c9.jpg);
}

#u {
    background-image: url(/pics/c10.jpg);
}

#v {
    background-image: url(/pics/c14.jpg);
}

#w {
    background-image: url(/pics/c12.jpg);
}

#x {
    background-image: url(/pics/c11.jpg);
}
#y {
    background-image: url(/pics/c13.jpg);
}


/* plants */

#pp {
    background-image: url(/pics/p1.jpg);
}

#qq {
    background-image: url(/pics/p3.jpg);
}

#rr {
    background-image: url(/pics/p2.jpg);
}

#ss {
    background-image: url(/pics/p8.jpg);
}

#tt {
    background-image: url(/pics/p5.jpg);
}

#uu {
    background-image: url(/pics/p6.jpg);
}

#vv {
    background-image: url(/pics/p7.jpg);
}

#ww {
    background-image: url(/pics/p4.jpg);
}

/* plants */

#r1 {
    background-image: url(/pics/r1.jpg);
}

#r2 {
    background-image: url(/pics/r2.jpg);
}

#r3 {
    background-image: url(/pics/r3.jpg);
}

#r4 {
    background-image: url(/pics/r4.jpg);
}


#logo {
    background-image: url(/images/logojames.png);
}


#logo2 {
    background-image: url(/images/logojames1.jpg);
}

#logo3 {
    background-image: url(/images/logojames2.jpg);
}

/*--End of card things--*/


/*--Div of items --*/


.rowdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 60px);
    max-width: 1400px;
}

.small.m {
    display: none;
}

.small {
    border-radius: 40px;
}

.cardslide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 10px);
    margin-top: 80px;
}

.cardslide .mid.l {
    border-radius: 30px;
    margin: 10px;
    border: solid rgb(68, 68, 68) 1px;
}

.cardslide.new .mid.l {
    border-radius: 0px;
    border: 0px;
    scale: .8;
}

.cardnew {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: fit-content;
    flex-direction: column;
}

.rowdivs {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 1080px;
    width: 100%;
    padding: 0;
    margin: 0 0 80px 0;
}

.rowdivs .amiri-bold, .rowdivs .amiri-reg, .rowdivs .arial, .rowdivs .syn-bold {
    margin: 20px 0 20px 0;
    padding: 0;
    min-width: 75px;
    height: fit-content;
}

.rowdivs .h2 {
    margin: 20px 10px 20px 10px;
    padding: 0;
    text-align: center;
}

.amiri-bold {
    font-family: "Amiri", serif;
    font-weight: bold;
}

.amiri-reg {
    font-family: "Amiri", serif;
    font-weight: normal;
}

.arial {
    font-family: "Arial", serif;
    font-weight: normal;
}


.syn-bold.h1, .syn-bold.h2 {
    font-family: "Syncopate";
    font-weight: bold;
    scale: .9;
}

.syn-bold.h1 {
    font-size: x-large;
}

.rowdivs .rowdivsh2 {
    font-size: xx-large;
}

.color {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: fit-content;
    width: fit-content;
}

.white {
    margin: 20px;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background-color: white;
    border: solid #191919 1px;
}

.black {
    margin: 20px;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background-color: black;
    border: solid #c5c5c5 1px;
}

.db0000 {
    margin: 20px;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background-color: #db0000;
    border: solid #191919 1px;
}

.a191919 {
    margin: 20px;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background-color: #191919;
    border: solid #bdbdbd 1px;
}


/*--End of div items--*/


/*--Media queries--*/

@media (max-width: 1200px) {
    .cardslide {
        display: flex;
        flex-wrap: wrap;
        width: 1080px;
    }
}

@media (max-width: 1067px) {
    .cardslide {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
    }
}

@media (max-width: 833px) {
    .rowdiv {
        flex-direction: column;
    }

    .rowdivs {
        flex-direction: column;
        width: calc(100% - 20px);
    }

    .rowdivs .rowdivsh2 {
        text-align: center;
    }

    .small.p {
        display: none;
    }

    .small.m {
        display: flex;
    }

    .cardslide {
        flex-wrap: nowrap;
        flex-direction: column;
        width: calc(100% - 30px);
    }
}

/*--End of media queries--*/