﻿html {
  background: #ededed;
  color: black;
  width: 100%;
  height: 100%;  
}

header {
  height: 13.5%;
  width: 100%;
  background: linear-gradient(0.25turn, #bdffe7, #d5fff0, #bdffe7);
  position: fixed;
  margin: 0%:
  padding: 0%:
  top: 0;
  float: high left;
  box-shadow:1px 1px 20px 1px;
}

@media screen and (max-width: 1204px) {
header {
height: 7%;
}
} 

h1 {
  font-size: 3vw;
  margin: 0 30vw;
  position: fixed;
  top: 5.5vh;
  text-align: left;
  font-family: 'Dancing Script';
  line-height: 10px;
  width: 100%;
}

@media screen and (max-width: 1204px) {
h1 {
  font-size: 7vw;
  margin: 0 0;
  position: fixed;
  top: 3%;
  text-align: center;
  font-family: 'Dancing Script';
  line-height: 10px;
  width: 100%;
}
}

h2 {
  font-size: 1.75vw;
  position: fixed;
  margin: 10.5vh 0.51vw;
  top: 0;
  font-family: 'Mr De Haviland', sans-serif;
  line-height: 10px;
  width: 100%;
}

@media screen and (max-width: 1204px) {
h2 {
display: none;
}
}

.flotte {
float: high left;
position: fixed;
top: 0;
margin: 0.30vh 2.2vw;
width: 4.28%; 
}

@media screen and (max-width: 1204px) {
.flotte {
margin: 1.25% 2%;
width: 9vw;
}
}

#imgtourne {
border-radius: 165px;
margin-left: 0px;
-webkit-animation: spin 30s linear infinite;
-moz-animation: spin 30s linear infinite;
animation: spin 30s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }


.gglm {
margin: 9vh 96vw;
position: fixed;
top: 0;
}

@media screen and (max-width: 1204px) {
.gglm {
display: none;
}
}

.skype {
margin: 9.1vh 94vw;
position: fixed;
top: 0;
} 

@media screen and (max-width: 1204px) {
.skype {
display: none;
}
}

@media screen and (min-width: 1204px) {
#menuH {
display: none;
}
}


         
body {
  width: 100%; 
  position: relative;
  margin: 0 0;
  padding: 0 0;
}

@media screen and (min-width: 1204px) {
.nav1 li {
   float: right;
   text-align: left; 
}

.nav1 ul{
   list-style-type: none;
   position: fixed;
   top: 9.5vh;
   margin: 0 -5vw;
   padding: 0 0 0 0;
   width: 100%;
}   

.nav1 ul::after{
   content: "";
   display: table;
   clear: both;  
}

.nav1 a{
   display: block;
   text-decoration: none;
   color: black;
   padding: 0 0.85vw 0 0;
}

.nav1 a:hover{
   color: #035ba9;
   border-bottom-color: 0px solid #fcf5c6;
   border-bottom-style: none; 
   }

.nav1 .en-cours {
color: #035ba9;
}
}

@media screen and (max-width: 1204px) {
.nav1 {
display: none;
}
}
  
p {
  font-size: 1.30vw;
  margin: 0 15% 0 15%;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Montserrat Alternates', sans-serif;
}

@media screen and (max-width: 1204px) {
p {
margin : 0 10%;
font-size: 3vw;
}
}

li {
  font-size: 1vw;
  font-family: 'Noto Sans Kr', sans-serif;
}

h3 {
 font-family: 'Dancing Script', sans-serif;
 font-size: 3vw;
 color:;
 margin: 0 0 0 0;
 text-align:center;
 padding:;
 background:;
} 

@media screen and (max-width: 1204px) {
h3 {
font-size: 5vw;
margin: 1% 2%;
}
}

button {
        background-color: #066fca;
        border: 2px solid #fcf5c6;
        color: white;
        padding: 7px 7px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 0.5% 14.75%;
        cursor: pointer;
      }

@media screen and (max-width: 1204px) {
button {
margin: 0 30%;
padding: 20px 20px;
font-size: 40px;
}
}

.bandeimg {
margin: 13.5vh 0 0 0;
}

@media screen and (max-width: 1204px) {
.bandeimg {
margin: 6.75vh 0 0 0;
}
}

.ppmmn {
float: left;
margin: 0.5% 2% 0% 15%;
width: 15%;
}

@media screen and (max-width: 1204px) {
.ppmmn {
margin: 0.5% 2% 0 10%;
width: 37.5%;
}
}

.calendly-inline-widget {
position : fixed;
}

footer {
  height: 40px;
  width: 100%;
  position: relative;
  bottom:0;
  background: linear-gradient(0.25turn, #bdffe7, #d5fff0, #bdffe7);
  margin: 0 0;
  box-shadow:1px 1px 20px 1px;
} 

@media screen and (max-width: 1204px) {
footer {
  height: 60px;
}
}

footer p {
font-size: 12px;
margin: 5px 5px;
padding: 10px 10px;
}

@media screen and (max-width: 1204px) {
footer p {
font-size: 25px;
}
}

@media screen and (max-width: 1204px) {

a:hover {
  color: #035ba9;
}

#menuH a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuH a:hover {
  color: #035ba9;
  border-bottom-style: none;
}

#menuH {
display: block;
position: fixed;
top: 3%;
width: 10vw;
right: 0;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}

#menuH input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  right: 60%;
  cursor: pointer;
  opacity: 0; 
  z-index: 2;   
  -webkit-touch-callout: none;
}

#menuH span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #035ba9;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuH span:first-child {
  transform-origin: 0% 0%;
}

#menuH span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuH input:checked ~ span {
  opacity: 1;
  transform: rotate(-45deg) translate(-10px, 6px);
  background: #232323;
}

#menuH input:checked ~ span:nth-last-child(3) {
  transform: rotate(45deg) translate(-10px, -10px);
  }

#menuH input:checked ~ span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu {
  position: absolute;
  width: 200px;
  margin: 45% 0 0 400%;
  padding: 50px;
  padding-top: 0 0 0 0;
  background: #e8dfdf;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: -100% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 2px;
  font-size: 3vw;
  font-family: 'Noto Sans Kr', sans-serif;
}

#menuH input:checked ~ ul {
  transform: translate(-190%, 0);
}
}
