*{ margin: 0; padding: 0; outline: none;}
body{ line-height: 20px; font-size: 13px; color: #5d5c5c; font-family: Arial, Helvetica, sans-serif;}

a{ color: #007ACE; }
a:hover{ color: #000; }
h1, h2, h3{ color: #006600; padding-bottom: 10px; }
h1{ color: #00cc00; font-size: 22pt }
h2{ font-size: 20pt }
h3{ font-size: 16pt }
h4{ font-size: 12pt }
ul, li{ list-style-type: none; }


nav { background-color: #333; color: #FFF; min-height: 50px; width: 100%; position: fixed; left: 0; right: 0; margin: 0 auto; z-index: 999; }
nav ul { float: left; margin: 10px auto; }
nav li { float: left; margin: 0 10px; }
nav a { float: left; color: #02AEE7; font-weight: bold; text-transform: uppercase; font-size: 15px; }
nav a:hover, footer a:hover { color: #FFF; }
nav + * { padding-top: 30px; }
nav ul#right { float: right; }
nav ul#right li { border-radius: 15px; height: 30px; line-height: 30px; overflow: none; }
nav ul#right li * { float:left; }
nav ul#right li.flag { width:30px; }
nav ul#right li#translate { line-height: 20px; }
nav ul#right .flag img { border-radius: 15px; width: 100%; height: 100%; overflow: none; }

header { background-color: #00cc00; height: 180px; }
header h2 { font-size: 27pt; color: #FFF; }
header p { font-size: 12pt; }
header img { padding: 0; margin 0; display: block; width: 100% !important; height: auto !important; }
#logo { background-color: #abff79; height: 120px; }

.content { min-width: 330px; max-width: 1000px; min-height: 50px; width: 100%; margin: 0 auto; padding: 55px 15px; text-align: center; }  
.content-null { min-width: 330px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 0; text-align: center; }
.content-page { min-width: 330px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; }

footer a { font-weight: bold; text-transform: uppercase; font-size: 13px; }
footer h3 { text-transform: uppercase; padding-bottom: 20px; font-size: 15px; color: #FFF; }

.content a { text-decoration: none; }

.articles:nth-of-type(even), #info { background-color: #FFF; }
.articles:nth-of-type(odd), #main { background-color: #e5ffd6; }
#car_park { background-color: #abff79; }
footer{ background-color: #1F1F2F; color: #FFF; overflow: auto; }


.link { padding-top: 45px; }

.circle { border-radius: 50%; width:220px; height: 220px; line-height: 220px; overflow: none; margin: 0px auto; background: #FFF; overflow: hidden;  margin-bottom: 20px; }
header .circle { position: relative; top: 50px; left: 0; background: #006600; color: #FFF; margin-bottom: 0; }
.articles:nth-of-type(even) .circle { background: #006600; color: #FFF; }
.articles:nth-of-type(odd) .circle, #main .circle { background: #abff79; }
#info .circle { background: #e5ffd6; }
.circle span { display: inline-block; vertical-align: middle; line-height: 20px; }
.circle span.image { display: block; vertical-align: none; width: 100%; height: 100%; }
.double { width: 50%; float: left; min-height: 50px; padding: 10px 15px; box-sizing: border-box; }
.double .circle { width: 27vw; height: 27vw; max-width: 220px; max-height: 220px; line-height: 27vw; }
.triple { width: 33%; float: left; min-height: 50px; padding: 10px 15px; box-sizing: border-box; }
.two-triple { width: 66%; float: left; min-height: 50px; padding: 10px 15px; box-sizing: border-box; line-height: 12vw;  }
.two-triple span { display: inline-block; vertical-align: middle; line-height: 20px; }
.triple .circle { width: 27vw; height: 27vw; max-width: 220px; max-height: 220px; line-height: 27vw; }
.safe { clear: both; }
.circle img { margin: 0 auto; padding: 0; max-height: 190px; height: 75%; width: auto; opacity: 1; }
.circle img + h3 { height: 25%; width: 100%; display: block; }
.circle:hover img { opacity: 0.7; }


.articles:nth-of-type(even) h3 { color: #FFF; }
.articles:nth-of-type(even) .two-triple h3 { color: #006600; }
.articles:nth-of-type(odd) h2, #main h2, car_park h2 { color: #00cc00; }
#main .content, #car_park .content, .articles .content, footer .content { min-height: 150px; font-family: "Roboto",sans-serif; }
#main .content-null { font-family: "Roboto",sans-serif; }


.articles table { margin: 15px auto; border-spacing: 2px 0; width: 80%; }
.articles th { padding: 5px 10px; border-radius: 10px 10px 0 0; background: #006600; color: #FFF; }
.articles th:first-child { background: #e5ffd6; border-radius: 0; }
.articles tr:nth-child(even) { background: #abff79; }
.articles tr:nth-child(odd) { background: #cdffaa; }
.articles tr:first-child { background: transparent;}
.articles td { padding: 5px 10px; min-width: 110px; }

.articles form { margin: 15px auto; background: #abff79; }

.foot_text { margin-bottom: 15px; }

/* Maps part */
.maps iframe { position: relative; top: -50px; bottom: -90px; border: medium none; height: 460px; width: 100%; }
.maps { width: 100%; overflow: hidden; margin-top: -50px; height: 410px; }

@media (min-width: 860px) {
    .double .circle { line-height: 220px; }  
    .triple .circle { line-height: 220px; }  
}
@media (max-width: 1050px) {
    nav > span { width: 100%; }
    nav + header, nav + div { padding-top: 50px; }
    .content-page { box-sizing: border-box; }         
    .content { box-sizing: border-box; }    
}
@media (max-width: 580px) {
    nav + header, nav + div { padding-top: 70px; }
    .articles th, .articles td { padding: 5px 5px; min-width: 60px; }
    .triple { width: 100%; max-width: 100%; min-height: 120px; }
    .two-triple { width: 100%; max-width: 100%; min-height: 120px; }
    .triple .circle { width: 100%; height: 100%; line-height: initial; padding: 15px; max-width: 100%; box-sizing: border-box; border-radius: 7px; }  
    .circle img { height: 45%; max-height: 140px; width: 140px; }
}