﻿.banner { width:100%; margin-bottom:80px; position:relative;}
.profileBanner { width:100%; height:400px; background-color:rgb(0,202,253); background-repeat:no-repeat; background-position:bottom center; background-size:cover; background-attachment:fixed;}
.profileAvtar { width:200px; height:200px; position:absolute; bottom:-60px; z-index:3; background:#fff; border:5px solid #fff; border-radius:12px; box-shadow:1px 1px 1px rgba(136,153,166,.15);}
.profileName { position:absolute; top:100%; left:240px; width:calc(100% - 240px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 24px/36px 'Roboto', Arial, Helvetica, sans-serif; color:#000; margin:0;}
.profileAddress { position:absolute; top:calc(100% + 36px); left:240px; font:14px 'Roboto', Arial, Helvetica, sans-serif; color:#666;}
.profileAddress span.material-icons { font-size:20px; margin-top:-2px;}
.tabbar { width:100%; height:60px; position:absolute; top:340px; left:0; background:rgba(255,255,255,0.93); border-bottom:1px solid #dce0e0;}
.tabbar .samp { margin:0; padding:0 0 0 240px;}
.tabbar .samp li { margin:0; padding:0; display:inline-block; list-style:none;}
.tabbar .samp li a { border-bottom:0 solid; display:block; height:60px; padding:10px;
color:#000; font:14px/40px 'Roboto', Arial, Helvetica, sans-serif; letter-spacing:0.02em; text-transform:uppercase; transition:color 0.15s ease-in-out 0s;}
.tabbar .samp li a:hover { color:#00b3ff;}
.tabbar .samp li a.active { color:#719769; cursor:default; border-bottom-width:4px;}
.contactInfo { text-align:right; padding-top:13px;}
.socialProfiles { display:inline-block;}
.socialProfiles a { display:inline-block; float:left; margin:5px;}
.socialProfiles a img { width:24px; height:24px;}
.socialProfiles .contactNumber { padding-right:15px; margin-right:10px; border-right:1px solid rgba(0,0,0,.1); color:#333; line-height:24px;}
.socialProfiles .contactNumber:hover { color:#00b3ff;}

.btn { font:500 14px 'Roboto', Arial, Helvetica, sans-serif; margin-top:0;text-align:center; color:#fff; border-radius:30px; padding:10px 20px; display:inline-block; text-transform:uppercase; min-width:120px; transition:all .2s; border:1px solid transparent;}
.btn:hover {  text-decoration:none; color:#1899ef;    border:1px solid #1899ef; background:#fff !important;}
.mainHeading { font:300 36px 'Roboto', Arial, Helvetica, sans-serif; margin-bottom:15px; text-align:center; display:inline-block; width:100%;}
.subHeading { font:300 30px 'Roboto', Arial, Helvetica, sans-serif;}
.title { font:500 24px 'Roboto', Arial, Helvetica, sans-serif; margin-top:0; margin-bottom:10px;}
.subTitle { font:18px 'Roboto', Arial, Helvetica, sans-serif; margin-top:0; margin-bottom:10px;}
.pageContent { color:#333; font:16px/24px 'Roboto', Arial, Helvetica, sans-serif;}

.eventBox { display:inline-block; width:100%; max-width:800px; margin:10px auto; text-align:left; box-shadow:0px 1px 4px rgba(0,0,0,.38);}
.eventBox .eventImg { width:240px; height:160px; display:inline-block; float:left; overflow:hidden;}
.eventBox .eventImg img { min-width:100%; min-height:100%;}
.eventBox .eventContent { display:inline-block; width:calc(100% - 240px); float:left; padding:15px; background:#fff;}
.eventBox .eventContent .title a { color:#000; font-size:22px; font-weight:500;}
.eventBox .date { font:500 16px 'Roboto', Arial, Helvetica; color:#1899ef; margin-bottom:10px; text-transform:uppercase;}
.eventBox .date img,
.eventBox .place img { width:21px; display:inline-block; float:left; margin-right:10px;}
.eventBox .place { font:500 16px 'Roboto', Arial, Helvetica; color:#444;}
.eventBox .btn { background:#1899ef; float:right;}
.noEventFound { width:100%; max-width:800px; display:inline-block; background:#e7e7e7;}

.orgEventTab md-tabs-canvas { text-align:center;}
.orgEventTab md-tabs-canvas md-pagination-wrapper { display:inline-block; position:relative; left:auto;}
.orgEventTab md-content { width:100%; display:inline-block; padding:20px 10px; text-align:center;}

.pagination { width:100%; display:inline-block; text-align:center; padding:15px;}
.pagination a { width:32px; height:32px; display:inline-block; text-align:center; color:#333; font:15px/32px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; border-radius:50%; cursor:pointer;}
.pagination a:hover { color:#0bf;}
.pagination a.active { background:#0bf; color:#fff; cursor:default;}
.pagination a.disabled { opacity:.2; cursor:default;}

#testimonials { padding:20px 0 50px; color:#000; background:#f5f5f5; position:relative; text-align:center;}
#testimonials .pageContent { text-align:center; color:#444;}
.personImg { display:inline-block; margin-top:20px;}
.personImg img { width:120px !important; height:120px; border-radius:50%; display:inline-block;}
.quotes { display: inline-block; margin-bottom:15px; text-align:center; padding:15px 50px 0 50px;}
.quotes .quotesName { font:500 18px 'Roboto', Arial, Helvetica, sans-serif; color:#000; text-align:center; margin-bottom:0; margin-top:15px;}
.quotes .quotesPost { font:16px 'Roboto', Arial, Helvetica, sans-serif; color:#888; text-align:center; margin-top:0;}
.moreTestimonials { display:inline-block; color:#1899ef; font:14px 'Roboto', Arial, Helvetica, sans-serif; border:1px solid #1899ef; border-radius:15px; padding:5px 15px; margin-top:15px; transition:all .2s;}
.moreTestimonials:hover { color:#fff; background:#1899ef;}

#testimonialCarousel, #testimonialCarouselBB { text-align:center; display:inline-block; width:100%;}
#testimonialCarousel .owl-dots, #testimonialCarouselBB .owl-dots, #testimonialsBox .owl-dots { text-align:center; width:100%;}
#testimonialCarousel .owl-dot, #testimonialCarouselBB .owl-dot, #testimonialsBox .owl-dot { width:18px; height:18px; display:inline-block; margin:3px; background:rgba(0,0,0,.1); transition:all 500ms ease; border-radius:50%;}
#testimonialCarousel .owl-dot:hover, #testimonialCarouselBB .owl-dot:hover, #testimonialsBox .owl-dot:hover { background:#1899ef; border:none;}
#testimonialCarousel .owl-dot.active, #testimonialCarouselBB .owl-dot.active, #testimonialsBox .owl-dot.active { background:#1899ef; border:none;}

#sponsors { background:#f5f5f5; padding:20px 0;}
.sponsorLogo { display:inline-block; width:100%; padding:15px;}
.sponsorLogo img { width:100%;}
#sponsors .owl-controls { width:100%; position:absolute; top:calc(50% - 7px);}
#sponsors .owl-prev { position:absolute; left:-15px;}
#sponsors .owl-next { position:absolute; right:-15px;}
#sponsors .owl-prev:hover,
#sponsors .owl-next:hover { background:rgba(0,0,0,.05); color:#1899ef;}

.orgFooter { padding:10px 0; color:#000; background:#e4e4e4;}
.orgFooter .btn { background:#1899ef;}
.orgFooter .pwrdBy { float:right; font:400 14px 'Roboto', Arial, Helvetica, sans-serif; color:#444; line-height:38px;}
.orgFooter .pwrdBy img { height:10px; display:inline-block;}
.orgFooter .pageContent { margin:0; line-height:38px; font-size:18px;}
/****************************************************************************************************/
@media screen and (min-width:768px) and (max-width:960px)
{
  .profileBanner { height:300px;}
  .orgMenu { width:100%;}
  .tabbar { height:80px; top:220px;}
  .tabbar .samp li a { height:auto; line-height:normal;}
  .contactInfo { width:100%; padding-top:0; padding-left:240px !important; text-align:initial;}
}
@media screen and (min-width:0) and (max-width:768px)
{
  .banner { margin-bottom:0;}
  .profileBanner { height:200px;}
  .profileAvtar { width:100px; height:100px; margin:15px auto 0 auto; position:relative; bottom:initial;}
  .profileName, .profileAddress { width:auto; position:relative; top:initial; left:initial; white-space:initial; text-align:center;}
  .tabbar { height:80px; top:120px; text-align:center;}
  .tabbar .samp { padding:0;}
  .tabbar .samp li a { font-size:13px; line-height:22px; height:37px; padding:10px 5px;}
  .contactInfo { text-align:center; padding-top:0; padding-left:0 !important;}
  .orgFooter { text-align:center;}
  .orgFooter .pwrdBy { float:none;}
}
@media screen and (min-width:0) and (max-width:480px)
{
  .eventBox { width:calc(100% - 40px);}
  .eventBox .eventImg { display:inline-block; width:100%; height:auto;}
  .eventBox .eventContent,
  .eventBox .eventImg img { width:100%;}
  .eventBox .eventContent .title a { font-size:20px;}
  .eventBox .date,
  .eventBox .place { font-size:14px;}
  .eventBox .btn { margin-top:15px; float:none;}
}