/* ----- Common style ----- */
.left {float:left}
.right {float:right}
.clear {clear:both;}
.m16 {margin-top:16px}
.m24 {margin-top:24px}
.m32 {margin-top:32px}
.m40 {margin-top:40px}
.m48 {margin-top:48px}
.m64 {margin-top:64px}
.m80 {margin-top:80px}
.m120 {margin-top:120px}
.m128 {margin-top:128px}
.on-main {
    background:url('../images/background.png') 50% 0 no-repeat;
    background-size: 1920px 1080px;
}
body {font-family: "Montserrat", sans-serif;}
h1 {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 80px;
}
h2 {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 64px;
}
h3 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 64px;
}
h4 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 48px;
}
h5 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
}
#site-description {margin-top:72px;}
p.normal,
p.normal strong {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
}
p.normal strong {font-weight: 700; color:#242426;}
p.small {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
}
p.accent,
p.accent strong {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 40px;
}
p.accent strong {font-weight: 700;}
p.big,
p.big strong {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 56px;
}
p.big strong {font-weight: 700;}
p.biggest {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    line-height: 64px;
}
.blue {color:#3340FF;}
.teal {color:#15808C;}
.back {
    position: fixed;
    padding: 16px;
    margin-left:-16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    z-index:100;
}
.back img {
    margin-right:16px;
    float:left;
}
.back a {
    float:left;
    font-size: 24px;
    line-height: 32px;
}
.shadow {box-shadow:0px 4px 8px rgba(0, 0, 0, 0.2);}
.flex {
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-flow: row wrap;
    column-gap: 32px;
}
.button, .button:visited {
    padding:16px 24px;
    border: 2px solid #0433FF;
    border-radius: 8px;
    display: inline-block;
}
.button:hover {
    text-decoration: none !important;
    background-color: #F3F5FF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* ----- Navigation style ----- */
#site-logo{
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
#menu {
    display: flex;
    align-items: center;
    gap: 32px;
}
#menu li {
    color: var(--light-11-shadow-gray-01-darker, #242426);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


/* ----- Index ----- */
#container article {float: left;}
#container article:nth-of-type(2n) {float: right;}
#container article:last-of-type {margin-bottom:0;}
#container article h4 {margin:32px 0 0 0;}
.article-on-main p.accent {padding-right:56px;}
.arrow {float:right;}
.arrow {transition: all 0.8s;}
.article-on-main:hover {cursor:pointer;}
.article-on-main:hover .arrow {margin-right:-24px;}
.article-on-main:hover a {text-decoration:underline;}
.article-on-main .wp-post-image {transition: all 0.8s; border-radius: 8px;}
.article-on-main:hover .wp-post-image {
    transform: scale(1.025);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* ----- Single Post ----- */
.page-title-post {margin-top:64px;}
.grey {
    background:#F5F6F7;
    padding:80px 0;
}
.bg_one, .bg_two,
.bg_three,.bg_four {
    margin-left:-32px;
    padding-left:32px;
}
.bg_one {background:url('../images/one.svg') 0 32px no-repeat;}
.bg_two {background:url('../images/two.svg') 0 32px no-repeat;}
.bg_three {background:url('../images/three.svg') 0 32px no-repeat;}
.bg_four {background:url('../images/four.svg') 0 32px no-repeat;}

/* ----- Footer style ----- */
.divider{
	display:block;
	height:1px;
	background-color:#C4C4C4;
	width:100%;
}
.footer_list_left,
.footer_list_right {
	display:block;
	float:left;
}
.footer_list_left li,
.footer_list_right li {
    display:block;
    height:32px;
    margin:0 0 32px 0;
    font-size: 24px;
    line-height: 24px;
}
.footer_list_left li img,
.footer_list_right li img {
    float:left;
	margin:0 24px 0 0;
    width:32px;
    height:32px;
}
.footer_list_left li a,
.footer_list_right li a {
    margin-top:4px;
    display:block;
    float:left;
}
.footer_list_left a.mail {color:#DC473A;}
.footer_list_left a.in {color:#007EBB;margin-top:6px;}
.footer_list_left a.md,
.footer_list_right a.inst {color:#000;}
.footer_list_right a.be {color:#1769FF;}
.footer_list_right a.dr {color:#EC4989;}

/* ----- Adaptive style ----- */
/* Extra small devices (phones, 320px and down) */
@media only screen and (min-width: 300px) {
    .wrapper {width:316px;margin:0 auto;}
    .col-xxs-2 {width:148px}
    .col-xxs-4 {width:316px}
    #container article:first-of-type {margin:104px 0 56px 0;}
    #container article {margin:0 0 56px 0;}
    .flex {column-gap:20px;}
}
@media only screen and (min-width: 300px) and (max-width:599px) {
    .ml4 div, .ml6 div {margin-left: 20px;}
    .ml4 div:nth-of-type(2n+1), .ml6 div:nth-of-type(2n+1) {margin-left:0;}
}

/* Extra small devices (phones, 640px and up) */
@media only screen and (min-width: 600px) {
    .wrapper {width:580px;margin:0 auto;}
    .col-xs-2 {width:180px}
    .col-xs-3 {width:280px}
    .col-xs-4 {width:380px}
    .col-xs-6 {width:580px}
    #container article:first-of-type {margin:104px 0 64px 0;}
    #container article {margin:0 0 64px 0;}
    .flex {column-gap:20px;}
}
@media only screen and (min-width: 600px) and (max-width:749px) {
    .ml4 div, .ml6 div {margin-left: 20px;}
    .ml4 div:nth-of-type(2n+1), .ml6 div:nth-of-type(2n+1) {margin-left:0;}
}

/* Small devices (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 750px) {
    .wrapper {width:688px;margin:0 auto;}
    .col-s-2 {width:160px}
    .col-s-3 {width:248px}
    .col-s-4 {width:336px}
    .col-s-5 {width:424px}
    .col-s-6 {width:512px}
    .col-s-8 {width:688px}
    #container article:first-of-type {margin:104px 0 64px 0;}
    #container article {margin:0 0 64px 0;}
    .flex {column-gap:16px;}
}
@media only screen and (min-width: 750px) and (max-width:999px) {
    .ml4 div, .ml6 div {margin-left: 16px;}
    .ml4 div:nth-of-type(4n+1), .ml6 div:nth-of-type(4n+1) {margin-left:0;}
}

/* Medium devices (landscape tablets, 1024px and up) */
@media only screen and (min-width: 1000px) {
    .wrapper {width:944px;margin:0 auto;}
    .col-m-2 {width:144px}
    .col-m-3 {width:224px}
    .col-m-4 {width:304px}
    .col-m-5 {width:384px}
    .col-m-6 {width:464px}
    .col-m-7 {width:544px}
    .col-m-8 {width:624px}
    .col-m-9 {width:704px}
    .col-m-12 {width:944px}
    #container article:first-of-type {margin:128px 0 80px 0;}
    #container article {margin:0 0 80px 0;}
    .flex {column-gap:16px;}
    .ml4 div, .ml6 div {margin-left: 16px;}
    .ml4 div:nth-of-type(4n+1) {margin-left:0;}
    .ml6 div:nth-of-type(6n+1) {margin-left:0;}
}
   
/* Large devices (laptops/desktops, 1280px and up) */
@media only screen and (min-width: 1280px) {
    .wrapper {width:1128px;margin:0 auto;}
    .col-l-2 {width:168px}
    .col-l-3 {width:264px}
    .col-l-4 {width:360px}
    .col-l-5 {width:456px}
    .col-l-6 {width:552px}
    .col-l-7 {width:648px}
    .col-l-8 {width:744px}
    .col-l-9 {width:840px}
    .col-l-12 {width:1128px}
    #container article:first-of-type {margin:128px 0 80px 0;}
    #container article {margin:0 0 80px 0;}
    .flex {column-gap:24px;}
    .ml4 div, .ml6 div {margin-left: 24px;}
    .ml4 div:nth-of-type(4n+1) {margin-left:0;}
    .ml6 div:nth-of-type(6n+1) {margin-left:0;}
}

/* Extra large devices (large laptops and desktops, 1920px and up) */
@media only screen and (min-width: 1900px) {
    .wrapper {width:1600px;margin:0 auto;}
    .col-2 {width:240px}
    .col-3 {width:376px}
    .col-4 {width:512px}
    .col-5 {width:648px}
    .col-6 {width:784px}
    .col-7 {width:920px}
    .col-8 {width:1056px}
    .col-9 {width:1192px}
    .col-12 {width:1600px}
    #container article {margin:160px 0 80px 0;}
    #container article:nth-of-type(2){margin:424px 0 80px 0;}
    .flex {column-gap:32px;}
    .ml4 div, .ml6 div {margin-left: 32px;}
    .ml4 div:nth-of-type(4n+1) {margin-left:0;}
    .ml6 div:nth-of-type(6n+1) {margin-left:0;}
}

@media only screen and (min-width: 300px), (min-width: 600px) {
    h1 {font-size: 40px;line-height: 56px;}
    h2 {font-size: 32px;line-height: 40px;}
    h3 {font-size: 28px; line-height: 40px;}
    h4 {font-size: 24px; line-height: 32px;}
    h5 {font-size: 20px; line-height: 32px;}
    #container article h4 {margin:24px 0 0 0;}
    p.normal, p.normal strong {font-size: 18px;line-height: 28px;}
    p.small {font-size: 16px;line-height: 24px;}
    p.accent, p.accent strong {font-size: 22px;line-height: 36px;}
    p.big, p.big strong {font-size: 24px;line-height: 40px;}
    p.biggest {font-size: 26px;line-height: 40px;}
    .arrow {margin:-32px 0 0 0;}
    .page-title {margin-top:64px;}
    .sticky-mc {position: relative; margin-bottom:64px;}
    .sticky-img {position: relative; margin-top:64px;}
    #dima {margin-bottom:64px;}
    #persona-two {margin-top:64px;}
}
@media only screen and (min-width: 750px), (min-width: 1000px) {
    h1 {font-size: 52px;line-height: 68px;}
    h2 {font-size: 44px;line-height: 52px;}
    h3 {font-size: 34px; line-height: 52px;}
    h4 {font-size: 28px; line-height: 40px;}
    h5 {font-size: 24px; line-height: 36px;}
    p.normal, p.normal strong {font-size: 20px;line-height: 32px;}
    p.small {font-size: 16px;line-height: 24px;}
    p.accent, p.accent strong {font-size: 24px;line-height: 36px;}
    p.big, p.big strong {font-size: 28px;line-height: 48px;}
    p.biggest {font-size: 34px;line-height: 56px;}
    .arrow {margin:-36px 0 0 0;}
    .page-title {margin-top:0;}
}
@media only screen and (min-width: 750px) {
    .sticky-mc {position: relative; margin-bottom:64px;}
    .sticky-img {position: -webkit-sticky; /* Safari */ position: sticky;top: 16px; margin-top:0;}
    #persona-two {margin-top:64px;}
}
@media only screen and (min-width: 1000px) {
    .sticky-mc {position: -webkit-sticky; /* Safari */ position: sticky;top: 16px; margin-bottom:0px;}
    .sticky-img {position: -webkit-sticky; /* Safari */ position: sticky;top: 16px; margin-top:0;}
    #persona-two {margin-top:0px;}
}
@media only screen and (min-width: 1350px), (min-width: 1900px) {
    h1 {font-size: 64px;line-height: 80px;}
    h2 {font-size: 56px;line-height: 64px;}
    h3 {font-size: 40px; line-height: 64px;}
    h4 {font-size: 32px; line-height: 48px;}
    h5 {font-size: 28px; line-height: 40px;}
    p.normal, p.normal strong {font-size: 24px;line-height: 40px;}
    p.small {font-size: 20px;line-height: 32px;}
    p.accent {font-size: 28px;line-height: 40px;}
    p.big, p.big strong {font-size: 32px;line-height: 56px;}
    p.biggest {font-size: 40px;line-height: 64px;}
    .arrow {margin:-40px 0 0 0;}
    .page-title {margin-top:0;}
    .sticky-mc {position: -webkit-sticky; /* Safari */ position: sticky;top: 16px;}
    .sticky-img {position: -webkit-sticky; /* Safari */ position: sticky;top: 16px; margin-top:0;}
}