* { transition: .05s } BODY { background-image: url(); background-color: #333333; margin: 0px !important; } /*********** KUVATILA *************************/ figure {/* Esityskuva Maincont */ width: 100%; height: 100%; position: relative; margin: 0px; overflow: hidden } figure img {/* */ position: absolute; left: 0px; top: 0px; height: 100% !important; } .kuvatekstila {/* ImgTxt cont. */ position: absolute; bottom: 0px; left: 0px; margin: 0px ; padding: 1em 3.4em 1.5em 2.5vw; background-color: hsla(0, 0%, 99%, 0.81); width: 100%; text-align: left; font-size: .95em } figurecaption {/* Img text */ width: 70%; line-height: 143%; margin: 0px; max-height: 98vh; max-width: 75vw; overflow: auto; font-size: 1.1rem } figurecaption::before, figurecaption::after {/* Img text*/ content: "'' "; font-size: 1.7em; color: #cc9966; opacity: .8; position: relative; top: .25em } figurecaption::after {/* Img text*/ left: .25em } .close-kuvatxt {/* X sulje kuvatxt-lnk */ position: relative; top: -0.35em; font-weight: bold; font-size: 2em; color: #06AE8F !important; } .close-kuvatxt:hover {/* */ color: #cc9966 !important; transition: .3s } .kuvalnk1 {/* IMG BrowsingArrow left */ position: absolute; top: 23.5vh; left: 2.5%; cursor: pointer; } .kuvalnk2 {/* IMG BrowsingArrow right */ position: absolute; top: 23.5vh; right: 2.5%; cursor: pointer; } .nuoli {/* IMG BrowsingArrow Margin */ background-color: hsla(0, 0%, 30%, .0) ; padding: 2%; width: 4vw; z-index: 10 } img, div { margin-top: 0px !important; height: ;100% !important; width: 100% !important; border: 0px; } .kuvainfo {/* KUVATEKSTI -linkki ImgText Note! */ position: absolute; top: 93vh; right: 2.5%; cursor: pointer; transition: 0.43s; margin: 0px ; color: #06AE8F } .lnk_kuvateksti { font-size: .95rem !important; letter-spacing: .04em; font-weight: bold; font-family: arial, helvetica, Nimbus Sans L, freesans !important; text-transform: uppercase; color: #ffffff; background-color: hsla(0, 0%, 30%, 0.1); } .lnk_kuvateksti:hover {/* */ letter-spacing: .3em; transition: .3s} figurecaption { padding: .8em 2em; transition: 0s !important } /*--------------POISTOON---------------------------------------*/ .esityskuva {/* Esityskuva MainCont ????? */ width: 60%; height: 40vw; position: fixed; top: 6.5vh; left: 0px; padding: 0px; margin: 0px; background-color: #1b1b1b; display: block; float:left } /************* Kuvan näyttäytyminen iframettomana sivuna ja linkin kera itse esittelyyn ************/ .linkki-if-no-iframe { position: absolute; right: 0px; top: 2em; padding: .5rem 1rem 1.2rem 1rem; background-color: #f0f0f0; border-radius: 3px 0px 3px 0px; min-width: 50% } .linkki-if-no-iframe a { font-weight: normal; font-size: 2.6vw; letter-spacing: .05em } .linkki-if-no-iframe { display: none } i { color: #cc9966; margin-right: .2em } .next-img {/* nuolike > */ position: absolute; top: 46% !important; right: .4em ; z-index: 9 !important } .prev-img {/* nuolike < */ position: absolute; top: 46% !important; left: -0.6em ; z-index: 9 !important } .next-img img, .prev-img img {/* nuolike */ width: 1.4em !important; height: 2em !important; z-index: 9 !important; margin: 0px } .next-img .arrow {/* nuolike > */ right: .8em; } .prev-img .arrow {/* nuolike < */ left: 0em; } .prev-img>a>img, .next-img>a>img {/* invisible */ width: 0em; height: 0em ; margin: 0px } img.arrow {/* nuolike > */ width: 2.6em !important; height: 3em !important; opacity: .8 } /* @media screen and (max-width: 923px) and (max-device-width: 1024px) {img { max-width: 656px; }} @media screen and (max-width: 1025px) and (max-device-width: 1152px) {img { max-width: 750px; }} @media screen and (max-width: 1153px) and (max-device-width: 1280px) {img { max-width: 819px; }} @media screen and (max-width: 1441px) and (max-device-width: 1680px) { img { max-width: 1076px; }} */ /* @media screen and (min-width: 1100px) and (min-device-width: 1680px) { .linkki-if-no-iframe { display: block } img { max-width: 1100px; }} @media screen and (min-width: 960px) and (device-width: 1440px) { .linkki-if-no-iframe { display: block } img { max-width: 960px; }} @media screen and (min-width: 840px) and (device-width: 1280px) { .linkki-if-no-iframe { display: block } img { max-width: 840px; }} @media screen and (min-width: 720px) and (device-width: 1152px) { .linkki-if-no-iframe { display: block } img { max-width: 720px; }} @media screen and (min-width: 620px) and (device-width: 1024px) { .linkki-if-no-iframe { display: block } img { max-width: 610px; margin-top: -0.5vh }} */ @media (min-width: 530px) (max-width: 600px) {/* n. 1024px screeni */ .figure img { top: -0.8vh } img.arrow {/* nuolike */ width: 2em !important; height: 2.4em !important; } } @media (min-aspect-ratio: 1000/660) {/* Laptop leveä ***************************** */ .kuvainfo {/* KUVATEKSTI -linkki ImgText Note! */ position: absolute; bottom: 6vh; } .kuvatekstila {/* ImgTxt cont. */ padding-bottom: 2em } } @media (min-aspect-ratio: 151/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 49% ; left: 50% } } @media (min-aspect-ratio: 151.6/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 48.7% } } @media (min-aspect-ratio: 151.7/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 49% ;} } @media (min-aspect-ratio: 151.9/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 50% } } @media (min-aspect-ratio: 152/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 49.5% } } @media (min-aspect-ratio: 154/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 49.5% } } @media (min-aspect-ratio: 155.5/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 51% } } @media (min-aspect-ratio: 155.8/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 49.7% } } @media (min-aspect-ratio: 156/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 50% } } @media (min-aspect-ratio: 158.1/100) {/* Wider window (laptop) */ body .img_w {/* */ absolute; top: 51%; } } @media (min-aspect-ratio: 158.2/100) {/* Wider window (laptop) */ body .img_w {/* */ position: absolute; top: 51% } } @media (min-aspect-ratio: 1000/660 ) {/* Laptop leveä > 1.5 aratio ***************************** */ .kuvainfo {/* KUVATEKSTI -linkki ImgText Note! */ position: absolute; bottom: 6vh; } .kuvatekstila {/* ImgTxt cont. */ padding-bottom: 2em } } @media (max-aspect-ratio: 1/1) {/* PYSTYleiska (tabcell) !!!! /////////////////////////////////////////////// */ BODY { background-color: #f4f4f4; margin: 0px } .linkki-if-no-iframe {/* sivulla pelkkä kuva */ position: relative !important; top:1em; display: block; float:left; font-size: 2.8vw !important } body>img { max-width: 100% ; margin-top: -1vw !important} .linkki-if-no-iframe a { font-size: 2em; } .next-img {/* nuolike > */ top: 40vh; } .prev-img {/* nuolike < */ top: 40vh; left: -1em; } img.arrow {/* nuolike > */ width: 2.6em !important; height: 3.2em !important; opacity: .8 } } @media (max-width: 560px) {/* Cellphone (both orientations) ***************************** */ body>img { margin-top: 0px !important; height: 66.7vw !important; width: 100% !important; border: 0px } .kuvainfo {/* KUVATEKSTI -linkki ImgText Note! */ position: absolute; top: 88.5vh; } .lnk_kuvateksti { font-size: .7em !important; padding: .7em 0px } .kuvatekstila {/* ImgTxt cont. */ padding: .5em .8em .8em 2vw; line-height: 130% } figurecaption {/* Img text */ max-width: 85vw; width: 85vw; margin: 0px; font-size: 1rem } } @media (min-width: 380px) and (max-width: 510px) {/* Cellphone () ***************************** */ .next-img, .prev-img {/* nuolike > */ top: ;40vh !important; } }