@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

body, html{padding: 0px; margin: 0px; overflow-x: hidden; width: 100%; background-color: #3D3D3D;}

body.innerpage{}
.wrapper{height: 100vh; width: 100%; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 12px; position: relative; overflow: hidden; letter-spacing: 1px;}

.contentwrapper{width: 100%; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 12px; position: relative;  letter-spacing: 1px;}

a:hover{text-decoration: none;}


p{font-size: 14px; padding: 0px; margin: 0px; color: #ffffff; }
.header{position: fixed;}
.header .logo{padding: 20px;}

.logo{position: absolute;left: -15px; top: -15px; transform: scale(0.64); width: 150px; height: 149px;  }

.logo img{width: 100%; height: auto;}

@keyframes logoanim{100%{left: -15px; top: -15px; transform: scale(0.64);}}

.loadingimages{width: 550px;height:550px;position: absolute;border-radius: 50%; margin: auto;top: 0; bottom: 0; left: 0; right: 0;}
.loadimg { width: 150px; height:150px;  border-radius: 50%;position: absolute; overflow: hidden;}

#load01{animation: moveright linear; `}
#load02{animation: movebottom linear; animation-duration: 2s; animation-delay:1s;animation-fill-mode: forwards;}
#load03{animation: moveleftbottom linear; animation-duration: 2s; animation-delay:1s;animation-fill-mode: forwards;}
#load04{animation: moveleft linear; animation-duration: 2s; animation-delay:1s;animation-fill-mode: forwards;}
#load05{animation: movelefttop linear; animation-duration: 2s; animation-delay:1s;animation-fill-mode: forwards;}
#load06{animation: movetop linear; animation-duration: 2s; animation-delay:1s;animation-fill-mode: forwards;}

@keyframes moveright {100%{left: 70vw; opacity: 0;}}
@keyframes movebottom {100%{top: 70vh; opacity: 0;}}
@keyframes moveleftbottom {100%{left: -40vw; top:70vh;  opacity: 0;}}
@keyframes moveleft {100%{left: -70vw; opacity: 0;}}
@keyframes movelefttop {100%{left: -40vw; top:-40vh;  opacity: 0;}}
@keyframes movetop {100%{top: -40vh; opacity: 0;}}

h1.title{font-size: 26px; color: #c89953; font-weight: 700; text-transform: uppercase;position: absolute;top:25px; width: 100%; text-align: left; left: 120px;   animation-duration: 1s; animation-delay: 3s; }



.contentwrapper{color: #1a1a1a;}

.contentwrapper h1.title{ animation-delay: 0s; top: 20px;left: 120px;}

h2.caption{position: absolute;width: 100%; top:50px; left: 120px; animation: captiontext1; animation-duration: 1s; animation-delay: 4s; animation-fill-mode: forwards;}
h2.caption .typewriter{color: #ffffff; font-size: 18px; display: inline-block;}

.contentwrapper h2.caption {top: 50px; left: 120px;}
.contentwrapper h2.caption .typewriter { animation-delay: 0.5s;}



.typewriter{
  overflow: hidden;
  white-space: nowrap;
	
}

@keyframes typing {
  from { width: 0; opacity: 1;}
  to { width: 100% ;  opacity: 1;}
}


.horiline{height: 1px; background-color: #999; position: absolute; top: 112px; left: 0px; width: 0px; animation: expandline linear; animation-duration: 1s; animation-delay: 6s; animation-fill-mode: forwards;}
@keyframes expandline{100%{width: 100%;}}


.programcontainer{ width: 65vw; height:290px;position: absolute; top: 140px; top: 140px; left: -65vw; border-radius: 20px;   transition: 1s all; }

.moveprogramboxanim{animation: moveprogrambox linear;animation-fill-mode: forwards; animation-duration: 1s;animation-delay: 0s;}

@keyframes moveprogrambox{0%{left: -65vw;} 100%{left:80px;}}


.prg{width: 250px;  padding-top: 10px; text-align: center;}
.prg p{font-size:18px; font-weight: 400; padding-top: 0px; color: #fff;}
.prgtitle{font-size: 24px; color: #c89953; border: 1px solid #c89953; border-radius: 20px; display: inline-block; padding: 10px 20px; margin-left: 40px;}

.prg img, .contentprg .col-md-4 img, .animprog{animation-name: jello;  animation-duration: 8s;  animation-iteration-count: infinite;}

.contentcareer .col-md-4 img, .tab-content .col-md-4 img{animation-name: pulse;  animation-duration: 8s;  animation-iteration-count: infinite;}


.prg:nth-child(odd) img{animation-delay:3s; }
.prg:nth-child(even) img{animation-delay:5s; }

.programgroup.owl-carousel .owl-item img{width: 150px; height: 150px; margin: 0 auto;}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleanim {
  0% {transform:scale(1,1);}
  25% {transform:scale(1.15,1.15);}
  50%,100%  {transform:scale(1,1);}
}

.founderimg{border-radius: 15px; padding-top: 10px;}
.founderimg img{border-radius: 50%;}
.foundercontainer{background-image: linear-gradient(#4d4d4d, #242424);height:320px; width: 300px;position: absolute; top: 125px; right:80px;border-radius: 20px; text-align: center; transform: scale(0);    z-index: 2;transition: all 1s;}

.growscaleanim{animation: growscale linear; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 1s;}

@keyframes growscale{0%{transform: scale(0);} 100%{transform:scale(1);}}

.foundercontainer p{font-weight: 400; padding: 10px 20px 0px; color: #fff; text-align: justify}
.foundercontainer a{color: #c89953; text-decoration: none; font-size: 15px; font-weight: 400; display: block; text-align: right; padding-right: 20px; padding-top: 10px;}
.foundercontainer .readmoretext{display: none;}
.foundercontainer .closefounder{display: none; border: 1px solid #333; border-radius: 50%; text-align: center; width: 20px; height: 20px; line-height: 20px; padding: 0px;  color: #fff;     position: absolute;
    right: 10px;
    top: 10px;}
.foundercontainer .closefounder.btnbottom{top:auto; bottom:10px;}
.foundercontainer.open .closefounder{display: block;}
.foundercontainer.open .closefounder.btnbottom{display: none;}



.foundercontainer.open{width: 91vw; text-align: left; height:500px; padding: 30px; z-index: 2;}
.foundercontainer.open a#showfounder{/*animation: hideshowfounder linear; animation-duration:3s; animation-fill-mode: forwards;*/ }
.foundercontainer.open .founderimg{float: left; padding-right: 20px; padding-top: 0px;}
.foundercontainer.open .readmoretext{display: inline;}
.foundercontainer.open p{}





.footer{position: fixed; bottom: 0px; width: 100%; padding: 5px 15px 10px 10px;}
.footer p{color: #ffffff; text-align: center; font-weight: 300;}

.copyright{display: flex; justify-content: space-between; align-items: flex-end;}
.copyright a{color: #ffffff; }
.copyright p.font12px a{font-weight:500;}

.copyright a.hovergolden:hover{color: #c89953; text-decoration: none;}

.contentfooter .copyright{background-color: #1a1a1a; padding: 10px 0px;}
.contentfooter .copyright p:first-child{padding-left: 10px;}
.contentfooter .copyright p:last-child{padding-right: 10px;}
.contentfooter .copyright p{color: #fff;}

.bannercontainer{position:absolute; width: 100vw; height: 100vh;}
.bannercontainer .banneritem img{width: 100vw; height: 100vh; object-fit: cover;}


.banneroverlay{width: 100%; height: 100%; background-color: #000; opacity: 0.7; transition: all 1s; position: absolute;}
.banneroverlay:hover{opacity: 0;}


.testimonialcontainer{ position: absolute; bottom: 35px; width: 88%; margin: 0 auto; left: 0; right: 0;}
.testimonialcontainer div.item {display: flex; align-items: center; /*background-image: linear-gradient(#666, #333);*/ border-radius: 15px; border:1px solid #666; padding: 10px; position: relative; opacity: 0;  animation-duration: 1s;animation-delay: 1.5s;  animation-fill-mode: forwards; transition: all 1s; margin-right: 7px; margin-left: 7px; height: 110px; overflow: hidden;}
.testimonialcontainer div p{color: #fff; font-size: 14px; font-weight: 300; padding-left: 10px;}
.testimonialcontainer div a{position: absolute; right: 10px; bottom: 10px; color: #c89953; font-size: 18px;}
.testimonialcontainer div span{display: none;}

.owl-carousel .owl-item img{width: auto; height: auto;}
.owl-carousel .owl-stage{display: flex; align-items: flex-end;}

.testimonialcontainer .readmore{position: relative; color: #ffffff; font-size: 14px; padding-left: 10px;}
.gototestimonial{cursor: pointer;}


@keyframes showopacity{100%{opacity: 1;}}
@keyframes showopacitycontent{100%{opacity: 1;}}



.testimonialcontainer div.item img {animation-name: headShake; animation-duration: 3s; animation-iteration-count: infinite;  animation-timing-function: ease-in-out;} 
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.testimonial .slick-track{display: flex; align-items: flex-end; }
.testimonial .item.open{height: 140px; align-items: flex-start;}
.testimonial .item.open span{display: inline;}

.testimonial .slick-dots{ opacity: 0;animation: showopacity linear; animation-duration: 2s; animation-delay: 1.75s; animation-fill-mode: forwards; transition: all 1s; text-align: right; padding-right: 10px;}
.testimonial .slick-dots li{border: 2px solid #c89953; border-radius: 50%; width: 10px; height: 10px;}
.testimonial .slick-dots li.slick-active{background-color: #c89953;}


.testimonial .owl-dots, .programgroup .owl-dots{opacity: 0; animation-duration: 1s;animation-delay: 1.75s;  animation-fill-mode: forwards; transition: all 1s; text-align: right; padding-right: 10px;}
.testimonial .owl-dot, .programgroup .owl-dot{border: 2px solid #c89953 !important; border-radius: 50%; width: 10px; height: 10px; margin: 2px;}
.testimonial .owl-dot.active, .programgroup .owl-dot.active{background-color: #c89953;}
.testimonial .owl-dot:focus, .programgroup .owl-dot:focus {outline:0;}

.showopacityanim{animation: showopacity linear;}

@keyframes floating { 
    0% { transform: translate(0,  0px); } 
    50%  { transform: translate(0, 10px); } 
    100%   { transform: translate(0, -0px); }     
} 

@keyframes floating02 { 
    0% { transform: translate(0,  10px); } 
    50%  { transform: translate(0, 0px); } 
    100%   { transform: translate(0, 10px); }     
} 


.font12px{font-size: 11px; color: #999!important;}
.font12px a{ color: #999!important;}
.clr{float: none; clear:both;}

.font16px{font-size: 16px !important;}

.bannercontainer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#bgvideo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}


 .con{cursor: pointer; display: inline-block; }

 .bar {display: block; height: 3px; width: 30px; background: #fff; margin: 5px auto; }
 
 .con {width: auto;  margin: 0 auto; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease;}

.con:hover .bar {background-color: #ffffff;}
 
 .menu {display: inline-block; width: 40px; text-align: center; height: auto; position: absolute; top:10px; right: 10px; }
.menu:hover{}

 .bar {-webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease;}

 .con:hover .arrow-top-r {-webkit-transform: rotateZ(-45deg) translateY(5px); -moz-transform: rotateZ(-45deg) translateY(5px); -ms-transform: rotateZ(-45deg) translateY(5px); -o-transform: rotateZ(-45deg) translateY(5px); transform: rotateZ(-45deg) translateY(5px); width: 15px;}
 
 .con:hover .arrow-middle-r {-webkit-transform: translateX(15px); -moz-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); transform: translateX(15px); }
 
 .con:hover .arrow-bottom-r {-webkit-transform: rotateZ(45deg) translateY(-5px); -moz-transform: rotateZ(45deg) translateY(-5px); -ms-transform: rotateZ(45deg) translateY(-5px); -o-transform: rotateZ(45deg) translateY(-5px); transform: rotateZ(45deg) translateY(-5px); width: 15px;}

.menucontainer{height: 100vh; width: 100vw; position: fixed; right: -120vw; background: linear-gradient(#000, #252525); transition: all 1s; display: flex; align-items: center; justify-content: center; background-image: url("../images/menubg.jpg"); background-size: cover;    border: 10px solid #c89953;  z-index: 999;}
.menucontainer.open{right: 0px;}
.menuclose{position: absolute; top: 10px; right: 10px; color: #ffffff; cursor: pointer; border:1px solid #fff; border-radius: 50%; width: 30px; height: 30px; text-align: center;}
.menuclose i{font-size: 24px; padding-top: 2px;}
.logomenu{position: absolute; top: 30px; left: 30px; }

.menucontainer .mainlink, .menucontainer .mainlink a {
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    color: #b29962;
    text-decoration: none;
}
.menucontainer .submenu01, .menucontainer .submenu02, .menucontainer .submenu03 {
    transition: all 1s ease;
    padding-left: 20px;
    margin-bottom: 0;
}
.menucontainer .submenu01 a {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding-left: 15px; transition: all 1s; display: block;
}
.menucontainer .submenu01>a {
    padding-left: 0;
}

.menucontainer .submenu01 a:hover{transform: scale(1.1);}
.menucontainer .mainlink a:hover{color: #fff;}

.contentwrapper .menu{right: 20px;}


.contentwrapper .headercontainer{position: fixed; width: 100vw; transition: all 1s; padding-left: 20px; padding-top: 10px; z-index: 1; padding-bottom: 10px;}
.contentwrapper .headercontainer.headeroverlay{background-color: rgba(0,0,0,0.85); z-index: 99;}

.contentbanner{height: 50vh; width: 100vw; background-position: center center; transition: all 1s; animation: movebanner linear; animation-duration: 15s; animation-delay: 1s; animation-iteration-count: infinite; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; background-size: 100%;background-repeat: no-repeat; }


.contentbanner.team{background-image: url("../images/banners/team.jpg"); }
.contentbanner.careers{background-image: url("../images/banners/careers.jpg"); }
.contentbanner.contactus{background-image: url("../images/banners/contact.jpg"); }
.contentbanner.founder{background-image: url("../images/banners/founder.jpg"); }
.contentbanner.gallery{background-image: url("../images/banners/gallery.jpg"); }
.contentbanner.missionvision{background-image: url("../images/banners/vision.jpg"); }
.contentbanner.news{background-image: url("../images/banners/news.jpg"); }
.contentbanner.partnerships{background-image: url("../images/banners/partnerships.jpg"); }
.contentbanner.programs{background-image: url("../images/banners/programs.jpg"); }
.contentbanner.testimonialbanner{background-image: url("../images/banners/testimonials.jpg"); }
.contentbanner.whyocsn{background-image: url("../images/banners/whyus.jpg"); }


.overlaybanner{width: 100vw; height:100%; background-color: rgba(0,0,0,0.5); position: absolute;}




@keyframes movebanner{50%{background-size:110%;}100%{background-size: 100%;}}

.bannertitle{font-size: 26px;color: #ffffff;  text-transform: uppercase; font-weight: 700;   transform: translate3d(0,-3000px,0) scaleY(3); z-index: 1; margin-right: auto; padding-left: 8%;}
.bannercaption{font-size: 24px; color: #fff; text-transform: capitalize; animation-delay:1.5s;}

.contentwrapper .pagetitle{text-align: center; padding: 50px 0px 00px;animation-delay:1s;  text-transform: uppercase; color: #c89953;  opacity: 0;}

.contentwrapper p{font-size: 18px; /*color: #1a1a1a;*/ color: #ffffff; font-weight: 300;}

.whitebanner .bannertitle, .whitebanner h2.caption .typewriter{color: #3D3D3D;}
.whitebanner .bar{background-color: #3D3D3D;}



.teamcontainer{position: relative; display: flex; padding: 10px; cursor: pointer;}
.teamdescription{width: 0px; max-height: 0px;  transition: all 1s; opacity: 0; overflow: hidden;}
.teamcontainer img{filter: grayscale(100%); transition: all 1s;}
.teamcontainer:hover{}
.teamcontainer:hover img{filter: grayscale(0%);}
.teamcontainer:hover .teamdescription{}
.teamcontainer .teamtitle, .partnercontainer .partnertitle{font-size: 18px; font-weight: 500; text-align: center; color: #c89953;}
.teamcontainer .teamtitle span{font-size: 16px; font-weight: 500;color: #fff; }



.teamimg, .partnerimg{position: relative;}
.teamimg i, .partnerimg i{position: absolute; right: -20px; width: 20px; height: 20px; font-size: 20px; color: #ffffff; }
.teamcontainer:hover .teamimg i{}
.teamimg i{ top: 200px;}
.partnerimg i{ bottom: 20px;}

.teamcontainer .topcorner{position: absolute; top:10px; right:10px; width: 20px; height: 20px; font-size: 20px; color: #ffffff; display: none;}
 

.teamcontainer.open{border: 1px solid #c89953;}
.teamcontainer.open .teamdescription{width: 400px; opacity: 1; max-height: 1800px; min-height: 320px;padding-right: 18px !important;}
.teamcontainer.open img{filter: grayscale(0%);}
.teamcontainer.open .teamimg i{top: auto; bottom: 10px; left: 10px; display: none;}
.teamcontainer.open .topcorner{display: block;}

.partnercontainer{position: relative; display: flex; margin: 10px 20px;}
.partnerdescription{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); color: #ffffff !important; opacity: 0; transition: all 1s; padding: 10px; margin: 0px;}
.partnercontainer:hover .partnerdescription{opacity: 1;}
.partnerimg i{right: 10px;}
.partnercontainer:hover .partnerimg i{visibility: hidden;}



.contentfooter{background: linear-gradient(#d8b686, #c79853);/*background: #330033*/ /* padding: 20px 30px;*/}

.contentfooter .container{padding: 20px 0px;}
.contentfooter .menutitle, .contentfooter .menutitle a{font-size: 18px; color: #000; font-weight: 500; display: block; text-transform: uppercase;text-decoration: none;}
.contentfooter .submenu01 a{font-size: 16px; color: #000; font-weight: 400;  display: block; text-transform: capitalize; text-decoration: none;}
.contentfooter p {color: #000; font-weight: 300; font-size: 12px; margin-left: 5px;}
.contentfooter .submenu01 i{top:8px; font-size: 9px; left: 6px; color: #000;}

.bulletarrow {
    position: relative;
    padding-left: 24px;
    margin-bottom:0px;
	margin-left: 20px;
}

    .bulletarrow i {
        position: absolute;
        left: 0px;
        
		top: 5px;
        color: #c89953;
		font-size: 16px;
		font-weight: 900 !important;
    }

.bulletpng{position: absolute; left: 0px; top: 5px;}

.contentprg .prgname{font-size: 28px; color: #c89953;  font-weight: 500; text-transform: uppercase;}
.contentcareer .prgname, .prgname{font-size: 22px; color: #c89953;  font-weight: 500; text-transform: uppercase}
h6{font-size: 28px; color: #1a1a1a; text-align: center;}

.contentcareer .prgname{text-transform: none;}

.contentcareer h6{font-size: 18px; text-align: left;}
.contentcareer .prgname{ color: #1a1a1a; font-size: 18px;}

.contentcareer .jobcontent{max-height: 0px; transition: all 1s; opacity: 0; overflow: hidden;}
.contentcareer .jobcontent.open{max-height: 1000px; opacity: 1;}
.contentcareer .loaddesc, .contentcareer .closedesc{width: 20px; height: 20px; font-size: 20px; color: #ffffff; cursor: pointer;}


.showonload, .showonload02{opacity: 0;}
.showcontent{animation: showopacitycontent linear; animation-duration: 2s; animation-delay:0s; animation-fill-mode: forwards; }

.animdelay8s{animation-delay: 1s !important;}
.animdelay9s{animation-delay: 1.25s !important;}
.animdelay10s{animation-delay: 1.5s !important;}


.formcontainer{font-size: 18px; color: #1a1a1a;}
.formcontainer div{padding: 10px 0px;}
.formcontainer input{border: 1px solid #c89953; width: 450px; border-radius: 5px; font-size: 18px; color: #1a1a1a; min-height: 40px; padding: 0px 10px;}
.formcontainer .selectprogram{width: 450px; border-radius: 5px; min-height: 40px; border: 1px solid #c89953; color: #1a1a1a; font-weight: 400;}
.formcontainer .optWrapper{width: 450px; top:45px !important; color: #1a1a1a;}
.formcontainer textarea{padding:10px;border: 1px solid #c89953; width: 450px; border-radius: 5px; resize: none;}
.formcontainer .btnsubmit{background: linear-gradient(#d8b686, #c79853); color: #000; font-size: 22px; border-radius: 5px; padding: 10px 20px; text-decoration: none;}
.formcontainer h4, .formcontainer div{color: #ffffff;}

.formcontainer .SumoSelect.sumo_selectprogram{padding: 0px;}

.iframe_video{width:280px; height:158px;}

.gallerycontainer img{max-width: 300px; max-height: 300px; transition: all 1s;}
.gallerycontainer a{position: relative; display: block;max-width: 300px; max-height: 300px; overflow: hidden; margin: 0 auto;}
.gallerycontainer i{position: absolute; bottom: 20px; right: 20px; width: 20px; height: 20px; font-size: 20px; color: #330033; opacity: 0; transition: all 1s;}
.gallerycontainer a:hover i{opacity: 1;}
.gallerycontainer a:hover img{transform: scale(1.5);}

.nav-pills li{margin-right: 10px;}
.nav-pills a, .nav-pills a:hover{color: #1a1a1a !important; text-decoration: none; border-top: 1px solid #c89953; border-left: 1px solid #c89953; border-right: 1px solid #c89953; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important; border-bottom-right-radius: 0px !important;  border-bottom-left-radius: 0px !important; font-size: 24px; font-weight: 500; text-transform: uppercase; background-color: #c89953; }
.nav-pills a.active{ background-color: #3D3D3D !important; color: #ffffff !important;}

.tab-content{border: 1px #c89953 solid; padding: 15px 10px; margin-top: -1px;}

a.genlink, a.genlink:hover, a.genlink:active, a.genlink:link{color: #ffffff;text-decoration: none;}

.bggrey50{}

.bggrey{}

.colorblue{color: #3e5da8;}

.cloudtagcontainer{position: relative; height: 300px;  max-height: 300px; }
.cloudtagprg{height: 260px; padding-top: 15px;}





.cloudtagcontainer div span:nth-child(1){  color: #c86453; font-size: 20px;}
.cloudtagcontainer div span:nth-child(2){   color: #98c853; font-size: 26px;}
.cloudtagcontainer div span:nth-child(3){  color: #53bec8;  font-size: 28px;}
.cloudtagcontainer div span:nth-child(4){  color: #5361c8; font-size: 20px;}
.cloudtagcontainer div span:nth-child(5){  color: #a053c8; font-size: 26px;}
.cloudtagcontainer div span:nth-child(6){  color: #c85398; font-size: 22px;}
.cloudtagcontainer div span:nth-child(7){/* opacity: 1;  animation: cloud07 linear;*/ color: #c85353; font-size: 26px;}
.cloudtagcontainer div span:nth-child(8){  color: #539bc8; font-size: 28px;}
.cloudtagcontainer div span:nth-child(9){  color: #7ac853;font-size: 26px; }
.cloudtagcontainer div span:nth-child(10){  color: #c89853; font-size: 26px;}
.cloudtagcontainer div span:nth-child(11){  color: #ad5a5a;  font-size: 28px;}
.cloudtagcontainer div span:nth-child(12){  color: #ad5a91; font-size: 32px;}

.tagcloud{margin: 0 auto;}

.foundername{background-color: rgba(255,255,255,0.7); font-size: 22px; text-align: center; color: #000; position: absolute; bottom: 0px; width:100%; padding: 10px 0px; font-weight: 500;}

.maxwidth450{max-width: 450px; margin: 0 auto;}

.readmore, .readmore:hover, .readless, .readless:hover{font-size: 16px; color: #dbdedf; text-decoration: none; font-weight: 500; text-transform: none; padding-top: 10px; display: inline-block;}
.pagehidden{max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden;}
.pagehidden.show{max-height: 10000px; opacity: 1; overflow: visible; padding-bottom: 1rem;}

#result{font-size: 22px; color: #c89953;}
#errMsgFooter{font-size: 18px; color: #c89953; }

.flexbox{display: flex; flex-wrap: wrap;border: 1px solid #fff;}
.flexbox div{flex-grow: 1; width: 33%; height: 300px; padding: 10px 25px; }
.flexbox div:nth-child(even){background: #c89953; color: #000;}
.flexbox div:nth-child(even) p, .flexbox div:nth-child(even) .bulletarrow i{color: #000;}
.flexbox div:nth-child(odd){ color: #fff;}
.flexbox div:nth-child(odd) p{color: #fff; }
.flexbox div p{font-size: 16px;}

.flexbox2col div{width: 50%; height: 250px; }
.flexbox2col .oddreverse{background: #c89953; color: #000;}
.flexbox2col .evenreverse{background-color: transparent !important; color: #fff;}
.flexbox2col .evenreverse p, .flexbox2col .evenreverse .bulletarrow i{color: #ffffff !important;}
.flexbox2col .oddreverse p, .flexbox2col .oddreverse .bulletarrow i {color: #000000 !important;}


.infopack{border: 1px solid #c89953;}
.infopack th p{color: #c89953; font-weight: 400;}
.infopack th, .infopack td{padding: 10px 20px;border-bottom: 1px solid #c89953;}
.infopack th:nth-child(1){width: 130px;}
.infopack th:nth-child(2){width: 325px;}
.infopack th:nth-child(3){width: 330px;}
.infopack th:nth-child(4){width: 350px;}
.infopack td:nth-child(1){text-align: center;}
.infopack td{vertical-align: top;}

.contentcontainer.contactus .col-md-3 a, .contentcontainer.contactus .col-md-3 a:hover, .contentcontainer.contactus .col-md-3 a:active, .contentcontainer.contactus .col-md-3 a:visited{color: #ffffff !important;}


.txtbrown{color: #c89953 !important; font-weight: 400 !important;}
.txtdkgrey{color: #333;}
.txtupper{text-transform: uppercase;}
.txtwhite{color: #ffffff !important;}

.invert{filter: invert(100%);}

.flexbox hr{border-top: 1px solid rgba(255,255,255,0.5);}

.cloudtagprgmob{display: none;}

.sociallinks img{transform: scale(1); transition: all 1s;}
.sociallinks img:hover{transform: scale(0.85); }

.blackbg{background-color: #000;}
.blackbg .contentwrapper p{color: #fff;}
.blackbg .respimg{width: 100%;}

.greybg{background-color: #3D3D3D;}
.greybg .contentwrapper p{color: #fff;}
.greybg .respimg{width: 100%;}

.bluebg{background: linear-gradient(to right, #040623, #1f225b);}
.bluebg .contentwrapper p{color: #fff;}
.bluebg .respimg{width: 100%;}

.ht10{display: block; height: 8px;}
.padT50{padding-top: 50px;}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.preloader .preloader-before,
.preloader .preloader-after {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: #090808;
}

.preloader .preloader-before {
  top: 0;
}

.preloader .preloader-after {
  bottom: 0;
}

.preloader .preloader-block {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
}

.preloader .preloader-block .title {
  position: absolute;
  left: 0;
  bottom: calc(50% + 16px);
  width: 100%;
  text-align: center;
  z-index: 2;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: #fff;
}

.preloader .preloader-block .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  font-weight: 700;
  letter-spacing: 8px;
  font-size: 24vw;
  
  color :rgb(11,72,107, 0.1);
  z-index: 1;
}

.preloader .preloader-block .loading {
  position: absolute;
  top: calc(50% + 16px);
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: #fff;
  -webkit-animation: blink-animation 2.2s linear infinite;
}

.preloader .preloader-bar {
  position: absolute;
  z-index: 2;
  top: calc(50% - 1px);
  right: 0;
  width: 100%;
  height: 2px;
  background: #1d1d1d;
}

.preloader .preloader-bar .preloader-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  height: 100%;
  width: 0;
  background: #fff;
}
.hidden {
    display: none !important;
}
@-webkit-keyframes blink-animation {
  0% {
    opacity: 0;
  }
}

@-moz-keyframes blink-animation {
  0% {
    opacity: 0;
  }
}

@keyframes blink-animation {
  0% {
    opacity: 0;
  }
}

@media only screen and (min-width: 2000px) and (max-width:2500px){
	.contentbanner{ background-size:auto 100%;}

@keyframes movebanner{50%{background-size:auto 110%;}100%{background-size:auto 100%;}}
}

@media only screen and (min-width: 1600px)and (min-height:1080px) and (max-width:1700px){
	.contentbanner{ background-size:auto 100%;}

@keyframes movebanner{50%{background-size:auto 110%;}100%{background-size:auto 100%;}}
}

@media only screen and (min-width: 1440px)and (max-width:1500px){
	.contentbanner{ background-size:auto 100%;}

@keyframes movebanner{50%{background-size:auto 110%;}100%{background-size:auto 100%;}}
}

@media only screen and (min-width: 1280px)and (min-height:900px) and (max-width: 1280px)and (max-height:950px) {
.contentbanner{ background-size:auto 100%;}
@keyframes movebanner{50%{background-size:auto 110%;}100%{background-size:auto 100%;}}
}

@media only screen and (max-width: 1280px) and (max-height:610px) {
	.testimonialcontainer{bottom: 15px;}
	.programcontainer{top: 110px;}
	.foundercontainer{top: 109px;}
}

@media only screen and (max-width: 1280px) {
	@keyframes moveprogrambox{100%{left:50px;}}
	.foundercontainer{right: 55px;}
	.foundercontainer.open{height:500px;}
	
	.foundercontainer.open{width: 92vw;}
}

@media only screen and (max-width: 1024px) {
	@keyframes moveprogrambox{100%{left:0px;}}
	.foundercontainer{right: 30px;}
	.foundercontainer.open{width: 95vw; padding: 15px;}
	.testimonialcontainer{width: 95%;}
	.flexbox div{height: 400px;}
	.flexbox.flexbox2col div{height:250px;}
	.contentbanner{ background-size:auto 100%;}
@keyframes movebanner{50%{background-size:auto 110%;}100%{background-size:auto 100%;}}
	.menucontainer .row{padding-left: 25px; padding-right: 25px; height: calc(95vh - 150px); overflow-y: auto;}
	.menucontainer{display: block; padding-top: 130px;}
}

@media only screen and (max-width: 820px) {
	.programcontainer{width: 95vw; left: -95vw;}
	.foundercontainer {right: auto; top: 40vh; left: 30px;}
	.foundercontainer.open{height: auto;}
	.testimonialcontainer{bottom: 10vh;}
	.footer .copyright{align-items: center; flex-flow: row wrap;}
	.footer .copyright p:nth-child(1){order: 2;}
	.footer .copyright p:nth-child(2){order: 1; flex: 0 0 100%; padding-bottom: 5px;}
	.footer .copyright p:nth-child(3){order: 3;}

	.logocontent a img, .logomenu a img{width: 75px; height: auto;}
	.contentwrapper .headercontainer{padding-left: 5px; padding-top: 5px; z-index: 999 !important;}
	.contentwrapper h1.title{left: 80px; top:20px;font-size: 24px; width: 95%;}
	.contentwrapper h2.caption{top: 48px; left: 80px; font-size: 18px;}
	.bannertitle{font-size: 36px;}
	.contentwrappe, html{overflow-x: hidden;}
	
	
.contentbanner.team{background-image: url("../images/banners/team_m.jpg"); }
.contentbanner.careers{background-image: url("../images/banners/careers_m.jpg"); }
.contentbanner.contactus{background-image: url("../images/banners/contact_m.jpg"); }
.contentbanner.founder{background-image: url("../images/banners/founder_m.jpg"); }
.contentbanner.gallery{background-image: url("../images/banners/gallery_m.jpg"); }
.contentbanner.missionvision{background-image: url("../images/banners/vision_m.jpg"); }
.contentbanner.news{background-image: url("../images/banners/news_m.jpg"); }
.contentbanner.partnerships{background-image: url("../images/banners/partnerships_m.jpg"); }
.contentbanner.programs{background-image: url("../images/banners/programs_m.jpg"); }
.contentbanner.testimonialbanner{background-image: url("../images/banners/testimonials_m.jpg"); }
.contentbanner.whyocsn{background-image: url("../images/banners/whyus_m.jpg"); }
	
	.contentbanner{ background-size:100%;}
@keyframes movebanner{50%{background-size:110%;}100%{background-size:100%;}}
	
	.contentfooter .col-md-4, .contentfooter .col-md-2{-ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; margin-bottom: 10px;}
	.contentfooter .pt-2.d-flex.justify-content-between{justify-content: flex-start !important;}	
	.respimg{width: 100%; height: auto;}
	
	.contentcontainer{padding-top: 10px;}
	.contentcontainer.founder .col-md-6, .contentcontainer.whyocsn .col-md-5, .contentcontainer.whyocsn .col-md-7, .contentcontainer.testimonialcontent .col-md-4, .contentcontainer.testimonialcontent .col-md-8, .contentcontainer.careers .col-md-5, .contentcontainer.careers .col-md-7, .contentcontainer.contactus .col-md-6{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 10px;}
	.contentcontainer.testimonialcontent .row:nth-of-type(even){flex-direction: column-reverse;}
	
	.menucontainer .row{padding-left: 25px; padding-right: 25px; height: calc(95vh - 100px); overflow-y: auto; margin-top: 10px;}
	.contentfooter .container{padding-left: 10px; padding-right: 10px;}
	.logomenu{top: 10px; left: 5px;}
	.menucontainer{display: block; padding-top: 80px;}
	.flexbox div{height: 450px;}
}

@media only screen and (max-width: 768px) {
	.logo, .title, .caption, .footer{position: fixed !important;}
	.footer{}
	.programcontainer{position: relative; top: auto;  margin-bottom: 20px;}
	.foundercontainer{position: relative; top: auto;}
	.testimonialcontainer{position: relative; bottom: auto; margin-bottom: 40px; height: 150px;}
	
	.foundercontainer{margin-bottom: 20px;}
	.foundercontainer.open{/*position: absolute; top: 140px;*/}
	.bannercontainer{}
	.maincontent{height: 75vh; overflow: scroll; margin-top: 140px;  position: relative;}
	@keyframes moveright {100%{left: 100vw; opacity: 0;}}
	#bgvideo{height: 100vh; width: auto; left: -50%;}
	@keyframes showopacity{100%{opacity: 0;}}
	.mobtestimonial{animation: showopacitymob linear !important; animation-duration: 2s !important; animation-fill-mode: forwards !important; transition: all 1s !important;}
	@keyframes showopacitymob{100%{opacity: 1;}}
	.foundercontainer.open .closefounder.btnbottom{display: block;}	
	.contentcontainer.contactus .col-md-4 {padding-bottom: 10px;}
}

@media only screen and (max-width: 767px) {
	.container.gallerycontainer .row.pt-5 {padding-top: 0px !important;}
	.container.gallerycontainer .row.pt-5:first-child {padding-top: 40px !important;}
	.contentcontainer.team .row {flex-direction: column;}
	.teamcontainer{margin: 0 auto;}	
}

@media only screen and (max-width: 610px) {
	.maincontent{    height: 72vh;}
	.loadingimages{width: 400px; height: 400px;}
	.loadimg{height: 120px; width: 120px;}
	.loadimg img{height: 100%; width: 100%;}	
	.logo{ width: 120px; height: 119px; }
	@keyframes logoanim{100%{left: -15px; top: -15px; transform: scale(0.64);}}
	h1.title, h2.caption{left: 90px;}
	h1.title{font-size: 24px; }
	.prgtitle{font-size: 22px;}
	.programcontainer{height: auto;}
	.programcontainer .d-flex{flex-direction: column;}
	
	.mobfounder{animation: growscalemob linear !important; animation-duration: 2s !important; animation-fill-mode: forwards !important; transition: all 1s !important;}
	@keyframes growscalemob{100%{transform:scale(1);}}
	
	.contentwrapper h1.title{width: 65%; padding-top: 0px;}
	.menu{top: 20px;}
	.contentwrapper h2.caption{top: 0px;}
	.formcontainer input, .SumoSelect, .formcontainer textarea, .contentcontainer.contactus iframe{width: 95%;}
	.formcontainer .selectprogram{width: 100%;}
	.contentwrapper .headercontainer.headeroverlay{min-height: 110px;}
	.contentcontainer{padding-left: 20px; padding-right: 20px;}
	.contentfooter .copyright{flex-direction: column; align-items: center; text-align: center;}
	.contentfooter .copyright p:nth-child(2){order: -1;}
	.teamcontainer{flex-direction: column; max-width: 95%;}
	.teamimg{text-align: center;}
	.teamcontainer:hover .teamdescription{max-width: 100%;}
	
	.mobspan{display: block;}
	.mobulscroll{width: 100%; overflow-x:scroll;}
	.mobulscroll ul.nav{width: 580px;}
	.flexbox{flex-direction: column;}
	.flexbox div{width: 100%; height: auto;}
	.flexbox2col .oddreverse {
    background: transparent;
    color: #fff;
}.flexbox2col .evenreverse {
    background: #c89953 !important;
    color: #000;
}
	.flexbox2col .oddreverse p, .flexbox2col .oddreverse .bulletarrow i {
    color: #ffffff !important;
}
	.flexbox2col .evenreverse p, .flexbox2col .evenreverse .bulletarrow i {
    color: #000000 !important;
}
}

@media only screen and (max-width: 610px) {
	.mobbr{display: block;}	
	.contentwrapper h2.caption{top: 80px;}
	.mobflexdirection{flex-direction: column;}
	.mobtabscroll{width: 90vw; overflow-x:scroll;}
	.infopack{width: 850px;}
	.bannertitle{padding: 0 15px;}
	.informationpage.contentcontainer .bulletarrow{margin-left: 0px;}
}

@media only screen and (max-width: 480px) {
	h1.title{width: 60%; top: auto; padding-top: 20px;}
	h2.caption{top: auto; padding-top: 80px;}
	.logocontent{position: absolute; z-index: 1;}
	.maincontent{height: 68vh;}
	.programcontainer .d-flex{align-items: center;}
	.foundercontainer{margin: 0 auto 20px;left: 0;}
	.testimonialcontainer div p{padding-right: 20px;}
	.prgtitle{margin-left: 25%;}
	.contentwrapper h1.title{width: 65%; left: 90px;}
	.contentwrapper h2.caption{left: 20px; top: 5px;}
	.cloudtagprgmob{display: block;}
	.contentcontainer.whyocsn .container{padding: 0px;}
	.contentcontainer.whyocsn .bulletarrow{margin-left: 0px;}
	.contentfooter .col-md-4{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.teamimg{position: static;}
	.contentcontainer.testimonialcontent .col-md-4{margin: 0 auto; text-align: center;}
	.prg{margin: 0 auto;}
	
	
	.menucontainer .mainlink, .menucontainer .mainlink a{font-size: 18px;}
	.menucontainer .submenu01 a{font-size: 14px;}
	.menucontainer .row{height: calc(85vh - 100px); padding: 0 40px;}
	
	.maincontent{margin-top: 40px;}
	.headercontainer{width: 100%; background: rgba(0,0,0,0.5); height: 116px; position: relative;}
	.menucontainer{top:0;padding-top:10px;}
	.logomenu{display: none;}
	.ht480{height: 50px; display: block;}
	.footer{z-index: 3; background-color: rgba(0,0,0,1);}
	.bulletarrow{margin-left: 5px;}
	.bulletarrow.ml-0{padding-left: 10px;}
	#contentprg04 .bulletarrow.ml-0, #contentprg06 .bulletarrow.ml-0{padding-left: 20px;}
	.informationpage.contentcontainer .bulletarrow{padding-left: 20px;}
}

@media only screen and (max-width: 420px) {
	.loadingimages{width: 100vw; height: 100vw;}
	.loadimg{height: 100px; width: 100px;}
	
	h2.caption{left: 20px;}
	.prgtitle {margin-left: 18%;}
	.foundercontainer.open .founderimg{float: none; text-align: center;}
	.testimonial .item.open{height: 150px;}
	.maincontent {height: 65vh;}
	.logocontent{position: absolute; z-index: 1;}
	.teamcontainer .teamdescription{width: 100%; padding-bottom: 30px !important;}
	.teamcontainer.open .teamdescription{width: 100%;}
	.contactus.contentcontainer .col-md-5{padding-bottom: 10px;}
	.teamimg i{right: 20px;}
	.contentwrapper h1.title{padding-right: 20px;}
}

@media only screen and (max-width: 400px) {
	h1.title{width: 65%;}
	h2.caption{left: 20px;}
	.prgtitle {margin-left: 18%;}
	.contentwrapper h1.title{}
	.contentwrapper h1.title{width: 68%;}
	.mobfooterspan{display: block;}
}

@media only screen and (max-width: 380px) {
	h1.title{font-size: 22px;}
	.contentwrapper h1.title{padding-right: 0px;}
}

@media only screen and (max-width: 370px) {
	.footer p:not(.font12px){font-size: 13px;}
	.footer p.font12px{font-size: 11px;}
	.maincontent{height: 62vh;}
}


@media only screen and (max-width: 360px) {
	h1.title, .contentwrapper h1.title{font-size: 22px;}
}

@media only screen and (max-width: 320px) {
	h1.title{font-size: 20px;}
	h2.caption .typewriter{font-size: 16px;}
	.footer p:not(.font12px), .footer p.font12px{font-size: 10px;}
}