/* ———————— GENERAL ———————— */


*
    {
        box-sizing: border-box;
        transition: all 240ms cubic-bezier(1, 0, 0, 1); 
    }


html, body
    {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }


a
    {
        color: var(--almost-black);
        -webkit-text-fill-color: rgba(255,255,255,0); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 1.2px;
        -webkit-text-stroke-color: var(--almost-black);
        text-decoration: none;
        letter-spacing: .01em;
    }


a:hover
    {
        color: var(--almost-black);
        -webkit-text-fill-color: black; /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: black;
    }


border
    {
        position: fixed;
        z-index: 2400;
        height: 100vh;
        width: 100vw;
        border: var(--parchment) 24px solid;
        transition: all 480ms cubic-bezier(1, 0, 0, 1); 
        pointer-events: none;
    }

border .copyright
    {
        position: absolute;
        width: 100%;
        top: calc(100vh - 48px);
        text-align: right;
        color: var(--almost-black);
        opacity: 12%;
    }


section
    {
        position: relative;
        width: 100%;
        height: 100vh;
        
        left: 0px;
        
        margin: 0;
        padding: 0;
        
        display: flex;
        scroll-snap-align: start;
    }


copy, shot
    {
        position: absolute;
        width: 50%;
        height: 100%;
        padding: 4% 8%;
        overflow: hidden;
    }


copy
    {
        background-color: var(--parchment);
    }


img
    {
        position: relative;
        max-height: 100%;
        opacity: 0;
    }


.left, .right, .middle
    {
        display: flex;
        align-items: center;
    }


.left
    {
        left: 0;
        background-color: var(--bottle-green);
    }


.left h2, .left h3
    {
        color: white;
    }


.right
    {
        right: 0;
        background-color: var(--grape);
    }


.middle
    {
        height: 100%;
        width: 100%;
        background-color: var(--parchment);
    }

.middle h1, .middle h2
    {
        color: var(--almost-black);
        text-align: center;
        width: 100%;
    }

.middle img
    {
        height: 100%;
        width: auto;
        left: 50%;
            transform: translate(-50%,0);
    }


.left img, .right img
    {
        width: 100%;
    }


cta
	{
        font-family: fleisch-wurst,sans-serif;
        font-weight: 400;
        font-style: normal;
        
        font-size: 1.2em;
        line-height: 1.0;
        
		background: var(--parchment);
		color: var(--bottle-green);
		padding: 12px 24px;
		border-radius: 0px;
		position: relative;
		top: 60px;
        transition: all 480ms cubic-bezier(1, 0, 0, 1);
	}
	
	
cta:hover, cta:active
	{
		background: var(--bottle-green);
		color: var(--parchment);
		border-bottom: 4px solid var(--parchment);
	}






/* ———————— HOME ———————— */

.container
    {
        overflow: scroll;
        height: 100vh;
        scroll-snap-type: mandatory;
        scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: y mandatory;
    }


.hero
    {   
        position: fixed;
        
        margin: 0;
        padding: 0;
        
        background-size: cover;
        background-color: var(--bottle-green);
        background-blend-mode: overlay;
    }

logo
    {
        position: relative;
        display: flex;
        align-content: center;
        left: 50%;
            transform: translate(-50%,0);
        
        width: 24%;
    }


logo svg
    {
        width: 100%;
        height: auto;
        
        fill: var(--parchment);
    }

.intro div
    {
		position: relative;
        padding: 12%;  
    }

.intro svg
    {
        position: absolute;
        width: 4%;
        height: auto;
        top: 96px;
        left: 50%;
            transform: translate(-50%,0);
        
        fill: var(--bottle-green);
    }

.intro h2
    {
        top: 48px;
    }

.kit-overview .left
    {
        background-color: var(--almost-black);
    }

.kit-overview .right
    {
        background-color: var(--parchment);
    }

.kit-overview .right h1
    {
        font-size: 1.4em;
        line-height: 1.0em;
    }


.kit-overview cta
	{
        background: var(--bottle-green);
		color: var(--parchment);
	}


.kit-overview cta:hover
	{
        background: var(--parchment);
		color: var(--botle-green);
		border-bottom: 4px solid var(--bottle-green);
	}
	
	
.kit-overview cta a
	{
        color: var(--parchment);
        -webkit-text-fill-color: var(--parchment); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: var(--parchment);
        text-decoration: none;
        letter-spacing: .01em;
        text-decoration: line-through;
        
	}
	
	
.kit-overview cta a:hover
	{
        color: var(--bottle-green);
        -webkit-text-fill-color: var(--bottle-green); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: var(--bottle-green);
        cursor: not-allowed;
	}

#ordersClosed
    {
        opacity: 1;
        position: absolute;
        left: 16%;
        bottom: 12%;
    }

.kit .left
    {
        background-color: var(--bottle-green);
    }

.kit .left img, .left #kit-back
    {
        background-color: var(--bottle-green);
    }

.kit .right
    {
        background-color: var(--bottle-green);
    }

.kit .right img, .right #kit-back
    {
        background-color: var(--bottle-green);
    }

.cost .left, .cost .right
    {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-blend-mode: overlay;
    }

.cost .left
    {
        background-image: url(/img/kit/kit_jersey_front.png);
        background-color: var(--bottle-green);
    }

.cost .right
    {
        background-image: url(/img/kit/kit_gilet_front.png);
        background-color: var(--grape);
    }

.cost div
    {
        width: 100%;
    }

.cost h1
    {
        color: var(--parchment);
        width: 100%;
        text-align: center;
        line-height: 1em;
    }

.cost h1 body-copy
    {
        font-size: 0.4em;
    }

.detail .left
    {
        background-color: var(--parchment);
    }

.detail .left img
    {
        background-color: var(--bottle-green);
    }

.detail .right
    {
        background-color: var(--parchment);
    }

.detail .right img
    {
        background-color: var(--bottle-green);
    }

.bidon img
    {
        background-color: var(--parchment);
    }

.bidon .left, .bidon .right
    {
        background-color: var(--parchment);
    }

.bidon .left img
    {
        background-color: var(--bottle-green);
    }

.bidon .right img
    {
        background-color: var(--grape);
    }


.available-soon .middle
    {
        background-color: var(--bottle-green);
		text-align: center;
    }
	
	
.available-soon div
	{
		position: relative;
		top: 0;
        padding: 12%;
	}


.available-soon h1
    {
        color: var(--parchment);
        -webkit-text-fill-color: rgba(255,255,255,0); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--parchment);
        text-decoration: none;
        letter-spacing: .01em;
        line-height: 1.2em;
    }


.available-soon h2
	{
		color: var(--parchment);
	}


.available-soon cta
	{
        font-size: 2.0em;
        line-height: 1.0;
	}
	
	
.available-soon cta a
	{
        color: var(--almost-black);
        -webkit-text-fill-color: var(--almost-black); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: var(--almost-black);
        text-decoration: none;
        letter-spacing: .01em;
	}
	
	
.available-soon cta:hover a
	{
        color: var(--parchment);
        -webkit-text-fill-color: var(--parchment); /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: var(--parchment);
        text-decoration: none;
        letter-spacing: .01em;
	}








/* ———————— MOBILE ———————— */

@media only screen 
and (max-device-width : 812px) 	{
  
    
body
    {
        min-height: 100%;
    }

    
.container
    {
        overflow: scroll;
        height: 100vh;
        scroll-snap-type: none;
        scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: none;
    }

    
border
    {
        border: #fff 0px solid;
    }

    
a
    {
        -webkit-text-stroke-width: 1.0px;
    }
    
    
section
    {
        height: 100%; 
    }


.left, .right
    {
        display: inline;
    }
    
    
logo
    {
        width: 76%;
    }

    
logo svg
    {
        position: relative;
        width: 80%;
            left: 10%;
    }
    
    
copy, shot
    {
        position: absolute;
        width: 100%;
        overflow: hidden;
    }
    
shot img
    {
        margin-top: 4%;
    }
    
    
.right
    {
        top: 50%;
    }

    
.right div
    {
        border-top: 0px solid black;
    }

    
.right div p
    {
        padding: 0;
    }

.intro svg
    {
        width: 40px;
        top: -12px;
    }

.intro h2
    {
        top: 12px;
    }

.cost h1
    {
        top: 60px;
    }
	
.available-soon div
	{
		top: 0;
	}
    
}








/* ———————— IPAD PRO ———————— */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 

    
border
    {
        height: 100%;
        width: 100%;
    }

}








/* ———————— ANIMATION ———————— */


h2, h3, p, logo, img, #price-left, #price-right
    {
        opacity: 0;
        position: relative;
        transition: all 480ms cubic-bezier(1, 0, 0, 1);
        transition-delay: 0.24s;
    }


logo
    {
        top: 48px;
    }


logo.loaded
    {
        opacity: 1;
        top: 0;
    }


h2, h3
    {
        top: 24px;
    }


p
    {
        opacity: 0;
        top: -24px;
        transition-delay: 0.24s;
    }


#price-left
    {
        right: 48px;
    }


#price-right
    {
        left: 48px;
    }


#price-left.show
    {
        right: 0;
        opacity: 1;
    }


#price-right.show
    {
        left: 0;
        opacity: 1;
    }
    
.show
    {
        top: 0;
        opacity: 1;
    }