html{
	color: hsl(197, 14%, 40%);
	font-size: 1.5em;
	font-family: 'Open Sans', sans-serif;
}

body{
	padding: 1rem;

}

* {
	box-sizing: border-box;
	margin:0;
	font-size: 0.666666rem;
	line-height: 1rem;

	text-rendering: optimizelegibility;
	font-smooth: auto;
	-webkit-font-smoothing: auto;
}

#app{
	display: flex;
	margin: 0 auto;
	max-width: 36rem;
	width: 100%;

	justify-content: center;
	flex-flow: column;
}


.logo{
	width: 10rem;
	height: 2rem;
	background-image: url(./assets/logo.svg);
	background-repeat: no-repeat;
}

.navigation{
	display: flex;

	flex-flow: row;
	align-items: center;
	justify-content: space-between;
}

.loaded{
	margin-top: 0;
}

.loaded .logo{
	background-position: 0;
}


input{
	padding-right: 2.25rem;
	padding-left: .5rem;
	width: 20.5rem;
	height: 2rem;
	border: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	background-color: #fff;
	background-image: url(./assets/search.svg);
	background-position: right .125rem center;
	background-size: contain;
	background-repeat: no-repeat;
	color: hsl(197, 14%, 50%);
	font-size: .666666667rem;
	font-family: 'Open Sans', sans-serif;
}

::-webkit-input-placeholder {
    color:    HSL(0, 0%, 82%);
}
:-moz-placeholder {
   color:    HSL(0, 0%, 82%);
   opacity:  1;
}
::-moz-placeholder {
   color:    HSL(0, 0%, 82%);
   opacity:  1;
}
:-ms-input-placeholder {
   color:    HSL(0, 0%, 82%);
}

input:focus{

}

.content{
	display: flex;

	flex-flow: column;
	justify-content: center;
	align-items: center;
}


.buttons-container{
	position: sticky;
	top: 0rem;
	z-index: 1;
	display: inline-flex;
	padding-top: .5rem;
	padding-bottom: .5rem;
	max-width: 36rem;
	width: 100%;
	background-color: #fff;

	flex-flow: row;
	justify-content: space-between;
}

.buttons-container button{
	width: 5rem;
	height: 2rem;
	border: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	background-color: #fff;
	color: hsl(197, 14%, 60%);
	text-align: center;
	font-size: 1.4rem;
	font-family: "Open Sans", sans-serif !important;
	cursor: pointer;
}

.buttons-container button:hover{
	border: 1px solid #fff;
	background: #85E0B3;
	color: #FFF;
}

.buttons-container button:disabled{
	color: HSL(0, 0%, 92%);
}

.buttons-container button:disabled:hover{
	border: 1px solid HSL(0, 0%, 92%);
	background: #fff;

}

ul.list{
	display: flex;
	margin-top: .5rem;
	padding: 0;
	max-width: 36rem;
	width: 100%;

	flex-flow: column;
	justify-content: center;
}

ul.list a{
	text-decoration: none;
}

ul.list li{
	display: flex;
	height: 3rem;
	border-bottom: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	list-style-type: none;
	cursor: pointer;

	justify-content: space-between;
}

ul.list li:nth-child(2n){
	background: hsl(0, 0%, 97.9%);
}

ul.list li:hover{
	background: #85E0B3;
}


ul.list li:hover > .movie-name .release_date,
ul.list li:hover > .movie-details .value{
	color: #fff;
}
ul.list li:hover > .movie-name .title{
	color: #FFF;
}

ul.list li:hover > .movie-details .label{
	color: #FFF;
}


ul.list li .poster{
	margin: .5rem;
	min-width: 2rem;
	height: 2rem;
	background-image: url(./assets/no-poster.svg);
	background-size: cover;
}

ul.list li .movie-name{
	padding-top: .55rem;
	padding-left: 0;
	min-width: 6rem;
	max-width: 18rem;
	width: 100%;
}

ul.list li .movie-name .title{
	display:block;
	overflow: hidden;
	width: 100%;
	color: hsl(197, 14%, 40%);
	text-overflow:ellipsis;
	white-space: nowrap;
	font-weight: 400;
	font-size: 0.666666667rem;
}

ul.list li .movie-name .release_date{
	color: hsl(197, 14%, 60%);
	font-size: .5rem;
}

ul.list li .movie-details{
	display: flex;
	padding-right: 0.25rem;
	padding-left: 1rem;
	width: 15rem;

	flex-flow: row;
	justify-content: space-between;
}

ul.list li .movie-details .value-container{
	width: 5rem;
	text-align: center;
}


ul.list li .movie-details .value{
	padding-top: .55rem;
	color: hsl(197, 14%, 60%);
	font-size: 0.83333333rem;
}

ul.list li .movie-details .label{
	color: hsl(197, 14%, 75%);
	text-transform: uppercase;
	font-size: .5rem;
}



.loading-circle{
	margin: 0 auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 2rem;
	height: 2rem;
	border: .25rem solid #EAEAEA;
	border-top-color: rgb(238, 238, 238);
	border-top-color: hsl(197, 14%, 80%);
	border-bottom-color: rgb(238, 238, 238);
	border-bottom-color: hsl(197, 14%, 80%);
	border-radius: 50%;
	animation: rotating 1s infinite cubic-bezier(1,.05,.62,.58);
}

@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(540deg);
	}
}

.movie{
	display: flex;
	margin-top: 1rem;
	width: 100%;

	flex-flow: row;
	justify-content: flex-start;
}

.movie .details{
	display: flex;
	padding-left: 1rem;
	width: 100%;

	flex-flow: column;
}

.movie .poster{
	min-width: 8rem;
	height: 12rem;
	border: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.movie .title{
	margin-bottom: 1rem;
	font-weight: 300;
	font-size: 1.33333333rem;
	line-height: 1.5rem;
}

.movie span.release-date{
	color: #A48697;
	font-size: 1.33333333rem;
}

.movie .overview{
	margin-bottom: 1rem;
	color: #777;
	text-align: justify;
	font-weight: 300;
	font-size: 0.916666667rem;
	line-height: 1.3333333rem;
}

.movie .values-container{
	display: flex;
	margin-bottom: 1rem;
	margin-left: 1rem;

	flex-flow: column;
}

.movie .value-element{
	margin-bottom: .5rem;
	padding-top: .55rem;
	width: 4rem;
	height: 3rem;
	border: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	background: #FFF;
	text-align: center;
}

.movie .value-element .value{
	font-size: 0.83333333rem;
}

.movie .value-element .label{
	color: #A48697;
	text-transform: uppercase;
	font-size: .5rem;
}

.movie .imdb-link{
	color: #98758A;
	text-decoration: none;
	line-height: 2rem;
}

.movie ul.genres{
	display: flex;
	padding-left: 0;

	flex-flow: row;
	flex-wrap: wrap;
}

.movie ul.genres li{
	margin: 0rem 0.5rem 0.5rem 0rem;
	padding-right: .5rem;
	padding-left: .5rem;
	height: 1.5rem;
	border: 1px solid HSL(0, 0%, 92%);
	border-radius: 3px;
	color: #A48697;
	list-style-type: none;
	text-align: center;
	white-space: nowrap;
	line-height: 1.5rem;
}

.movie ul.production_companies,
.movie ul.production_countries{
	padding-top: .25rem;
	padding-left: 1rem;
}

.movie .production{
	display: flex;
	color: #777;

	flex-flow: row;
	justify-content: flex-start;
}

.movie .production div{
	margin-right: 1rem;
}

.not-found{
	margin-top: 2rem;
	text-align: center;
	font-weight: 300;
	font-size: 1.33333333rem;
	line-height: 1.5rem;
}

.not-found .image{
	margin: 0 auto;
	width: 10rem;
	height: 10rem;
	background-image: url(./assets/404.svg);
	background-size: cover;
	background-repeat: no-repeat;
}



footer{
	display: flex;
	margin: 0 auto;
	margin-top: 2rem;
	max-width: 36rem;
	width: 100%;

	justify-content: space-between;
	flex-wrap: wrap;
}

footer .author{
	font-size: .5rem;
	line-height: 1.5rem;
}

footer a{
	color: hsl(197, 14%, 40%);
	text-decoration: none;
	font-size: .5rem;
}

footer .themoviedb-logo{
	width: 4rem;
	height: 1.6rem;
	background-image: url(https://www.themoviedb.org/assets/static_cache/0f4a7f7476ed84b3527c3f993de82a9c/images/v4/logos/powered-by-rectangle-blue.svg);
	background-repeat: no-repeat;
	filter: opacity(20%);
}

@media all and (max-width: 50rem){
	input{
		width: 14rem;
	}
}

@media all and (max-width: 48rem){
	.movie{
		flex-wrap: wrap;
	}

	.movie .details{
		margin-right: .5rem;
		padding-right: 1rem;
		padding-left: 0;
		width: 65%;

		order: 0;
	}
	.movie .poster{
		width: 30%;
		height: 10rem;

		order: 1;
	}
	.movie .values-container{
		margin: 1rem 0;
		width: 100%;

		order: 2;
		flex-flow: row;
		justify-content: space-around;
	}

	.movie .poster, .movie .details{
		width: 100%
	}
	.movie .details{
		margin-top: 1rem;
		margin-right: 0;
		padding-right: 0;
		padding-left: 0;

		order: 1;
	}

	.movie .values-container{
		order: 2;
	}
	.movie .poster{
		margin-bottom: 1rem;
		background-size: contain;

		order: 0;
	}

	.movie .production{
		flex-flow: column;
	}

	.movie .production div{
		margin-top: 1rem;
	}
}


@media all and (max-width: 40rem) {
	.logo{
		width: 9rem;
	}
	input{
		width: 100%;
	}
	ul.list li{
		margin-bottom: .5rem;
		padding: .25rem;
		padding-bottom: .5rem;
		height: auto;

		flex-flow: row;
		flex-wrap: wrap;
	}

	ul.list li .movie-details{
		margin-right: .25rem;
		padding: 0;
		max-width: 100%;
		width: 100%;

		order: 2;
	}

	ul.list li .poster{
		margin: .25rem;
		min-width: 0;
		max-width: 100%;
		width: 100%;
		height: 12rem;
		background-position: center;

		order: 1;
	}

	ul.list li .movie-name{
		padding: .25rem;
		min-width: 100%;
		max-width: 100%;
		text-align: center;

		order: 0;
	}
	ul.list li .movie-name .title{
		font-size: 0.833333333rem
	}
}

@media all and (max-width: 28rem) {
	.input{
		/*margin-left: 1rem;*/
		/*width: 100%;*/
	}
	.logo{
		width: 4rem;
		background-position-x: -5.25rem;
	}

	ul.list li .movie-details{
		margin-right: .25rem;
		margin-left: .25rem;
		padding: 0;
		max-width: 3rem;
		width: 100%;

		order: 2;
		flex-flow: column;
		justify-content: center;
	}

	ul.list li .poster{
		max-width: 60%;
		height: 6rem;
		background-position: 0;
	}

	ul.list li .movie-details .value-container{
		width: 3rem;
	}

	ul.list li .movie-details .value{
		padding-top: 0;
		color: hsl(197, 14%, 40%);
		font-size: 0.583333333rem;
	}

	ul.list li .movie-details .label{
		color: hsl(197, 14%, 65%)
	}

	ul.list li .movie-name{
		text-align: left;
	}

	ul.list li .movie-name .title{
		font-size: 0.666666667rem;
	}
}

@media all and (max-width: 24rem) {

	footer{
		justify-content: center;
	}
	footer > *{
		width: 100%;
		text-align: center;
	}

	footer .themoviedb-logo{
		margin-top: .5rem;
		width: 100%;
		background-position: center;
	}
}