/*** * MEDIC EXPAT - SITE - MAINTENANCE PAGE CSS * * ***/ /* ----- BO NAV LATERAL - CONFIG AUTO DISPLAY SELECTED ELEM ----- */ #nav-site-infos-404 { transform: scale(1.05); background-color: rgb(65, 170, 239); } /* ----- SITE NAV - CONFIG AUTO DISPLAY ----- */ #site-header-2 { display: block; } /* ----- PAGE CONTAINER CSS ----- */ #page-cont { width: 100%; } /* ----- SECTIONS PAGE GENERALS CSS ----- .sections-page { }*/ /* ----- SECTION 1 CSS ----- */ #section-1 { width: 100%; height: calc(50vh * var(--lateral-preview-reduc-ratio, 1)); /*background-image: url('../../../../images/site/index/s1_background.png'); background-repeat: no-repeat; background-position: center; background-size: cover;*/ /* Back V2 - Dynamic */ background-size: 300% 300%; background-image: linear-gradient(135deg, rgba(45,61,119,1) 10%, rgba(62,144,198,1) 90%); background-position: 50% 50%; -webkit-animation: anim_background_transla 30s ease-in-out infinite; animation: anim_background_transla 30s ease infinite; } .background-opacity-dark{ position: absolute; width: 100%; height: calc(50vh * var(--lateral-preview-reduc-ratio, 1)); background-color: rgba(0,0,0,0.3); z-index:301; } .s1-cnt-cont { position: relative; z-index:302; width: 100%; } #s1-main-title { position: relative; width: 94%; padding-left: 3%; padding-right: 3%; top: calc(20vh * var(--lateral-preview-reduc-ratio, 1)); text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: calc(3.5em * var(--lateral-preview-reduc-ratio, 1)); letter-spacing: 1px; /*line-height: calc(1.5em * var(--lateral-preview-reduc-ratio, 1));*/ font-weight: bold; color: #ffffff; text-align: center; text-shadow: #101010 1px 0 3px; margin-top: 0px; margin-bottom: 0px; } /* ----- SECTION 2 CSS ----- */ #section-2 { width: 100%; /*height: calc(30vh * var(--lateral-preview-reduc-ratio, 1));*/ padding-top: calc(10vh * var(--lateral-preview-reduc-ratio, 1)); padding-bottom: calc(10vh * var(--lateral-preview-reduc-ratio, 1)); background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(245, 245, 245) 100%); position: relative; display: inline-flex; } .s2-blocs { display:block; } /*#s2-bloc-1 { position: absolute; width: 25%; margin-left: 65%; margin-right: 10%; } .s2-blocs-img { position: absolute; width: calc(350px * var(--lateral-preview-reduc-ratio, 1)); height: calc(350px * var(--lateral-preview-reduc-ratio, 1)); opacity: 0.6; background-repeat: no-repeat; background-position: center; background-size: cover; }*/ #s2-bloc-2 { position: relative; width: 90%; margin-left: 5%; } .s2-bloc-titles h3 { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: calc(2.8em * var(--lateral-preview-reduc-ratio, 1)); letter-spacing: 1px; font-weight: bold; color: #101010; text-align: left; -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 0px; margin-bottom: 0px; transition: transform 300ms ease-in-out; } .s2-bloc-txt { text-decoration: none; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: calc(1.1em * var(--lateral-preview-reduc-ratio, 1)); font-weight: lighter; color: #101010; text-align: left; -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: calc(50px * var(--lateral-preview-reduc-ratio, 1)); /*margin-bottom: calc(30px * var(--lateral-preview-reduc-ratio, 1));*/ } .s2-bloc-txt p { margin-top:0px; margin-bottom:0px; } .s2-bloc-inputs { display: inline-block; position: relative; margin: 0 auto; width: 40%; margin-left: 10%; margin-top: calc(50px * var(--lateral-preview-reduc-ratio, 1)); background: var(--me-color-1); box-shadow: 0px 0px 0px rgba(0,0,0,0.5); border:none; cursor: pointer; transition: transform 0.3s ease-in-out, box-shadow 300ms ease-in-out; } .s2-bloc-inputs:hover { transform: scale(1.03); } .s2-bloc-inputs p, .s2-bloc-inputs a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: calc(1.3em * var(--lateral-preview-reduc-ratio, 1)); letter-spacing: 1px; font-weight: normal; color: #ffffff; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-left: 3%; padding-right: 3%; padding-top: calc(10px * var(--lateral-preview-reduc-ratio, 1)); padding-bottom: calc(10px * var(--lateral-preview-reduc-ratio, 1)); } /* ---------- MEDIA QUERIES SYSTEM ------------------------------------------------------------*/ /* --- > 1200 ----------------------------------------- */ @media screen and (width > 1200px) { } /* --- 1200 - 1025 ----------------------------------------- */ @media screen and (width <= 1200px) and (width > 1024px) { } /* --- 1024 - 769 ------------------------------------------ */ @media screen and (width <= 1024px) and (width > 768px) { } /* --- 768 - 481 ------------------------------------------- */ @media screen and (width <= 768px) and (width > 480px) { #s1-main-title { font-size: calc(3.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-titles h3 { font-size: calc(2.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-txt { font-size: calc(1.2em* var(--lateral-preview-reduc-ratio, 1)); } } /* --- 480 - 321 ------------------------------------------- */ @media screen and (width <= 480px) and (width > 320px) { #s1-main-title { font-size: calc(3.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-titles h3 { font-size: calc(2.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-txt { font-size: calc(1.2em* var(--lateral-preview-reduc-ratio, 1)); } } /* --- 320 ------------------------------------------------ */ @media screen and (width <= 320px) { #s1-main-title { font-size: calc(3.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-titles h3 { font-size: calc(2.5em* var(--lateral-preview-reduc-ratio, 1)); } .s2-bloc-txt { font-size: calc(1.2em* var(--lateral-preview-reduc-ratio, 1)); } }