body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x:hidden;
}

html{
  scroll-behavior: smooth;
}

code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}


.eMedium, b {
    font-family: "Everett-Medium"
}

    .eMediumItalic, b + i, i + b {
        font-family: "Everett-Medium-Italic"
    }

.eRegular {
    font-family: "Everett-Regular"
}

.eRegularItalic, i {
    font-family: "Everett-Regular-Italic"
}

.uppercase {
    text-transform: uppercase
}

.white {
    color: #faf5f3
}

.sable {
    color: #e7e1d8
}

.blue {
    color: #0032ff
}

.black {
    color: #000
}

.bgWhite {
    background-color: #faf5f3
}

.bgSable {
    background-color: #e7e1d8
}

.bgBlue {
    background-color: #0032ff
}

.bgBlack {
    background-color: #000
}

.border-radius {
    border-radius: 50px
}

.border-radius-small {
    border-radius: 10px
}

.hr {
    border: thin solid #0032ff
}

.large {
    font-size: 48px
}

@media (max-width:599px) {
    .large {
        font-size: 44px
    }
}

.mediumLarge {
    font-size: 30px
}

.mediumSmall {
    font-size: 18px
}

.medium {
    font-size: 20px;
    line-height: 30px
}

.small {
    font-size: 14px
}

.smallish {
    font-size: 16px
}

.container {
    max-width: 1320px;
    margin: 0 auto
}

@media (max-width:1800px) {
    .container {
        margin: 0 220px
    }
}

@media (max-width:1200px) {
    .container {
        max-width: 1140px;
        margin: 0 160px
    }
}

@media (max-width:1024px) {
    .container {
        margin: 0 80px
    }
}

@media (max-width:900px) {
    .container {
        margin: 0 40px
    }
}

.large-padding-vertical {
    padding: 100px 0
}

.medium-padding-vertical {
    padding: 50px 0
}

a {
    color: #black;
    text-decoration: none
}

.panel {
    margin-bottom: 100px
}

    .panel .overlay {
        position: absolute;
        left: 0
    }

.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

    .image-container img {
        width: 100%
    }

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 25px 25px;
    gap: 25px 25px;
    grid-template-areas: ". . ."
}

@media (max-width:599px) {
    .grid-3 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 25px 25px;
        gap: 25px 25px;
        grid-template-areas: "."
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 25px 25px;
    gap: 25px 25px;
    grid-template-areas: ". ."
}

@media (max-width:599px) {
    .grid-2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 25px 25px;
        gap: 25px 25px;
        grid-template-areas: "."
    }
}

.agenda {
    margin-top: 100px
}

.agenda-list {
    display: flex
}

    .agenda-list p {
        min-width: 150px
    }

.event {
    margin-bottom: 48px
}

    .event h3 {
        margin-bottom: 14px
    }

.langSwitch {
    position: fixed;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 10
}

.bt-noir {
    background-color: #000;
    font-size: 20px;
    padding: 6px
}

.bt-noir, .menuToggle button {
    border: 0;
    color: #faf5f3;
    font-weight: 700;
    mix-blend-mode: hard-light
}

.menuToggle button {
    background-color: transparent;
    font-size: 28px;
    position: fixed;
    left: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 9999999
}

.menuToggle .menuOpen {
    left: 28vw;
    top: 4vw;
    mix-blend-mode: difference
}

.blur {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.sidebar {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    width: 0;
    background-color: #faf5f3;
    min-height: 80vh;
    position: fixed;
    -webkit-transform: scale(0);
    transform: scale(0);
    top: 40px;
    left: 40px;
    opacity: 0;
    padding: 30px 60px;
    border-radius: 50px;
    transition: all .2s ease
}

    .sidebar .open {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        width: 30vw;
        min-height: 80vh
    }

.message {
    opacity: 0;
    position: fixed;
    bottom: -100%;
    right: 30px;
    transition: all .3s ease;
    overflow: hidden
}

    .message .innerMessage {
        width: 30vw;
        background-color: #faf5f3;
        border-radius: 20px;
        padding: 0 40px;
        overflow-y: scroll
    }

@media (max-width:1800px) {
    .message .innerMessage {
        width: 25vw
    }
}

@media (max-width:1200px) {
    .message .innerMessage {
        width: 40vw
    }
}

@media (max-width:1024px) {
    .message .innerMessage {
        width: 60vw
    }
}

@media (max-width:900px) {
    .message .innerMessage {
        width: calc(100vw - 160px)
    }
}

.message.open {
    opacity: 1;
    bottom: 30px;
    height: auto;
    overflow: visible;
    transition: all .3s ease;
    z-index: 2
}

    .message.open .innerMessage {
        max-height: calc(100vh - 160px);
        padding: 20px 50px;
        box-shadow: 3px 3px 15px -8px #0032ff
    }

.hashtag-notok {
    display: inline-block
}

#moreInfoComponent {
    overflow: visible
}

    #moreInfoComponent span {
        cursor: pointer;
        background-color: #faf5f3;
        color: #0032ff;
        padding: 10px;
        border-radius: 10px
    }

    #moreInfoComponent button {
        position: absolute;
        right: -15px;
        top: -15px;
        width: 40px;
        cursor: pointer;
        z-index: 9999999
    }

.sidebarContainer ul {
    list-style: none;
    padding-left: 0
}

    .sidebarContainer ul li {
        font-family: "Everett-Regular";
        font-size: 24px;
        line-height: 28px;
        padding: 30px 0;
        border-bottom: 1px solid #0032ff
    }

.buttonBlue {
    background-color: #0032ff;
    color: #faf5f3;
    font-family: "Everett-Medium";
    border: 0;
    border-radius: 15px;
    padding: 10px;
    font-size: 14px
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.34901960784313724);
    position: fixed;
    transition: all .1s ease
}


.card {
    width: 100vw;
    border-radius: 50px
}

    .card.intro {
        border-radius: 0;
        padding-top: 80px
    }

    .card:not(.intro) {
        margin-top: -100px
    }

    .card:not(.footer) {
        padding-bottom: 200px
    }

    .card.last {
        padding-bottom: 20px
    }

.video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 8px
}

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px
    }

.message-video {
    opacity: 0;
    position: fixed;
    width: 60vw;
    left: 10vw;
    top: 10vh;
    transition: all .3s ease;
    overflow: hidden;
    z-index: 100
}

@media (max-width:900px) {
    .message-video {
        width: 100vw
    }

        .message-video .moreInfoContainer-video {
            width: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
        }
}

.message-video .innerMessage-video {
    background-color: #faf5f3;
    border-radius: 20px;
    padding: 0 40px
}

@media (max-width:900px) {
    .message-video .innerMessage-video {
        height: 100vh;
        max-height: 100vh;
        background-color: hsla(0,0%,100%,.8);
        border-radius: 0
    }
}

.message-video.open {
    opacity: 1;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: auto;
    overflow: visible;
    transition: all .3s ease
}

@media (max-width:900px) {
    .message-video.open .bt-noir {
        top: 10px !important;
        right: 10px !important
    }
}

.message-video.open .innerMessage-video {
    max-height: calc(100vh - 160px);
    padding: 1vw;
    box-shadow: 3px 3px 15px -8px #0032ff
}

@media (max-width:900px) {
    .message-video.open .innerMessage-video {
        max-height: 100vh
    }
}

.footer h2 {
    color: #e7e1d8
}

.email-div {
    border: 1px solid #e7e1d8;
    background-color: #0032ff;
    border-radius: 10px;
    padding: 10px
}

.email-div, input {
    display: inline-block
}

input {
    width: 20vw;
    height: 20px;
    padding: 5px;
    outline: none;
    border: 0;
    background: #0032ff;
    font-size: 14px;
    font-family: "Everett-Regular"
}

input, label {
    color: #e7e1d8
}

label {
    padding: 0 16px
}

button {
    position: relative;
    background-color: #e7e1d8;
    color: #000;
    border: 0;
    border-radius: 5px;
    padding: 6px
}

.notFound {
    height: 100vh;
    padding: 0;
    margin: -16 px 0 0;
    display: flex;
    justify-content: center;
    align-items: center
}

    .notFound p {
        text-align: center;
        padding: 20px
    }

.footerImage {
    width: 200px
}
/*# css style added by Rashadul - March 08,2022 */
/*# start : css style for horizontal-scrollable */
.row {
    /*margin-right: auto;
    margin-left: auto;*/
}
.horizontal-scrollable > .horizontal-scrollable-row {
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}

    .horizontal-scrollable > .horizontal-scrollable-row > .col-md-4 {
        display: inline-block;
        float: none;
    }

    .participants .horizontal-scrollable .profile-picture, .horizontal-scrollable .video-box .banner-thumbnail {
        position: relative;
    }

    .participants .horizontal-scrollable .profile-picture-box, .horizontal-scrollable .video-box{
        padding-bottom:0;
    }



.sliderScroll_outer {
    margin-top: 30px;
    width: 87vw;
    background: #B0ABA5;
}

.sliderScroll {
    width: 5vw;
    height: 1px;
    background: #000000;
}

    .sliderScroll:hover {
        cursor: pointer
    }
/*# end : css style for horizontal-scrollable */

/*# start : css style for participants-section */

.profile-picture, .banner-thumbnail {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0px;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

.participant-picture-container{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:100%;
}

.video-thumbnail-container{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56%;
}

.profile-picture-box {
  width: 22.22vw;
height: 22.22vw;
white-space: normal;
}

.participants .profile-picture-box {
  height: auto;
}

.profile-picture-box-content {
    display: table-cell;
}

.card-linebreak {
    height: 10px;
}

.participants-section {
    background: #E7E1D8;
    color: black;
    padding-top: 1px;
    padding-bottom: 50px;
}

.participants,.videos,.articles {
    margin-left: 50px;
}

.custom-modal-header {
    padding: 0px;
    border-bottom: 0px;
}

.custom-close-button {
    padding-right: 10px !important;
    padding-top: 10px !important;
    font-size: 24px;
}

.name {
    color: black;
}

.profile-picture-box-content > a:hover {
    text-decoration: none;
}
/*# end : css style for participants-section */

.content-container {
    margin-left: 50px;
    margin-right: 50px;
}
/*# start : css style for here-section */
.blue-bg-hero-section {
    background: #0132FF;
    color: #E7E1D8;
    padding-top: 50px;
    padding-bottom: 50px;
}
/*# end : css style for here-section */
/*# start : css style for newsletter-subscription-section */
.newsletter-subscription-section-bg {
    background: #0132FF;
}

.newsletter-subscription-section {
    background: white;
    color: black;
    padding-top: 50px;
    padding-bottom: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
/*# end : css style for newsletter-subscription-section */
/*# start : css style for current-event-details */
.current-event-details {
    background: #E7E1D8;
    color: black;
    padding-top: 50px;
    padding-bottom: 10px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
/*# end : css style for current-event-details */
/*# start : card css style for articles */
 .text-block-title > a{
            position: absolute;
            /*top: 20px;*/
            width: 15vw;
            /*left: 30px;*/
            background-color: #E2D8CE;
            color: #0132FF;
            padding: 10px 10px;
            border-radius: 10px;
            white-space: normal;
            max-width: calc(100% - 60px);
            margin-left: 30px;
            margin-top: 30px;
            width: auto;
            display: block;
        }
        .text-block-title > a:hover{
            text-decoration:none;
        }
        .text-block-legend,.text-block-date {
            position: absolute;
            bottom: 20px;
            /*width: 20vw;*/
            left: 30px;
          padding: 0px 10px;
          white-space: normal;
          color: #faf5f2;
          background-color: #0032FF;
          border-radius: 10px;
          width: auto;
    max-width:calc(100% - 60px);
        }
        .text-block-legend h5,.text-block-date h5{
              display: inline-block;
        }
        .card-box {
            width:100%;
            height:0px;
            padding-bottom:100%;
            overflow:hidden;
            position: relative;
        }
/*# end : card css style for articles */
/*# start : css style for footer-section */
.footer-section-bg {
    background: #FAF5F3;
}

.footer-section {
    background: black;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
/*# end : css style for footer-section */


/*# start : css style for video-section */
.video-content{

}

.video img {
    width: 100%;
    height: auto;
}
.video-box> h4 {
   display: flex;
   padding-top:10px;
   padding-bottom:50px;
}
.video-box {
    width: 30vw;
	white-space: normal;
}
.video-content>h4{
	height:10vh;
}
    .video-box:hover {
        cursor: pointer
    }
	#vide-modal>.modal-dialog {
		flex-direction: column;
		align-items: normal;
	}
	#vide-modal>.modal-dialog>.modal-content>.video-modal-body{
		margin-top:0px;
		Display: block;
        align-items: center;
	}


	}

/*# end : css style for video-section */
@media (min-width: 768px) and (max-width: 1024px) {

    .sliderScroll_outer {
        display: none;
    }

    .horizontal-scrollable > .horizontal-scrollable-row::-webkit-scrollbar {
        width: 20px;
        height: 1px;
        background-color: #B0ABA5;
    }
	 .video-box,.card-box,.profile-picture-box {
			width: 30vw;
	}

    .horizontal-scrollable > .horizontal-scrollable-row::-webkit-scrollbar-thumb {
        background: #000000;
    }

    .horizontal-scrollable > .horizontal-scrollable-row {
        overflow-x: visible;
    }
	.text-block-legend,.text-block-date
	{
        width: 25vw;
		bottom:5px;
		padding: 10px 10px;
    }
	.text-block-title > a{
		 width: 20vw;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
  .text-block-title > a{
             max-width: calc(100% - 30px);
             margin-left: 15px;
             margin-top: 15px;
         }
         .text-block-legend,.text-block-date {
             left: 15px;
         }

         .text-block-title h4{
           font-size:16px;
         }
}

@media only screen and (max-width: 767px) {
    .sliderScroll_outer {
        display: none;
    }

    .video-box,.card-box,.profile-picture-box   {
        width: 62.22vw;
        padding-bottom: 62.22vw;
    }

    .horizontal-scrollable > .horizontal-scrollable-row::-webkit-scrollbar {
        width: 20px;
        height: 1px;
        background-color: #B0ABA5;
    }

    .horizontal-scrollable > .horizontal-scrollable-row::-webkit-scrollbar-thumb {
        background: #000000;
    }

    .horizontal-scrollable > .horizontal-scrollable-row {
        overflow-x: visible;
    }
	.text-block-legend,.text-block-date
	{
		/*width: 50vw;
		bottom:5px;*/
		padding: 0px 10px;
    }
	.text-block-title > a{
		 /*top:10px;
		 width: 45vw;*/
	}
	.participants,.videos,.articles {
		 margin-left: 0px;
	}

  .text-block-title > a{
             max-width: calc(100% - 30px);
             margin-left: 15px;
             margin-top: 15px;
         }
         .text-block-legend,.text-block-date {
             left: 15px;
         }
}

@media only screen and (max-width: 400px) {
.video-box,.card-box,.profile-picture-box   {
    width: 80vw;
    padding-bottom: 80vw;
}
}