/*CITIESCSS by Apl - valid 29.4.23*/

main, header {
max-width:2000px;
margin: auto;
border-left: 3px solid maroon;
box-shadow:10px 0 15px 0 rgba(0,0,0,0.5);
background-color:#ffe6b3;
}

@media only screen and (max-width: 600px) {main {border-left: 1px solid maroon }}
@media only screen and (min-width: 601px) and (max-width: 1280px) {main {border-left: 2px solid maroon}}

main img {
width: 100%;
height: auto;
border: 1px solid #000;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
}

main {line-height:0} /*overrules fonts*/


.picheader {padding: 180px 0 30px 15%;}
@media only screen and (max-width: 600px)
{.picheader {padding: 80px 0 8% 15%; line-height:0.8}}
@media only screen and (min-width: 601px) and (max-width: 1280px)
{.picheader {padding: 100px 0 5% 15%; line-height:0.9}}
@media only screen and (min-width: 1281px) and (max-width: 1784px)
{.picheader {padding: 150px 0 0 15%; line-height:1.2}}

.picheader  {font-size: 3.2rem;}
@media only screen and (max-width: 600px) {.picheader  {font-size: 1.125rem;}}
@media only screen and (min-width: 601px) and (max-width: 1280px) {.picheader {font-size: 1.500rem;}}
@media only screen and (min-width: 1281px) and (max-width: 1784px) {.picheader {font-size: 2.500rem;}}

.picheader h2  {padding: 13px 0 0 1%;}
@media only screen and (max-width: 600px) {.picheader h2  {padding: 0 0 0 8%}}
@media only screen and (min-width: 601px) and (max-width: 1280px) {.picheader h2  {padding: 10px 0 0 5%}}
.picheader h2 {font-size: 1.2rem; font-style: italic;}
@media only screen and (max-width: 600px) {.picheader h2  {font-size: 0.9rem;}}

.picheader h3  {padding: 0 0 0 1%}
@media only screen and (max-width: 600px) {.picheader h3  {padding: 0 0 0 5%}}
@media only screen and (min-width: 601px) and (max-width: 1023px) {.picheader h3  {padding: 0 0 0 5%}}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {.picheader h3  {padding: 0 0 0 1%}}
.picheader h3 {font-size: 1.0rem; font-style: normal; font-weight: normal;}
@media only screen and (max-width: 600px) {.picheader h3  {font-size: 0.8rem;}}
@media only screen and (min-width: 601px) and (max-width: 1280px) {.picheader h3 {font-size: 0.750rem;}}

.picheaderunder {font-size: 0.75em; text-align: right; padding: 15px 15px 0 0; margin-bottom: -20px;}
@media only screen and (max-width: 600px) {
.picheaderunder {font-size: 0.65em; text-align: right; padding: 10px 5px 0 0; margin-bottom: -20px;}}

.flags  {padding: 135px 0 80px 30px;}
@media only screen and (max-width: 600px) {.flags {padding: 0 0 10px 0;}}
@media only screen and (min-width: 601px) and (max-width: 760px) {.flags {padding: 0 0 10px 40px; }}
@media only screen and (min-width: 761px) and (max-width: 1280px) {.flags {padding: 100px 0 10px 40px;}}
.flag {max-width: 80%;height: auto ; border: 1px solid #000000; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);}
@media only screen and (max-width: 600px) {.flag {max-width: 60%;height: auto ;margin-left:75px; margin-top:5px}}
.seal {max-width: 55%; height: auto; border:0; box-shadow:none; margin-left:-50px }
@media only screen and (max-width: 600px) {.seal {max-width: 50%; height: auto; margin-left:30px; margin-top:5px}}

/* Stateadmission */
@media only screen and (max-width: 600px) {.fotohidden {display:none;}}
@media only screen and (max-width: 600px) {.fotohiddenl {font-size: 0.8rem; font-family:'Raleway', sans-serif; padding: 0 0 5% 5%}}
@media only screen and (min-width: 601px) and (max-width: 5280px) {.fotohiddenl {display:none;}}
/* Stateadmission */


.picheadertext {
    width: 80%;
    background-color: #F2BB83;
    float:left;
    padding-left: 25%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid maroon;
    border-bottom: 1px solid maroon;
    border-top: 1px solid maroon;
    margin-top: 80px;
    margin-bottom: 40px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    line-height:1.5;
    font-size: 1.250rem
}

@media only screen and (max-width: 600px)
{.picheadertext {
    font-size: 0.8rem;
    padding-left: 15%;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 60px;
    margin-bottom: 20px;}}
@media only screen and (min-width: 601px) and (max-width: 1280px)
{.picheadertext {
    font-size: 1.0rem;
    padding-left: 15%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 80px;
    margin-bottom: 30px;}}


.piccaptiteltext {
    width: 80%;
    background-color: #F2BB83;
    float:left;
    padding-left: 25%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid maroon;
    border-bottom: 1px solid maroon;
    border-top: 1px solid maroon;
    margin-top: 80px;
    margin-bottom: 40px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    line-height:1.5;
    font-size: 1.250rem
}

@media only screen and (max-width: 600px)
{.piccaptiteltext {
    font-size: 0.8rem;
    padding-left: 15%;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 20px;
    margin-bottom: 20px;}}
@media only screen and (min-width: 601px) and (max-width: 1280px)
{.piccaptiteltext {
    font-size: 1.0rem;
    padding-left: 15%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 35px;
    margin-bottom: 30px;}}


.picunder {font-size: 0.95rem; text-align: right; padding: 15px 15px 15px 0;margin: 0 0 0 0;background-color: #fffee1;}
@media only screen and (max-width: 600px) {
.picunder {font-size: 0.65em; text-align: right; padding: 10px 5px 10px 0;}}



.padding{ padding: 8px }  /* overrule grid */
@media only screen and (max-width: 600px) {.padding { padding: 1px}}
@media only screen and (min-width: 601px) and (max-width: 1280px) {.padding { padding: 1px}}
.padding > .col { padding: 4px 4px;}  /* overrule grid */



.right {
    float: right;
}

.left {
    float: left;
}



footer {
    max-width:2000px;
    margin: auto;
    border-top: 1px solid maroon;
    border-bottom: 1px solid maroon;
    border-left: 3px solid maroon;
    box-shadow:10px 0 15px rgba(0,0,0,0.5)}

@media only screen and (max-width: 600px) {footer {border-left: 1px solid maroon }}
@media only screen and (min-width: 601px) and (max-width: 1280px) {footer {border-left: 2px solid maroon}}

footer a{text-decoration: none}
footer a:hover{text-decoration: underline;}

.foot{
    max-width:2000px;
    height: 60px;
    margin:auto;
    height: 60px;
    margin:auto;
    border-left: 3px solid maroon;
    box-shadow:10px 0 15px rgba(0,0,0,0.5)}

@media only screen and (max-width: 600px) {.foot {border-left: 1px solid maroon }}
@media only screen and (min-width: 601px) and (max-width: 1280px) {.foot {border-left: 2px solid maroon}}

.footlinks {float:left;padding-top:20px;text-align: center;}
.footlinks li, .footmedia li{float: left;list-style-type: none;}


.padt {padding-top: 0px;}
.padr  {padding-right: 8px;}
.padb {padding-bottom: 0px;}
.padl {padding-left: 8px;}
.border {border: 1px solid #000}
.bordert {border-top: 1px solid #000;}
.borderr {border-right: 1px solid #000;}
.borderb {border-bottom: 1px solid #000;}
.borderl {border-left: 1px solid #000;}