#codecard-banner {
    padding: 5px;
    margin-bottom: 20px;
}

.main-carousel {
	min-height: 300px;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.4s;
}

.main-carousel.is-hidden {
	display: none;
}

.main-carousel.flickity-enabled {
  opacity: 1;
}

.main-carousel.is-fullscreen {
	margin-top: 75px;
}

.main-carousel.is-fullscreen .carousel-cell {
	height: 90%;
}

.carousel-cell {
	width: 66%;
	margin-right: 10px;
	background: linear-gradient(90deg, #EEF 60%, #777 39%);
	border-radius: 5px;
}

.carousel-cell:not(.is-selected) {
    background: #757582d1;
}

.carousel-cell-inner h4 {
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 15px 0;
    background-color: #f1571c;
}

.carousel-cell:not(.is-selected) h4 {
    background-color: #77280acf !important;
}

.carousel-cell-content {
	margin: 25px 0;
	text-align: center;
}

.carousel-cell-content span {
	font-size: 20px;
	color: white;
}

.carousel-cell:not(.is-selected) span, .carousel-cell:not(.is-selected) pre code {
	color: black;
}

.carousel-cell-content-1, .carousel-cell-content-2 {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
}

.carousel-cell-content-1 {
    width: 60%;
}

.carousel-cell-content-2 {
    width: 39%;
}

.pre-wrapper {
    text-align: center;
}

.carousel-cell-inner pre {
    text-align: left;
    display: inline-block;
    margin: 0;
    font-size: 20px;
}

.carousel-cell-inner pre code {
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    font-size: 20px;
}

.flickity-page-dots {
	display: none;
}

.flickity-page-dots .dot {
	background-color: #f1571c !important;
}

.flickity-button {
	background-color: #f1571c !important;
	z-index: 2;
}

.flickity-button-icon {
	color: white !important;
}

button.copy {
    position: absolute;
    bottom: 5px;
    left: 5px;
    border-radius: 120px;
    color: white;
    padding: 6px 8px;
    cursor: pointer;
    background-color: #222;
    border: none;
    width: 60px;
}

button.copy:hover, button.info:hover, button.info.clicked {
	color: #333333;
    font-weight: bold;
    background-color: #f1571c;
}

button.copy:active, button.info:active {
	background-color: #bb4214 !important;
}

button.info {
	display: none;
	position: absolute;
    bottom: 5px;
    right: 5px;
    border-radius: 60px;
    color: white;
    padding: 3px 3px;
    cursor: pointer;
    background-color: #222;
    border: none;
    width: 30px;
    font-family: 'IM Fell Great Primer', serif !important;
}

button.info:focus {
	box-shadow: none;
}

.carousel-cell:not(.is-selected) button.copy {
	background-color: #312c2acf !important;
    color: transparent;
	cursor: grab !important;
}

#search-bar {
	margin: 0 auto 15px auto;
    width: 75%;
    border-radius: .3rem;
}

#search-bar input::placeholder {
	color: #4950579e;
}

#search-bar input.text-highlight::placeholder {
	color: #f1571c;
	font-weight: 600;
}

#search-bar input:focus {
	border: none;
	box-shadow: none;
	z-index: 0 !important;
}

#search-bar input:focus::placeholder {
	color:transparent;
}

.tutorial {
	font-style: italic;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.hide-tutorial {
    font-style: italic;
    font-weight: 600;
    cursor: pointer;
}

button.next-step {
	font-size: 14px;
    font-style: italic;
    margin-right: 10px;
    background-color: black;
    padding: 3px;
    border-radius: 3px;
    color: white !important;
}

button.next-step:hover {
    background-color: #f1571c !important;
    color: black !important;
}

.flickity-page-dots {
	bottom: -25px;
}

@media only screen and (max-width: 991px) {
	
	.carousel-cell {
		background: #EEF;
	}
	
	.carousel-cell-content-1 {
	    width: 100%;
	}

	.carousel-cell-content-2 {
		display:none;
	}
	
	button.info {
		display: block;
	}
	
	.flickity-page-dots {
		bottom: 0;
	}
	
}

@media only screen and (max-width: 650px) {
	
	#search-bar {
		width: 100%;
	}
	
	.main-carousel {
		min-height: 225px;
	}
	
	.carousel-cell-inner h4 {
		font-size: 26px;
	}
	
	.carousel-cell-inner pre {
		padding: 0 0 1em 0;
	}
	
	.carousel-cell-content pre code, .carousel-cell-content pre code span {
		font-size: 16px;
		line-height: 1 !important;
	}
	
	code[class*="language-"], pre[class*="language-"] {
		line-height: 1 !important;
	}
	
	button.copy {
		font-size: 12px;
		padding: 4px 8px;
	}
	
	.result-count {
	    display: none;
	}
	
}

@media only screen and (max-width: 550px) {
	
	.carousel-cell-inner h4 {
		font-size: 22px;
	}
	
	.carousel-cell-content pre code, .carousel-cell-content pre code span {
		font-size: 12px;
	}
	
}

@media only screen and (max-width: 450px) {
	
	.carousel-cell-inner h4 {
		font-size: 18px;
	}
	
	.carousel-cell-content pre code, .carousel-cell-content pre code span {
		font-size: 8px;
	}
	
}