*, *::after, ::before {box-sizing: border-box; font-family: sans-serif;}
html{ scroll-behavior: smooth;}
body {background-color: white; margin:0; font-size: 18px;}
h1, h2{font-weight: 100;}
h2{text-decoration: underline; text-underline-offset: 0.5em;}
h2:hover{color: #47D3E5;}
.main{width: 100%; position: relative;}
.section{height:400px;border-bottom: lightgray solid 1px; display: flex; flex-direction: row;}
.image{width: 50%;} 
.alicia{object-fit: cover; object-position: 15% 100%;width: 100%; height:400px;}
.left{object-fit: cover; object-position: 15% 70%;}
.gallery-img-d{object-fit: cover;  max-height: 200px; min-width:150px; max-width:200px;}
.content{width:50%; display: flex; justify-content: center; align-items: center;}
button{font-size: 0.8rem;background-color:transparent;border:1px solid lightgray;
       height: 4em;line-height: 4em;border-radius: 4em; padding: 0 3em; font-weight: 400;
       letter-spacing: 0.125em;text-align: center;text-transform: uppercase;} 
button:hover{border-color: #47D3E5; color: #47D3E5;}
.innersection{display: flex;flex-direction: column;align-items: center;}
#first{width: 40%;}
#second{width: 40%;}
.sectionanders .content, #secondsec .content{width:100%; padding: 0 30px;}
.inline-photo {opacity: 0;
               /*                transform: translateY(4em) rotateZ(-5deg);*/
               /*                transition: transform 4s .25s cubic-bezier(0,1,.3,1),*/
               transition:opacity .5s .25s ease-out;will-change: transform, opacity;}
.inline-photo.is-visible {opacity: 1;
                          /*                transform: rotateZ(-2deg);*/}
.text{line-height: 2em;}
.portfolio li{line-height: 2em;}
.sm{width: 75px; list-style: none;}
.sm:hover{transform: scale(0.98);}
.icons{display: flex; flex-direction: row;column-gap: 40px; margin-top: 20px;}
#linkedin svg:hover{cursor: pointer;}
.innersection p{padding: 0 40px;}
#flags{position: fixed; left:4px; width: auto; top:0;z-index: 5;  border-radius: 5px;}

#flags-content{display: flex; flex-direction: row; row-gap: 10px; }
#flags-content a{display: flex;align-content: center;justify-content: center;}
.flag-svg{width: 50px;padding: 5px;}
.flag-svg.at:hover{opacity: 0.7;} .flag-svg.us:hover{opacity: 0.7;} .flag-svg.pl:hover{opacity: 0.7;}
.hide{opacity: 0;position: absolute; transition: opacity 0.5s; z-index: 10; }
/*            .at:hover + .hide{  opacity: 1; }*/
.gallery{display: flex; flex-direction: row; flex-wrap: wrap;align-items: stretch;}
.content-gallery{height: fit-content;}
.formsec{height: auto;}
.gallery-img-d{flex: 1;border: 4px solid #fff;}
.gallery-img-d:hover{opacity: 0.7;}
.form{width: 50%;display: flex;justify-content: center;align-items: center; margin-top: 40px;}
form{width: 80%;}
form >.fields{display: flex; flex-wrap: wrap; } 
form >.fields > .field {width: 100%;display: flex;flex-direction: column;margin-top: 8px;}
input{height: 2.75rem;border-radius: 4px; border: rgba(0, 0, 0, 0.2) solid 1px;
      display: block;outline: 0;padding: 0 0.825rem;
      width: 100%;font-size: 1rem;font-weight: 300;line-height: 1.65;}
textarea {border-radius: 4px; border: rgba(0, 0, 0, 0.2) solid 1px;padding: 0.75rem 1rem;font-size: 1rem;
          font-weight: 300;line-height: 1.65;}
label{display: block;font-size: 0.9rem;font-weight: 400;margin-bottom: 2px;}
input[type="submit"]{background-color: transparent;
                     box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
                     border: 0;cursor: pointer;display: inline-block;font-weight: 400;letter-spacing: 0.125em;text-align: center;
                     text-decoration: none;text-transform: uppercase;white-space: nowrap;font-size: 0.75rem;width: 20rem;height: 3.75em;
                     line-height: 3.75em;border-radius: 3.75em; padding: 0 2.5em;text-overflow: ellipsis;overflow: hidden;}
input[type="submit"]:hover{box-shadow: inset 0 0 0 1px rgb(71 211 229 / 86%); color: #47D3E5;}
.actions{cursor: default;margin-top: 10px;margin-bottom: 40px;}
.icons{margin-bottom: 25px;}

label.error {color: red;font-size: 1rem;display: block;margin-top: 5px;}

label.error.fail-alert {border: 1px solid red; border-radius: 4px;line-height: 1;padding: 3px 0 6px 6px;background: #ffe6eb;}

input.valid.success-alert {border: 1px solid #4CAF50;color: green;}

input.error, textarea.error {border: 1px dashed red;font-weight: 300;color: red;}

.modal{position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: 200ms ease-in-out;
       border: 1px solid lightgrey; border-radius: 10px; z-index: 50; width: 500px; max-width: 80%;background-color: white;}
       
.modal.active{transform: translate(-50%, -50%) scale(1);}
.modal-header{padding: 0 15px; display: flex; justify-content: space-between;align-items:center;border-bottom: 1px solid lightgray;}
              
.modal-header .title{font-size: 1.25rem; font-weight: bold;}

.modal-header .close-button{cursor: pointer; border: none; outline: none; background: none; font-size: 1.25rem; font-weight: bold;}
.close-button{padding: 5px 5px; line-height: 0; height: 3em; font-size: 2em;}

.modal-body{padding: 10px 15px;}

#overlay{position: fixed; top:0; left:0; right:0; bottom:0;background-color: rgba(0,0,0,.5); pointer-events:none;
         opacity:0; transition: 200ms ease-in-out;
}

 
#overlay.active{opacity: 1; pointer-events: all;}
 #footer-cookie {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      min-height: 60px;
      padding-left: 30px;
      padding: 20px 30px 20px 20px;
      column-gap:30px;
      line-height: 30px;
      background: #303030;
      color: #fff;
    }
    
    button#accept {color: #fff;}
    button#accept:hover span.accept {color: #47D3E5; cursor: pointer;}
    #footer-cookie.hide{
       display:none;
    }

    .tags{padding: 8px 13px;  margin:5px;color:white; background-color: #47D3E5; cursor: pointer; border:#47D3E5 1px solid;border-radius: 2.75em;}
    .tags:hover{color:#47D3E5; background-color: white; border:#47D3E5 1px solid;border-radius: 2.75em;}
    

@media (max-width: 750px) {
    /*                #flags-content{flex-direction: column;}*/
    .content, .image{width: 100%}
    .section{flex-direction: column; height: fit-content;}
    .sectionanders{flex-direction:column-reverse;}
    button, .icons{margin-bottom: 30px;}
    .innersection{margin-top: 20px;}
    #first, #second{width: 100%;}
    .innersection p{padding: 0 30px;}
    .form{width: 100%;}
    .form,.actions,#submit{width: 100%;}
    .formsec{margin-bottom: 40px;}
}