@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html, body {padding:0; margin:0; width:100%; min-width:320px; min-height:100vh;}
h1 {font:700 40px/45px 'Roboto Condensed', sans-serif; color:#1f94d7; padding:0; margin:0;}
h3 {font:400 28px/35px 'Roboto Condensed', sans-serif; color:#333; padding:0; margin:0;}
p {font:300 15px/20px 'calibri', sans-serif; color:#333; padding:0; margin:0;}

#wrapper {width:100%; min-height:100%;}
#topHeader {width:100%; max-width:1400px; padding:10px 20px; box-sizing:border-box; margin:0 auto;}
#topHeader img {display:block;}
#topHeader .language {float:right;}
#topHeader .language a {display:inline-block; margin:10px;}

#header {width:100%;}
#header .top-pic {display:block; width:100%;}

#lowerHeader {background:#1d94d6; position:relative;}
#lowerHeader h3 {font:700 28px/35px 'Roboto Condensed', sans-serif; color:#fff; margin:0 auto; padding:20px; box-sizing:border-box; background:#1d94d6; color:#fff; text-align:right; width:100%; max-width:1400px;}
#lowerHeader h3 a {display:block; width:40px; margin-left:8px; height:40px; text-decoration:none; border:3px solid #fff; border-radius:100%; position:absolute; top: calc(50% - 25px); transition : border 0.3s}
#lowerHeader h3 a::before{
	width:13px;
	height:13px;
    position:absolute;
	top:10px;
	right:7px;
    display:block;
    content:"";
    border:3px solid transparent;
	border-color:transparent transparent #fff #fff;
	transform:rotate(45deg);
	transition : border 0.3s;
}
#lowerHeader h3 a:hover {border-color:#cc0;}
#lowerHeader h3 a:hover::before {border-color:transparent transparent #cc0 #cc0;}

#footer {height:100px; border-top:4px solid #1d94d6; background:#ddd;}
#foot-inner {width:100%; max-width:1400px; padding:20px; box-sizing:border-box; margin:0 auto;}
#foot-inner p {color:#696969; padding-top:20px;}

#content {width:100%;}
#topText {width:100%; background:#ddd; border-bottom:4px solid #1d94d6;}
#topTextInner {width:100%; max-width:1400px; padding:20px; box-sizing:border-box; margin:0 auto;}

.picBar {width:100%; background: #e5e5e5;}
.picBar:nth-child(even) {background: #fff;}
.picBar-inner {width:100%; max-width:1400px; padding:0 20px; box-sizing:border-box; margin:0 auto; display:flex; flex-wrap: wrap;}
.info {width:100%;}
.topBar {display:flex; align-items:center; padding:10px 0; width:100%;}
.topBar img {display:block; width:60px; margin:0 15px 0 0;}
.info:last-child .topBar img {padding-left:10px;}
.topBar h4 {width:calc(80% - 40px); font:700 30px/35px 'Roboto Condensed', sans-serif; color:#1f94d7; padding:0; margin:0;}
.topBar div {width:70px;}


.infoBar {display:flex; align-items:center; flex-wrap:wrap;}
.infoBar img {width:100%; padding:20px 0;}
.infoBar ul {list-style:none;}
.infoBar ul li {font:300 18px/20px 'calibri', sans-serif; color:#333; padding:0; margin:8px 0; position:relative;}
.infoBar ul li::before {content: ""; display:block; width:9px; height:9px; background:#1f94d7; border-radius:100%; display:inline-block; position:absolute; left:-15px; top:5px;}
.infoBar div {position:relative; width:50%; padding-right:10px; box-sizing:border-box;}
.infoBar div p {font:300 18px/20px 'calibri', sans-serif; color:#333; padding:0 0 0 40px; margin:8px 0;}


@media only screen and (max-width:768px) {
.infoBar div {width:100%;}
.picBar:nth-child(even) div:last-child,
.picBar:nth-child(odd) div:first-child {padding-bottom:20px;}
.picBar:nth-child(odd) div:last-child {order:-1;}
.picBar-inner {padding:0;}
#header {height:240px; overflow:hidden;}
#header .top-pic {height:238px; width:auto; margin-left:50%; transform:translateX(-50%);}
.info .topBar img {padding-left:10px;}
#lowerHeader h3 {font-size:24px;}
h1 {font-size:30px; line-height:35px;}
h3 {font-size:20px; line-height:25px;}
}


@media only screen and (max-width:420px) {
#topHeader img {width:100%;}
}