/*
	responsive.css
	Project: greenorg.eu
	Copyright: Marcin Borkowicz 2023
	
	Plik zawierający funkcjonalności responsywnego wyglądu dla witryny 'greenorg.eu'
	
*/

/* Switching to alternative box model */

@import url('./literata.css');
@import url('./cabinet-grotesk.css');

:root {
	/* Website color palete */
	--logo-basic-color: #515b10;
	--logo-light-color: rgb(165, 198, 49);
	--logo-light-color-translucent: rgba(165, 198, 49, 0.6);
	
	--body-bg-gradient-top: #6d7c75;
	--body-bg-gradient-bottom: #151702;
	
	/* Misc vars */
	--body-bg-position: 30% 0%;
}



html {
  box-sizing: border-box;
  
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ### Keyframes ###
	Held entirely in ui.js!
*/


/* ### Common style definitions ### */


body {
	/*background-image: linear-gradient(
		to bottom,
		#6d7c75,
		#6d7c75 30vh,
		#515b10
	);*/
	background-color: #45423d;
	background-image: url('../images/wallpaper-800.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: var(--body-bg-position);
	background-attachment: fixed;
	font-size: 16px;
	font-family: "Open Sans", Verdana, sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

h1 {
	font-size: 2.4em;
}

a:hover {
	color: var(--logo-light-color);
}

.strong {
	font-size: 24px;
}

.full-width {
	width: 100vw;
}

.section {
	min-width: 100vw;
	width: 100vw;
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

.section h1 {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	font-family: Literata-Black, Georgia, serif;
	/*font-family: CabinetGrotesk-Black, sans-serif;*/
	font-size: 11vw;
	color: rgba(255,255,255,0.7);
	text-align: center;
}

.section h2 {
	font-family: CabinetGrotesk-Regular, "Open Sans", Verdana, sans-serif;
	font-size: 5vw;
	text-transform: uppercase;
	line-height: 1.4em;
	color: var(--logo-basic-color);
	margin-bottom: 1em;
	text-align: center;
}

.slides {
	width: 100vw;
}

.slides p {
	font-family: CabinetGrotesk-Light, "Open Sans", Verdana, sans-serif;
	font-size: 1.28em;
	line-height: 1.3em;
	text-align: center;
	padding: 8vw;
	background-color: var(--logo-light-color-translucent);
}

#oferta-section .slides p {
	text-align: left;
	padding-bottom: 2vh;
}

.slides ul {
	font-size: 1em;	
	line-height: 1.3em;
	text-align: left;
	padding-left: 8vw;
	background-color: var(--logo-light-color-translucent);
	list-style-type: disc;
}

.slide-pics {
	min-height: 50vh;
	height: 50vh;
	width: 100vw;
	background-color: #000;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0% 0%;
	background-attachment: fixed;
}

a[data-active="1"] {
	border-bottom: 3px solid var(--logo-light-color);
}

#logo, #intro-logo {
	position: absolute;
	top: 1.5vh;
	left: 2vw;
	width: 10vh;
	height: 10vh;
	background-image: url('../images/green-logo-fff.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	opacity: 0.55;
}

#intro-logo {
	display: block;
	top: 70vh;
	left: 12vh;
	width: 20vh;
	height: 20vh;
	opacity: 0;
}

#header {
	display: block;
	position: sticky;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 16vh;
	font-family: CabinetGrotesk-ExtraBold, "Open Sans", Verdana, sans-serif;
	font-size: 20px;
	background-image: url('../images/wallpaper-800.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: var(--body-bg-position);
	background-attachment: fixed;
	color: rgba(255,255,255,0.7);
	z-index: 1000;
	overflow: hidden;
}

#header ul {
	position: absolute;
	top: 4vh;
	right: 4vw;
	width: 70vw;
	height: 4vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: end;
	align-items: center;
	gap: 2vw;
}

#header ul li {
	color: inherit;
}

#wrapper {
	margin-top: 10vw;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: start;
	width: 100vw;
	overflow: hidden;
}

#footer {
	color: var(--logo-light-color);
	background-color: var(--body-bg-gradient-bottom);
	padding: 3%;
	height: auto;
	width: 100vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}
#footer p {
	text-align: left;
	font-family: CabinetGrotesk-Regular, "Open Sans", Verdana, sans-serif;
	padding: 1em;
	line-height: 1.4em;
}

#footer a {
	color: var(--logo-light-color-translucent);
}

#footer a:hover {
	text-decoration: underline;
}

#initial-slogan {
	display: flex;
	flex-direction: column;
	width: 100vw;
	margin: 40vw auto;

}

#initial-slogan h1 {
	width: 100%;
	font-size: 3.6em;
	text-align: center;
	color: rgba(0,0,0,0.8);
}

#initial-slogan h1#second {
	font-weight: bold;
	text-align: center;
	color: #a5c631;
}

#initial-slogan div.arrow-down {
	height: 2.4em;
	padding: 0.0;
	margin-top: 2em;
	text-align: center;
	background-image: url('../images/scroll-down.svg'); background-repeat: no-repeat;
	background-position: 50% 50%;
	opacity: 0.6;
}

#featured-pic-1 {
	height: 70vh;
	background-image: url('../images/vertical-03.jpg');
	background-position: 100% 33%;
}

#featured-pic-2 {
	height: 100vh;
}

#featured-pic-2, #featured-pic-3 {
	background-image: url('../images/vertical-04.jpg');
	background-position: 100% 16%;
}

#featured-pic-4 {
	background-image: url('../images/vertical-01.jpg');
	background-position: 100% 33%;
}

#featured-pic-5 {
	background-image: url('../images/vertical-05.jpg');
	background-position: 100% 85%;
}

#featured-pic-6 {
	background-image: url('../images/horizontal-01.jpg');
	background-position: 36% 71%;
	background-size: 120vh;
	height: 25vh;
}

#qr {
	width: 20vw;
	height: 20vw;
	background-image: url('../images/green-vcard.png');
	background-size: 100%;
	background-repeat: no-repeat;
}