/* fonts */
@font-face {
  font-family: "Roboto"; font-display: auto; font-fallback: Helvetica,Arial; font-weight: 300;
  src: url(fonts/Roboto-Light.ttf) format('TrueType');
}
@font-face {
  font-family: "Roboto"; font-display: auto; font-fallback: Helvetica,Arial; font-weight: 400;
  src: url(fonts/Roboto-Regular.ttf) format('TrueType');
}
@font-face {
  font-family: "Roboto"; font-display: auto; font-fallback: Helvetica,Arial; font-weight: 500;
  src: url(fonts/Roboto-Medium.ttf) format('TrueType');
}
@font-face {
  font-family: "Roboto"; font-display: auto; font-fallback: Helvetica,Arial; font-weight: 600;
  src: url(fonts/Roboto-SemiBold.ttf) format('TrueType');
}
@font-face {
  font-family: "Roboto"; font-display: auto; font-fallback: Helvetica,Arial; font-weight: 700;
  src: url(fonts/Roboto-Bold.ttf) format('TrueType');
}

@font-face {
  font-family: 'The Sans';
    src: local('The Sans Semi Bold'), local('The-Sans-Semi-Bold'),
        url('fonts/TheSans-SemiBold.woff2') format('woff2'),
        url('fonts/TheSans-SemiBold.woff') format('woff'),
        url('fonts/TheSans-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* global styles */
:root {
  --rb-white: #FFF;
  --rb-darkblue: #014D85;
  --rb-light: #EFF4F8;
	
  --rb-button: #2C93DF;
  --rb-button-active: #69B3E9;
	
  --rb-wrapper-width: 100%;
  --rb-max-width: 100%;
  
  --rb-full-width: 4000px;
  --rb-content-width: 1365px;
  
  /* override bootstrap */
  --bs-border-radius: 40px;

}

@media (min-width: 992px) {
  :root {
    --bs-border-radius: 70px;
  }
}

* {
  transition: all 0.2s ease;
}
* {
  font: 400 18px/30px Roboto, sans-serif;
  color: var(--rb-darkblue);
}

h1, h1 * {
  font: 500 35px/40px The Sans, sans-serif;
  color: var(--rb-darkblue);
}
h2, h2 * {
  font: 500 25px/28px The Sans, sans-serif;
  color: var(--rb-darkblue);
}
h3, h3 * {
  font: 500 20px/23px The Sans, sans-serif;
  color: var(--rb-button);
}
h4, h4 * {
  font: 400 18px/30px Roboto, sans-serif;
	font-style: italic;
  color: var(--rb-darkblue);
}
em, i {
  font-style: italic;
}
.medium {
  font-weight: 500;
}

@media (min-width: 992px) {
  * {
    font: 400 18px/24px Roboto, sans-serif;
  }

  h1, h1 * {
    font: 500 40px/48px The Sans, sans-serif;
  }
  h2, h2 * {
    font: 500 35px/40px The Sans, sans-serif;
  }
  h3, h3 * {
    font: 500 25px/28px The Sans, sans-serif;
  }
  h4, h4 * {
    font: 400 18px/30px Roboto, sans-serif;
  }
}


hr {
  margin: 0;
}
p {
  margin-bottom: 30px;
}

li {
  margin-bottom: 12px;
}

ul.arrow {
	list-style: none;
	padding-left: 0;
}
ul.arrow li {
  margin-bottom: 12px;
	padding: 8px 50px !important;
  text-decoration: none !important;
  background: url('data:image/svg+xml;charset=UTF-8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.06 22.17"><defs><style>.b{fill:%23014D85;stroke:%23014D85;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5px;}</style></defs><line class="b" x1="1.75" y1="11.08" x2="28.93" y2="11.08"/><line class="b" x1="18.62" y1="20.42" x2="29.31" y2="11.08"/><line class="b" x1="18.62" y1="1.75" x2="29.31" y2="11.08"/></svg>') 8px 12px/20px no-repeat;
  background-color: rgba(0, 0, 0, 0);
	border-bottom: 1px solid #96B5CD;
}
ul.arrow li.colWhite {
  background: url('data:image/svg+xml;charset=UTF-8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.06 22.17"><defs><style>.b{fill:%23FFFFFF;stroke:%23FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5px;}</style></defs><line class="b" x1="1.75" y1="11.08" x2="28.93" y2="11.08"/><line class="b" x1="18.62" y1="20.42" x2="29.31" y2="11.08"/><line class="b" x1="18.62" y1="1.75" x2="29.31" y2="11.08"/></svg>') 8px 12px/20px no-repeat;
	border-bottom: 1px solid #518AB5;
}
ul.arrow li:last-child {
	border: none;
}

a, a:hover, a:active, a:visited {
  color: var(--rb-darkblue);
  text-decoration: none;
}



/* button */
a.btn, button.btn {
  border: 1px solid var(--rb-button);
  background-color: var(--rb-button);
  border-radius: 34px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--rb-white);
  padding: 6px 30px;
}
a.btn:hover, a.btn:focus, a.btn:active, 
button.btn:hover, button.btn:focus, button.btn:active {
  border: 1px solid var(--rb-button-active);
  background-color: var(--rb-button-active);
  color: var(--rb-white) !important;
}
a.btn.dark, button.btn.dark {
  border: 1px solid var(--rb-darkblue);
  background-color: var(--rb-darkblue);
}
a.btn.dark:hover, a.btn.dark:focus, a.btn.dark:active, 
button.btn.dark:hover, button.btn.dark:focus, button.btn.dark:active {
  border: 1px solid var(--rb-button-active);
  background-color: var(--rb-button-active);
}

span.btn {
  border: 1px solid var(--rb-darkblue);
  background-color: var(--rb-darkblue);
  border-radius: 34px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--rb-white);
  padding: 6px 30px;
	width: 300px;
	cursor: default;
}
span.btn:hover, span.btn:focus, span.btn:active{
  border: 1px solid var(--rb-darkblue);
  background-color: var(--rb-darkblue);
  color: var(--rb-white) !important;
	cursor: default;
}


@media (min-width: 992px) {
  a.btn, button.btn, span.btn {
    font-size: 20px;
    line-height: 26px;
  }
}

.btn-circle.btn-lg {
  text-align: center;
  font-weight: bold;
  line-height: 1 !important;
  width: 50px;
  height: 50px;
  padding: 15px 10px;
  border-radius: 25px;
}



/* color, background */
.colWhite {
  color: var(--rb-white) !important;
}
.colButton {
  color: var(--rb-button) !important;
}

.bgFullDarkblue {
  background-color: var(--rb-darkblue);
}

.bgLight {
  background-color: var(--rb-light);
  opacity: 0.87;
}

.bgFullLight {
  background-color: var(--rb-light);
}



/* body */
body {}
#wrapper {
  max-width: var(--rb-wrapper-width);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
  background-color: var(--rb-white);
  /*border: 2px solid red; */
}



/* header */
#header { 
  max-width: calc( var(--rb-max-width) + 20px ); 
  padding: 0;
}
#header > .container-full {
  max-width: calc( var(--rb-max-width) + 20px ); 
}
#header .container {
  max-width: var(--rb-content-width);
}
  
#header .container {
  max-width: var(--rb-content-width);
}

@media (min-width: 768px) {
  #header .container { }
}


#headerLogo {
  max-width: 212px;
  padding-top: 35px;
  padding-bottom: 20px;
}
@media (min-width: 992px) {
  #headerLogo {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

#header .navbar-toggler.active, 
#header .navbar-togglerk:hover, 
#header .navbar-toggler {
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}
#header .navbar {
  padding: 0;
}
#header .navbar-nav .nav-item {
  margin-top: 2px;
  margin-bottom: 2px;
}
#header .navbar-nav .nav-link {
  color: var( --rb-white);
	font: 500 25px/55px The Sans, sans-serif;
  padding-left: 20px;
  padding-right: 20px;
}

#header .navbar-nav .nav-link.active, 
#header .navbar-nav .nav-link:hover, 
.navbar-nav .show > .nav-link {
  color: var( --rb-white);
	text-decoration: underline;
}


.navbar-toggler .navbar-toggler-icon {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%281, 77, 133, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.offcanvas {
	background: var( --rb-darkblue);
}
.offcanvas-header {
	justify-content: right;
}

.offcanvas-header .btn-close {
  margin-top: 20px;
	margin-right: 20px;
	font-size: 4px;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	opacity: 1;
	
}
.offcanvas-header  .btn-close:focus {
  outline: 0;
  box-shadow: none;
}
 
 
#header .navbar-nav .nav-lang-divider  {
  display: none;
}
#header .navbar-nav .nav-lang-divider .nav-link {
  padding-left: 0;
  padding-right: 0;
  color: var( --rb-darkblue) !important;
}
@media (min-width: 992px) {
	
  #header .navbar-nav .nav-lang-divider {
    display: block;
  }
  #header .navbar-nav .nav-link {
    font-size: 20px;
    line-height: 40px;
  }
	
	#header .navbar-nav .nav-link {
		color: var( --rb-darkblue);
		font: 500 25px/28px The Sans, sans-serif;
	}

	#header .navbar-nav .nav-link.active, 
	#header .navbar-nav .nav-link:hover, 
	.navbar-nav .show > .nav-link {
		color: var( --rb-darkblue);
		text-decoration: underline;
	}
}

.img-hero {
	width: 100% !important;
}
	

/* footer */
#footer {
  max-width: calc( var(--rb-max-width) + 20px );
  background-color: var(--rb-light);
}
#footerContent {
  background-color: var(--rb-light);
  padding: 30px 0px;
}

#footerLogo {
  max-width: 212px;
  padding-top: 5px;
  padding-bottom: 0px;
}

@media (min-width: 992px) {
  #footerLogo {
    padding-top: 5px;
    padding-bottom: 0px;
  }
}	
	
#footerContent h3 {
	color: var(--rb-darkblue);
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
}

#footerContent p, #footerContent a, #footerContent b {
  color: var(--rb-darkblue) !important;
  font-size: 17px;
	line-height: 23px;
  margin-bottom: 0;
}
#footerContent a {
	text-decoration: underline;
	padding: 0;
}

#footerContent > div {
  max-width: var(--rb-content-width);
}

@media (min-width: 992px) {
  #footerContent {
		padding: 60px 0px;
	}
}


/* structure */

.container {
  max-width: var(--rb-content-width);
	/*border:2px solid lime;*/
}
.contFull {
  max-width: calc( var(--rb-full-width) + 20px );
  overflow-x: hidden;
	/*border:2px solid black;*/
}
.contFullRight {
  max-width: var(--rb-full-width);
  margin-right: -20px;
}
.contFullLeft {
  max-width: var(--rb-full-width);
  margin-left: -20px;
}
@media (min-width: 1200px) {
  .twoCols > div:first-child {
    padding-right:40px;
  }
  .twoCols > div:last-child {
    padding-left:40px;
  }
}

/* spacer */
.spacer { 
  height: 30px;
  /*background: gray;*/
}
@media (min-width: 992px) {
  .spacer { 
    height: 40px;
    /*background: silver;*/
  }
}


/* content */
.card {
	border-radius:0;
	border: none;
}

/* helper */
#backToTop {
  z-index: 10;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 0;
  border: none;
}
#backToTop > img {
  width: 55px;
}




/* display screenInfo */
#screenInfo {
  background: pink;
  border: 1px solid black;
  color: #000;
  font-size: 14px;
  line-height: 14px;
  font-weight: regular;
  position: fixed;
  top: 300px;
  right: 10px;
  padding: 5px;
  z-index: 1500;
  display: block;
}

@media (min-width: 576px) {
  #screenInfo { background: green; color: #fff; } 
}
@media (min-width: 768px) {
  #screenInfo { background: silver; color: #000; } 
}
@media (min-width: 992px) {
  #screenInfo { background: red; color: #fff; } 
}
@media (min-width: 1200px) {
  #screenInfo { background: purple; color: #fff; } 
}
@media (min-width: 1400px) {
  #screenInfo { background: gold; color: #000; } 
}