/*
*
*	C4 INITIAL –  blank theme for CONTAO CMS
*
*	author	Dinko Skopljak
*	web		https://futura-web.de
*	email	ds@futura-web.de
*
*	powered by SCSS https://sass-lang.com/
*/


/* --------------------------------------------------------- IMPORT VARIABLES ----- */


@import include/_variables;
@import include/_reset;
@import include/_fontface;


/* --------------------------------------------------------- DEFAULT SETTINGS ----- */


//	Changes the padding behaviour of all elements
//	More info:	https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
//	Mehr Infos:	https://developer.mozilla.org/de/docs/Web/CSS/box-sizing

*	{box-sizing: border-box;}


//	Scale the sizes of your content using "rem"
html{
	font-size: 80%;
//	letter-spacing: inherit;
}


// Set the default font- & body-settings
body{
	color: $colorText;
	font-family: $fontFamSansSerif;
	font-weight: 300;
//	background-color: $bgBody;

	@import include/_systemfont;
}


/* --------------------------------------------------------- IMPORT STYLES ----- */


@import include/_typography;
@import include/_anchors;
@import include/_iframes;
@import include/_extensions;
@import include/_invisibles;
@import include/_classes;
@import include/_hamburger;
@import include/_forms;
@import include/_clearfix;


/* --------------------------------------------------------- WRAPPER ----- *


#wrapper{}


/* --------------------------------------------------------- WRAPPER END ----- */


/* --------------------------------------------------------- CONTAINER ----- *


#container{}


/* --------------------------------------------------------- CONTAINER END ----- */


/* --------------------------------------------------------- MAIN ----- */


#main{

	>.inside{
		padding-bottom: $contentSpace;
	}
}


/* --------------------------------------------------------- MAIN END ----- */


/* --------------------------------------------------------- HEADER ----- */


#header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: $bgHeader;
	z-index: 3;

	&::before,
	&::after{
		content: "";
		width: 100%;
		height: $headerPaddingTop;
		display: block;
	}

	&::after{
		height: $headerPaddingBottom;
	}

	.inside{
		@extend %centered;
	}
}


/* --------------------------------------------------------- HEADER END ----- */


/* --------------------------------------------------------- LOGO ----- */


#logo{
	float: left;

	a{
		height: $logoHeight;
		position: relative;
		color: $colorLinkHeader;
		display: block;
		font-size: 1.3rem;
		line-height: $logoHeightLine;
		text-decoration: none;
	}
}


/* --------------------------------------------------------- LOGO END ----- */


/* --------------------------------------------------------- NAV MAIN ----- */


.nav_main{
	width: 100%;
	height: calc(100% - 2.5rem - 24px);
	display: block;
	padding: 1.25rem 0;
    position: fixed;
    top: calc(2.5rem + 24px);
    right: 0;
    transform: translate3d(0, 120%, 0);
	transition: all .2s ease .1s;
    overflow-y: auto;
    backface-visibility: hidden;
    background-color: $bgNavMain;
    z-index: 10;

    &.out{
	    transform: translate3d(0, 0, 0);
	}


    ul{
    	margin: 0;
    }


	li{
		text-transform: uppercase;

		&.home{
			@extend %invisible;
		}

		&.trail{

			a{
				color: $colorLinkActive;
			}
		}
	}


	a{
		display: block;
		color: $colorLinkHeader;
		text-decoration: none;
		position: relative;

		&:hover{
			color: $colorLinkActiveHeader;
		}
	}


	strong{
		color: $colorLinkActiveHeader;
		font-weight: 300;
		position: relative;
	}

	span, strong{
		width: auto;
		height: 100%;
		font-size: 1.5rem;
		display: block;
	}
}


/* --------------------------------------------------------- NAV MAIN END ----- */


/* --------------------------------------------------------- CONTAINER ----- */


#container{
	position: relative;
	z-index: 2;

	&::before{
		content: "";
		width: 100%;
		height: $containerSpaceTop;
		display: block;
	}
}


.mod_article{
	position: relative;


	> .block{
		margin-bottom: $basicSpace;

		> :last-child{
			margin-bottom: 0;
		}

		&.last{
			margin-bottom: 0;
		}
	}
}


/* --------------------------------------------------------- CE_IMAGE ----- */


.ce_image{

	&.teaser{

		.image_container{}
	}

	a{
		display: block;
	}
}


.image_container{

	a{
		display: block;
		position: relative;
	}
}


.caption{
	font-size: $sizeTextS;
	margin-bottom: $marginTextS;
}


/* --------------------------------------------------------- CE_IMAGE END ----- */


/* --------------------------------------------------------- CE_LIST ----- */


//.ce_list{}


/* --------------------------------------------------------- CE_LIST END ----- */



/* --------------------------------------------------------- CE_TEXT ----- */


//.ce_text{}


/* --------------------------------------------------------- CE_TEXT END ----- */


/* --------------------------------------------------------- CE_EVENT ----- */


@import include/_events;


/* --------------------------------------------------------- CE_EVENT END ----- */


/* --------------------------------------------------------- SINGLE ELEMENTS ----- */

.back{margin-bottom: $basicSpace;}

/* --------------------------------------------------------- SINGLE ELEMENTS END ----- */


/* --------------------------------------------------------- ELEMENT ----- */


/* --------------------------------------------------------- ELEMENT END ----- */


@import include/_gallery;
@import include/_pagination;
@import include/_comments;
@import include/_inlinebuttons;


/* --------------------------------------------------------- FOOTER ----- */


#footer{
	position: relative;
	color: $colorFooter;
	opacity: 0;
	transition: opacity .2s ease-out;
	background-color: $bgFooter;
	z-index: 2;

	&.loaded{
		opacity: 1;
	}


	.inside{
		@extend %centered;
		padding: $footerSpacer;
	}


	.block{
		margin: 0;
	}


	ul{
		display: inline-block;
		margin: 0;
	}


	li{
		display: block;

		a, strong, span{
			display: block;
		}
	}


	li, p{
		font-size: $sizeText;
		line-height: 2;
		margin: 0;
	}


	a{
		text-decoration: none;

		&:hover{
			color: $colorLinkHover;
		}
	}


	a, strong{
		font-weight: 300;
		color: $colorFooter;
	}
}

/* --------------------------------------------------------- FOOTER END ----- */


/* --------------------------------------------------------- EXTRA ----- */

@import include/_cookie;
@import include/_autoscroll;

/* --------------------------------------------------------- EXTRA END ----- */