/**********************
responsive
**********************/


@media screen and (min-width: 770px) {

header {
  	width: 50%;
}
#carima {
    max-width: 60%;
}
#face {
        width: 80%;
}
#menu li {
    
    float: left;
    width: 14.6666%;
    margin: 1%;
}
    #menu {
    margin: 30px 0px 0px 0px;

}
    .book {
    margin: 0px auto;
        width: 60%;
        height: 60%;

}
    #menu2 {
    margin: 0px;
}
    #book img {
width: 6%;
}
    #botons {
        padding-bottom: 130px;
    transition-property: opacity;
    transition-duration: .5s;
}

    #menu li img {
        width: 50%;

    }
    .boximg {
    width: 75%;
}
    .boxpoints {
    margin: 30px 12%;
}
}

@media screen and (min-width: 1300px) {
    
    header {
  	width: 35%;
}
 #carima {
    max-width: 100%;
}

#face {
        width: 70%;
}
        #botons {
        padding-bottom: 100px;
}
    #menu2 img {
    width: 10%;
}
    .boximg {
    width: 70%;
}
    .boxp {
     width:550px;
}
}