body {
/*  font-family: "GothamPro",Arial,sans-serif;*/
    color: #383838;
    background: #F8F9FA;
    margin:0px;
}
.main1 {
    position: relative;
    width:100%;
    padding-top: 0px !important;
    background:#F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 0px solid #000;
    margin:0px;
    padding:0px;
}
.sub1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid #000;
    width: 100%;
    margin: 50px auto;
    background:#F8F9FA;
    font-size:1rem;
    overflow:hidden;
    height:auto;
}
.sub2 {
    padding:10px;
    width:50%;
    margin:auto;
    padding:auto;
}

.topImage {
    width:100%;
    height: 300px;
    top: -0px;
    margin:0px 0 0 0;
    background-image:url('../img/bg.webp');
    background-repeat: no-repeat;    
    background-position: center;
    color: #fff;
    font-size:1rem;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
}

.topImageM {
    width:100%;
    height: 200px;
    top: -0px;
    margin:0px 0 0 0;
    
    background-image:url('../img/bgm.webp');
    background-repeat: no-repeat;    
    background-position: center;    
    color: #fff;
    font-size:1rem;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
}

.topImageM{display: none;}
.topImage{display: block;}

.fedPC {
    display: block;
    background:#F8F9FA;
    text-align:right;
    width:300px;
    height:3000px;
}

@media (max-width: 991.98px) {
    .sub1 {
    position: relative;
    display: block;
    border: 0px dotted lightsalmon;
    overflow:hidden;
    height:auto;
    width: 90%;
    margin: 50px auto;
    background:#F8F9FA;
    font-size:1.2rem;
    margin:0px;
    border: 0px solid #000;
    }
    
    .sub2 {
    padding:10px;
    width:auto;
    margin:auto;
    padding:auto;
    }
    .topImageM{display: block;}
    .topImage{display: none;}
    
    .fedPC {display: none;}
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 10px 15px;
  margin: 4px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
  border:2px solid #000;
}

.button1 {border-radius: 8px;}
.button2 {border-radius: 50%;}
.button3 {border-radius: 35px; background-color:#000; border:none; color:white; right:10px; margin:9px 0px;padding:5px 15px;}

.img-course {
    width:100%;    
}

.footer {   
    position:relative; 
    width:100%;
    height:auto;
    bottom: 0px;
    margin-top: 2rem;
    padding: 1rem;
    background:
        url(../img/bg-grass_1.webp),
        linear-gradient(to bottom right, #8af073, #135c03);
    background-position:
        left 0px bottom 0px,
        right 0px top 50%,
        center top;
    background-repeat: no-repeat;
}

.footer .copyright {
    position:absolute; right:0px; bottom:0px;
    height: 10px;
    width: 100%;
    text-align: center;
    padding: 25px 0;
    font-size: 14px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer a:link { 
    text-decoration-line: none;
    color: white;
    padding: 0 5px
}

.footer a:visited  { color:white; }
.footer a:hover { color:red; }

.gugi-regular {
  font-family: "Gugi", serif;
  font-weight: 400;
  font-style: normal;
}