﻿/* Színváltozatok 
- ezekkel a class-okkal átszínezhető doboz vagy szöveg is
- a hatter- kezdetűek háttérbe kellenek (azért nem bg, hogy ne legyen esetleges összekavarodás a sablonban már előre definiált névvel)
- a szoveg- kezdetű pedig szövegnek
- az !important pedig azért szerepel, hogy mindenképp ez a szín érvényesüljön, ha másik is lenne beállítva az adott dobozhoz/szöveghez
- a szín megadható rgba-ba is, vagy hex-be. 
- az rgba 3 szám és egy opcionális 4., ami az áttetszőségért felel, ha nincs ott semmi, akkor ez alapértelmezetten 1 (pl.: rgba(255,255,255) - fehér, ugyanez hex-ben: #ffffff)
- a hex pedig egy kettőskereszt, majd 6 szám/betű vegyesen (pl.: #002e5b - sötétkék, ugyanez rgba-ban: rgb(0, 46, 91))
*/

.hatter-sotetkek {
	background: rgba(0, 46, 91)!important; /* arculati sötétkék szín */
}
.hatter-sotetkek-halvany {
	background: rgba(0, 46, 91, 0.75)!important; /* arculati kék halványabb (75%-os) változata */
}
.hatter-zold {
	background: #94c83f!important; /* telefonáljon most gomb zöld színe */
}
.hatter-sotetzold {
	background: #188b10!important; /* nagy 90 napig ingyen szöveg zöld színe */
}
.hatter-sarga {
	background: #ffcc00!important; /* versenytárs garancia badge sárga színe */
}
.hatter-feher {
	background: #ffffff!important; /* egyszerű fehér szín */
}

/* --------------------------------------- */

/* ------------------------------ ÚJ SZÍNEK ------------------------------ */

/* --------------------------------------- */

/* SÁRGA SZÍNEK */

.hatter-sarga1 {
	background: #ffc000 !important;
}
.szoveg-sarga1 {
	color: #ffc000 !important;
}

.hatter-sarga2 {
	background: #ffd965 !important;
}
.szoveg-sarga2 {
	color: #ffd965 !important;
}

.hatter-sarga3 {
	background: #bf9000 !important;
}
.szoveg-sarga3 {
	color: #bf9000 !important;
}

.hatter-sarga4 {
	background: #ffff00 !important;
}
.szoveg-sarga4 {
	color: #ffff00 !important;
}

.hatter-sarga5 {
	background: #ffffd1 !important;
}
.szoveg-sarga5 {
	color: #ffffd1 !important;
}

/* SÁRGA SZÍNEK VÉGE */

/* --------------------------------------- */

/* KÉK SZÍNEK */
.hatter-kek1 {
	background: #5b9bd5 !important;
}
.szoveg-kek1 {
	color: #5b9bd5 !important;
}

.hatter-kek2 {
	background: #2e75b5 !important;
}
.szoveg-kek2 {
	color: #2e75b5 !important;
}

.hatter-kek3 {
	background: #1e4e79 !important;
}
.szoveg-kek3 {
	color: #1e4e79 !important;
}

.hatter-kek4 {
	background: #00b0f0 !important;
}
.szoveg-kek4 {
	color: #00b0f0 !important;
}

.hatter-kek5 {
	background: #0070c0 !important;
}
.szoveg-kek5 {
	color: #0070c0 !important;
}

.hatter-kek6 {
	background: #002060 !important;
}
.szoveg-kek6 {
	color: #002060 !important;
}
/* KÉK SZÍNEK VÉGE */

/* --------------------------------------- */

/* PIROS SZÍNEK */

.hatter-piros1 {
	background: #c00000 !important;
}
.szoveg-piros1 {
	color: #c00000 !important;
}

.hatter-piros2 {
	background: #ff0000 !important;
}
.szoveg-piros2 {
	color: #ff0000 !important;
}

/* PIROS SZÍNEK VÉGE */

/* --------------------------------------- */

/* ZÖLD SZÍNEK */

.hatter-zold1 {
	background: #70ad47 !important;
}
.szoveg-zold1 {
	color: #70ad47 !important;
}

.hatter-zold2 {
	background: #538135 !important;
}
.szoveg-zold2 {
	color: #538135 !important;
}

.hatter-zold3 {
	background: #375623 !important;
}
.szoveg-zold3 {
	color: #375623 !important;
}

.hatter-zold4 {
	background: #92d050 !important;
}
.szoveg-zold4 {
	color: #92d050 !important;
}

.hatter-zold5 {
	background: #99ff33 !important;
}
.szoveg-zold5 {
	color: #99ff33 !important;
}

.hatter-zold6 {
	background: #00cc00 !important;
}
.szoveg-zold6 {
	color: #00cc00 !important;
}

.hatter-zold7 {
	background: #4bc408 !important;
}
.szoveg-zold7 {
	color: #4bc408 !important;
}

.hatter-zold8 {
	background: #33cc33 !important;
}
.szoveg-zold8 {
	color: #33cc33 !important;
}

.hatter-zold9 {
	background: #afff14 !important;
}
.szoveg-zold9 {
	color: #afff14 !important;
}



/* ZÖLD SZÍNEK VÉGE */

.hatter-barna1 {
	background: #7f6000 !important;
}
.szoveg-barna1 {
	color: #7f6000 !important;
}

.hatter-lila1 {
	background: #7030a0 !important;
}
.szoveg-lila1 {
	color: #7030a0 !important;
}

.hatter-pink1 {
	background: #ff67db !important;
}
.szoveg-pink1 {
	color: #ff67db !important;
}

.hatter-pink2 {
	background: #cf38ab !important;
}
.szoveg-pink2 {
	color: #cf38ab !important;
}

.hatter-pink3 {
	background: #cc0099 !important;
}
.szoveg-pink3 {
	color: #cc0099 !important;
}

.hatter-pink4 {
	background: #ff0066 !important;
}
.szoveg-pink4 {
	color: #ff0066 !important;
}

.hatter-pink5 {
	background: #ff3399 !important;
}
.szoveg-pink5 {
	color: #ff3399 !important;
}

.hatter-szurke1 {
	background: #deebf6 !important;
}
.szoveg-szurke1 {
	color: #deebf6 !important;
}

.hatter-lime {
	background: #c7ea46 !important;
}
.szoveg-lime {
	color: #c7ea46 !important;
}

/* ------------------------------ ÚJ SZÍNEK VÉGE ------------------------------ */

/* --------------------------------------- */


.szoveg-sotetkek {
	color: rgba(0, 46, 91)!important; /* arculati sötétkék szín */
}
.szoveg-sotetkek-halvany {
	color: rgba(0, 46, 91, 0.75)!important; /* arculati kék halványabb (75%-os) változata */
}
.szoveg-zold {
	color: #94c83f!important; /* telefonáljon most gomb zöld színe */
}
.szoveg-sotetzold {
	color: #23b14d!important; /* nagy 90 napig ingyen szöveg zöld színe */
}
.szoveg-sarga {
	color: #ffcc00!important; /* versenytárs garancia badge sárga színe */
}
.szoveg-feher {
	color: #fff!important; /* ha valahova fehér színű szöveg kéne */
}


/* Mobil felület sorrendezések 
- ezek csak 490px szélességtől lefelé lépnek életbe
(átlagosan 320-425px széles egy mobil böngésző felbontása a pixel sűrűség miatt. pl S7 edge kijelző-felbontása 1440x2560px, de a böngészőben 360x640px a méret, mert 4 pixelt zsúfol 1 pixel méretre a böngésző)

Ez a sorrendezés csak bizonyos körülmények között teljesül, szóval nem húzható rá bármire, de általánosságban azoknak a div-eknek lehet ezt megadni, amikben szerepel egy alapértelmezett bootstrap class, ami pl.: col-lg-1 től col-lg-12 ig, vagy col-md-1 től col-md-12 ig, ha jól rémlik, akkor xs-ms-md-lg-xl lehet a nevükben. Mert ezeknek van a megjelenése "flex"-re állítva, amivel css-ben megoldható ez a sorrendezés.
*/

@media(max-width: 490px) {
	.sorrend-elso {
		order:1;
	}
	.sorrend-masodik {
		order:2;
	}
}

/* ezt az egy módosítás bent hagyom, de ha a kéknek szánt szövegek megkapják a szekhelyszolgatatas.html fájlban a "szoveg-sotetkek" class-t, akkor ez is törölhető */
h3.text-black, p.text-gray-dark, a.btn-gold {
    color: #002e5b;
}

/* Jobb lent felbukkanó telefonszám doboz 
	- csak szélességet és színt kellett állítani hozzá
*/
#return-to-top {
    width: 115px;
    color: #fff;
}

/* Töltő animáció az oldal elejére
	- új töltőkeretet kapott az oldal - #berger-preloader néven
	- a kiíródó animáció css-ben van, az időzítés, hogy mikor tűnjön el, pedig a js/custom.js fájl tetején
*/

div#berger-preloader {
    position: fixed; /* fix pozícióval a tartalom fölé kerül */
    left: 0; /* képernyő bal oldalától kezdődjön */
    top: 0; /* képernyő tetejétől kezdődjön */
    width: 100%; /* fix pozíciónál a 100%-os méret a kijelző méretét jelöli */
    height: 100%; /* hasonlóan a szélességhez, fix pozíciónál a magasság a kijelző magassága */
    background: #fff; /* fehér háttér - vannak színek, amik 6 helyett 3 karakterrel is leírhatóak, ezek általában teli színek, amik helyett lehetne színt is írni, pl.: white, black, red, green stb., lentebb használva is van 1-2 szín név szerint */
    z-index: 9999; /* fix pozíciónál lehet sorrendezni a diveket réteg szinten, 9999-nél nincs magasabb rétegre állított elem az oldalon, így ezzel ez a réteg kerül minden fölé */
	padding-top: calc( 50vh - 100px ); /* Eltoljuk a szöveget középre, az 50vh = képernyő közepe, 100px nagyjából a 2 szövegdoboz magasságának a fele, így kerül középre a tartalom*/
}

#mindentmegteszunk {
	text-align:center;
	width:100%;
	float:left;
}
#mindentmegteszunk h1 {
    color: #002e5b;
    font-weight: 900;
    font-size: 33px;
    margin-top: 4px;
	
}
#mindentmegteszunk h1 span,
h1#mindentmegteszmobil span {
	opacity:0;
	transition: .4s;
	/*animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
	animation-fill-mode: forwards; */
}
#mindentmegteszunk h1 span.elojott, 
h1#mindentmegteszmobil span.elojott {
	opacity:1;
}
/*
#mindentmegteszunk h1  span.elsoszo {
	animation-delay: 2.5s;
}
#mindentmegteszunk h1  span.masodikszo {
	animation-delay: 3.2s;
}
#mindentmegteszunk h1  span.harmadikszo {
	animation-delay: 4s;
}
*/
.typewriter {
	text-align: center;
    padding: 0 35px;
}

/* gépelős szöveg */
.typewriter h1 {
	color: gold;
	font-size: 32px;
    font-weight: 600;
	position: relative;
    top: 50%;  
    width: auto;
    margin: 0 auto;
    border-right: 2px solid gold;
    font-size: 22px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(0);
	opacity:0;
}


.azanimacios {
	opacity:1;
	animation: typewriter 2.2s steps(35) 0s 1 normal both,
             blinkTextCursor 500ms steps(35) infinite normal;
}
.typewriter h1.azanimacios {
	opacity:1;
}
div#berger-preloader.betoltott {
	display:none;
}
/* A gépelős szöveg animációja */
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}

/* A gépelés előtt haladó kurzor animációja */
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: #eaca63 }
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 20.7em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: gold;}
  to{border-right-color: transparent;}
}
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


.velemenykep {
	margin: 0 auto;
	display: block;
	float: left;
	padding-top: 70px !important;
}

.velemenykep img {
	width: 100px;
}

.velemenyszoveg {
	margin: 0 auto;
	display: block;
	float: right;
}

.bg-gray-extra-light.uk-card.uk-card-default.uk-card-body.text-left.no-shadow {
	height: 345px !important;
}

.csakszoveg {
	height: 230px;
}

	.mobile {
		display: none !important;
	}
	/*.asztali {
		display: block !important;
	}*/


@media(max-width: 490px) {
	.velemenykep {
		padding:0;
		margin:0 auto;
		padding-bottom: 20px;
	}
	.velemenykep img {
		padding: 0;
		margin: 0 auto;
		margin-top: -80px;
		padding: 0 !important;
		width: 40% !important;
	}
	
	.asztali {
		display: none !important;
	}
	.mobile {
		display: block !important;
	}
	
	.item {
		margin: 5px !important;
	}
	
	.ado {
		margin: 0 auto;
		padding: 0;
	}
	.ugyfel {
		margin: 0 auto;
		padding: 0;
	}
	.csakszoveg {
    height: 300px;
}

.bg-gray-extra-light.uk-card.uk-card-default.uk-card-body.text-left.no-shadow {
    height: 480px !important;
}
	
	
.video {
	    width: 50% !important;
}

#berger-preloader h1 {
    font-size: 25px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    margin-left: 0;
    font-weight: 700;
    color: #eaca63;
}

#mindentmegteszunk h1 {
	font-size: 25px !important;
	color: #002e5b;
	margin-top:15px !important;
}

.telefonszam {
    bottom: 40px;
    right: 135px !important;
}

.uk-transition-slide-top {
    transform: none !important;
}

.velemenyszoveg, .csakszoveg, .bg-gray-extra-light.uk-card.uk-card-default.uk-card-body.text-left.no-shadow {
	height: auto !important;
}

}


/*.owl-dots {
    counter-reset: dots;
}
.owl-dot:before {
    counter-increment: dots;
    content: counter(dots);
}

.owl-dot:active:before {
	color: white;
}
.owl-dot:hover:before {
	color: white;
}*/

.blogkep {
	float: left;
}

.asztali, .mobile {
	    padding-bottom: 100px;
}

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.telefonszam  {
	position: fixed;
    bottom: 40px;
    right: 96px;
    background: #f5b324;
    z-index: 999;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transition: all 0.3s;
	width: 150px;
    color: #fff;
    border: 1px solid #002E83;
display:none;
}

#return-to-top {
	right: 250px;
	width: 85px;
    border: 1px solid #002E83 !important;
}

.uk-logo img {
    width: 100px;
}

.footerpadding {
	padding-bottom: 0px !important;
}

.socialikonok {
	padding-right: 200px !important;
}

.image-bg-7 {
    overflow: hidden;
    height: 100%;
    z-index: 2;
    background-blend-mode: overlay;
    background-color: rgba(0, 46, 91, 0.82);
}

/*@media(min-width: 1300px) {
	.asztali {
		max-width: 1300px !important;
	}
	
	.dijszabas {
		padding: 5px !important;
	}
}*/

.item2sor {
	    margin-top: 10px;
}

.teamitem2sor {
	margin-top: 10px !important;
}

.owl-carousel.owl-carousel .owl-nav.disabled {
    display: block !important;
	margin-left: 275px !important;
}

.owl-prev, .owl-next {
	font-size: 55px !important;
	color: #f5b324!important;
} 


.felugroytablak {
    display: none;
}
.felugroytablak iframe {
    width: 100%;
    height: auto;
}
.felugroytablak.felugroytablak.ranyomtak {
    display: block!important;
}
.uk-transition-toggle.elrejt .uk-transition-fade {
    opacity: 1;
}
.uk-inline-clip.uk-transition-toggle.elrejt>img {
    opacity: 0;
}
.elrejt h6.text-gray-extra-dark, .elrejt p.text-gray-extra-dark {
    display: none;
}


.svg-inline--fa.fa-youtube.fa-w-18 {
	font-size: 65px;
    color: #d40000;
}

.link-group.playlinkgroup {
    transform: translateY(14px) !important;
	position: relative;
	transition: .4s all ease-in-out;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.asztalteam {
	display: block !important;
}
.mobileteam {
	display: none !important;
}

.owl-item:hover .link-group.playlinkgroup {
    transform: translateY(0px) !important;
}

.ugyfelekasztali {
	display: block !important;
}

.ugyfelekmobile {
	display: none !important;
}

.adoasztali {
	display: block !important;
}

.adomobile {
	display: none !important;
}


@media(max-width: 490px) {
.mobileteam {
	display: block !important;
	padding-top: 0px !important;
	margin-top: -50px !important;
	padding-bottom: 100px !important;
}

.owl-carousel4 {
	padding-top: 50px !important;
}

.asztalteam {
	display: none !important;
}

.ugyfelekasztali {
	display: none !important;
}

.ugyfelekmobile {
	display: block !important;
}

.adoasztali {
	display: none !important;
}

.adomobile {
	display: block !important;
}



}

.owl-carousel.owl-carousel .owl-nav.disabled {
    display: none !important;
}

.owl-carousel2.owl-carousel .owl-nav.disabled {
    display: none !important;
}

.owl-carousel3.owl-carousel .owl-nav.disabled {
    display: none !important;
}

.owl-carousel4.owl-carousel .owl-nav.disabled {
    display: block !important;
}
#mindentmegteszunk-mobil {
	display:none;
}

@media(max-width:490px) {
	.typewriter {
		display:none!important;
	}
	#mindentmegteszunk-mobil {
		display:block!important;
	}
}

.elrejt .link-group.playlinkgroup {
    display: none;
}

.owl-nav.disabled span {
    margin-right: 10px !important;
} 

.owl-theme .owl-nav [class*=owl-]:hover {
	background: none !important;
}


/* Mini CRM */
.elfogadosok {
    width: 98%;
    float: left;
    margin: 0 1%;
}
.TurnKeyCRM label.kell {
    width: 97%;
    float: right;
}
input#elfogadas1 {
    float: left;
    width: 3%;
    margin: 5px 0 0;
}
.TurnKeyCRM label.kell a {
    font-weight: bold;
    color: #002e5b;
    text-decoration: underline;
}
.TurnKeyCRM label.kell {
    font-size: 14px;
}
.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    width: 240px;
    padding: 8px;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.pika-single.is-hidden {
    display: none
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5)
}

.pika-title {
    position: relative;
    text-align: center
}

.pika-label {
    display: inline-block;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    background-color: #fff
}

.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    opacity: 0
}

.pika-next,
.pika-prev {
    display: block;
    cursor: pointer;
    position: relative;
    outline: 0;
    color: #fff;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    opacity: .5
}

.pika-next:hover,
.pika-prev:hover {
    opacity: 1
}

.is-rtl .pika-next,
.pika-prev {
    float: left;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)
}

.is-rtl .pika-prev,
.pika-next {
    float: right;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)
}

.pika-next.is-disabled,
.pika-prev.is-disabled {
    cursor: default;
    opacity: .2
}

.pika-select {
    display: inline-block
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0
}

.pika-table td,
.pika-table th {
    width: 14.285714285714286%
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: 700;
    text-align: center
}

.pika-button {
    cursor: pointer;
    display: block;
    outline: 0;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5
}

.is-today .pika-button {
    color: #3af;
    font-weight: 700
}

.is-selected .pika-button {
    color: #fff;
    font-weight: 700;
    background: #3af;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: .3
}

.pika-button:hover {
    color: #fff!important;
    background: #ff8000!important;
    box-shadow: none!important;
    border-radius: 3px!important
}

.pika-time {
    width: 50%;
    margin: 0 auto
}

.pika-time tbody {
    text-align: center
}

.pika-time-sep {
    width: 10px
}

.pika-ok {
    position: absolute;
    bottom: 7px;
    right: 7px;
    cursor: pointer
}

.TurnKeyCRM {
    margin: 10px auto;
    max-width: 1000px;
    display: block
}

.TurnKeyCRM label.Required {
    font-weight: 700
}

.TurnKeyCRM label.Required:after {
    content: " *"
}

.TurnKeyCRM fieldset {
    margin: 20px 10px;
    clear: both;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px;
    padding: 10px;
    position: relative;
}

.TurnKeyCRM legend {
    font-size: 17px;
    font-weight: 700;
    line-height: 1em;
    color: #343434
}

.TurnKeyCRM label {
    color: #002e5b;
    font-size: 15px;
    line-height: 1;
    width: 100%;
    float: left;
    text-align: left;
    padding-top: 5px;
    word-break: break-word;
    margin: 0 0 5px;
    font-family: Montserrat;
}

.TurnKeyCRM label.SetLabel {
    width: 30%;
    float: none;
    text-align: left;
    line-height: 23px
}

.TurnKeyCRM input[type=button],
.TurnKeyCRM input[type=submit] {
    border: medium none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    padding: 15px 32px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    background: #002e5b;
}

.TurnKeyCRM input[type=button]:hover,
.TurnKeyCRM input[type=submit]:hover {
    cursor: pointer;
    color: #333!important;
    background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#f2f2f2));
    background: -moz-linear-gradient(top, #e5e5e5, #f2f2f2);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#f2f2f2');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#f2f2f2')"
}

.TurnKeyCRM input[type=date],
.TurnKeyCRM input[type=file],
.TurnKeyCRM input[type=password],
.TurnKeyCRM input[type=text],
.TurnKeyCRM select,
.TurnKeyCRM textarea {
    font-family: arial, helvetica, clean, sans-serif;
    height: auto;
    color: #555;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 8px 0 6px 0;
    display: block;
    font-size: 14px
}

.TurnKeyCRM input[type=date],
.TurnKeyCRM input[type=password],
.TurnKeyCRM input[type=text],
.TurnKeyCRM select,
.TurnKeyCRM textarea {
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 0;
    width: 100%;
    padding: 14px 6px;
    line-height: 1;
    background: #ffffff;
    box-sizing: border-box;
}

.TurnKeyCRM input[type=file] {
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    width: 60%;
    background: #fff;
    box-sizing: border-box
}
form.TurnKeyCRM input[type=submit] {
    width: 400px;
    margin: 0 auto;
}
.TurnKeyCRM .InputBlock {
    margin-bottom: 15px;
    clear: none;
    width: 48%;
    float: left;
    margin: 0 1% 10px;
}
.TurnKeyCRM .InputBlock.lastblock {
	width:98%;
}

.TurnKeyCRM .InputBlock>div {
    margin-left: 35%
}

.TurnKeyCRM .InputBlock>.Description {
    margin-left: 35%;
    color: #999
}

.TurnKeyCRM textarea {
    height: 100px
}

.TurnKeyCRM a,
.TurnKeyCRM a:visited {
    color: #3679c6
}

.TurnKeyCRM a:hover {
    color: #D35D24
}

.TurnKeyCRM .Response {
    margin-left: auto;
    margin-right: auto;
    clear: both;
    display: block;
    width: 80%
}

.TurnKeyCRM .ResponseError {
    color: #B94A48;
    background-color: #F2DEDE;
    border-color: #EED3D7;
    padding: 8px 14px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: block
}

.TurnKeyCRM .Error {
    border: 1px solid #B94A48!important;
    color: #B94A48!important
}

.TurnKeyCRM .ErrorLabel {
    color: #B94A48!important;
    font-weight: 700
}

.TurnKeyCRM.Custom-tiny fieldset {
    margin: 10px 5px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 5px
}

.TurnKeyCRM.Custom-tiny legend {
    font-size: 14px;
    line-height: .8em
}

.TurnKeyCRM.Custom-tiny label {
    font-size: 11px;
    line-height: 16px;
    padding-top: 3px
}

.TurnKeyCRM.Custom-tiny input[type=button],
.TurnKeyCRM.Custom-tiny input[type=submit] {
    height: 31px;
    font-size: 11px;
    padding: 2px 5px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin-top: 9px
}

.TurnKeyCRM.Custom-tiny input[type=date],
.TurnKeyCRM.Custom-tiny input[type=password],
.TurnKeyCRM.Custom-tiny input[type=text],
.TurnKeyCRM.Custom-tiny select,
.TurnKeyCRM.Custom-tiny textarea {
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-size: 11px;
    margin-bottom: 3px;
    margin-top: 4px;
    padding: 2px 3px;
    height: 20px;
    line-height: 16px
}

.TurnKeyCRM.Custom-tiny .InputBlock {
    margin-bottom: 10px
}

.TurnKeyCRM.Custom-tiny textarea {
    height: 75px
}

.TurnKeyCRM.Custom-small fieldset {
    margin: 15px 7px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    padding: 7px
}

.TurnKeyCRM.Custom-small legend {
    font-size: 15px;
    line-height: .9em
}

.TurnKeyCRM.Custom-small label {
    font-size: 12px;
    line-height: 18px;
    padding-top: 4px
}

.TurnKeyCRM.Custom-small input[type=button],
.TurnKeyCRM.Custom-small input[type=submit] {
    height: 35px;
    font-size: 12px;
    padding: 3px 7px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-top: 12px
}

.TurnKeyCRM.Custom-small input[type=date],
.TurnKeyCRM.Custom-small input[type=password],
.TurnKeyCRM.Custom-small input[type=text],
.TurnKeyCRM.Custom-small select,
.TurnKeyCRM.Custom-small textarea {
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 6px;
    padding: 3px 4px;
    height: 25px;
    line-height: 18px
}

.TurnKeyCRM.Custom-small .InputBlock {
    margin-bottom: 12px
}

.TurnKeyCRM.Custom-small textarea {
    height: 90px
}

.TurnKeyCRM.Custom-large fieldset {
    margin: 25px 15px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 4px;
    padding: 12px
}

.TurnKeyCRM.Custom-large legend {
    font-size: 19px;
    line-height: 1.2em
}

.TurnKeyCRM.Custom-large label {
    font-size: 16px;
    line-height: 24px;
    padding-top: 7px
}

.TurnKeyCRM.Custom-large input[type=button],
.TurnKeyCRM.Custom-large input[type=submit] {
    height: 45px;
    font-size: 16px;
    padding: 6px 12px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-top: 18px
}

.TurnKeyCRM.Custom-large input[type=date],
.TurnKeyCRM.Custom-large input[type=password],
.TurnKeyCRM.Custom-large input[type=text],
.TurnKeyCRM.Custom-large select,
.TurnKeyCRM.Custom-large textarea {
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 10px;
    padding: 6px 8px;
    height: 36px;
    line-height: 24px
}

.TurnKeyCRM.Custom-large .InputBlock {
    margin-bottom: 18px
}

.TurnKeyCRM.Custom-large textarea {
    height: 120px
}

@media screen and (max-width:320px) {
    .TurnKeyCRM .InputBlock>.Description,
    .TurnKeyCRM .InputBlock>div {
        margin-right: auto!important;
        margin-left: 0!important
    }
    .TurnKeyCRM {
        width: 100%!important
    }
    .InputBlock {
        float: none!important;
        display: flex!important;
        justify-content: left!important;
        flex-direction: column!important
    }
    .TurnKeyCRM label,
    .TurnKeyCRM label.SetLabel {
        text-align: left!important;
        float: none!important;
        margin-right: auto!important;
        width: 100%!important
    }
    .TurnKeyCRM input[type=date],
    .TurnKeyCRM input[type=password],
    .TurnKeyCRM input[type=text],
    .TurnKeyCRM select,
    .TurnKeyCRM textarea {
        margin-right: auto!important;
        margin-left: 0!important;
        width: 100%!important;
        max-width: 100%!important
    }
    .TurnKeyCRM .InputBlock>.Description {
        text-align: left: !important
    }
    .TurnKeyCRM input[type=file] {
        margin-left: 0!important;
        width: 100%!important
    }
}