@charset "utf-8";
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
  font-family: 'Trajan Pro';
}

a {
  text-decoration: none;
}

ul li {
  list-style-type: none;
}

#wrapper {
  width: 100%;
}

/* ----------------------------- header ----------------------------- */
#header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

#header h1 {
  text-align: left;
  line-height: 80px;
  float: left;
}

#header h1 a {
  display: inline-block;
  height: 80px;
}

/* ------------------------ nav ------------------------ */

#nav {
  line-height: 80px;
  width: 50%;
  overflow: hidden;
}

#nav ul:hover,
#nav ul:active {
  display: block;
  background-color: rgba(255,255,255,0.8);
}

.menu li {
  float: left;
  margin: 0 2%;
}

.icon li,
.lang li {
  float: right;
  margin: 0 1%;
}

.menu li,
.lang li {
  font-size: 110%;
}

.menu li a,
.lang li a {
  color: black;
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 0) 1px 
      no-repeat;
  transition:0.5s;
}
.menu li a:hover,
.lang li a:hover,
.menu li a:active,
.lang li a:active {
  --d: 100%;
}

.icon li img {
  display: inline-block;
  width: 55px;
  height: 56px;
  vertical-align: middle;
}

.icon li img:hover,
.icon li img:active {
  background-color: rgb(211, 211, 211);
  width: 55px;
  height: 56px;
  border-radius: 50%;
}

.menu li a,
.lang li a,
.icon li a {
  display: block;
  height: 50px;
}


/* ----------------------------- main ----------------------------- */

#main {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.woman {
  position: relative;
}

.woman h2 {
  position: absolute;
  top: 12%;
  right: 6%;
  font-size: 5em;
  z-index: 5;
  color: black;
  background: 
      linear-gradient(currentColor 0 0) 
      100% 100% /var(--d, 0) 3px 
      no-repeat;
  transition:0.5s;
}

.woman:hover {
  --d: 100%;
}

.woman .active,
.man .active {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}
.woman:hover .active,
.man:hover .active,
.woman:active .active,
.man:active .active {
  opacity: 1;
}

.man {
  position: relative;
}

.man h2 {
  position: absolute;
  top: 12%;
  left: 6%;
  font-size: 5em;
  z-index: 5;
  color: black;
  background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.5s;
}

.man:hover,
.man:active {
  --d: 100%;
}

.woman img,
.man img {
  width: 100%;
}

/* ----------------------------- footer ----------------------------- */

footer {
  height: 70px;
}

footer p {
  text-align: center;
  line-height: 70px;
}


/* ---------------------------- media ---------------------------- */
@media screen and (max-width: 1024px) {
  #nav {
    font-size: 90%;
  }

  .icon li img {
    vertical-align: middle;
    width: 100%;
  }

  .icon li img {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  
  .icon li img:hover,
  .icon li img:active {
    width: 40px;
    height: 40px;
  }

  .menu li,
  .lang li {
  font-size: 95%;
}

  .woman h2,
  .man h2 {
    font-size: 230%;
  }

}

@media screen and (max-width: 768px) {
  #nav {
    font-size: 90%;
  }

  .icon li img {
    vertical-align: middle;
    width: 100%;
  }

  .icon li img {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  
  .icon li img:hover,
  .icon li img:active {
    width: 40px;
    height: 40px;
  }

  .menu li,
  .lang li {
  font-size: 65%;
}

  .woman h2,
  .man h2 {
    font-size: 230%;
  }

  }