*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    margin: 0;
    --blaufosc: #2f67b2;
    --blauclar: #5597ee;
    --blaucel: #99ccff;   
}
a{
    text-decoration: none;
    color: var(--blaufosc); 
}
.menu_superior{
    position: absolute;
    margin-top: 10px;
    height: 120px;
    width: 370px; 
}    
.contacte{
    position: absolute;
    top: 40px;
    right: 60px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    
}
.contacte:active {
    box-shadow: inset 2px 2px 3px #666666;
}
#info_contacte{ 
    position: absolute;
    right: 60px;
    width: auto;
    height: auto;
    top: 25px;
    text-align: right;
    line-height: 25px;
    display: none;
    padding: 20px 60px 20px 20px;   
}
.idioma{
    position: absolute;
    top: 40px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding-top: 7px;
    
    
}
.contacte img{
    padding-top: 10px;
    padding-left: 5px;
    width: 35px;
}
.idioma img{
    margin: 1px 4px;
    width: 30px;
}
#idiomes{
    position: absolute;
    top: 40px;
    right: 0;
    padding-top: 36px;
    margin-left: 240px;
    /*height: 105px;*/
    height: 71px;
    width: 40px;
    border-radius: 20px;
    display: none;   
    box-shadow: inset 2px 2px 3px #666666;
}
#idiomes img{
    margin-left: 5px;
    margin-top: 5px;
    width: 30px;
}
.principal{
    position: absolute;
    top: 250px;
    display: flex;
    justify-content: center;
    text-align: center;  
}
.titol{
    position: relative;
    padding-top: 1em;
    width: 340px;
}
.plus{
    position: absolute;
    margin-left: 370px;
    margin-top: -30px;
    height: 40px;
    width: 40px; 
    border-radius: 20px;   
}
.plus img{
    margin-top: 9px;
    height: 22px;
    width: 22px;
}
.plus:active {
    box-shadow: inset 2px 2px 3px #666666;
}
#icon_cesc{
    position: absolute;
    width: 50px;
    margin-top: -26px;
    margin-left: 450px;
    overflow: hidden;
    display: none;   
}
@keyframes trasllatCesc{
	0%{transform:translateX(-70px);}
	100%{transform:translateX(0);}
}
#icon_cesc img{
    animation: trasllatCesc .15s ease-out;   
}
/*ICONES TEMES*/
.bt_temes{
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 120px;
    width: 370px; 
}
#disseny, 
#illustracio,
#foto {
    display: flex;
    align-items: center;
    height: 90px;
    width: 90px;   
}
.bt_disseny,
.bt_illustracio,
.bt_foto {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px; 
    border-radius: 10px;
    margin-left: 15px;
    box-shadow: -1px 2px 3.5px #666666;
}
.bt_disseny img{
    margin: 3px auto auto -1px;
    width: 40px;
}
.bt_illustracio img{
    margin: 4px auto auto 6px;
    width: 40px;
}
.bt_foto img{
    width: 41px;
}
.bt_disseny:active {
    box-shadow: inset 2px 2px 3px #666666;
}
.bt_illustracio:active {
    box-shadow: inset 2px 2px 3px #666666;
}
.bt_foto:active {
    box-shadow: inset 2px 2px 3px #666666;
}
.nom_temes{
    position:relative;
    top: 45px;
    left: -370px;  
}
#disseny_mov {
    display: none;
}
#illustracio_mov {
    display: none;
}
#foto_mov {
    display: none;
}
#nom_disseny{
    position: absolute;
    margin-left: -100px;
    top: 20px;
    width: 500px; 
}
#nom_illustracio{
    position: absolute;
    width: 180px;
    top: 16px;
    margin-left: 120px;   
}
#nom_foto{
    position: absolute;
    width: 160px;
    top: 20px;
    margin-left: 210px;  
}
@keyframes visibilitat{
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes invisibilitat{
    from {
        opacity: 1;
    } to {
        opacity: 0;
    }
}
.footer{
    position: fixed;
    display: flex; 
    justify-content: center;
    align-items: center;
    bottom: 0%;
    color: var(--blauclar);
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    box-shadow: 0px -10px 30px rgba(0,0,0,.2);
    z-index: 1;
    font-size: 0.7em;
    padding: 20px;
}
.footer a img{
    padding-top: .5em;
    padding-left: 40px;
    height: 1.5em;
}
.footer a{  
    color: var(--blauclar);
}
.footer p{
    padding-top: .5em;
}

@keyframes trasllatDisseny{
	0%{transform:translateX(-70px);}
	100%{transform:translateX(0);}
}
#nom_foto img{
    animation: visibilitat .3s ease-in, invisibilitat .5s ease-out, visibilitat .4s ease-in, invisibilitat .3s ease-out;
}
@keyframes trasllatIllustracio{
	0%{transform:translateX(-70px);}
	100%{transform:translateX(0);}
}
#nom_illustracio img{
    animation: visibilitat .4s ease-in;
}
#nom_disseny img{
    animation: visibilitat .3s ease-in, trasllatDisseny .7s ease-out;
}

@media screen and (max-width: 850px) {
    .menu_superior{
        scale: 90%;
       
    }
    .principal{
        scale: 90%;
        top:200px;
    }
}
@media screen and (max-width: 800px) {
    .menu_superior{
        scale: 80%;   
    }
    .principal{
        scale: 80%;
    }
}
@media screen and (max-width: 400px) {
    .menu_superior{
        scale: 80%;
     
    }
    .principal{
        scale: 70%;
    }
}