body, html {width: 100vw; margin: 0; padding: 0; min-height: 100vh; height:100vh; min-height: -webkit-fill-available;height: -webkit-fill-available;} 
body {    justify-content: center;background: #fff; background-position: 30% bottom; background-size: cover; letter-spacing: 0.5px; font-family: 'Raleway', Tahoma, Arial, sans-serif; font-weight: 200; overflow-x: hidden; color:#fff; display: flex; flex-direction: column;}
footer {width: 100%; position: relative}

#main {display:flex; flex-direction: row;width: 100%; z-index: 10;}
#main-content {display:flex; width: 1310px; justify-content: center; flex-direction: column;box-sizing: border-box;margin: 0 auto}
#main-logo-block {justify-content: center;height:50vh; width:500px;display:flex;flex-direction: row; margin: 0 auto; text-align: center}
#main-logo-block h1 {margin: 50px 0 10px}
#main-logo-block span {font-size:26px}
.button {padding:15px 25px; border-radius: 10px; background: rgb(109,212,255); background: linear-gradient(133deg, rgba(109,212,255,1) 0%, rgba(219,0,45,1) 100%); color:#fff; text-shadow: 0px 1px 2px #000000e3; text-decoration: none; font-size: 28px; font-weight: 600; transition: background 3s} 
.button:hover {background: rgb(24,142,191); background: linear-gradient(133deg, rgba(24,142,191,1) 0%, rgba(134,0,28,1) 100%);}
h1, span {width:100%}
h1 {font-size:48px}
h2 {text-align: center; font-size: 36px; line-height: 36px; font-weight:400;margin: 15px 0 35px}
h2:not(:first-child) {margin-top:80px}
p {font-size: 18px; line-height: 24px; margin-bottom: 30px}
li {font-size:18px; line-height: 24px;margin-bottom:10px}
img {max-width: 100%; width:100px}
svg {max-width: 100%; width:100px}

#event-content {width: 1000px; margin: 40px auto 0}
#events-content {width: 1000px; margin: 40px auto 0}
#events-content .title {font-size:44px; font-weight: 400; text-align: center; margin-bottom:40px}
.events-list {list-style: none; margin: 0; padding: 0;}
.events-list li {border-left: 3px solid #303030;background-repeat: no-repeat; transition: all 0.6s;
    padding-left: 35px;display: flex; flex-direction: column; align-items: flex-start;justify-content: center; position: relative; min-height:150px;margin-bottom: 25px; background-size:80%;background-position:left 100% center;border-bottom-right-radius: 15px;border-top-right-radius: 15px;}
.events-list li:before {content:''; background: linear-gradient(-90deg, #10151c00, #10151c);position: absolute; top: 0; left: 20%; height: 100%; width: 50%}
.events-list li:after {content:''; background: linear-gradient(-90deg, #10151c00, #10151c8a);position: absolute; top: 0; left: 20%; height: 100%; width: 80%; transition: all 0.6s}
.events-list li > * {z-index:10}
.events-list li a {color: #fff; font-weight:600; font-size: 38px; letter-spacing: 2px; margin-bottom: 7px; text-decoration:none;}
.events-list li span {font-size: 18px}
.events-list li:hover {border-left: 3px solid #870000;}
.events-list li:hover:after {opacity:0}
#event-main-info {display: flex; flex-direction: row;background:linear-gradient(0deg, #ffffff0f, #10151c 85%); border-radius:0 0 15px 15px;margin-bottom:45px; padding:35px 25px;align-items: stretch;}
#event-main-info > div {display:flex; justify-content: center;flex-direction: column;}
#event-main-info #event-name {width: 65%}
#event-main-info #event-name h1 {font-size:40px;margin: 0 0 8px 0;}
#event-main-info #event-name a {text-decoration: none; color: #fff;font-size: 18px}
#event-main-details {border-left:solid 2px #323232; padding-left:20px;}
#event-main-details ul {list-style: none; padding: 0; margin: 0 0 0 25px}
#event-main-details ul li {font-size: 18px; letter-spacing: 1px; margin: 10px 0}
#event-main-details ul li span {font-style: italic; margin-left: 3px}
.event-pic {width:100%; height: 180px; border-top-left-radius: 15px;border-top-right-radius: 15px;position:relative;  background-position: center; background-size:cover}
.event-pic:after {content:''; position: absolute; bottom:0; top: auto; left: 0; width: 100%; height: 40%;background:linear-gradient(180deg, #10151c00, #10151c);}
#kola {background-image:url(/img/maps/kola.jpg);}
#sinai {background-image:url(/img/maps/sinai.jpg);}

.images {display: flex; flex-direction: row; align-items: center;justify-content: center;}
.images img {margin:0 10px 10px}

#join span {display: none; }

#social {position: absolute; display: flex; top: auto; bottom: 30px; left: 50%; transform: translateX(-50%);}
#social a {flex: 1 1 0; text-align: center; margin: 0 15px}
#social a img {width:37px; height: 37px; opacity: 0.4; transition: all 0.3s}
#social a:hover img {opacity: 0.8}


@media screen and (max-width: 1378px) {
    #join {width: 27%;}
    h1 {font-size:34px}
    h2 {font-size: 30px; line-height: 30px; font-weight:400;}
    .button {font-size: 22px; padding: 13px 20px;}
}

@media screen and (max-width: 734px) {
    body {letter-spacing:0}
    body:after {height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.95) 100%);}
    body:before {display:none}
    #main {flex-direction: column}
    #join {width: 100%;height:100%; padding: 0 30px 0;}
    #join span {display: block; padding: 0px 0 35px; text-align: center;}
    h1 {font-size:34px}
    h2 {text-align: center; font-size: 30px; line-height: 36px; font-weight:400;margin: 10px 0 25px}
    h2:not(:first-child) {margin-top:40px}
    p {font-size: 16px; line-height: 24px; margin-bottom: 20px}
    ul {margin:0; padding-left:20px}
    li {font-size:16px; line-height: 24px;margin-bottom:10px}
    img {max-width: 100%}
    #main-content {width:100%}
    #main-logo-block {height:80vh; justify-content:center;align-items:center;width:100%}
    #main-logo-block img {width: 80%; height: auto}
    #events-content {width:100%; margin-top:20px; padding: 0 15px;box-sizing: border-box;}
    #events-content .title {font-size:30px; margin-bottom: 35px;}
    .events-list li {padding:0 0 25px;box-sizing: border-box; border-bottom: 2px solid #303030;border-left:none; align-items:center;justify-content:flex-end;margin-bottom:25px;min-height:200px;border-radius:13px 13px 0 0;background-size: auto 130%; background-position: 35% bottom;}
    .events-list li:hover {border-bottom: 2px solid #870000;border-left:none}
    .events-list li:before {content:''; background: linear-gradient(180deg, #10151c00, #10151c);position: absolute; top: auto; bottom:0; left: 00%; height: 55%; width: 100%}
    .events-list li:after {display:none}
    .events-list li a {font-size:32px;margin-bottom:3px; letter-spacing: 1px;}
    .events-list li span {font-size: 16px; text-align: center}
    .images {flex-direction: column}
    .button {font-size: 22px; padding: 13px 20px;text-shadow: 0px 1px 1px #000000e3;}
    #event-content {width:100%; margin-top: 0; padding: 15px 15px 0;box-sizing: border-box;}
    #event-main-info {flex-direction: column;padding: 20px 15px 15px;; margin-bottom: 33px}
    #event-main-info #event-name {width:100%; margin-bottom:20px; align-items:center}
    #event-main-info #event-name h1 {font-size: 32px;text-align:center}
    #event-main-details {border-top: solid 2px #323232; padding-left: 0px; padding-top:15px;border-left:none}
    #event-main-details ul {margin: 0;display:flex; justify-content: stretch;}
    #event-main-details ul li {display:inline-block; text-align: center; letter-spacing: 0;font-size:14px; width:50%}
    #event-main-details ul li span {display:block; margin-left:0; margin-top: 5px;font-size:16px; font-style:normal; font-weight:400;}
}