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

#section.baner { position: absolute; left: 450px; width: 800px; top: 10px ; }
section.baner { position: absolute; left: 30%; width: 50%; top: 10px ; }
section.baner { position: relative; left: 00%; width: 100%; top: 00px ; }
@media all and (min-width: 1300px) and (max-width: 1550px) { section.baner { left: 150px; width: 1100px; } }
@media all and (min-width: 1550px) and (max-width: 8000px) { section.baner { left: 200px; width: 1300px; } }

section.cent { position: relative; left: 0%; width: 100%; top: 0px ; }
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: 500px; width: 1000px ; } }

section.foot { position: relative; left: 30%; width: 60%; top: -20px }
@media all and                         (max-width:  800px) { section.foot { left:  2%;   width:  96% ; top: 0px ; } }
@media all and (min-width:  800px) and (max-width: 1050px) { section.foot { left:  5%;   width:  90% ; } }
@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: 500px; width: 1000px ; } }

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: 190px; width: 25% ; } }

section.title { color: white; position: absolute; left: 32%; width: 40%; top: 10px ; }

h1.title { }
h2 { text-shadow: 2px 1px silver; letter-spacing: 2px ; margin-bottom: 50px ; }
h4.title { }
h4.paym { }
h5 { color: #464513; text-decoration: none ; } 

li.insp { padding-top: 3px ; padding-bottom: 3px ; font-size: 18px ; }

p { text-align: justify ; text-justify: auto ; }
hr { color: silver ; border-width: 1px }

a { color: #0c4374; text-decoration: none ; font-weight: 500 ; } 
a.pref { color: #00559f ; font-weight: 600 ; }
a.menu { color: #1A376F; text-decoration: none ; } 

#a:hover { color: #207FA1; text-decoration: none ; }
a:hover { color: #5599ff; text-decoration: none ; }

table.smenu { width: 500px; border: 20px ; }
table.sponsor1 { width: 100% ; border: 0px solid red ;   margin-left: 0px ; }
table.sponsor2 { width: 100% ; border: 0px solid red ;   margin-left: 0px ; }
table.sponsor4 { width: 100% ; border: 0px solid green ; margin-left: 0px ; }
table.prog     { width: 750px ; border: 0px ; }

tr.break { background-color: #ebeeee; color: #207FA1 ; }
tr.progr { }
tr.sessi { font-style: italic ; }
td.mys { text-align: center; width: 40px ;}
td.ptime { width: 200px ; }
td.punkt { width: 440px ; }
td.persn { width: 270px ; }

td.smenu { width: 400px; valign: bottom ; }

td.sponcu { width: 28% ; vertical-align: bottom ; border: 0px solid red ; }
@media all and (max-width:  800px) { td.sponcu { width:10px; } }
td.spofaj { width: 27% ; vertical-align: bottom ; border: 0px solid red ; }
@media all and (max-width:  800px) { td.spofaj { width:10px; } }
td.spoaps { width: 28% ; vertical-align: bottom ; border: 0px solid red ; }
@media all and (max-width:  800px) { td.spoaps { width:10px; } }
td.spomni { width: 28% ; vertical-align: bottom ; border: 0px solid red ; }
@media all and (max-width:  800px) { td.spomni { width:10px; } }
td.sponcn { width: 28% ; vertical-align: bottom ; border: 0px solid red ; }
@media all and (max-width:  800px) { td.sponcn { width:10px; } }
td.spocon { width: 20% ; vertical-align: bottom ; font-size:13px ; text-indent: 0px ; }
@media all and (max-width:  800px) { td.spocon { font-size:10px; } }
td.sponsen { width: 70% ; vertical-align: middle ; font-size:13px ; }
@media all and (max-width:  800px) { td.sponsen { font-size:10px; } }
td.spornt { width: 15% ; vertical-align: bottom ; }
td.spoeuh { width: 15% ; vertical-align: bottom ; }

img.baner { float:center; width: 20% ; }
img.sponcu { height: 80px ; border: 0px solid green ; float: none ; }
@media all and (max-width:  800px) { img.sponcu { height:40px ; margin-left: -5px;} }
img.spofaj { height: 60px ; border: 10px solid white ; float: none ; margin-left: 10px ; }
@media all and (max-width:  800px) { img.spofaj { height:30px ; margin-left: -15px ; margin-bottom: -5px ; } }
img.spomni { height: 50px ; border: 10px solid white ; float: none ; margin-left: -20px ; }
@media all and (max-width:  800px) { img.spomni { height:20px; } }
img.sponcn { width: 50% ; border: 10px solid white ; float: center ; margin-left: 25% ; margin-top: 5px ; margin-bottom: -20px ; }
@media all and (max-width:  800px) { img.sponcn { height:20px; margin-top: -15px ; } }
img.sponawa { width: 100% ; border: 0px solid blue ; float: none ; }
@media all and (max-width:  800px) { img.sponawa { width: 105% } }
img.spornt { height: 45px ; border: 15px solid white ; float: none ; }
@media all and (max-width:  800px) { img.spornt { height: 25px ; border: 0px solid white ; } }
img.spoeuh { height: 45px ; border: 15px solid white ; padding-left: 15px; float: none ; }
@media all and (max-width:  800px) { img.spoeuh { height: 25px ; border: 0px solid white ; padding-left: 15px; } }


div.dafc { border: 3px solid #B22222 ; font-size:16px ; font-weight: 600 ; color: #B22222 ; padding-left: 20px; padding-right: 20px; }
span.coc { font-size:16px ; color: black ; }
/* span.cocn { font-size:16px ; color: grey ; font-style: italic ; } */
span.cod { font-size:18px ; }
span.coe { font-size:16px ; font-weight: 600 ; color: #5599ff ; }
span.dafn { font-size:16px ; font-weight: 600 ; }
span.dafs { font-size:16px ; font-weight: 600 ; color: #B22222 ; }
span.dafm { font-size:18px ; font-weight: 600 ; }
span.ispn { font-size:16px ; color: black ; line-height: 1.8 ; }
span.ispl { font-size:16px ; color: grey ; font-weight: 100 ; }
span.socn { font-size:16px ; color: black ; line-height: 1.8 ; }
span.socl { font-size:16px ; color: grey ; font-weight: 100 ; }
span.locn { font-size:16px ; color: black ; line-height: 1.8 ; }
span.ocs { font-size:18px ; color: black ; line-height: 2.8 ; font-weight: 550 ; }
span.scirac1 { font-size:16px ; line-height: 1.45 ; text-align: justify ; text-justify: auto ; }
span.scirac2 { font-size:16px ; font-style: italic ; }
span.sponsor3 { width: 100% ; }
span.reqlab   { color: #5599ff ; }
span.paym { color: #1A376F; font-family: monospace ; font-size: 14px ;}
li.artic { line-height: 1.55; }

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; }

#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 */ }

.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: #1A376F; display: block; padding: 12px; text-decoration: none; }
.vertical-menu a:hover { background-color: #eee;  color: #5599ff; background-image: linear-gradient(#eee, #dadede, #eee); border: 10px; border-color: #5599ff ; border-radius: 8px; }
.vertical-menu a.act   { background-color: white; color: #5599ff; 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%); }

.submit { 
   background-color: white;
   border: 2px solid #ccc;
   border-radius: 8px;
   color: #1A376F;
   padding: 10px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   width: 100%;
   float: center;
}

.submit:hover {
   border: 2px solid #5599ff;
   background-color: #eee; /* Green */
}

div.luka             { height: 100px ; }
div.lukab            { height: 600px ; }
div.submit-container { padding: 40px 10% ; float: center ; }
div.contribhelp      { padding: 15px 0px; font-style: italic ; }
div.contrib          { padding: 10px 0px ;}
div.contribtitle     { padding: 10px 0px ;}
div.mealsreq         { padding: 10px 0px ;}
div.optnotes         { padding: 10px 0px ;}
div.gdpragr          { padding: 3px 0px ;}
div.rnetnews         { padding: 3px 0px ;}
div.paym { width: 600px; padding: 0px 60px; margin: 10 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 8px; background-color: #f8f8f8; color: black; }
div.kafel { display: inline-block; width: 250px; margin: 20px; vertical-align: top; }
img.kafel { width: 100%;}

div.menuicon { width: 15px; height: 3px; background-color: #5599ff; 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: #5599ff ; }
.topnav a { color: #1A376F; padding: 14px 16px; text-decoration: none; font-size: 14px; display: block; background-image: linear-gradient(white, #eee, white);  border-radius: 8px; }
.topnav a.icon { background: white; display: block; position: absolute; right: -100; top: 0; opacity: 0.1 ; }
.topnav a:hover { background-color: #eee;  color: #5599ff; background-image: linear-gradient(#eee, #ebeeee, #eee); border: 10px; border-color: #5599ff ;  border-radius: 8px; }
.topnav a.act   { background-color: white; color: #5599ff; text-decoration-line: none; text-decoration-style: solid; border: 10px; border-color: #5599ff ; }
.active { background-color: white; color: white; float: center; }