#slider {
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
    cursor: pointer;
    font-size: 18px;
}

/* helper css, since we don't have images */
.pyschic {height: 400px; width: 400px;}
.crystal {height: 400px; width: 400px;}
.tomato  {height: 400px; width: 400px;}
.giphy  {height: 400px; width: 400px;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}

img{
	height: 400px;
	width: 400px;
}

.social{
    width: 50px;
    height: 50px;
}

p {
    text-align: left;
}

a:link {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    color: white;
    font-size: 110%;
    text-decoration: none;
}

 a:visited {
    color: white;
    font-size: 110%;
    text-decoration: none;
}

a:active {
    color: white;
    font-size: 110%;
    text-decoration: none;
    }
h4 {
    color: #333;
}

a.brand-logo.active {
    font-size: 2.1rem !important;
}