/* region THEME */

:root {
    --font-family: Montserrat, sans-serif;
    --font-style: normal;
    --font-weight: 100;
    --font-size: .95rem;

    --desktop-scale: 1.1;  /* responsive design scale factor */

    --color-disabled: #868686;
    --color-icon: #484848;
    --color-dark: #343a40;  /* Bootstrap */
    --color-light: #f8f9fa;  /* Bootstrap */
    --color-primary: #007bff;  /* Bootstrap */
    --color-secondary: #6c757d;  /* Bootstrap */
    --color-success: #28a745;  /* Bootstrap */
    --color-warning: #ffc107;  /* Bootstrap */
    --color-danger: #dc3545;  /* Bootstrap */
    --color-background: #23272b;  /* Bootstrap dark hover */
    --color-gears: #409eff;
    --color-match1: #9d2572;
    --color-match2: #494894;
    --color-notebooks: #f37726;
    --color-light-gray: #f7f5f4;
    --color-light-gears: #f0f6fc;
    --color-light-match2: #ededf6;
    --color-light-notebook: #f9f3f0;

    --background-gradient: linear-gradient(white, #f3f3f3, white);

    --navbar-height: 3em;
    --section-width: 1100px;

    --content-padding: 2rem 1rem 0;  /* mobile option with thinner L/R padding */
    --content-padding-desktop: 2rem 2rem 0;

    --border: lightgray solid 1px;
    --border-thick: lightgray 4px solid;
    --border-radius: 5px;
    --badge-shadow: inset 0 1px 3px #484848;
    --inset-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);
    --text-shadow: 0 8px 5px rgb(190, 190, 190);

    --transition: 0.15s;  /* Bootstrap speed */
    --transition-slow: 0.5s;  /* speed of transition effects */
    --fade-time: 1.25s;  /* page headers */
}

.pl-6,
.px-6 {
  padding-left: 4rem !important;
}

.pr-6,
.px-6 {
  padding-right: 4rem !important;
}

.pl-7,
.px-7 {
  padding-left: 6rem !important;
}

.pr-7,
.px-7 {
  padding-right: 6rem !important;
}

.mb-6 {
    margin-bottom: 4rem;
}
.mb-180px {
    margin-bottom: 180px;
}

.flip-lr {
    transform: scaleX(-1);
}

.bg-light-gray {
    background: var(--color-light-gray);
}
.bg-light-gears {
    background: var(--color-light-gears);
}
.bg-light-match2 {
    background: var(--color-light-match2);
}
.bg-light-notebook {
    background: var(--color-light-notebook);
}

.text-strike {
    text-decoration: line-through;
}
.text-underline {
    text-decoration: underline;
}
.text-skyblue {
  color: lightskyblue !important;
}
a.text-skyblue:hover, a.text-skyblue:focus {
  color: #4d8aba !important;
}

.border-match1 {
    border-color: var(--color-match1) !important;
}
.border-match2 {
    border-color: var(--color-match2) !important;
}

/* ANIMATIONS */
.fade-in-bottom {
	-webkit-animation: fadeInBottom 1s; /* Safari, Chrome and Opera > 12.1 */
	animation: fadeInBottom 1s;
}
@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-out-background {
    -webkit-animation: fadeOutBackground var(--fade-time) ease-out; /* Safari, Chrome and Opera > 12.1 */
	animation: fadeOutBackground var(--fade-time) ease-out;
}
@keyframes fadeOutBackground {
	0% {
		background-color: transparent;
        transform: translateY(20px) scale(0.98);
	}
    25% {
		background-color: transparent;
	}
	100% {
		background-color: rgba(255,255,255,.85);
        transform: translateY(0) scale(1);
	}
}

.fade-in-header {
    -webkit-animation: fadeInHeader var(--fade-time) ease-out; /* Safari, Chrome and Opera > 12.1 */
	animation: fadeInHeader var(--fade-time) ease-out;
}
@keyframes fadeInHeader {
    0%, 50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* endregion */


/* region MOBILE */

/* region CORE STYLE */

html {
    font-size: var(--font-size);
}
body {
    padding: 0;
    margin: 0;

    font-family: var(--font-family);
    font-style: var(--font-style);
    font-weight: var(--font-weight);

    /* TUNING */
    /* background-color: #ffffff; */
}
hr {
    height: 4px;
	border-radius: 2px;
	background-color: #f1f5fa;
	box-shadow: var(--inset-shadow)
}
.content-padding {
    padding: var(--content-padding);
}
.hide-mobile {
    display: none;
}

.text-black {
    color: black;
}
.text-match1 {
    color: var(--color-match1) !important;
}
.text-match2 {
    color: var(--color-match2) !important;
}
.text-disable {
    color: var(--color-disabled);
}
.text-inactive {
    color: #bfbfbf;
}
.opacity-disable {
    opacity: .3;
}
.word-break-word {
    word-break: break-word;
}
.dotted-underline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
.cursor-help {
    cursor: help;
}
.cursor-pointer {
    cursor: pointer;
}

.attr-field {
    /* for use with attr_field() macro */
    display: grid;
    grid-auto-flow: row;
    justify-items: left;
}
.attr-field-list {
    /* for use with a set of attr_field() macro */
    display: grid;
    grid-auto-flow: row;
    grid-gap: .25em;
    align-items: center;
}

/* BOOTSTRAP */
strong, .strong {
    /* bold font */
    font-weight: 700;
}
.popover {
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.modal .close span {
    font-size: 1.5em;
}
.modal-dialog {
    max-width: 400px;
}
.modal-body {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* FONT AWESOME */
i {
    color: var(--color-icon);
}
.fa-linkedin {
    color: #0077b5;
}
.fa-twitter {
    color: #1da1f2;
}
.fa-youtube {
    color: #ff0000;
}
[class*="fa-star"] {
    color: #f39c12;
}

/* RATE YO */
[id^="rate-yo"] {
    padding: 0 !important;
}

/* WTF FORMS */
.form-errors {
    color: #ff5e5e;
    font-size: .8em;
}
.form-success {
    color: #379536;
    font-size: .8em;
}
.flash-messages {
    text-align: center;
    list-style: none;
    padding: 0;
    /* If using in base.html: */
    /*margin: 1em 1em -1.5em;*/
}

/* endregion */

/* region GRID LAYOUT */

#body {
    display: grid;
    grid-template-areas:
        "navigation"
        "content"
        "footer";
}
#navigation {
    grid-area: navigation;
    z-index: 1;

    width: 100%;
    height: var(--navbar-height);  /* required with navbar class: fixed-top */

    /* STICKY */
    /*position: sticky;*/
    /*top: 0;*/

    /* TUNING */
    /*background-color: coral;*/
}
#content {
    grid-area: content;
    display: grid;
    width: 100%;

    /* TUNING */
    /*background-color: green;*/
}
#footer {
    grid-area: footer;

    width: 100%;
    padding-top: 2em;
    padding-bottom: 1em;
    font-size: .8em;

    display: grid;
    grid-auto-flow: row;
    justify-items: center;

    /* TUNING */
    /*background-color: aqua;*/
}
#footer-sticky {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 1;
    transition: bottom 0.5s;  /* for use with footer-scroll.js */
}

.d-grid {
    display: grid;
}
.justify-items-center {
    justify-items: center;
}
.g-1fr-auto {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 1em;
}
.mw-350px {
    width: 100%;
    max-width: 350px;
}

/*#sidebar-sticky{*/
    /*grid-area: sidebar;*/

    /*position: fixed;*/
    /*padding-top: 4.5em;  !* top tuned to clear navbar; cannot add padding-x and keep hidden when not used *!*/
    /*top: 0;*/
    /*left: 0;*/
    /*height: 100%;*/
    /*z-index: 1;*/

    /*box-shadow: 0 2px 7px rgba(0,0,0,.15);*/

    /*!*TUNING*!*/
    /*background: coral;*/
/*}*/

/* endregion */

/* region COMPONENT STYLING */

.dh-card {
    padding: 1.5em;
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    background-image: var(--background-gradient);
}
.badge-shadow {
    box-shadow: var(--badge-shadow);
}
#footer-bottom-links {
    margin-top: .3em;
    font-size: .9em;

    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 1.5em;
}

/* endregion */

/* DH HEADER */
.dh-header-wrapper {
	text-align: center;
    background-image: url('../img/network-background.png');
    background-position: top;
    background-size: cover;
    background-blend-mode: screen;
}
.dh-header {
	padding: 4rem 0;
}
.header-bg-overlay {
	background-color: rgba(255,255,255,.925);  /*image overlay*/
}
.dh-header-logo-wrap {
	padding: 1em 0 1.5em;
	filter: drop-shadow(4px 4px 4px #585858);  /* png shadow */
	/*-webkit-filter: drop-shadow(4px 4px 4px #585858);   !* not needed in modern browsers *! */
	/*height: 175px;*/
}
.dh-header-logo-sm {
    height:175px;
}
.dh-header-logo {
    height:175px;
}

/* ARC DIVIDERS */
/* PLACEHOLDER try to reuse the same svg and change its color with CSS */
.divider-arc-f7f5f4, .divider-arc-23272b, .divider-arc-gears, .divider-arc-match2, .divider-arc-notebooks {
    width: 100%;
    height: calc(100vw / 11.4);

    /*Chrome adjustments*/
    margin-bottom: -1px;

    background-position: bottom;
    background-size: cover;
}
.divider-arc-f7f5f4 {
    background-image: url('../img/divider-arc-f7f5f4.svg');
}
.divider-arc-23272b {
    background-image: url('../img/divider-arc-23272b.svg');
}
.divider-arc-gears {
    background-image: url('../img/divider-arc-gears.svg');
}
.divider-arc-match2 {
    background-image: url('../img/divider-arc-match2.svg');
}
.divider-arc-notebooks {
    background-image: url('../img/divider-arc-notebooks.svg');
}
.divider-arc-bottom-f7f5f4, .divider-arc-bottom-gears, .divider-arc-bottom-match2, .divider-arc-bottom-notebooks {
    width: 100%;
    height: calc(100vw / 11.4);

    /*Chrome adjustment*/
    /*margin-bottom: -1px;*/

    background-position: bottom;
    background-size: cover;
}
.divider-arc-bottom-f7f5f4 {
    background-image: url('../img/divider-arc-bottom-f7f5f4.svg');
}
.divider-arc-bottom-gears {
    background-image: url('../img/divider-arc-bottom-gears.svg');
}
.divider-arc-bottom-match2 {
    background-image: url('../img/divider-arc-bottom-match2.svg');
}
.divider-arc-bottom-notebooks {
    background-image: url('../img/divider-arc-bottom-notebooks.svg');
}

/* ARC SECTIONS */
.section {
	background-size: cover;
	background-blend-mode: screen;

	display: grid;
	justify-items: center;
	align-items: center;

	padding: 8rem 0 6rem 0;
}
.section img {
	width: 100%;
	margin-bottom: 3rem;
}
.section > div {
    width: 100%;
    max-width: 500px;
	padding: 0 1.25rem;
    /*background-color: lightgreen;*/
}
.cols-55-45 > div:nth-of-type(1), .cols-45-55 > div:nth-of-type(1) {
    /*img*/
    text-align: center;
}
.mask-top-bottom-7 {
	-webkit-mask-image:-webkit-gradient(linear, left bottom, left top, color-stop(0%, transparent), color-stop(7%, white), color-stop(93%, white), color-stop(100%, transparent));
	mask-image: linear-gradient(to top, transparent 0%, white 7%, white 93%, transparent 100%);
}
.mask-bottom-15 {
	-webkit-mask-image:-webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(255,255,255,1)));
	mask-image: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 15%);
}

/* endregion */


/* region DESKTOP */

@media only screen and (min-width: 961px) {
    html {
        font-size: calc(var(--font-size) * var(--desktop-scale));
    }
    .content-padding {
        padding: var(--content-padding-desktop);
    }
    .hide-mobile {
        display: revert;
    }

    /* DH HEADER */
	.dh-header-logo {
		height:225px;
	}
	.dh-header {
		padding-bottom: 1rem;
	}

    /* ARC SECTIONS */
    .section img {
        padding: 0;
        margin-bottom: unset;
        max-height: 32vw;
    }
	.section img.set-height {
        height: 100%;
        max-height: 380px;
		width: unset;
		max-width: 100%;
	}
	.section > div {
        width: 100%;
        max-width: 800px;
		padding: unset;
        /*background-color: lightpink;*/
	}
	.cols-55-45, .cols-45-55 {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	.cols-55-45 {
		grid-template-columns: 55% 45%;
	}
	.cols-55-45 > div:nth-of-type(1) {
		/*img*/
        justify-self: right;
        max-width: calc(var(--section-width) * 0.55);
		/*background-color: lightpink;*/
	}
	.cols-55-45 > div:nth-of-type(2) {
		/*content*/
		padding-left: 5rem;
        justify-self: left;
        max-width: calc(var(--section-width) * 0.45);
		/*background-color: lightgreen;*/
	}
	.cols-45-55 {
		grid-template-columns: 45% 55%;
	}
	.cols-45-55 > div:nth-of-type(1) {
		/*img*/
		grid-row: 1;
		grid-column: 2;
        justify-self: left;
        max-width: calc(var(--section-width) * 0.55);
		/*background-color: lightblue;*/
	}
	.cols-45-55 > div:nth-of-type(2) {
		/*content*/
		grid-row: 1;
		grid-column: 1;
        justify-self: right;
		padding-right: 5rem;
        max-width: calc(var(--section-width) * 0.45);
		/*background-color: lightgoldenrodyellow;*/
	}

    /* OPTIONAL */
    /*#footer-bottom-right {*/
        /*position: absolute;*/
        /*justify-self: right;*/

        /*margin-top: 0;*/
        /*margin-right: 1em;*/
        /*font-size: 1em;*/
    /*}*/
}

/* endregion */