/* ------------ COMMON ---------------- */

:root {
  --grey-dark: #6c7581;
  --black-medium-dark: #151316;
  --brown-dark: #7d4c21;
  --brown-medium: #99672e;
  --grey-medium: #84817d;
  --brown-light: #d59751;
  --green-dark: #505448;
  --yellow-light: #f7dfa8;
  --white: #fff;
  --grey-transparent: rgba(132, 129, 125, 0.25);
  --off-white: #e3d5b7;
  --green-dark-80: rgba(80, 84, 72, 0.8);
  --green-dark-70: rgba(80, 84, 72, 0.7);
  --transparent: #fff;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
	.material-text-right {
		margin: -5px 25px -5px 5px;
	}


* { padding: 0; margin: 0; text-decoration: none; box-sizing: border-box; }
BODY, FORM, LABEL, INPUT, TEXTAREA {
	font: 12px Verdana, Arial, 'Open Sans', Tahoma, Geneva, Helvetica, sans-serif;  color: #fff;
	
	/*
	font-family: 'Montserrat', sans-serif;
	font-family: 'Playfair Display', serif;
	*/
}
A, IMG, FORM, FIELDSET {border: none;}
A { color: #FFF;  }
	A:hover { color: #FFF; }
	
/*
H1, H2, H3, H4, H5, H6 { font-weight: normal;  }

H1  { font-size: 28px; font-family: Arial; }
H2  { font-size: 22px; font-family: Arial; }
H3  {
	font-size: 8px;
    font-family: Arial;
    font-weight: 400;
    font-style: normal;
    line-height: initial;
    font-stretch: normal;
}*/

HTML, BODY { width: 100%; background: white;  }

.logoicon {
	background: url('images/logos-footer.png?c=3') no-repeat top left; 
	width: 32px; height: 32px; display: block;
}
	.li-facebook { background-position: 0 0; }
	.li-instagram { background-position: -32px 0; }
	.li-linkedin { background-position: -64px 0; }
	.li-whatsup { background-position: -96px 0; }
	.li-phone { background-position: -128px 0; }
	.li-mail { background-position: -160px 0; }
	.logoicon:hover { background-position-y: -32px; }

P.normal-gold {
	font-family: Montserrat;
	font-size: 20px;
	line-height: 1.75;
	letter-spacing: 0.2px;
	text-align: left;
	color: var(--brown-medium);
}
H1 {
  font-family: Montserrat;
  font-size: 80px;
  font-weight: 500;
  line-height: 1.19;
  letter-spacing: -2.4px;
  color: var(--green-dark);
}

 H3 {
  font-family: Montserrat;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--grey-dark);
}

.button {
    width: 284px;
    /* height: 62px; */
    border-radius: 4px;
    background-color: var(--brown-medium);
    display: block;
    padding: 16px;
}
	.button-normal {
		font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.67;
    letter-spacing: 1.08px;
    text-align: center;
    color: var(--white);
	}
		.button-normal:hover {
	    background-color: var(--brown-dark);
		}

/*.slide-normal {
	width: 100%;
}*/



#background-container {
	width: 100%;
}


#background-content {
	width: 100%;
	max-width: 4000px;
	min-width: 0px;
}
	.content-canvas {
		width: 100%;
		margin: 0 auto;
		float: left;
	}
		.content-canvas-inner {
			/*width: 100%; max-width: 1400px;*/ width: 82%;
			margin: 0 auto;
		}


.navbar {
  float:left; width: 100%;
  margin: 0;
  padding: 24px 0px;
  background-color: var(--black-medium-dark);
}
	.logo {
	  float: left; width: 200px; height: 75px;
	  margin-left: 100px; padding-left: 100px;
	  flex-grow: 0;
	  background: url('images/logo-med.png') no-repeat top left; 
	  background-size: contain;

		/*font-family: 'Montserrat', sans-serif;*/
		font-family: 'Playfair Display', serif;
		font-size: 30px;
		font-weight: 400; font-style: normal;
		text-decoration: none;
		line-height: 1.33;
		letter-spacing: 2.4px;
		color: var(--yellow-light);
	}
	.menu {
	  float: right; height: 75px;
	  margin-right: 100px;
	  align-items: center;
	}
		.menu A {
			float: left;
			margin: 20px 0 0 50px;
			text-decoration: none;
		  font-family: Montserrat;
		  font-size: 20px;
		  font-weight: 500;
		  line-height: 1.5;
		  text-align: left;
		  color: var(--white);
		}
			.menu A.active { border-bottom: 2px solid white; }
			.menu A:hover { color: var(--brown-light); }
			

  .menu-mobile {
    /*overflow: hidden;
    position: relative;*/
    display: none;
  }

    .menu-mobile #myLinks {
      display: none;
      position: absolute; top: 120px; right: 0;
      width: 70%; z-index: 10;
      background-color: var(--black-medium-dark);
    }

    .menu-mobile a {
      float: left;
      color: white; text-align: center;
      padding: 20px 20px;
      text-decoration: none;
      font-size: 30px;
    }

    .menu-mobile a.icon {
      float: right;
    }

    .menu-mobile a:hover {
      /*background-color: #ddd;
      color: black;*/
    }

.columns {
	float: left; width: 100%;
}
	.cols50 {
		width: 50%;
	}

.hero-content {
	margin: 100px 0;
}
	.hero-content .cols50:nth-child(1) {
		padding: 0 10px 0 100px;
	}
	.hero-content .cols50:nth-child(2) {
		padding: 5px 100px 0 0;
	}
	.hero-content P.normal-gold {
		margin-top: 20px;
	}
		.hero-content P.normal-gold SPAN {
			float: left;
		}

	.cta-content {
		/*margin: 80px 0;
    background-color: var(--off-white);*/
	}
		.cta-content .cols50 {  height: 450px }
		.cta-content .cols50 H1 {  margin-top: 70px; text-align: center; color: var(--white); }

	.cta-content .button {
		margin: 80px auto 0;
	}


.services-list {
	margin: 50px 0;
	float: left; width: 100%;
}
	.services-list .services-item { width: 100%; float: left; margin: 50px 0; }
	.services-list .services-item .item-pic { width: 300px; float: left; /*text-align: center;*/ }
	.services-list .services-item .item-desc { width: 1000px; float: left; }
	.services-list .services-item IMG { margin-left: 100px; width: 150px; }
	.services-list .services-item H2 {
	  font-family: Montserrat;
	  font-size: 40px;
	  font-weight: 500;
	  line-height: 1.5;
	  letter-spacing: -1.2px;
		 color: var(--brown-dark);
	}
	.services-list .services-item P {
		/*padding-right: 120px;*/
	  font-family: Montserrat;
	  font-size: 30px;
	  line-height: 1.5;
	  letter-spacing: 0.3px;
	  text-align: left;
	  color: var(--grey-dark);
	}


.info-content {
		margin: 80px 0;
    background-color: var(--off-white);
}

.midslidepic {
	width: 100%; height: 350px;
}

.big-info {
	width: 100%; height: 750px;
	position: relative;
	/*
	float: left;
	margin: 50px 0 150px;
	padding: 80px 650px 80px 100px;*/
  /*background-color: var(--off-white);*/
  max-width: 1400px; margin: 0 auto;
  padding: 80px 0 0 100px;
}
	.big-info .showpic {
		position: absolute; right: 100px; top: -50px;
		width: 500px; height: 850px;
	}
	.big-info H1 {
	  font-family: Montserrat;
	  font-size: 80px;
	  font-weight: 500;
	  line-height: 1.19;
	  letter-spacing: -2.4px;
	  color: var(--green-dark);
	}
	.big-info P.desc {
		width: 50%;
		margin: 50px 0;
	  font-family: Montserrat;
	  font-size: 30px;
	  font-weight: 300;
	  line-height: 1.5;
	  letter-spacing: 0.3px;
	  color: var(--green-dark);
	}
		.big-info P.normal-gold SPAN {
			float: left;
		}

		.big-info-xl { height: 950px;  }
		.big-info-xl .showpic { width: 500px ;height: 1050px;  }


FOOTER {
	/*position: absolute; bottom: 0;*/
  float: left; width: 100%;
  margin: 0;
  padding: 32px 0;
  background-color: var(--black-medium-dark);
  color: var(--grey-medium);
}
	FOOTER A { color: var(--grey-medium); }
	.contacts-bar {
		float: left; width: 100%; margin-bottom: 20px;
		font-size: 28px;
		color: var(--yellow-light);
	}
		.contacts-bar A {
			float: left; margin: 5px 20px 5px 0;
			color: var(--yellow-light);
		}
			.contacts-bar A:hover {
				color: var(--white);
			}
	FOOTER .cols50:nth-child(1) {
		padding-left: 100px;
	}
	FOOTER .cols50:nth-child(2) {
		padding-right: 100px;
		text-align: right;
	}







/* ------------ ------ ---------------- */
/* ------------ MOBILE ---------------- */
/* ------------ ------ ---------------- */

	@media only screen and (max-width: 1800px) {
		.content-canvas-inner { width: 85%; }
	}
	@media only screen and (max-width: 1650px) {
		.content-canvas-inner { width: 88%; }
	}
	@media only screen and (max-width: 1500px) {
		.content-canvas-inner { width: 95%; }
	}
	@media only screen and (max-width: 1300px) {
		.logo { margin-left: 10px;  }
		.menu { margin-right: 20px;  }
		H1 { font-size: 60px; }
		.hero-content .cols50:nth-child(1){ padding-left: 10px;  }
		.hero-content .cols50:nth-child(2){ padding-right: 10px;  }

		.big-info { padding: 50px 0 0 10px; }
			.big-info .showpic { width: 40%; right: 10px; }
			.big-info H1 { font-size: 70px;  }
			.big-info P.desc { font-size: 30px;  }
			.big-info P.normal-gold { width: 60%; }
		
		.services-list .services-item { margin: 20px 0;  }
			.services-list .services-item .item-pic { float: initial; margin: 0 auto; text-align: center;  }
				.services-list .services-item IMG { margin: 0; }
			.services-list .services-item .item-desc { width: 100%;     text-align: center;  }
				.services-list .services-item H2 {  }
				.services-list .services-item P { width: 100%; padding: 0 20px; text-align: center;  }


		FOOTER .cols50:nth-child(1) { padding-left: 10px;  }
		FOOTER .cols50:nth-child(2) { padding-right: 10px;  }
	}

	@media only screen and (max-width: 600px) {
		.content-canvas-inner { width: 100%; }
		H1 { font-size: 50px;  }
		.logo { margin-left: 0; }
		.menu { display: none; }
		.menu-mobile { display: block; }

		.content-canvas-inner { padding: 0 10px; } 
			.cols50 { width: 100%; padding: 0 !important; }

		.cta-content .cols50 { height: 350px;  }
		.hero-content { margin: 50px 0; padding: 0 20px;  }
			.hero-content H1 { margin-bottom: 20px; }
			.hero-content H3 { font-size: 20px; }

		/*.slide-normal { width: initial; height: 400px; width: 100%; }*/
		/*.services-list .services-item .item-pic { width: 100%; }
		.services-list .services-item .item-desc { width: 100%; }*/
			.services-list .services-item H2 { font-size: 30px;  }
			.services-list .services-item P { font-size: 20px; }

		.big-info { height: initial; padding: 0px; text-align: center; }
			.big-info .showpic {
				position: initial; float: left; width: 100%; height: 400px;
			}
			.big-info H1 { font-size: 50px; padding: 20px 0 0;  }
			.big-info P.desc { width: 90%; margin: 30px 5%; font-size: 20px; }
			.big-info P.normal-gold {  width: 90%; margin: 0 5%; }
			.info-content { margin-bottom: 0; }

			.material-text-right { margin: -5px 0 0 5px; }
				P.normal-gold {
					float: left; width: 100%; /*padding: 20px 20px 50px;*/
					font-size: 18px; line-height: 50px;
				}
					SPAN .material-symbols-outlined {     line-height: 40px; }

		.contacts-bar { /*float: initial; margin: 10px auto; width: initial;*/     text-align: center; } 
			.contacts-bar A { display: inline-block; float: initial; margin: 0; padding: 10px; }
		FOOTER .cols50 { text-align: center !important; width: 100%;  }
	}