@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import "./../pictures/full/full.css";                                    /* pictures full size   */
@import "./../pictures/medium/medium.css" screen and (max-width: 1051px); /* pictures medium size */
@import "./../pictures/small/small.css"   screen and (max-width: 751px);  /* pictures small size  */

body { margin:0; background-color:#9d9d9d; font-family:"Roboto"; font-size:16px; font-weight:300; }
/* main menu */
.more { font-size:1.5em; }
#main-menu { position:fixed; display:block; top:0; left:10px; width:50px; height:130px; z-index:12; }
#main-menu .btn { position:relative; display:inline-block; width:50px; height:50px; margin:10px 0 0 0; border-radius:50%; background-position:3px 3px; background-repeat:no-repeat; cursor:pointer; }
#main-menu .btn { transition:all .5s; }
#main-menu .mail-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='fill:%23EC008C;' cx='22.624' cy='22.624' r='22.625'/%3E%3Cpolygon style='fill:%23D1D3D4;' points='34.42,31.016 34.42,29.958 11.884,29.958 11.884,15.295 33.363,15.295 33.363,31.016 34.42,31.016 34.42,29.958 34.42,31.016 35.478,31.016 35.478,13.181 9.771,13.181 9.771,32.072 35.478,32.072 35.478,31.016'/%3E%3Cpolygon style='fill:%23D1D3D4;' points='9.734,14.986 22.625,27.875 35.515,14.986 34.02,13.491 22.625,24.885 11.229,13.491 9.734,14.986'/%3E%3C/svg%3E"); }
#main-menu .home-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle style='fill:%23F7941E;' cx='22.625' cy='22.625' r='22.625'/%3E%3Cpath style='fill:%23D1D3D4;' d='M35.515,17.347l-12.89-12.89l-12.89,12.89l0.037,0.037v17.77h25.707V17.384L35.515,17.347L35.515,17.347z M11.885,33.039V18.187L22.625,7.448l10.739,10.738v14.854H11.885z'/%3E%3C/svg%3E"); }
/* background */
.background { position:relative; display:block; top:0; right:0; height:calc( 7 * 150px ); left:0; background-image:url( ../img/pic.jpg ); background-position:top left; background-repeat:no-repeat; background-size:100vw auto; }
/* thumbs */
.thumbs-ctnr { position:absolute; display:block; top:0; right:0; width:calc( 5 * 150px ); height:calc( 7 * 150px ); }
.thumbs-ctnr .thumbs { position:absolute; width:100%; height:100%; list-style:none; padding:0; margin:0; }
.thumbs-ctnr .thumbs { display:flex; flex-flow:column wrap; }
.thumbs-ctnr .thumbs:hover img { opacity:.75; transition:all linear .3s; }
.thumbs-ctnr .thumbs .thumb-ctnr { position:relative; display:inline-block; float:left; width:20%; background-color:black; }
.thumbs-ctnr .thumbs .thumb-ctnr .thumb-link { position:relative; float:left; outline:none; }
.thumbs-ctnr .thumbs .thumb-ctnr .thumb-link .thumb-image { width:100%; }
.thumbs-ctnr .thumbs .thumb-ctnr:hover { outline:thin solid yellow; z-index:1; }
.thumbs-ctnr .thumbs:hover .thumb-ctnr:hover img { opacity:1 !important; }
.thumbs:hover .thumb-ctnr img { opacity:.75; transition:all linear .2s; }
/* kasia's */
.thumbs-ctnr .thumbs .thumb-ctnr.kasias:hover { outline-color:transparent; }
.thumbs .thumb-ctnr.kasias { outline:none; left:-600px; }
.thumbs .thumb-ctnr.kasias img { opacity:1; }
.thumbs .thumb-ctnr.kasias div { position:absolute; background-color:white; top:0; width:calc( 4 * 150px ); height:100%; margin:0 0 0 100%; }
.thumbs .thumb-ctnr.kasias p { line-height:2em; padding:1em 1em; margin:0; font-size:1.1em; font-weight:300; font-family:'Roboto', sans-serif; color:gray; }
/* shadows */
.thumbs-ctnr:hover { box-shadow:0px -20px 40px 30px rgba( 0,0,0,0.15 ); }
.thumbs-ctnr:hover .thumb-ctnr.sqr-1x1.kasias { box-shadow:20px 20px 20px 0px rgba(0,0,0,0.15); }
.thumbs-ctnr:hover .thumb-ctnr.sqr-1x1.kasias div { box-shadow:20px 20px 20px 0px rgba(0,0,0,0.15); }
/* pictures */
.pictures-ctnr { position:relative; display:inline-block; background-color:gray; width:100%; }
.pictures-ctnr .pictures { position:relative; list-style:none; margin:0; padding:0; padding-top:5vh; }
.pictures-ctnr .pictures .picture { position:relative; display:inline-block; text-align:center; width:100%; height:100vh; line-height:100vh; border-bottom:thin solid #999999; }
.pictures-ctnr .pictures .picture { background-image:url(../img/ld.gif); background-position:center center; background-size:10vw; background-repeat:no-repeat; }
.pictures-ctnr .pictures .picture a.anchor { display:flex; justify-content:center; align-items:center; position:relative; height:100%; width:100%; }
.pictures-ctnr .pictures .picture .pic { position:relative; display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center; max-width:90vw; max-height:90vh; }
.pictures-ctnr .pictures .picture .pic-desc-wrapper { position:relative; display:inline-block; line-height:normal; height:auto; width:auto; }
.pictures-ctnr .pictures .picture .pic-desc { position:absolute; display:block; bottom:-1.3em; right:0; height:auto; width:100%; font-size:1em; line-height:1.5em; font-family:courier; text-align:right; color:lightgray; white-space:nowrap; }
/* navigation */
.navigation-ctnr { position:absolute; top:0; left:0; height:100%; width:100%; text-align:center; outline-offset:-1px; color:white; }
.navigation-ctnr a { text-decoration:none; border:none; outline:none; }
.navigation-ctnr .prev { display:none; position:absolute; left:calc( 50% - 50px ); top:0; width:100px; height:60px; }
.navigation-ctnr .prev { background-position:30px 18px; background-repeat:no-repeat; opacity:.5; cursor:pointer; }
.navigation-ctnr .prev { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M20.841,41.679c-11.491,0-20.84-9.349-20.84-20.84C0.001,9.349,9.35,0,20.841,0C32.331,0,41.68,9.349,41.68,20.839C41.68,32.33,32.331,41.679,20.841,41.679z M20.841,2c-10.389,0-18.84,8.451-18.84,18.839c0,10.389,8.451,18.84,18.84,18.84c10.388,0,18.839-8.451,18.839-18.84C39.68,10.451,31.229,2,20.841,2z'/%3E%3Cpolygon fill='%23FFFFFF' points='32.144,25.836 20.84,14.533 9.537,25.836 10.848,27.146 20.84,17.155 30.833,27.146 32.144,25.835'/%3E%3C/svg%3E"); }
.navigation-ctnr .prev:hover { opacity:1; }
.navigation-ctnr .next { display:none; position:absolute; left:calc( 50% - 50px ); bottom:0; width:100px; height:60px; }
.navigation-ctnr .next { background-position:30px 0; background-repeat:no-repeat; opacity:.5; cursor:pointer; }
.navigation-ctnr .next { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M20.84,0c11.491,0,20.84,9.349,20.84,20.84c0,11.49-9.349,20.839-20.84,20.839c-11.49,0-20.839-9.349-20.839-20.839C0.001,9.349,9.35,0,20.84,0z M20.84,39.679c10.389,0,18.84-8.451,18.84-18.839C39.68,10.451,31.229,2,20.84,2C10.452,2,2.001,10.451,2.001,20.84C2.001,31.228,10.452,39.679,20.84,39.679z'/%3E%3Cpolygon fill='%23FFFFFF' points='9.537,15.843 20.84,27.146 32.144,15.843 30.833,14.532 20.841,24.523 10.848,14.532 9.537,15.844'/%3E%3C/svg%3E"); }
.navigation-ctnr .next:hover { opacity:1; }
.navigation-ctnr:hover .prev { display:block; }
.navigation-ctnr:hover .next { display:block; }
/*about*/
.about-me { position:relative; display:block; background-color:white; color:gray; max-height:100vh; }
.about-me { padding:10vw 10vw 10vw 10vw; column-count:2; column-fill:balance; column-gap:5vw; }
.about-me p { text-align:justify; line-height:1.5em; margin-top:0; text-indent:2em;  }
.about-me p { display: inline-block; }
.about-me p:first-child { text-indent:0; }
.about-me .initial { position:relative; display:inline-block; width:5.6em; min-width:50px; margin:0 .8em .1em 0; float:left; }
.about-me .signature { width:15vw; min-width:150px; margin-top:.5em; }
/*mail form*/
.mail-me { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100vh; background-color:white; }
.mail-me .formmail-ctnr { position:relative; display:flex; align-items:center; justify-content:center; width:80%; height:80%; background-color:#8fbad5; min-height:450px; }
.mail-me .formmail-ctnr .close-btn { display:none; position:absolute; top:0px; right:15px; font-size:40px; font-weight:bold; color:#7292c2; cursor:pointer; }
.mail-me .form-mail { width:90%; height:80%; column-count:2; column-fill:balance; column-gap:5vw; column-rule:medium dotted gray; }
.mail-me .stamp { position:relative; display:block; margin-top:-17%; left:-15%; width:115%; margin-bottom:5%; }
.mail-me fieldset { position:relative; display:inline-block; border:none; margin:0; padding:0; text-align:left; }
.mail-me input, .mail-me textarea { margin:0; padding:.5em .5em; border:0; margin-top:.3em; }
.mail-me label { position:relative; display:block; margin-top:2em; }
.mail-me .left-column { padding:10% 0 10% 10%; }
.mail-me .right-column { padding:10% 10% 10% 0; }
.mail-me .mail-name { width:100%; }
.mail-me .mail-name-lbl { width:85%; margin-left:10%; margin-right:5%; }
.mail-me .mail-email { width:100%; }
.mail-me .mail-email-lbl { width:85%; margin-left:10%; margin-right:5%; }
.mail-me .mail-body { width:100%; height:100%; resize:none; }
.mail-me .mail-body-lbl { width:100%; height:45vh; }
.mail-me .mail-button-send { position:relative; display:block; border:none; background-color:transparent; width:40%; float:right; margin-top:-1.5em; margin-right:-4em; }
.mail-me .mail-button-send .send-img { width:100%; cursor:pointer; }
.mail-me .mail-button-send .bird-send { position:absolute; height:100%; top:-10%; left:20%;  }

@media only screen and ( orientation:portrait ) {
#main-menu { width:130px; height:50px; top:10px; }
#main-menu .btn { margin-top:0; margin-right:10px; }
.mail-me .form-mail { width:90%; height:90%; column-count:auto; }
.mail-me .stamp { position:relative; display:block; margin-top:-5%; left:-3%; width:100%; margin-bottom:5%; }
.mail-me .left-column { padding:0 0 0 0; }
.mail-me .right-column { padding:0 0 0 0; }
.mail-me .mail-name-lbl  { width:70%; margin-left:0; margin-right:5%; }
.mail-me .mail-email-lbl { width:70%; margin-left:0; margin-right:5%; }
.mail-me .mail-body-lbl { width:90%; height:20vh; }
}
@media only screen and ( max-width:1601px ) { /* 4 columns */
.background { height:calc( 9 * 150px ); }
.thumbs-ctnr { width:calc( 4 * 150px ); height:calc(  9 * 150px ); }
.thumbs-ctnr .thumbs .thumb-ctnr { width:25%; }
}
@media only screen and ( max-width:1351px ) { /* 3 columns */
.background { height:calc(12 * 150px ); }
.thumbs-ctnr { width:calc( 3 * 150px ); height:calc( 12 * 150px ); }
.thumbs-ctnr .thumbs .thumb-ctnr { width:calc( 100% / 3 ); }
}
@media only screen and ( max-width:1051px ) { /* 3 columns */
.background { height:calc(13 * 150px ); }
.thumbs-ctnr { width:calc( 3 * 150px ); height:calc( 13 * 150px ); }
.thumbs .thumb-ctnr.kasias { left:-450px; z-index:10; }
.thumbs .thumb-ctnr.th16 { height:300px; }
}
@media only screen and ( max-width:901px ) { /* 3 columns */
.background { height:calc(13 * 150px ); }
.thumbs-ctnr { width:calc( 3 * 150px ); height:calc( 13 * 150px ); }
.thumbs .thumb-ctnr.kasias { left:-300px; z-index:10; }
.thumbs .thumb-ctnr.th16 { height:300px; }
.thumbs .thumb-ctnr.th28 { height:300px; }
}
@media only screen and ( max-width:751px ) { /* 5 columns, scalable */
.background { height:calc( 174.5vw + 0vw ); background-size:100%; }
.thumbs-ctnr { top:40vw; width:100%; height:140vw; min-height:auto; box-shadow:none; } 
.thumbs-ctnr .thumbs .thumb-ctnr { width:20%; }
.thumbs .thumb-ctnr.th16 { height:auto; }
.thumbs .thumb-ctnr.th28 { height:auto; }
.thumbs .thumb-ctnr.kasias { left:0; height:0; }
.thumbs .thumb-ctnr.kasias img { position:relative; left:58vw; top:-100vw; width:20vw; height:20vw; z-index:10; }
.thumbs .thumb-ctnr.kasias div { display:block; width:500%; left:0; margin-left:0; z-index:10; top:-80vw; height:22vw; }
.thumbs .thumb-ctnr.kasias p { margin-left:3em; font-size:2.55vw; }
.email { top:5vw; left:4vw; }
.about-me { font-size:2.55vw; }
.about-me { padding:10vw 10vw 10vw 10vw; column-count:1; column-fill:balance; column-gap:5vw; }
.about-me p { text-align:justify; line-height:1.5em; margin-top:0; text-indent:2em; }
}