.interactiu-301 { width: 940px; height: 550px; position: absolute; overflow: hidden; }
/*BOTONS*/
#b301-bg { position: absolute; top: 375px ; left: 620px ; z-index: 51; }
#b301 { position: absolute; top: 390px ; left: 635px ; z-index: 52; }
#b302-bg { position: absolute; top: 250px ; left: 545px ; z-index: 51; }
#b302 { position: absolute; top: 265px ; left: 560px ; z-index: 52; }
#b303-bg { position: absolute; top: 250px ; left: 200px ; z-index: 51; }
#b303 { position: absolute; top: 265px ; left: 215px ; z-index: 52; }
#b312-bg { position: absolute; top: 405px ; left: 785px ; z-index: 35; }
#b312 { position: absolute; top: 420px ; left: 800px ; z-index: 35; }
#b304-bg { position: absolute; top: 275px ; left: 620px ; z-index: 51; }
#b304 { position: absolute; top: 290px ; left: 635px ; z-index: 52; }
#b306-bg { position: absolute; top: 405px ; left: 785px ; z-index: 35; }
#b306 { position: absolute; top: 420px ; left: 800px ; z-index: 35; }
/*TEXTOS*/
#t301 { position: absolute; top: 75px ; left: 240px ; max-width:440px!important; z-index: 50; }
#t302 { position: absolute; top: 450px ; left: 25px ; max-width:750px!important; text-align: left!important; z-index: 30; }
#t303 { position: absolute; top: 75px ; left: 240px ; max-width:440px!important; z-index: 50; }
#t304 { position: absolute; top: 75px ; left: 240px ; max-width:440px!important; z-index: 50; }
#t305 { position: absolute; top: 75px ; left: 240px ; max-width:440px!important; z-index: 50; }
#t306 { position: absolute; top: 450px ; left: 20px ; max-width:600px!important; text-align: left!important; z-index: 30; }
#t307 { position: absolute; top: 5px ; left: 650px ; max-width: 250px!important; z-index: 55; }
#t308 { position: absolute; top: 50px ; left: 190px ; max-width: 540px!important; text-align: left; z-index: 50; }
/*ELEMENTS*/
.solucio { position: absolute; width: 890px; height: 90px; left: 25px; }
.tarjeta { position: absolute; width: 200px; height: 90px; cursor: pointer; }
.tarjeta p { position: absolute; font-family: 'thesans',arial; font-size: 14px; color: white; line-height: 1.3em; font-weight: normal; text-align: left!important; max-width: 190px; text-decoration:none; margin: 5px 5px 5px 10px; z-index: 36; }
.tarjeta_t { position: absolute; width: 200px; height: 45px; overflow: hidden;}
.tarjeta_t p { position: absolute; font-family: 'thesans',arial; font-size: 14px; color: white; background-color: #2ecc71; line-height: 2em; font-weight: normal; text-align: left!important; max-width: 190px; text-decoration:none; margin: 0 0 0 0; padding: 8px 10px 0 10px; z-index: 36; }
.tarbg01 { background-color: #84d2a5; }
.tarbg02 { background-color: #80b6db; }
.tarbg03 { background-color: #e9af7b; }
.tarbg04 { background-color: #e88a80; }
.tarbgon { position: absolute; width: 200px; height: 90px; background-color: #2ecc71; }
.bg01_t { background-color: #2ecc71; background: url(../images/d301.png) no-repeat; }
.bg01_t p { height: 45px; background-color: #2ecc71; line-height: 1.2em; padding: 5px 10px 0 10px; }
.bg02_t { background-color: #3498db; background: url(../images/d302.png) no-repeat; }
.bg02_t p { height: 45px; background-color: #3498db; }
.bg03_t { background-color: #e67e22; background: url(../images/d303.png) no-repeat; }
.bg03_t p { height: 45px; background-color: #e67e22; }
.bg04_t { background-color: #e74c3c; background: url(../images/d304.png) no-repeat; }
.bg04_t p { height: 45px; background-color: #e74c3c; }
.bg01 { background-color: #2ecc71; }
.bg02 { background-color: #3498db; }
.bg03 { background-color: #e67e22; }
.bg04 { background-color: #e74c3c; }
/*.tarbg01b { width: 200px; height: 90px; background: url(../images/ok_i.png) no-repeat bottom right, url(../images/d301.png) no-repeat; }
.tarbg02b { width: 200px; height: 90px; background: url(../images/ok_i.png) no-repeat bottom right, url(../images/d302.png) no-repeat; }
.tarbg03b { width: 200px; height: 90px; background: url(../images/ok_i.png) no-repeat bottom right, url(../images/d303.png) no-repeat; }
.tarbg04b { width: 200px; height: 90px; background: url(../images/ok_i.png) no-repeat bottom right, url(../images/d304.png) no-repeat; }*/
#tar_t01 { left: 25px; top: 45px; }
#tar_t02 { left: 255px; top: 45px; }
#tar_t03 { left: 485px; top: 45px; }
#tar_t04 { right: 25px; top: 45px; }
#tar03 { left: 25px; top: 100px; }
#tar01 { left: 25px; top: 200px; }
#tar02 { left: 25px; top: 300px; }
#tar04 { left: 255px; top: 100px; }
#tar06 { left: 255px; top: 200px; }
#tar05 { left: 255px; top: 300px; }
#tar08 { left: 485px; top: 100px; }
#tar07 { left: 485px; top: 200px; }
#tar09 { left: 485px; top: 300px; }
#tar10 { right: 25px; top: 100px; }
#tar11 { right: 25px; top: 200px; }
#tar12 { right: 25px; top: 300px; }
.drop_d { font-family: arial; position: absolute; width: 70px; height: 67px; border: 1px solid #333; border-radius: 50%; box-shadow: 0 0 0 gray; top: 365px; z-index: 9; line-height: 1.8em; text-align: center!important; padding-top: 3px; }
#drop_d01 { left: 20px ; }
#drop_d02 { left: 123px ; }
#drop_d03 { left: 226px ; }
#drop_d04 { left: 329px ; }
#drop_d05 { left: 432px ; }
#drop_d06 { left: 535px ; }
#drop_d07 { left: 638px ; }
#drop_d08 { left: 741px ; }
#drop_d09 { right: 20px ; }
.draggable03 { width: 75px; height: 75px; position: absolute; z-index: 25; left: -2.5px; top: -2.5px; }
.drag_d { position: absolute; width: 290px; height: 85px; border: 0px solid #333; background-color: #f1e4c4; border-radius: 15px; box-shadow: 0 0 0 gray; z-index: 25; }
.draggable02 { width: 75px; height: 75px; position: absolute; z-index: 25; cursor: pointer; left: 5px; top: 5px; }
.drag_d p { font-family: 'thesans',arial; font-size: 14px; color: #80523a; line-height: 1.3em; font-weight: normal; text-align: left!important; text-decoration:none; margin: 5px 5px 5px 85px; }
#drag_d01 { left: 125px ; top: 70px; }
#drag_d04 { left: 125px ; top: 195px; }
#drag_d06 { right: 125px ; top: 195px; }
#drag_d08 { right: 125px ; top: 70px; }
/*photo credit: Orange juice via photopin (license)
photo credit: honeydew melon juice via photopin (license)
*/