@font-face{font-family:'Sands';src:url('../fonts/Quicksand.ttf')}
@font-face{font-family:'Gagkline';src:url('../fonts/Gagkline.otf')}
@font-face{font-family:'Westmeath';src:url('../fonts/Westmeath.ttf')}
@keyframes Preloader{0%{width:50%;z-index:1000000;opacity:0} 100%{width:0%;opacity:1}}
@keyframes FadeIn{0%{opacity:0} 50%{opacity:0} 100%{opacity:1}}
@keyframes FadeUp{0%{transform:translateY(100%);opacity:0%} 100%{transform:translateY(0%);opacity:100%}}
@keyframes FadeDown{0%{transform:translateY(-100%);opacity:0%} 100%{transform:translateY(0%);opacity:100%}}
@keyframes FadeLeft{0%{transform:translateX(100%);opacity:0%} 100%{transform:translateXS(0%);opacity:100%}}
@keyframes FadeRight{0%{transform:translateX(-100%);opacity:0%} 100%{transform:translateX(0%);opacity:100%}}
@keyframes ScrollDown{0%{height:0%} 100%{height:80%}}
@keyframes ScrollRight{0%{width:0%} 100%{width:70%}}
@keyframes Scale{0%{scale:1.5} 100%{scale:1}}
::-webkit-scrollbar,.scroller{width:7.5px;border-radius:15px}
::-webkit-scrollbar-track{margin:2vh 0;background-color:#f1f1f1}
::-webkit-scrollbar-thumb{margin:2vh 0;background-color:#e7cf47a0}
::-webkit-scrollbar-thumb:hover{background:#e7cf47;cursor: pointer}
/*=================== Animation ===================*/
header{animation:FadeDown ease 1s}
content{animation:Scale ease 1s}
footer{animation:FadeUp ease 1.5s}
#Popup{animation:ScrollDown ease 1s}
#Popup .Left-Side{animation:FadeRight ease 3s}
#Popup .Right-Side .Menu-Prod:nth-child(1){animation:FadeIn ease 1s}
#Popup .Right-Side .Menu-Prod:nth-child(2){animation:FadeIn ease 1.25s}
#Popup .Right-Side .Menu-Prod:nth-child(3){animation:FadeIn ease 1.5s}
#Popup .Right-Side .Menu-Prod:nth-child(4){animation:FadeIn ease 1.75s}
#Nav-Points{animation:FadeLeft ease 2s}
header .Logo{animation:Preloader ease 2.5s}
#Social{animation:FadeDown ease 2s}
#Sec-01 .Inner-Content{animation:FadeIn ease 1.5s}
#Sec-01 .Inner-Content img{animation:FadeDown ease 2s}
#Sec-01 .Inner-Content p{animation:FadeIn ease 2.5s}
#Sec-02 .Inner-Content .Info-Box:nth-child(1){animation:FadeRight ease 1s}
#Sec-02 .Inner-Content .Info-Box:nth-child(2){animation:FadeDown ease 1s}
#Sec-02 .Inner-Content .Info-Box:nth-child(3){animation:FadeLeft ease 1s}
#Sec-03 #Prod-01{animation:FadeRight ease 1s}
#Sec-03 #Prod-02{animation:FadeLeft ease 1.25s}
#Sec-03 #Prod-03{animation:FadeLeft ease 1.5s}
#Sec-03 #Prod-04{animation:FadeLeft ease 1.75s}
#Sec-04 .Right-Content{animation:FadeLeft ease 2s}
#Sec-04 .Left-Content h1{animation:FadeDown ease 1s}
#Sec-04 .Left-Content h3{animation:FadeIn ease 1.5s}
#Sec-04 .Left-Content table  #Tr-01{animation:FadeRight ease 2s}
#Sec-04 .Left-Content table  #Tr-02{animation:FadeRight ease 2.25s}
#Sec-04 .Left-Content table  #Tr-03{animation:FadeRight ease 2.5s}
#Sec-04 .Left-Content table  #Tr-04{animation:FadeRight ease 2.75s}
/*=================== Hover ===================*/
#Social img:hover{transform:scale(1.1);filter:sepia(0%);transition-duration:0.5s}
#Sec-03 .Inner-Content .ProdBox:hover{border:4px solid #f0f8ffd1;transform:scale(1.05)}
#Popup-Content .Left-Side ul li:hover{background-color: #e7cf4740;transform: scale(1.025)}
#Popup .Right-Side .Menu-Prod:hover{transform: scale(1.025);}
header .NavLinks:hover{transform:scale(1.05);}
/*=================== General ===================*/
html {position: absolute;top: 0;bottom: 0;left: 0;right: 0;font-family:'Sands',serif;font-size:1rem;overflow: hidden}
body {position: relative;width: 100%;padding: 0;margin: 0;height: 100%;overflow: hidden}
.ActiveSec{display:block !important}
.ActiveDot{border:3px solid #9f8805;background-color:#fad600 !important;box-shadow:0 0 5px 0px black}
.ActiveNavTab{margin: 2vh -0.5vw !important;background-color: #e7cf47 !important;box-shadow: 0 4px 10px -5px #4c4c4c;font-weight:600 !important;transform: scale(1) !important;}
.ActiveTab{display:inline-block !important}
#Nav-Points {position: absolute;bottom: 7vh;right: 0.5vw;width: 40px;height: auto;padding: 10px 5px;margin: 0;border-radius: 75px;z-index: 100;background-color: #57703f4a}
#Nav-Points center{width: 100%;height: 100%}
#Nav-Points .NavPoints{display: block;width: 20px;height: 20px;margin: 10px 0;border-radius: 50%;border: 4px solid #c4a70a78;background-color: #c4a70a70;cursor: pointer}
#Nav-Points .ActiveDot{border: 4px solid #cfb524;background-color: #ffd800}
#NavBar {position: absolute;top: 6vh;right: 1.5vw}
#NavBar .ActiveDot{border: 0 solid !important;background-color: transparent !important;box-shadow: none !important;}
header .NavLinks{display: inline-block;margin: 0 10px;color: #c4b03b;font-size: 1.25rem;font-weight: 500;text-align: center;text-transform: uppercase;letter-spacing: 2.5px;cursor: pointer}
#Social{position: absolute;top: 0;right: 2vw;width: 12.5%;height: 30%;margin: 5vh 0;text-align: right}
#Social img{display: inline-block;width: 20%;height: 100%;margin: 0 7px;vertical-align: middle;filter: sepia(100%);cursor: pointer}
#Sec-01{background-image:url("../img/Sec-01.jpg");background-position:top right}
#Sec-02{background-image:url("../img/Sec-02.jpg");background-position:center left}
#Sec-03{background-image:url("../img/Sec-03.jpg");background-position:center left}
#Sec-04{background-image:url("../img/Sec-04.jpg");background-position:center left}
header{position:absolute;top:0;height:15vh;right:0;left:0;border-bottom:2px solid #38432f;background:linear-gradient(to bottom,#1f1f1f, #3f4c34 65%);box-shadow:0 0 25px -2.5px #042900;z-index:10}
header center{width: 100%;height: 100%}
header .Logo{height: 90%;margin: 1vh 0}
footer{position:absolute;bottom:0;right:0;left:0;height:5vh;border-top:2px solid #38432f;background:linear-gradient(to top,#1f1f1f, #3f4c34 65%);box-shadow:0 0 25px -2.5px #042900;z-index:10}
footer p{display:inline-block;margin:0;vertical-align:middle;font-size:1rem;font-weight:500;line-height:2;color:#c4b03b}
footer a{display:inline-block;margin-left:10px;color:#ebebeb;font-family:'Westmeath',sans-serif;font-size:1.25rem;font-weight:600;text-decoration:none;letter-spacing:0.1rem;vertical-align:middle;cursor:pointer}
body content{position: absolute;top: 15vh;bottom: 5vh;left: 0;right: 0;width: 100%;height: 100%;padding: 0;margin:0;overflow: hidden}
body .ActiveSec{display:inline-block !important}
body .DisableSec{display:none !important}
body .MainSection{width: 100%;height: 80%;background-repeat: no-repeat;background-size: cover}
/*=================== Section 1 ===================*/
#Sec-01 .Inner-Content{width: 35%;height: 100%;padding: 0 2vw;margin-left: 5vw;background-color:#ffffffbf;box-shadow:0 0 50px 5px}
#Sec-01 .Inner-Content center{display: block;width: 100%;height: 84%;padding-top: 15%}
#Sec-01 .Inner-Content img{width:40%;padding: 25px 40px;border-radius: 10px;box-shadow: 0 0 5px 1px #8080808c}
#Sec-01 .Inner-Content p{width: 80%;padding: 0 4vw;margin: 10% 0;font-size: 2rem;text-align: justify;color:#042900;text-shadow:0 3px 4px #7b7b7b;}
#Sec-01 .Cert-Box {display: block;width: 100%}
#Sec-01 .Cert-Box img{display: inline-block;width: 10%;padding: 20px;vertical-align: middle;box-shadow: none}
/*=================== Section 2 ===================*/
#Sec-02 .Inner-Content{display: inline-block;vertical-align: middle;width: 100%;height: 100%}
#Sec-02 .Inner-Content center{width: 100%;height: 100%}
#Sec-02 .Inner-Content .Info-Box {display: inline-block;width: 20%;height: 70%;margin: 7.5vh 2vw;padding: 4vh 1vw;border: 8px solid #7272721f;border-radius: 10px;background-color: #ffffffdb;box-shadow: 0 0 50px -20px black;vertical-align: middle}
#Sec-02 .Inner-Content .Info-Box img {display:block;width: 27.5%}
#Sec-02 .Inner-Content .Info-Box h2 {display:block;padding: 10px 0;margin: 2vh 0 5vh;border-top: 2px solid #fad600;border-bottom: 2px solid #fad600;color: #335518;font-size: 2rem;text-shadow: 0 2px 3px #7b7b7b}
#Sec-02 .Inner-Content .Info-Box p {display:block;width: 80%;font-size: 1.05rem;line-height: 1.5;text-align: justify}
/*=================== Section 3 ===================*/
#Prod-01{height:100%;background-image:url("../img/P-01.jpg");background-size:cover;}
#Prod-02{background-image:url("../img/P-02.jpg");background-size:cover;}
#Prod-03{background-image:url("../img/P-03.jpg");background-size:cover;}
#Prod-04{background-image:url("../img/P-04.jpg");background-size:cover;}
#Sec-03 .Inner-Content{display: inline-block;vertical-align: middle;width: 100%;height: 100%}
#Sec-03 .Inner-Content center{display: block;width: 92%;height: 75%;padding: 10vh 4vw}
#Sec-03 .Inner-Content center .Left-Content{display: inline-block;width: 25%;height: 100%;vertical-align: top}
#Sec-03 .Inner-Content center .Right-Content{display: inline-block;width: 65%;height: 100%;vertical-align: top}
#Sec-03 .Inner-Content center .Left-Content center{width: 100%;height: 100%;padding: 0}
#Sec-03 .Inner-Content center .Right-Content center{width: 100%;height: 100%;padding: 0}
#Sec-03 .Inner-Content .ProdBox{border:4px solid transparent;border-bottom:4px solid #6464648c;border-radius:5px;background-color:#dcdcdce3;background-position:center center;box-shadow:0 0 50px 5px;cursor:pointer;transition:1s}
#Sec-03 .Inner-Content .Right-Content .ProdBox{display: inline-block;width: 38%;height: 42.5%;margin: 2vh 2vw}
#Sec-03 .Inner-Content .ProdBox h1{width:100%;padding:20px 0;margin: 21.5vh 0 0;border-bottom:4px solid #c4af3b;background-color:#fffc;box-shadow:0 0 20px 5px #535353;color:#042900;font-family:"Sands",sans-serif;font-size:2em;text-align:center;word-spacing:5px;transform:translateY(-100%);transition:1.5s;}
#Sec-03 .Inner-Content #Prod-01 h1{margin-top:55vh}
#Popup{display:none;position: absolute;top: 0;bottom: 3vh;left: 0;right: 0;height: 80%;background-color: #0b0b0bc9}
#Popup-Inner{position:absolute;top: 2vh;width: 78%;height: 87%;padding: 2vh 3vw;margin: 0 8vw;border: 15px solid #e7cf4799;border-radius: 25px;box-shadow: 0 0 50px -6px ;background-color: white;z-index: 1000}
#Popup-Title {display: inline-block;width: 98%;padding: 0 0 20px;margin-top:1vh;border-bottom: 5px solid #e7cf47;font-size: 2rem;text-align: center;vertical-align: top}
#Popup-Close {display: inline-block;padding: 0 0 20px;color: black;font-size: 2rem;font-weight: 600;vertical-align: middle;cursor: pointer}
#Popup-Content {display: block;width: 100%;height: 77.5%}
#Popup-Content .Left-Side {display: inline-block;width: 25%;height: 100%;vertical-align: top}
#Popup-Content .Right-Side{display: none;width: 74%;height: 100%;border-left: 5px solid #e7cf47;vertical-align: top;overflow-x: hidden;overflow-y: auto}
#Popup-Content .Left-Side ul{display: block;width: 95%;padding: 0;margin: 0}
#Popup-Content .Left-Side ul li{padding: 3vh 3vw;margin: 2vh 0;font-size: 1.5rem;text-align: right;cursor: pointer;list-style: none}
#Popup-Content center .Menu-Prod{display: inline-block;width: 25%;padding: 2vh 0 0;margin: 0 1vw 2vh;border: 2px solid #d8d8d8;border-radius: 15px;box-shadow: 0 15px 50px -30px #727272;font-size: 1.25rem;cursor: pointer}
#Popup-Content .Right-Side center{margin: 2vh 0}
#Popup-Content .Right-Side center img{width:75%;padding: 25px 0}
#Popup-Content .Right-Side center p{padding: 20px 0;margin: 25px 0 0;border-top: 2px solid #e7cf47}
/*=================== Section 4 ===================*/
#Sec-04 center{display: inline-block;width: 100%;height: 100%}
#Sec-04 .Inner-Content{display: inline-block;vertical-align: middle;width: 100%;height: 100%}
#Sec-04 .Inner-Content center{display: block;width: 92%;height: 75%;padding: 10vh 4vw}
#Sec-04 center .Left-Content{display: inline-block;width: 50%;height: 100%;vertical-align: top}
#Sec-04 center .Left-Content *{color:white;font-size:1.25rem;}
#Sec-04 center .Right-Content{display: inline-block;width: 35%;height: 100%;margin: 0 5vw;background-color: #ffffffbf;vertical-align: top}
#Sec-04 center .Left-Content h1{color: #fad600;font-size: 3.5rem;text-align: left}
#Sec-04 center .Left-Content h3{margin: 0 0 10vh;text-align: left}
#Sec-04 center .Left-Content table td{line-height: 1.75}
#Sec-04 center .Left-Content table .Contact-Icon{width: 4vw;text-align:center;vertical-align:middle}
#Sec-04 center .Left-Content table .Contact-Icon img{width: 50px;text-align:right;vertical-align:middle}
#Sec-04 center .Left-Content table td:nth-child(3){width:2vw;text-align: center}
#Sec-04 center .Left-Content table .Contact-Label{font-size: 1.5rem;font-weight: 600}
#Contact-Form {display:inline-block;width: 100%;height: 92.5%;padding: 5vh 0 1vh}
#Contact-Form table{width: 80%;height: 100%}
#Contact-Form table *{font-size:1.5rem;vertical-align:middle}
#Contact-Form table h1{margin: 0;font-size: 2.5rem}
#Contact-Form table input{width: 90%;padding: 10px 20px;border:0;border-bottom:3px solid #658a5c;border-radius:10px;background-color:#ffffffc4 !important;font-family:'Sands', serif;font-weight:400}
#Contact-Form table textarea{width: 90%;padding: 5px 20px;border:0;border-bottom:3px solid #658a5c;border-radius:10px;background-color:#ffffffc4 !important}
#Sec-04 #Contact-Form table tfoot{text-align: right}
#Sec-04 #Contact-Form table tfoot input{width: 30%;padding:5px 35px;margin:1vh -1.5vw 0 0;border:2px solid #537b49;border-radius:30px;background-color:#658a5c !important;box-shadow:0 0 10px -2px #787777;color:#e3e3e3;font-weight:600;text-shadow:none;cursor:pointer}
#Sec-04 #Contact-Form table tfoot input:hover{transform: scale(1.15);transition-duration:1s;}

/*=================== Media Screen Max 1024px ===================*/
@media only screen and (max-width: 64em){
    /*=================== General ===================*/
    #Social {width: 12.5%;height: 32.5%}
    #Social img {width: 20%}
    #Nav-Points {height: auto;padding: 10px 2.5px}
    #Nav-Points .NavPoints{width: 15px;height: 15px}
    footer p {font-size: 1rem}
    footer a {font-size: 1.25rem}
    /*=================== Section 1 ===================*/
    #Sec-01 .Inner-Content img {width: 40%}
    #Sec-01 .Inner-Content p {margin: 15% 0;font-size: 1.5rem}
    #Sec-01 .Cert-Box img {width: 12.5%;padding: 10px}
    /*=================== Section 2 ===================*/
    #Sec-02 .Inner-Content .Info-Box {width: 25%}
    #Sec-02 .Inner-Content .Info-Box h2 {font-size: 1.5rem}
    #Sec-02 .Inner-Content .Info-Box p {font-size: 1rem}
    /*=================== Section 3 ===================*/
    #Sec-03 .Inner-Content center{width: 96%;padding: 10vh 2vw}
    #Sec-03 .Inner-Content center .Right-Content{width: 72.5%}
    #Sec-03 .Inner-Content .ProdBox h1 {font-size: 1.5em}
    #Popup-Title {width: 97%;padding: 0 0 5px}
    #Popup-Close {padding: 0 0 5px}
    #Popup-Content .Right-Side {width: 70%}
    #Popup-Content .Left-Side ul li {padding: 2vh 2vw;margin: 1vh 0;font-size: 1.5rem}
    #Popup-Content center .Menu-Prod {width: 40%;padding: 0;font-size: 1.25rem}
    #Popup-Content .Right-Side center img {width: 100%}
    #Popup-Content .Right-Side center p {margin: 5px 0 0}
    /*=================== Section 4 ===================*/
    #Sec-04 center .Left-Content * {font-size: 1.5rem}
    #Sec-04 center .Left-Content h1 {font-size: 2.5rem}
    #Sec-04 center .Left-Content h3 {margin: 0 0 5vh}
    #Sec-04 center .Left-Content table .Contact-Icon {width: 6vw}
    #Sec-04 center .Left-Content table .Contact-Icon img {width: 40px}
    #Sec-04 center .Left-Content table .Contact-Label {font-size: 1.5rem}
    #Sec-04 center .Right-Content {width: 41%;margin: 0 1vw}
    #Sec-04 center .Left-Content {width: 48%}
    #Contact-Form table h1 {font-size: 2.5rem}
    #Contact-Form table * {font-size: 1.5rem}
    #Contact-Form table input {width: 97%;padding: 5px 10px}
    #Sec-04 #Contact-Form table tfoot input {width: 40%;margin: 0vh -1.5vw 0 0}
}
/*=================== Media Screen 768px ===================*/
@media only screen and (max-width: 48em) {
    /*=================== General ===================*/
    #Social {top: 1.5vh;height: 20%}
    /*=================== Section 1 ===================*/
    #Sec-01 .Inner-Content {width: 55%}
    /*=================== Section 2 ===================*/
    #Sec-02 .Inner-Content center {overflow-x: hidden;overflow-y: auto}
    #Sec-02 .Inner-Content .Info-Box {width: 65%;height: auto;padding: 2vh 0.5vw;margin: 2.5vh 2vw}
    #Sec-02 .Inner-Content .Info-Box img {width: 20%}
    #Sec-02 .Inner-Content .Info-Box h2 {margin: 2vh 0;font-size: 1.5rem}
    #Sec-02 .Inner-Content .Info-Box p {font-size: 1rem}
    /*=================== Section 3 ===================*/
    #Sec-03 .Inner-Content center .Left-Content {width: 70%;height: 27.5%}
    #Sec-03 .Inner-Content #Prod-01 h1 {margin-top: 15vh}
    #Sec-03 .Inner-Content center .Right-Content {width: 70% !important;height: 80%;margin-top: 1vh}
    #Sec-03 .Inner-Content .Right-Content .ProdBox {display: block;width: 98.5%;height: 32.5%;margin: 2vh 0}
    #Sec-03 .Inner-Content .ProdBox h1 {margin: 14.5vh 0 0}
    #Sec-03 .Inner-Content center {padding: 4vh 2vw}
    #Popup-Title {width: 95%;margin: 0}
    #Popup-Close {margin-bottom: 0}
    #Popup-Content .Left-Side {width: 100%;height: auto}
    #Popup-Content .Left-Side ul {margin: 0 0 3vh;border-bottom: 5px solid #e7cf47}
    #Popup-Content .Left-Side ul li{display: inline-block;width: 18%;height: 44px;padding: 1vh 2vw;margin: 0;font-size: 1rem;vertical-align: middle;text-align: center}
    #Popup-Content .Right-Side {width: 100%;border-left: 0px solid #e7cf47}
    #Popup-Content center .Menu-Prod {width: 30%;font-size: 1rem}
    /*=================== Section 4 ===================*/
    #Sec-04 center {overflow-x: hidden;overflow-y:auto}
    #Sec-04 center .Left-Content {width: 85%;height: auto;margin-bottom: 3vh}
    #Sec-04 center .Right-Content {width: 79%}
    #Sec-04 center .Left-Content * {font-size: 1.25rem}
    #Sec-04 center .Left-Content h1 {font-size: 2rem}
    #Sec-04 center .Left-Content table .Contact-Label {font-size: 1.25rem}
    #Sec-04 #Contact-Form {padding: 1vh 0}
}
/*=================== Media Screen 375px ===================*/
@media only screen and (max-width: 40em) {
    /*=================== General ===================*/
    #Nav-Points {height: auto;padding: 5px 0}
    #Nav-Points .ActiveDot {border: 3px solid #cfb524}
    #Nav-Points .NavPoints {width: 10px;height: 10px;border: 3px solid #c4a70a78}
    header .Logo {display: block;height: 65%}
    #NavBar {position: relative;top: 0;display: block}
    header .NavLinks {font-size: 0.8rem}
    footer p {font-size: 0.8rem}
    footer a {font-size: 1rem}
    /*=================== Section 1 ===================*/
    #Sec-01 .Inner-Content {width: 86%}
    #Sec-01 .Inner-Content p {margin: 22.5% 0;font-size:1.25rem;}
    #Sec-01 .Cert-Box img {width: 12.5%;padding: 5px}
    /*=================== Section 2 ===================*/
    #Sec-02 .Inner-Content .Info-Box {margin: 1.5vh 1vw 1vh}
    #Sec-02 .Inner-Content .Info-Box h2 {font-size: 1.25rem}
    #Sec-02 .Inner-Content .Info-Box p {font-size: 0.8rem}
    /*=================== Section 3 ===================*/
    #Popup-Inner {margin: 0 4vw;border: 10px solid #e7cf4799}
    #Popup-Title {width: 90%;border-bottom: 2.5px solid #e7cf47;font-size: 1.5rem}
    #Popup-Close {font-size: 1.25rem}
    #Sec-03 .Inner-Content center{padding: 2vh 2vw}
    #Sec-03 .Inner-Content .ProdBox h1 {margin:13vh 0 0;padding: 10px 0;font-size: 1em}
    #Popup-Content .Left-Side ul {border-bottom: 2.5px solid #e7cf47}
    #Popup-Content .Left-Side ul li {height: 60px;font-size:0.8rem;}
    #Popup-Content .Right-Side {height: 80%}
    #Popup-Content .Right-Side center {height: 100%}
    #Popup-Content center .Menu-Prod {display: block;width: 67%}
    #Popup-Content .Right-Side center img {width: 60%;padding: 10px 0}
    #Popup-Content .Right-Side center p {padding: 10px 0}
    /*=================== Section 4 ===================*/
    #Contact-Form table h1 {font-size: 1rem}
    #Contact-Form table * {font-size: 0.8rem}
    #Sec-04 center .Left-Content * {font-size: 1rem}
    #Sec-04 center .Left-Content h3 {font-size: 0.8rem}
    #Sec-04 center .Left-Content table td {line-height: 1.5}
    #Sec-04 center .Left-Content table .Contact-Label {font-size: 0.8rem}
    #Sec-04 center .Left-Content table .Contact-Icon img {width: 30px}
    #Sec-04 center .Right-Content {width: 85%}
    #Sec-04 #Contact-Form table tfoot input {width: 50%}
}