<style>
	main {
		background: none !important;
	}
</style>

<script>
	import Logo from '../components/logo.svelte';
	import UpArrow from '../components/up.svelte';
	import MenuBtn from '../components/menu-btn.svelte';
</script>

<MenuBtn/>

<main id="root">
<section class="row fullheight">
	<Logo/>
	<div class="row" style="width: 100%">
		<section class="col-1"></section>
		<section class="col-5">
			<div style="margin-top: 23vh">
				<h1 style="margin-bottom: 5vh">Chci se zapojit</h1>
				<hr class="gay-hr">
				<h6 style="line-height: 1.4; margin-top: 5vh">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce wisi. Duis bibendum, lectus ut viverra rhoncus.
				</h6>
				<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
					↓  Zjisti více
				</button>
			</div>
		</section>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>Co jsou vlastně studentské organizace?</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div style="height: 8vh"></div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Proč bych se měl do toho pouštět?</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
<div class="col flexy-boi">
	<h5 style="color: var(--color-primary)"><b>Jak se v tom všem vyznat?</b></h5>
</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>Formální spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>SORka</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>Univerzitní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div style="height: 8vh"></div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Neformální spolky</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Fakultní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
				eu fugiat nulla pariatur.
			</p>
		</div>
	</div>
</section>
<section class="row" style="margin-top: 14vh">
	<div class="col-1"></div>
	<div class="col-6" style="background-position: top center">
		<h5>Zkušenosti členů a bývalých členů</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 4vh">
	<section class="col">
		<link rel="stylesheet" href="/css/carousel.css">
		 <!-- Slideshow container -->
		<div class="slideshow-container">

		  <!-- Full-width images with number and caption text -->
		  <div class="mySlides fade">
		    <div class="numbertext">1 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Text</div>
		  </div>

		  <div class="mySlides fade">
		    <div class="numbertext">2 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Two</div>
		  </div>

		  <div class="mySlides fade">
		    <div class="numbertext">3 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Three</div>
		  </div>

		  <div class="mySlides fade">
		    <div class="numbertext">3 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Three</div>
		  </div>

		  <!-- Next and previous buttons -->
		  <a class="prev" onclick="plusSlides(-1)" href="#0">&#10094;</a>
		  <a class="next" onclick="plusSlides(1)" href="#0">&#10095;</a>
		</div>
		<br>

		<!-- The dots/circles -->
		<div style="text-align:center">
		  <span class="dot" onclick="currentSlide(1)"></span>
		  <span class="dot" onclick="currentSlide(2)"></span>
		  <span class="dot" onclick="currentSlide(3)"></span>
		  <span class="dot" onclick="currentSlide(4)"></span>
		</div>
	</section>
</section>
<section class="row" style="margin-top: 14vh">
	<div class="col-1"></div>
	<div class="col-6" style="background-position: top center">
		<h5>Proč bys měl jít právě k nám?</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 4vh">
	<section class="col">
		<link rel="stylesheet" href="/css/carousel.css">
		 <!-- Slideshow container -->
		<div class="slideshow-container">

		  <!-- Full-width images with number and caption text -->
		  <div class="mySlides2 fade">
		    <div class="numbertext">1 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Text</div>
		  </div>

		  <div class="mySlides2 fade">
		    <div class="numbertext">2 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Two</div>
		  </div>

		  <div class="mySlides2 fade">
		    <div class="numbertext">3 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Three</div>
		  </div>

		  <div class="mySlides2 fade">
		    <div class="numbertext">3 / 3</div>
		    <img src="img/trump.jpg" alt="" style="width:100%">
		    <div class="text">Caption Three</div>
		  </div>

		  <!-- Next and previous buttons -->
		  <a class="prev" onclick="plusSlides(-1, 'mySlides2')" href="#0">&#10094;</a>
		  <a class="next" onclick="plusSlides(1, 'mySlides2')" href="#0">&#10095;</a>
		</div>
		<br>

		<!-- The dots/circles -->
		<div style="text-align:center">
		  <span class="dot" onclick="currentSlide(1, 'mySlides2')"></span>
		  <span class="dot" onclick="currentSlide(2, 'mySlides2')"></span>
		  <span class="dot" onclick="currentSlide(3, 'mySlides2')"></span>
		  <span class="dot" onclick="currentSlide(4, 'mySlides2')"></span>
		</div>
	</section>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col flexy-boi" style="background-position: top center">
		<h5>Seznam spolků a studentských oborových rad</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col flexy-boi">
		<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col flexy-boi">
		<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900">
			<a href="/#">Sport</a>
			<a href="/#">Umění</a>
			<a href="/#">Psychologie</a>
			<a href="/#">Pedagogika</a>
			<a href="/#">Logika</a>
			<a href="/#">Filozofie</a>
			<a href="/#">Společnost</a>
			<a href="/#">Hudba</a>
			<a href="/#">Dějiny</a>
		</div>
	</div>
	<div class="col-1"></div>
</section>
<section class="row" style="margin-top: 3vh">
	<div class="col-1"></div>
	<div class="col">
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
	</div>
	<div class="col">
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
	</div>
	<div class="col">
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
		<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
	</div>
	<div class="col-1"></div>
</section>
</main>

<UpArrow/>
