/* Core - CSS */

body
{
	font-family: "Quicksand";
}

/* - */

h1, h2, h3, h4
{
	color: #01a7e5;
	font-weight: 100;
}

a
{
	text-decoration: none;
	color: #01a7e5;
}

a:hover
{
	color: #ccc;
}

::selection {
  color: #eee;
  background: #01a7e5;
}
/* - */




/* - Hero - Home - */

/* - */


#hero-content
{
	display: grid;
	justify-content: start;
	align-content: start;
	padding-left: 32px;
	padding-top: 32px;
	padding-bottom: 64px;
	grid-gap: 16px;
}

@media( min-width: 768px )
{
    #hero-content
    {
        grid-row: 1;
        grid-column: 1 / span 3;
        
        align-content: center;  
        justify-content: center;
        
        background-color: #fff;     
        
        margin: 16px;
        width: 50%;
        
        z-index: 2;
		
		
    }
}

@media( min-width:992px )
{
    #hero-content
    {
        /* margin: 0; */
        width: 500px;
    }
}

@media( min-width:1200px )
{
    #hero-content
    {
        width: 600px;
    }
}

/* - */


@media( min-width: 768px )
{
	#hero-container .banner
	{
		margin-left: 10%;
	}
}

/* - */

#hero-img
{
    display: grid;
    justify-content: center;
}

#hero-img img
{
    max-width: 100%;
}

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

/* - */

#hero-logo
{
	margin-bottom: 16px;
	max-width: 80%;
}

/* - */

#hero-txt-1
{
	font-size : 20px;
	font-weight : 100;
}

#hero-txt-2
{
	font-size: 32px;
	letter-spacing: 4px;
	font-weight: 100;
}

#hero-txt-3
{
	font-size: 20px;
	font-weight: 100;
}

.hero-txt
{
	color : #01a7e5;
}

/* - */

#empty-space
{
    height: 1024px;
}


/* - */ 

#hero-container .banner
{
	width: max-content;
	padding: 16px 32px;
	height: 128px;
	display: grid;
	align-self: center;
}

/* - */

.list p
{
	border-left: solid #01a7e5 2px;
	padding-left: 8px;
}

.list
{
	display: grid;
	padding: 16px 0 16px 32px;
}