@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes bg {
    0% {
        background-position: right top;
    }
    50% {
        background-position: left top;
    }
    100% {
        background-position: right top;
    }    
}


@keyframes hl {
    0% {
        width: calc(100% - 4rem);
    }
    50% {
        width: calc(100% - 1rem);
    }
    100% {
        width: calc(100% - 4rem);
    }    
}

#cpBox { font-size:10px; font-family:Arial, Helvetica, sans-serif; margin:auto 0px 0px 0px; width:100%; bottom:0px; position: fixed; text-align:center; color:#FFFFFF; background-color:#000000; padding:5px; z-index:999999;}
#cpBox a { color:#FFFFFF;}
.cpBoxClose { cursor:pointer; color:#FFFFFF; text-decoration:underline;}
.cpBoxClose:hover { color:#CCCCCC;}

#symsysMsgOverlay {position:fixed; background-color:rgba(0, 0, 0, 0.7); width:100%; height:100%; top:0; left:0; z-index:9;}
#symsysMsg { position:fixed; background:#fff; color:#222; border:1px solid #ccc; width:100%; max-width:350px; display:table; text-align:center; padding:15px; border-radius:1px 1px 1px 1px; -moz-border-radius:1px 1px 1px 1px; -webkit-border-radius:1px 1px 1px 1px;  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);   position: fixed;  top: 50%; left: 50%; transform: translate(-50%, -50%); }
#symsysMsg button { margin-top:1rem; cursor:pointer; color:#fff; background:#000; font-weight:200; border:0px;  padding:10px 12px; font-size:1.1em;  border-radius:1px 1px 1px 1px; -moz-border-radius:1px 1px 1px 1px; -webkit-border-radius:1px 1px 1px 1px;  }
#symsysMsg .false {background:#999; margin-left:15px;}
#symsysMsg button:hover { opacity: 0.8;}

header button {display: none;}

* { font-size: 16px; font-family: 'Playfair Display', serif; margin: 0; padding: 0;}

a:hover { opacity: 0.5; transition: 1s;}

header {  padding: 0 1rem;  display: grid; grid-template-rows: minmax(90px, 15vh); grid-template-columns: minmax(250px, 15%) 1fr; align-items: center;}
header a img { width: 100%; height: auto; }
header nav ul {  display: flex; justify-content: flex-end;}
header nav ul li { margin-left: 2rem; display: inline;}
header nav ul li a { display: table; font-size: 1.2rem; color: #1F3358; text-decoration: none;}
header nav ul li a:hover { text-decoration: underline; }

.s19 {  animation-name: bg; animation-duration: 25000ms; overflow: hidden; animation-iteration-count: infinite; animation-timing-function: linear; position: relative; padding:  1rem; display: flex; justify-content: end; background-image: url(/images/s1.jpg);   background-repeat: no-repeat; background-position: right top; background-size: 110% auto; height: 85vh; min-height: 150px; }
.s19 nav ul, .s35 nav ul { display: flex;}
.s19 nav ul li, .s35 nav ul li {display: block;}
.s19 nav ul li a, .s35 nav ul li a { margin-left: 0.5rem; display: table; padding: 0.5rem 1rem; font-size: 0.9rem; text-decoration: none; color: #FFFFFF; background-color: #1F3358; }
.s19 nav ul li a:hover, .s35 nav ul li a:hover { background-color: #2DB7B7; }
.s19 .headline { animation-name: hl; animation-duration: 10000ms; animation-iteration-count: infinite; animation-timing-function: linear; right: 0; bottom: 0; position: absolute; color:#1F3358;  width: calc(100% - 4rem); height: 100%; display: flex; align-items: center; }
.s19 .headline h2 { font-size: 1.5rem; font-weight: 600;}
.s19 .headline h2 strong {  font-size: 2.6rem; display: block;  width:100% ;}
.s35 { margin-top:1rem; position: absolute; right:1rem;}
.s35 img, .s19 img { width: 1rem; height:auto;}

footer { background-color: #1F3358;  color: #fff; text-align: center; padding: 1rem; font-size: 1rem;}
footer a { color: #fff; }

.s34 { text-align: center; height: auto; padding: 1rem;  min-height: 100vh; background-position: bottom; background-attachment: fixed; background-image: url(/images/s3.jpg); color: #fff;  background-size: cover; display: flex; flex-direction:column; align-items: center; justify-content: center; }
.s34 h3 { font-size:2.5rem; margin: 2rem 0 1rem 0; }
.s34 p { font-size:1.4rem; }
.s34 img { width: 8rem; height: auto;}

.home h1 {display: none;}

h1 { font-size: 2rem; text-transform: capitalize; text-align: center; height: auto text-align: center; padding: 1rem;  min-height: 20vh; background-position: center; background-attachment: fixed; background-image: url(/images/s3.jpg); color: #fff;  background-size: cover; display: flex; flex-direction:column; align-items: center; justify-content: center;  }

.au { text-align: center;  }

.wrap { height: auto; min-height: 50vh; width: 80%; padding: 8rem 1rem; margin: auto; }
.wrap p { font-size: 1.3rem; margin-bottom: 1.5rem; color: #333; }

.wrap form > div { display: grid; grid-auto-flow: column; }
.wrap form label { text-transform:capitalize; display: block; font-size: 1.2rem; padding: 0.5rem 0rem; color: #1F3358; margin-bottom: 0.5rem;  }
input, select { border: 1px solid #333; padding: 0.5rem 1rem; font-size: 1.2rem; background: #fff;}
input[type=submit] { background: #1F3358; color: #fff; border: 0; cursor: pointer;}
input[type=submit]:hover { background: #333;}
input[type=radio] { margin: 0 1rem;}
.wrap form .f2 input, .wrap form #sig, #dp, #la, #e, #ey, #eg{ width: 85%; }
.wrap form .f4 input, .wrap form .f4 select,  .wrap form .f2 select  { width: 80%; }
.cell1 .f4, .cell1 .f2 {  display: grid; grid-auto-flow: column;}
.cell1 .f2 select  { width: 30% !important; min-width: 50px; }
.auth {  padding-bottom: 0;}

.error { color: red;}

.ins { text-align: center;}
.ins ul { margin: 3rem 0; display: grid; grid-auto-flow: column; gap: 1rem;}
.ins ul li { display: block; font-size: 1.5rem; text-transform: capitalize; color: #1F3358; border: 1px solid #1F3358; padding: 2rem 2rem;}

.contact { text-align: center;}
.contact strong { font-size: 1.5rem;}
.contact img, .contact iframe { width: 100%; height: auto;}
.contact iframe { min-height: 350px; }
.contact a { text-decoration: none; color: #333; font-size: 1.5rem; }

.panels { margin-top: -5vh; padding: 0 1rem; gap: 1rem; display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); grid-template-rows: minmax(250px, 50vh);}
.panels li { color: #fff;  text-align: center; display: flex; flex-direction:column; align-items: center; justify-content: center; background-color: #2DB7B7; border-bottom: 0.5rem solid #38E9E9; padding: 2rem;}
.panels li:nth-child(2) { background-color: #1F3358; border-bottom: none; border-top: 0.5rem solid #38E9E9;}
.panels li a { margin-top: 2rem;  border: 1px solid #fff; color: #fff; text-decoration: none; padding: 0.8rem 2rem 0.8rem 1.5rem;;  background-image: url(/images/right.svg); background-repeat: no-repeat; background-size: auto 0.5rem; background-position: right 1rem center;}
.panels li a:hover { padding: 0.8rem 2rem; }
.panels li img { width: auto; height: 3rem; margin-bottom: 2rem;}
.panels li p { font-size: 1.3rem;}

.middle { padding: 2rem 1rem; gap: 1rem; height: auto;  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.middle > div { color: #686868;  display: flex; justify-content: center; flex-direction:column; align-items:flex-end;}
.middle > div:nth-child(2) { align-items:flex-start; }
.middle h2 { font-weight: 600; text-align: right; color: #1F3358; font-size: 2.5rem; text-transform: capitalize; margin-bottom: 2.5rem;}
.middle h2 strong { display: block; font-size: 3.5rem; font-weight: 600;}
.middle p {  font-size: 1.5rem; }
.middle a {font-size: 1.2rem;  text-decoration: none; color: #fff; background-image: url(/images/right.svg); background-repeat: no-repeat; background-size: auto 0.6rem; background-position: right 1rem center; background-color: #2DB7B7; text-transform: capitalize;  padding: 1rem 2.5rem 1rem 2rem; margin-top: 2.5rem;}
.middle a:hover { background: #333;}
.middle .spin-wrap {  width:80vh; height:80vh; position: relative; overflow: hidden;}
.middle .spin {     animation-name: spin; animation-duration: 15000ms; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; width:100%; height:100%; background-image: url(/images/e.svg); background-size: 50% 50%; background-position: right top; background-repeat: no-repeat; }
.middle .image { position: absolute; clip-path: circle(50% at 50% 50%); margin-top: 5%; margin-left: 5%;  width:90%; height:90%; background-image: url(/images/s2.jpg); background-size: auto 100%; background-position: center center; background-repeat: no-repeat; }


@media only screen and (max-width: 1366px) {
    * { font-size: 15px;  }
}

@media only screen and (max-width: 1280px) {
    * { font-size: 14px;  }
}

@media only screen and (max-width: 1152px) {
    * { font-size: 13px;  }
}

@media only screen and (max-width: 1024px) {
    * { font-size: 12px;  }
    .middle { padding:2rem 1rem; gap: 1rem; height: auto;  min-height: 100vh; display: grid; grid-template-columns: 1fr; }
    .middle > div, .middle > div:nth-child(2) {  align-items:center;}
    .middle .spin-wrap {  width:60vh; height:60vh; position: relative; overflow: hidden;}
    .middle h2 strong { display: block; font-size: 2.5rem; font-weight: 600; text-align: center;}
    .panels { margin-top: 1rem; padding: 0rem 1rem; gap: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(250px, 50vh);}
    .s34 h3 { font-size:1.5rem; margin: 2rem 0 1rem 0; }
    .s34 p { font-size:1.2rem; }
    .s19 {  animation-name:none; background-size: cover; height: 70vh; }
    .s34 {  min-height: 80vh;}

    header nav ul {  padding: 2rem; right: 0; top:15vh; margin: 0; position: absolute; z-index: 9; flex-direction: column;  background-color:#1F3358; display: none; justify-content: flex-end;}
    header nav ul li { margin: 1rem 0; display: block;}
    header nav ul li a { display: table; font-size: 1.2rem; color: #fff; text-decoration: none;}
    header nav ul li a:hover { text-decoration: underline; }

    header button { cursor: pointer;  border: 0; background: url('/images/menu.svg'); background-repeat: no-repeat; background-position: left center; background-size: 3rem 3rem; width: 3rem; text-indent: -300%; height:15vh; min-height: 90px; display: block; overflow: hidden; margin:0; top: 0; right: 1rem;  position: absolute; }
    header button:hover { opacity: 0.5;}

    .wrap form > div { display: grid; grid-auto-flow: row; }
    .wrap form label { text-transform:capitalize; display: block; font-size: 1.2rem; padding: 0.5rem 0rem; color: #1F3358; margin-bottom: 0.5rem;  }
    input, select { border: 1px solid #333; padding: 0.5rem 1rem; font-size: 1.2rem; background: #fff;}
    .wrap form .f2 input, .wrap form #sig, #dp, #la, #e, #ey, #eg{ width: 85%; }
    .wrap form .f4 input, .wrap form .f4 select,  .wrap form .f2 select  { width: 80%; }
    .cell1 .f4, .cell1 .f2 {  display: grid; grid-auto-flow: row;}
    .cell1 .f2 select  { width: 30% !important; min-width: 50px; }
    input[type=radio] {  display: block; margin:1rem 0;  }

}

@media only screen and (max-width: 800px) {

    .s19 .headline { animation-name:none;}
    .s19 {  background-position: center top; }
    .s19 .headline { display: none;}
    .middle .spin-wrap {  width:40vh; height:40vh; position: relative; overflow: hidden;}
}