.template-yy  {
--maincolor: #b69a2b;
}
.template-tempower {
--maincolor:#e5613a;
}
.template-gza {
--maincolor:#771754;
}

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

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


a { color: var(--maincolor); text-decoration: none }
a { color: var(--maincolor); text-decoration: none }

body { background: #f2f2f2; font-family: Arial, Helvetica, sans-serif;  font-family: 'Roboto';
font-style: normal; font-size: 10px;
font-weight: 400; color: #3d3d3d }

a {
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}

h1 {  font-family: 'Roboto';
font-style: normal; width: 70%; 
font-weight: 900; color: var(--maincolor); }

* { margin: 0; padding: 0; list-style-type: none }
.row { width: 750px; margin: 0 auto  }
#headerbar { position: absolute; top: 0; left: 0; width: 100%; height: 400px; background: #fff }

#footer-menu { position: fixed; left: 30px; bottom: 30px; font-size: .9rem }
#footer-menu li { display: inline-block; margin: 0 20px 0 0 }
#footer-menu li a:hover { color: #555 }
#footer-logo { position: fixed; right: 30px; bottom: 0; }

#main-logo { position: relative; height: 300px; width: 100%; }
#main-logo-container { position: relative; display: flex; width: calc(100% -120px); height: 100%; margin: 0 60px }
#main-logo-container p { text-align: center; width: 100%; margin: auto}

.logo-box { display: block; margin: auto; width: 100%; }

#content { position: relative; z-index: 100 }

#main-content p { margin: 0 0 1rem 0}
#main-content h3 { font-size: 2rem; color: var(--maincolor); font-size: 1.6rem; margin: 2rem 0 0 0 }
#main-content h4 { font-size: 1.2rem; margin: .5rem 0 .8rem 0; color: #555  }

#main-address p { margin: 0 0 1rem 0 }

#main-text { position: relative }
#main-text h1 { margin: 0 0 1.5rem 0; font-size: 2rem }
#main-text p, #main-text ul { font-size: 1.1rem; color: #3d3d3d }

#main-text ul li { padding: 0 0 0 30px; margin: 0 0 1rem 0; position: relative }
#main-text ul li:last-child { margin-bottom: 30px}
#main-text ul li:before { content: ''; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; background:  var(--maincolor) }

#main-text-inner p:last-child { margin: 2rem 0 2rem 0}
#main-logo { color: var(--maincolor); } 
#main-text-inner p a.cta { color: #fff; background: var(--maincolor); display: inline-block; padding: 20px 30px; -webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px; }

#main-text-border { position: absolute; top: 0; left: 0; width: 10px; height: 100%; background: var(--maincolor) }
#main-text-inner a.cta:hover{ background: #333; padding: 20px 35px }

.template-tempower #main-text-inner a.cta { background: #2f9dcd; }
.template-tempower #main-text-inner a.cta:hover{ background: #e5613a;  }



#main-text { 
	
	background: #fff; 
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 0 10px 50px 10px rgba(0,0,0,0.2);
	box-shadow: 0 10px 50px 10px rgba(0,0,0,0.2);
	overflow: hidden
}
#main-text-inner { padding: 30px 50px 30px 60px }
#main-address-inner { padding: 40px 40px 40px 60px }
#main-address-inner a:hover { color: #333 }
#main-address { font-size: 1.1rem }
#main-address h2 { font-size: 1.1rem; color: var(--maincolor); margin: 2rem 0 5px }
#main-address h3 { font-size: 1.1rem; margin: 20px 0 5px 0 }


#main-logo img { width: 100%; height: auto }

.template-gza #main-logo img { width: auto; max-height: 200px; }
.template-gza #main-logo { text-align: center }

#footer-logo img { width: 200px; height: auto }

@media screen and (max-width: 800px) {
	.row { width: calc(100% - 80px); margin: 0 40px }
	
	#footer-menu, #footer-logo { width: calc(100% - 80px); margin: 0 40px; right: auto; left: auto; bottom: auto; text-align: center }
	#footer-menu { position: relative }
	#footer-logo { position: relative }
	
	#footer-logo img { max-width: 100px; margin: 50px 0 40px -28px }
	#footer-menu { margin-bottom: 80px }
	
	#main-logo { height: 200px }
	.template-gza #main-logo img { width: auto; max-height: 100px; }
	#main-text h1 { width: 100%; font-size: 1.6rem }
}

@media screen and (max-width: 500px) {
	#main-logo { height: 140px }
	#main-text h1 { font-size: 1rem }
	#main-text p { font-size: .8rem }
	#main-address p { font-size: .8rem }
	#main-address h2, #main-address h3, #footer-menu { font-size: .8rem}
	
	#main-text-inner {
	  padding: 20px 30px 20px 30px;
	}
	#main-address-inner { padding: 40px 30px 30px  }
	
	#main-text-inner p a { padding: 10px 15px }
	#main-text-border { width: 100%; height: 10px; top: auto; bottom: 0}
	#main-address h2 { margin: 0 }
	#headerbar { height: 200px }
	
	#main-logo-container { width: 100%; display: block; margin: 0; height: auto  }
	
	#main-logo { height: auto; padding: 30px 0 }
}

@media screen and (max-width: 400px) { 
	.row { width: calc(100% - 40px); margin: 0 20px }
}

@media screen and (max-height: 1200px) {
	#footer-menu, #footer-logo { width: calc(100% - 80px); margin: 0 40px; right: auto; left: auto; bottom: auto; text-align: center }
	#footer-menu { position: relative; margin-bottom: 100px }
	#footer-logo { position: relative; margin-top: 100px; margin-bottom: 40px}
	#footer-logo img { margin: 0px 0 10px -28px }
}