body { background-color: white ; font-family: helvetica,sans-serif,verdana ; color: #442414; font-size: 18px; }
@media all and                         (max-width:  800px) { body { background-color: white; } }
@media all and (min-width: 1050px) and (max-width: 1300px) { body { background-color: white; } }
@media all and (min-width: 1300px) and (max-width: 1550px) { body { background-color: white; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { body { background-color: white; } }

/* NAGLOWEK */
section.header { position: relative; left: 00%; width: 100%; top: 00px ; }
@media all and (min-width: 1300px) and (max-width: 1550px) { section.header { left: 150px; width: 1100px; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { section.header { left: calc(50% - 650px); width: 1300px; } }

hr.header { margin-top: 30px; margin-bottom: 80px; color: silver ; border-width: 1px }
@media all and (max-width: 800px) { hr.header { margin-bottom: 40px; } }

h2.header { display: inline-block; vertical-align: middle; text-align: center; }

section.title { text-align: center; color: #442414; left: 0px; width: 100%; position: relative; padding-top: 5px ; vertical-align: top; }
@media all and                         (max-width:  800px) { section.title { top: 0px; } }

img.baner { float:center; width: 100% ; }

a.button {
    -webkit-appearance: button; -moz-appearance: button; appearance: button;
    text-decoration: none; color: initial; background-color: #1A376F; border: 2px solid #ccc; border-radius: 8px; color: white;
    padding: 10px 3%; text-align: center; text-decoration: none; display: inline-block; font-size: 17px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    width: calc( 96% - 4px ); float: center; 
/*     margin-top: -60px; */
}
a.button:hover { background-color: #cc6600;}
@media all and                         (max-width:  800px) { a.button { font-size: 10px; letter-spacing: 0.5px; } }

div.progline { line-height: 1.25; }
div.progbutt { width: calc( 20% - 5px ); display: inline-grid; }
div.progtitl { text-align: center; }

center.header { margin-left: 0%; margin-right: 0%; }
@media all and (orientation: portrait) { center.header { margin-left: 5%; margin-right: 5%; } }
img.logonats { display: inline-flex; vertical-align: middle; width: 75px; padding-top: 10px; margin-right: 40px; border: 0px solid green; }
@media all and (orientation: portrait) { img.logonats { width: 25%; margin-right: 20px; } }
img.logotabm { display: inline-flex; vertical-align: middle; width: 200px; padding-top: 10px; margin-right: 40px; border: 0px solid green; }
@media all and (orientation: portrait) { img.logotabm { width: 45%; margin-right: 20px; } }
img.slogonats { float: left; width: 20%; margin: 0px 20px 0px -20px; border: 0px solid green; }
img.slogotabm { float: left; width: 30%; margin: 0px 20px 0px -20px; border: 0px solid green; }


/* STOPKA */
section.foot { position: relative; left: 30%; width: 60%; top: -20px; font-family: helvetica; font-size: 18px;  }
@media all and                         (max-width:  800px) { section.foot { left:  2%;   width:  96% ; top: 0px ; font-size: 16px; } }
@media all and (min-width:  800px) and (max-width: 1050px) { section.foot { left:  5%;   width:  90% ; font-size: 16px; } }
@media all and (min-width: 1300px) and (max-width: 1550px) { section.foot { left: 450px; width:  800px ; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { section.foot { left: calc(50% - 650px); width: 1300px ; } }
div.foot   { display: inline-block; margin-top: 30px; margin-bottom: 50px; }

div.fund { font-family: helvetica; padding-top: 15px; }
@media all and (orientation: portrait) { div.fund { padding-bottom: 20px; } }
div.loga { width: 100%; }
div.logo1 { display: inline-block; width: 27%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 20px; }
div.logo2 { display: inline-block; width: 20%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 30px; }
div.logo3 { display: inline-block; width: 20%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 30px; }
div.logo4 { display: inline-block; width: 20%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 30px; padding-top: 20px; }
@media all and (orientation: landscape) and (max-width: 1550px) { div.logo1 { margin-left: 2%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.logo2 { margin-left: 2%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.logo3 { margin-left: 2%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.logo4 { margin-left: 2%; padding-top: 10px; } }
@media all and (orientation: portrait) { div.logo1 { width: 56%; margin-left:  0px; } }
@media all and (orientation: portrait) { div.logo2 { width: 40%; margin-left:  5px; padding-left: 1%; } }
@media all and (orientation: portrait) { div.logo3 { width: 40%; margin-left:  0px; margin-top: -10px;} }
@media all and (orientation: portrait) { div.logo4 { width: 40%; margin-left: 60px; padding-top: 10px; } }
img.logo1 { width: 100%; margin-top: 10%; }
img.logo2 { width: 75%; }
img.logo3 { width: 90%; margin-top: 5%; }
img.logo4 { width: 100%; margin-top: 5%; }

/* LOGO TABMED */
div.blogo1 { display: inline-block; width: 25%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 0px; }
div.blogo2 { display: inline-block; width: 15%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 0px; }
div.blogo3 { display: inline-block; width: 17%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 0px; }
div.blogo4 { display: inline-block; width: 20%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 0px; padding-top: 20px; }
div.blogo5 { display: inline-block; width: 17%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 20px; padding-top: 20px; }
div.blogo0 { display: none;         width: 17%; margin: 0px; padding: 0px; vertical-align: top; margin-left: 20px; padding-top: 20px; }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo1 { margin-left: 0%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo2 { margin-left: 0%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo3 { margin-left: 0%; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo4 { margin-left: 0%; padding-top: 10px; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo5 { margin-left: 0%; padding-top: 10px; } }
@media all and (orientation: landscape) and (max-width: 1550px) { div.blogo0 { margin-left: 0%; padding-top: 10px; } }
@media all and (orientation: portrait) { div.blogo1 { width: 56%; margin-left:  0px; } }
@media all and (orientation: portrait) { div.blogo2 { width: 27%; margin-left:  5px; padding-left: 1%; } }
@media all and (orientation: portrait) { div.blogo3 { width: 33%; margin-left:  0px; margin-top: -10px;} }
@media all and (orientation: portrait) { div.blogo4 { width: 33%; margin-left:  0px; padding-top: 10px; } }
@media all and (orientation: portrait) { div.blogo5 { width: 40%; margin-left: 60px; padding-top: 10px; display: none;} }
@media all and (orientation: portrait) { div.blogo0 { width: 40%; margin-left:  0px; padding-top: 10px; display: inline-block; } }
img.blogo1 { width: 100%; margin-top: 10%; }
img.blogo2 { width: 90%; }
img.blogo3 { width: 90%; margin-top: 5%; }
img.blogo4 { width: 100%; margin-top: 5%; }
img.blogo5 { width: 100%; margin-top: 5%; }

/* MENU */
section.smenu { position: absolute; left: 5%; width: 25%; top: -5px ; border: 0px solid green ; }
@media all and                         (max-width:  800px) { section.smenu { left: 2%; } }
@media all and (min-width: 1300px) and (max-width: 1550px) { section.smenu { left: 140px; width: 25% ; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { section.smenu { left: calc(50% - 650px); width: 25% ; } }


.vertical-menu { width: 250px; }
@media all and (min-width: 800px) { .vertical-menu { display: block; } }
@media all and (max-width: 800px) { .vertical-menu { display: none; } }

.vertical-menu a       { background-color: white; color: #593416; display: block; padding: 12px; text-decoration: none; background-image: linear-gradient(to right, white, #a7cf3a 1%, white, white, white, white, white, white, white); padding-left: 50px; border-radius: 5px; }
.vertical-menu a:hover { background-color: #f5f4ef;  color: #915a2e; background-image: linear-gradient(white, #f5f4ef, #f5f4ef, #f5f4ef, white); border: 10px; border-color: #5599ff ; border-radius: 8px; }
.vertical-menu a.act   { background-color: white; color: #915a2e; text-decoration-line: none; text-decoration-style: solid; border: 10px; border-color: #5599ff ; }

.container { position: relative; width: 50%; }
.image { display: block; width: 100%; height: auto; }
.overlay { position: absolute; bottom: 0; left: 100%; right: 0; background-color: #008CBA; overflow: hidden; width: 0; height: 100%; transition: .5s ease; }
.container:hover .overlay { width: 100%; left: 0; }

.text { white-space: nowrap;  color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }

div.topnav { padding-bottom: 30px; }
div.menuicon { width: 15px; height: 3px; background-color: #915a2e; margin: 2px 0; }
.mobile-container { rrmax-width: 480px; rrmargin: auto; rrbackground-color: #555; rrheight: 500px; rrcolor: white; rrborder-radius: 10px; }
.topnav { overflow: hidden; background-color: white; position: relative; }
@media all and (min-width: 800px) { .topnav { display: none; } }
@media all and (max-width: 800px) { .topnav { display: block; } }

.topnav #myLinks { display: none;  border: 10px; border-color: #915a2e ; }
.topnav a { color: #915a2e; padding: 14px 16px; text-decoration: none; font-size: 14px; display: block; background-image: linear-gradient(white, #f5f4ef, white);  border-radius: 8px; }
.topnav a.icon { background: white; display: block; position: absolute; right: -100; top: 0; opacity: 0.1 ; padding-bottom: 32px ; padding-right: 97% ; }
.topnav a:hover { background-color: #eee;  color: #915a2e; background-image: linear-gradient(#eee, #f5f4ef, #eee); border: 10px; border-color: #5599ff ;  border-radius: 8px; }
.topnav a.act   { background-color: white; color: #915a2e; text-decoration-line: none; text-decoration-style: solid; border: 10px; border-color: #5599ff ; }
.active { background-color: white; color: white; float: center; }

/* a.menu { color: #261303; text-decoration: none ;  font-family: helvetica; letter-spacing: 2px; font-size: 18px; }  */
a.menu { color: #cc6600; text-decoration: none } 
@media all and (min-width:100px) and (max-width:800px) { a.menu { font-size: 15px; } }
@media all and (min-resolution:120dpi) and (min-width:800px) and (max-width:1000px) { a.menu { font-size: 15px; } }
a.menu:hover { color: #a7cf3a; text-decoration: none }


/* section.smenu { position: absolute; left: 5%; width: 25%; top: -5px ; border: 0px solid green ; } */
/* @media all and                         (max-width:  800px) { section.smenu { left: 2%; } } */
/* @media all and (min-width: 1300px) and (max-width: 1550px) { section.smenu { left: 140px; width: 25% ; } } */
/* @media all and (min-width: 1550px) and (max-width: 8000px) { section.smenu { left: calc(50% - 650px); width: 25% ; } } */



/* TRESC */
section.cent { position: relative; left: 0%; width: 100%; top: 0px ; }
section.txt { font-family: Cantarell, Verdana; }
div.luka   { height: 100px ; }
div.lukab   { height: 50px ; }
div.tpc { text-align: justify; text-justify: auto; line-height: 1.25; }
li.past { color: #454e4f; }

section.main { position: relative; left: 30%; width: 60%; top: 0px ; }
@media all and                         (max-width:  800px) { section.main { left: 5%; width: 90%; top: 0px ; } }
@media all and (min-width: 1300px) and (max-width: 1550px) { section.main { left: 450px; width:  800px ; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { section.main { left: calc(50% - 350px); width: 1000px ; } }

h2 { color: #cc6600; text-decoration: none } 
a { color: #014346; text-decoration: none } 
a:hover { color: #a7cf3a; text-decoration: none }


/* PARTICIP & LECT */
div.laurea { display: block; padding: 10px; }
div.lauwin { display: inline-block; padding: 10px; font-size: 16px; vertical-align: middle; width: 410px; }
div.lauper { display: block; padding: 0px; font-size: 16px; vertical-align: middle; width: 350px; font-weight: bold; }
div.lauins { display: inline-block; padding: 0px; font-size: 16px; vertical-align: middle; width: calc(100% - 90px); }
div.launac { display: inline-block; padding: 0px; font-size: 16px; vertical-align: middle; width: 80px; }
div.lautop { display: inline-block; padding: 10px; font-size: 16px; vertical-align: middle; width: 50%; }
@media all and (max-width:2460px) { div.lautop { width: 95%; } }
span.coord { font-size: 14px; font-style: italic; display: inline; }
font.title { color: #207FA1; }
font.name  { color: #7c3f01; }

td.tabbf { vertical-align: top; font-weight: bold; color: #6c9207; }
td.tabtm { vertical-align: top; color: #207FA1; width: 120px;}
td.mys { text-align: center; vertical-align: top; font-weight: bold; color: #2f4100; }


/* TOPICS */
img.w25  { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 25% }
img.w3   { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 30% }
img.w4   { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 40% }
img.w5   { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 50% }
img.w6   { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 60% }
img.w0   { float: right; margin: 25px 0px 5px 25px; border: 0px solid white; border-radius: 10px; width: 100% }
img.w100 { float: right; margin:  0px 0px 0px  0px; border: 0px solid white; border-radius: 10px; width: 100% }
@media all and (min-resolution:120dpi) and (min-width:100px) and (max-width:1000px) {
    img.w25 { width: 50% }
    img.w3  { width: 50% }
    img.w4  { width: 100% }
    img.w5  { width: 100% }
    img.w6  { width: 100% }
}

figure.w25 { display: flex; flex-flow: column; float: right;  margin: 20px 0px 5px 20px; border: 0px solid white; border-radius: 10px; width: 25%; padding: 5px; }
figcaption.w25 { color: black; font: italic smaller sans-serif; padding: 3px; text-align: center; }



/* POSTER */
img.poster { border: 1px solid #a7cf3a; width: 100%; }


/* GALERIE */
img.galeria { border-color: #a7cf3a; height: 150px; float:; }
@media all and (min-width:100px) and (max-width:800px) { img.galeria { width: calc( 32% - 2px ); height: auto; } }
@media all and (min-resolution:120dpi) and (min-width:800px) and (max-width:1000px) { img.galeria { width: 32%; } }


/* VISITB */
img.herbb { width: 250px; border: 0px solid white; float:; }
@media all and (min-width:100px) and (max-width:1400px) { img.herbb { width: 150px; } }


/* NIORESLONE */
.contabstr{
    /*   margin: 0 auto 50px; */
    /*   width: 100%; */
    /*   max-width: 500px; */
    /*   padding: 10px; */
    border: 0px solid #1E5799;
    /*   border-bottom: 5px solid #1E5799; */
    /*   background: #fff; */
    /*   box-shadow: 6px 5px 19px 2px #3d3d3d; */
}

#page-container { position: relative; min-height: 100vh; }
#content-wrap { padding-bottom: 2.5rem;    /* Footer height */ }

#footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem;            /* Footer height */ }


/* REGISTRATION */
textarea       { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 1px solid #ccc;    border-radius: 4px; background-color: #f8f8f8; resize: none; }
textarea:focus { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 1px solid #464945; border-radius: 4px; background-color: #fafae1; resize: none; }

input[type=text],       input[type=email]       { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; color: black; }
input[type=text]:focus, input[type=email]:focus {                                                                         border: 1px solid #464945;                  background-color: #fafae1;               }

select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }

input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: red; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; }