/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: url('fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* nanum-gothic-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/nanum-gothic-v21-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/nanum-gothic-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/nanum-gothic-v21-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/nanum-gothic-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v21-latin-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
}

/* https://www.codingflicks.com/2020/08/simple-ken-burns-effect-using-css.html https://www.youtube.com/watch?v=ttNrJRvp9pg*/
@-webkit-keyframes animate {
0% {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
transform: scale(1.0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1.0);
}
}

html{ height: 100%; min-height: 100%; }
body { padding: 0; margin: 0; background: url(img/asll-santiago-chile.jpg) no-repeat center -50px; background-size: cover; background-attachment: fixed; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 30px; font-weight: 400; color: #272727; text-decoration: none; text-align: left; }
h1 { padding: 0; margin: 0; font-family: 'Nanum Gothic'; font-size: 40px; line-height: 46px; font-weight: 600; color: #31506f; letter-spacing: .1em; text-transform: uppercase; }
h2 { padding: 0; margin: 0 0 53px 0; font-family: 'Open Sans', sans-serif; font-size: 20px; line-height: 34px; font-weight: 400; color: #31506f; }
a { color: #272727; text-decoration: underline; }
p { padding: 0; margin: 0 0 30px 0; }
hr { height: 1px; border: none; margin: 10px 0; border-bottom: 1px solid #45617d; }
.clearer { clear: both; }
.contentclearer { clear: both; height: 50px; }
.topclearer { clear: both; height: 520px; }
.subclearer { clear: both; height: 400px; }
#mobilebutton { display: none; }

#background {
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
}

#background img {
width: 100%;
animation: animate 80s ease infinite;
position: absolute;
}

#topcontainer { position: fixed; z-index: 1000; top: 0; width: 100%; padding: 0; margin: 0; background: #fff; box-shadow: 0 0 20px #408ebb; text-align: left; }
#top { width: 1100px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; }
#logo { float: left; padding: 41px 0 0 0; }
#navi { margin: 0; padding: 85px 0 19px 0; font-size: 18px; font-weight: 300; text-align: right; }
#navi .naviitem { display: inline-block; margin: 0 17px; padding: 7px 0; }
#navi .naviitem a { color: #31506f; text-decoration: none; }
#navi .active { background: #45617d; padding: 7px 40px; }
#navi .active a { color: #fff; }
#navi .language { border: 1px solid #45617d; margin: 0 0 0 10px!important; padding: 7px 14px; font-family: 'Nanum Gothic'; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
#mobilenavi { display: none; }

#contentcontainer { width: 1240px; padding: 0; margin: 0 auto 60px auto; background: #fff; opacity: 0.99; }
#content { width: 1100px; padding: 62px 0 80px 0; margin-left: auto; margin-right: auto; text-align: center; }
.column { float: left; width: 508px; min-height: 310px; margin: 0 42px 0 0; padding: 42px 0 20px 0; text-align: left; border-top: 1px solid #45617d; border-bottom: 1px solid #45617d; }
.last { margin: 0 0 0 42px; }
.column h2 { margin: 0; }
.column img { max-width: 100%; height: auto; margin: 0 0 30px 0; }
.column iframe { margin: 0 0 30px 0; }
#content .column span { display: inline-block; width: 26px; font-weight: 700; color: #31506f; }

#footercontainer { width: 100%; padding: 0; margin: 230px 0 0 0; background: #253a4f; opacity: 0.99; }
#footer { width: 1100px; padding: 75px 0 100px 0; margin-left: auto; margin-right: auto; text-align: left; color: #fff; }
#footer .column { width: 70%; min-height: 0; margin: 0; padding: 0; border: 0; }
#footer .column span { font-family: 'Nanum Gothic'; font-size: 20px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
#footer .last { width: 30%!important; text-align: right; }
#footer a { color: #fff; }


/* Responsive */

@media only screen and (max-width: 1200px) {
.topclearer { height: 420px; }
.subclearer { height: 300px; }
#top { width: 94%; margin: 0 3%; }
#logo { padding: 30px 0 0 0; }
#logo img { width: 160px; height: auto; }
#navi { padding: 30px 0 14px 0; }
#navi .naviitem { display: none; }
#mobilenavi { float: right; display: table; position: relative; }
.toggle-menu ul { display: table; width: 36px; list-style-type: none;	margin: 0; padding: 0; }
.toggle-menu ul li { width: 100%; height: 6px; background-color: #fff; margin-bottom: 6px; }
.toggle-menu ul li:last-child { margin-bottom: 0px; }
label { float: right; padding: 15px 12px; display: inline-block; cursor: pointer; background: #31506f; }
input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; background: none; }
input[type=checkbox]:focus { background:none; }
input[type=checkbox]:checked ~ nav { display: block; }
nav { width: 230px; float: right; display: none; position: absolute; right: 0px; top: 60px; background-color: #31506f; border-top: 1px solid #fff; padding: 0px; z-index: 9999; }
nav ul { display: table; float: right; width: auto; margin: 0; padding: 0; }
nav ul li { float: none; padding: 0px; width: 100%; display: table; }
nav ul li.mobile { display: none; }
nav ul li:last-child { padding-right: 0px; }
nav ul li a { color: #fff; font-family: 'Open Sans', arial, verdana, sans-serif; font-size: 18px; font-weight: 300; text-decoration: none; padding: 10px 15px 10px 49px; display: block; border-bottom: 1px solid #fff; transition: all 0.5s ease 0s; }
nav ul li a:hover { background-color: #fff; color: #31506f; transition: all 0.5s ease 0s; }
#contentcontainer { width: 94%; }
#content { width: 90%; margin: 0 5%; }
.column { width: 47%; margin: 0 3% 0 0; }
.last { margin: 0 0 0 3%; }
#footercontainer { margin: 130px 0 0 0; }
#footer { width: 94%; margin: 0 3%; }
#footer .column { width: 75%; margin: 0 5% 0 0; }
#footer .last { width: 20%!important; margin: 0; }

}

@media only screen and (max-width: 900px) {
.topclearer { height: 320px; }
.subclearer { height: 200px; }
#mobilebutton { display: block; position: fixed; bottom: 0; width: 100%; background: #31506f; text-align: center; padding: 5px 0; }
#background { display: none; }
#top { width: 90%; margin: 0 5%; }
#contentcontainer { width: 90%; }
#content { width: 84%; margin: 0 8%; padding: 45px 0 20px 0; }
.column { float: none; width: 100%; margin: 0; border-bottom: none; }
.last { margin: 0; }
#footer { width: 90%; margin: 0 5%; padding: 45px 0 70px 0; }
#footer .column { width: 100%; margin: 0; text-align: center; }
#footer .last { width: 100%!important; text-align: center; }
}