.tracking-in-contract-bck { -webkit-animation: tracking-in-contract-bck 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-contract-bck 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay: 1s; } .tracking-in-contract-bck-bottom { -webkit-animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay: 1s; } .slide-in-blurred-top { -webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay: 1.5s; } .slide-in-elliptic-left-bck { -webkit-animation: slide-in-elliptic-left-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-left-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.3s; } .slide-in-elliptic-right-bck { -webkit-animation: slide-in-elliptic-right-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-right-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .focus-in-contract-bck { -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.7s; } .focus-in-contract-bck2 { -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 2.5s; } .focus-in-contract-bck3 { -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 5s; } .tracking-in-expand-fwd-bottom { -webkit-animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay: 1.2s; } .tracking-in-expand-fwd-top { -webkit-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay: 0.6s; } .tracking-in-expand-fwd-top2 { -webkit-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay: 1.1s; } .slide-in-bck-center { -webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 5s; } .slide-in-bck-center1 { -webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes focus-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @-webkit-keyframes focus-in-contract-bck2 { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-contract-bck2 { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @-webkit-keyframes focus-in-contract-bck3 { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-contract-bck3 { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @-webkit-keyframes slide-in-elliptic-top-bck { 0% { -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5); transform: translateY(-600px) rotateX(30deg) scale(6.5); -webkit-transform-origin: 50% 200%; transform-origin: 50% 200%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% -500px; transform-origin: 50% -500px; opacity: 1; } } @keyframes slide-in-elliptic-top-bck { 0% { -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5); transform: translateY(-600px) rotateX(30deg) scale(6.5); -webkit-transform-origin: 50% 200%; transform-origin: 50% 200%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% -500px; transform-origin: 50% -500px; opacity: 1; } } @-webkit-keyframes tracking-in-expand-fwd-bottom { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(500px); transform: translateZ(-700px) translateY(500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-expand-fwd-bottom { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(500px); transform: translateZ(-700px) translateY(500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @-webkit-keyframes tracking-in-expand-fwd-top { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-expand-fwd-top { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @-webkit-keyframes tracking-in-expand-fwd-top2 { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-expand-fwd-top2 { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @-webkit-keyframes slide-in-elliptic-right-bck { 0% { -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5); transform: translateX(800px) rotateY(30deg) scale(6.5); -webkit-transform-origin: -100% 50%; transform-origin: -100% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: 600px 50%; transform-origin: 600px 50%; opacity: 1; } } @keyframes slide-in-elliptic-right-bck { 0% { -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5); transform: translateX(800px) rotateY(30deg) scale(6.5); -webkit-transform-origin: -100% 50%; transform-origin: -100% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: 600px 50%; transform-origin: 600px 50%; opacity: 1; } } @-webkit-keyframes slit-in-diagonal-1 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-1 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-11 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-11 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-1111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-1111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-11111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-11111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-1111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-1111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-11111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-11111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-111111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-111111111 { 0% { -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0); transform: translateZ(0) rotate3d(1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-2 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-2 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-22 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-22 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-2222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-2222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-22222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-22222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-2222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-2222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-22222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-22222222 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-4 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-4 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-5 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-5 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-6 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-6 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slit-in-diagonal-7 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes slit-in-diagonal-7 { 0% { -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 54% { -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0); transform: translateZ(0) rotate3d(-1, 1, 0, 0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slide-in-bck-center { 0% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes slide-in-bck-center { 0% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes text-focus-in2 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in2 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes text-focus-in3 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in3 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes text-focus-in4 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in4 { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes slide-in-elliptic-left-bck { 0% { -webkit-transform: translateX(-800px) rotateY(-30deg) scale(6.5); transform: translateX(-800px) rotateY(-30deg) scale(6.5); -webkit-transform-origin: 200% 50%; transform-origin: 200% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: -600px 50%; transform-origin: -600px 50%; opacity: 1; } } @keyframes slide-in-elliptic-left-bck { 0% { -webkit-transform: translateX(-800px) rotateY(-30deg) scale(6.5); transform: translateX(-800px) rotateY(-30deg) scale(6.5); -webkit-transform-origin: 200% 50%; transform-origin: 200% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: -600px 50%; transform-origin: -600px 50%; opacity: 1; } } @-webkit-keyframes tracking-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px); transform: translateZ(400px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes tracking-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px); transform: translateZ(400px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @-webkit-keyframes tracking-in-contract-bck-bottom { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(300px); transform: translateZ(400px) translateY(300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-contract-bck-bottom { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(300px); transform: translateZ(400px) translateY(300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @-webkit-keyframes slide-in-blurred-top { 0% { -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-top { 0% { -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } /********************** RESPONSIVE ************************************/ .spinner2 { height: 12px; left: 17px; margin: 0; position: absolute; top: 17px; width: 12px; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 1; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 1.5s infinite ease-in-out; animation: sk-bounce 1.5s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } #loop { display:block; margin-right:auto; margin-left:auto; width: 38px; height:38px; position:relative; } .oo_effet { /*background: url('../images/icon_mission_ok.png') no-repeat;*/ background-color: #000000; border: 1px solid #666; border-radius: 50%; float: right; height: 48px; bottom:0; opacity:0.5; right:0; margin: 0px 10px 10px 0px; position: absolute; width: 48px; z-index: 19999; /*-webkit-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -moz-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -o-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -ms-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; animation: fromTopAnim6 1.2s ease-in-out 0.9s both;*/ } .oo_effet:hover { /*background: url('../images/icon_mission_ok.png') no-repeat;*/ background-color: #000000; border: 1px solid #666; border-radius: 50%; float: right; height: 48px; bottom:0; opacity:1; right:0; margin: 0px 10px 10px 0px; position: absolute; width: 48px; z-index: 19999; /*-webkit-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -moz-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -o-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -ms-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; animation: fromTopAnim6 1.2s ease-in-out 0.9s both;*/ } .oo_effet2 { /*background: url('../images/icon_mission_ok.png') no-repeat;*/ background-color: #000000; border: 1px solid #666; border-radius: 50%; height: 48px; opacity:0.5; margin: 20px 10px 10px 0px; position: relative; width: 48px; z-index: 19999; display: block; margin-right: auto; margin-left: auto; /*-webkit-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -moz-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -o-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -ms-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; animation: fromTopAnim6 1.2s ease-in-out 0.9s both;*/ } .oo_effet2:hover { /*background: url('../images/icon_mission_ok.png') no-repeat;*/ background-color: #000000; border: 1px solid #666; border-radius: 50%; height: 48px; opacity:1; margin: 20px 10px 10px 0px; position: relative; width: 48px; z-index: 19999; display: block; margin-right: auto; margin-left: auto; /*-webkit-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -moz-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -o-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; -ms-animation: fromTopAnim6 1.2s ease-in-out 0.9s both; animation: fromTopAnim6 1.2s ease-in-out 0.9s both;*/ } @media only screen and (min-width: 1025px) { .malt { margin-top:0px; margin-left:-5px; } .idml { position: relative; margin: 60px 0px 0px -20px; padding: 0; } .infocont { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont:hover { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont:visited { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont2 { position: relative; color: #fff; font-size:15px; font-family: 'Play', sans-serif; padding: 5px 10px; line-height: 15px; text-decoration: none; } .infocont2:hover { position: relative; color: #fff; font-size:15px; line-height: 15px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont2:visited { position: relative; color: #fff; font-size:15px; line-height: 15px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .tuc { color: #fff; outline: 0 none; padding: 0; border-radius: 25%; height: 35px; line-height: 35px; width: 100%; margin: 0; font-size:24px; text-decoration: none; } .tuc:hover { color: #fff; outline: 0 none; padding: 0; border-radius: 25%; height: 35px; line-height: 35px; width: 100%; margin: 0; font-size:24px; text-decoration: none; } .menuautre { margin: -41px 0px 0px 20px; } .champs { margin: 10px 0px 50px 0px !important; } .modal-trigger { position: relative; color: #fff; font-size:13px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #fff; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #fff; text-decoration: none; color:#fff; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#fff; text-decoration: none; } .link0--helike:hover span { animation: glitchText 0.4s linear; text-decoration: none; } .infosite { color: #fff; text-decoration: none; font-size: 16px; font-family: 'Play', sans-serif; font-weight:bold; } .footer a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer3 a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer p { /*line-height: 1;*/ color: #fff; float: right; font-family: 'Play', sans-serif; margin: 0; margin-top: -20px; } .ml { color: #fff; text-decoration: none; } .ml:hover { color: #fff; text-decoration: none; } .ml:visited { color: #fff; text-decoration: none; } .story-content { padding: 3rem 5rem; } .content-container { /*left: 41.666%;*/ left:0; position: relative; padding: 0; background: #072c73 url(../images/background/fd4.jpg); background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: contain; background-position: top left; background-repeat: no-repeat; background-attachment: fixed; } .story { min-height: 100vh; /*background: url(../images/background/orakleed_logo.png); background-position-x: 0%; background-position-y: 0%; background-position: center right; background-repeat: no-repeat; background-attachment: fixed;*/ } h5 { color: #fff; font-family: 'Play', serif; font-weight: 300; } .idnormal{ position: relative; margin: 60px 0px 0px -20px; padding: 0; } .idmobil{ display: none; } .petittout { display:none; } .frame__title-wrap { width: 100%; /*max-width: 600px;*/ } .menunav { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 14px; color: #fff; text-align: left; display: block; list-style: none; margin: 0px; padding: 10px 0px; } .menunav > ul { font-size: 14px; color: #fff; text-align: left; list-style:none; margin: 0px 0px 0px -6px; padding: 0; } .menunav > ul > li { font-size: 14px; color: #fff; text-align: left; display: inline; list-style:none; padding: 5px 6px 5px 6px; } .menunav > ul > li > a { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1em; letter-spacing:0px; color: #fff; text-align: left; display: inline; list-style:none; } .menunav > ul > li > a:hover { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1em; letter-spacing:0px; color: #fff; text-align: left; display: inline; list-style:none; margin:2px 0px; text-decoration: none; } .flou { opacity:0.5; text-decoration: none !important; } .frame__tagline { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 100ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: justify; } .frame__taglineml { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 150ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: justify; } .frame__title { font-size: 1.5em; margin: 0; font-family: 'aqua_grotesqueregular', sans-serif; color: #fff; font-weight: normal; padding: 20px 0px 10px 0px; } .content__titlelogosmall1 { margin: 0vh 0 0 0; position: relative; min-width: 320px; max-width: 320px; height: auto; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__titlelogo2small2 { display:none; } .heading { position: relative; /*top:54vh;*/ margin-left:0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menuall { position: absolute; width: 100%; height: auto; bottom: 130px; margin: 0; } .imggauche { display:block; } .imgdroite { display:block; } .imggauchedevices { display:none; } .imgdroitedevices { display:none !important; } .contact-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/portfolio_image.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/resume_image.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/profile_image.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 25px 0; padding:0px 5px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .contactbloc { margin:6vh 0 0vh 0; } .partimg { width:60%; height:auto; } .partimgmobil { display: none; } .recul { margin-left: -100px; margin-top:40px; } .project { width: 100%; overflow: hidden; margin: 25px 0; padding:0px 5px; position: relative; } .projet-items { padding:0px; margin-top:-50px; min-height: 50vh; } .education-container { position: relative; margin: 25px 35px 50px 0px; } h4 { font-weight: 500; padding: 0px 0px 0px 5%; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; margin-top:25px; margin-bottom: -25px; } .petitbloc { padding: 6vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: flex; } .petitbloc2 { padding: 6vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: flex; } .petitblocmobil { display:none; } .txtdetails { color:#fff; font-family: 'Play', sans-serif; font-size: 23px; margin-bottom:20px; text-align: left; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color:#fff; font-family: 'Play', sans-serif; font-size: 18px; margin-bottom:70px; text-align: left; max-width: 1080px; margin: 0 auto; } .saut { height:70px; } .txtex5 { font-size: 1.6em; padding: 3%; text-align: center; color: #ccc; } .txtex6 { padding: 1.5%; text-align: center; font-size: 2.5em; font-family: 'Audiowide', cursive; color:#02276f; } .txtex7 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Syncopate', cursive; color:#02276f; } .txtex8 { padding: 0%; text-align: center; font-size: 0.75em; font-family: 'Play', sans-serif; color:#02276f; } .txtex9 { padding: 0%; text-align: center; font-size: 0.7em; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .txtex10 { padding: 0%; text-align: center; font-size: 1em; margin:20px 0px; font-family: 'Play', sans-serif; color:#333; } .txtex10:hover { color:#333; text-decoration: none; } .txtex11 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Play', sans-serif; color:#0037ff; font-weight: normal; } .txtex11:hover { color:#0037ff; text-decoration: none; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 15%; } .contpop2 { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0; } .contpop2 > p { color: #fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .text-focus-in { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } .text-focus-in2 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.5s; } .text-focus-in3 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.7s; } .text-focus-in4 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.9s; } .slide-in-elliptic-top-bck { -webkit-animation: slide-in-elliptic-top-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-top-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.5s; } .slit-in-diagonal-1 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; } .slit-in-diagonal-11 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.1s; } .slit-in-diagonal-111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.2s; } .slit-in-diagonal-1111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.3s; } .slit-in-diagonal-2 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.4s; } .slit-in-diagonal-22 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.5s; } .slit-in-diagonal-222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.6s; } .slit-in-diagonal-2222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.7s; } .slit-in-diagonal-11111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.8s; } .slit-in-diagonal-111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.9s; } .slit-in-diagonal-1111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1s; } .slit-in-diagonal-11111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1.1s; } .slit-in-diagonal-3 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1.6s; } .slit-in-diagonal-22222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.2s; } .slit-in-diagonal-222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.3s; } .slit-in-diagonal-2222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.4s; } .slit-in-diagonal-22222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.5s; } .slit-in-diagonal-4 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.7s; } .slit-in-diagonal-5 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.9s; } .slit-in-diagonal-6 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 2.1s; } .slit-in-diagonal-7 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 2.3s; } .logosmall { display: block; margin-right:auto; margin-left:auto; width:40%; height:auto; margin-bottom:5%; margin-top: 7%; } .logosmall2 { display: block; margin-right:auto; margin-left:auto; width:45%; height:auto; margin-bottom:2%; margin-top: 0%; } .truclog2 { display: block; margin-right:auto; margin-left:auto; width:70px; height:auto; margin-bottom:1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:60px; height:auto; margin-bottom:1%; margin-top: -5%; } .heading h2 { color: #fff; margin: 0; margin-top: 10px; font-size: 14px; letter-spacing: 0px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight:500; } .titre1 { display:none; } .main-heading h1 { color: #fff; position: relative; font-size: 2em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing:1px; margin-top:50px; } .main-heading h1:after { background-color: #fff; position: absolute; content: ""; top: 100%; left: 0; width: 400px; font-family: 'Play', sans-serif; } h2.small-heading { padding: 0px 35px 10px 15px; text-align: left; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; } h2.small-heading2 { padding: 0px 15px 10px 15px; text-align: left; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; } h2.small-heading3 { padding: 0px 15px 0px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; } h2.small-heading4 { padding: 0px 15px 0px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; margin-left:-20px; } .content__title { font-size: 9.5vw; margin: 30vh 0 0 0; position: absolute; bottom: 250px; right: 50px; text-align: center; color: #fff; font-family: 'Audiowide', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__titlelogo { margin: 30vh 0 0 0 !important; position: absolute; width: 80% !important; height: auto !important; bottom: 350px; right: 100px; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 2.3vw; margin: 0px 0 0 0; bottom: 270px; right: 100px; position: absolute; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: absolute; font-size: 1.2em; margin: 0px 0 0 0; bottom: 240px; right: 100px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: absolute; z-index: 9000; font-size: 1.6em; margin: 0px 0 0 0; bottom: 190px; right: 100px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title4:hover { font-family: 'Play', serif; position: absolute; z-index: 9000; font-size: 1.6em; margin: 0px 0 0 0; bottom: 190px; right: 100px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title5 { font-family: 'Roboto', serif; position: absolute; z-index: 9000; font-size: 13px; margin: 0px 0 0 0; bottom: 25px; right: 0px; color:#ACAAAA; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title6 { font-family: 'Roboto', serif; position: absolute; z-index: 9000; font-size: 13px; margin: 0px 0 0 0; bottom: 25px; left: 0px; color:#ACAAAA; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title7 { display: none; } .content__text { font-family: 'Play', serif; position: absolute; font-size: 1em; bottom: 150px; right: 50px; color:#efefef; opacity:0.7; text-align: center; font-weight: lighter; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.7); } .txtex { font-size: 14px; padding: 0px 15px; text-align: justify; color:#fff; } .txtex2 { font-size: 14px; padding: 0px 15px; text-align: justify; color:#fff; } .txtexintro { /*font-size: 14px; padding: 0px 15px; text-align: center; margin-bottom: 70px; max-width: 700px; display: block; margin-right: auto; margin-left: auto;*/ margin: 1.2rem 0rem; margin-left: 0rem; line-height: 1.5; max-width: 100ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: justify; margin-left: -20px; } .txtex3 { font-size: 14px; padding: 4% 6%; text-align: justify; color: #fff; } .txtex4 { font-size: 14px; padding: 3%; text-align: justify; color: #fff; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 400px; max-width: 480px; max-height: 240px; width: 50%; height: auto; background: #3085a3; text-align: center; cursor: pointer; border: 1px solid #676cb5; } .gridclient { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 2em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .gridclient figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; /*min-width: 320px;*/ max-width: 480px; max-height: 280px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; border:1px solid #ccc; } .posibtxclient { display: block; position: relative; margin-top: -30px; text-align: center; padding: 10px 15px 12px 15px; width: 180px; margin-bottom: 20px; margin-right: auto; margin-left: auto; border: none; background-color:#fff; } .posibtxclientlien { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:hover { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:link { text-decoration: none; } .grid5 { position: relative; justify-content: center; clear: both; margin: 0 auto; padding: 7em 2em 3em 0; align-content: center; width: 300px; /*height: 300px;*/ text-align: center; display: table-cell; vertical-align: middle; } .posibtx { margin-left: 6%; display: block; float: left; position: relative; margin-top: 0%; margin-bottom: 100px; } .posibtxinfo { margin-left: 0%; display: block; float: left; position: relative; margin-top: 0%; margin-bottom: 100px; } .grid2__item-title { font-size: 4vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 4vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .gridpc__item-title { font-size: 4vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 1366px) { .content__title5 { font-family: 'Roboto', serif; position: absolute; z-index: 9000; font-size: 13px; margin: 0px 0 0 0; bottom: 25px; right: 0px; color:#ACAAAA; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title6 { font-family: 'Roboto', serif; position: absolute; z-index: 9000; font-size: 13px; margin: 0px 0 0 0; bottom: 25px; left: 0px; color:#ACAAAA; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .frame__taglineml { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 150ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: justify; } .menuautre { margin: -41px 0px 0px 20px; } .champs { margin: 10px 0px 50px 0px !important; } .infosite { color: #fff; text-decoration: none; font-size: 16px; font-family: 'Play', sans-serif; font-weight:bold; } .footer a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer3 a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer p { /*line-height: 1;*/ color: #fff; float: right; font-family: 'Play', sans-serif; margin: 0; margin-top: -20px; } .ml { color: #fff; text-decoration: none; } .ml:hover { color: #fff; text-decoration: none; } .ml:visited { color: #fff; text-decoration: none; } .story-content { padding: 3rem 5rem; } .content-container { /*left: 41.666%;*/ left:0; position: relative; padding: 0; background: #022567 url(../images/background/fd4.jpg); background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: contain; background-position: top left; background-repeat: no-repeat; background-attachment: fixed; } .idmobil{ display: none; } .petittout { display:none; } .content__titlelogosmall1 { margin: 0vh 0 0 0; position: relative; width: 30%; height: auto; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__titlelogo2small2 { display:none; } .content__titlelogo { margin: 30vh 0 0 0 !important; position: absolute; width: 80% !important; height: auto !important; bottom: 350px; right: 50px; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .heading { position: relative; /*top: 64vh;*/ margin-left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menuall { position: absolute; width: 100%; height: auto; bottom: 130px; margin: 0; } .imggauche { display:block; } .imgdroite { display:block; } .imggauchedevices { display:none; } .imgdroitedevices { display:none !important; } .contact-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/portfolio_image.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/resume_image.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/profile_image.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 10px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .contactbloc { margin:6vh 0 0vh 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 55%; height: auto; margin-bottom: 2%; margin-top: 0%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:15px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .txtex9 { padding: 0%; text-align: center; font-size: 15px; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .part { text-align: center !important; } .partimg { width:60%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 14px; color: #fff; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px; position: relative; } .projet-items { padding:0px; margin-top:-50px; min-height: 50vh; } .grid__item:nth-child(odd) .grid__item-titlewrap { text-align: center; right:0; left:0; } .content__title2 { font-size: 2vw; margin: 0px 0 0 0; bottom: 280px; right: 50px; position: absolute; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: absolute; font-size: 1.2em; margin: 0px 0 0 0; bottom: 250px; right: 50px; color: #fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: absolute; z-index: 9000; font-size: 1.6em; margin: 0px 0 0 0; bottom: 190px; right: 50px; color: #fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title4:hover { font-family: 'Play', serif; position: absolute; z-index: 9000; font-size: 1.6em; margin: 0px 0 0 0; bottom: 190px; right: 50px; color: #fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc2 { padding: 6vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: flex; } .petitblocmobil { display:none; } .main-heading h1:after { background-color: #fff; position: absolute; content: ""; top: 100%; left: 0; width: 400px; font-family: 'Play', sans-serif; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 240px; max-width: 480px; max-height: 360px; width: 50%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .grid4 { position: relative; justify-content: left; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 10%; } .contpop2 > p { color: #fff; font-size: 1em; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 22px; margin-bottom: 20px; text-align: left; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 18px; margin-bottom: 70px; text-align: left; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:50px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { margin-left: 0px; display: block; float: left; position: relative; margin-top: 10px; margin-bottom: 100px; } .posibtxinfo { margin-left: 0%; display: block; float: left; position: relative; margin-top: 0%; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 80px; } .txtex { font-size: 13.5px; padding: 0px 15px; text-align: justify; } .txtex2 { font-size: 13.5px; padding: 0px; text-align: justify; } .txtexintro { font-size: 13.5px; padding: 0px; text-align: left; max-width: 740px; } .txtex3 { font-size: 13.5px; padding: 0px; text-align: justify; margin: 10px 0px; } .txtex4 { font-size: 13.5px; padding: 3%; text-align: justify; color: #fff; } h4 { font-weight: 500; padding: 0px 0px 0px 0%; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; margin-top: 25px; margin-bottom: 0px; } h2.small-heading2 { padding: 0px 15px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; } .grid2__item-title { font-size: 5vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 5vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .modal-trigger { position: relative; color: #fff; font-size:13px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #fff; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #fff; text-decoration: none; color:#fff; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#fff; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .gridpc__item-title { font-size: 5vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 1023px) { .idnormal { display:none; } .idmobil{ display: block; } } @media only screen and (min-width: 1023px) { } @media only screen and (max-width: 1024px) { .infocont { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont:hover { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .infocont:visited { position: relative; color: #fff; font-size:17px; font-family: 'Play', sans-serif; padding: 5px 10px; text-decoration: none; } .tuc { color: #fff; outline: 0 none; padding: 0; border-radius: 25%; height: 35px; line-height: 35px; width: 35px; margin: 0; font-size:24px; text-decoration: none; } .tuc:hover { color: #fff; outline: 0 none; padding: 0; border-radius: 25%; height: 35px; line-height: 35px; width: 35px; margin: 0; font-size:24px; text-decoration: none; } .content__title5 { display: none; } .content__title6 { display: none; } .content__title7 { font-family: 'Roboto', serif; position: absolute; z-index: 9000; font-size: 11px; margin: 0px 0 0 0; bottom: 30px; /*right: 0px;*/ color: #ACAAAA; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .frame__taglineml { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 150ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: justify; } .menuautre { margin: -41px 0px 0px 20px; } h2.small-heading4 { padding: 0px 15px 0px 0px; text-align: center; font-family: 'Play', sans-serif; font-size: 20px; color: #fff; font-weight: normal; margin-left: 0px; } .txtexintro { font-size: 14px; padding: 0px 15px; text-align: center; margin-bottom: 30px; color: #fff; max-width:100%; } .partimgmobil { display: none; } .modal-trigger { position: relative; color: #fff; font-size:13px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #fff; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #fff; text-decoration: none; color:#fff; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#fff; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .infosite { color: #fff; text-decoration: none; font-size: 16px; font-family: 'Play', sans-serif; font-weight:bold; } .footer a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer3 a, .infofoot:hover { color: #fff; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer p { /*line-height: 1;*/ color: #fff; float: right; font-family: 'Play', sans-serif; margin: 0; margin-top: -20px; } .ml { color: #fff; text-decoration: none; } .ml:hover { color: #fff; text-decoration: none; } .ml:visited { color: #fff; text-decoration: none; } .story-content { padding: 3rem 5rem; } .content-container { /*left: 41.666%;*/ left:0; position: relative; padding: 0; background: #022567 url(../images/background/fd4.jpg); background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: contain; background-position: top left; background-repeat: no-repeat; background-attachment: fixed; } .story { min-height: 100vh; background: none; } .idmobil{ display: none; } .idnormal{ position: relative; margin: 50px 0px 0px 0px; padding: 0; } .champs { margin: 10px 0px 50px 0px !important; } .petittout { display:none; } .content__titlelogosmall1 { margin: 5vh 0 0 0; position: relative; min-width: 420px; max-width: 420px; height: auto; text-align: center; margin-right: auto; margin-left: auto; display: block; } .content__titlelogo2small2 { display:none; } .menunav { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 14px; color: #fff; text-align: center; display: block; list-style: none; margin: 0px; padding: 10px 0px; } .menunav > ul { font-size: 14px; color: #fff; text-align: center; list-style:none; margin: 0px 0px 0px 0px; padding: 0; } .menunav > ul > li { font-size: 14px; color: #fff; text-align: left; display: inline; list-style:none; padding: 5px 6px 5px 6px; } .menunav > ul > li > a { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1em; letter-spacing:0px; color: #fff; text-align: left; display: inline; list-style:none; } .menunav > ul > li > a:hover { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1em; letter-spacing:0px; color: #fff; text-align: left; display: inline; list-style:none; margin:2px 0px; text-decoration: none; } .frame__title { font-size: 1.5em; margin: 0; font-family: 'aqua_grotesqueregular', sans-serif; color: #fff; text-align: center; font-weight: normal; padding: 20px 0px 10px 0px; } .frame__tagline { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; text-align: center; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 5.5vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/portfolio_image.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/resume_image.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/profile_image.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 15px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .content__titlelogo { margin: 40vh 0 0 0 !important; position: absolute; width: 85% !important; height: auto !important; bottom: 265px; right: 40px; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 2.2vw; margin: 0px 0 0 0; bottom: 210px; right: 40px; position: absolute; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: absolute; font-size: 15px; margin: 0px 0 0 0; bottom: 190px; right: 40px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: absolute; font-size: 18px; z-index: 9000; margin: 0px 0 0 0; bottom: 140px; right: 40px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .content__title4:hover { font-family: 'Play', serif; position: absolute; font-size: 18px; z-index: 9000; margin: 0px 0 0 0; bottom: 140px; right: 40px; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .contactbloc { margin:6vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 55%; height: auto; margin-bottom: 5%; margin-top: 0%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 0.85em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:14px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .txtex9 { padding: 0%; text-align: center; font-size: 14px; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .part { text-align: center !important; } .partimg { width:70%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #fff; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 10px; position: relative; } .projet-items { padding:0px; margin-top:-50px; } .grid__item:nth-child(odd) .grid__item-titlewrap { text-align: center; right:0; left:0; } .grid2__item:nth-child(odd) .grid2__item-titlewrap { text-align: center; right:0; left:0; } .grid__item-title { font-size: 6vw; line-height: 1; margin: -75px 0px 0px 0px; } .grid2__item-title { font-size: 6vw; line-height: 1; margin: -75px 0px 0px 0px; } .logosmall { display: block; margin-right: auto; margin-left: auto; width: 60%; height: auto; margin-bottom: 10%; margin-top: 10%; } h2.small-heading { padding: 0px 15px 12px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; font-weight: normal; margin-top: -5px; } h2.small-heading2 { padding: 0px 15px 12px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; font-weight: normal; margin-top: 0px; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } /* .petitbloc { padding: 6vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; }*/ .petitbloc2 { padding: 6vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } /* .petitblocmobil { display:none; }*/ .main-heading h1:after { background-color: #fff; position: absolute; content: ""; top: 100%; left: 0; width: 400px; font-family: 'Play', sans-serif; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 50%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .grid4 { position: relative; justify-content: left; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .gridclient { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 2em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .gridclient figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; /*min-width: 320px;*/ max-width: 480px; max-height: 220px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; border:1px solid #ccc; } .posibtxclient { display: block; position: relative; margin-top: 0px; text-align: center; padding: 10px 15px 12px 15px; width: 180px; margin-bottom: 20px; margin-right: auto; margin-left: auto; border:none; background-color:#fff; } .posibtxclientlien { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:hover { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:link { text-decoration: none; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 10%; } .contpop2 > p { color: #fff; font-size: 1em; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 22px; margin-bottom: 20px; text-align: left; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 18px; margin-bottom: 70px; text-align: left; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 80px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:50px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { margin-left: 0px; display: block; float: left; position: relative; margin-top: 20px; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 80px; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; font-weight: normal; } /*.txtex3 { font-size: 1em; padding: 3%; text-align: justify; margin-bottom: 20px; } .txtex2 { font-size: 1em; padding: 0px 25px; text-align: center; }*/ .txtex { font-size: 14px; padding: 0px; text-align: justify; color: #fff; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 3vh; color: #fff; } .txtexintro { font-size: 14px; padding: 0px 15px; text-align: center; margin-bottom:30px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin: 0px 0px 10px 0px; color: #fff; } .txtex4 { font-size: 1.2em; padding: 3%; text-align: justify; color: #fff; } h4 { font-weight: 500; padding: 10px 0px 15px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #fff; margin-bottom: -15px; } .txtdetails { color:#fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom:20px; text-align: left; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color:#fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom:70px; text-align: left; max-width: 1080px; margin: 0 auto; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .grid2__item-title { font-size: 6vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 6vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .gridpc__item-title { font-size: 6vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (min-width: 992px) { .saut { height:40px; } .txtex5 { font-size: 1.6em; padding: 3%; text-align: center; color: #ccc; } .txtex6 { padding: 1.5%; text-align: center; font-size: 2.5em; font-family: 'Audiowide', cursive; color:#02276f; } .txtex10 { padding: 0%; text-align: center; font-size: 1em; margin:20px 0px; font-family: 'Play', sans-serif; color:#fff; } .txtex10:hover { color:#fff; text-decoration: none; } .txtex11 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Play', sans-serif; color:#fff; font-weight: normal; } .txtex11:hover { color:#fff; text-decoration: none; } .txtex11:visited { color:#fff; text-decoration: none; } .contpop2 { position: relative; display: block; margin-right: auto; margin-left: 0; text-align: left; border-left: 1px dashed #5a5858; padding: 0px 0px 0px 15px; } .text-focus-in { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } .text-focus-in2 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.5s; } .text-focus-in3 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.7s; } .text-focus-in4 { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation-delay: 0.9s; } .slide-in-elliptic-top-bck { -webkit-animation: slide-in-elliptic-top-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-top-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.5s; } .slit-in-diagonal-1 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; } .slit-in-diagonal-11 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.1s; } .slit-in-diagonal-111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.2s; } .slit-in-diagonal-1111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.3s; } .slit-in-diagonal-2 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.4s; } .slit-in-diagonal-22 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.5s; } .slit-in-diagonal-222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.6s; } .slit-in-diagonal-2222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.7s; } .slit-in-diagonal-11111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.8s; } .slit-in-diagonal-111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.9s; } .slit-in-diagonal-1111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1s; } .slit-in-diagonal-11111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1.1s; } .slit-in-diagonal-22222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.2s; } .slit-in-diagonal-222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.3s; } .slit-in-diagonal-2222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.4s; } .slit-in-diagonal-22222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.5s; } .heading h2 { color: #fff; margin: 0; margin-top: 10px; font-size: 15px; letter-spacing: 0.3px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight:300; } .titre1 { display:none; } .content__title { font-size: 9.5vw; margin: 30vh 0 0 0; position: absolute; bottom: 250px; right: 50px; text-align: center; color: #fff; font-family: 'Audiowide', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__text { font-family: 'Play', serif; position: absolute; font-size: 1em; bottom: 150px; right: 50px; color:#efefef; opacity:0.7; text-align: center; font-weight: lighter; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.7); } .grid5 { position: relative; justify-content: center; clear: both; margin: 0 auto; padding: 7em 2em 3em 0; align-content: center; width: 300px; /*height: 300px;*/ text-align: center; display: table-cell; vertical-align: middle; } } @media only screen and (max-width: 992px) { /*.imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; }*/ .txtdetails { color:#fff; font-family: 'Play', sans-serif; font-size: 25px; margin-bottom:20px; text-align: left; } .txtdetails2 { color:#fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom:70px; text-align: left; } .logosmall2 { display: block; margin-right:auto; margin-left:auto; width:50%; height:auto; margin-bottom:5%; margin-top: 5%; } .txtex7 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Syncopate', cursive; color:#02276f; } .txtex8 { padding: 0%; text-align: center; font-size: 0.75em; font-family: 'Play', sans-serif; color:#02276f; } .txtex9 { padding: 0%; text-align: center; font-size: 0.7em; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .txtex10 { padding: 0%; text-align: center; font-size: 1em; margin:20px 0px; font-family: 'Play', sans-serif; color:#333; } .txtex10:hover { color:#333; text-decoration: none; } .txtex11 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Play', sans-serif; color:#0037ff; font-weight: normal; } .txtex11:hover { color:#0037ff; text-decoration: none; } .logosmall { display: block; margin-right:auto; margin-left:auto; width:60%; height:auto; margin-bottom:15%; margin-top: 15%; } .truclog2 { display: block; margin-right:auto; margin-left:auto; width:70px; height:auto; margin-bottom:1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:70px; height:auto; margin-bottom:1%; margin-top: -5%; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 14px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight:500; } .content__titlelogo2 { margin: 12vh 0 0 0; position: relative; width: 85%; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__titlelogo { display: none; } .main-heading h1 { color: #fff; position: relative; font-size: 3.5em; text-align: left; font-family: 'Audiowide', sans-serif; display: none; } .titre1 { color: #02276f; position: relative; font-size: 2em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -155px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -155px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .gridpc__item-title { font-size: 12vw; line-height: 1; margin: -155px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .txtex { font-size: 14px; padding: 10px; text-align: justify; } .txtex2 { font-size: 1.2em; padding: 10px; margin-top:0px; text-align: justify; } .txtex3 { font-size: 1.2em; padding: 3%; margin-bottom:80px; text-align: justify; } .txtex4 { font-size: 1em; padding: 3%; text-align: justify; color: #fff; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 2em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .grid5 { position: relative; justify-content: center; clear: both; margin: 0 auto; padding: 1em 0 1em; align-content: center; width: 130px; height: 80px; text-align: center; display: block; vertical-align: none; } .gridclient { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 2em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .gridclient figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; /*min-width: 320px;*/ max-width: 480px; max-height: 220px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; border:1px solid #ccc; } .posibtxclient { display: block; position: relative; margin-top: -30px; text-align: center; padding: 10px 15px 12px 15px; width: 180px; margin-bottom: 20px; margin-right: auto; margin-left: auto; border:none; background-color:#fff; } .posibtxclientlien { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:hover { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:link { text-decoration: none; } h1 { font-size: 40px; } h2 { font-size: 27px; } .close-btn { width: 40px; height: 40px; background: url(../images/icon/close2.png); background-size: cover; } .image-container { height: 500px; position: relative; } .content-container { left: 0; } .content-container2 { left: 0; background-color: #fff; } .main-heading { top: 70%; transform: translateY(-50%); } .content__title { font-size: 18vw; margin: 15vh 0 0 0; position: relative; text-align: center; color: #fff; font-family: 'Audiowide', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 4vw; margin: 50px 0 0 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 1.2em; margin: 10px 0 0 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__text { font-family: 'Play', serif; position: relative; font-size: 1em; margin: 10px 0 0 0; color:#efefef; opacity:0.7; text-align: center; font-weight: lighter; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.7); } .posibtx { margin-left: 3%; display: block; float: left; position: relative; margin-top: -50px; margin-bottom: 100px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .slit-in-diagonal-1 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; } .slit-in-diagonal-11 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.1s; } .slit-in-diagonal-111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.2s; } .slit-in-diagonal-1111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.3s; } .slit-in-diagonal-2 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.4s; } .slit-in-diagonal-22 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.5s; } .slit-in-diagonal-222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.6s; } .slit-in-diagonal-2222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 0.7s; } .slit-in-diagonal-11111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.8s; } .slit-in-diagonal-111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 0.9s; } .slit-in-diagonal-1111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1s; } .slit-in-diagonal-11111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1.6s; } .slit-in-diagonal-111111111 { -webkit-animation: slit-in-diagonal-1 0.45s ease-out both; animation: slit-in-diagonal-1 0.45s ease-out both; animation-delay: 1.1s; } .slit-in-diagonal-22222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.2s; } .slit-in-diagonal-222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.3s; } .slit-in-diagonal-2222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.4s; } .slit-in-diagonal-22222222 { -webkit-animation: slit-in-diagonal-2 0.45s ease-out both; animation: slit-in-diagonal-2 0.45s ease-out both; animation-delay: 1.5s; } } @media only screen and (max-width: 768px) { .no { display: none; } .frame__taglineml { margin: 1.2rem 0 2.5rem; line-height: 1.5; max-width: 150ch; font-family: 'Roboto', sans-serif; font-size: 14px; color: #333; text-align: justify; } .partimg { display:none; } h2.small-heading4 { padding: 0px 15px 0px 0px; text-align: center; font-family: 'Play', sans-serif; font-size: 20px; color: #02276f; font-weight: normal; margin-left: 0px; } .txtexintro { font-size: 14px; padding: 0px 15px; text-align: center; margin-bottom: 30px; color: #333; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .idnormal { display: none; } .infosite { color: #022567; text-decoration: none; font-size: 16px; font-family: 'Play', sans-serif; font-weight:bold; } .footer a, .infofoot:hover { color: #333; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer3 a, .infofoot:hover { color: #333; text-decoration: none; font-size: 14px; float: left; font-family: 'Play', sans-serif; } .footer p { /*line-height: 1;*/ color: #333; float: right; font-family: 'Play', sans-serif; margin: 0; margin-top: -20px; } .flou { opacity: 0.5; text-decoration: none !important; } .ml { color: #333; text-decoration: none; } .ml:hover { color: #333; text-decoration: none; } .ml:visited { color: #333; text-decoration: none; } .story-content { padding: 3rem 1.2rem; } .content__titlelogosmall1 { display: none; } .content__titlelogo2small2 { margin: -30px 0 0 0; margin-right: 0px; margin-left: 0px; position: relative; display: block; padding: 0px !important; margin-left: auto; margin-right: auto; width: 100%; height: auto; text-align: center; } .content-container { /*left: 41.666%;*/ left: 0; position: relative; padding: 0; background: #fff url(../images/background/fdmobil.jpg); background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: contain; background-position: top center; background-repeat: no-repeat; background-attachment: scroll; } .frame__tagline { margin: 1.2rem 2rem 2.5rem; line-height: 1.5; max-width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; color: #343333; text-align: justify; } .menunav { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 14px; color: #343333; text-align: center; display: block; list-style: none; margin: 0px; padding: 10px 0px; } .menunav > ul { font-size: 14px; color: #343333; text-align: center; list-style:none; margin: -30px 0px 50px -6px; padding: 0; } .menunav > ul > li { font-size: 14px; color: #343333; text-align: left; display: inline; list-style:none; padding: 5px 6px 5px 6px; } .menunav > ul > li > a { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1.1em; letter-spacing:0px; color: #343333; text-align: left; display: inline; list-style:none; } .menunav > ul > li > a:hover { font-family: 'aqua_grotesqueregular', sans-serif; font-size: 1em; letter-spacing:0px; color: #343333; text-align: left; display: inline; list-style:none; margin:2px 0px; text-decoration: none; } .idmobil{ display: block; } .petittout { display:block; } .heading { position: relative; top: 5vh; padding: 10px 0px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menuall { position: absolute; width: 100%; height: auto; top: 0px; /* bottom: 250px; */ margin: 0px 0px 0px 10%; } .menumain { position: relative; margin: auto; padding: 1.3vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 25px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 50%; height: auto; margin-bottom: 3%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.7em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:16px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:60%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 20px; position: relative; } .projet-items { padding:0px; margin-top:-50px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; color: #343333; } .posibtx { margin-left: 0%; display: block; float: left; position: relative; margin-top: -50px; margin-bottom: 100px; } .posibtxinfo { margin-left: 0%; display: block; float: none; margin-right: auto; margin-left: auto; position: relative; margin-top: 20px; margin-bottom: 50px; text-align: center; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 50%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .gridclient { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 2em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .gridclient figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; /*min-width: 320px;*/ max-width: 480px; max-height: 220px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; border:1px solid #ccc; } .posibtxclient { display: block; position: relative; margin-top: 0px; text-align: center; padding: 10px 15px 12px 15px; width: 180px; margin-bottom: 20px; margin-right: auto; margin-left: auto; border:none; background-color:#fff; } .posibtxclientlien { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:hover { position: relative; text-align: center; color: #022568; font-size: 14px; font-family: 'Play', sans-serif; font-style: normal; text-decoration: none; } .posibtxclientlien:link { text-decoration: none; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; color:#343333; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; color:#343333; } h4 { font-weight: 500; padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; margin-bottom: -15px; margin-left: -5px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 14px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .heading h3 { font-size: 14px; } .txtdetails { color:#fff; font-family: 'Play', sans-serif; font-size: 22px; margin-bottom:5px; text-align: center; } .txtdetails2 { color:#fff; font-family: 'Play', sans-serif; font-size: 17px; margin-bottom:40px; text-align: center; } .saut { height: 0px; } .txtex9 { padding: 0%; text-align: center; font-size: 14px; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .txtex10 { padding: 0%; text-align: center; font-size: 1em; margin:20px 0px; font-family: 'Play', sans-serif; color:#333; } .txtex10:hover { color:#333; text-decoration: none; } .txtex11 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Play', sans-serif; color:#0037ff; font-weight: normal; } .txtex11:hover { color:#0037ff; text-decoration: none; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 5%; } .contpop2 { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0; } .logosmall { display: block; margin-right:auto; margin-left:auto; width:65%; height:auto; margin-bottom:8%; margin-top: 6%; } .content__title2 { font-size: 5vw; margin: -260px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__titlelogo2 { margin: -72vh 0 0 0 !important; position: relative; width: 70% !important; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__titlelogo { display: none; } .titre1 { color: #02276f; position: relative; font-size: 1.5em; text-align: center; margin-top: 0vh; font-family: 'aqua_grotesqueregular', sans-serif; } .espace { margin-top: 60vh; } .main-heading h1 { color: #fff; position: relative; font-size: 3.5em; text-align: left; font-family: 'Audiowide', sans-serif; display: none; } .main-heading h1:after { background-color: #fff; position: absolute; content: ""; top: 100%; left: 0; width: 400px; font-family: 'Play', sans-serif; display: none; } h2.small-heading { padding: 0px 15px 12px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 20px; color: #02276f; font-weight: normal; } h2.small-heading2 { padding: 15px 15px 0px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 20px; color: #02276f; font-weight: normal; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 20px; color: #02276f; font-weight: normal; } h1 { font-size: 30px; } h2 { font-size: 22px; } .heading h3 { font-size: 13px; } .main-heading h1:after { width: 250px; } .story-content div { /*margin-top: 0px;*/ } .education-container:before, .experience-container:before { display: none; } .education-content, .experience-content { width: 100%; margin-left: 0; } .education-content h3, .experience-content h3 { text-align: center; } .education-content h3:before, .experience-content h3:before { display: none; } .google-map { height: 500px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 17px; margin: 10px 0 0 0; display: block; margin-right: auto; margin-left: auto; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 20px; z-index: 9000; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } } @media only screen and (max-width: 767px) { .heading { position: relative; top: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1.3vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .petitbloc { display: none; } .txtdetails { color:#fff; font-family: 'Play', sans-serif; font-size: 25px; margin-bottom:20px; text-align: center; } .txtdetails2 { color:#fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom:70px; text-align: center; } .logosmall2 { display: block; margin-right:auto; margin-left:auto; width:65%; height:auto; margin-bottom:5%; margin-top: 5%; } .txtex7 { padding: 0%; text-align: center; font-size: 1.7em; font-family: 'Syncopate', cursive; color:#02276f; } .txtex8 { padding: 0%; text-align: center; font-size: 1.2em; font-family: 'Play', sans-serif; color:#02276f; } .txtex9 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color:#333; } .txtex9:hover { color:#333; text-decoration: none; } .txtex10 { padding: 0%; text-align: center; font-size: 1em; margin:20px 0px; font-family: 'Play', sans-serif; color:#333; } .txtex10:hover { color:#333; text-decoration: none; } .txtex11 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Play', sans-serif; color:#0037ff; font-weight: normal; } .txtex11:hover { color:#0037ff; text-decoration: none; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 5%; } .contpop2 { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0; } .logosmall { display: block; margin-right:auto; margin-left:auto; width:75%; height:auto; margin-bottom:15%; margin-top: 10%; } .heading i1, .heading i2, .heading i3, .heading i4 { border-radius: 50%; color: #fff; display: block; margin-top:10px; font-size: 35px; height: 40px; /*line-height: 55px;*/ margin: auto auto 10px; /*border:1px solid #ccc;*/ text-align: center; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); width: 40px; -webkir-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; margin-left:-35px; } .content__titlelogo { display: none; } .content__titlelogo2 { margin: 3vh 0 0 0; position: relative; width: 75%; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title { font-size: 18.5vw; margin: 15vh 0 0 0; position: relative; text-align: center; color: #fff; font-family: 'Audiowide', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 5vw; margin: 20px 0 0 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', cursive; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 1em; margin: 10px 0 0 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__text { font-family: 'Play', serif; position: relative; font-size: 1em; margin: 10px 0 0 0; color:#efefef; opacity:0.7; text-align: center; font-weight: lighter; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.7); } .txtex { font-size: 15px; padding: 0px; text-align: justify; } .txtexintro { font-size: 15px; padding: 0px; text-align: justify; margin-bottom: 25px; } .txtex2 { font-size: 15px; padding: 20px 0px; text-align: justify; } /* .txtex3 { font-size: 15px; padding: 20px 0px; text-align: justify; }*/ h2.small-heading { padding: 0px 15px 12px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } h2.small-heading2 { padding: 10px 15px 0px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; } .intro-content h1 { font-size: 27px; } .intro-content h2 { font-size: 15px; margin-top: -3px; } .main-heading { padding-left: 20px; } .main-heading h1:after { height: 3px; } .image-container { height: 300px; } .story-content div a { /*display: block; float: none; margin: 5px;*/ } .contact-form button { width: 100%; } .project .buttons a { width: 30px; height: 30px; line-height: 30px; margin: 0; font-size: 12px; } .spinner { height: 45px; margin: 0 auto; opacity: 0.3; position: relative; width: 42px; } .spinner:hover { height: 45px; margin: 0 auto; opacity: 1; position: relative; width: 42px; } .spinner3 { height: 35px; margin: 0 auto; opacity: 0.3; position: relative; width: 35px; } .spinner3:hover { height: 35px; margin: 0 auto; opacity: 1; position: relative; width: 35px; } .cube1, .cube2, .cube3, .cube4 { background-color: #fff; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; animation: sk-cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .cube3 { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; } .cube4 { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; } @-webkit-keyframes sk-cubemove { 25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes sk-cubemove { 25% { transform: translateX(35px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(35px) translateY(35px) rotate(-179deg); -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); } 50.1% { transform: translateX(35px) translateY(35px) rotate(-180deg); -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @media only screen and (max-width: 720px) { .content-container { /* left: 41.666%; */ left: 0; position: relative; padding: 0; background: #fff url(../images/background/fdmobil.jpg); background-position-x: 0%; background-position-y: 0%; background-size: contain; background-position: top center; background-repeat: no-repeat; background-attachment: scroll; } .espace { margin-top: 70vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; text-decoration: none; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .pied { padding: 3rem 2rem; } .heading { position: relative; top: 50vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:block; } .imgdroite { display:block !important; } .imggauchedevices { display:none; } .imgdroitedevices { display:none !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 35px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 50%; height: auto; margin-bottom: 2%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.7em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:16px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:40%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 55px; position: relative; } .grid__item:nth-child(odd) .grid__item-titlewrap { text-align: center; right: 0; left: 0; } .grid2__item:nth-child(odd) .grid2__item-titlewrap { text-align: center; right: 0; left: 0; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -155px 0px 0px 0px; } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -155px 0px 0px 0px; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .content__titlelogo2 { margin: -140vh 0 0 !important; position: relative; width: 80% !important; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 2.6vw; margin: -340px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .heading h3 { font-size: 13px; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 15px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 12px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.6em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: left; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:70px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 20px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; width: 240px; font-size: 14px; margin: 10px 0 0 0; display: block; margin-right: auto; margin-left: auto; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -125px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -125px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 540px) { .espace { margin-top: 60vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .pied { padding: 3rem 2rem; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 15px; position: relative; } .partclient { width:12%; height:auto; display: block; margin-right: auto; margin-left: auto; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.7em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:15px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:50%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 55px; position: relative; } .content__titlelogo2 { margin: -78vh 0 0 0 !important; position: relative; width: 75% !important; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 4vw; margin: -220px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 1em; margin: 20px 0 0 0; width: 100%; color: #fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); display: block; margin-right: auto; margin-left: auto; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 15px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 25px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 13px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.2em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:50px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 5px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -115px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -115px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 415px) { .espace { margin-top: 50vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: none; } .pied { padding: 3rem 2rem; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .txtex3 { font-size: 1em; padding: 20px 0px; text-align: justify; } .posibtx { margin-left: 0%; display: block; text-align: center; float: none; position: relative; margin-top: 0px; margin-bottom: 100px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 414px) { .espace { margin-top: 50vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .pied { padding: 3rem 2rem; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.3em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:14px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:50%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 5px; position: relative; } .clientimg { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 0px; position: relative; } .partclient { width:60%; height:auto; position: relative; top: 0; left: 0; display: block; margin-right: auto; margin-left: auto; } .content__title2 { font-size: 5vw; margin: -240px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .projet-items { padding:0px; margin-top:-50px; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 20px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 14px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.4em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 80px; height: auto; margin-bottom: 1%; margin-top: 1%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 10px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; z-index: 9000; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 411px) { .espace { margin-top: 50vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .pied { padding: 3rem 2rem; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.5em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:14px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:50%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 15px; position: relative; } .content__title2 { font-size: 6vw; margin: -30vh 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .projet-items { padding:0px; margin-top:-50px; } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 15px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 20px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 13px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.1em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:50px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 20px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; margin: 20px 0 0 0; z-index: 9000; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 375px) { .espace { margin-top: 50vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: none; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.3em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size:14px; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:50%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 15px; position: relative; } .projet-items { padding:0px; margin-top:-50px; } .content__titlelogo2 { margin: -75vh 0 0 0 !important; position: relative; width: 75% !important; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .grid4 figure { position: relative; float: left; overflow: hidden; margin: 0% 0%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 20px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 13px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.3em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 80px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:40px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 20px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title2 { font-size: 6vw; margin: -210px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; z-index: 9000; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 360px) { .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .espace { margin-top: 45vh; } .pied { padding: 3rem 3rem; } .frame__tagline { margin: 1.2rem 1rem 2.5rem; line-height: 1.5; max-width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; color: #343333; text-align: justify; } .heading { position: relative; top: 5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.3em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { display:none; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .project { width: 100%; overflow: hidden; margin: 15px 0; padding:0px 15px; position: relative; } .content__title2 { font-size: 5vw; margin: -200px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .projet-items { padding:0px; margin-top:-50px; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 15px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 20px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 13px; letter-spacing: 0px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.1em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 0px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:40px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; float: none; position: relative; margin-top: 20px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 18px; margin: 20px 0 0 0; z-index: 9000; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } } @media only screen and (max-width: 320px) { .espace { margin-top: 50vh; } .partimgmobil { width: 60%; height: auto; display: block; margin-right: auto; margin-left: auto; } .story-content div a { /*display: block; float: none; margin: 0px;*/ } .story-content { padding: 0rem 0rem; } .mobilstop { padding-left: 0px !important; padding-right: 0px !important; } .modal-trigger { position: relative; color: #022567; font-size:14px; background-color: transparent; font-family: 'Roboto', sans-serif; font-style: normal; border:1px solid #022567; /* top: 50%; left: 50%;*/ padding: 8px 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } .modal-trigger, button { /* top: 50%; left: 50%;*/ padding: 10px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } button { border: 1px solid #fff; outline: none; color: #fff; tex-align: center; display: block; margin-right: auto; margin-left: auto; font-family: 'Play', sans-serif; } .modal-trigger:hover { /*padding: 20px 60px;*/ text-decoration: none; } .link0--helike { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid #022567; text-decoration: none; color:#022567; } .link0--helike:hover { font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px 20px; border: 1px solid transparent; color:#022567; } .link0--helike:hover span { animation: glitchText 0.4s linear; } .menunav > ul { display: block; } .heading { position: relative; top: 5vh; padding: 5px 0px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .menumain { position: relative; margin: auto; padding: 1vw 0; } .imggauche { display:none; } .imgdroite { display:none !important; } .imggauchedevices { display:block; } .imgdroitedevices { display:block !important; } .contact-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .portfolio-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .resume-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .profile-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .mentions-page .image-container { background: url(../images/background/fdmobil.jpg); background-size: cover; background-position: bottom; } .contactbloc { margin:3vh 0 0; } .logosmall2 { display: block; margin-right: auto; margin-left: auto; width: 75%; height: auto; margin-bottom: 5%; margin-top: 5%; } .txtex5 { padding: 0 15px; } .txtex55 { font-size: 14px; padding: 0px 15px; text-align: justify; margin-bottom: 25px; } .txtex7 { padding: 0%; text-align: center; font-size: 1.1em; font-family: 'Syncopate', cursive; color: #02276f; } .txtex8 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #02276f; font-weight: normal; } .txtex11 { padding: 0%; text-align: center; font-size: 1em; font-family: 'Play', sans-serif; color: #0037ff; font-weight: normal; } .part { text-align: center !important; } .partimg { width:70%; height:auto; } h5 { padding: 10px 0px 10px 0px; text-align: center; font-family: 'Play', sans-serif !important; font-size: 16px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .projet-items { padding:0px; margin-top:-50px; } h2.small-heading2 { padding: 10px 0px 0px 0px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } h2.small-heading { padding: 10px 0px 0px 0px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .content__titlelogo2 { margin: -80vh 0 0 0 !important; position: relative; width: 75% !important; text-align: center; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2); } .content__title2 { font-size: 5vw; margin: -190px 0 0 0; bottom: 0; right: 0; position: relative; text-align: center; color: #fff; font-family: 'Syncopate', sans-sérif; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.5); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 1em; margin: 20px 0 0 0; width: 100%; color: #fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); display: block; margin-right: auto; margin-left: auto; } .heading h3 { font-size: 11px; } h4 { /* font-size: 16px; font-weight: 500;*/ padding: 10px 0px 10px 0px; text-align: left; font-family: 'Play', sans-serif; font-size: 15px; color: #02276f; font-weight: normal; margin-bottom: -15px; } .txtexintro { font-size: 14px; padding: 0px 20px; text-align: justify; margin-bottom: 25px; } .txtex { font-size: 14px; padding: 0px; text-align: justify; } .txtex2 { font-size: 14px; padding: 0px; text-align: justify; margin-top: 25px; } .txtex3 { font-size: 14px; padding: 0px; text-align: justify; margin-bottom: 20px; } .heading h2 { color: #fff; margin: 0; margin-top: 12px; font-size: 12px; letter-spacing: 0.5px; font-family: 'aqua_grotesqueregular', sans-serif; opacity: 1; font-weight: 500; } .titre1 { color: #02276f; position: relative; font-size: 1.2em; text-align: center; font-family: 'aqua_grotesqueregular', sans-serif; } h2.small-heading3 { padding: 0px 15px 10px 15px; text-align: center; font-family: 'Play', sans-serif; font-size: 18px; color: #02276f; font-weight: normal; } .education-container { position: relative; margin: 25px 0px 50px 0px; } .petitbloc { display: none; } .petitblocmobil { padding: 8vh 0; max-width: 1080px; justify-content: center; align-items: center; margin: 0 auto; display: block; } .grid4 { position: relative; justify-content: center; display: flex; clear: both; margin: 0 auto; padding: 1em 0 0em; align-content: center; max-width: 1080px; list-style: none; text-align: center; } .contpop { position: relative; display: block; margin-right: auto; margin-left: auto; text-align: justify; padding: 0 0%; } .contpop > p { color:#fff; font-size: 14px; font-family: 'Play', sans-serif; } .contpop2 > p { color:#fff; font-size: 14px; font-family: 'Roboto', sans-serif; } .saut { height: 30px; } .txtdetails { color: #fff; font-family: 'Play', sans-serif; font-size: 20px; margin-bottom: 20px; text-align: center; max-width: 1080px; margin: 0 auto; } .txtdetails2 { color: #fff; font-family: 'Play', sans-serif; font-size: 16px; margin-bottom: 70px; text-align: center; max-width: 1080px; margin: 0 auto; } .truclog2 { display: block; margin-right: auto; margin-left: auto; width: 70px; height: auto; margin-bottom: 1%; margin-top: 1%; } .truclog3 { display: block; margin-right:auto; margin-left:auto; width:40px; height:auto; margin-bottom:1%; margin-top: -5%; } .posibtx { display: block; /*float: left;*/ position: relative; margin-top: 20px; margin-right:auto; margin-left:auto; margin-bottom: 100px; } .main-heading h1 { color: #fff; position: relative; font-size: 1.5em; text-align: left; font-family: 'aqua_grotesqueregular', sans-serif; letter-spacing: 1px; margin-top: 50px; } .txtintro { padding: 3vh 0; max-width: 780px; display: grid; grid-row-gap: 0vh; grid-template-columns: repeat(1, 1fr); } .content__title3 { font-family: 'Play', serif; position: relative; font-size: 14px; margin: 10px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); } .content__title4 { font-family: 'Play', serif; position: relative; font-size: 16px; z-index: 9000; margin: 20px 0 0 0; bottom: 0; right: 0; color:#fff; text-align: center; font-weight: 400; animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.8); } .grid2__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } .grid__item-title { font-size: 12vw; line-height: 1; margin: -85px 0px 0px 0px; font-family: 'aqua_grotesqueregular', sans-serif; } }