@font-face {
    font-family: 'Kindergarten Cam';
    src: url('KindergartenCam.woff2') format('woff2'),
        url('KindergartenCam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bobby Jones Soft';
    src: url('BobbyJonesSoft-Regular.woff2') format('woff2'),
        url('BobbyJonesSoft-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Medium.woff2') format('woff2'),
        url('Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.box-all{
	background: url(https://www.veris.com.ec/tareasquesalvan/images/fondo-all.png) no-repeat left bottom;
	background-size: 100% 100%;
}

ul{
	list-style: none;
}

li{
	display: inline-block;
	color: #5e3e76;
	font-weight: normal;
	text-transform: uppercase;
}

a img:hover{
	opacity: 0.8;
}

.menu-item{
	cursor: pointer;
	font-family: 'Bobby Jones Soft';
	border: 3px solid transparent;
}

.menu-item:hover{
	border: 3px solid transparent;
	border-image:url("https://www.veris.com.ec/tareasquesalvan/images/raya.png") 30 stretch;
	border-top:0;
	border-left:0;
	border-right:0;
}

.leyenda{
	color: #5e3e76;
	max-width: 600px;
	margin:  auto;
	font-weight: 700;
	font-family: 'Montserrat';
}

.libreta{
	max-width: 400px;
    margin: auto;
    display: block;
}

.boton {
    cursor: pointer;
    display: block;
    width: 48px;
    margin: auto;
    margin-top: -100px;
}

.casa{
	margin: auto;
}

.footer-box{
    position: fixed;
    right: 40px;
    bottom: 40px;
}

.social-box img{
	margin-top: 10px;
}

.menu-item a {
    text-decoration: none;
    color: inherit;
}

@media only screen and (max-width: 1600px) {
    .leyenda {
        max-width: 100%;
        font-size: 13px;
    }
    .libreta{
        max-width: 300px;
    }
    .casa{
        width: 150px;
    }
}

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}


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

@media only screen and (max-width: 500px) {
	.casa{
		width: 60px;
	}
	.leyenda {
	    font-size: 12px;
	}
	.libreta{
		max-width: 240px;
	}
	.menu-box{
		margin-left: 0px !important;
		padding-left: 0px !important;
	}
	.social-box li {
	    margin-right: 0px !important;
	    display: inline-block;
	    margin-top: 20px;
	}
	.social-box li img {
	    width: 22px;
	}
	.footer-box {
	    position: fixed;
	    right: 0px;
	    bottom: 30px;
	}
	.social-box{
	    margin-right: 5px !important;
	    margin-top: 20px !important;
	}
	.logo-landing{
		width: 70px;
	}
	.cohete {
	    margin-left: -20px;
	}
}