/* checkbox */ .radio, .checkbox { margin-top: 5px; margin-bottom: 5px; } .checkbox-component-label-text { font-size: 1rem; line-height: inherit; } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { cursor: pointer; margin-top: 6px; } .component-container { z-index: 99999; position: relative;} .layout-options-toolbar .field-container, .layout-options-toolbar .field-label, .layout-options-toolbar .field { padding: 0; margin: 0; } .layout-options-toolbar .field-body { width: auto; min-height: inherit; display: inherit; flex-direction: inherit; justify-content: inherit; align-items: inherit; align-content: inherit; } .modal { z-index: 9999999999999 !important;} .base-component-children { width: 100%; height: 100%; height:auto; display: block; flex-direction: inherit; justify-content: inherit; flex-wrap: inherit; } .components-list-item { height: auto; margin: 0; display: block; /* position: relative; */ flex-grow: 1; } .modal .field-label-title { font-weight: 400; font-size: 1rem; color: inherit; padding: 0.5rem 0 0.25rem; font-size: 0.8rem; line-height: inherit;} .modal-header .close { background: #2b4861; opacity: 1; position: absolute; top: 0; margin: 0; font-size: 24px; right: 0; padding: 10px 15px 15px 18px; line-height: 1; border-radius: 0 4px 0 1rem; } .layout-options-toolbar .field-label-title {font-weight: 400; font-size: 1rem; line-height: 1.2; padding: 0;} .layout-options-toolbar .base-component-children.row { display: flex; justify-content: space-evenly; align-items: center;} .layout-options-toolbar .checkbox label { padding-left: 0px; } .container-fluid { padding-right: 0; padding-left: 0; } .modal .my-sm-1, .modal-content .my-sm-1 { font-size: inherit; font-weight: inherit; } .modal .field-label, .modal-content .field-label, .layout-options-toolbar .field-label { display: flex; flex-direction: row; justify-content: space-between; } .alert-container .alert { position: relative; } .alert-container .close { position: absolute !important; right: 10px !important; top: 10px !important;} .MuiTableRow-root:nth-child(odd) { background: #ecf4fb; } .MuiTableRow-root * span { pointer-events:none; } .MuiFormControl-root { flex-basis: 100%; padding: 0 30px 0 0 !important;} .MuiToolbar-root { min-height: 100px !important; padding-left: 16px !important;} .MuiPaper-root { margin: 0 auto; padding: 1rem 1% 1%; max-width: calc(1920px - 4% - 26px); } .MuiPaper-root .MuiToolbar-root.MuiToolbar-regular.MuiToolbar-gutters .jss7 { display:none;} .MuiTableCell-root { border:0 !important; letter-spacing: 0 !important; color: #232323 !important;} /* fixes */ .field-container { min-width: unset; margin: 0; padding: 0;} .field-body { width: 100%; min-height: inherit; display: inherit; flex-direction: inherit; justify-content: inherit; align-items: inherit; align-content: inherit; } /* fixes */ html { font-size: 1rem; -webkit-font-smoothing: antialiased; scrollbar-color: #999 #EEE; scrollbar-width: thin;} body { font-family: "Cairo", sans-serif; font-size: 1rem; font-size: initial !important; font-weight: 400; letter-spacing: 0.025em; line-height: 1.5; color: #666; -webkit-overflow-scrolling:touch; min-height: 100vh; overflow-y: scroll; } html, body { /* overscroll-behavior: none; */ } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { cursor: pointer; background: #345878; } ::selection { background-color:#345878; color:#fff; } -webkit-::selection { background-color:#345878; color:#fff; } ::-moz-selection { background-color:#345878; color:#fff; } .row { margin:0; } .main-container { background-color: #fff;} header {box-shadow: none;} a {cursor:pointer;} .menu-top-nav { position: absolute; top: 24px; right: 0; text-transform: uppercase; line-height: 1.5; } .menu-top-nav .btn { margin-top:-15px; padding:1rem 2rem 0.95rem; } p, .parag { margin:0 0 1.5rem 0;} img { border: 0; max-width: 100%; } /* 1.2 Typography */ h1, .h1 { font-weight: 700; font-size: 2.5rem; line-height: 1.2; color: #231f6a; letter-spacing: -0.01em; margin: 0 !important; } h2, .h2 { font-weight: 600; font-size: 2.25rem; line-height: 1.2; color: #231f6a; letter-spacing: 0; margin:0rem 0; margin-bottom: 1rem; font-weight: normal;} h3, .h3 { font-weight: 600; font-size:2.75rem; line-height: 1.2; letter-spacing: -0.05em; letter-spacing: -0.02em; color: #231f6a; margin:1rem 0 0.5rem; } h4, .h4 { font-weight: 600; font-size: 1.714rem; line-height: 1.25; letter-spacing: 0.025em; color: #231f6a; margin:2.6rem 0; } h5, .h5 { font-weight: 600; font-size: 1.571rem; line-height: 1.1; letter-spacing:0; color: #231f6a; margin:2.6rem 0; } h6, .h6 { font-weight: 600; font-size: 1.285rem; line-height: 1.3333; letter-spacing:0; color: #231f6a; margin:2.6rem 0; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { color:inherit; } h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover { text-decoration: none; } strong { font-weight: 600; } p, blockquote { } blockquote { font-family: 'Playfair Display', serif; font-size: 1.714rem; letter-spacing: 0.025em; line-height: 1.5; padding: 0; width: 80%; padding-left: 6.8rem; border-left: 0.3rem solid #345878; margin-top: 5rem; color:#231f6a; } cite { display: block; color: #231f6a; font-weight: 600; letter-spacing: 0; font-style: normal; } .blockquote-cite { font-size: 1rem; color: #999999; letter-spacing: 0.05em; padding-left: 7.1rem; margin-bottom: 5rem; } .blockquote-cite cite { font-size: 1.14rem; } a { color:#345878; -webkit-transition: color .3s ease-out; -o-transition: color .3s ease-out; transition: color .3s ease-out; } a:hover, a:focus { color:#345878; outline: none; } a:focus { text-decoration: none; } /* 1.3 Fields */ input[type='text'], input[type='address'], input[type='url'], input[type='password'], input[type='email'], input[type="search"], input[type="tel"], textarea { display: inline-block; width:100%; font-size: 1rem; border-radius: 0.75em; color: #3d3d3d; background-color:#fff; border:0; border: 1px solid #d1d1d1; border-radius: 4px; padding:0.2rem 1rem 0; height:3.6em; height:50px; line-height:1.2; -webkit-box-shadow:none; box-shadow:none; -webkit-appearance: none; -webkit-transition: all .15s; -o-transition: all .15s; transition: all .15s; } textarea { padding-top: 0.8rem; height: 8rem; resize:none; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } input[type='text']:focus, input[type='address']:focus, input[type='url']:focus, input[type='password']:focus, input[type='email']:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus { border-color: #345878; outline: 0; } input.input-gray, textarea.input-gray { background: #f6f6f6; } input.input-gray:focus, textarea.input-gray:focus { background: #fff; } input::-moz-placeholder { color: #999999; opacity: 1; } input:-ms-input-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } textarea::-moz-placeholder { color: #999; opacity: 1; } textarea:-ms-input-placeholder { color: #999; } textarea::-webkit-input-placeholder { color: #999; } .form-group { margin-bottom: 30px; } input.error { border-color: #345878; } .mc-label, label.error { font-size: 0.83em; font-weight: 400; margin: 0.7em 0 0 0; color: #747474; } .becfis-radio-button-container { display:flex; flex-wrap: wrap; } .becfis-radio-button-container figcaption { flex-basis: 100%; } .becfis-radio-button-container .components-list-item { flex-grow: 0!important; flex-shrink: 0!important; flex-basis: auto!important; } .becfis-radio-button { margin: 0; } .becfis-radio-button-label-text { margin-left: 0; } input[type=radio] { display:none; margin:10px; } input[type=radio] + label { display: inline-block; margin: 0px; padding: 0.5rem 2rem !important; background-color: #d9e8ec; border:0; border-left: 1px solid #d1d1d1;} input[type=radio]:checked + label { background-image: none; background-color: #5690c3; color: #fff; } .radio label { padding-left: 0px; } /* 1.4 Buttons */ .btn { color:#fff; letter-spacing: 0.025em; font-size: 1rem; display: inline-block; border:0; border-radius: 0; padding: 1.1em 2.28em 1em; padding:1rem 2rem; background-color: #5690c3; text-decoration: none; -webkit-transition: all .3s ease-out!important; transition: all .3s ease-out!important; } .btn:hover, .btn:focus, .btn:active, .btn:active:hover { background-color:#345878; color: #fff; -webkit-box-shadow:none; box-shadow: none; outline: none!important; } .btn-upper { font-weight: 600; text-transform: uppercase; } .contact-form .btn {margin-top: 30px;} .btn-yellow { background: #345878; color: #000; } .btn-yellow:hover, .btn-yellow:focus { background: #000; } /* 1.5 Icons */ .icon { display: inline-block; } .icon-medium { font-size: 4.2rem; } .link-arrow { display: inline-block; color: #000; line-height: 1!important; font-weight: 600; } .link-arrow-2 { display: inline-block; font-size: 1.14rem; color: #999999; font-weight: 400; } .link-arrow .icon, .link-arrow-2 .icon { position: relative; margin-left: 0.7rem; font-size: 2.1em; vertical-align: middle; -webkit-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .link-arrow .icon { top:0.1rem; } .link-arrow .ion-ios-arrow-right { font-size: 1.5em; } .link-arrow-2 .ion-ios-arrow-right { font-size: 1.5em; } .link-arrow:hover, .link-arrow-2:hover { color: #345878; text-decoration:none; } .link-arrow:hover .icon, .link-arrow-2:hover .icon { -webkit-transform: translateX(0.5rem); -o-transform: translateX(0.5rem); transform: translateX(0.5rem); } /* 1.6 Preloader */ .animsition { position:absolute; z-index: 100; left: 0; width: 100%; top:0; height: 100%; } .preloader { position: fixed; overflow: hidden; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background:#fff; color:#4b4b4b; text-align: center; } .spinner { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #345878; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s 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); } } /* 1.7 Helpers */ .text-dark { color: #000; } .text-muted { color: #999; } .text-white { color: #fff; } .text-primary { color: #345878; } .masked { position: relative; } .masked:before { content:''; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: #000; opacity: 0.1; } .pt-0 { padding-top: 0!important; } .pb-0 { padding-bottom:0!important; } .rel-1 { position: relative; z-index: 1; } .overflow-hidden { overflow: hidden; } /* ------------------------------------------------------------------------------- 2. Navbar ------------------------------------------------------------------------------- */ .navbar { position: relative; z-index: 10; left:0; top:0; width:100%; padding-top: 14px; height: 93px; background-color: #fff; margin:0; border-radius: 0; } .navbar .brand { float: left; margin-top: -0.5rem; -webkit-transition: none; -o-transition: none; transition: none; } .nav-tabs > li { background: #eee; } /* 2.1 Navbar elements */ .brand { line-height: 1.6; color: #000; display: inline-block; } a.brand:hover, a.brand:focus { text-decoration: none; color: #000; } .brand img { float: left; margin-right: 2rem; cursor: pointer; } .brand-info { /* display: inline-block; */ float: left;} .brand-name { font-weight: 600; font-size: 1.5rem; line-height: 1; } .brand-text { color: #999999; font-size: 1rem; font-weight: 300; margin-top: -0.3rem; } .navbar-toggle { display: block; margin:0; padding: 0; border-radius: 0; display:none;} .navbar-toggle .icon-bar { width:30px; background-color: #211d65; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar-toggle:hover .icon-bar { background-color: #345878; } .navbar .social-list { float: right; margin-right: 10%; } .social-list { overflow:hidden; } .social-list a { float: left; font-size: 1.428rem; line-height: 1; color:#000; margin-left: 2rem; } .social-list a:first-child { margin-left: 0; } .social-list a:hover { color:#345878; text-decoration: none; } .navbar-spacer { float: right; margin:-1rem 4.5rem 0; width: 1px; height: 3.3rem; background-color: #e0e0e0; display:none;} .navbar-address { float: right; font-weight: 400; text-transform: uppercase; } /* 2.2 Navbar affix */ .navbar.affix { position: fixed; position:relative; box-shadow: 0 0 65px rgba(0,0,0,0.07); } /* 2.3 Sidebar menu */ .click-capture { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 99; } .menu { position: fixed; top:0; bottom:0; right: 0; width: 100%; z-index: 100; background-color: #fff; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .close-menu { position: absolute; z-index: 2; top: 2.3rem; top:2rem; right:2rem !important; font-size: 1.6rem; line-height: 1; color: #274f73; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .close-menu:hover { color: #345878; } .menu .menu-lang { opacity: 0; position: absolute; opacity: 0; left: 15%; top:3rem; text-transform: uppercase; -webkit-transform: translateY(3rem); -ms-transform: translateY(3rem); -o-transform: translateY(3rem); transform: translateY(3rem); -webkit-transition: transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease; -o-transition: transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease; transition: transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease; } .menu-lang a { display: inline-block; margin-left: 1.5rem; color: #999999; } .menu-lang a:first-child { margin-left: 0; } .menu-lang .active, .menu-lang a:hover { color: #345878; text-decoration: none; } .menu .menu-list { height: 100%; opacity: 0; position: absolute; left: 0; top:7rem; bottom:10.5rem; padding-left: 15%; overflow-x:hidden; overflow-y:hidden; -webkit-overflow-scrolling:touch; overflow-scrolling:touch; font-weight: 600; letter-spacing: -0.025rem; list-style: none; margin:0; -webkit-transform: translateY(3rem); -ms-transform: translateY(3rem); -o-transform: translateY(3rem); transform: translateY(3rem); -webkit-transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease; -o-transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease; transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease; } .menu .menu-list li a { color: #999999; } .menu .menu-list .active > a, .menu .menu-list li a:hover { text-decoration: none; color: #000; } .menu .menu-list > li { font-size: 1.5rem; line-height: 1; } .menu .menu-list > li { margin-top: 2rem; } .menu .menu-list > li:first-child { margin-top: 0; } .menu .menu-list ul { display: none; list-style: none; padding:0; margin: 0; } .menu .menu-list ul li { font-size: 1.142rem; margin-top: 1.142rem; } .menu .menu-list ul li:first-child { margin-top:2.4rem; } .menu-footer { position: absolute; left: 15%; bottom: 4rem; } .menu-footer { position: relative; left: auto !important; bottom: auto !important; text-align: center; right: auto !important; align-items: center; display: block; padding: 2rem 0; } .menu-footer .social-list { opacity: 0; -webkit-transform: translateY(3rem); -ms-transform: translateY(3rem); -o-transform: translateY(3rem); transform: translateY(3rem); -webkit-transition: all 0.5s 0.7s ease; -o-transition: all 0.5s 0.7s ease; transition: all 0.5s 0.7s ease; } .menu-footer .social-list a { color: #ccc; margin:0; margin-right:2.7rem; } .menu-footer .social-list a:last-child { margin-right: 0; } .menu-footer .social-list a:hover { color:#345878; } .menu-footer .copy { opacity: 1; display: none; margin-top: 0; color: #fff; line-height: 1.71rem; -webkit-transform: translateY(2rem); -ms-transform: translateY(2rem); -o-transform: translateY(2rem); transform: translateY(2rem); -webkit-transition: all 0.5s 0.9s ease; -o-transition: all 0.5s 0.9s ease; transition: all 0.5s 0.9s ease; } .menu-is-opened .click-capture { visibility: visible; } .menu-is-opened .menu { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); box-shadow: 0 0 65px rgba(0,0,0,0.07); } .menu-is-opened .menu .menu-lang, .menu-is-opened .menu .menu-list, .menu-is-opened .menu .menu-footer .social-list, .menu-is-opened .menu .menu-footer .copy { -webkit-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); opacity: 1; } .menu-is-closed .menu .menu-lang, .menu-is-closed .menu .menu .menu-list, .menu-is-closed .menu .menu-footer .social-list, .menu-is-closed .menu .menu-footer .copy { opacity: 0; -webkit-transition-delay: 0s; -o-transition-delay:0s; transition-delay: 0s; } /* ------------------------------------------------------------------------------- 3. Homepage ------------------------------------------------------------------------------- */ .wrapper { /* padding-top:7rem; */ float: none; clear: both; overflow-x:hidden; overflow: hidden; min-height: 600px; padding-bottom: 5rem; } .boxed { padding-left: 1.7rem; padding-right: 1.7rem; } .boxed .container, .boxed .container-fluid { padding: 0; max-width: 100%; } .left-boxed { left: 1.7rem; } .right-boxed { right:1.7rem; } .section { padding:0rem 0; } .section-title { margin:0; } .section-title .link-arrow-2 { margin-top:1.05rem; } .section-subtitle { display: inline-block; font-weight: 500; font-size: 1.142rem; letter-spacing: 0.1em; text-transform: uppercase; color: #345878; margin-bottom: 0rem; } /* 3.1 Jumbotron */ .jumbotron { position: relative; overflow: hidden; padding:0; margin:0; color: #fff; background-color: #fff; } /* 3.2 Slider */ .rev_slider .link-arrow { color: #fff; } .rev_slider .link-arrow:hover { color:#345878; } .rev_slider .link-arrow:hover .icon { -webkit-transform: none; -o-transform: none; transform: none; } .slider-prev, .slider-next { position: absolute; top:50%; z-index: 1; font-size:4rem; color: #fff; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .slider-prev { left: 2.2rem; } .slider-next { right:2.2rem; } .slider-prev:hover, .slider-next:hover { color:#345878; } /* 3.3 Section About */ .section-about { padding-top: 3rem !important; padding-bottom:1rem !important; } .section-about-title { margin-bottom: 1.5rem !important; } .dots-image { display: inline-block; position: relative; } .dots-image img { display: block; position: relative; z-index: 1; } .dots-image .dots { position: absolute; left:-20%; bottom: -15%; width: 101%; height: 57.2%; background:url(../images/dots.png) 0 0 repeat; } .experience-box { position: relative; white-space:nowrap; margin:10rem 0; } .section-about .intro { display: flex; gap: 2rem; align-items: center;} .section-about .intro > div {padding: 0;} .section-about .intro > div p {max-width: 60ch;} @media (min-width: 992px) { .experience-box { margin-top: 6rem; } } @media (min-width: 1200px) { .experience-box { margin-top: 8rem; } } .experience-border { display: inline-block; vertical-align: middle; width: 12.15rem; height: 12.15rem; border:0.357rem solid #345878; } .experience-content { display: inline-block; vertical-align: middle; position: relative; left: -8rem; top:0.2rem; } .experience-number { display: inline-block; vertical-align: middle; font-size: 7.142rem; line-height: 1; font-weight: 600; color: #000; } .experience-info { display: inline-block; vertical-align: middle; margin:-1rem 0 0 0.8rem; font-size: 1.57rem; line-height: 1.181; color: #000; } /* 3.4 Section Projects */ .section-projects { padding-bottom: 8rem; } .filter-content { position: relative; overflow: hidden; } .filter { list-style: none; font-size: 1.142rem; font-weight: 600; color: #000; padding-left: 0; margin:0; } .filter li { margin:0.6rem 2.6rem 0 0 ; display: inline-block; } .filter li:last-child { margin-right: 0; } .filter li a { color: inherit; } .filter li a:hover, .filter .active a { color: #345878; text-decoration: none; } .section-projects .filter-content { margin:2rem 0 0 0; } .section-projects .filter { margin: 0; } .section-projects .view-projects { margin:0.85rem 0 0 0; } .view-projects { display: inline-block; color: #999999; } .view-projects:hover { text-decoration: none; color: #345878; } /* 3.4.1 Projects Carousel */ .project-carousel { margin-top: 3rem; } .owl-nav { position: relative; position: absolute; bottom:0; right: 0; display: flex; justify-content: center; gap: 5px; margin-bottom: 2rem;} .owl-nav .disabled { color: #bcbcbc; } .owl-prev, .owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { display: inline-block; font-size: 2.8rem; line-height: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #5690c3 !important; color: #fff; border: none !important; padding: 1rem !important; font: inherit !important; border-radius: 3px; margin: 0;} .owl-prev span, .owl-next span { display: none; } .owl-prev:before { content: "<"; } .owl-next:before { content: ">"; } .owl-prev:hover, .owl-next:hover { color: #345878; } .owl-dots { text-align: center; margin-top: -3rem; z-index: 9999999; position: relative; } .owl-dot { display: inline-block; vertical-align: top; margin:0 0.6rem; } .owl-dot span { display: block; width: 1rem; height: 1rem; background-color: #ddd; border-radius: 50%;} .owl-dot.active span, .recom .owl-dot.active span { background-color: #345878; } .project-item { position: relative; overflow: hidden; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .project-item img { width:100%; } .item-shadow { position: relative; } .item-shadow:before { content:''; position: absolute; z-index: 1; left: 0; top:0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 46%,rgba(0,0,0,0.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 46%,rgba(0,0,0,0.6) 100%); } .project-item .link-arrow { position: absolute; z-index: 2; color: #fff; left: 3rem; bottom: 2.3rem; -webkit-transition: none; -o-transition: none; transition: none; } .project-hover { position: absolute; z-index: 2; left: 0; top:0; width: 100.1%; height: 100%; padding:4.85rem 3rem; -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } .project-title { color: #fff; margin:0; } .project-hover .project-title { position: absolute; bottom: 5.5rem; } .project-description { opacity: 0; margin-top:12%; line-height: 1.71; color:#333333; -webkit-transform: translateX(-1rem); -ms-transform: translateX(-1rem); -o-transform: translateX(-1rem); transform: translateY(-1rem); } .project-item:hover .project-hover { background-color: rgba(183,190,208,0.85); } .project-item:hover .project-hover .project-title { position: relative; color: #000; bottom:2rem; -webkit-transform: translateY(2rem); -ms-transform: translateY(2rem); -o-transform: translateY(2rem); transform: translateY(2rem); -webkit-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; } .project-item:hover .project-hover .project-description { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateY(0); -webkit-transition: all 0.4s 0.2s ease; -o-transition: all 0.4s 0.2s ease; transition: all 0.4s 0.2s ease; } .project-item:hover .link-arrow { color: #000; } .section-projects { } .section-projects .container { width:100%; } .section-projects .item, .projects-item { position: relative; width: 100%; } .section-projects .item img { width: 100%; } .section-projects .item .proj_n1 { background:url(../images/projects/1-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n2 { background:url(../images/projects/2-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n3 { background:url(../images/projects/3-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n4 { background:url(../images/projects/4-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n5 { background:url(../images/projects/1-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n6 { background:url(../images/projects/2-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n7 { background:url(../images/projects/3-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .proj_n8 { background:url(../images/projects/4-426x574.jpg) no-repeat center center #ccc; background-size: cover; height: 550px;} .section-projects .item .base-component-children {position: absolute; top: 0; left: 0; padding: 10%; width: 100%; height: 100%; display: block;} .section-projects .item .title {font-weight: 600; font-size: 2.142rem; font-size: 3rem; line-height: 1.2; letter-spacing: -0.05em; color: #000; margin: 1rem 0; } .section-projects .item .description {max-width: 40%;} .section-projects .item a, .section-news .item .more { color: #444; font-weight: 600; } /* 3.5 Section Clients */ .section-clients .section-title { margin-right: 7rem; } .client-carousel { margin-top: 3rem; } .client-carousel .client-carousel-item img { display: inline-block; width: auto; } .client-box { position: relative; color: #999; background-color: #fff; padding:6rem 3.28rem 3.28rem; } .image-quote { position: absolute; top:3.28rem; right: 3.28rem; } .client-img { position: relative; z-index: 1; width: 100px; height: 100px; margin: 0; padding: 0; border-radius: 50%; } .client-img.n1, .section-clients .item .n1 { background:url(../images/clients/1-92x92.jpg) no-repeat center center #ccc; background-size: cover; } .client-img.n2, .section-clients .item .n2 { background:url(../images/clients/2-92x92.jpg) no-repeat center center #ccc; background-size: cover; } .client-title { letter-spacing: 0; } .client-name { font-size: 1.28rem; line-height: 1; color: #000; } .client-description { margin:1.5rem 0 0; line-height: 1.71em; } .client-carousel .owl-nav { right: 0; top: -7.8rem; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .client-carousel .owl-prev { margin-right: 2rem; } /* 3.6 Section Partners */ .partner-carousel { margin-top: 10.28rem; } .partner-carousel .partner-carousel-item img { width: auto; margin:0 auto; opacity: 0.6; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .partner-carousel .partner-carousel-item:hover img { opacity: 1; } /* 3.7 Section News */ /* 3.7 Section News */ .section-news { margin: 0 2rem; } .news-carousel { height: 65vh; max-height: 800px; min-height: 430px; background: #d9e5f0; border-radius: 2rem;} .news-carousel .item aside > .components-list-item { flex-grow: 0; } .news-item { position: relative; width: 100%; height: 65vh; max-height: 800px; min-height: 430px; overflow: hidden; padding: 0rem; display: flex; flex-direction: column; justify-content: center; gap: 2rem; } .news-item img { width: 100%; } .news-item.news1 { background-image: linear-gradient(-15deg, rgba(249, 249, 249, 0.35) 10%, rgb(58, 81, 100) 99%), url(../images/slider/slide_1a.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news2, .news-item.n2 { background-image: linear-gradient(-15deg, rgba(249, 249, 249, 0.35) 10%, rgb(58, 81, 100) 99%), url(../images/slider/slide_7.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news3 { background-image: linear-gradient(-15deg, rgba(249, 249, 249, 0.35) 10%, rgb(58, 81, 100) 99%), url(../images/slider/slide_12.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news4 { background-image: linear-gradient(-15deg, rgba(249, 249, 249, 0.35) 10%, rgb(58, 81, 100) 99%), url(../images/slider/slide_10.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news5 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_2.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news6 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_8.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news7 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_9.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.news8 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_10.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.services1 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_4.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.about1 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_8.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.careers1 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_10.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.location1 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_1.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item.contact1 { background-image: linear-gradient(-55deg, rgba(249, 249, 249, 0.35) 30%, rgb(58, 81, 100) 98%), url(../images/slider/slide_11.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover;} .news-item .news_desc { max-width: 38%; max-width: 55ch; color: #fff;} .news-item h3, .news_title { text-transform:uppercase; color: #fff; font-weight:bold; font-weight: 800;} .news-item h3 span, .news_title span { } .news-hover { position: absolute; left: 0; top:0; width: 100%; height: 100%; padding:2.7rem; color: #999; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .news_content { position: absolute; top: 0; left: 0; padding: 3% 10% 0; width: 100%; height: 100%; display: block;} .news_content a { color: #fff; background: #5690c3; padding: 0.5rem 1rem; margin: 1.5rem 0 0; display: inline-block; border-radius: 4px; text-transform: uppercase; font-size: 1rem;} .hover-border { position: absolute; left:0; top:0; width: 100%; height: 100%; overflow: hidden; } .hover-border div { position: absolute; left: 0; top:0; width: 100%; height: 100%; } .hover-border div::before { position: absolute; content: ""; background:#345878; height: 2px; width: 100%; left: 0; top: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .hover-border::after { position: absolute; content: ""; background:#345878; width: 2px; height: 100%; right: 0; bottom: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: 0.2s 0.2s; -o-transition: 0.2s 0.2s; transition: 0.2s 0.2s; } .hover-border div::after { position: absolute; content: ""; background:#345878; width: 100%; height: 2px; right: 0; bottom: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.2s 0.4s; -o-transition: 0.2s 0.4s; transition: 0.2s 0.4s; } .hover-border::before { position: absolute; content: ""; background:#345878; width: 2px; height: 100%; left: 0; top: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 0.2s 0.8s; -o-transition: 0.2s 0.8s; transition: 0.2s 0.8s; } .news-hover .content { opacity: 0; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .news-hover .time { margin-bottom: 0.6rem; } .news-title { font-size: 1.95rem; line-height: 1.25; letter-spacing: 0; margin:0; -webkit-transform: translateX(-2rem); -ms-transform: translateX(-2rem); -o-transform: translateX(-2rem); transform: translateX(-2rem); -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } .news-description { opacity: 0; margin-bottom: 0; line-height: 1.71; margin-top: 10%; -webkit-transform: translateY(-2rem); -ms-transform: translateY(-2rem); -o-transform: translateY(-2rem); transform: translateY(-2rem); -webkit-transition: 0.5s 0.3s ease; -o-transition: 0.5s 0.3s ease; transition: 0.5s 0.3s ease; } .news-hover .read-more { position: absolute; opacity: 0; bottom: 2.7rem; } .read-more { font-weight: 600; } /* ------------------------------------------------------------------------------- 4. Homepage v2 ------------------------------------------------------------------------------- */ /* 4.1 Navbar */ .navbar-2 { background: transparent; padding-top: 3rem; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar-2 .navbar-bg { content:''; position: absolute; left: 0; right:0; top:-1px; width: 100%; height: 100%; background: #fff; z-index: -1; -webkit-transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85); -o-transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85); transition: all 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85); } .navbar-2 .brand { width: 18rem; } .navbar-2 .navbar-address { float: left; margin-left: 5rem; } .navbar-2 .social-list { float: left; margin-left: 7.5rem; } .navbar-white { background: transparent; } .navbar-white .navbar-bg { height: 0; } .navbar-white .brand, .navbar-white .brand:hover, .navbar-white .brand:focus, .navbar-white .brand-text, .navbar-white .navbar-address, .navbar-white .navbar-address .text-dark, .navbar-white .social-list a { color: #fff; } .navbar .brand-img-white { display: none; } .navbar-white .brand-img { display: none; } .navbar-white .brand-img-white { display: inline-block; } .navbar-white .navbar-toggle .icon-bar { background: #fff; } .navbar-white .social-list a:hover { color: #345878; } .copy-bottom { display: none; position: absolute; z-index: 10; left:0; bottom:2.4rem; color: #000; } .lang-bottom { display: none; position: absolute; z-index: 10; right:0; bottom:2.4rem; color: #000; } .copy-bottom.white { color: #fff; } .lang-bottom .menu-lang { font-weight: 600; color: #000; text-transform: uppercase; } .lang-bottom .menu-lang a:not(.active) { color: #000; } .lang-bottom.white, .lang-bottom.white .menu-lang a:not(.active) { color: #fff; } .lang-bottom .menu-lang a:hover, .lang-bottom.white .menu-lang a:hover { color: #345878; } #pp-nav { z-index: 99; width: 2.1428rem; margin-top:0!important; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #pp-nav .pp-nav-up, #pp-nav .pp-nav-down { display: none; font-size: 2.1428rem; cursor: pointer; color: #000; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #pp-nav .pp-nav-up { margin-bottom: 3.5rem; } #pp-nav .pp-nav-down { margin-top: 3.5rem; } #pp-nav li, .pp-slidesNav li { margin:1.928rem auto; width: 10px; height: 10px; } #pp-nav span, .pp-slidesNav span { left: 0; top:0; cursor: pointer; width: 10px; height: 10px; background: #000; border:0; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #pp-nav .pp-nav-up:hover, #pp-nav .pp-nav-down:hover, #pp-nav.white .pp-nav-up:hover, #pp-nav.white .pp-nav-down:hover { color: #345878; } #pp-nav.white .pp-nav-up, #pp-nav.white .pp-nav-down { color: #fff; } #pp-nav.white span, .pp-slidesNav span { background: #fff; } #pp-nav li .active span, .pp-slidesNav .active span, #pp-nav span:hover, .pp-slidesNav span:hover { background: #345878; } /* 4.2 Sections */ .pagepiling .section { background: #fff; padding-top: 11.3rem; padding-bottom: 7rem; } .pagepiling .section-1.pp-scrollable .vertical-centred { padding-top: 10rem; padding-bottom: 11rem; } .pagepiling .pp-scrollable { padding: 0; } .pp-scrollable .vertical-centred { padding-top: 11.3rem; padding-bottom: 7rem; } .scroll-wrap { position: relative; min-height: 100%; } .scrollable-content { white-space: nowrap; width: 100%; font-size: 0; } .scrollable-content:before { content: ''; display: inline-block; height: 100vh; vertical-align: middle; } .vertical-centred { width: 100%; height: 100%; display: inline-block; vertical-align: middle; white-space: normal; font-size: 1rem; } .boxed-inner { position: relative; padding:0; } .section-bg { position: absolute; left: 0; top:0; width: 100%; height: 100%; background-size: cover; background-position: center; } .vertical-title { position: absolute; white-space: nowrap; width: 0; top:-0.55rem; left: 4.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .vertical-title span { display: block; float: right; } .section .intro { opacity: 0; -webkit-transition: opacity 1s 0.3s ease; -o-transition:opacity 1s 0.3s ease; transition: opacity 1s 0.3s ease; } .section:not(.section-1) .intro { -webkit-transform: translateY(7rem); -ms-transform: translateY(7rem); -o-transform: translateY(7rem); transform: translateY(7rem); -webkit-transition: all 0.35s 0.6s ease; -o-transition:all 0.35s 0.6s ease; transition: all 0.35s 0.6s ease; } .section.active .intro { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .subtitle-top {line-height: 1.2; margin-bottom: 0.25rem; letter-spacing: 1px; } /* 4.3 Section About */ .hr-bottom { position: absolute; margin-top: 13vh; margin-bottom: 0; height: 0.2858rem; width: 7.142rem; background: #345878; } .title-uppercase {text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 2rem; font-weight: 800;} .service-list { margin-bottom: 5rem; font-size: 1.2857rem; padding-left: 0; list-style: none; text-transform: uppercase; letter-spacing: -0.025rem; font-weight: 300; } .service-list li { margin-bottom: 0.7rem; } .service-list li a { color: inherit; } .service-list li a:hover { color: #000; text-decoration: none; } .dots-image-2 { display: block; position: relative; } .dots-image-2 img { width: 100%; height: 400px; object-fit: cover; border-radius: 2rem;} .dots-image-2 .dots { position: absolute; z-index: -1; left: -25%; bottom: -19%; width: 101%; top:50%; opacity: 0.8; background: url(../images/dots.png) 0 0 repeat; } .dots-image-2 .experience-info { position: absolute; left: 12%; margin-top:-4.4rem; top:100%; } .experience-info .number { display: inline-block; font-weight: 600; line-height: 1; font-size: 10.71rem; margin-right: 1.7rem; } .experience-info .text { display: inline-block; font-size: 1.571rem; font-weight: 600; line-height: 1.181; text-transform: uppercase; } /* 4.4 Section Projects */ .bg-changer { position: absolute; left: 0; width: 100%; height: 100%; overflow:hidden; } .bg-changer .section-bg { opacity: 0; will-change: opacity, transform; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; -o-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; } .bg-changer .active { opacity: 1; -webkit-transform: scale(1.05); -ms-transform:scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .bg-changer .section-bg:first-child { opacity: 1; } .section-3 .vertical-title { top:7.4rem; } .row-project-box { margin-top: -30px; } .col-project-box { margin-top: 30px; } .project-box { display: block; padding-bottom: 30%; position: relative; border:1px solid #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .project-box-inner { position: absolute; left: 0; top:0; width: 100%; height: 100%; padding:2.14rem 1.928rem; } .project-box h5 { margin:0; color: #fff; } .project-category { color: #ccc; margin-top: 0.5rem; } .project-box:hover { background: #345878; text-decoration: none; border-color: transparent; } .project-box:hover h5 { color: #000; } .project-box:hover .project-category { color:#666; } .link-arrow.h5 { text-transform: uppercase; letter-spacing: -0.025rem; margin-bottom: 0; } .link-arrow.h5 .icon-chevron-right { font-size: 1.8rem; margin-top: -0.45rem; } .section-3 .link-arrow.h5 { margin-top: 4rem; } .section-4 h2 { margin-bottom: 7rem; } /* 4.5 Section Reviews */ .icon-quote { display: inline-block; margin-top: -0.6rem; color:#345878; font-size: 5.14rem; } .section-5 .title-uppercase { margin-top: 7vh; margin-bottom: 3rem; } .review-carousel .text { font-family: 'Libre Baskerville', serif; font-size: 1.142rem; line-height: 1.875; } .review-author { margin-top: 5.7rem; } .author-name { font-size: 1.2857rem; line-height: 1.333; font-weight: 600; } .review-carousel .owl-nav { position: relative; top:0; margin-top:7.7vh; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .review-carousel .owl-prev, .review-carousel .owl-next { font-size: 1.2857rem; width: 3.57rem; height: 3.57rem; line-height: 3.57rem; border:1px solid #fff; color: #fff; text-align: center; margin-right: 0.857rem; } .review-carousel .owl-prev:before { font-family: 'Linearicons'; content: "\e93b"; } .review-carousel .owl-next:before { font-family: 'Linearicons'; content: "\e93c"; } .review-carousel .owl-prev:hover, .review-carousel .owl-next:hover { background: #fff; color: #000; } .review-carousel .owl-prev.disabled, .review-carousel .owl-next.disabled { cursor: default; } .review-carousel .owl-prev.disabled:hover, .review-carousel .owl-next.disabled:hover { background: none; color: #fff; } /* 4.6 Section Contacts */ .map-2 { width: 100%; height: 18rem; border: 0; text-align: center; } .contact-info { overflow:hidden; margin-top: 5.5rem; } .row-contact-info { margin:-5rem -4% 0; } .success-message, .error-message { display: none; margin-top: 2rem; } .col-contact-info { padding:0 4%; margin-top: 5rem; padding-top: 5rem; border-top:1px solid #cacaca; } .col-contact-info:first-child { border-top:0; padding-top: 0; } .contact-info h3 { font-size: 1.92rem; line-height: 1.06; letter-spacing: -0.025em; text-transform: uppercase; margin:0 0 2rem 0; } .contact-info .col-right { word-wrap: break-word; padding-left: 0; padding-right: 0; } .contact-info-row { line-height: 1.5; margin-bottom: 2.14rem; } .contact-info-row:last-child { margin-bottom: 0; } .contact-info-row strong { font-size: 1.1428rem; text-transform: uppercase; color: #000; } /* ------------------------------------------------------------------------------- 5. Homepage v3 ------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------- 6. Pages ------------------------------------------------------------------------------- */ .display-1 { font-size: 4.28rem; line-height: 1; letter-spacing: -0.05em; margin:0; } .display-2 { font-size: 5.14rem; line-height: 1; letter-spacing: -0.05em; margin: 0; text-transform: uppercase; } .text-display-1 { font-size: 1.714rem; line-height: 2; letter-spacing: 0; } .text-display-1 p { margin-bottom: 3.5rem; } .text-display-1 p:last-child { margin-bottom: 0; } .title-hr { width: 100%; max-width: 100%; height: auto; background: none; border-top: 1px dashed #ccc; margin-bottom: 2rem !important; } .title-info { font-size: 1.28rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: #999999; margin-bottom: 1.4rem; } .page-header, .page-header-2, .page-header-3 { border-bottom: 0; margin:8rem 0 7rem; padding: 0; } .page-header h1, .page-header-2 h1, .page-header-3 h1 { margin:0; } .page-header-3 .title-hr { margin-bottom:2.7rem; } .page-inner { margin-top: 10.28rem; } .section-info { color: #999999; line-height: 1.111; font-size: 1.28rem; text-transform: uppercase; font-weight: 600; } .section-info { margin-bottom: 4rem; } .section-info .title-hr { margin:0 0 2rem; } .info-title { /* width: 1px; */} .bg-dots { background:url(../images/bg/dots2.png) 0 0 repeat; } /* 6.1 Works Grid */ .js-isotope { overflow:hidden; } .filter-content-2 { margin-bottom: 5.9rem; } .filter-content-2 .filter li, .filter-content-3 .filter li, .filter-content-4 .filter li { margin-right: 4rem; } .filter-content-3 { margin-bottom: 4.6rem; } .filter-content-4 { margin:6rem 0 9rem; } .grid-items { margin:-30px -15px 0 -15px; } .grid-items:after { content:''; clear: both; display:block; } .grid-item { float: left; padding:30px 15px 0 15px; } .project-hover-2 { position: absolute; z-index: 2; left: 0; top:0; width: 100.1%; height: 100%; padding:2.71rem; -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } .project-hover-2 .icon-plus { opacity: 0; position: absolute; color: #000; right: 2.71rem; font-size: 3rem; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .project-hover-2 .project-title { opacity: 0; position: absolute; bottom: 2.71rem; color: #000; -webkit-transform: translateX(-2rem); -ms-transform: translateX(-2rem); -o-transform: translateX(-2rem); transform: translateX(-2rem); -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .project-item:hover .project-hover-2 { background-color: rgba(183,190,208,0.85); } .project-item:hover .project-hover-2 .project-title, .project-item:hover .project-hover-2 .icon-plus { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /* 6.2 Works Carousel */ .sly { position: relative; overflow: hidden; } .slidee { list-style: none; padding-left: 0; } .sly ul { list-style: none; margin: 0; padding: 0; height: 100%; overflow: hidden; } .sly ul li { float: left; width: 400px; height: 100%; margin: 0 30px 0 0; padding: 0; } .prev, .next { position: absolute; top:50%; color: #fff; font-size: 4rem; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .prev.disabled, .next.disabled { opacity: 0.5; } .prev:hover, .next:hover { color: #345878; } .prev { left: 2.5rem; } .next { right:2.5rem; } /* Scrollbar */ .scrollbar { margin: 6.8rem 0 0; height: 1px; background: #dae5e6; line-height: 0; } .scrollbar .handle { position: relative; top:-2px; width: 100px; height: 3px; background: #999999; cursor: pointer; } .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } /* 6.3 Project Detail */ .project-detail { position: relative; overflow:hidden; } .project-detail-item { min-height: 420px; background-size:cover; background-position: 50% 50%; padding: 6.78rem 11.2rem; } .project-detail-info { background-color: #fff; padding: 3.3rem; } .project-detail-control { display: inline-block; color: #000; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .project-detail-control:hover { color:#345878; } .project-detail-control .show-info { display: none; } .project-detail-control.active .show-info { display: block; } .project-detail-control.active .hide-info { display:none; } .project-detail-title { font-size: 2.57rem; letter-spacing: -0.025em; line-height: 1.16666; margin:3rem 0 2.4rem 0; } .project-detail-list { list-style: none; padding-left: 0; margin-top:3.6rem; } .project-detail-list li { border-bottom: 1px solid #e1e1e1; padding-bottom: 0.6rem; margin-top:0.65rem; overflow:hidden; } .project-detail-list li:last-child { padding-bottom: 0; border-bottom: 0; } .project-detail-list li .left { float: left; font-weight: 600; } .project-detail-list li .right { float: right; } .project-detail-meta { margin-top: 4.5rem; overflow:hidden; } .project-detail-meta .left { font-weight: 600; } /* 6.4 News Masonry */ .card img { display: block; width: 100%; } .card-block { background: #f2f2f2; padding:2.5rem; line-height: 1.714; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; } .card-posted { margin-bottom: 0.8rem; } .card-posted a { color: #000; } .card-posted a:hover { color: #000; } .card-title { letter-spacing: 0; margin:0; } .card-text { margin-top: 2rem; } .card-read-more { display: inline-block; margin-top: 2rem; font-weight: 600; color: #000; } .card-read-more:hover { color: #000; } .card:hover .card-block { background: #345878; } /* 6.5 News Listing */ .card-row { position: relative; background: #f2f2f2; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; margin-bottom: 5rem; } .card-row:last-child { margin-bottom: 0; } .card-row-img { position: absolute; left: 0; top:0; padding:0; height: 100%; background-size:cover; background-position: center 0; } .card-row-img img { width: 100%; } .card-row:hover { background: #345878; } .card-row .card-block { padding:3.6rem; background: transparent; } .card-row .card-read-more { margin-top: 7vw; } /* 6.6 Post Detail */ .secondary { margin-top: 6rem; } .post-gallery { position: relative; overflow-y: hidden; } .header-space { margin-top: 7rem; } .post-thumbnail { background: url(../images/news/1-1920x1080.jpg) 50% no-repeat; background-size:cover; padding: 16.4rem 15px 19rem; } .post-thumbnail h1, .post-thumbnail .title-info { color: #fff; } .page-content { margin-top: 8.2rem; } .page-content-2 { margin-top: 6.6rem; } .posted-on { font-size: 1.142rem; margin-bottom: 7rem; } .posted-on a { color: #000; } .posted-on a:hover { color:#345878; text-decoration: none; } .entry-title { margin:0 0 2.5rem; letter-spacing: -0.05em; line-height: 1.125; } .entry-description { letter-spacing: 0; font-weight: 400; line-height: 1.6; margin-bottom: 4.8rem; margin-top: 0; } .entry-content { font-size: 1.2857rem; line-height: 1.666; font-weight: 300; letter-spacing: 0; } .row-images {padding: 2rem 0 0rem; display: flex; flex-wrap: wrap; gap: 2rem;} .row-images .col-image:first-child { flex-basis: 100%;} .row-images .col-image { max-height: 400px; align-items: center; overflow: hidden; display: flex; flex-grow: 1; flex-basis: 33%;} .row-images .col-image img { width: 100%; height: auto;} .entry-footer { padding-top: 4rem; } .tags-links span { color: #000; } .tags-links, .tags-links a { color:#999999; } .tags-links a:hover { color: #cc0000; text-decoration: none; } .post-share { margin-top: 1rem; } .post-share span { color: #000; } .post-share a { color: #ccc; font-size: 1.4rem; vertical-align: middle; margin-left: 0.8rem; } .post-share a:hover { color:#345878; } /* 6.6.1 Related Posts */ .related-posts { margin-top: 6rem; padding-top:6rem; border-top:1px solid #e1e1e1; } .related-post-title { margin:0; } /* 6.6.2 Comments */ .section-comments { margin-top: 6.8rem; padding: 7.3rem 15px; background-color: #f5f5f5; } .comments-title { margin:0; margin-bottom: 2.85rem; } .comment-list { padding-left: 0; list-style: none; } .comment .avatar { float: left; margin-right: 2.14rem; } .comment-content { overflow: hidden; padding:1.2rem 0 3rem 1.5rem; border-top:1px solid #d8d8d8; } .comment-content p { margin-bottom: 0; } .comment-metadata { margin-bottom: 0.6rem; } .comment-metadata .fn a { color: #333333; } .comment-metadata .fn a:hover { color: #345878; text-decoration: none; } .comment-time { color: #999999; font-size: 11px; text-transform: uppercase; } .comment-time:hover { color: #000; text-decoration: none; } .reply { margin-top: 0.7rem; } .reply a { color: #999999; font-style: italic; } .reply a:hover { color: #0099cc; text-decoration: none; } .comment-reply-title small { float: right; margin-top: 0.5rem; } /* 6.7 Widgets */ .widget { margin-bottom: 4.5rem; padding-bottom: 5rem; border-bottom: 1px solid #e1e1e1; } .widget:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .widget-title { font-size: 1.2758rem; letter-spacing: 0; margin:0 0 3rem; } .widget_archive li, .widget_categories li, .widget_pages li, .widget_meta li, .widget_recent_entries li, .widget_nav_menu li { margin-top:0.5em; } .widget_archive li a, .widget_categories li a, .widget_pages li a, .widget_meta li a, .widget_recent_entries li a, .widget_nav_menu li a { color:#666; } .widget_archive li a:hover, .widget_categories li a:hover, .widget_pages li a:hover, .widget_meta li a:hover, .widget_recent_entries li a:hover, .widget_nav_menu li a:hover { color:#345878; text-decoration:none; } .widget_categories li { text-align: right; } .widget_categories li a { float: left; } /* 6.7.1 Widget Search */ .search-form { position: relative; } .search-form .search-field { background: #f6f6f6; border-color:transparent; } .search-form .search-field:focus { background: none; } .search-submit { position: absolute; background: none; border:0; right: 0.8rem; top:1.1rem; } .search-submit:focus { outline:none; } /* 6.7.2 Widget Twitter */ .widget ul { list-style: none; padding-left: 0; margin:0; } .widget_twitter li { margin-bottom: 2.2rem; } .widget_twitter li:last-child { margin-bottom: 0; } .widget_twitter li a { color: #0099cc; } .tweet-time { display: block; margin-top: 0.4rem; font-size: 0.857rem; display: block; color: #999999; text-transform: uppercase; } .widget-all-items { display: inline-block; margin-top: 1.4rem; color: #999999; font-size: 0.928rem; text-transform: uppercase; font-weight: 600; } .widget-all-items:hover { text-decoration: none; } /* 6.7.3 Widget Recent Posts */ .widget_recent_posts li { overflow: hidden; margin-bottom: 2.214rem; } .widget_recent_posts li:last-child { margin-bottom: 0; } .recent-post-thumbnail { float: left; margin-right: 1.5rem; } .recent-post-content { overflow-y: hidden; line-height: 1.29; } .post-title { display: inline-block; font-weight: 600; letter-spacing: 0; color: #000; } .post-title:hover { color: #345878; text-decoration: none; } .post-time { display: block; margin-top: 0.6rem; font-size: 0.857rem; color: #999999; } /* 6.8 About Us */ .about-info { padding-top: 0; } .content-entry-image { padding-top: 38%; min-height: 28rem; background: url(../images/1-1920x800.jpg) 50%; background-size: cover; } /* 6.8.1 Services */ .row-services { margin:-4rem -2.5rem 0 -2.5rem; } .col-service { color:#333; margin-top: 4rem; padding:0 2.5rem; } .col-service h4 { margin-top: 3.3rem; } .col-service p { margin-bottom: 0; } /* 6.8.2 Partners */ .row-partners { margin:-5rem -1rem 0; } .col-partner { padding:0 1rem; margin-top: 5rem; float: left; } .col-partner img { max-width: 100%; opacity: 0.5; } /* 6.8.3 Team */ .row-team { margin-top: -30px; } .col-team { margin-top: 30px; } .team-profile { position: relative; } .team-profile img { width: 100%; display: block; } .team-hover { opacity: 0; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: rgba(183,190,208,0.85); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .team-content { position: absolute; left: 1.857rem; bottom: 0.8rem; } .team-name { margin-bottom: 0.3rem; } .team-name h6 { margin:0; } .team-social a { float: left; color: #000; font-size: 1.25rem; margin-right: 1.5rem; } .team-social a:hover { color: #fff; text-decoration: none; } .team-profile:hover .team-hover { opacity: 1; } .add-new-team { position: relative; border:1px solid #bfbfbf; padding-top: 100%; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .add-new-text { position: absolute; left: 0; width: 100%; top:50%; text-align: center; font-size: 1.285rem; line-height: 1.1111; color: #000; font-weight: 600; text-transform: uppercase; letter-spacing: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .add-new-text .inner { display: inline-block; text-align: left; } .add-new-team input[type="file"] { position: absolute; cursor: pointer; opacity: 0; left: 0; top:0; width: 100%; height: 100%; } .add-new-team:hover { background: #345878; border-color: transparent; } /* 6.9 Contacts */ .map { width: 100%; height: 26rem; border: 0; text-align: center; } .map-info { color:#000; text-align: left; padding:1rem 0; } .map-address-row { margin-bottom: 1rem; font-size: 1rem; line-height: 1.4; } .map-address-row .fa { margin-right: 0.5rem; } .gmap-open { margin:2rem 0 0; } .row-contact { margin:-6rem -3.5rem 0; } .col-contact { margin-top: 6rem; padding:0 3.5rem; } .contact-title { letter-spacing: 0; margin:0; } .contact-top { margin-bottom: 1.3rem; } .contact-title span { color: #ccc; font-weight: 400; } .contact-address { font-size: 1.142rem; line-height: 1.875; letter-spacing: -0.025rem; margin-bottom: 2rem; } .contact-row { margin-bottom: 0.6rem; } .phone-lg { font-size: 2.142rem; line-height: 1.3; margin-bottom: 3.6rem; } .contact-social { margin-top: 1rem; } .contact-social a { color: #999999; font-size: 1.3rem; } .section-message { padding-top: 8rem; } /* ------------------------------------------------------------------------------- 7. Footer ------------------------------------------------------------------------------- */ .footer { color: #333; padding: 5rem 0%; border-top: 0px solid #e1e1e1; margin: 0rem 0 0; background: #fff; } .footer .brand { display: flex; padding: 1.5rem 0.5rem 0.5rem; } .footer .field-label-title { font-size: 2rem; line-height: 1; } .footer ul { list-style: none; padding:0; margin:5rem 0 0 0; } .footer ul li { display: block; padding: 0.5rem 0rem;} .footer ul li a { color: #333; text-transform: uppercase;} .footer ul li .btn { background: none; padding: inherit; } .footer .field-label-title { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin: 0.25rem 0 1rem 0; padding: 0.25rem 0 1rem 0; max-width: 100px; display: none; } .footer ul .active a, .footer ul li a:hover { color:#ccc; text-decoration: none; } /* .footer-flex { margin-top: -4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column;} .footer-flex .flex-item { margin-top: 4rem; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } */ .footer-flex > * > * { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; flex-direction: row; gap: 5%;} .footer-flex > * > * > * { display: flex; flex-grow:1; flex-shrink:1; flex-basis: 100%; flex-wrap: wrap; } .footer-flex > * > * > * > * { margin: 0 auto; width: 100%;} .footer-flex > aside { display: flex; } .footerColContactInfo { background: url(../images/logo_claim_depot.png) no-repeat 0 10px; padding-top: 7rem; } /* ------------------------------------------------------------------------------- */ /* 8. Responsive styles /* ------------------------------------------------------------------------------- */ /* 8.1 Min width 768px */ @media (min-width: 768px) { html { /* font-size: 13px; */ } .pull-sm-left { float: left; } .pull-sm-right { float: right; } /* Sidebar Menu */ .menu { width: 50%; } /* Homepage */ .boxed { padding-left: 3rem; padding-right: 3rem; } .boxed-inner { padding-left: 0; } .right-boxed { right: 3rem; } .left-boxed { left: 3rem; } /* Section About */ .section-about { padding-top: 12rem; padding-top: 7rem; clear: both; } /* Section Projects */ .section-projects .filter { margin-right: 14rem; } .section-projects .view-projects { position: absolute; top:0; right:0; } /* Works Carousel */ .sly ul li { width: 555px; } /* Homepage v2 */ .project-box { padding-bottom: 75%; } .row-contact-info { margin-top: -2rem; } .col-contact-info { padding-top: 4rem; margin-top: 2rem; } /* Footer */ .footer-flex .flex-item { -webkit-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; } } /* 8.2 Min width 992px */ @media (min-width: 992px) { html { /* font-size: 14px; */} /* Helpers */ .pull-md-right { float: right; } /* Sidebar Menu */ .menu { width: 35%; } /* Homepage */ .boxed { padding-left: 4rem; padding-right: 4rem; padding-left: 0rem; padding-right: 0rem;} .boxed.navbar { padding: 0 0% !important; } .right-boxed { right:4rem; } .left-boxed { left: 4rem; } /* Homepage v2 */ .boxed-inner .boxed { padding-left: 6rem; } .service-list { margin-bottom: 0; } .col-contact-info { border-top: 0; padding-top: 0; } .row-contact-info { margin-top: -5rem; } .col-contact-info { margin-top: 5rem; } /* Pages */ .page-header { margin:12.8rem 0 10.8rem; margin: 5rem 0 2rem; } .page-header-2 { margin: 8.7rem 0 10.5rem; margin: 5rem 0 2rem; } .page-header-3 { margin:9.2rem 0 12.2rem; margin: 0rem 0 2rem; } .page-header-3 .title-hr { margin:0.9rem 0 0; } .about-info .section-info .title-hr { margin-top: 1rem; } /* Post detail */ .secondary { padding:0.5rem 0 0 6rem; margin-top: 0; } .post-thumbnail { padding-left: 0; padding-right: 0; } /* About */ .about-info { padding-top: 1.2rem; } .about-info iframe { padding-bottom: 2rem; } /* Contact */ .map { height: 36rem; } /* Homepage v2 */ .col-contact-info:nth-child(2n) { border-left: 1px solid #cacaca; } } /* 8.3 Min width 1200px */ @media (min-width: 1200px) { /* Helpers */ .pull-lg-right { float: right; } /* Section Projects */ .section-projects .filter-content { margin-top: 0; } /* Homepage v2 */ .section-3 .link-arrow.h5 { float: right; margin-top: -1.3rem; } .section-5 .title-uppercase { margin-top: 22vh; margin-bottom: 0; } /* Works Carousel */ .sly ul li { width: 685px; } /* Homepage v2 */ .section-5 .vertical-centred { padding-top: 17rem; padding-bottom: 8rem; } .col-contact-info { border-left: 1px solid #cacaca; } /* Footer */ .footer-flex .flex-item { -webkit-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; } } /* 8.5 Min Height 500px */ @media (min-height: 500px) { #pp-nav .pp-nav-up, #pp-nav .pp-nav-down { display: block; } } /* 8.6 Min Height 600px */ @media (min-height: 600px) { /* Sidebar Menu */ .menu .menu-lang { top:7rem; } .menu .menu-list { top:7rem; bottom: 20rem; } .menu .menu-list > li { font-size: 2rem; } .menu-footer { bottom: 6rem; } .menu-footer .copy { display: block; } } /* 8.7 Min Height 700px */ @media (min-height: 700px) { /* Homepage v2 */ .copy-bottom { display: block; } .lang-bottom { display: block; } } /* ***************************************************************************** */ .field-label-title { display: block; padding:0; font-weight: 600; font-size: 1.25rem; line-height: 2; color: #231f6a; letter-spacing: 0; } /* .my-sm-1 .field-label-title { display: none; } .contact-form .my-sm-1 .field-label-title { display: block; } */ form .field-label-title, .contact-form .field-label-title, .contact-form-title span { font-weight: 400; font-size: 1.25rem; color: inherit; } .my-sm-1 { /* font-size:2rem; font-weight:600; */ } .container.recom {padding-left: 15px; padding-right: 15px;} .recom .item { background: url(../images/image-icons/icon-quote.png) no-repeat top right; margin-right: 20%;} .recom .h2 { font-size: 1.5rem; color: #333; padding: 1rem 0 0.5rem; } iframe { width:100%; border:0; } .footer-menu-left {} .navbar-brand { float: right; } .hide-hamburger .navbar-spacer, .hide-hamburger .navbar-toggle { display:none;} .menu-top-nav ul.right-boxed { position:relative; float: right; right: auto; } .menu-top-nav ul li { float:left; list-style: none; padding: 0 0 0 2rem;} .news-carousel-about { max-height:250px; overflow:hidden; } .generic-page .news_content { position: relative; top: auto; left: auto; height: auto; padding: 100px 20% 0;} .generic-page .news_title { text-transform: none; font-size: 2rem; } .generic-page .home-page .news_title { text-transform: uppercase; font-size: inherit; } .generic-page .news_title span { font-weight: 200; } .generic-page .home-page .news_title span { font-weight: 700; } .recom .owl-dot span { background-color: #ddd;} /* claimdepot */ .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after { content:none; } .logo_div_container { width: 143px; height: 60px; background: url(../images/logo_claim_depot.png) no-repeat center; margin: 15px 0 0 0px; } .menu-children ul { float: right;} .menu-children ul li { float: left;} .hero-container { width:100%; height: 52px; /* */ margin-bottom: 3rem; background:#ccc; color:#fff; text-align:center; } .hero-container.claims { background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(159, 128, 94, 0.5) 100%), url(../images/hero_claim_list3.jpg) no-repeat center; background-size:cover; } .hero-container.claim-opened { background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(159, 128, 94, 0.5) 100%), url(../images/hero_claim_opened.jpg) no-repeat center; background-size:cover; } .hero-container.create-case { background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(159, 128, 94, 0.5) 100%), url(../images/hero_claim_create2.jpg) no-repeat center; background-size:cover; } .hero-container.claim-opened > * { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;} .hero-container.claim-opened > * > * { flex-basis:50%; text-align: left; font-size: 1.25rem; } .hero-container.claim-opened * .hero-title { justify-content: right;} .claim-number {font-weight: bold;} .hero-container .hero-title { color:#fff; font-size:1.25rem; display: flex; justify-content: center; align-items: center; height: 52px; } .step-title {} section.cta {padding: 7rem 0; color: #fff; border-radius: 2rem; margin: 0 2rem; background: url(../images/cta3b.jpg) no-repeat center; /* background-image: linear-gradient(180deg, rgba(0,0, 0, 0.35) 0%,rgba(0,0, 0, 0.5) 50%, rgba(0,0, 0, 0.6) 50%, rgba(58, 81, 100,0) 99%), url(../images/cta2.jpg); background-image: linear-gradient(-15deg, rgba(7, 43, 151, 0.35) 10%, rgb(0, 0, 0) 99%), url(../images/cta3.jpg); */ background-size: auto; background-size: cover; text-align: center;} .home-page .row3 { clear: both; float: none;} .home-page .row3 h2 { color:#fff; font-weight: 800; text-transform: uppercase;} .home-page .row3 p { max-width: 65ch; margin: 0 auto 2rem;} .home-page .owl-carousel a { color: #333; margin: 1rem 0; display: inline-block; padding: 1rem 2rem; background: #fff; text-transform: uppercase; border-radius: 0.5rem; } .col-md-12 { float: none; } .menu-footer .copy { display: none; } .footerColContactInfo .components-list-item { margin: 0 0 0.5rem 0;} .becfis-uploading-image { background:#000; pointer-events: none; transition: all 0.3s; } .becfis-uploading-image img { opacity:0.3; filter: blur(2px); transition: all 0.3s; } .row-content { padding: 0 2%; max-width: 1920px; margin: 0 auto !important;} .steps-menu-container { } ul.steps-menu { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0; flex-direction: column; gap: 5px; } ul.steps-menu .btn { width: 100%; text-align: left; border-bottom: 1px solid #d1d1d1; overflow: hidden; padding: 10px; margin: 0; border-radius: 5px; } .stepsToggleBtn { display:none; } /* *************************************************************************forms************************************************************************ */ /* default */ .form-container-children { gap: 3%; } .form-container-children .components-list-item { flex-grow: 1; flex-shrink: 1; flex-basis: 100%; } .form-container-children .components-list-item .field-label-title { padding: 2rem 0 0.5rem; font-size: 0.8rem; font-weight: 400; color: inherit; line-height: inherit;} .field-label-title::after { content: " "; display:inline-block; width:1px; height:1rem; } .form-pregled .btn { width: 100%; min-height:50px; border-radius: 4px; } .gallery-grid-capture-button { background: url(https://filespot.cloud/claimdepot/images/camera.png) no-repeat center center #999; width: 180px !important; height: 120px;} .gallery-grid-capture-button svg { display:none; } /* parent form .form-pregled, containing steps1-6 forms */ .form-pregled { display: block; } .form-pregled .base-component-children { display: flex; flex-wrap: wrap; gap: 3%;} /* .form-pregled .components-list-item { flex-basis: 23%; flex-grow: 1;} .form-pregled .components-list-item .field-label-title { } */ /* step1 */ .form-vehicle-owner { } .form-vehicle-owner .components-list-item { flex-basis: 30%; } /* step2 */ .form-vehicle-data { flex-direction: column; } .form-vehicle-data .components-list-item { flex-basis: 30%; } .form-vehicle-data > .components-list-item:first-child { border-bottom: 1px solid #eee; padding-bottom: 4rem; } /* step3 */ .form-claim-description { } .form-claim-description .components-list-item { flex-basis: 22%; } /* step4 */ .form-policy-data { } .form-policy-data .components-list-item { flex-basis: 22%; } .form-policy-data > .components-list-item:nth-last-child(2) { flex-basis:100%; } /* step5 */ .form-damages { /* flex-direction: column; */ overflow: hidden; } .form-damages .components-list-item { overflow: hidden; } .form-damages .owl-carousel .owl-item {/* margin:0 !important; */} /* line 1474 */ /* step6 */ .form-shootings { flex-direction: column; } .form-shootings .components-list-item { flex-basis:100%; } /* step7 */ .form-talon {} /* step8 */ .form-attachments {} /*** steps 1-8 ***/ .form-vehicle-owner > .components-list-item:last-child, .form-vehicle-data > .components-list-item:last-child, .form-claim-description > .components-list-item:last-child, .form-policy-data > .components-list-item:last-child, .form-damages > .components-list-item:last-child, .form-shootings > .components-list-item:last-child, .form-talon > .components-list-item:last-child, .form-attachments > .components-list-item:last-child { flex-basis:100%; margin: 3rem 0 0; } .form-vehicle-owner > .components-list-item:last-child aside, .form-vehicle-data > .components-list-item:last-child aside, .form-claim-description > .components-list-item:last-child aside, .form-policy-data > .components-list-item:last-child aside, .form-damages > .components-list-item:last-child aside, .form-shootings > .components-list-item:last-child aside, .form-talon > .components-list-item:last-child aside, .form-attachments > .components-list-item:last-child aside { display: flex; gap: 5%; } /* create case form */ .create-case-form-container { padding: 0 10%; } .create-case-form-container form { } .create-case-form-container form .components-list-item { flex-basis: 22%; } /* react select */ .react-select { } .react-select > * { height: 50px; line-height: 50px; padding:0; margin:0; overflow:hidden; cursor: pointer !important; } .react-select > * > * { padding:0 0rem 0 1rem !important; margin:0; } .react-select > * > * * { padding:0 !important; margin:0 !important; } .react-select svg { margin: 0 0.75rem !important; } /* date select */ .date-select {} .date-select .field-body.h-100 { max-height: 50px; cursor: pointer !important; } .date-select .field-body.h-100 > * > * { margin:0; cursor: pointer !important; } .date-select .field-body.h-100 > * > * input[type='text'] { max-height: 36px; } .date-select .field-body.h-100 div ~ div * { cursor: pointer !important; } /* signature */ #signature-pad {} canvas#signature-pad { background: #fff; border: 1px solid #2b79dd; float: left; position: relative; width: 300px; height: 200px; cursor: crosshair; } .becfis-signature-container { height: 50px; width: 50px; background: #a3a5a8; border: 0; color: #fff; font-weight: 600; cursor: pointer; position: relative; float: left; } .becfis-signature-container .wrapper { display:none; } .becfis-signature-container .clear-btn { position: absolute; top: 0; left: 0; width: 100%; opacity: 1; color: #fff; border-radius: 0; } .becfis-signature-container .clear-btn button { opacity:1; border-radius: 0; } /* */ .cont-cta-btns {} .cont-cta-btns .btn { margin: 2rem 0 0; } .MuiToolbar-root { margin: 0rem 0; min-height: 100px;} /* becfis-list */ .becfis-list { } .becfis-list li { } .becfis-list li aside { } /* modal */ .becfis-modal.in { display: flex !important; align-items: center; padding-right: 0 !important; padding: 0 !important; justify-content: center; overflow: hidden; margin: 0vh 0 !important; /* height: 80vh; margin: 10vh 0 !important; */ } .becfis-modal.in .becfis-modal-dialog { min-width: 30rem !important; height: 80vh; } .becfis-modal.in .becfis-modal-dialog .modal-content { height:100%; overflow: hidden;} .becfis-modal.in .becfis-modal-dialog .modal-content .modal-header { height: 70px; } .becfis-modal.in .becfis-modal-dialog .modal-content .modal-body { padding: 30px 20px; height: calc(100% - 155px); overflow-y: auto; } .becfis-modal.in .becfis-modal-dialog .modal-content .modal-footer { border: 0; border-top: 1px solid #e5e5e5; background: #f5f5f5; } .modal .field-label-title {} .modal-backdrop { height: 100vh; position: fixed; } /* select zone, step5 */ .becfis-image-map-container { position: relative; top: 0; left: 0; margin-bottom: 50px; } .becfis-image-map-image { top: 0; left: 0; width: 100% !important; max-width: 100% !important; height: auto; position: relative; z-index: 1; user-select: none;} .becfis-image-map-canvas {top: 0; width:100% !important; min-width:100% !important; max-width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; left: 0; position: absolute; pointer-events: none; z-index: 2; } .becfis-image-map { /* display:inline; */} .becfis-image-map area {} .becfis-image-map * {} /******selected-damages-list-visible,selected-damages-btn-unclicked,selected-damages-btn-clicked ***** .selected-damages-btn.selected-damages-btn-clicked .btn { background:#345878 !important;} .selected-damages-list { position: relative; height:0; opacity:0; -webkit-transition: all .3s ease-out!important; transition: all .3s ease-out!important; } .selected-damages-list.selected-damages-list-visible { display:block; background: #f1f1f1; border-radius: 0 0 5px 5px; padding: 1rem 2rem 2rem; height:auto; opacity:1; -webkit-transition: all .3s ease-out!important; transition: all .3s ease-out!important; } .selected-damages-list .becfis-list { display: flex; flex-direction: column; margin: 0.5rem 0; padding: 0;} .selected-damages-list .becfis-list li { display: block;} .selected-damages-list .becfis-list li aside { display: flex; flex-direction: row;} */ .selected-damages-btn .btn { margin: 10px 0 0;} .damaged-part-description-title { display: flex; border-bottom: 1px dashed #bbb; padding-top: 1rem; padding-bottom: 0.5rem; align-items: end; } .selected-part-title { font-weight: bold; } .remove-btn-container { position: relative; text-align: right; } .remove-btn-container .btn { position:relative; background-color: #c35656; padding: 0.43rem 0.5rem 0.5rem; margin: 0px 0 0; min-height: 10px !important; border-radius: 50% !important; width: 36px !important; display: inline-block; max-height: 36px;} .remove-btn-container .btn::after { content: "X"; display:inline-block; width:20px; height:20px; line-height:20px;} .damaged-part-description-list .becfis-list { display: flex; flex-direction: column; margin: 0.5rem 0; padding: 0;} .damaged-part-description-list .becfis-list li { display: block;} .damaged-part-description-list .becfis-list li aside { display: flex; flex-direction: row;} @media (max-width:639px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width: 90% !important; width: 90% !important; margin: 0 auto; overflow: hidden; padding: 0; } } @media (min-width:640px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width:640px!important; width:640px!important; margin: 0 auto;} } @media (min-width:768px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width:768px !important; width:768px !important; margin: 0 auto;} } @media (min-width:1024px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width:1024px !important; width:1024px !important; margin: 0 auto;} } @media (min-width:1200px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width:1170px !important; width:1170px !important; margin: 0 auto;} } @media (min-width:1536px) { .container, .navbar, .news-carousel .item .news-item > .components-list-item { max-width:1536px !important; width:1536px !important; margin: 0 auto;} } @media (min-width: 2200px) { /* .react-select, .field-body input, .btn { max-width:30rem; } */ } @media (max-width: 992px) { body, html { } .menu .menu-list > li { font-size: 1rem; } .boxed { padding-left: 0.5rem; padding-right: 0.5rem; padding-left: 0; padding-right: 0;} h2, .h2 { font-size: 1.75rem;} /* .navbar222 {padding-left: calc(12px + 2%);} */ .navbar-toggle { display: block; top: 20px; right: 0; z-index: 9999; } .hide-hamburger .navbar-toggle { display: block; top: 20px; } .menu-top-nav { display: none; } .navbar { margin-bottom: 0rem; } .menu ul {list-style: none; margin: 5rem 0 0; padding: 0;} .menu ul li { background: #5690c3; padding: 1rem 0rem; margin: 1rem 2rem; border-radius: 1rem;} .menu ul li a { color: #fff !important; display: block; text-align: center; text-transform: uppercase; } .menu ul li .btn { width:100%; display: block; padding: 0; background: none; text-align: center; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px!important; } .logo_div_container { } .generic-page .news_content { padding: 5vh 5% 0; } h3, .h3 { font-size: 2rem; } .news-item { padding: 2rem; padding:0; } .news-item .news_desc { max-width: 100%; line-height: 1.45; } .row-partners { margin: 0rem 0; } .col-partner { margin-top: 2rem;} .recom .owl-dots { margin-top: 3rem;} .menu-footer { text-align: left; padding: 0 1rem; border-top: 0px solid rgba(0,0,0,0.1); margin: 10px 0 0 0;} .section-news { margin: 0 auto; max-width: 90%; } .news_content { padding: 2% 5%; } .section-about .intro { flex-wrap: wrap; flex-direction: column;} .section-about .intro.n1 { flex-direction: column-reverse;} .dots-image-2 img { height: 300px;} .row-images { margin: 0 -1rem; } .home-page .row3 { padding: 3rem 0px 0;} section.cta { margin: 0 auto; max-width: 90%; } .MuiPaper-root { margin: 2rem 0; flex-direction: column; } .MuiTableCell-root { padding: 3px 16px !important; } .MuiTableRow-root:nth-child(odd) { } .MuiTableRow-root td:first-child { padding-top: 16px !important; } .MuiTableRow-root td:last-child { padding-bottom: 16px !important; } .MuiTableCell-root { display: block !important; width: 100% !important; } .hero-container { height: auto; padding: 0.5rem 0;} .hero-container.claim-opened > * { display: block; } .hero-container.claim-opened > * > * { font-size: 1.75rem; line-height: 1.5; } .hero-container .hero-title { display: block; text-align: center; font-size: 1.5rem; height:auto; } .claim-number { text-align: center; } .footer { padding: 5rem 0% 2rem;} .footerColContactInfo { background-position-x: center; margin-top: 5rem; padding-top: 6rem; } .footer .field-label-title {padding: 4rem 0 0.5rem} .footer ul li { display: block; padding: 1rem 0 0;} .footer-flex > * > * { flex-direction: column; text-align: center;} .footer ul { margin: 0; } .becfis-modal.in .becfis-modal-dialog { min-width: 100% !important; height: 100vh; } .becfis-modal.in .becfis-modal-dialog .modal-content { height: 100vh; position: relative; top: 0;} ul.steps-menu { position: absolute; top: 0px; opacity:0; z-index: -1; left: 0; right: 0; width: 100%; background: #fff; transition:all .1s ease-in; } .steps-menu-visible ul.steps-menu { top:70px; opacity:1; z-index: 99; } /* ul.steps-menu { position:relative !important; top:0px !important; opacity:1 !important; z-index: 99 !important; } */ .form-pregled { filter: blur(0); } .steps-menu-visible .form-pregled { filter: blur(3px); } ul.steps-menu .btn { border-radius: 10px; } .stepsToggleBtn { display:block; z-index: 98; position: relative; } .stepsToggleBtn span { display: block; width: 100%; position: absolute; top: 39px; top:15px; border-bottom: 1px dashed #7673a5; text-align: right; height: 34px; font-size: 24px; color: #231f6a; line-height: 1; } /* *************************************************************************forms************************************************************************ */ .form-container-children .components-list-item .field-label-title { padding: 1.5rem 0 0.25rem;} .form-container-children .components-list-item { flex-basis: 100%; } /* step1 */ .form-vehicle-owner .components-list-item { flex-basis: 100%; } /* step2 */ .form-vehicle-data .components-list-item { flex-basis: 100%; } .create-case-form-container form .components-list-item { flex-basis: 100%; } .footer-flex > aside { flex-direction: column; } .footer-flex > aside > div.components-list-item:first-child { order:5; } .footer .field-label-title { display: none; } } @media (max-width: 400px) { input[type="radio"] + label { padding: 0.5rem 1.65rem !important;} }