/* slider.css */


#slide-1
{
	background-color: #da1c1a;
	padding: 16px;
	justify-self: center;
}








#slider-container
{
    width: 100%;
    display: grid;
    background-color: #222;
}

/* - -  - -  - -  - -  - -  - -  - -  - -  - - */

.slide-img
{
    grid-row: 1;
    grid-column: 1;

    align-self: center;

    max-width: 100%;

    z-index: 1;
}

@media( min-width: 768px )
{
    .slide-img
    {
        grid-column: 1/span 3;			
    }
}

/* - -  - -  - -  - -  - -  - -  - -  - -  - - */


#slide-cover
{
    z-index: 2;
	align-self: center;
	justify-self: center;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.2;
	grid-row: 1;
	grid-column: 1/span3;
}



/* - -  - -  - -  - -  - -  - -  - -  - -  - - */

.slide-con-1
{
	width: 100%;
	height: 100%;
	position: relative;
	display: grid;
	grid-column: 1/span3;
	grid-row: 1;
	z-index: 1;
}

.slide-con-2
{
	overflow: hidden;
	display: grid;
	justify-content: center;	
	align-content: center;
    max-height: 500px;
}

.slide-con-2 img
{
    width:100vw;
}

/* - -  - -  - -  - -  - -  - -  - -  - -  - - */



.slide-txt
{
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    grid-gap: 16px;
    width: 80%;

    max-width: 100%;

    justify-self: center;

    margin: 32px 0;

    z-index: 3;
}

@media( min-width: 768px )
{
    .slide-txt
    {
        grid-column: 2;
        align-self: center;
        grid-gap: 24px;
		
        /* margin-bottom: 64px; */
        /* width: 100%; */			
    }
}

/* - */

.slide-txt *
{
    color: #fff;

}

/* - */

@media( min-width: 768px )
{
    .slide-txt h1
    {
        font-size: 32px;
    }
}

/* - */

.slide-sub
{
    color: #fff;
}

@media( min-width: 768px )
{
    .slide-sub
    {
        font-size: 24px;
		line-height: 32px;
    }
}

/* - */

.slide-btn
{
    background-color: rgb( 212, 196, 130);
    justify-self: start;
    padding: 16px 32px;
    
    border-radius: 32px;    
    border: solid #fff 2px;
    
    transition: ease background .4s, ease border .4s;
}

.slide-btn a
{
    text-decoration: none;
}

/* - */	

@media( min-width: 768px )
{
    .slide-btn
    {
        margin-top: 8px;
        font-size: 18px;
    }
}

.slide-btn:hover
{
    background-color: #111;
    /* border: solid #222 2px; */
    cursor: pointer;
}

/* - */


/* - */



@media( min-width:768px )
{
	#slide-1
	{
		padding: 40px;
	}
}

@media( min-width: 1200px )
{
	#slide-1
	{
		justify-self: start;
		width: max-content;
		margin-left: 128px;
	}
}