body{ font-family: 'Roboto', sans-serif; } a { color: #045; } div#slider { width: 80%; max-width: 1000px; margin: 0 auto; } div#slider figure { position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; text-align: left; } div#slider figure img { width: 20%; height: auto; float: left; } div#slider { width: 80%; max-width: 1000px; overflow: hidden; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div#slider figure { position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; left: 0; text-align: left; animation: 30s slidy infinite; } #container{ margin:50px auto; padding: 20px; width:50%; } #container h2{ text-align:center; color:#045; } #quoteContainer{ padding:10px; margin:30px auto; text-align: center; } #buttonContainer{ width: 100%; text-align: center; } #quoteButton{ margin-top: 10px; border:2px solid #46b8da; color:#045; font-family: inherit; font-weight: bold; padding:5px; text-decoration: none; text-align: center; } #quoteButton:hover{ cursor:pointer; background:#09c; color: #fff; } #quoteButton:active{ cursor: pointer; } #quoteButton{ display: inline-block; } #quoteGenius{ font-size: x-large; font-weight: 500; text-align: center; color: #3388cc; } .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { text-shadow: none !important; } /*MEDIA QUERIES*/ @media screen and(max-width:760px){ #quoteButton,#addNew{ display: block; } } .carousel-item.active, .carousel-item-next, .carousel-item-prev{ display:block; }