/*--------------------------------------------------------------
=== FONTS ===
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,600,600i,700,700i');
/*
light     300
regular   400
medium    500
semi-bold 600
bold      700
black     900
*/


/*--------------------------------------------------------------
=== GLOBAL RESET ===
--------------------------------------------------------------*/

* { margin:0; padding:0; box-sizing:border-box;}
.clearfix { zoom:1;}
.clearfix:after { content:" "; display:table; clear:both;}
header, footer, section, nav, article, aside, details, figcaption, figure, hgroup, main, menu, summary { display:block;}
button { cursor:pointer;}
:focus { outline:none;}
button::-moz-focus-inner { border: 0;}

/* FIX for laptops with scale screen 125% preset  */
@media (-webkit-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.8; }
}


/*--------------------------------------------------------------
=== GLOBAL VAR ===
--------------------------------------------------------------*/
:root {
  --red: #ff4b38;
  --blue: #033859;
}


/*--------------------------------------------------------------
=== GRID - 12cols ===
col-xs	[] <= 768px
col-md	[] >= 769px
--------------------------------------------------------------*/
@media (max-width:768px) {
  .col-xs-12 { flex-basis:100%;}
  .col-xs-11 { flex-basis:91.66666667%;}
  .col-xs-10 { flex-basis:83.33333333%;}
  .col-xs-9 { flex-basis:75%;}
  .col-xs-8 { flex-basis:66.66666667%;}
  .col-xs-7 { flex-basis:58.33333333%;}
  .col-xs-6 { flex-basis:50%;}
  .col-xs-5 { flex-basis:41.66666667%;}
  .col-xs-4 { flex-basis:33.33333333%;}
  .col-xs-3 { flex-basis:25%;}
  .col-xs-2 { flex-basis:16.66666667%;}
  .col-xs-1 { flex-basis:8.33333333%;}

  .xs-offset-left-1 { margin-left:8.33333333%;}
  .xs-offset-left-2 { margin-left:16.66666667%;}
  .xs-offset-left-3 { margin-left:25%;}
  .xs-offset-left-4 { margin-left:33.33333333%;}
  .xs-offset-left-5 { margin-left:41.66666667%;}
  .xs-offset-left-6 { margin-left:50%;}
  .xs-offset-left-7 { margin-left:58.33333333%;}
  .xs-offset-left-8 { margin-left:66.66666667%;}
  .xs-offset-left-9 { margin-left:75%;}
  .xs-offset-right-1 { margin-right:8.33333333%;}
  .xs-offset-right-2 { margin-right:16.66666667%;}
  .xs-offset-right-3 { margin-right:25%;}
  .xs-offset-right-4 { margin-right:33.33333333%;}
  .xs-offset-right-5 { margin-right:41.66666667%;}
  .xs-offset-right-6 { margin-right:50%;}
  .xs-offset-right-7 { margin-right:58.33333333%;}
  .xs-offset-right-8 { margin-right:66.66666667%;}
  .xs-offset-right-9 { margin-right:75%;}
}
@media (min-width:769px) {
  .col-md-12 { flex-basis:100%;}
  .col-md-11 { flex-basis:91.66666667%;}
  .col-md-10 { flex-basis:83.33333333%;}
  .col-md-9 { flex-basis:75%;}
  .col-md-8 { flex-basis:66.66666667%;}
  .col-md-7 { flex-basis:58.33333333%;}
  .col-md-6 { flex-basis:50%;}
  .col-md-5 { flex-basis:41.66666667%;}
  .col-md-4 { flex-basis:33.33333333%;}
  .col-md-3 { flex-basis:25%;}
  .col-md-2 { flex-basis:16.66666667%;}
  .col-md-1 { flex-basis:8.33333333%;}

  .md-offset-left-1 { margin-left:8.33333333%;}
  .md-offset-left-2 { margin-left:16.66666667%;}
  .md-offset-left-3 { margin-left:25%;}
  .md-offset-left-4 { margin-left:33.33333333%;}
  .md-offset-left-5 { margin-left:41.66666667%;}
  .md-offset-left-6 { margin-left:50%;}
  .md-offset-left-7 { margin-left:58.33333333%;}
  .md-offset-left-8 { margin-left:66.66666667%;}
  .md-offset-left-9 { margin-left:75%;}
  .md-offset-right-1 { margin-right:8.33333333%;}
  .md-offset-right-2 { margin-right:16.66666667%;}
  .md-offset-right-3 { margin-right:25%;}
  .md-offset-right-4 { margin-right:33.33333333%;}
  .md-offset-right-5 { margin-right:41.66666667%;}
  .md-offset-right-6 { margin-right:50%;}
  .md-offset-right-7 { margin-right:58.33333333%;}
  .md-offset-right-8 { margin-right:66.66666667%;}
  .md-offset-right-9 { margin-right:75%;}
}


/*--------------------------------------------------------------
=== COMMON LAYOUT ===
--------------------------------------------------------------*/
.container { margin-left:auto; margin-right:auto; width: 100%; max-width: 1420px;}
.display-block { display: block;}
.fl-container { display: flex;}
.fl-wrap { flex-wrap: wrap;}
.fl-nowrap { flex-wrap: nowrap!important;}
.fl-col { flex-direction: column;}
.fl-i-center { align-items: center;}
.fl-j-center { justify-content: center;}
.fl-grow-1 { flex-grow: 1;}
@media (max-width:768px) {
}
@media (min-width:901px) {
  .row { display: flex; width: 100%;}
}

.w-100 { width: 100%;}

.col { min-height: 1px;}
.pull-left { float: left;}
.pull-right { float: right;}
.center {  margin-left: auto; margin-right: auto;}
img, table { border: 0;}
img { display: block; max-width: 100%; height: auto;}
ul { list-style: none;}
#page ul li { position: relative; padding-left: 13px;}
#page ul li:before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 100%; background: #212121;}
ol li { margin-left:24px;}
#page p:not(:last-child), #page ul, #page ol { margin-bottom: var(--mb-base);}

@media (max-width:768px) {
  .container { padding-left: 20px; padding-right: 20px;}
  .xs-fl-col { flex-direction: column;}
  .xs-fl-wrap { flex-wrap: wrap;}
  .xs-fl-i-center { align-items: center;}
  .xs-fl-j-center { justify-content: center;}

  .space-top, .xs-space-top {}
  .space-bot, .xs-space-bot {}
  .space-top-lg, .xs-space-top-lg {}
  .space-bot-lg, .xs-space-bot-lg {}
  .space-top-md, .xs-space-top-md {}
  .space-bot-md, .xs-space-bot-md {}
  .space-top-sm, .xs-space-top-sm {}
  .space-bot-sm, .xs-space-bot-sm {}

  .space-left, .xs-no-space-left {}
  .space-right, .xs-no-space-right {}

  .xs-visible { display: block!important;}
  .xs-hidden { display: none!important;}
  .md-visible { display: none!important;}
  .xs-no-pull { float: none!important;}
}
@media (min-width:769px) {
  .container { padding-left: 50px; padding-right: 50px;}
  .md-fl-i-center { align-items: center;}
  .md-fl-j-center { justify-content: center;}

  .pt, .md-pt {}
  .pb, .md-pb {}
  .pt-lg, .md-pt-lg {}
  .pb-lg, .md-pb-lg {}
  .pt-md, .md-pt-md {}
  .pb-md, .md-pb-md {}
  .pt-sm, .md-pt-sm {}
  .pb-sm, .md-pb-sm {}

  .py, .md-py {}
  .py-lg, .md-py-lg {}
  .py-md, .md-py-md {}
  .py-sm, .md-py-sm {}

  .mt, .md-mt {}
  .mb, .md-mb {}
  .mt-lg, .md-mt-lg {}
  .mb-lg, .md-mb-lg {}
  .mt-md, .md-mt-md {}
  .mb-md, .md-mb-md {}
  .mt-sm, .md-mt-sm {}
  .mb-sm, .md-mb-sm {}

  .my, .md-my {}
  .my-lg, .md-my-lg {}
  .my-md, .md-my-md {}
  .my-sm, .md-my-sm {}

  .ml, .md-ml {}
  .mr .md-mr {}

  .md-pull-left { float:left;}
  .md-pull-right { float:right;}

  .xs-visible { display: none!important;}
  .md-visible { display: block!important;}
  .md-hidden { display: none!important;}
}


/*--------------------------------------------------------------
=== BASE LAYOUT ===
--------------------------------------------------------------*/
body { min-height: 100vh; display: flex; flex-direction: column; width: 100%;}
#page { flex-grow: 1;}


/*--------------------------------------------------------------
=== PRINT ===
--------------------------------------------------------------*/
@media print {
  .hidden-print { display:none!important;}
}



/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
html { font-size: 10px; background: #fff;}
body, td, th, input, select, textarea, button { font: 400 1.6rem/2.06em var(--font-family-base); color:#231f20;}
@media (max-width: 768px) {
  body, td, th, input, select, textarea, button { font-size: 1.5rem; line-height: 1.33em;}
}

.text-left { text-align:left;}
.text-right { text-align:right;}
.text-center { text-align:center;}
.text-center img { margin-left: auto; margin-right: auto;}
.text-justify { text-align:justify;}
.text-nowrap { white-space:nowrap;}
.text-lowercase { text-transform:lowercase;}
.text-uppercase { text-transform:uppercase;}
.text-capitalize { text-transform:capitalize;}
@media (max-width: 768px) {
  .xs-text-center { text-align:center;}
}

h1, .h1, .section-head {}
h2, .h2 {}
h3, .h3 {}

a { color: #fff; text-decoration: none; cursor: pointer; transition: .25s ease-in-out;}
a:hover { color: #fff; text-decoration: underline;}
sup, sub { position:relative; font-size:.7em; vertical-align:baseline;}
sup { top:-.5em;}
sub { bottom:-.25em;}
small, .text-small { font-size:.85em;}
strong, b, .text-bold { font-weight: 700;}
big, .text-big { font-size: 1.33em; line-height: 1.25em;}
.marked {}

.text-light { font-weight: 300;}
.text-normal { font-weight: 400;}
.text-medium { font-weight: 500;}
.text-semiBold { font-weight: 600;}

.red { color: var(--red);}


/*--------------------------------------------------------------
=== Specific for FRONT page ===
--------------------------------------------------------------*/

#page { position: relative; width: 100vw; min-height: 100vh; overflow-x: hidden; /*display: flex; align-items: center; justify-content: center;*/ font-family: "Montserrat"; font-size: 19px; line-height: 1.25; font-weight: 500; color: #fff; background: var(--blue);}
#page .wrapper { z-index: 1; position: relative;}

.row { margin-bottom: calc(20px + 5vh); width: 100%;}
.col-1 {}
  .pre-header { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: .024em; text-transform: uppercase;}
  .pre-header .unerlined { border-bottom: 1px solid var(--red);}
  h2, .h2 { margin-top: 6px; font-size: 28px; line-height: 1.1;font-weight: 700; letter-spacing: .019em; text-transform: uppercase;}
.col-2 {}

.link-line, .copyright { margin-top: calc(20px + 5vh);}
.copyright { font-size: 11px; line-height: 1.25;}

.link-line a { position: relative; color: #fff; font-size: 25px; line-height: 1.25;font-weight: 500; text-decoration: none; text-transform: uppercase;}
.link-line a:hover { text-decoration: underline;}
.link-line a i { right: -55px; top: -8px; width: 40px; height: 40px;}
.link-line a i, .link-line a i:before, .link-line a i:after { position: absolute; border-radius: 100%; border: 1px solid var(--red);}
.link-line a i:before, .link-line a i:after { content: "";}
.link-line a i:before { left: 3px; right: 3px; top: 3px; bottom: 3px;}
.link-line a i:after  { left: 6px; right: 6px; top: 6px; bottom: 6px;}

.logo-line { margin-bottom: calc(30px + 6vh); padding-top: calc(50px + 8vh); max-width: 530px;}
.logo-line img { max-width: 100%;}

@media (max-width: 900px) {
  .logo-line { padding-top: 145px;}
  .logo-line  img { margin: 0 auto; width: 280px;}
  .col-2 { margin-top: 20px;}
  .link-line, .copyright  { text-align: center;}
  .link-line a { display: inline-block; margin-left: -26px;}
  .copyright { margin-top: 200px; margin-bottom: -25px;}
}
@media (max-width: 480px) {
  .copyright { margin-bottom: -35px;}
}
@media (min-width: 901px) {
  .container { padding-left: 50px; padding-right: 50px;}
  .col-1 { flex: 0 0 530px; padding-right: 25px;}
  .col-2 { flex-grow: 1;}
}

/* elements */
/*.element { border: 1px solid pink;}*/
:root .element {
  --elem-width: 580px;
}
.element { z-index: 0;}
.element-top, .element-bottom, .element-left .crcl { position: absolute; display: block; width: var(--elem-width); background-size: var(--elem-width) auto; background-repeat: no-repeat; background-image: url(../img/semicircle.png);}

.element-top { top: 0; left:calc((100vw - 1420px) / 2 + 730px); height: 220px; background-position: center bottom;}
.element-bottom { bottom: 0; left: calc((100vw - 1420px) / 2 - 50px); height: 130px; background-position: center bottom; transform: rotate(180deg);}

.element-left { position: absolute; left: 0; top: 0; width: var(--elem-width); height: var(--elem-width); overflow: hidden;}
.element-left .bg, .element-left .crcl { height: calc(var(--elem-width) / 2);}
.element-left .bg { transform: rotate(135deg); position: absolute; left: -280px; top: -50px; width: var(--elem-width); background: linear-gradient(45deg,  rgba(219,100,34,1) 0%,rgba(130,42,84,1) 100%);}
.element-left .crcl { position: absolute; left: 0; top: 0; width: var(--elem-width); background-position: right top; background-size: calc(var(--elem-width) * 0.75) auto;}

.element-right { position: absolute; right: 0; bottom: 0; width: 200px; height: 200px; overflow: hidden;}
.element-right i { position: absolute; right: -100px; bottom: -100px; width: 200px; height: 200px; transform: rotate(-135deg); background: linear-gradient(to right,  rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.3) 55%,rgba(255,255,255,0.1) 100%);}

@media (max-width: 900px) {
  :root .element {
    --elem-width: 420px;
  }
  .element-bottom { left: 0; width: 100vw; background-size: 500px; height: 200px;}
  .element-left .crcl { background-size: calc(var(--elem-width) * 0.5) auto; background-position: calc(var(--elem-width) * 0.2) top;}
  .element-top { height: 100px;}
}
@media (max-width: 480px) {
  .element-bottom { left: 0; width: 100vw; background-size: 350px; height: 160px;}
}


/*--------------------------------------------------------------
=== ANIMATION ===
--------------------------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInTop {
  -webkit-animation-name: slideInTop;
  animation-name: slideInTop;
}