@media only screen and (max-width: 1400px) {

    nav {
        width: 80%;
    }

    nav ul {
        display: block;
        font-size: 1.3vw;
    }

    nav ul li {
        margin-left: 20px;
        display: inline-block;
    }

    header {
        height: 66px;
    }
	
	.search input[type=text] {
		font-size: 18px;
	}
	
	header .search-icon {
		top: 6px;
	}

    .logo img {
        width: 80%;
    }

    .search {
        height: 40px;
    }

    .search img {
        height: 80%;
    }

    .search input {
        font-size: 17px;
        padding-left: 10px;
    }

    .ui-autocomplete .ui-menu-item {
        padding-left: 10px;
    }

    .autocomplete-container {
        font-size: 14px;
    }

}

@media only screen and (max-width: 1200px) {

    nav {
        width: 100%;
    }

    .search {
        height: 30px;
    }

    .search input {
        font-size: 15px;
        padding-left: 5px;
    }

    .ui-autocomplete .ui-menu-item {
        padding-left: 5px;
    }

    .autocomplete-container {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1100px) {
    /*header .search {
        display: none;
    }*/

    nav ul {
        font-size: 1.5vw;
    }

    .question .bin {
        width: 90%;
        background-size: 90%;
    }

    .question .bin-label {
        width: 6vw;
        height: 6vw;
    }

    .text-label {
        width: 6vw;
        font-size: 15px;
    }

    .pick-button {
        margin: 0 auto;
    }

    .question-header {
        height: 155px;
    }

    .answer {
        width: 20%;
        padding: 0 1%;
    }

    .question .description, .question .correct-description, .question .incorrect-description {
        font-size: 2.2vw;
    }
}

@media only screen and (max-width: 960px) {
    div.info > div {
        width: 100%;
    }

    .info .icon {
        width: 25%;
    }

    h1, .results h3 {
        font-size: 5vw;
    }

    h2 {
        font-size: 3vw;
        margin-top: 15px;
    }

    .results h4 {
        font-size: 4vw;
    }

    .question .description, .question .correct-description, .question .incorrect-description {
        font-size: 2.2vw;
    }

    .score-line {
        font-size: 80px;
    }

    .question-answer .row {
        height: 80px;
    }

    .info.full-width .icon {
        max-width: inherit;
        background-size: auto !important;
    }

    .eco-trick, .eco-trick .content {
        margin-top: 20px;
        margin-left: 10px;
    }

    .eco-trick, .eco-trick .content > div {
        margin-left: 10px;
    }

    .eco-trick h2, .eco-trick .content {
        text-align: left;
    }

    .eco-trick h2 {
        font-size: 6vw;
    }

    .eco-trick .content, .eco-trick a.button {
        font-size: 4vw;
    }

    .eco-trick .content {
        margin-bottom: 10px;
    }

    .eco-trick-glyph {
        margin-right: 0;
    }


}

@media only screen and (max-width: 850px) {

    .menu-toggle {
        display: block;
    }
	
	.menu-toggle button {
		background: transparent;
		border: 1px solid transparent;
		box-shadow: none;
	}

    .big-button {
        font-size: 4vw;
    }

    .right-header {
        position: relative;
    }

    nav {
        position: fixed;
        top: 67px;
        right: auto;
		left: 0;
        z-index: 99;
        width: 100%;
        display: none;
    }

    nav ul {
        font-size: 18px;
		margin-left:0 ;
		padding-left: 0;
    }
	
	footer > .wrapper > div {
	width: 100%;
	margin: 15px 0;
}

footer > div {
	display: block;
}

    nav ul li {
        display: block;
        background: #000000 url('assets/images/arrow.png') no-repeat 95% 50%;
        padding: 15px;
        border-bottom: 1px solid #FFFFFF;
		margin-left: 0;
    }

    nav ul li a {
        color: #FFFFFF;
    }

    .result-description > img {
        width: 15%;
        padding: 0;
    }

    .next {
        padding: 5px 20px;
        font-size: 12px;
        margin-top: 10px;
    }

    .waste img {
        width: 80%;
    }

    .question-answer .row {
        height: 80px;
    }

    .answers {
        margin-top: 15px;
        flex-wrap: wrap;
    }

    .question .bin {
        background: #FFFFFF;
        width: 100%;
        height: auto;
        display: table;
    }

    .question .bin-label {
        width: 2vw;
        height: 10vw;
        display: table-cell;
        border-radius: 0;
    }

    .question.question .bin .text-label {
        font-size: 3vw;
        display: table-cell;
        vertical-align: middle;
    }

    .answer {
        width: 100%;
        margin-bottom: 2px;
        padding: 0;
    }

    .pick-button {
        display: none;
    }

    .question .description, .question .correct-description, .question .incorrect-description {
        font-size: 3vw;
    }

    .inner-search .button-trigger {
        font-size: 15px;
    }

    .question-answer .dot span {
        height: 35px;
        width: 35px;
        line-height: 35px;
        font-size: 17px;
    }

    .question-answer .fr4 {
        width: 80px;
    }

    .question-answer .fr2 {
        width: auto;
    }

    .mobile-arrow {
        display: block;
    }
	.movies {
		display: inherit;
		width: 100%;
	}
	.movies div {
		margin: 2% 5%;
		width: 90%;
	}
}

@media only screen and (max-width: 600px) {
	
header .outer-wrapper {
display: block;
}	

.menu-toggle {
	position: absolute;
	right: 0;
	top: -20px;
}

.header-serch {
	margin-top: 20px;
}

header {
	height: auto;
}

.logo {
	max-width: 250px;
}

    h1, .results h3 {
        font-size: 6vw;
    }

    h2 {
        font-size: 4vw;
    }

    .waste-answer {
        display: block;
    }

    .waste-answer .bin {
        margin-top: 20px;
    }

    .long-description {
        display: block;
    }

    .text-pane {
        width: 100%;
    }

    .pictogram {
        width: 100%;
        margin-bottom: 20px;
    }

    .col-1-2 {
        width: 100%;
    }

    .waste-breakdown.two-col .breakdown-answer {
        width: 100%;
    }

}

@media only screen and (max-width: 500px) {

    div.info {
        display: block;
    }

    div.info > div {
        display: block;
    }

    .info .icon {
        width: 100%;
        height: 150px;
        margin: 10px 0;
        border-right: 0;
    }

    .info .pane .icon {
        background-size: auto 100% !important;
    }

    .info .description {
        border-top: 1px solid #FFFFFF;
        display: block;
        width: 100%;
    }
	
	.how {
		font-size: 16px;		
	}
	.how .number {
		width: 24px;
		height: 24px;
		line-height: 24px;
	}
	
	.why-segregate ul li.yes {
    background: url(assets/images/yes-green.svg) 0 10px no-repeat;
	}
	
	.why-segregate ul li {
		font-size: 16px;
		background: url(assets/images/star.svg) 0 10px no-repeat;
	}
}