/*
Theme Name: Kunsttransport Salzburg
Theme URI: https://kunsttransportsalzburg.at
Description: Default template of Kunsttransport Salzburg
Author: Kunsttransport Salzburg
Author URI: https://kunsttransportsalzburg.at
Version: 2.0
*/

*{
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
}

*, 
*:after, 
*::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

:root {
	--color-light-brown: #e5ddd9;
	--color-dark: #111111;
}

html, body { height: 100%; }
body { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 400; line-height: 25px; overflow-x: hidden; }
body.fixed_header { padding-top: 100px; }
body.opened_sidebar { overflow: hidden; }
body.rwd_menu__opened { overflow: hidden; }

img.alignleft, img.alignright, img.aligncenter, img.alignnone { max-width: 100%; height: auto; } 
img.alignleft { margin: 0 20px 20px 0; float: left; } 
img.alignright { margin: 0 0 20px 10px; float: right; } 

h1, h2, h3, h4, h5 { font-weight: normal; line-height: 100%; }

hr { margin: 30px 0; border-top: 3px solid var(--color-silver-line); clear: both; }

button, input { -webkit-appearance: none; -webkit-border-radius: 0; }
button, input, select, textarea { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400; outline: none; }
textarea { resize: vertical; }

input[type=checkbox], 
input[type=radio] { width: 20px; min-width: 20px; height: 20px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: white; border: 1px solid #d8d8d8; clear: none; cursor: pointer; display: inline-block; line-height: 0; outline: 0; vertical-align: middle !important; position: relative; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; }
input[type=radio] { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

input[type=radio]:checked:before, 
input[type=checkbox]:checked:before { top: 4px; right: 4px; bottom: 4px; left: 4px; text-align: center; background: var(--color-green); position: absolute; display: block; content: '' !important; }
input[type=radio]:checked:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/*
-----------------
	CLASSES
-----------------
*/
/* Classes */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.inner { max-width: 800px; margin-left: auto; margin-right: auto; position: relative; }
.alignleft { margin: 0 20px 5px 0; float: left; }
.alignright { margin: 0 0 5px 20px; float: right; }
.aligncenter { margin: 0 auto 20px auto; display: block; }
.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.hide { display: none !important; }
.red { color: #ff0000; }
.sec_font, blockquote { font-family: 'Playfair Display', serif; }
.b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/* Animation */
.anim { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.anim_cubic_long { -webkit-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 3s cubic-bezier(0.19, 1, 0.22, 1); }

/* Button */
.button { height: 50px; padding: 0 30px; font-size: 17px !important; font-weight: 700; text-decoration: none !important; text-transform: uppercase; text-align: center; color: white !important; line-height: 50px; background: #151315; display: inline-block; position: relative; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.button:hover { background: #000; }


/*
------------
	HERO
------------
*/
#hero { position: relative; }
#hero:before { width: 100%; height: calc(100% - 100px); left: 0; top: 0; background: var(--color-light-brown); position: absolute; content: ''; }

/* Hero top */
#hero .hero_top { padding: 50px 0; font-weight: 600; line-height: 20px; }
#hero .hero_top a { color: #000; }
#hero .hero_top a:hover { text-decoration: underline; }

/* Hero center */
#hero .hero_center { padding: 50px 0 100px; }
#hero .hero_center h1 { font-size: 100px; line-height: 1; }

/* Hero bottom */
#hero .hero_bottom_wrap { display: flex; flex-wrap: wrap; align-items: flex-end;  position: relative; }
#hero .hero_bottom_wrap .box_left { width: calc((100% - 800px) /2); padding: 0 50px 150px; font-weight: 600; }
#hero .hero_bottom_wrap .box_center { width: 100%; max-width: 800px; }
#hero .hero_bottom_wrap .box_center img { width: 100%; height: auto; display: block; }
#hero .hero_bottom_wrap .box_right { width: calc((100% - 800px) /2); padding: 0 50px 150px; display: flex; flex-wrap: wrap; justify-content: space-around; }
#hero .hero_bottom_wrap .box_right img { width: 40%; height: auto; display: block; }


/*
----------------
	CONTENT
----------------
*/
#content { padding: 70px 0; }
#content h2 { margin-bottom: 30px; font-size: 50px; line-height: 1; }
#content p { margin-bottom: 30px; }

#content a { text-decoration: underline; color: #000; }
#content a:hover { text-decoration: none; }

#content ul { margin-bottom: 30px; margin-left: 30px; }

#content blockquote { margin-bottom: 30px; padding: 30px; font-style: italic; background: var(--color-light-brown); }
#content blockquote p:last-child { margin-bottom: 0; }


/*
--------------
	FOOTER
--------------
*/
#footer { padding: 30px 0; font-size: 16px; color: #999; line-height: 20px; border-top: 1px solid #eee; }


/*
-----------
	RWD
-----------
*/
@media only screen and (max-width: 1440px) { 

	/* HERO: Hero bottom */
	#hero .hero_bottom_wrap .box_left { padding: 0 20px 150px; }
	#hero .hero_bottom_wrap .box_right { padding: 0 20px 150px; }
}

@media only screen and (max-width: 1280px) { 

	/* DISPLAY: None */
	.hide_in_1280 { display: none !important; }

	/* HERO: Hero top */
	#hero .hero_top { padding: 30px 0; }

	/* HERO: Hero center */
	#hero .hero_center { padding: 30px 0 100px; }
	#hero .hero_center h1 { font-size: 80px; }
	
	/* HERO: Hero bottom */
	#hero .hero_bottom_wrap { max-width: 800px; margin: auto; }
}

@media only screen and (max-width: 960px) { 

	/* DISPLAY: None */
	.hide_in_960 { display: none !important; }

	/* HERO: Hero top */
	#hero .hero_top { padding: 20px 0; }

	/* HERO: Hero center */
	#hero .hero_center { padding: 20px 0 50px; }
	
	/* CONTENT */
	#content { padding: 50px 0; }
}

@media only screen and (max-width: 800px) { 

	/* DEFAULT */
	.p_l_20 { padding-left: 20px; }
	.p_r_20 { padding-right: 20px; }

	/* HERO: Hero top */
	#hero .hero_top { padding: 20px 0; }

	/* HERO: Hero center */
	#hero .hero_center h1 { font-size: 9vw; }
	
	/* CONTENT */
	#content h2 { font-size: 6vw; }

}

@media only screen and (max-width: 640px) { 

	/* HERO: Hero center */
	#hero .hero_center h1 { font-size: 10vw; }
	
	/* CONTENT */
	#content { padding-bottom: 30px; }
	#content h2 { font-size: 7vw; }
}

@media only screen and (max-width: 480px) { 
	
	/* DISPLAY: None */
	.hide_in_480 { display: none !important; }
	
	/* DEFAULT */
	.button { width: 100%; margin-bottom: 20px; padding: 15px 10px; height: auto; line-height: 20px; display: block; }
	
	/* CONTENT */
	#content a.email { text-align: center; display: block; }
	
	/* FOOTER */
	#footer .rights { display: block; }
}