/*   
Theme Name: Rebel Art Management
Theme URI: https://www.rebelartmanagement.com
Description: Template der Webseite https://www.rebelartmanagement.com
Author: Andreas Baudisch
Author URI: http://www.andreasbaudisch.de
*/

/* --- font --- */

/* assistant-200 - latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200;
  src: url('../ramtheme/font/assistant-v3-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Assistant ExtraLight'), local('Assistant-ExtraLight'),
       url('../ramtheme/font/assistant-v3-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../ramtheme/font/assistant-v3-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../ramtheme/font/assistant-v3-latin-200.svg#Assistant') format('svg'); /* Legacy iOS */
}

/* assistant-regular - latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  src: url('../ramtheme/font/assistant-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Assistant'), local('Assistant-Regular'),
       url('../ramtheme/font/assistant-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../ramtheme/font/assistant-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../ramtheme/font/assistant-v3-latin-regular.svg#Assistant') format('svg'); /* Legacy iOS */
}

/* assistant-700 - latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  src: url('../ramtheme/font/assistant-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Assistant Bold'), local('Assistant-Bold'),
       url('../ramtheme/font/assistant-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../ramtheme/font/assistant-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../ramtheme/font/assistant-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../ramtheme/font/assistant-v3-latin-700.svg#Assistant') format('svg'); /* Legacy iOS */
}

/* special-elite-regular - latin */
@font-face {
	font-family: 'Special Elite';
	font-style: normal;
	font-weight: 400;
	src: url('../ramtheme/font/special-elite-v16-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../ramtheme/font/special-elite-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../ramtheme/font/special-elite-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../ramtheme/font/special-elite-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../ramtheme/font/special-elite-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../ramtheme/font/special-elite-v16-latin-regular.svg#SpecialElite') format('svg'); /* Legacy iOS */
  }

/* VARIABLES */

:root {
    --mainBgColor: white;
    --mainTextColor: black;
    --mainFontFamily: 'Assistant', sans-serif;
    --mainFSize: clamp(1rem, 2vh, 2rem);
}

/* HTML ELEMENTS */

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	font-family: 'Assistant', sans-serif;
	font-family: var(--mainFontFamily);
	font-size: clamp(1rem, 2vh, 2rem);
	font-size: var(--mainFSize);
	font-weight: 200;
	text-align: justify;
	color: #000;
	padding: 0;
	margin: 0;
}

header, main, footer {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.contact {
	margin: 0;
}

.contactName {
	margin: 1rem 0 0.4rem;
}

a {
	color: #000;
	font-weight: 400;
	text-decoration: none;
	opacity: 0.75;
}

a:hover {
	opacity: 1.0;
}

.sociallink {
	margin: 0 1vw;
	opacity: 0.6;
}

.sociallink:hover {
	opacity: 1.0;
}

.sociallink img {
	height: 5vh;
}

hr {
	width: 25%;
	display: block;
	margin: 5vh auto 2vh;
	border-style: solid;
	border-width: 1px;
	border-radius: 1px;
	color: #c2c2c2;
}

/* MENUS */
footer .menu {
	list-style-type: none;
	padding: 0 0 1rem;
	margin: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
}

footer .menu li {
	margin: 0 1vw;
}

/* ANIMATION */
@keyframes typing {
	0%, 90%, 100% {
		width: 0;
	}
	30%, 70% {
		width: 23.3em;
	}
}

@keyframes caret {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

/* LAYOUT ELEMENTS */
.ramContent {
	width: 75%;
	margin: 0 12.5%;
}

.typewriter {
	font-family: "Special Elite";
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	display: inline-block;
	animation: typing;
	animation-duration: 10s;
	animation-timing-function: steps(54, end);
	animation-iteration-count: infinite;
}

.typewriter::after {
	content: "|";
	position: absolute;
	right: 0;
	animation: caret infinite;
	animation-duration: 1s;
	animation-timing-function: steps(1, end);
}

/* --- bilder --- */

.ram-logo {
	width: 50%;
	height: auto;
	margin: 2vh 25%;
}

.ram-logo img {
	height: auto;
}

.thefuture-logo {
	width: 50%;
	height: auto;
	margin: 5vh 25%;
}

.thefuture-logo img {
	height: auto;
}

.roambanner img {
	height: auto;
}

.project-image {
	padding: 0;
	margin: 0;
	text-align: right;
}

.project-image img {
	border-radius: 50%;
}

.project-image a:hover {
	opacity: 0.6;
}

.contact-image {
	padding: 0;
	margin: 0;
	text-align: right;
}

.contact-image img {
	border-radius: 50%;
	opacity: 0.8;
}

.gallery-image {
	width: 48%;
	height: auto;
	margin: 0 auto;
	display: inline-block;
}

/* --- Überschriften --- */

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: 400;
}

h1 {
	font-size: 3vw;
	padding: 0;
	margin: 2rem 0;
	text-align: center;
}

h2 {
	font-size: 2rem;
	padding: 0;
	margin: 2rem 0 1rem 0;
	text-align: center;
}

h2:first-child {
	display: none;
}

h3 {
	font-size: 1.5rem;
	padding: 0;
	margin: 0;
}

.artists {
	margin-top: 2vh;
}

h4 {
	font-size: 1.3rem;
	padding: 0;
	margin: 0;
}

h5 {
	font-size: 1.2rem;
	padding: 0 0 0.5rem 0;
	margin: 0;
}

h6 {
	font-size: 1.1rem;
	padding: 2rem 0 0 0;
	margin: 0;
}

/* --- Spalten --- */

.projects {
	width: 80vw;
	margin: 0 auto;
	padding: 0;
}

.contacts {
	width: 80vw;
	margin: 2vh auto 0 auto;
	padding: 0;
}

/* --- Kontakt --- */

.name-mail {
	padding: 0;
	margin: 0;
}

.name-mail h4 {
	margin-top: 4vh;
}

.name-mail p {
	padding: 0;
	margin: 0;
}

/* --- Layout --- */
.about {
	max-width: 60vw;
	margin: 2vh auto;
	padding: 0;
}

.artist {
	text-align: center;
}

.social {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

/* --- Media Queries --- */
@media only screen and (max-width:768px) {
	.goethelogo img {width: 50%; height: auto; margin: 0 25%;}
	.contact-image {float: left;}
}

@media only screen and (max-width:640px) {
	.project-image {text-align: center;}
	.ram-logo img {height: auto;}
	.roambanner img {height: auto;}
	.goethelogo img {width: 50%; height: auto; margin: 0 25%;}
	.thefuture-logo img {height: auto;}
	.contact-image {float: none;}
}

@media only screen and (max-width:546px) {
	body {font-size: 12px;}
	.wp-block-column h3 {text-align: center;}
	#menu-navigation li {margin: 1vh 1vw;}
	.ram-logo {width: 66.6%; margin: 2vh 16.7%;}
	.ram-logo img {height: auto;}
	.roambanner img {height: auto;}
	.goethelogo img {width: 50%; height: auto; margin: 0 25%;}
	.thefuture-logo img {height: auto;}
	.introduction {padding: 0;}
	.project-image {text-align: center;}
	.blocks-gallery-item {width: 100% !important; margin: 2vh 0 !important;}
	.name-mail {text-align: center;}
	.name-mail h4 {margin-top: 0;}
	.contact-image {text-align: center; margin-top: 3vh;}
	.sociallink img {height: 3vh;}
	.social hr {margin-bottom: 0;}
	#impressum {width: 80%;}
	h4 {font-size: 4vw;}
}