/************************************************************************************
smaller than 1350px
*************************************************************************************/
@media screen and (max-width: 1350px) {

	div#history div#year,
	div#history div#year div.color {
	    font-size: 25vw;
	}
	div#history div#year span {
	    width: 13.25vw;
	    flex: 0 0 13.25vw;
	}
	div#history div.pagination-years span {
	    width: 65px;
	    font-size: 24px;
	    margin-right: 35px;
	}

}

/************************************************************************************
smaller than 991px
*************************************************************************************/
@media screen and (max-width: 991px) {

	body #wrapper-landing {
	    font-size: 18px;
	}

	div.head-landing div#logo {
	    max-width: 42%;
	}

	div#history div#year {
	    margin-top: 1rem;
	}
	div#history div#year,
	div#history div#year div.color {
	    font-size: 43vw;
	}
	div#history div#year span {
	    width: 23vw;
		flex: 0 0 23vw;
	}

	div#history {
	    padding: 2rem 0;
	    height: auto;
	    min-height: 100vh;
	}
	div#history div.pag {
		padding-left: 85px;
	}
	div#history div.pagination-years {
		z-index: 2;
		position: absolute;
		top: 100%;
		left: 15px;
	    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%, rgb(255, 255, 255) 100%), url('https://mayoral.elcuartel.com.es/img/mayoral-80-line.jpg') repeat-y center top;
	    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%, rgba(255,255,255,1) 100%), url('https://mayoral.elcuartel.com.es/img/mayoral-80-line.jpg') repeat-y center top;
	    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%, rgb(255, 255, 255) 100%), url('https://mayoral.elcuartel.com.es/img/mayoral-80-line.jpg') repeat-y center top;
	    max-width: 65px;
	}
	div#history div.pagination-years span {
	    font-size: 24px;
	    margin: 0 0 35px 0;
	    display: block;
	    float: none;
	}

	div.to-video {
	    text-align: center;
	    padding: 3rem 0 5rem 0;
	}

	div#box img.image-parallax {
	    max-width: 25%;
	    max-height: 15vh;
	}
	div#box img#l1 {
	    top: 13%;
	    left: 5%;
	}
	div#box img#l2 {
	    top: 19%;
	    left: 40%;
	}
	div#box img#l3 {
	    top: 8%;
		left: 69%;
	}
	div#box img#l4 {
	    top: 39%;
		left: -8%;
	}
	div#box img#l5 {
	    top: 81%;
		left: 59%;
	}
	div#box img#l8 {
	    top: 57%;
		left: 77%;
	}
	div#box img#l9 {
	    top: 28%;
		left: 84%;
	}
	div#box img#l10 {
	    top: 62%;
		left: 6%;
	}
	div#box img#l12 {
	    top: 85%;
	    left: 2%;
	}
	div#box img#l13 {
	    top: 66%;
	    left: 38%;
	}
	div#box img#l6,
	div#box img#l7,
	div#box img#l11 {
	    display: none;
	}
}

/************************************************************************************
smaller than 768px
*************************************************************************************/
@media screen and (max-width: 768px) {
	
	#wrapper-landing h1 {
	    font-size: 45px;
	}
	div#banner p {
	    font-size: 27px;
	}
	div#banner a.b {
	    font-size: 22px;
	}

	div#history div.pag div.pager-history ul li a {
	    font-size: 25px;
	}
	div#history div.pag div.pager-history ul li.prev:before {
	    right: 10px;
	}
	div#history div.pag div.pager-history ul li.next:before {
	    left: 10px;
	}
	div#history div.pag div.pager-history ul li.prev {
	    padding-right: 40px;
	}
	div#history div.pag div.pager-history ul li.next {
	    padding-left: 40px;
	}

	div#history div.pag div.list {
	    max-height: calc(100vh - 50vw);
	}

	#wrapper-landing h2 {
	    font-size: 30px;
	}

	div#ecofriends div.row {
	    flex-direction: column-reverse;
		justify-content: space-around;
		height: 100%;
	}
	div#contest div.col,
	div#ecofriends div.col {
	    flex: 0 0 auto;
	}
	

	div#ecofriends {
	    padding: 4rem 0;
	    min-height: 800px;
	}
	div#ecofriends h2 {
	    font-size: 30px;
	}
	div#ecofriends h2 span {
	    font-size: 53px;
	}
	div#ecofriends img {
		max-width: 75%;
		max-height: 30vh;
		margin: 30px auto;
	}
}

/************************************************************************************
smaller than 768px
*************************************************************************************/
@media screen and (max-width: 768px) {
	div#contest {
	    background: url('https://mayoral.elcuartel.com.es/img/mayoral-80-bg-concurso-mb.jpg') no-repeat center bottom;
	    background-size: cover;
	    padding: 4rem 0;
	    min-height: 820px;
	}
	div#contest div.row {
	    flex-direction: column-reverse;
	    justify-content: flex-end;
	    height: 100%;
	}
	div#contest h2 {
	    font-size: 32px;
	}
}