* { box-sizing: border-box; }

.flex-row { display: flex; align-items: center; flex-wrap: wrap; }
.flex-column { display: flex; flex-flow: column; flex-wrap: wrap; }
.flex { flex: 1; }

:root {
  scroll-behavior: smooth;
  --mobile-threshold: 1270px;
  --header-height: 204px;
}

html {width:100%}

body {
  font-family: 'Ubuntu', sans-serif; 
  font-size: 18px;
  font-weight: 300;
  color: #666666;
  margin: 0;
  width:100%
}

[id] { scroll-margin-top: var(--header-height); }
.container{ max-width: 1600px; margin: 0 auto; padding: 1em; }
section{padding:3em 0; align-items:center;}
section:nth-child(even){background:#ebeced}

a { text-decoration: none; color: inherit; color:#5bc3be}
p:not(header p){line-height:1.5em; text-align:center}
i {margin-right:20px}
.lang-selector {text-align:right}

h1 { font-weight:600; font-size:2em; color:#666666; text-align:center; margin-bottom:2em; margin-top:2em}
h1::after { content: ''; height:3px; background:#5bc3be; width:150px; display:block; margin:15px auto; }
h2 { color: #666666; font-size: 1.8em; font-weight: 500; }
h3 { color:#5bc3be; font-size: 1.5em; font-weight: 400; margin-bottom: 0; }
h4 { font-size: 1.1em; margin: 0; font-weight:200; }

/* .video-intro {background:#1b1c1c} */
.video-intro iframe { max-width:100%; }

[syn-carousel] > div img {width:100%}

.headline {padding:.5em 1em}
.date{max-width:350px; text-align:left; min-width:110px; display:inline-block; text-align: center;}
.date h3 {color:#5bc3be; font-weight: 600; text-align:center}
.date .athines img {width:110px}
.headline .logo {text-align:center}
.headline .logo img{height:150px}
.headline .social{text-align:right; max-width:350px}
.headline .social img {height:35px; margin-left:20px}

.card {width:350px; max-width:90%}
.card img { width: 100%; transition: scale .5s linear; }
.card:hover img { scale: .9; }

.intro-q h1 {margin-bottom:0}
.intro-q .flex {min-width:300px}
.intro-q .flex p {font-size:1.2em}
.intro-row {align-items: flex-start; gap:100px;}
.syn-small .intro-row {gap:20px}
.intro-date:after{display:none;}
.quote .intro-date { color:#5bc3be; font-size:2.5em}
.syn-small .quote .intro-date {font-size:1.8em}

header { height: var(--header-height); position:sticky; top:0; z-index: 100; width:100%; 
  background:#1b1c1c; transition: background-color .2s; }
header > .menu > nav > ul {border-top:1px solid white}
header .date h3 {text-align:left}

#landing { padding: 0; background-color: #1b1c1c; }
#landing [syn-carousel] { height: 700px; }
.carousel-control { padding: 1rem; }
.carousel-control img { max-height: 50px; }
.syn-small #landing [syn-carousel] { height: 400px; }
.syn-small .carousel-control { display: none; }

[syn-carousel] > div { position: relative; }
[syn-carousel] > div img { object-fit: cover; }
[syn-carousel] > div.image-potition-right img { object-position: right; }
.carousel-overlay { position: absolute; inset: 0; background-color: #0006; padding-left: 10%; padding-top: 7%; color: white; }
.car-text { width: 400px; max-width: 80%; padding: 2em 0; }
.car-text h2 { color: inherit; font-weight: bold; }
.car-text h4 {font-weight: 300; }
[syn-carousel] .more-btn { display:block; cursor: pointer; font-weight: 300; padding: 1em 5em; max-width: max-content;
    background: #5bc3be; color: #fff; font-size: 12px; border: 2px solid transparent; transition: color .3s, background-color .3s; }
.more-btn:hover { background-color: #fff; border-color: #5bc3be; color: #5bc3be; }

.syn-small .car-text h2{ font-size: 1.6em; }
.syn-small .car-text h4{ font-size: 1.2em; }


/* ------------------------------- Countdown ------------------------------- */
#countdown h3 {border-radius: 100px; background:rgba(255, 255, 255, .5); color:#1c194e; border:2px solid #1c194e; padding:0; margin:0; font-weight: 400; 
  font-size:50px; width:100px; height:100px; text-align:center; padding-top:10px; margin:0 10px}

.syn-small #countdown h3{ width:50px; height:50px; font-size:20px; padding-top:5px; margin:0}
.syn-small #countdown h2 {font-size:20px}
.syn-small #countdown-days:after{content:'d';font-size:12px}
.syn-small #countdown-hours:after{content:'h';font-size:12px}
.syn-small #countdown-minutes:after{content:'m';font-size:12px}
.syn-small #countdown-seconds:after{content:'s';font-size:12px}

#countdown-days:after{content:'days'; display:block; color:#333; font-weight:100; font-size:16px}
#countdown-hours:after{content:'hrs'; display:block; color:#333; font-weight:100; font-size:16px}
#countdown-minutes:after{content:'min'; display:block; color:#333; font-weight:100; font-size:16px}
#countdown-seconds:after{content:'sec'; display:block; color:#333; font-weight:100; font-size:16px}
#countdown { display: grid; text-align: center; justify-content: center; padding-bottom: 2rem; }

/* ------------------------------- Navigation ------------------------------- */

nav { display: flex; justify-content: center; background: #1b1c1c; text-align: center; }
nav ul { background: #1b1c1c; color: white; }
nav > ul a { display: block; color: inherit; padding: .5rem 1rem; cursor: pointer; transition: background ease .5s; }
.syn-large nav > ul a { font-size: 14px; font-weight: 100; }
nav > ul a:hover { background: #5bc3be; }
.syn-large nav > ul > li:has(a.selected) { background: #5bc3be99; }
.syn-large nav li:has(>a.selected) { background: #5bc3be99; }
.arrow-down{ border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid white; 
  position: relative; top: 12px; left: 5px;}
nav ul ul > li { text-align: left; }
nav ul ul > li a { padding: .7rem 1rem; }


.register-btn {background:#5bc3be; color:white; position:absolute; right: 0; height:32px; padding:0 1em; transition:all .3s linear}
.register-btn a {display:block; height:100%; color:white; font-weight: 500; padding-top:5px; transition:all .3s linear}
.register-btn:hover {background:white}
.register-btn:hover a {color:black}

/* Style the video: 100% width and height to cover the entire window */
#myVideo { width: 100%; height:100vh; overflow: hidden; background-image: url(../videos/aff25-video-poster.66b1b8.jpg); background-size: cover; background-repeat: no-repeat;}
#myVideo video{width:100%; margin:0 auto; }
section#myVideo {padding:0; display:flex}
.overlay-home {position:absolute; top:0; left:0; width:100%; background:rgba(0, 0, 0, .2); height:100%}
.overlay-home header {box-shadow: none;}
.overlay-home nav, .overlay-home nav ul {background:none}
#myVideo > div {margin:0 auto}

/* ========== VIDEO FOR SMALL MOBILES ================= */
.syn-tablet #myVideo, .syn-small #myVideo{width:100%}
.syn-tablet .video-overlay, .syn-small .video-overlay {top:0}
.syn-small .logo-b{margin-top:1em; padding:0; text-align:left}


/* ========== INSTRUCTORS HORIZONTAL SCROLLING ================= */
.instructors-scroller > [syn-scroller-container] { gap: 2rem; }
.instructors-scroller .card { min-width: 250px; height: 450px; overflow: hidden; }
.instructors-scroller h3 { font-size: 1.1em; margin-bottom: 0; }

.button{background: #5bc3be; color:white; margin:0 auto; width:250px; text-align:center; padding:15px; font-weight:500; cursor:pointer; transition: all .5s linear; border:2px solid white}
.button a{color:white; transition: all .5s linear}
.button:hover {background:white; border-color:#5bc3be}
.button:hover a{color:#5bc3be}

#instructors h2 {text-align:center; margin:2em}
.instructors h2 {text-align:center}

/* ========== INSTRUCTORS PAGE ================= */
.instructors {background:#1b1c1c;}
.instructors .square {height:550px}
.instructors .flex-row{justify-content:center}
.instructors #instructor-list { gap: 1rem; align-items:flex-start}
.instructors #instructor-list h3 { margin-top: 1rem; }
.heading p{font-size:1.2em;}
.heading h1, .heading p, .instructors h4{color:white}
.instructors footer {border-top:1px solid #5bc3be; margin-top:100px}
.instructors header{border-bottom:1px solid #5bc3be}
.filters p {margin:20px; cursor:pointer}

/* ========== INSTRUCTOR PAGE ================= */
.instructor .heading {background:#1b1c1c;}
.instructor.sessions .heading img{width:250px}
.instructor.sessions .content img {width:300px; max-width:90%}
.instructor h1{text-align:center; margin:0 15px}
.instructor h1::after{margin-top:15px}
.instructor h3:not(.instructor #ses-instructors h3, .date h3){color:white;  margin:15px; text-align:center}
/* .instructor h1::after{margin:0} */
.instructor .heading .flex {padding:1em}
.session-description { overflow: hidden; max-height: 0; transition: max-height .5s, border 1s; }
.session-description p { text-align:left; margin:0; padding: 1rem 0; }
.session[data-open="view-more"] .session-description { max-height: 200px; overflow-y: auto; border-top: 1px dotted #666; border-bottom: 1px dotted #666; }
.session a[data-id="view-more"] {display:inline-block; margin-left:30px; margin-bottom:22px; cursor:pointer}
.booknow {display:inline-block; text-align:center; padding:10px 20px; background:#5bc3be; color:white; border:2px solid #5bc3be; margin-bottom:30px; margin-left:30px; cursor:pointer; font-weight:400; transition:all .2s linear}
.booknow:hover {background:white; color:#5bc3be;}
.booknow-form.form { width: 100%; max-height: 0; overflow: hidden; transition: max-height .5s; }
.session[data-open="book-seat"] .booknow-form { max-height: 120px; }
.booknow-form button {width:300px; max-width:90%}
.booknow-form .flex-row {gap:1em}
.matrix-session {background-color:#f3b020; height:60px; margin-bottom:15px}
.matrix-session img {height:50px; display:block; margin:0 auto}

.final-program .theme {text-transform: uppercase;}


.btn-nav { display: grid; grid-template-columns: 1fr 1fr; color:#5bc3be; }
.btn-nav a[href=""] { color: #bbb; pointer-events: none; }
.btn-nav > :last-child { width: 100%; text-align: right; }

#ses-instructors .flex-row{justify-content: center; gap:1em;}

/* .instructor .heading  .inst-quote{background-image: url(../imgs/quotes.png);background-size: 50px;
  background-position: top left; background-repeat: no-repeat;
  padding: 0 40px; margin: 4em auto; } */
  .inst-quote p::before{content:url(../imgs/quote.9275d1.png); display:inline-block;}
  .inst-quote p::before img{ width:50px; height:50px}
  .inst-quote p{text-align:center; padding-left:50px; font-size:2em}
  .theme-quote p{padding-left:0; margin-top:0; margin-bottom:0}

.instructor .bio {border-left:1px solid #5bc3be}
.instructor .bio p{text-align:left}
.bio a {color:#5bc3be}
.gallery {min-width:300px; flex:1; overflow:hidden}
.gallery img{min-width:300px; width:45%; margin:1%}
.gallery-container{align-items: center; gap:2rem}
.gallery-container .content {border-left:1px solid #5bc3be; padding:1rem; line-height:1.4}
.instructor.sessions .bio{border:none}
.instructor-d .gallery img{width:200px; max-width:90%; min-width:200px}



.instructor .aside-photo {width:300px; max-width:80%}
.instructor .social img, .instructor .social img {width:35px}
.instructor .social a:not(header .social a) {margin-right:15px}
.instructor .button{margin:0}

#instructor-filter .selected { color: #5bc3be; }
@media (min-width: var(--mobile-threshold)) {
  #instructor-filter { position: sticky; top: 200px; background: #1b1c1c; z-index: 1; }
}
#instructor-search { display: flex; justify-content: center; align-items: center; }
#instructor-search input { border-end-end-radius: 0; border-start-end-radius: 0; padding: 1.1rem 1rem; border-color: transparent; }
#instructor-search button { width: auto; padding: .5rem 1rem; border-end-end-radius: 10px; border-start-end-radius: 10px; }

.back-btn{background: #666666;}
.back-btn p {text-align:right !important;}
.back-btn  p a{ color:#5bc3be}


/* ========== FITNESS SESSIONS ================= */
#fitness-stages .flex-row {justify-content: center;}
.fitness-session {width:300px; max-width:90%; text-align:center; cursor:pointer; margin-bottom:3em}
.fitness-session .img {width:150px; height:150px; border-radius:150px; border:rgba(0, 0, 0, 0) 8px solid; transition: all .5s linear; margin:0 auto}
.fitness-session .img img{width:100%}
.fitness-session h3::after{content: ''; height:3px; background:#1c1a4f; width:0; display:block; margin:0 auto; transition: all .5s linear}
.fitness-session:hover h3::after{width:100px}
.fitness-session:hover .img {border-color: #5bc3be;}

.black {color:#1b1c1c}

/* ========== QUOTES ================= */
section.quote {background: #1b1c1c; }
.quote h1 {color:white}
.quote p{font-size:1.5em; text-align:center; color:white}
.quote p span {font-size:1.3em; color:#5bc3be}

/* ========== SPONSORS ================= */
#sponsors {background:white}
#sponsors .flex-row {justify-content: center; gap:30px}
.sponsor{min-width:200px; max-width:250px; flex:1; margin:30px 20px; align-items: center;}
.sponsor a img {max-width:90%; width:auto; max-height:80px; margin:0 auto; display:block}
.sponsor-sm a img {max-height:50px}
#sponsors h3 {text-align:center; margin-top:60px}
.auspices img{width:200px; max-width:90%; margin:0 30px}


/* ========== ABOUT AFF ================= */
.background-photo {width:100%; height:600px; background-size:cover; background-repeat: no-repeat; background-position:center }
#athines-by-the-sea {background-image: url(../imgs/akti-vouliagmeni-photo-new.6a7e61.jpg)}
#background-hours { background-image: url(../imgs/aff-trainers.5ecbd2.jpg); position:relative}
#fitness {background-image: url(../imgs/fitness-stages-new.85f0b1.jpg); background-position:bottom center}
#program-heading {background-image: url(../imgs/final-program.9ca2c2.jpg)}
#about-us {background-image: url(../imgs/about-us.cf422a.jpg)}

#sponsors-heading {background-image: url(../imgs/sponsors-hero-img-25.a81b90.jpg); background-position: left;}
.syn-phone #sponsors-heading{background-position-x: -80px;}

#register-heading {background-image: url(../imgs/registration.43f0db.jpg)}
#press-heading {background-image: url(../imgs/press-releases-hero.0b2055.jpg); background-position:right}
#brand-heading {background-image: url(../imgs/photo-akti-2.e1451b.jpg); background-position:top center}
#blog-heading {background-image: url(../imgs/photo-akti-3.ce6455.jpg)}

.about-aff .aside-text ul{padding:0; list-style: none;}
.about-aff section a { color: #5bc3be; }

.overlay {width:100%; height:600px; position:absolute; top:0; left:0; background:rgba(0, 0, 0, .6); padding:4em 0}
#opening-hours{padding:0 }
#opening-hours h1 {color:white}
#opening-hours .flex-row {justify-content: center;}
#opening-hours .square {width:300px; max-width:90%; height:200px; background:rgba(255, 255, 255, .3); padding:2em}
#opening-hours .square h3, #opening-hours .square h2 {text-align:center; color:white; margin:0}
#opening-hours .square h1 {color:#5bc3be}
#opening-hours .square h1::after{background:white}

#athines-by-the-sea img {width:250px; background:rgba(255, 255, 255, .8); padding:1em; display:block; margin:0 auto}
.map iframe {width:800px; max-width:100%}
.aside-text {flex:1; max-width:90%; padding:2em; border-left:2px solid #666666; margin-left:2em}
.aside-text h3, .aside-text h4{margin:0}
.aside-text p { text-align:left;}
.aside-text ul {line-height:2em; padding:1em}
.aside-photo {width:1000px; max-width:100%; overflow:hidden}
.aside-photo img{width:100%}


/* ========== FINAL PROGRAM ================= */

.final-program h2 { text-align:center; background:#5bc3be; color:white; padding:1em 0; }
.final-program h2:not(:has(~ .session:not([hidden]))) { display: none; }
.program-filters { text-align: center; }
@media (min-width: var(--mobile-threshold)) {
  .program-filters { position: sticky; top: 200px; background: white; }
}

.program-filters a{display:inline-block; padding:0 30px; color:#1c194e}

.session { margin-bottom: 1rem; }
.session:nth-child(even){background:#ebeced}
.session:nth-child(odd){background:#d6d6d6}
.stage{width:350px; max-width:100%}
.time {margin:0; padding:0;}
.stage, .theme, .time, .theme-instruct {text-align:left; padding-left:20px}
.theme {font-size:1.5em; margin:0; margin-bottom:1em}
.stage{font-size:1.2em}
.session .instructor-dets {margin-left:5px}
.session img[alt="arrow down"] { height: .8rem; transition: transform .5s; }
.session[data-open="view-more"] img[alt="arrow down"] { transform: rotate(180deg); }

h3.time {color:#666666; text-decoration:underline; text-decoration-color: #5bc3be;}
.theme::before{ content:'\25BA'; color:#5bc3be; display:inline-block; margin-right:10px}
.theme-instruct {margin:15px; margin-left:0}
.theme-instruct .img-wrapper {width:60px; height:60px; border-radius: 60px; overflow: hidden;}
.theme-instruct img {width:100%}
.theme-instruct div p {margin:0;}
.theme-instruct a{color:#5bc3be; font-weight:500}

.session-logo{height:50px; display:inline-block; margin-left:30px; margin-bottom:30px}

/* ========== SPONSORSHIP OPPORTUNITIES ================= */

/* .sponsorship-opportunities section:nth-child(odd){background:#ebeced} */
.sponsorship-opportunities section:nth-child(even):not(section.quote){background:white}
.sponsorship-opportunities h1 {margin-bottom:0}

/* form */
.form{box-shadow:  0 5px 10px rgb(0 0 0 / 15%); width:750px; max-width:100%; margin:0 auto}
form {max-width:100%; margin:0 auto;  }
.request-wrapper{background:white; border-radius:10px; padding:2em; min-height:100px; text-align:center}
form i:not(button i){color:grey; position:absolute; top:18px; right:15px; background:white}
input, select, button, textarea{padding:.5em; font-size:.8em; color:grey; border-radius:10px; outline:none; font-family: 'Ubuntu', sans-serif; font-size:14px;
width:280px; max-width:100%; margin:.5em 0; height:40px}
.form a {color:#5bc3be; text-decoration: none;}
button p{padding:0; margin:0; text-align:center; color:white; width:100%}
button i{color:white}
form button{background:#5bc3be; text-align:center; width:95%; cursor:pointer; border:none; border-radius:0}
form button p{text-align:center; font-size:1em}
form p{text-align:left; font-size:.8em; font-weight:300; margin:0; padding:0 1.3em;}
.form, .details{ margin-top:1em;}
.message{width:100%; justify-content: center;}
.message textarea{width:99%; height:150px}
.positioning{text-align:center; position:relative}
.form > form .captcha-container { text-align: center; font-size: .8rem; margin-top: .5rem; }
.form > form [name="captcha-value"] { font-weight: bold; font-size: larger; padding: 0 .5rem; width: 6rem; text-align: center; border: none; text-decoration: line-through; font-style: italic; background: khaki; }
#form-posted {text-align:right; padding:.5em}
.captcha-container p {text-align:center; font-size:16px; margin-top:30px; font-weight:300}
.captcha-container input {margin:20px auto; text-align: center;}
.form-posted { padding: .1rem; font-size: 1.4rem; font-weight: 400; }
.form-posted > * { margin: .5rem 0; }
.form-error { text-align: center; color: darkred; font-weight: 600; padding: 1rem; }
.final-program .form-posted { text-align: center; }
.sponsorship-opportunities-program .form-posted { text-align: center; }

.checkbox {align-items: center; padding:0 20px}
.checkbox input {width:20px}
.checkbox label {flex:1; text-align:left; font-size:14px; padding-left:20px}

/* ========== EVENTS ================= */
.events .background-photo{background-position:center top}
#dj-trixx {background-image: url(../imgs/dj/dj-trixx.b58cbd.jpg)}
#dj-agent-greg{background-image: url(../imgs/dj/dj-agent-greg.b3fec2.jpg)}
#dj-lefki{background-image: url(../imgs/dj/dj-lefki.ed6719.jpg)}

.dj-card{height:calc(100vh - 150px); min-width:300px; position:relative; justify-content: end; padding-bottom:100px}
.dj-card .overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:#5bc3be; opacity:.35}
.dj-card .square{margin-top:3em;background:rgba(0, 0, 0, .5); border:3px solid white; width:200px; height:300px; margin:0 auto; align-items: center; 
  justify-content: center; z-index: 80;}
.dj-card .square img{width:180px} 
.dj-card#dj-trixx img:not(.social img){width:120px}
.dj-card h1, .dj-card h2, .dj-card h3 {color:white} 
.dj-card h3{font-size:1.5em}
.dj-card h1{margin:0}
.dj-card h2{border-bottom:5px solid #5bc3be}
.dj-card h1::after{display:none}

.dj-card .social img{width:30px}
.dj-card .social a:not(header .social a) {margin-right:15px; }
.dj-card .square .social a{display:inline-block; width:auto}

/* ========== PRESS RELEASES ================= */
.press section a:not(.button a, .read-more a) {display:block; color:#666666; }
.press .theme {margin-bottom:0}
.press section a p{text-align: left;}
.det-page.press strong{font-weight:100}

/* ========== BOLOG ================= */
.blog .flex-row{justify-content: center;}
.blog-card { width:300px; max-width:90%; min-height: 620px; margin: 10px; }
.blog-card > * { text-align:left}
.blog-card .img{width:100%; height:321px; overflow:hidden}
.blog-card .img img{width:100%;}
.blog-card .date{font-size:.8em; margin:10px 0;}
.blog-card .summary {max-width:100%; margin:0}
.blog-card .summary {flex:1}
.blog-card p {padding: .3rem;}
.blog-card .read-more {height:30px; background:#5bc3be; text-align: center;}
.blog-card .read-more a {display:block; width:100%; height:100%; color:white; padding-top:5px}
.blog .button{margin-top:3em}
.post-det{align-items:flex-start}
.post section {padding:0}
.post ul {margin-top:0; padding-top:0}
.post.det-page >div strong {font-size:1em; font-weight:300}

p.summary{display:none;}
.blog-card h3{font-size:1em; margin:0 0 .5rem; height:60px}
.blog-card p:not(p.date){text-align:left; font-size:16px; height:50px}


/* ========== BRAND IDENTITY ================= */
/* .brand-identity *:not(.brand-identity header *){text-align:left} */
/* .brand-identity h1:after {margin:15px 0} */
.brand-identity strong {color:#5bc3be; font-weight:300; font-size:21px}
.brand-identity li {line-height:1.5em}
.fa-check{color:green; display:inline-block; width:100%; text-align:center; margin-top:1em}
.x-mark{font-family: Arial, Helvetica, sans-serif; font-weight:600; font-style: normal; color:red; display:block; width:100%; text-align:center; margin-top:1em}
.logo-previews img {width:300px; max-width:90%; margin:20px; box-shadow: 0 5px 15px rgb(0 0 0 / 20%); }
.logo-previews{margin:3em 0; justify-content: center; text-align:center}
.fonts img{display:block; width:350px; max-width:90%; margin-top:2em}
.usage p, .terms p {text-align:left}
section.terms {background:white}
.terms strong {font-weight:600}
.terms ol>li {margin-top:25px}
.terms h1:not(:first-child) {text-align:left; font-weight:500; font-size:1.5em}
.terms h1:not(:first-child)::after {margin-left:0}
.brand-identity h1 {margin-bottom:1em}
.eponymia .flex-row {align-items: flex-start; gap:2em;}
.grey {color:#666666; opacity:.5}


.color-card{padding:1em}
.color {min-width:250px; min-height:250px;}
.green-c{background:#5bc3be}
.purple-c{background:#9bb7df}
.blue-c{background:#1c194e}

.about-us .color-card{background:#ebeced; width:400px; max-width:90%; padding:0; margin:0 1em; top:0}
.about-us .color-card p{text-align:left; width:100%; padding:.5em}
.about-us .color-card h3 {padding:.5em 1em; text-align:center; color:white; margin-top:0}
.about-us strong {color:#5bc3be; font-weight:600;}

.vision .aside-text {width:500px; max-width:100%; flex:0; margin-left:0}
.vision .flex-row {align-items:baseline}
.vision .aside-photo{padding-right:1.2em} 

#connected .social {width:500px; max-width:100%; margin:0 auto; text-align:center}
#connected .social img {width:30px; height:30px; margin:10px}
#connected h4 {text-align:center; font-weight:bold; margin-top:1em}
#connected h1, #values h1, #the-team h1{margin-bottom:0}

#values .flex-row{margin-top:2em}
#values h3 {color:#1c194e}

#the-team h3 {font-size:1.2em}
#the-team .photo {display:block; width:100%}
#the-team .flex-row {justify-content:center}
#the-team .square {width:300px; margin:1em; max-width:100%}
#the-team h3, #the-team h4 {text-align: center;}

.exhibitors-zone h3, .past-event h2 {text-align: center;}
.past-event h3 {text-align: center; margin-top:0;}
.past-event p {margin-bottom:0}
.past-event .button { margin-top: 1em;}
.past-event .instructors-scroller .photo{min-width:290px; height:250px; overflow: hidden;}
.past-event .instructors-scroller .photo img{width:100%; height:auto}
.syn-small .past-event .instructors-scroller .photo{min-width:90%;}
button span { text-transform: uppercase; color:white;}
.exhibitors-zone form { width:600px; max-width:100%; text-align:center; }
.exhibitors-zone form button { font-size:1em; border-radius: 10px; }
.exhibitors-zone div[data-private-body] { text-align:center; } 

.exhibitors-info {display:inline-block; width:300px; max-width:90%; margin:2em; box-shadow: 0 2px 5px rgb(0 0 0 / 10%); padding:10px}
.exhibitors-info img {width:100%}
.exhibitors-info h3 {font-size:18px; background: #248b86; color:white;}
.exhibitors-zone .flex-row {justify-content: center;}

.past-event h2 {margin-bottom:2em}
.past-event h2::after {content: '';height:3px;background:#5bc3be; width:150px; display:block; margin:15px auto;}


/* ========== CONTACT US ================= */
.contact-us .aside-text img {width:150px; display:block; margin:2em 0}
.contact-us .aside-text a{color:#666666}
.contact-us .aside-text h3 {font-size:1.2em}
.contact-us .social img{width:35px}
.contact-us .social a:not(header .social a) {display:block; margin-right:15px}
.contact-us .involved {width:180px; height:180px; border-radius:250px; background: rgba(68, 101, 109, .8);}
.contact-us .involved p{height:100%; padding-top:70px; font-weight:600; color:white; font-size:1.5em}
.contact-us .details {width:300px; height:300px; border-radius:250px; background: rgba(28, 25, 78, .4); text-align: center; padding-top:50px}
.contact-us .details img{width:150px}
.contact-us .details h2{color:#5bc3be}
.contact-us .aside-photo {border-top-right-radius: 400px;border-bottom-right-radius: 400px; position:relative}
.aside-photo p{text-align: left;}

/* .contact-us .overlay { width:100%; height:100%; border-top-right-radius: 400px;border-bottom-right-radius: 400px; position:absolute; top:0; left:0;
background:rgba(0, 0, 0, .2)} */

.contact-us .details {position:relative; left:-150px}
.contact-us .involved {position:relative; left:-120px; top:70px}

/* DETAIL PAGE */

.det-page >div strong {font-size:1.2em; color:#5bc3be;}
.det-page > div .bio ul {padding-left:25px; list-style:square;}
.det-page > div ul li{line-height:2em}
.det-page header {border-bottom:1px solid #5bc3be}


/* GIVAWAY */
.givaway ul{list-style:square; margin:0 auto; width:500px; max-width:100%}
.givaway ul li{line-height:2em}
.enter-giveaway form {width:500px; max-width:100%; margin:0 auto}
.enter-giveaway input:not(.captcha-container input, input[type="checkbox"]){width:100%}
#terms-conditions {font-size:14px}
#terms-conditions ul{padding-inline-start: 1em}
#terms-conditions ul li {margin-top:1em}


/* FOOTER */
footer{background:#1b1c1c; border-top:1px solid white; padding:.5em;}
footer {color:white; width:100%; font-size:.8em;}
footer a:not(footer .copyright a) {color:white !important}
footer .flex-row {align-items: baseline;}
footer ul {padding-left:0; list-style: none;}
footer ul li{line-height: 2em;}
footer h4::after { content: ''; height:1px; background:#5bc3be; width:150px; display:block; margin-top:10px}
footer .flex p {text-align:left;}
footer p i{margin-right:1em}
footer .social img{width:25px !important; margin-right:15px}
footer .flex-row.social {justify-content: unset;}
footer .copyright a, .copyright p{color:#666666; text-align:center!important}
.copyright {border-top:1px solid #666666}

footer .newsletter p {margin-bottom:0; margin-top:30px}
footer .newsletter form[data-status] { place-items: start; }
footer .newsletter form[data-status] .form-posted { font-size: 1rem; }
footer .newsletter .flex-row { justify-content: flex-start; align-items: center; }
footer .newsletter input { width: unset; border-radius: 3px; }
footer .newsletter .btn { width:auto; background:#5bc3be; color:white; height:37px; border-radius: 3px; font-size:15px; }

.stay-tuned {text-align:center}
.stay-tuned .social{margin-top:3em}
.stay-tuned .social h3{color:#666666}
.stay-tuned .social .flex-row{justify-content: center;}
.stay-tuned .social img{width:50px; margin:15px}


.loading { text-align: center; font-weight: 600; }

#popup { max-width: max(50%, 24rem); border-color: #5bc3be; }
#popup strong { color: #5bc3be; }
#popup button { color: white; width: 100%; font-size: 1.2rem; font-weight: bold; }
#popup [data-close] { position: absolute; cursor: pointer; top: 0; right: 0rem; background-color: #5bc3be; 
  color: white; padding: 0 6px 6px 10px; border-radius: 0 0 0 14px; transition: .3s color; }
#popup [data-close]:hover { color: #248b86; }
#popup::backdrop { background-color: #0009; }
#popup .newsletter input[type="email"] { width: 100%; }
#popup .newsletter p {margin-bottom:0; font-size:14px}

.registration h2 {text-align: center;}
.registration-coming{margin:4em 0}

#register-heading #countdown {max-width:280px; padding-top:400px}
#register-heading #countdown h2{font-size:20px}
#register-heading #countdown h3 {font-size:16px; width:60px; height:60px; margin:0 2px}
.registration #popup {position:auto}

.syn-small .request-wrapper {padding:0}

.brand-identity .form-posted img {width:30px}
.brand-identity .form-posted .flex-row {gap:1em; justify-content: center; margin-top:1em}


.sold-out { padding: 10px 20px; background-color: #888; color: white; border: solid 2px #666; margin: 0 30px 20px; font-weight: 400; }



.about-us.aff25 .hero-section .aside-photo {background-image: url(../imgs/about-us-25.3eba3c.jpg); background-size:cover; background-position: center; min-height:700px}
.aff25 .headline .social {max-width:unset; text-align:center; align-self:end}
.aff25 .headline .social img {height:45px;}
.aff25 .lang-selector {padding-right:1em; position:absolute; top:0; right:0}
.register-btn-25 {background:#5bc3be; color:white; transition:all linear .3s; padding:1em}
.register-btn-25 a {color:white; font-weight:bold}
.register-btn-25:hover {background:#9bb7df; color:#1b1c1c;}
.about-us .hero-section {padding:0}
.hero-section .aside-text {border:none}
.hero-section .aside-photo {height:calc(100vh - 200px)}
.hero-section img {height:100%; width:auto}
.aff25.about-us .color-card:hover {scale:1.1}
.aff25.about-us .color-card {transition:all linear .5s; box-shadow: 8px 4px 4px rgba(0, 0, 0, .2); min-height:440px;}
.syn-small .aside-text {padding:0; margin:0; padding:1em; max-width:100%}
.registration-coming h3 {text-align:center}
.registration-coming {margin-bottom:2em}
.about-us.aff25 #the-team .square img{border-radius:150px; overflow: hidden;}
.about-us.aff25 .color-card {background:white; border-radius:10px; overflow:hidden}
.about-us.aff25 .purple-c {background:#5bc3be; border-bottom:1px solid #5bc3be}
.about-us.aff25 #values h3{color:white}

.final-program .social{text-align:center; margin:2em 0}
.final-program .social img {width:45px; margin-left:20px}
.press .blog-card .img {height:80px; text-align:left; display:flex; align-items: end;}
.press .blog-card .img img {max-height:80%; max-width:50%; height:auto; width:auto;}
.press .blog-card {min-height:210px}
.press section .flex-row {justify-content: center; gap:3em 1em; margin-bottom:4em}
.press .blog-card h3 {height:90px}
section.blog .flex-row {gap:3em 1em;}
section.blog .blog-card {background:white}

section.blog .blog-card div:not(div.img),
section.blog .blog-card p, section.blog .blog-card h3 {padding:0 .5em}

.releases .blog-card {min-height:400px}
.blog-card h3 {color:#1b1c1c}
.releases .blog-card .img {height:unset}

#archive .flex-row {justify-content: center; gap:2em;}
.archive-card {width:300px; max-width:100%}
.archive-card a {display:block; width:100%; height:100%; text-align:center; transition:all linear .5s}
.archive-card a:hover{scale:1.1}
.archive-card a img {width:100%; box-shadow: 8px 4px 4px rgb(0 0 0 / 20%);}
.archive-card h3, .archive-card h4 {color:#1b1c1c}
.blog-card {border-radius:10px; overflow:hidden}
iframe {border-radius:20px; overflow:hidden}

.aff25.contact-us .social img {width:unset}
.aff25.contact-us .social-sm img {width:35px; margin-left:20px}

#contact-us {padding:0; width:100%; height:calc(100vh - 200px); background-image:url(../imgs/contact-us-25-photo.504ff9.jpg); background-size:cover; background-position: center; position:relative}
#contact-us .overlay {width:100%; max-width:100%; background:rgba(0, 0, 0, .7); height:100%; position:absolute; right:0; bottom:0}
#contact-us .overlay h2 {text-align: center; color:white; margin-top:10em}
#contact-us .overlay h4 {text-align: center; color:white;}
#contact-us .overlay h4::before{content: ''; display:block; width:100px; height:2px; background:white; margin:10px auto}
#contact-us .overlay a {color:white}
#contact-us .overlay i {color:white}
#contact-us .overlay .social-sm {justify-content: center; margin-top:2em;}

.syn-small .about-us.aff25 .hero-section .aside-photo {min-height:400px; height:400px}
.quote img {margin:.5em}

#landing:not(.hero) .aff25,
#landing:not(.hero) .aff25 nav,
#landing:not(.hero) .aff25 ul { background-color: transparent; }

#landing .instructors-scroller .photo {min-width: 500px; height: 330px; overflow: hidden;}
#landing .instructors-scroller .photo img {width: 100%; height: auto;}
.syn-small #landing .instructors-scroller .photo {min-width:290px; max-width:100%; height:auto}

.syn-small #myVideo {display:flex; justify-content: center; background-position:center}
.syn-small #myVideo video {height:450px; width:unset}
.syn-small .aff25 nav > ul{background-color:#1b1c1c !important}
.syn-small .aff25 nav > ul ul {background-color:#313131 !important; border-top:1px dashed white}
.register-btn-25.mobile-reg, .syn-small .register-btn-25.desktop-reg {display:none}
.syn-small .register-btn-25.mobile-reg {display:block; position:absolute; top:0; left:0; width:100%; height:60px}
.syn-small .aff25 nav > ul{padding-top:80px}
.syn-small header .headline .logo img {height:100px; margin:0 auto}
.syn-small header .headline .logo {flex:1; text-align: center;}
.syn-small header.aff25 {height:125px; border-bottom: 1px solid white;}
.syn-small .aff25 .lang-selector {position:unset}
#landing #connected {background:white}
.syn-small .moments.aff24 .flex {display:none}