@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-ExtraBoldItalic.eot');
    src: url('../fonts/DiariaPro-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/DiariaPro-ExtraBoldItalic.woff') format('woff'),
        url('../fonts/DiariaPro-ExtraBoldItalic.ttf') format('truetype'),
        url('../fonts/DiariaPro-ExtraBoldItalic.svg#DiariaPro-ExtraBoldItalic') format('svg');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-Bold.eot');
    src: url('../fonts/DiariaPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-Bold.woff2') format('woff2'),
        url('../fonts/DiariaPro-Bold.woff') format('woff'),
        url('../fonts/DiariaPro-Bold.ttf') format('truetype'),
        url('../fonts/DiariaPro-Bold.svg#DiariaPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-BoldItalic.eot');
    src: url('../fonts/DiariaPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-BoldItalic.woff2') format('woff2'),
        url('../fonts/DiariaPro-BoldItalic.woff') format('woff'),
        url('../fonts/DiariaPro-BoldItalic.ttf') format('truetype'),
        url('../fonts/DiariaPro-BoldItalic.svg#DiariaPro-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-ExtraBold.eot');
    src: url('../fonts/DiariaPro-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-ExtraBold.woff2') format('woff2'),
        url('../fonts/DiariaPro-ExtraBold.woff') format('woff'),
        url('../fonts/DiariaPro-ExtraBold.ttf') format('truetype'),
        url('../fonts/DiariaPro-ExtraBold.svg#DiariaPro-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-Light.eot');
    src: url('../fonts/DiariaPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-Light.woff2') format('woff2'),
        url('../fonts/DiariaPro-Light.woff') format('woff'),
        url('../fonts/DiariaPro-Light.ttf') format('truetype'),
        url('../fonts/DiariaPro-Light.svg#DiariaPro-Light') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-Italic.eot');
    src: url('../fonts/DiariaPro-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-Italic.woff2') format('woff2'),
        url('../fonts/DiariaPro-Italic.woff') format('woff'),
        url('../fonts/DiariaPro-Italic.ttf') format('truetype'),
        url('../fonts/DiariaPro-Italic.svg#DiariaPro-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-LightItalic.eot');
    src: url('../fonts/DiariaPro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-LightItalic.woff2') format('woff2'),
        url('../fonts/DiariaPro-LightItalic.woff') format('woff'),
        url('../fonts/DiariaPro-LightItalic.ttf') format('truetype'),
        url('../fonts/DiariaPro-LightItalic.svg#DiariaPro-LightItalic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-MediumItalic.eot');
    src: url('../fonts/DiariaPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-MediumItalic.woff2') format('woff2'),
        url('../fonts/DiariaPro-MediumItalic.woff') format('woff'),
        url('../fonts/DiariaPro-MediumItalic.ttf') format('truetype'),
        url('../fonts/DiariaPro-MediumItalic.svg#DiariaPro-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-Medium.eot');
    src: url('../fonts/DiariaPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-Medium.woff2') format('woff2'),
        url('../fonts/DiariaPro-Medium.woff') format('woff'),
        url('../fonts/DiariaPro-Medium.ttf') format('truetype'),
        url('../fonts/DiariaPro-Medium.svg#DiariaPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-Regular.eot');
    src: url('../fonts/DiariaPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-Regular.woff2') format('woff2'),
        url('../fonts/DiariaPro-Regular.woff') format('woff'),
        url('../fonts/DiariaPro-Regular.ttf') format('truetype'),
        url('../fonts/DiariaPro-Regular.svg#DiariaPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-SemiBoldItalic.eot');
    src: url('../fonts/DiariaPro-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/DiariaPro-SemiBoldItalic.woff') format('woff'),
        url('../fonts/DiariaPro-SemiBoldItalic.ttf') format('truetype'),
        url('../fonts/DiariaPro-SemiBoldItalic.svg#DiariaPro-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DiariaPro';
    src: url('../fonts/DiariaPro-SemiBold.eot');
    src: url('../fonts/DiariaPro-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DiariaPro-SemiBold.woff2') format('woff2'),
        url('../fonts/DiariaPro-SemiBold.woff') format('woff'),
        url('../fonts/DiariaPro-SemiBold.ttf') format('truetype'),
        url('../fonts/DiariaPro-SemiBold.svg#DiariaPro-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.eot');
    src: url('../fonts/Quicksand-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Bold.woff2') format('woff2'),
        url('../fonts/Quicksand-Bold.woff') format('woff'),
        url('../fonts/Quicksand-Bold.ttf') format('truetype'),
        url('../fonts/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Light.eot');
    src: url('../fonts/Quicksand-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Light.woff2') format('woff2'),
        url('../fonts/Quicksand-Light.woff') format('woff'),
        url('../fonts/Quicksand-Light.ttf') format('truetype'),
        url('../fonts/Quicksand-Light.svg#Quicksand-Light') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Medium.eot');
    src: url('../fonts/Quicksand-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Medium.woff2') format('woff2'),
        url('../fonts/Quicksand-Medium.woff') format('woff'),
        url('../fonts/Quicksand-Medium.ttf') format('truetype'),
        url('../fonts/Quicksand-Medium.svg#Quicksand-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-SemiBold.eot');
    src: url('../fonts/Quicksand-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-SemiBold.woff2') format('woff2'),
        url('../fonts/Quicksand-SemiBold.woff') format('woff'),
        url('../fonts/Quicksand-SemiBold.ttf') format('truetype'),
        url('../fonts/Quicksand-SemiBold.svg#Quicksand-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Regular.eot');
    src: url('../fonts/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Regular.woff2') format('woff2'),
        url('../fonts/Quicksand-Regular.woff') format('woff'),
        url('../fonts/Quicksand-Regular.ttf') format('truetype'),
        url('../fonts/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
font-family: 'Quicksand' !important;
}

p{
    font-family: 'DiariaPro' !important;
}

*{
margin:0px;
padding:0px;
}

ul li{
list-style-type:none;
}

.container{
max-width:1920px;
margin:0px auto;
/* padding-left:15px;
padding-right:15px; */
}


.logo{
float: none;
text-align: center;
padding-top: 100px;
padding-bottom: 130px;
}

.sidepanel {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0px;
background-color: #fff;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
border-radius: 15px;
}


.sidepanelright {
height: auto;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 74px;
background-color: #fff;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
border-radius: 15px;
}

/* The sidepanel links */
.sidepanel a {
padding: 5px 0px 5px 5px;
text-decoration: none;
font-size: 16px;
color: #818181;
display: flex;
transition: 0.3s;
}

.sidepanelright a {
padding: 5px 0px 5px 5px;
text-decoration: none;
font-size: 16px;
color: #818181;
display: flex;
transition: 0.3s;
}


/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}
.sidepanelright a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 100px;
font-size: 65px;
margin-left: 0px;
left: 0;
color: #000 !important;
padding: 0px 10px;
line-height: 70px;
}

.sidepanelright .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 65px;
margin-left: 0px;
left: 0;
color: #000 !important;
padding: 0px 10px;
line-height: 70px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 52px;
cursor: pointer;
background-color: transparent;
color: #000;
padding: 0;
border: none;
line-height: 25px;
margin-bottom: 45px;
display: block;
}

.fullbanner{
background: url(/staff-box/images/Header-Image.png);
background-size: auto;
background-size: cover;
padding: 30px;
}

.leftside{
float: left;
}

.rightside{
float: right;
}

.rightside ul li{
display: inline-block;
margin-left: 15px;
}

.rightside ul li a{
color: #1D1D1B;
text-decoration: none;
font-size: 12px;
font-weight: 600;
}

.rightside .fa{
margin-right: 10px;
}

.logo h1{
font-size: 45px;
font-weight: 400;
margin: 20px 0px;
color: #1D1D1B;
}

.logo b{
font-weight: 500;
}

.logo p{
color: #46BBC7;
font-size: 21px;
}

#mySidepanel img.right{
float: right;
margin-top: -47px;
width: 50px;
 transition: transform .7s ease-in-out;
}

#mySidepanel img.right:hover{
transform: rotate(360deg);
}

#mySidepanel a img{
width: 60px;
display: inline-block;
vertical-align: middle;
padding-right: 15px;
}



#mySidepanelright img.right{
float: right;
margin-top: -47px;
width: 50px;
 transition: transform .7s ease-in-out;
}

#mySidepanelright img.right:hover{
transform: rotate(360deg);
}

#mySidepanelright a img{
width: 16%;
display: inline-block;
vertical-align: middle;
padding-right: 15px;
padding-left: 55px;
margin-top: -40px;
}


#mySidepanelright .logo {
float: none;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}

.navmenus span{
font-size: 20px;
color: #000;
margin-top: 17px;
display: block;
width: 100%;
padding-left: 20px;
height: 28px;
margin-left: -26px;
position: relative;
z-index: -1;
font-weight: bold;
}

.navmenus a:hover span.menu1{
background: #EDAAC6;color: #fff;
}

.navmenus a:hover span.menu2{
background: #5E4292;color: #fff;
}

.navmenus a:hover span.menu3{
background: #46BBC7;color: #fff;
}

.navmenus a:hover span.menu4{
background: #F5A11C;color: #fff;
}

.navmenus{
padding-left: 30px;
padding-top: 30px;
padding-bottom: 80px;
}

.btmbtns{
text-align: center;
padding: 40px;
position: absolute;
    bottom: 5%;
    width: calc(100% - 80px);
    padding: 40px 40px;
}

.btmbtns a.btn1{
background: #000;
color: #fff;
padding: 7px 10px;
border-radius: 20px;
text-align: center;
display:block;
margin-bottom: 20px;
font-size: 13px;
}

.btmbtns a.btn2{
background: #46BBC7;
color: #fff;
padding: 7px 10px;
border-radius: 20px;
text-align: center;
display:block;
font-size: 13px;
}

.btmbtns a.btn1:hover{
background: #46BBC7;
}

.btmbtns a.btn2:hover{
background: #000;
}


.block1, .block2, .block3, .block4{
width: 14%;
text-align: center;
background: #fff;
border-radius: 15px;
box-shadow: 0px 0px 5px #ccc;
padding: 30px 40px;
float: left;
margin-left: 20px;
margin-right: 20px;
}


.four-blocks{
margin-top: -110px;
}


.block1 a.btnnew{
background: #EDAAC6;
padding: 7px;
text-decoration: none;
color: #fff;
border-radius: 11px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
display: block;
}


.block2 a.btnnew{
background: #5E4292;
padding: 7px;
text-decoration: none;
color: #fff;
border-radius: 11px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
display: block;
}


.block3 a.btnnew{
background: #46BBC7;
padding: 7px;
text-decoration: none;
color: #fff;
border-radius: 11px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
display: block;
}


.block4 a.btnnew{
background: #F5A11C;
padding: 7px;
text-decoration: none;
color: #fff;
border-radius: 11px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
display: block;
}


.four-blocks a{
text-decoration: none;
font-size: 11px;
color: #000;
font-weight: 400;
}

.four-blocks a img{
width: 7px;
margin-left: 5px;
}

.four-blocks .container{
max-width: 1100px;
}

.four-blocks h2{
font-weight: 500;
}

.blackbtn{
text-align:center;
}

.blackbtn{
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}

.blackbtn a{
text-decoration: none;
background: #1D1D1B;
padding: 10px 30px;
color: #fff;
border-radius: 10px;
font-weight: 400;
}

.rotabg{
background: #F0F0F0;
padding: 69px 50px;
background: url(/staff-box/images/gray-bg.png) no-repeat;
background-size: auto;
background-size: cover;
border-radius: 40px 40px 0px;
}

.rotabgright{
background: #F0F0F0;
padding: 69px 50px;
background: url(/staff-box/images/gray.png) no-repeat;
background-size: auto;
background-size: cover;
border-radius: 40px 40px 40px;
}

.leftalign{
width: 50%;
float: left;
padding: 40px;
padding-top: 0px;
}

.rightalign{
width: 40%;
float: right;
}


.rightalign img{
width: 60%;
/* width: 47%; */
border: 15px solid #fff;
border-radius: 50%;
margin: 20px;
top: -95px;
position: relative;
box-shadow: 0px 0px 10px #ccc;
float: right;
}

.leftalign h1{
font-weight: 500;
}

.leftalign p{
font-size: 14px;
margin-top: 20px;
margin-bottom: 40px;
}

#hr .rightalign img {
float: left;
}

#hr .leftalign {
float: right;
}


#Governanace .rightalign img {
float: left;
}

#Governanace .leftalign {
float: right;
}

.ourpartners{
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
}

.ourpartners h1{
font-weight: 500;
}

.ourpartners p{
width: 40%;
margin: 0px auto;
padding: 20px 0px;
}


.ourpartners img{width: 120px;
margin-left: 30px;
margin-right: 30px;
}


.footer p{
/* background: #1D1D1B;
padding: 80px;
margin-bottom: 30px; */
}

#Governanace, #Learn, #hr, #rota{padding-top:70px;}



#rota a{
background: #EDAAC6;
color: #fff;
text-decoration: none;
padding: 7px 35px;
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;}



#hr a{
background: #5E4292;
color: #fff;
text-decoration: none;
padding: 7px 35px;
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;}



#Learn a{
background: #46BBC7;
color: #fff;
text-decoration: none;
padding: 7px 35px;
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;}


#Governanace a{
background: #F5A11C;
color: #fff;
text-decoration: none;
padding: 7px 35px;
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;}


#mySidepanelright .loginleft{
width: 45%;
float: left;
padding: 30px 50px;
}

#mySidepanelright .loginright{
width: 45%;
float: right;
}

.loginleft h1{
font-weight: 500;
margin-bottom: 30px;
}

.loginleft label b{
color: #838383;
font-weight: 400;
font-size: 13px;
margin-bottom: -20px;
display: block;
padding: 10px;}

.loginleft input{
padding: 14px;
border-radius: 15px;
border: 1px solid #ccc;
margin-bottom: 20px;

}

input.widthnew{width: 45%;}

.formbtn{
background: #1D1D1B;
border: none;
color: #fff;
padding: 8px 60px;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
}

.psw a{
color: #000 !important;
font-size: 12px;
}

.loginnnnn p{color: #46BBC7;
font-size: 13px;
vertical-align: middle;
display: inline-block;}


.loginnnnn img{margin-right: 6px;
font-size: 13px;
vertical-align: middle;
display: inline-block;}

#mySidepanelrightnew .logo{padding: 0px;
text-align: left;}

#mySidepanelrightnew .logo img{width: 150px;
padding: 20px;}

#mySidepanelrightnew .loginleft {width: 43%;
float: left;padding-top: 30px;
padding-left: 140px;}

#mySidepanelrightnew .loginright {width: 43%;
float: right;}

#mySidepanelrightnew .loginnnnn {padding-top: 30px;}

input::placeholder {
  color: #46BBC7;
}



@media screen and (max-width:850px) {
    #mySidepanelrightnew .loginnnnn {
    padding-top: 25px;
}
#mySidepanelrightnew .loginleft {
padding-left: 10px !important;
}
input.widthnew {
    width: 95%;}
.loginright img{width: 100%;}

#mySidepanelrightnew .loginleft {width: 90%;
float: none;padding-top: 30px;
padding-left: 40px;}

#mySidepanelrightnew .loginright {width: 100%;
float: none;}

#mySidepanelright a img {
    width: 43%;
    margin-top: 0px;}
#mySidepanelright .loginleft{
width: 90%;
float: none;
padding: 30px 50px;
}

#mySidepanelright .loginright{
width: 90%;
float: none;
}
#mySidepanelright{
width:400px  !important;
}
.logo img{width: 100%;}
.logo h1 {font-size: 29px;}
.logo p {font-size: 16px;}
.block1, .block2, .block3, .block4 {width: 67%;margin-bottom: 20px;}
.blackbtn {margin-bottom: 0px;}
.leftalign {
    width: 100%;
    float: none;
    padding: 0px;
        padding-top: 0px;
    padding-top: 0px;
	}

	.rightalign img {
    width: 67%;
    border: 15px solid #fff;
    border-radius: 50%;
    margin: 20px;
    top: 0px;
    position: relative;
    z-index: 99;
    box-shadow: 0px 0px 10px #ccc;
    float: none;}

	.rightalign {
    width: 100%;
    float: none;
    text-align: center;}
.rotabgright, .rotabg {
    background: #F0F0F0 !important;}
	.ourpartners p {
    width: 100%;}
}