body {
}
@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Regular.eot') format('embedded-opentype'), url('../font/OpenSans-Regular.ttf') format('truetype');
}

p{
    margin:0;
}

.nodeco.abt{
    color:black;
}
    .nodeco.abt:hover {
        color: #56a9d9;
    }
a:hover {
    text-decoration: none;
}

h2 {
    font-family: AvenirLTStd-Black;
    margin:0;
}

.hovershort:hover {
    transform: translateY(-10px);
}

#imagebanner{
    width:100%;
    position:relative;
}


#imagebannersize {
    position: relative;
    width: 100%;
    background: url('../images/about/Fotolia_138972379_S.jpg') center center no-repeat;
 
    background-size: cover;
    padding-top: 26%;
    min-height: 200px;
    box-sizing: border-box;
}

#imagebannertext {
    position: absolute;
    height: 100%;
    width: 95%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width: 85%;
}

#imgbannertable{
    height:100%;
    width:100%;
    display:table;
}

#imgbannercell{
    display:table-cell;
    vertical-align:middle;

}

#imgtext {
    font-family: AvenirLTStd-Black;
    color:white;
    font-size:48px;
}

#text{width:100%;}

#textdiv {
    height: 100%;
    width: 95%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width: 85%;
}

#textjustify{
    width:100%
}

#textcolumn{
    width:100%;
    font-family:'Open Sans';
    font-size:16px;
    margin:55px 0;
    line-height:24px;
    text-align:justify;
}

#phraseone{
    width:100%;
}

.phrase {
    font-family: AvenirLTStd-Black;
    font-size: 24px;
    color: #113a6b;
    width: 37%;
    vertical-align: top;
    display: inline-block;
    min-width:20%;
}

.phrase2 {
    font-family: AvenirLTStd-Black;
    font-size: 24px;
    color: #113a6b;
    vertical-align: top;
    display: inline-block;
    min-width: 20%;
    width:93%;
}

.heading {
    width:62%;
    vertical-align: top;
    display: inline-block;
}

#phrasetwo {
    width: 100%;
    margin:70px 0;
}

.head1 {
    font-family: AvenirLTStd-Black;
    font-size: 24px;
}

.head2 {
    font-family: AvenirLTStd-Black;
    font-size:18px;
    margin:40px 0 20px 0;
    line-height: 36px;
}

.headlist {
    list-style:none;
    margin: 0;
    padding: 0;
}

.headlist li{
    line-height:48px;
    font-family:'Open Sans';
    font-size:16px;
}

.liststyle{
    vertical-align:text-top;
    
}

.listtext {
    width:88%;
    display: inline-block;
    margin-right:1%;
    line-height:30px;
}

.pointstyle {
    width:5%;
    display: inline-block;
    vertical-align:top;
}

.closequote
{
    vertical-align:bottom;
}

.openquote {
    vertical-align: top;
}

#vision {
    width: 100%;
    background-color: #28a4d2;
    display:table;
}

#visiondiv {
    height: 100%;
    width:50%;
    display: table-cell;
    padding:100px 0;
}

#visiontext {
    height: 100%;
    width: 76%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
}

#visionimage {
    width: 30%;
    height: 100%;
 
    background: url('../images/visionandmissionimg.jpg') center center no-repeat;
    background-position-x: 35%;
    display: table-cell;
    background-size: cover;
}

#vm1 {
    font-family: AvenirLTStd-Black;
    font-size: 26px;
    color:white;
    line-height:36px;
}

#vm2 {
    font-family: 'Open Sans';
    font-size: 18px;
    color: white;
    line-height:30px;
    padding:30px 0;
    text-align:justify;
    font-weight:normal;
}

#vm3 {
    font-family: 'AvenirLTStd-Black';
    font-size: 20px;
    color: white;
    line-height: 36px;
}


#pnc{
    width:100%;
}

#pncdiv {
    height: 100%;
    width: 95%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width: 85%;
    margin-top:40px;
}

#pncheader {
    font-family: 'AvenirLTStd-Black';
    font-size: 24px;
}

.pnctitle{
    display:inline-block;
    width:37%;
    vertical-align:top;
}

.pncsubtitle {
    font-family: 'AvenirLTStd-Black';
    font-size: 18px;
    color: #113a6b;
}

.pnccontent {
    display: inline-block;
    width: 62%;
    vertical-align: top;
}

#partners{
    margin: 50px 0;
}

#principal {
    width: 100%;
    background-color: #eaecf0;
}

#principaldiv {
    height: 100%;
    width: 95%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width: 85%;
    padding:45px 0;
}

#principalheader {
    font-family: 'AvenirLTStd-Black';
    font-size:24px;
    text-align:center;
}

.principalcontent {
    margin:60px auto auto auto;
    text-align:center;
    max-width:1250px;

    
}

.principalblock {
    position: relative;
    width: 400px;
    height: 100%;
    display:inline-block;
    vertical-align:top;
}

.pid {
    display: block;
    text-align: justify;
    text-justify: distribute-all-lines;
}

.justify{
    width:100%;
    display:inline-block;
}

.ptiny {
    display: block;
    width: 73px;
    margin: auto;
    position:absolute;
    top: 50%;
    left: 0;
    right: 0%;
    transform:translateY(-58%)
}

#c1{

}

.plargecircle{
    width:263px;
    height:263px;
    border-radius:50%;
    border:18px solid white;
    box-sizing:border-box;
    box-shadow: 0 13px 27px rgba(0,0,0, 0.15);
    margin:auto;
}


.psmallcircle {
    width: 105px;
    height: 105px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    left: 69%;
    right: 0;
    box-shadow: 0 5px 27px rgba(0,0,0, 0.15);
    transform:translateY(-50%);
}

.pname {
    color:black;
    text-align: center;
    font-family: 'AvenirLTStd-Black';
    font-size:16px;
    margin:25px 0 55px 0;
    height:70px;
    
}

.c1 {
    background: url('../images/about/newprofile/John2.jpg') no-repeat;
   
    background-size: cover;
}

.c2 {
    background: url('../images/about/pi2.png') no-repeat;
    background-size: cover;
    background-position-x:50%;
}

.c3 {
    background: url('../images/about/newprofile/KINGs.jpg') no-repeat;

    background-size: cover;
    background-position-y: 35%;
}

.c4 {
    background: url('../images/about/newprofile/KINGs4.jpg') no-repeat;
 
    background-size: cover;
}

.c5 {
    background: url('../images/about/newprofile/paul.jpg') no-repeat;
 
    background-size: cover;
    background-position-y: 25%;
}

.c6 {
    background: url('../images/about/newprofile/KINGs3.jpg') no-repeat;
  
    background-size: cover;
    background-position-y: 13%;
}

.c7 {
    background: url('../images/about/newprofile/joanne.jpg') no-repeat;
  
    background-size: cover;
    background-position-y: 13%;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    width: 65%;
    top: 9%;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius:30px;
    box-shadow: 0 5px 20px rgba(138,138,138, 0.3);
    max-width:1026px;
}


.modalcircle {
    width: 35%;
    display: inline-block;
    vertical-align: middle;
    margin:2.5%;
}

.modaltext {
    width: 56%;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Open Sans';
    font-size: 16px;
    line-height:24px;
    padding-left:30px;
}

.closeimg{
    width:30px;
}

/* The Close Button */
.close {
    width: 20px;
    margin-right: 30px;
    padding-top: 10px;
    opacity:1;
}

.close:hover,
.close:focus {
        
   text-decoration: none;
   cursor: pointer;
   opacity:0.5;
}


/* Modal Header */
.modal-header {
    background-color: transparent;
    color: white;
    font-family: AvenirLTStd-Black;
    font-size: 16px;
    border:none;
    padding:0;
}


.modal-header .close{

    padding-top: 10px;
}


/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #113a6b;
    color: white;
}

.plargecircle2 {
    width: 263px;
    height: 263px;
    border-radius: 50%;
    border: 18px solid white;
    box-sizing: border-box;
    box-shadow: 0 13px 27px rgba(0,0,0, 0.15);
    margin: auto;
}

.psmallcircle2 {
    width: 105px;
    height: 105px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top:10%;
    left:27%;
    box-shadow: 0 5px 27px rgba(0,0,0, 0.15);
}

.modal-backdrop{
    position:unset;
}

.modal-body{
    padding:0 40px 40px 15px;
}

.nav > li > a :hover{
    background-color:transparent;
}

.schname {
    font-family: AvenirLTStd-Black;
    font-size: 26px;
    color: #113a6b;
    margin:15px 0;
    line-height:36px;
}



@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 9%;
        opacity: 1
    }
}



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

  

    .modalcircle,
    .modaltext{
        display:block;
        text-align:justify;
        width:100%;
        text-align:center;
    }

    .modal-content
    {width:95%}


    .psmallcircle2{
        left:58%;
        top: 5%;
    }
}

@media screen and (max-width:1028px)
{
    #vision {
        display: block;
        background: url('../images/visionandmissionimg.jpg') center center no-repeat;
        background-size: cover;
        background-position-y: 50%;
    }

    #visiondiv {
        display: block;
        width: 100%;
        background-color: rgba(40, 164, 210, 0.7);
        padding:50px 0;
    }
}


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

    .phrase{
        display:block;
        width:100%;
        margin-bottom:10px;
    }

    .heading{
        display:block;
        width:100%;
    }
    .headlist{
        /*line-height:36px;*/
        /*font-size:14px;*/
    }

    .pnctitle {
        display: block;
        width: 100%;
    }

    .pnccontent {
        display: block;
        width: 100%;
    }

    .pncsubtitle{
        margin-bottom:20px;
    }

    .head2{
        margin:15px 15px 15px 0;
    }

    .psmallcircle2{
        left:63%;
    }
  
}





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

    .headlist{font-size:10px;}

    .pointstyle{width:8%;}

    .principalblock{
        margin:auto;
        width:100%;

    }

    .modaltext{
        font-size:14px;
        text-align:left;
    }

    .modalcircle{
        width:50%;
    }

    .modal-content{
        width:300px;
    }

    .plargecircle2{
        margin:auto 0;
        width:225px;
        height:225px;
    }
    .psmallcircle2 {
        width: 80px;
        height: 80px;
        top: 0%;
        left: 60%;
    }

    .ptiny{
        width:54px
    }

    #vision{
        height:100%;
    }
}

@media screen and (max-width:1480px) {
    #visionimage {

        background-position-x: 75%;
     
    }
}