.main-banner { position: relative; display: flex; justify-content: center; align-items: center; height: 910px; background-size: cover; } .main-banner:before { content:""; position:absolute; left:0; bottom:-1px; right:0; z-index:1; height:685px; background:url(../images/home_bg_mask.png) no-repeat center top; } .main-banner .textbox { position: relative; z-index: 2; } .main-banner .title{ color: #fff; font-family: "Tenor Sans"; font-size: 70px; line-height: 78px; letter-spacing: -1.84px; text-transform: uppercase; text-align: center; max-width: 1072px; margin:0 0 56px 0; } /******************/ .main-banner ul.icons { display: flex; justify-content: center; margin:53px 0 0 0; } .main-banner .icons li { list-style: none; text-align: center; margin:0 30px 0 30px; } .main-banner .icons li figure{ display: flex; justify-content: center; align-items: center; height:84px; margin:0 0 17px 0; } .main-banner .icons li a { color: #172643; font-size: 16px; line-height: 16px; letter-spacing: -0.12px; font-weight: 600; display: block; } .main-banner .icons li:hover a { color: #176eb9; } /**************************************************************/ .about { } .about .columns { display: flex; justify-content: space-between; } .about .columns figure { position: relative; width: 752px; height: 602px; } .about .columns figure figcaption{ color: #fff; font-size: 13px; line-height: 13px; font-weight: 400; text-transform: uppercase; position: absolute; left:40px; bottom:40px; z-index: 2; } .about .columns .slider { width: 474px; height: 602px; background-color: #172643; } .about .columns .slider .item { padding: 50px 40px 0 40px; background-color: #172643; } .about .columns .slider .item .text{ color: #fff; font-family: "Tenor Sans"; font-size: 47px; line-height: 52.02px; letter-spacing: -1.63px; height: 460px; overflow: hidden; } /**************************************************************/ .funds { padding:86px 0 0 0; } .funds .items { display: flex; } .funds .items .item:nth-of-type(2n+1) { max-width: 583px; padding:0 136px 0 0; } .funds .items .item:nth-of-type(2n+2) { max-width: 653px; padding:0 47px 0 0; } /**************************************************************/ .established { padding: 29px 0 0 0; } .established .grid { padding: 60px 47px 60px 584px; background: #172643 url(../images/home_about_bg.png) no-repeat 140px 35px; } .established .text { color:#fff; } /**************************************************************/ .milestones { height: 650px; padding: 0 0 0 0; } .milestones .grid{ max-width:1024px; } .milestones .grid:before { content: ""; position: absolute; left: -30px; top: 400px; width: 20px; height: 48px; background-image: linear-gradient(270deg, #fff 0%, rgba(226, 232, 243, 0) 100%); opacity: 0.38; } .milestones .grid:after { content: ""; position: absolute; right: -30px; top: 400px; width: 20px; height: 48px; background-image: linear-gradient(270deg, #fff 0%, rgba(226, 232, 243, 0) 100%); opacity: 0.38; transform: rotate(180deg); } .milestones h2 { color: #fff; font-family: "Tenor Sans"; font-size: 56px; line-height: 36px; letter-spacing: -1.47px; text-align: center; position: absolute; top:120px; left:0; right:0; } .milestones h2 strong{ color: #0091e2; } .milestones .item { position: relative; width: 256px; height: 560px; padding: 400px 10px 0 10px; } .milestones .item .year { color: #fff; font-size: 16px; line-height: 48px; letter-spacing: -0.12px; font-weight: 700; text-align: center; height: 48px; background-color: rgba(255, 255, 255, 0.3); } .milestones .item:hover .year { color: #fff; font-size: 16px; line-height: 48px; letter-spacing: -0.12px; font-weight: 700; text-align: center; height: 48px; background-color: #0091e2; } .milestones .item .title { color: #daeafc; font-size: 14px; line-height: 14px; letter-spacing: -0.2px; font-weight: 700; text-transform: uppercase; margin:20px 0 0 0; } .milestones .item .text { color: #fff; font-size: 15px; line-height: 19px; letter-spacing: -0.72px; font-weight: 500; margin:10px 0 0 0; } /************/ .milestones .item .exits { position: absolute; left: 0; bottom: 180px; width: 256px; min-height: 60px; padding: 13px; border-radius: 15px; background-color: #fff; box-shadow: 0 -7px 16px 2px rgba(0, 0, 0, 0.25); transition: all 0.4s ease; opacity: 0; } .milestones .item:hover .exits, .milestones .item .exits.active { bottom: 200px; opacity: 1; } .milestones .item .exits:after { content:""; position: absolute; left: 108px; bottom: -10px; width:20px; height:20px; background-color: #fff; transform:rotate(45deg) } .milestones .item .exits li { list-style: none; position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 0 9px 0; margin: 0 0 9px 0; border-bottom: 1px solid #f3f4f6; } .milestones .item .exits li:last-child { margin: 0; border-bottom:unset; } .milestones .item .exits li:before { content:""; position: absolute; left:95px; top:35px; width: 24px; height: 1px; border-top: 1px solid #0280c9; } .milestones .item .exits li img{ max-width: 90px; max-height: 31px; width:auto; height:auto; } .milestones .item .exits li .tag { color: #fff; font-size: 16px; line-height: 21px; letter-spacing: -0.12px; font-weight: 700; text-transform: uppercase; position: absolute; left: 0; top: 0; height: 20px; padding: 0 5px 0 5px; background-color: #0091ff; } /*************/ .milestones .owl-carousel .owl-nav button.owl-prev, .milestones .owl-carousel .owl-nav button.owl-next { top: 400px; } /******************************************************************/ @media only screen and (max-width:1199px) and (min-width:769px){ .about .columns figure{ height: 500px; width: 58%; } .about .columns .slider{ height: 500px; width: 42%; } .about .columns .slider .item .text{ font-size: 34px; line-height: 1.3; height: 100%; } .milestones .grid { max-width: 790px; } .owl-carousel .owl-nav button.owl-prev{ left: -100px; } .owl-carousel .owl-nav button.owl-next{ right: -100px; left: auto; } } @media only screen and (max-width:991px) and (min-width:769px){ .section-title{ font-size: 28px; } .about .columns .slider .item .text{ font-size: 24px; } .funds .items .item:nth-of-type(2n+1),.funds .items .item:nth-of-type(2n+2){ width: 100%; padding: 0 47px 0 0; } .established .grid h2 { font-size: 36px; } footer,footer .grid{height: auto;} footer .footer-sitemap{ flex-wrap: wrap; } } @media only screen and (max-width:768px){ .main-banner { height: 740px; } .main-banner .title{ font-size: 36px; line-height: 48px; letter-spacing: -0.95px; margin:0 20px 42px 20px; } /******************/ .main-banner ul.icons { flex-wrap: wrap; margin:42px 0 0 0; } .main-banner .icons li { width:50%; margin:0 0 40px 0; } .main-banner .icons li:nth-of-type(3) { margin:0; } .main-banner .icons li figure{ zoom:0.8; } /**************************************************************/ .about { padding:50px 0 0 0; } .about .section-title { padding:0 20px 0 20px; } .about .section-text { padding:0 20px 0 20px; } .about .columns { display: flex; justify-content: space-between; flex-direction: column; } .about .columns figure { width: 100%; height: 330px; } .about .columns figure figcaption{ left:20px; bottom:20px; } .about .columns .slider { width: auto; height: auto; padding:0 0 50px 0; } .about .columns .slider .item .text{ font-size: 30px; line-height: 40px; letter-spacing: -1.04px; text-align: center; height: auto; overflow: hidden; } /**************************************************************/ .funds { padding:40px 20px 20px 20px; } .funds .items { flex-direction: column; } .funds .items .item:nth-of-type(2n+1) { padding:0; } .funds .items .item:nth-of-type(2n+2) { padding:20px 0 0 0; } /**************************************************************/ .established { padding: 0; } .established .grid { padding: 40px 20px 40px 20px; background-position: center; } /**************************************************************/ .milestones { height: 620px; padding: 0 0 0 0; } .milestones .grid:before, .milestones .grid:after { display: none; } .milestones h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.95px; top:50px; padding:0 20px 0 20px; } .milestones .item { position: relative; width: 256px; height: 560px; padding: 400px 10px 0 10px; } /************/ .milestones .center .item .exits, .milestones .item .exits.active { bottom: 200px; opacity: 1; } }