/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/modern-css-reset/dist/reset.min.css ***!
  \**************************************************************************************************************************************************************************/
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/variables.css ***!
  \*****************************************************************************************************/
:root {
  --black: #000;
  --font: 'Source Sans Pro', sans-serif;
}

/*!***************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/content.css ***!
  \***************************************************************************************************/
.clearfix::before,
.clearfix::after {
  content: ' ';
  display: table;
}

.clearfix::after {
  clear: both;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--black);
  font-family: var(--font);
  font-weight: 400;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
  cursor: pointer;
}

.wrapper {
  margin: auto;
  max-width: 1300px;
  width: 95%;
}

@media screen and (min-width: 640px) {
  .wrapper {
    width: 80%;
  }
}

#main.wrapper {
  margin: 120px auto 0 auto;
}

@media screen and (min-width: 1024px) {
  #main.wrapper {
    margin: 140px auto 0 auto;
  }
}

#main.wrapper section {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/header.css ***!
  \**************************************************************************************************/
#header {
  margin: 40px 0 0 0;
  width: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  letter-spacing: 0.2em;
  font-size: 0.6em;
  height: 70px;
  display: block;
}

@media screen and (min-width: 640px) {
  #header {
    font-size: 0.7em;
  }
}

@media screen and (min-width: 1024px) {
  #header {
    font-size: 0.8em;
  }
}

@media screen and (min-width: 1400px) {
  #header {
    font-size: 0.9em;
  }
}

#header .wrapper {
  display: flex;
  flex-flow: row wrap;
}

#header .logo {
  text-decoration: none;
  display: block;
  height: auto;
  flex: 1 0 auto;
}

@media screen and (min-width: 640px) {
  #header .logo {
    width: 100px;
  }
}

#header img {
  display: block;
  width: 100%;
  max-width: 100px;
  margin: auto;
}

@media screen and (min-width: 640px) {
  #header img {
    margin: 0 0 0 -8px;
  }
}

@media screen and (min-width: 1024px) {
  #header img {
    max-width: 140px;
  }
}

#header #menu {
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px 5% 0 0;
}

@media screen and (min-width: 640px) {
  #header #menu {
    display: none;
  }
}

#header nav {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 640px) {
  #header nav {
    width: 70%;
    align-items: center;
    justify-content: flex-end;
  }
}

#header nav ul {
  display: flex;
  padding: 0;
  margin: 0;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

#header nav ul li:not(:first-child) {
  margin: 0 0 0 15px;
}

#header nav ul li {
  list-style: none;
}

#header nav ul li a {
  text-decoration: none;
  color: var(--black);
  border-bottom: solid 1px rgba(0, 0, 0, 0);
  transition: border 500ms ease-out;
}

#header nav ul li a.active,
#header nav ul li a:hover {
  border-bottom: solid 1px var(--black);
}

#header nav .nav-menu {
  width: auto;
}

#header nav .lang-menu {
  display: flex;
  width: auto;
  margin: 0 0 0 30px;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

#header nav .lang-menu form {
  display: inline-block;
  float: left;
  margin: 0;
}

#header nav .lang-menu button {
  background: none !important;
  border: none;
  padding: 0 !important;
  outline: none !important;
  box-sizing: border-box;
}

#header nav .lang-menu button.active,
#header nav .lang-menu button:hover {
  border-bottom: solid 1px var(--black);
}

/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/footer.css ***!
  \**************************************************************************************************/
#footer {
  position: fixed;
  bottom: 12vh;
  left: 0;
  display: block;
  overflow: auto;
  width: 100%;
}

#footer img {
  display: inline-block;
  height: auto;
  width: 100px;
  margin: 12px 0 0 0;
}

#social,
#socialAbout {
  text-align: right;
}

#social ul,
#socialAbout ul {
  display: inline-block;
  width: 100%;
  margin: 20px 0 40px 0;
  text-align: right;
  padding: 0;
  list-style: none;
  letter-spacing: 0.2em;
  font-size: 0.59em;
  height: auto;
}

@media screen and (min-width: 640px) {
  #social ul,
  #socialAbout ul {
    font-size: 0.7em;
  }
}

@media screen and (min-width: 1024px) {
  #social ul,
  #socialAbout ul {
    font-size: 0.78em;
  }
}

@media screen and (min-width: 1400px) {
  #social ul,
  #socialAbout ul {
    font-size: 1em;
  }
}

#social ul li,
#socialAbout ul li {
  display: inline-block;
  text-decoration: none;
  margin: 0 0 0 6%;
}

#social ul li a,
#socialAbout ul li a {
  width: auto;
  text-decoration: none;
  color: var(--black);
  border-bottom: solid 1px rgba(0, 0, 0, 0);
  transition: border 500ms ease-out;
}

#social ul li a.active,
#socialAbout ul li a.active,
#social ul li a:hover,
#socialAbout ul li a:hover {
  border-bottom: solid 1px var(--black);
}

/*!*************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/about.css ***!
  \*************************************************************************************************/
.about {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.about-img {
  height: auto;
  display: block;
  width: 100%;
  float: none;
  margin: 0 4px 0 0;
}

@media screen and (min-width: 640px) {
  .about-img {
    width: 48%;
    float: left;
  }
}

.about article {
  display: block;
  float: none;
  width: 100%;
  margin: 40px 0 0 0;
}

@media screen and (min-width: 640px) {
  .about article {
    margin: 0;
    width: 48%;
  }
}

.about article header {
  clear: both;
  display: block;
  overflow: hidden;
  margin: 0 0 21px 0;
}

.about article header h2 {
  margin: 0;
}

.about article header h2 img {
  width: 30%;
  height: auto;
  display: block;
}

@media screen and (min-width: 640px) {
  .about article header h2 img {
    width: 50%;
  }
}

.about article p {
  text-align: justify;
  font-size: 0.4em;
}

@media screen and (min-width: 1024px) {
  .about article p {
    font-size: 0.6em;
  }
}

@media screen and (min-width: 1400px) {
  .about article p {
    font-size: 0.8em;
  }
}

.about article #aboutInfo {
  letter-spacing: 0.2em;
  line-height: 200%;
}

/*!*************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/press.css ***!
  \*************************************************************************************************/
.press div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 20px auto;
}

.press a {
  width: 48%;
}

.press .about-img {
  width: 100%;
  height: auto;
  display: block;
  float: right;
  margin: 0;
}

.press section {
  margin: 0 0 20px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

.press article {
  display: block;
  float: right;
  width: 45%;
}

.press article header {
  clear: both;
  display: block;
  overflow: hidden;
}

.press article header h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.2em;
  font-size: 0.8em;
}

@media screen and (min-width: 640px) {
  .press article header h2 {
    margin: 0 0 43px 0;
  }
}

@media screen and (min-width: 1024px) {
  .press article header h2 {
    font-size: 1.2em;
  }
}

@media screen and (min-width: 1400px) {
  .press article header h2 {
    font-size: 1.4em;
  }
}

.press article header h2 a {
  color: var(--black);
  text-decoration: none;
}

.press article p {
  text-align: justify;
  font-size: 0.4em;
}

@media screen and (min-width: 1024px) {
  .press article p {
    font-size: 0.6em;
  }
}

@media screen and (min-width: 1400px) {
  .press article p {
    font-size: 0.8em;
  }
}

/*!****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/projects.css ***!
  \****************************************************************************************************/
.projects a {
  width: 29%;
  overflow: hidden;
  position: relative;
  padding: 29% 0 0 0;
  display: inline-block;
  margin: 0 3.356752537080406% 43px 0;
}

@media screen and (min-width: 640px) {
  .projects a {
    padding: 20% 0 0 0;
    width: 20%;
  }
}

.projects a.left img {
  margin: 0 0 0 16%;
}

.projects a.rigt img {
  margin: 0 0 0 -16%;
}

.projects a.up img {
  margin: 16% 0 0 0;
}

.projects a.down img {
  margin: -16% 0 0 0;
}

.projects a.cntr img {
  margin: 0;
}

.projects a:hover img.blackAndWhite {
  visibility: hidden;
  opacity: 0;
}

.projects a img {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
  transition: visibility 2s ease 2s, opacity 2s ease;
}

.projects article {
  width: 30%;
  display: block;
}

.projects article span {
  margin: 0 auto 20px auto;
  text-align: right;
  display: block;
  font-size: 0.5em;
}

@media screen and (min-width: 640px) {
  .projects article span {
    font-size: 0.7em;
  }
}

@media screen and (min-width: 1024px) {
  .projects article span {
    font-size: 0.8em;
  }
}

@media screen and (min-width: 1400px) {
  .projects article span {
    font-size: 1em;
  }
}

.projects article a {
  width: 100%;
  padding: 100% 0 0 0;
  margin: 0;
}

/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/single.css ***!
  \**************************************************************************************************/
.single h2 {
  font-weight: 400;
  letter-spacing: 0.2em;
  font-size: 0.5em;
}

@media screen and (min-width: 1024px) {
  .single h2 {
    font-size: 1.2em;
  }
}

@media screen and (min-width: 1400px) {
  .single h2 {
    font-size: 1.4em;
  }
}

.single .singleCover {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.single .singleCover .singleImg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

@media screen and (min-width: 640px) {
  .single .singleCover .singleImg {
    width: 60%;
  }
}

.single .singleCover article {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 10px 0 0;
  margin: 30px 0 0 0;
}

@media screen and (min-width: 640px) {
  .single .singleCover article {
    width: 35%;
    margin: 0;
  }
}

.single .singleCover article header {
  clear: both;
  display: block;
  overflow: hidden;
}

.single .singleCover article header h2 {
  margin: 0;
}

.single .singleCover article p {
  text-align: left;
  font-size: 0.4em;
}

@media screen and (min-width: 640px) {
  .single .singleCover article p {
    text-align: justify;
  }
}

@media screen and (min-width: 1024px) {
  .single .singleCover article p {
    font-size: 0.6em;
  }
}

@media screen and (min-width: 1400px) {
  .single .singleCover article p {
    font-size: 0.8em;
  }
}

.single .singleCover article .singleInfo {
  letter-spacing: 0.2em;
  line-height: 200%;
  margin-bottom: 0;
}

.single .singleCover article .social {
  width: 50%;
  display: block;
  float: right;
  text-align: right;
  position: relative;
  top: -25px;
}

.single .singleCover article .social a {
  width: 20%;
  display: inline-block;
}

.single .singleCover article .social a img {
  width: 90%;
  height: auto;
  display: inline-block;
}

.single .gallery img {
  display: block;
  height: auto;
}

.single .gallery .covr {
  clear: both;
  display: block;
  width: 100%;
  margin: 21px 0 0 0;
}

@media screen and (min-width: 640px) {
  .single .gallery .covr {
    width: 100%;
    margin: 43px 0 0 0;
  }
}

.single .gallery .left {
  width: 40.5%;
  float: left;
  margin: 21px 0 21px 5.464481%;
}

@media screen and (min-width: 640px) {
  .single .gallery .left {
    width: 45.5%;
    margin: 43px 0 43px 5.464481%;
  }
}

.single .gallery .rigt {
  width: 40.5%;
  float: right;
  margin: 21px 5% 21px 0;
}

@media screen and (min-width: 640px) {
  .single .gallery .rigt {
    width: 45.5%;
    margin: 43px 0 43px 0;
  }
}

.single .gallery .cntr {
  width: 60%;
  clear: both;
  margin: 21px auto 0 auto;
}

@media screen and (min-width: 640px) {
  .single .gallery .cntr {
    margin: 43px auto 0 auto;
  }
}

.single .gallery .videoWrapper {
  margin: 43px 0 0 0;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
  overflow: hidden;
  display: block;
}

.single .gallery .videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/slider.css ***!
  \**************************************************************************************************/
.slider {
  height: 70vh;
  overflow: hidden;
}

.slider div {
  width: 100%;
}

.slider div.slick-list {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.slider a {
  width: 100%;
  display: block;
  margin: auto;
}

.slider a:hover img.blackAndWhite {
  visibility: hidden;
  opacity: 0;
}

.slider a img {
  width: 100%;
  height: auto;
  display: block;
  transition: visibility 2s ease 2s, opacity 2s ease;
}

@media screen and (max-width: 640px) {
  .slider {
    height: 65vh;
  }
}

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/style.css ***!
  \*******************************************************************************************************************************************/



/*# sourceMappingURL=main.css.map*/