/* CSS Document */


/* ========== Thank you for looking at this code ========== */
/* ========== WARNUNG! COPYRIGHT BY FLOVANADAM.CH | SWITZERLAND ========== */

:root {
	/*   width: var(--breiteHundert);	*/
	--bodyHintergrund: #e8b698;
	--HauptFarbe: #1d71b8;
	--greyFarbe: #727272;
	
	--silverFarbe:silver;
	--secondarFarbeMaus:#FFFFFF;
	--darkFarbe:#575756;
    --weissFarbe: #fff;
    --weissTransparent: rgba(255, 255, 255, 0.75);
	--schwarzFarbe: #333333;
	--schwarz: #000000;


	--TitelStandard:1rem;
	--TitelStandard2:1.4rem;
	--TitelStandard3:3rem;
    --TitelGross: 2.5rem;
    --TitelTablet: 1.75rem;
    --TitelMobile: 0.75rem;
	--TextStandard:1.05rem;
	--TextMobile: 0.5rem;
    --standardSchrift: 'Lato';   
	--boldSchrift: 'PRIMETIME'; 

	--borderRadi:3px;
	--borderRadi10:10px;
	--borderRadi50:50%;
    --normal: 400;
    --fett: 900;
    --leicht: 300;
	--fest:bold;
	
	--randAbstand1:1rem;
	--HundertProz:100%;
	--hoeheAuto:auto;
		
	--bewegung:all 0.3s ease-in-out;
	--bewegung6:all 0.6s ease-in-out;
}


	@font-face {
		font-family:'PRIMETIME';
		src:url("../assets/fonts/PRIMETIME_PERSONAL USE ONLY.ttf");
	}


	@font-face {
		font-family:'Lato';
		src:url("../assets/fonts/Lato-Light.ttf");
		/*font-weight: bolder;*/
	}



/* Hiermit können Safari >=1.1, Opera >=9.5, IE9 was anfangen*/
::selection {
    background:var(--HauptFarbe);
    /*color: #336699;*/
	color:var(--weissFarbe);
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background:var(--HauptFarbe);
    /*color: #336699;*/
	color:var(--weissFarbe);
}



/* ========== ========== DESIGN BODY - HEADQUARTER ========== ========== */
* {
    padding: 0;
    margin: 0;
	font-family:'Lato', sans-serif!important;
    color: var(--schwarz);
    font: var(--TextStandard);
    font-weight: var( --normal );
    box-sizing: border-box;
}
	html {
		font-size:100%;
}

	body {
		font-family:sans-serif;
		text-decoration:none;
		margin:0rem 0 0 0 ;
		padding:0;
		background-color:beige;   /*ZUM ARBEITEN*/
}

	header {
		width: var(--HundertProz);
		background-color:var(--weissFarbe);
		margin:0;	
		padding:0;
}

	h1 {
		font-size:var(--TitelGross);
		text-align:center;
		text-transform: uppercase;
		font-family:'PRIMETIME'!important;
}

	h2 {
		font-size:3.5rem;
		color: var(--weissFarbe);
		text-align: center;
		text-transform: uppercase;
		font-family:'Lato'!important;
}

	h3 {
		font-size:var(--TitelTablet);
		color: var(--greyFarbe);
		text-transform: uppercase;
		text-align:center;
		font-family:'PRIMETIME'!important;
}

	h4 {
		font-size:var(--TextStandard);
		color: var(--schwarzFarbe);
		text-transform: uppercase;
		text-align:center;
		font-family:'PRIMETIME'!important;
}
	h5 {
		font-family:'Lato'!important;
		font-size:var(--TitelTablet);
		color: var(--schwarzFarbe);
		text-transform: uppercase;
		text-align:center;
}

	p {
		font-size: var(--TextStandard);
		color: var(--schwarz);
		font-family:'Lato'!important;
}

	main {
		min-height: 800px;  		
}

	footer {
		position: absolute; 		
		width: var(--HundertProz);

}

	a {
		color: var(--schwarz);
		text-decoration:none; 
		cursor: pointer;
}

	li {
		list-style:none;
}

/* ========== ========== SOME IDs ========== ==========*/

	#bodycontainer { 	
		width: var(--HundertProz);	
		margin:0;
		paddinh:0;
}

/* ========== ========== Menu ========== ==========*/

.logoicon_menu{
	background-image:url("../bilder/design/logo/VOLODOMO_logo_transparent_png.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	height:80px;
	width: 160px;
	display:flex;

}

#logo div {	
	justify-content: center;
	padding:0.5rem;
	marign:auto;
	text-align: center;
	display:flex;
}
#logo a {	
	width:var(--HundertProz);
}
#mainMenu ul{
	margin:0 0;
	padding: 1rem 15rem 0rem 15rem;
	display:flex;
	justify-content: space-around;
	width:var(--HundertProz);
	text-align: center;
	
}
#mainMenu .nav-item{
	min-width:275px;
	display:flex;
	color: var(--schwarzFarbe);
	padding-top:1rem;

}

#mainMenu ul li.nav-item a:after{
	content:"";
	width:0;
	border-bottom:2px solid transparent;
	display:block;
	margin:10px auto;
	transition:all .5s ease-in-out;
}

#mainMenu ul li.active a:after,#mainMenu ul li.nav-item:hover a:after{
	border-bottom:2px solid #1d71b8;
	width:var(--HundertProz);
}
#mainMenu ul li a.nav-link{
	text-decoration:none;
	min-width:275px;
	padding:1rem;
	
}
/* ========== ========== intro header img ========== ==========*/
	
#intro{
	
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	height:600px;
	display:flex;
	
	transition:var(--bewegung);
}
#intro.intro_index{
	background-image:url("../bilder/design/header_intro/intro_1.jpg");

}
#intro.intro_dienstleistungen{
	background-image:url("../bilder/design/header_intro/intro_6.jpg");

}
#intro.intro_kontakt{
	background-image:url("../bilder/design/header_intro/intro_3.jpg");

}
#intro.intro_immobilien{
	background-image:url("../bilder/design/header_intro/intro_5.jpg");

}

.opacity{
	transition:var(--bewegung);
	opacity: 0.8;
}

.opacity:hover{
	transition:var(--bewegung);
	opacity: 1;
}
#introInner{

	height: auto;
	width: auto;
	margin: 0 auto;
	padding: 5rem 0 0 0 ;
	/*font-size:var(--TitelGross);*/
	display:block;
	text-align:center;
	justify-content:center;
}

#introInner p{
	font-size:var(--TitelGross);
}
#introInner a{
	padding:4rem;
	width:var(--HundertProz);
	text-align:center;
	justify-content:center;
}
#introInner div{
	font-size:var(--TitelGross);
	width: 250px;
	height: 250px;
	margin: 0 auto;

	text-align:center;
	justify-content:center;
	
	background-image:url("../bilder/design/logo/VOLODOMO_logo_schwarzweiss_icon_png3.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	display:flex;
}

/* ========== ========== leitsatz ========== ==========*/

#lead{
	background-color:var(--HauptFarbe);
	font-size:var(--TextStandard);
	width: 100%;
	position: relative;
	text-align: center;
	justify-content: center;
	margin: 0 auto;
	padding:80px 10rem;
}



#socialMedia{
	background-color:var(--weissFarbe); 
	height:160px;
	display:flex;
	margin: 0rem auto;
	text-align: center;
	justify-content: center;
	padding: 2rem 0 0 0;
}
#socialMedia div.socialMedia1:hover {
	opacity: 1;
}
#socialMedia div.socialMedia2:hover {
	opacity: 1;
}
#socialMedia div.socialMedia3:hover {
	opacity: 1;
}

#socialMedia a{
	text-decoration:none;
	margin: 0 4rem 0 4rem;
}

#kontakt{
	background-color:var(--weissFarbe);
	width:var(--HundertProz);
	justify-content: center;
	text-align: center;
	padding: 3rem 0;
	
}

#socialMedia div.socialMedia1 {
	background-image:url("../bilder/design/icon/homegate.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	display:flex;
	opacity: 0.8;
	width: 60px;
	height: 60px;

	transition:var(--bewegung);
}

#socialMedia div.socialMedia2 {
	background-image:url("../bilder/design/icon/immoscount.jpeg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	display:flex;
	opacity: 0.8;
	width: 60px;
	height: 60px;

	transition:var(--bewegung);
}

#socialMedia div.socialMedia3 {
	background-image:url("../bilder/design/icon/mail_volodomo.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	display:flex;
	opacity: 0.8;
	width: 60px;
	height: 60px;

	transition:var(--bewegung);
}
/* ========== ========== Footer Flovanadam - icon & copyright ========== ==========*/

		
	.flo_copy_div {
		position: relative;
		
		padding:1rem 0rem;
		width: var(--HundertProz);	
		background-color:var(--darkFarbe);
		text-align: center;
		bottom: 0rem;
		transition:var(--bewegung);
}	
	
	.flo_copy_div a:hover {
		color: var(--silverFarbe);
		transition:var(--bewegung);
}

	.mobilefoot2{
		display:none;
}
	.mobilefoot4{
		display:none;
}
	.fva_footer_icon {
		position: absolute;
		padding: 2rem;
		display:block;
		right: 0;
		justify-content:none;
		text-align:none;
		z-index: 10;
}
	figure img.flovanadam{
		position: relative;
		width: 150px;
		height: var(--hoeheAuto);
		margin-top:1rem;
		float: right;
		max-width: 100%;
		transition:var(--bewegung);
}
	figure img.flovanadam:hover{
		transform: rotate(7deg) translate(-8px, -8px);
		transition:var(--bewegung);
}




/* ========== ========== POP UP MELDUNG ========== ========== */

	/* Meldung (Newsletter)	*/
	#meldung {
		display:none;
		position: fixed;
		z-index:350;
		top:50px;
		left:200px;
		background:rgba(242,242,242,0.95);
		border:1px solid white;
		box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.2);
}
	#meldungheader {
  		padding: 10px;
  		cursor: move;
  		z-index: 10;
		height:100%;
		width: 700px;
		
}
	#meldung #schliessen {	
		border-radius: var(--borderRadi50);
		cursor:pointer;
		position:absolute;
		font-size:3rem;
		width:3rem;
		height:3rem;
		top:1rem;
		right:1rem;
		
}
	figure.meldungimg {
		padding:0rem 1rem;
		max-width: 100%;
}
	figure.meldungimg img{
		max-width: 100%;
}
	meldungtext {
		color:rgba(54,54,54,1.00);
		font-weight:normal;
		font-size: 15px;
}
	.meldungtext2{
		padding:1rem 2rem 1rem 2rem;
		width: var(--breiteHundert);	
		min-height: 100px;
		height: var(--hoeheAuto);
		overflow:hidden;
}
/* ========== ========== COOKIE DATENSCHUTZ ========== ========== */
		
	.cookie-banner {
		position: fixed; /*bezogen auf bildschirm fixiert*/
		bottom:-800px;
		left:0;
		right: 0;
		background-color:var(--greyFarbe);
		transition:bottom 2s ease-in-out;
		z-index: 400;
		display:flex;
		justify-content: space-around;
}	
	
	.sichtbarr {
		bottom:0;		
}
	
	.cookiestext {
		width: 70%;
		padding:2rem 2rem 2rem 5rem;
}
	.cookiebutton{
		width: 30%;

}

	#akzeptieren-button{
		background-color:var(--HauptFarbe);
		color: var(--weissFarbe);
		transition:var(--bewegung);
		border:2px solid var(--weissFarbe);
		margin:1.5rem 1rem 2rem 0.5rem;
		cursor:pointer;

		
}	
	#akzeptieren-button:hover{
		/*background-color:var(--greyFarbe);*/
		transition:var(--bewegung);
		color: var(--weissFarbe)!important;
		
		border:2px solid var(--weissFarbe);
		margin-right:1.5rem;
}

	#akzeptieren-button p {
		color: var(--schwarzFarbe);
		padding:1rem;		
		font-size:var(--TitelTablet);	
		text-transform: uppercase;
		text-align:center;
		font-family:'PRIMETIME'!important;
}
	#akzeptieren-button p:hover {
		color: var(--weissFarbe);

}
	.cookiestextmr:hover{
		font-weight: bold;
}





/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (max-width:1580px) 
	{


	body {
		/*background-color:lightcoral; ZUM ARBEITEN */
}

	#mainMenu ul{
		padding: 1rem 1rem 0rem 1rem;

	
}
	#mainMenu ul li a.nav-link{
		min-width:180px;
		padding:1rem;
		margin:auto;
}
	#mainMenu .nav-item{
		min-width:180px;
		display:flex;
		padding-top:1rem;

}

		
}

/* ========== MEDIA SCREEN  1200px ========== */
/* ========== APPLE NOTEBOOK 13zoll ========== */
	@media screen and (max-width:1200px) 
	{

	body {
		/*background-color:lightgreen;ZUM ARBEITEN */
}
	#mainMenu ul{
		padding: 1rem 1rem 0rem 1rem;
		min-width:100%;
	
}
	#mainMenu ul li a.nav-link{
		min-width:100px;
		padding:1rem;	
}
	#mainMenu .nav-item{
		min-width:100px;
		display:flex;
		padding-top:1rem;

}
	#footerbottom {
		justify-content:center;
	
}
		.mobilefoot3{
			display:none;
}
		.mobilefoot4{
			display:block;
}
}


/* ========== MEDIA SCREEN  1080px ========== */
	@media screen and (max-width:1080px) 
	{
		
	body {
		/*background-color: darkorchid;ZUM ARBEITEN*/
}
	main {
		min-height: 400px;  		
}
		
	#mainMenu ul{
		padding: 1rem 1rem 0rem 1rem;
		display:block;
	
}
	#mainMenu ul li a.nav-link{
		min-width:150px;
		padding:1rem;	
}
	#mainMenu .nav-item{
		min-width:150px;
}
	#logo {	
		display:none;
}
	#intro{
		height:300px;
}
		
	#introInner{
		padding: 2rem 0 0 0 ;
}
	#introInner div{
		width: 230px;
		height: 100px;
		background-image:url("../bilder/design/logo/VOLODOMO_logo_transparent_png.png");
		
	}
		
	#lead{
		padding:80px 2rem;
	}
	#socialMedia a{
		margin: 0 1rem 0 1rem;
	}		
	
		#footerbottom {
		padding:10px 0px 0px 0px;
}

	#akzeptieren-button  {
		margin-left:2rem;
}		

	
		
}	
	
/* ========== MEDIA SCREEN  960px ========== */
/* ========== APPLE tablet (kleineres) ========== */
	@media screen and (max-width:960px) 
	{
		
	body {
		/* background-color:darkorange; ZUM ARBEITEN */
}

	h1 {
		font-size:var(--TitelTablet);
	
}

	h2 {
		font-size:var(--TitelTablet);
}

	h3 {
		font-size:var(--TitelStandard);
		font-weight: bold;
}

	h4 {
		font-size:var(--TitelMobile);	
}

	.fva_footer_icon {
		padding:0.5rem;
		top:16rem;

}

		
	.mobilefoot2{
		display:block;
}
	.mobilefoot{
			display:none;
}

	.cookie-banner {
		padding: var(--randAbstand);
		display:block;
}	
	.sichtbar {
		bottom:0;		
}
	.cookiestext {
		width: var(--breiteHundert);	
}
	#akzeptieren-button  {
		float:none;
		margin-left:2rem;
		margin-bottom:1rem;
		width: 30%;	
}
	#akzeptieren-button	 p{
		font-size:15px;
}
	#meldung {
		top:200px;
		left:20px;
}
	#meldungheader {
		width: 500px;
}


	}

	
/* ========== MEDIA SCREEN  450px ========== */
	@media screen and (max-width:450px) 
	{

	body {
		/*background-color:aqua; ZUM BEARBEITEN */
}

	.cookie-banner {
		padding: var(--randAbstand);
}	
	.sichtbar {
		bottom:0;		
}
	.cookiestext {
		width: var(--breiteHundert);	
}

	#meldung {
		top:80px;
		left:0px;
}
	#meldungheader {
		width: var(--breiteHundert);	
}
	#meldung #schliessen {	
		height:3rem;
		top:-1.5rem;
		right:1rem;
}
	.meldungtext2{
		padding:1rem 1rem 1rem 1rem;
}


	}