/*main.css*/
html {
height: 100%; /* показва грида по пълната височина на екрана и фиксира footer в дъното на прозореца (footerfix.js) */
margin: 0;
padding: 0;
-webkit-text-size-adjust: none; /* Не позволява промяна на размера на текста при завъртане на екрана (landscape/portrait) */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove Gray Highlight When Tapping Links in Mobile Safari */
}
body {
/*height: 100%; показва грида по пълната височина на екрана. Ако го има НЕ фиксира footer в дъното на прозореца (footerfix.js) */
margin: 0;
padding: 0;
overflow-y: scroll; /* показва вертикален scrolbar независимо от съдържанието / предотвратява подскачането на съдържанието при динамично зареждане на съдържание */
/* footerfix */
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
/* *** */
}
/* footerfix */
body header,
body footer,
body main {
flex-shrink: 0;
}
body main { flex-grow: 1; }
/* *** */
a,
img,
*:focus {
outline: 0; /* Removing The Dotted Outline */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove Gray Highlight When Tapping Links in Mobile Safari */
}
img {
border: none;
line-height: 0;
vertical-align: middle; /* TODO: da se testwa */
max-width: 100%; /* TODO: da se testwa */
}
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
.hide { display: none; }
.cf { overflow: auto; }
/*fluid.css*/
.p1 { padding: 10px; }
.p01 { padding: 0 10px; }
.p10 { padding: 10px 0; }
.p40 { padding: 40px 0; }
/* Mobile */
@media (max-width: 800px) {
.p02 { padding: 0 10px; }
.p20 { padding: 10px 0; }
.p2 { padding: 10px; }
.p4 { padding: 20px; }
.p12 { padding: 10px; }
}
/* Tablet */
@media (min-width: 801px) {
.p02 { padding: 0 20px; }
.p20 { padding: 20px 0; }
.p2 { padding: 20px; }
.p4 { padding: 40px; }
.p04 { padding: 0 40px; }
.p12 { padding: 10px 20px; }
.c32,
.c4,
.c-4,
.c43,
.c5 {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
}
@media (min-width: 801px) and (max-width: 940px) {
.c4,
.c-4,
.c32 { width: 50%; }
.c43,
.c5 { width: 33.333333333%; }
}
/* Desktop */
@media (min-width: 941px) {
.c2,
.c3,
.c-3 {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.c2 { width: 50%; }
.c3, .c32 { width: 33.333333333%; }
.c4,
.c43 { width: 25%; }
.c-3 { width: 66.666666666%; }
.c-4 { width: 75%; }
.c5 {width: 20%;}
}
/*content.css*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto+Slab:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
body {
/*font-family: 'Oswald', sans-serif;*/
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #262626;
}
.m8 {
max-width: 800px;
margin: 0 auto;
}
.m12 {
max-width: 1200px;
margin: 0 auto;
}
.flex img {
border-radius: 10px;
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12),0 0 1px 0 rgba(41,92,176,.25);
}
.flex .text small { color: #999; }
h1,
h2,
h3,
h4 {
font-family: 'Roboto Slab', serif;
font-weight: normal;
color: #000;
}
h1 { font-size: 32px; }
h2 {
font-size: 26px;
margin: 0;
}
h3 {
font-size: 20px;
margin-top: 0;
}
h4 { font-size: 18px; }
h1.title {
text-align: center;
margin: 40px 0 20px 0;
}
p { line-height: 24px; }
a {
outline: 0; /* Removing The Dotted Outline */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove Gray Highlight When Tapping Links in Mobile Safari */
color: #54534A;
text-decoration: none;
}
.content a { color: #112C61; }
.content a:hover { color: #2C95FF; }
a.btn {
font-family: 'Roboto Slab', serif;
font-size: 14px;
line-height: 24px;
text-decoration: none;
padding: 5px 20px 4px 20px ;
display: inline-block;
border-radius: 5px;
border: none;
cursor: pointer;
}
a.read-more {
color: #112C61;
padding: 0;
font-size: 17px;
font-weight: 400;
}
ul {
text-align: left;
list-style-image: url(../svg/bullet.svg);
}
ul li,
ol li { padding: 5px; }
hr.divider {
margin: 30px auto 10px auto;
position: relative;
height: 20px;
width: 20px;
border: transparent;
overflow: visible;
background-image: url(../svg/triangle.svg);
}
hr.divider:before {
position: absolute;
height: 20px;
width: 20px;
content: '';
background-image: url(../svg/square2.svg);
left: -30px;
}
hr.divider:after {
position: absolute;
height: 20px;
width: 20px;
content: '';
background-image: url(../svg/circle.svg);
right: -30px;
}
@media all and (max-width: 960px){
section { padding: 0 10px; }
}
@media all and (max-width: 800px) {
.flex img {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
}
}
@media all and (min-width: 801px) {
.flex {
display: flex;
align-items: center;
}
.flex > div { flex: 1; }
.flex .text {
padding: 20px 20px 20px 60px;
text-align: left;
}
}
@media all and (min-width: 961px) and (max-width: 1480px){
section { padding: 0 20px; }
}
@media all and (min-width: 1481px) {
section {
max-width: 1440px;
margin: 0 auto;
box-sizing: border-box;
}
}
/*header.css*/
header {
background-color: #112C61;
position: relative;
text-align: center;
}
header a.logo {
padding: 20px;
display: inline-block;
}
header nav { background-color: #0e2450; }
header nav a {
display: inline-block;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
}
header nav a:hover { color: #2C95FF; }
.lang {
position: absolute;
right: 20px;
}
/* Mobile */
@media (max-width: 460px) {
header a.logo {
padding: 20px 20px 20px 60px;
display: inline-block;
}
header a.logo img {
max-width: 220px;
width: 100%;
}
header .mgE {
position: absolute;
top: 12px;
left: 10px;
}
}
@media (min-width: 461px) and (max-width: 800px) {
header .mgE {
position: absolute;
top: 20px;
left: 10px;
}
}
@media (max-width: 800px) {
header nav {
display: none;
width: 100%;
}
header nav.show {
display: block;
position: absolute;
overflow: hidden;
z-index: 1;
}
header nav > div { padding: 20px; }
header nav a { padding: 15px 20px; }
.lang { top: 17px; }
}
/* Desktop */
@media (min-width: 801px) {
header .mgE { display: none; }
header nav div div { display: inline-block; }
header nav a {
padding: 20px;
margin: 0 15px;
text-decoration: none;
}
.lang {
top: 67%;
}
}
/*burger.css*/
.mgE {
width: 30px;
height: 30px;
padding: 10px;
cursor: pointer;
position: relative;
}
.mgE hr {
border: none;
margin: 0;
position: absolute;
width: 30px;
height: 3px;
background-color: #FFF;
transition: all .25s ease;
}
.mgE hr { top: 23px; }
.mgE hr:first-child { top: 14px; }
.mgE hr:last-child { top: 32px; }
.mgE.show hr:first-child,
.mgE.show hr:last-child {
width: 0;
top: 15px;
margin: 15px;
opacity: 0;
}
.mgE.show hr:nth-child(2) { transform: rotate(45deg); }
.mgE.show hr:nth-child(3) { transform: rotate(-45deg); }
/*lang.css*/
header .lang {
width: 40px;
height: 40px;
color: #262626;
text-align: center;
line-height: 40px;
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: bold;
cursor: pointer;
}
header .lang > div {
position: absolute;
z-index: 1;
border-radius: 20px;
width: 40px;
min-height: 40px;
background-color: #fff;
border: 1px solid #112C61;
}
header .lang > div a {
display: block;
height: 0;
overflow: hidden;
opacity: 0;
color: #262626;
text-decoration: none;
-webkit-transition: height 0.5s ease, opacity 2s ease;
-moz-transition: height 0.5s ease, opacity 2s ease;
-ms-transition: height 0.5s ease, opacity 2s ease;
-o-transition: height 0.5s ease, opacity 2s ease;
transition: height 0.5s ease, opacity 2s ease;
}
header .lang > div:hover a,
header .lang > div:focus-within a {
height: 40px;
opacity: 1;
}
/*footer.css*/
footer {
background-color: #112C61;
color: #FFF;
line-height: 24px;
margin-top: 60px;
}
footer h4 { color: #2C95FF !important; }
footer .social a {
background-position: center;
background-repeat: no-repeat;
border: 1px solid #FFF;
border-radius: 20px;
background-size: 16px;
display:inline-block;
width: 36px;
height: 36px;
margin: 0 10px;
opacity: .7;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
footer a:hover { opacity: 1; }
footer nav a {
display: inline-block;
padding: 20px;
color: #FFF;
}
footer nav a:hover { text-decoration: underline; }
footer .rights {
background-color: #0e2450;
font-size: 14px;
color: #8493b4;
}
footer .rights a { color: #8493b4; }
footer .rights a:hover { color: #FFF; }
footer .rights section {
display: flex;
justify-content: space-between;
}
/*social.css*/
.social a {
color: #f7f7f7;
text-decoration: none;
line-height: 32px;
display: inline-block;
margin: 0 5px;
vertical-align: top;
opacity: 0.7;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.social a:hover { opacity: 1; }
.social a.facebook,
.social a.youtube,
.social a.instagram {
vertical-align: top;
width: 32px;
height: 32px;
/*border: 1px solid #EEE;*/
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
}
header .social a { border: 1px solid #333; }
header .social a.youtube { background-image: url(../svg/social/youtube1.svg);}
header .social a.facebook { background-image: url(../svg/social/facebook1.svg);}
header .social a.linkedin { background-image: url(../svg/social/linkedin1.svg);}
header .social a.instagram { background-image: url(../svg/social/instagram1.svg);}
footer .social a { border: 1px solid #EEE; }
footer .social a.youtube { background-image: url(../svg/social/youtube.svg);}
footer .social a.facebook { background-image: url(../svg/social/facebook.svg);}
footer .social a.linkedin { background-image: url(../svg/social/linkedin.svg);}
footer .social a.instagram { background-image: url(../svg/social/instagram.svg);}
/*form.css*/
/* *** */
form fieldset {
border: 0 none;
margin: 0;
padding: 0;
}
form legend {
padding: 8px 0;
color: #555;
}
form legend.required::after {
content: ' *';
color: red;
}
input[type=text], /* will only select text fields */
input[type=email], /* will only select email fields */
input[type=password], /* will only select password fields */
textarea,
select {
font-family: sans-serif;
font-size: 14px;
margin: 0;
padding: 4px 8px;
line-height: 24px;
/*height: 50px;*/
border: 1px solid #CCC;
border-radius: 0;
background-color: #FFF;
color: #000;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
height: 60px;
min-height: 60px;
resize: vertical;
/*padding-top: 5px;*/
}
/* remove dropdown arrow on IE from select */
select::-ms-expand {
display: none;
}
select {
background-image: url(../svg/form/arrow-down.svg);
background-size: 28px 28px;
background-repeat: no-repeat;
background-position: right center;
padding: 4px 30px 4px 6px;
}
input[type=text]:disabled,
input[type=password]:disabled,
textarea:disabled,
select:disabled {
color: #333;
background-color: #EEE;
}
.w100 input[type=text],
.w100 input[type=email],
.w100 input[type=password],
.w100 textarea,
.w100 select,
.w100 button,
.w100 {
width: 100%;
box-sizing: border-box;
}
.w50 { width: 50%;}
@media all and (max-width: 700px){ .w50 { width: 100%;} }
/* .red { background-color: #E00200; color: #FFF; }
.yellow { background-color: #ffc100; color: #000; }
.white { background-color: #FFF; color: #000; }
.lblue { background-color: #2C95FF; color: #FFF; }
.blue { background-color: #112C61; color: #FFF; }
*/
/* Бутони */
button[type=submit] {
border: none;
background-color: #1CC664;
color: #fff;
text-transform: uppercase;
font-family: sans-serif;
font-size: 14px;
line-height: 20px;
text-decoration: none;
padding: 7px 24px;
display: inline-block;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease; /* IE10 is actually unprefixed */
-o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
-webkit-appearance: none;
}
button[type="submit"]:hover {
background-color: #000;
color: #FFF;
}
button[type=submit]:disabled {
background-color: #CCC;
cursor: default;
}
/*button[type=submit]:hover { background: #000; }*/
button.cancel {
border-bottom-right-radius: 8px;
color: #fff;
padding: 8px 20px 7px 20px ;
line-height: 18px;
text-decoration: none;
background: #112C61;
text-align: center;
text-transform: uppercase;
cursor: pointer;
/*min-height: 18px;*/
}
a.cancel {
font-family: sans-serif;
font-size: 14px;
line-height: 24px;
padding: 5px 20px;
height: 36px;
text-transform: uppercase;
color: #999;
text-decoration: none;
display: inline-block;
cursor: pointer;
margin: 0 10px;
border: 1px solid transparent;
box-sizing: border-box;
-webkit-transition: background-color 0.5s ease, border 0.5s ease;
-moz-transition: background-color 0.5s ease, border 0.5s ease;
-ms-transition: background-color 0.5s ease, border 0.5s ease; /* IE10 is actually unprefixed */
-o-transition: background-color 0.5s ease, border 0.5s ease;
transition: background-color 0.5s ease, border 0.5s ease;
}
a.cancel:hover {
background-color: #EEE;
color: #000;
border-radius: 3px;
border: 1px solid #E1E1E1;
}
select option {
padding: 6px;
}
/* checkbox */
label.checkbox {
line-height: 16px;
/*white-space: nowrap;*/
padding: 5px 20px 5px 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: bottom;
display: inline-block;
}
label.checkbox input { display: none;}
label.checkbox span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 3px;
content: ' ';
vertical-align: bottom;
margin-right: 6px;
margin-left: -30px;
}
label.checkbox:hover span { border-color: #1CC664;}
label.checkbox input:checked + span {
background-image: url(../svg/form/check.svg);
background-color: #1CC664;
border-color: #1CC664;
background-position: center;
}
@media all and (max-width: 470px) {
label.checkbox { display: block; }
}
/* checkbox END */
/*custom radio*/
label.radiocheck {
line-height: 16px;
padding: 5px 20px 5px 30px;
vertical-align: bottom;
display: inline-block;
}
label.radiocheck input { display: none;}
label.radiocheck span {
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #112C61;
border-radius: 50%;
content: ' ';
vertical-align: bottom;
margin-left: -30px;
margin-right: 10px;
}
label.radiocheck input:checked + span {
background-image: url(../svg/form/circle.svg);
background-position: center;
}
/* custom radio END */
.mgBasketDelete {
color: #999;
padding-top: 6px;
cursor: pointer;
}
/* formerror */
.mgErrorField {
border: 1px solid #ff0000 !important;
background-color: #fffee4 !important;
}
.mgErrorTooltip {
position: absolute;
max-width: 520px;
padding: 7px 20px 7px 10px;
text-align: left;
border-radius: 4px;
color: #fff;
background-color: #c40000;
box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.35);
margin-top: 2px;
z-index: 1;
}
.mgErrorTooltip:after {
height: 0;
width: 0;
bottom: 100%;
left: 25px;
border: solid transparent;
content: " ";
position: absolute;
border-color: rgba(196, 0, 0, 0);
border-bottom-color: #c40000;
border-width: 7px;
margin-left: -7px;
}
label.checkbox .mgErrorTooltip,
label.radio .mgErrorTooltip {
margin: 5px 0 0 -30px;
}
/* formerror */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
input, textarea, select {
font-size: 18px !important;
line-height: 28px !important;
padding: 5px 10px !important;
height: 38px !important;
}
select {
background-image: url(../img/select/arrow1@2x.png);
}
button,
button.cancel {
font-size: 18px !important;
line-height: 28px !important;
padding: 5px 20px !important;
height: 38px !important;
}
}
form .iagree {
display: flex;
justify-content: space-between;
align-items: center;
}
/*popup.css*/
.mgPopup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1;
overflow-x: hidden;
overflow-y: scroll;
text-align: center;
}
.mgPopup > div {
position: relative;
background-color: #FFF;
box-sizing: border-box;
display: inline-block;
text-align: initial;
}
.mgPopup > div.fullscreen {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
border-radius: unset;
}
/* close */
.mgPopup div.mgClose {
position: absolute;
top: 12px;
right: 14px;
width: 40px;
height: 40px;
cursor: pointer;
}
.mgPopup div.mgClose hr {
position: absolute;
top: 11px;
left: 8px;
border: none;
width: 24px;
height: 1px;
background-color: #8e8e8e;
}
.mgPopup div.mgClose hr:first-child { transform: rotate(45deg); }
.mgPopup div.mgClose hr:last-child { transform: rotate(-45deg); }
.mgPopup div.mgClose:hover hr { background-color: #000; }
/* *** */
/* tablet & desktop */
@media all and (min-width: 801px) {
.mgPopup > div {
margin: 40px;
border-radius: 5px;
}
}
/*cookies.css*/
.mgCookies {
position: fixed;
bottom: -100px;
left: 0;
right: 0;
background-color: #FFF;
color: #000;
opacity: 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
transition: bottom 1s ease, opacity 1s ease;
z-index: 1;
}
.mgCookies.show {
bottom: 0;
opacity: 1;
}
.mgCookies table { width: 100%; }
.mgCookies table td { padding: 10px; }
.mgCookies table td:first-child a { text-decoration: underline; }
.mgCookies table td:last-child { text-align: right; }
.mgCookies a.button {
margin: 0;
display: inline-block;
border-radius: 30px;
color: #000;
padding: 8px 20px;
line-height: 18px;
text-decoration: none;
background-color: #EEE;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.mgCookies a.button:hover { background-color: #CCC; }
/*events.css*/
.events {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.events .mgLink {
cursor: pointer;
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12), 0 0 1px 0 rgba(41,92,176,.25);
height: 100%;
}
.events picture { margin-bottom: 20px; }
.events .more {
margin-top: auto;
margin-bottom: 20px;
}
/* item */
.event aside img {
border-radius: 10px;
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12),0 0 1px 0 rgba(41,92,176,.25);
}
.event article h1 {
margin: 10px 0;
font-size: 28px;
line-height: 32px;
text-align: left;
}
a.viewall {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
font-size: 14px;
line-height: 24px;
text-decoration: none;
padding: 5px 20px 4px 20px ;
display: inline-block;
color: #FFF;
background-color: #112C61;
border-radius: 5px;
border: none;
cursor: pointer;
-webkit-transition: background-color 0.5s ease, border 0.5s ease;
-moz-transition: background-color 0.5s ease, border 0.5s ease;
-ms-transition: background-color 0.5s ease, border 0.5s ease; /* IE10 is actually unprefixed */
-o-transition: background-color 0.5s ease, border 0.5s ease;
transition: background-color 0.5s ease, border 0.5s ease;
-webkit-appearance: none;
}
a.viewall:hover {
background-color: #2C95FF;
}
/*brands.css*/
.brands a.brand {
background-color: #FFF;
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12), 0 0 1px 0 rgba(41,92,176,.25);
border-radius: 5px;
display: block;
padding: 5px;
}
/*timeline.css*/
.timeline {
display: flex;
flex-direction: column;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.timeline > div {
position: relative;
display: flex;
margin: 20px 0;
border-radius: 6px;
align-self: center;
}
.timeline h3 { margin: 10px 20px; }
.timeline > div :is(.date, .name) {
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12),0 0 1px 0 rgba(41,92,176,.25);
}
.timeline > div:nth-child(2n+1) {
flex-direction: row-reverse;
}
.timeline >div:nth-child(2n+1) .date {
border-radius: 0 6px 6px 0;
}
.timeline .icon {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
align-self: center;
background: #fff;
border-radius: 100%;
width: 40px;
box-shadow: 0 4px 3px 0 rgba(34,90,182,.12),0 0 1px 0 rgba(41,92,176,.25);
height: 40px;
position: relative;
}
.timeline > div:nth-child(odd) .icon {margin-left: 20px;}
.timeline > div:nth-child(even) .icon {margin-right: 20px;}
.timeline .date {
color: #fff;
font-size: 24px;
font-weight: 600;
background: #112C61;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 0 20px;
border-radius: 6px 0 0 6px;
}
.timeline .name {
padding: 20px;
/*box-shadow: 0 4px 3px 0 rgba(34,90,182,.12),0 0 1px 0 rgba(41,92,176,.25);*/
background: #fff;
width: calc(40vw - 84px);
}
.timeline .name h3 {word-break: break-all;}
/*Thin borders that connect containers*/
.timeline .icon::before {
content: "";
width: 2px;
height: 100%;
background: #2C95FF;
position: absolute;
top: 100%;
z-index: -1;
left: 50%;
transform: translateX(-50%);
}
.timeline .icon::after {
content: "";
width: 100%;
height: 2px;
background: #2C95FF;
position: absolute;
left: 100%;
z-index: -1;
top: 50%;
transform: translateY(-50%);
}
.timeline >div:last-child .icon:before {display: none;}
/*Thin borders that connect containers on odd*/
.timeline > div:nth-child(2n+1) .icon::before {
content: "";
width: 2px;
height: 100%;
background: #2C95FF;
position: absolute;
top: 100%;
left: 50%;
right: auto;
z-index: -1;
transform: translateX(-50%);
}
.timeline > div:nth-child(2n+1) .icon::after {
content: "";
width: 100%;
height: 2px;
background: #2C95FF;
position: absolute;
right: 0;
z-index: -1;
top: 50%;
left: -50%;
transform: translateY(-50%);
}
/*Desktop*/
@media(min-width: 961px) {
.timeline {
flex-direction: row-reverse;
}
.timeline > div {width: 50vw;}
.timeline .icon {margin: 0 20px;}
}
/*404.css*/
section.notfound {
display: flex;
align-items: center;
/*min-height: 70vh;*/
}
section.notfound > div {
padding: 20px;
margin: 40px auto;
}
section.notfound h1 {
position: absolute;
z-index: -1;
font-family: 'Open Sans', sans-serif;
line-height: 240px;
font-weight: bold;
margin: 0;
color: #f5f5f5;
}
section.notfound a { color: #112C61; }
section.notfound a:hover { color: #2C95FF; }
/* mobile */
@media all and (max-width: 480px) {
section.notfound h1 {
font-size: 160px;
text-align: center;
width: 90%;
}
}
/* desktop */
@media all and (min-width: 481px) {
section.notfound h1 { font-size: 240px; }
}