/* ////////////////////////////////////////////////////   HELP   ////////////////////////////// */
/*
          ##     ## ######## ##       ########
          ##     ## ##       ##       ##     ##
          ##     ## ##       ##       ##     ##
          ######### ######   ##       ########
          ##     ## ##       ##       ##
          ##     ## ##       ##       ##
          ##     ## ######## ######## ##

FLEX:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CHARSET:
https://www.toptal.com/designers/htmlarrows/
ASCII TEXT ART:
http://patorjk.com/software/taag/#p=display&h=0&f=Banner3&t=GALLERY
FontAwesome	-	https://fontawesome.bootstrapcheatsheets.com/
*/

/* RWD: */

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/ }
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/ }
@media only screen and (max-width: 1200px) { /*----------  DESKTOP  ------------*/ }
@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/ }
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/ }
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/ }
@media only screen and (min-width: 768px)  { /*----------  MOBILE (down)  ------*/ }
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/ }
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/ }



/* ////////////////////////////////////////////////////   GENERAL   ////////////////////////////// */
/*
           ######   ######## ##    ## ######## ########     ###    ##
          ##    ##  ##       ###   ## ##       ##     ##   ## ##   ##
          ##        ##       ####  ## ##       ##     ##  ##   ##  ##
          ##   #### ######   ## ## ## ######   ########  ##     ## ##
          ##    ##  ##       ##  #### ##       ##   ##   ######### ##
          ##    ##  ##       ##   ### ##       ##    ##  ##     ## ##
           ######   ######## ##    ## ######## ##     ## ##     ## ########
*/

/* --------------------- headers ------------------------- */

h1,h2,h3,h4,h5,h6 { font-family: "Roboto", sans-serif; margin-bottom:0; font-weight:500; line-height:1.1; text-transform: uppercase; }
h1 { font-size: 2.5em; color:#ff0000; font-weight:400; }
h2 { font-size: 2.0em; color:#ff0000; font-weight:400; }
h3 { font-size: 1.5em; color:#ff0000; font-weight:400; }
h4, h5 { font-size: 1.1em; color:#000; font-weight:700; }
h6 {  color:#000; font-weight:700; }

/**  style dark  **/

.style-dark h1, .style-dark h2, .style-dark h3, .style-dark h4, .style-dark h5 { color:#ff0000 !important; }

/* --------------------- paragraphs ------------------------- */

p { font-size: 0.9em; margin:1.2em 0 0 0; }
b, strong{ font-weight:700; }

.white { color:#fff; }
.comment{ color:rgba(40, 50, 78, 0.3); font-style:italic; }
.important{ color:#134db2; font-weight:bold; font-size:1em; }
.quotation{ color:#252525; font-style: italic; }

/**  style dark  **/

.style-dark, .style-dark p { color:rgba(255,255,255,1) !important; }
.style-dark .comment { color:rgba(255,255,255,0.6); }
.style-dark strong{ color:#fff; }

/* --------------------- links ------------------------- */

a{ color: #ff0000; }
a:hover{ color: #252525; }

/**  style  **/

.dark a, .dark2 a { color: #ff0000; }

/**  style dark  **/

.style-dark a{ color: #ff0000; }
.style-dark a:hover{ color: #fff; }


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  h1 { font-size: 2.4em; }
  h1.title { font-size: 3em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.4em; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  h1 { font-size: 2.2em; }
  h1.title { font-size: 2.5em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.3em; }
  h4 { font-size: 1.1em; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
}
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/
}



/* ////////////////////////////////////////////////////   LISTs   ////////////////////////////// */
/*
          ##       ####  ######  ########  ######
          ##        ##  ##    ##    ##    ##    ##
          ##        ##  ##          ##    ##
          ##        ##   ######     ##     ######
          ##        ##        ##    ##          ##
          ##        ##  ##    ##    ##    ##    ##
          ######## ####  ######     ##     ######
*/

.content ul, .content ol {
	list-style-type: none;
	padding-left: 1em;
	counter-reset: li;
  font-size:0.9em;
}
.content ul > li, .content ol > li {
	position: relative;
	padding-left: 1.5em;
	margin-top: 1em;
	counter-increment: li;
}
.content ul > li::before {
	position: absolute;
	top: 0;
	left: 0.7em;
	font-family: FontAwesome;
	content: "\f105";
	color: #ff0000;
}
.content ul.checklist > li::before {
	font-family: FontAwesome;
	content: "\f00c";
}
.content ul.features > li::before {
	content: "";
}
.content ul.features > li {
  background: url(../img/layout/bullet-check.png) no-repeat 0% 50%;
  background-size: 44px 44px;
  min-height: 44px;
  padding-left: 3em;
  display: flex;
  align-items: center;
}
.content ol > li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: "Roboto", sans-serif;
  font-weight: bold;
	content: counter(li) ".";
	color: #ff0000;
}
.content .lev-2 {
	padding-left: 2em;
	padding-top: 1em;
	font-size: 0.9em;
	counter-reset: li2;
}
.content .lev-2 > li {
	counter-increment: li2;
	margin-top: 0.6em;
}
.content ul.lev-2 > li::before {
	font-family: "Roboto", sans-serif;
	content: "\2022";
}
.content ol.lev-2 > li::before {
	content: counter(li2, lower-latin) ")";
}
.content .lev-3 {
	padding-left: 4em;
	padding-top: 1em;
	font-size: 0.85em;
	counter-reset: li3;
}
.content .lev-3 > li {
	counter-increment: li3;
	margin-top: 0.2em;
}
.content ul.lev-3 > li::before {
	font-family: "Roboto", sans-serif;
	content: "\2013";
}
.content ol.lev-3 > li::before {
	content: counter(li3, lower-roman) ".";
}

/**  style  **/

*[class*="c-"] ul > li, *[class*="c-"] > li { color: #252525; }

/**  style dark  **/

.style-dark ul, .style-dark ol, .style-dark ul > li, .style-dark ol > li {
  color:rgba(255,255,255,1) !important;
}


/* ////////////////////////////////////////////////////   IMAGES   ////////////////////////////// */
/*
          #### ##     ##  ######
           ##  ###   ### ##    ##
           ##  #### #### ##
           ##  ## ### ## ##   ####
           ##  ##     ## ##    ##
           ##  ##     ## ##    ##
          #### ##     ##  ######
*/

p + .img{
  margin-top: 2em;
}
.img img{
	width:100%;
}



/* ////////////////////////////////////////////////////   BUTTONS   ////////////////////////////// */
/*
          ########  ######## ##    ##  ######
          ##     ##    ##    ###   ## ##    ##
          ##     ##    ##    ####  ## ##
          ########     ##    ## ## ##  ######
          ##     ##    ##    ##  ####       ##
          ##     ##    ##    ##   ### ##    ##
          ########     ##    ##    ##  ######
*/

.btns{
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
	margin-top:2rem;
}
.btns a{
	margin:0 10px 10px 0;
}
.btns.center{
	justify-content: center;
  flex-direction: row;
}
.btn{
	display: flex;
  align-items: center;
  justify-content: center;

	overflow: hidden;
	padding: 1.2rem 3rem;
	margin-bottom: 0.5rem;
	min-width:120px;

	color: #fff;
	background-color: #ff0000;
	box-shadow: 3px 5px rgba(0,0,0,0.16);
	outline-offset: -2px;

	font-family: "Roboto Slab", sans-serif;
	font-weight: 700 !important;
	font-size: 0.9em !important;
	letter-spacing: 0.08rem;
	line-height: 1.1;
	white-space: nowrap;

	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	vertical-align: middle;

	transition: all .25s ease-in-out;
	cursor: pointer;
}
.btn:hover{
	color: #ff0000;
	background-color: #252525;
}
.btn.icon{
	padding: 0.7rem 2.1875rem;
}
.btn.icon i{
  padding-right:0.5em;
  font-size: 2em;
}
.btn.icon i.after{
  padding-right:0;
  padding-left:0.5em;
}
.btn span {
  margin-left: 4px !important;
}
.btn p:first-of-type {
  margin-top: 0px !important;
}
.btn-icon{
  min-width:1px;
  padding: 1rem;
  width: 4rem;
  height: 4rem;
  font-size: 1.4rem !important;
}

/**  style  **/

*[class*="bg-"] > .btn, .btn[class*="bg-"],
.style-dark *[class*="bg-"] > .btn:hover > i, .style-dark .btn[class*="bg-"]:hover > i,
.style-dark *[class*="bg-"] > .btn:hover span, .style-dark .btn[class*="bg-"]:hover span
{ color:#fff !important; }

*[class*="bg-"] > .btn:hover, .btn[class*="bg-"]:hover {
  background-color: #252525 !important;
  border-color: #252525 !important;
}
.style-dark *[class*="bg-"] > .btn, .style-dark .btn[class*="bg-"] {
}
.style-dark *[class*="bg-"] > .btn:hover, .style-dark .btn[class*="bg-"]:hover{ background-color:#fff !important; }

/**  style dark  **/

.style-dark .btn{
  color: #fff;
}
.style-dark .btn i{
}
.style-dark .btn span{
  color: #252525;
  margin-left: 0.3em;
}
.style-dark .btn:hover{
	color:#252525;
	background-color: #ffffff;
}
.style-dark .btn:hover span, .style-dark .btn:hover i{
  color: #252525 !important;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .btn{
    padding: 1rem 2rem;
    margin-bottom: 1rem;
    white-space: normal;
    box-shadow: 3px 6px rgba(0,0,0,0.25);
    font-size: 1.1em !important;
  }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .btns{
		flex-direction:column;
		align-items:stretch;
	}
	.btns a{ margin: 0 0 10px 0; }
	.btn{
		padding: 1.5rem;
		font-size: 1em !important;
		width: 100%;
	}
}



/* ////////////////////////////////////////////////////   BLOCKQUOTE   ////////////////////////////// */
/*
          ########  ##        #######   ######  ##    ##
          ##     ## ##       ##     ## ##    ## ##   ##
          ##     ## ##       ##     ## ##       ##  ##
          ########  ##       ##     ## ##       #####
          ##     ## ##       ##     ## ##       ##  ##
          ##     ## ##       ##     ## ##    ## ##   ##
          ########  ########  #######   ######  ##    ##
*/

blockquote{
	background-color: #daeaf7;
	border-left: 4px solid #ff0000;
	margin: 2em 0;
	padding: 3em;
}

/**  style  **/

blockquote[class*="bg-"] { border-left-color: #252525 !important; color: #fff; }


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  blockquote {
    border-left-width: 3px;
    margin: 1em 0;
    padding: 1.5em;
  }
}



/* ////////////////////////////////////////////////////   BOXES   ////////////////////////////// */
/*
          ########   #######  ##     ## ########  ######
          ##     ## ##     ##  ##   ##  ##       ##    ##
          ##     ## ##     ##   ## ##   ##       ##
          ########  ##     ##    ###    ######    ######
          ##     ## ##     ##   ## ##   ##             ##
          ##     ## ##     ##  ##   ##  ##       ##    ##
          ########   #######  ##     ## ########  ######
*/

.box{
  background: rgba(19,77,178,0.08);
  margin-bottom: 1.5em;
  padding: 1.5em 2em;
}
.box:last-of-type{
  margin-bottom: 0;
}
.box.margin-top{
  margin-top: 1.5em;
}
.box > *:first-child, .box > img + *{
  margin-top: 0;
}
.box img{
  clear: both;
  float: right;
  margin-left: 1em !important;
  margin-bottom: 1em;
  width: 150px;
  height: 150px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* -------------------------  Boxes with icons  -------------------------- */
.box-icon{
  position: relative;
  margin-bottom: 1.5em;
  padding: 0.5em 0 0 3em;
}
.box-icon[class*="bg-"]{
  padding: 1.5em 2em 1.5em 5em
}
.box-icon:last-of-type{
  margin-bottom: 0;
}
.box-icon p:first-of-type{
  margin-top: 0;
}
.box-icon > i.fa{
  position: absolute;
  display: block;
  width:2.2em;
  height:2.2em;
  top: 0;
  left: 0;
  color: #252525;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-icon[class*="bg-"] > i.fa{
  width: auto;
  height: auto;
  top: 50%;
  left: 0.8em;
  font-size: 2em;
  transform: translate(0,-50%);
}

/* -------------------------  Box with contact Person  -------------------------- */

.box-person{
  display: flex;
  align-items: center;
  padding-left: 90px;
  margin-top: 1em;
  background: url(../img/illustrations/contact-person.png) no-repeat 0% 50%;
  background-size: contain;
  height: 80px;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .box img{ float: none; display: block; margin: 0 auto 1em !important; }
}



/* ////////////////////////////////////////////////////   ARROWs   ////////////////////////////// */
/*
             ###    ########  ########   #######  ##      ##  ######
            ## ##   ##     ## ##     ## ##     ## ##  ##  ## ##    ##
           ##   ##  ##     ## ##     ## ##     ## ##  ##  ## ##
          ##     ## ########  ########  ##     ## ##  ##  ##  ######
          ######### ##   ##   ##   ##   ##     ## ##  ##  ##       ##
          ##     ## ##    ##  ##    ##  ##     ## ##  ##  ## ##    ##
          ##     ## ##     ## ##     ##  #######   ###  ###   ######
*/

div[class*="arrow-"] {
  width: 0;
  height: 0;
  border: 12px solid white;
  background: transparent !important;
  position: absolute;
}
div.arrow-down{
  top: -1px;
  left: calc(50% - 12px);
}
div.arrow-right{
  left: -1px;
  top: calc(50% - 12px);
}
div.arrow-up{
  bottom: -1px;
  left: calc(50% - 12px);
}
div.arrow-left{
  right: -1px;
  top: calc(50% - 12px);
}

div[class*="c-"].arrow-down, div.arrow-down{
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

div[class*="c-"].arrow-right, div.arrow-right{
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}
div[class*="c-"].arrow-up, div.arrow-up{
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
div[class*="c-"].arrow-left, div.arrow-left{
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}



/* ////////////////////////////////////////////////////   ICONS   ////////////////////////////// */
/*
          ####  ######   #######  ##    ##  ######
           ##  ##    ## ##     ## ###   ## ##    ##
           ##  ##       ##     ## ####  ## ##
           ##  ##       ##     ## ## ## ##  ######
           ##  ##       ##     ## ##  ####       ##
           ##  ##    ## ##     ## ##   ### ##    ##
          ####  ######   #######  ##    ##  ######
*/

/* --------------------  ikony: text / span  ---------------------- */

*.i-doc, *.i-date {
	font-size: 1em;
	display:block;
	padding: 0 0 0 1.6em;
}
*.i-doc::before, *.i-date::before {
  font-family: 'FontAwesome';
  font-weight:300;
  float: left;
  margin-left: -1.6em;
  color: #ff0000;
}
.style-dark *.i-doc::before, .style-dark *.i-date::before { color: #fff; }

.i-date::before { content: '\f073'; }
.i-doc::before { content: '\f016'; }

/* --------------------  ikony: message  ---------------------- */

*[class*="ico-msg-"] {
	background-size: 150px;
	background-repeat: no-repeat;
	background-position: 25px 50%;
	padding-left: 200px;
}
.ico-msg-bulb{ background-image:url(../img/icons/msg/ico-bulb.png); }
.ico-msg-alert{ background-image:url(../img/icons/msg/ico-alert.png); }
.ico-msg-quote{ background-image:url(../img/icons/msg/ico-quote.png); }
.ico-msg-target{ background-image:url(../img/icons/msg/ico-target.png); }
.ico-msg-finance{ background-image:url(../img/icons/msg/ico-finance.png); }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width:768px){
  *[class*="ico-msg-"] {
  	background-size: 100px;
  	background-position: 0px 50%;
  	padding-left: 100px;
  }
}



/* ////////////////////////////////////////////////////   UNDERLINE   ////////////////////////////// */
/*
          ##     ## ##    ## ########  ######## ########  ##       #### ##    ## ########
          ##     ## ###   ## ##     ## ##       ##     ## ##        ##  ###   ## ##
          ##     ## ####  ## ##     ## ##       ##     ## ##        ##  ####  ## ##
          ##     ## ## ## ## ##     ## ######   ########  ##        ##  ## ## ## ######
          ##     ## ##  #### ##     ## ##       ##   ##   ##        ##  ##  #### ##
          ##     ## ##   ### ##     ## ##       ##    ##  ##        ##  ##   ### ##
           #######  ##    ## ########  ######## ##     ## ######## #### ##    ## ########
*/

.underline{
  display:block;
  width: 100%;
  height: 6px;
  margin-top:1.5em;
  background:url(../img/layout/underline.png) no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.style-dark .underline, .bg-dark .underline{
  background:url(../img/layout/underline-style-dark.png) no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}



/* ////////////////////////////////////////////////////   SEPARATORs   ////////////////////////////// */
/*
           ######  ######## ########     ###    ########     ###    ########  #######  ########
          ##    ## ##       ##     ##   ## ##   ##     ##   ## ##      ##    ##     ## ##     ##
          ##       ##       ##     ##  ##   ##  ##     ##  ##   ##     ##    ##     ## ##     ##
           ######  ######   ########  ##     ## ########  ##     ##    ##    ##     ## ########
                ## ##       ##        ######### ##   ##   #########    ##    ##     ## ##   ##
          ##    ## ##       ##        ##     ## ##    ##  ##     ##    ##    ##     ## ##    ##
           ######  ######## ##        ##     ## ##     ## ##     ##    ##     #######  ##     ##
*/

.top-line{
  border-top: 5px solid #ff0000;
}
.top-line-slim{
  border-top: 1px solid #ff0000;
}
.no-line{
  border: none !important;
}



/* ////////////////////////////////////////////////////   ACCORDIONS   ////////////////////////////// */
/*
             ###     ######   ######   #######  ########  ########  ####  #######  ##    ##
            ## ##   ##    ## ##    ## ##     ## ##     ## ##     ##  ##  ##     ## ###   ##
           ##   ##  ##       ##       ##     ## ##     ## ##     ##  ##  ##     ## ####  ##
          ##     ## ##       ##       ##     ## ########  ##     ##  ##  ##     ## ## ## ##
          ######### ##       ##       ##     ## ##   ##   ##     ##  ##  ##     ## ##  ####
          ##     ## ##    ## ##    ## ##     ## ##    ##  ##     ##  ##  ##     ## ##   ###
          ##     ##  ######   ######   #######  ##     ## ########  ####  #######  ##    ##
*/

.accordion{
  margin: 0em;
  border-top: 1px solid rgba(0,0,0,0.08);
  -webkit-transition: .3s;
  transition: .3s;
}
.accordion:first-of-type{
  margin-top: 1.5em;
}
.accordion:last-of-type{
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.accordion > *:nth-child(1){
  padding: 0.8em calc(28px + 1em) 0.8em 0em;
  position: relative;
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
}
.accordion.active > *:nth-child(1) {
  /*background-color: rgba(0,0,0,0.04);*/
}
.accordion > *:nth-child(1):hover, .accordion.active > *:nth-child(1):hover{
  color: #134db2;
}
.accordion > *:nth-child(2){
  padding: 0 0;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.accordion.active > *:nth-child(2){
  padding: 0 0 1.5em 0;
  max-height: 200px;
}
.accordion > *:nth-child(1)::after{
  display: block;
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  right: 0.5em;
  -webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: .3s;
  transition: .3s;

  font-family: 'FontAwesome';
  content:"\f067";
  font-size: 14px;
  font-weight:300;
  text-align: center;
  color: #ff0000;

  border-radius: 50%;
  padding-top: 6.5px;
}
.accordion.active > *:nth-child(1)::after {
  transform: translate(0, 0) scale(0.8) rotate(-135deg);
  background: #ff0000;
  color: #fff;
  top: 0.5em;
  right: 0.5em;
}
.accordion > *:nth-child(1):hover * {
  color: #134db2 !important;
}
.accordion > *:nth-child(1):hover::after {
  color: #134db2;
  background: rgba(0,0,0,0.06);
}
.accordion.active > *:nth-child(1):hover::after{
  color: #fff;
  background: #134db2;
}

/* ---  Dark style  --- */

.style-dark .accordion > *:nth-child(1)::after { color: #fff; }
.style-dark .accordion{ border-top: 1px solid rgba(255,255,255,0.08); }
.style-dark .accordion:last-of-type{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.style-dark .accordion > *:nth-child(1):hover, .style-dark .accordion.active > *:nth-child(1):hover{
  color: #ff0000 !important;
}
.style-dark .accordion > *:nth-child(1):hover::after {
  color: #ff0000;
  background: rgba(255,255,255,0.06);
}
.style-dark .accordion.active > *:nth-child(1)::after {
  color: #134db2;
  background: #fff;
}
.style-dark .accordion.active > *:nth-child(1):hover::after{
  color: #fff;
  background: #ff0000;
}



/* ////////////////////////////////////////////////////   e-MAIL   ////////////////////////////// */
/*
          ######## ##     ##    ###    #### ##
          ##       ###   ###   ## ##    ##  ##
          ##       #### ####  ##   ##   ##  ##
          ######   ## ### ## ##     ##  ##  ##
          ##       ##     ## #########  ##  ##
          ##       ##     ## ##     ##  ##  ##
          ######## ##     ## ##     ## #### ########
*/

span.contact4s{
  display: inline-block;
  margin-top: -5px !important;
  margin-left: 3px !important;
  top: 5px;
  position: relative;
}
span.contact4s img{
  width:auto !important;
}
#footer span.contact4s {
  top: 3px;
}