@font-face {
    font-family: Monts;
    src: url(Monts.ttf);
}

body, input, button, textarea, select{
    font-family: 'Monts';
    font-size: 15px;
}

.gray{
    background: #f6f6f6;
}

.pdg{
    padding:6% 0;
}

body{
    color:rgba(1,1,1,0.6);
    margin:0;
    font-size: 16px;
}

.container{
    width:90%;
    margin:0 auto;
}

a{
    text-decoration: none;
    color:rgba(1,1,1,0.6);
}

a, button{
    transition:opacity 0.5s;
}

a:hover, button:hover{
    opacity:0.5;
}

.clear{
    clear:both;
}

.bg-an{
    -webkit-animation-name: example; 
    animation-iteration-count: infinite;
    animation-name: example;
    animation-duration: 60s;
}

.font-an{
    -webkit-animation-name: font; 
    animation-iteration-count: infinite;
    animation-name: font;
    animation-duration: 60s;   
}

/* Header */

#h-1{
    width:100%;
    position: fixed;
    bottom:0;
    background: white;
    color:white;
    letter-spacing: 2px;
    padding:1% 0;
    text-align: center;
    border-top:2px solid rgba(1,1,1,0.2);
    z-index: 9999;
}

#h-1 a{
    margin:0 1%;
    color:white;
}

.menu-1{
    width:100%;
    position: fixed;
    bottom:0;
    z-index: 999;
    display:none;
}

.menu-2{
    padding:3% 0;
    text-align: center;
    color:white;
}

.menu-3{
    text-align: center;
    background: white;
    padding:3% 0;
    border-bottom:1px solid rgba(1,1,1,0.1);
}

.first{
    border-top:1px solid rgba(1,1,1,0.1);
}

/* Index */

#i-1{
    padding:5% 0;
    width:100%;
    color:white;
}

.i-1{
    letter-spacing: 5px;
    font-size: 25px;
}

#all{
    padding:1% 0;
    width:100%;
    color:white;
    letter-spacing: 2px;
    font-size: 20px;
}

#i-1 input{
    margin:1% 0;
    width:50%;
    padding:1%;
    border:none;
    border:1px solid rgba(1,1,1,0.1);
    text-align: center;
    border-radius:5px;
}

#i-1 button{
    cursor: pointer;
    margin-top:0.5%;
    border-radius:3px;
    padding:0.8% 5%;
    background: white;
    border:none;
    border-bottom:5px solid rgba(1,1,1,0.1);
}

.i-2{
    margin:3% 0;
}

.i-4{
    text-align: center;
    font-size: 25px;
    letter-spacing: 8px;
    margin-bottom:2%;
    animation-duration: 60s;
}

.i-4-1{
    margin:1.5% auto 2.5% auto;
    width:5%;
    padding:0.25% 0;
}

.i-4-2{
    width:70%;
    text-align: center;
    margin: 0 auto;
}

.i-4-3{
    width:50%;
    margin:0 auto;
}

.i-4-4{
    width: 48%;
    border-radius:3px;
    padding: 2% 0;
    margin:3% 1% 0 1%;
    text-align: center;
    color: white;
    float:left;
}

.i-5{
    text-align: justify;
}

.i-5 a{
    letter-spacing: 2px;
    color:#80bd9e;
}

.i-5-1{
    width:50%;
    margin:0 auto;
}

.i-5 input, .i-5 textarea, .i-5 select{
    width:100%;
    padding:1%;
    border:1px solid rgba(1,1,1,0.1);
    margin-bottom:2%;
}

.i-5-1 input, .i-5-1 textarea, .i-5-1 select{
    width:100%;
    padding:2%;
    border:1px solid rgba(1,1,1,0.1);
    margin-bottom:5%;
}

.i-5-1 select{
    width:105%;
}

.i-5 button{
    margin-top:1%;
    padding:1% 2%;
    background: #80bd9e;
    color:white;
    border:none;
    border-radius:3px;
    cursor: pointer;
}

.i-5 table{
    width:100%;
    border-collapse: collapse;
}

.i-5 thead, .ofc{
    color:white;
}

.ofc-2{
    color:rgba(1,1,1,0.6);
}

.i-5 thead{
    text-align: center;
}

.i-5 td{
    padding:1% 0;
    border:1px solid rgba(1,1,1,0.2);
}

.i-5 .ofc{
    padding:1%;
}

.i-6{
    border-top:1px solid rgba(1,1,1,0.1);
    padding:2% 0;
    border-bottom:1px solid rgba(1,1,1,0.1);
}

.i-7{
    border-radius:3px;
    width:80%;
    margin:3% auto 0 auto;
    background: white;
    border-bottom:4px solid rgba(1,1,1,0.1);
    border-right:3px solid rgba(1,1,1,0.1);
}

.i-7-1{
    text-align: center;
    padding:3% 0 0 0;
    font-size: 18px;
}

.i-7-2{
    text-align: justify;
    padding:0 2% 2% 2%;
    color:rgba(1,1,1,0.5);
}

.p-1{
    color:white;
    padding:2% 0;
    text-align: center;
    width:23%;
    margin:0 1%;
    float: left;
    border-radius:3px;
}

.m-1{
    width:48%;
    float:left;
    margin:1%;
}

.m-1 .ofc{
    width:25%;
    padding:1.5% 2%;
}

.m-1 .ofc-2{
    width:75%;
}

.m-1 img{
    width:100%;
    height: 350px;
}

#photo{
    width:60%;
    margin-bottom:2%;
    border-radius:50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

#photo:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}


.testi-1{
    width:30%;
    margin:1% 1.66%;
}

.testi-1 img{
    width: 100%;
    height: 600px;
}


/* Footer */
footer{
    margin-bottom: 50%;
}

.f-1-1, .f-1-2{
    text-align: center;
    padding:1% 0;
    width:35%;
    color: white;
    background: #80bd9e;
    letter-spacing: 5px;
}

.f-1-1{
    float:right;
    border-radius:3px;
    border-bottom: 5px solid #529e76;
    border-right:3px solid #529e76;
    margin-top:-12%;
}

.f-1-2{
    margin-top:12%;
    float: left;
    border-radius:3px;
    border-bottom: 5px solid #529e76;
    border-left:3px solid #529e76;
}

#f-1{
    margin-bottom:8%;
}

#f-2 a{
    font-size:28px;
    margin:0 0.15%;
}

#f-3{
    margin:0.2% 0;
    letter-spacing: 2px;
}

#i-404{
    font-size: 60px;
    text-align: center;
    margin:18% 5%;
}

/* Animate */

@-webkit-keyframes example {
    0%   {background-color: #80bd9e;}
    10%  {background-color: #598234;}
    20%  {background-color: #486B00;}
    30%  {background-color: #6FB98F;}
    40%  {background-color: #3F681C;}
    50%  {background-color: #5BC8AC;}    
    60%  {background-color: #86AC41;}
    70%  {background-color: #20948B;}
    80%  {background-color: #6AB187;}
    90%  {background-color: #4B7447;}
    100% {background-color: #80bd9e;}
}

@keyframes example {
    0%   {background-color: #80bd9e;}
    10%  {background-color: #598234;}
    20%  {background-color: #486B00;}
    30%  {background-color: #6FB98F;}
    40%  {background-color: #3F681C;}
    50%  {background-color: #5BC8AC;}    
    60%  {background-color: #86AC41;}
    70%  {background-color: #20948B;}
    80%  {background-color: #6AB187;}
    90%  {background-color: #4B7447;}
    100% {background-color: #80bd9e;}
}

@-webkit-keyframes font {
    0%   {color: #80bd9e;}
    10%  {color: #598234;}
    20%  {color: #486B00;}
    30%  {color: #6FB98F;}
    40%  {color: #3F681C;}
    50%  {color: #5BC8AC;}    
    60%  {color: #86AC41;}
    70%  {color: #20948B;}
    80%  {color: #6AB187;}
    90%  {color: #4B7447;}
    100% {color: #80bd9e;}
}

@keyframes font {
    0%   {color: #80bd9e;}
    10%  {color: #598234;}
    20%  {color: #486B00;}
    30%  {color: #6FB98F;}
    40%  {color: #3F681C;}
    50%  {color: #5BC8AC;}    
    60%  {color: #86AC41;}
    70%  {color: #20948B;}
    80%  {color: #6AB187;}
    90%  {color: #4B7447;}
    100% {color: #80bd9e;}
}