.expert-page{padding-bottom:64px} .expert-page header{padding:50px 0} .expert-page .svgWrapper{width:40%;height:380px;float:left} .expert-page .svg{max-width:300px;max-height:380px;margin:auto;position:relative} .expert-page svg.head{width:100%;height:100%;display:block} .expert-page svg.head .cls-1{fill:#d3dddd;fill:#d7dfe6} .expert-page svg.head .cls-2{opacity:.53} .cls-4,.expert-page svg.head .cls-3{fill:#3cb9c4} .expert-page svg.head .cls-3{opacity:.5} .expert-page svg.head .cls-5{fill:#fff} .expert-page .brain{position:absolute;top:0;left:0} .expert-page svg.circle{position:absolute;animation:pulseOne 3s both infinite} .expert-page svg.circle .cls-1{fill:#3cb9c4} .expert-page svg.circle .cls-2{fill:#fff} .expert-page svg.one{width:36px;height:36px;top:29px;left:211px} .expert-page svg.two{width:23px;height:23px;top:28px;left:181px} .expert-page svg.three{width:39px;height:39px;top:55px;left:175px} .expert-page svg.four{width:29px;height:29px;top:71px;left:221px} .expert-page svg.five{height:40px;width:40px;top:98px;left:189px} .expert-page svg.six{width:56px;height:56px;top:77px;left:125px} .expert-page svg.seven{width:47px;height:47px;top:25px;left:128px} .expert-page svg.eight{width:37px;height:37px;top:50px;left:87px} .expert-page svg.nine{width:32px;height:32px;top:92px;left:86px} .expert-page svg.ten{width:25px;height:25px;top:125px;left:105px} .expert-page svg.eleven{width:32px;height:32px;top:75px;left:54px} .expert-page svg.twelve{width:20px;height:20px;top:113px;left:65px} @keyframes pulse{ 0%{transform:scale(.9)} 50%{transform:scale(1.1)} 100%{transform:scale(.9)} } .expert-page svg.eight,.expert-page svg.five,.expert-page svg.one,.expert-page svg.twelve{animation:pulse 3s both infinite} .expert-page svg.eleven,.expert-page svg.four,.expert-page svg.six,.expert-page svg.two{animation:pulse 3s 1s both infinite} .expert-page svg.nine,.expert-page svg.seven,.expert-page svg.ten,.expert-page svg.three{animation:pulse 3s 2s both infinite} .expert-page header .text{width:648px;height:380px;float:right} .expert-page header h1{font-size:48px;line-height:1.2;margin-bottom:16px} .expert-page header p{font-size:16px;line-height:1.5;color:#587086;margin:0} .expert-page .overview article>div{display:flex;flex-wrap:wrap;justify-content:space-between} .expert-page .overview article>div::after{content:"";width:calc(25% - 12px)} .expert-page .overview article .clear{display:none} .expert-page .user{width:calc(25% - 12px);margin:0 0 12px 0;background:#fff;float:left;padding:24px 24px 20px 24px;position:relative;transition:padding .2s} .expert-page .user .profile{width:88px;height:88px;border-radius:100%;margin:-2px 0 22px -2px;background:#ecf0f0;background-size:cover;background-position:center center;box-shadow:inset 0 0 24px rgba(50,71,91,.1)} .expert-page .user:hover{padding:21px 21px 17px 21px} .expert-page .user::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;box-shadow:0 0 0 rgba(50,71,91,0);transition:all .2s} .expert-page .user:hover::before{top:-3px;left:-3px;width:calc(100% + 6px);height:calc(100% + 6px);box-shadow:0 0 24px rgba(50,71,91,.3)} .expert-page .user h2{font-size:20px;line-height:1.2;margin:0 0 3px 0} .expert-page .user h3{font-size:14px;line-height:1.5;color:#587086} .expert-page .user h4{font-size:13px;line-height:1.5;font-weight:400;color:#587086} .expert-page .user a{font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:16px;display:block} .expert-page .user *{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative} .news-page-show .back-button{display:inline-block;margin:23px 0 17px 0;text-transform:uppercase;font-weight:700} .news-page-show .back-button .fa{font-size:20px;margin:0 6px 0 0;position:relative;top:2px} .expert-profile article{display:block} .expert-profile.news-page-show .left,.expert-profile.news-page-show .left+.right{margin-top:0} .expert-profile.news-page-show .left .news-item .image-wrap{height:234px} .expert-profile.news-page-show .left .news-item .image img{display:block;margin:auto} .expert-profile.news-page-show .left .news-item .wrap{padding:0} .expert-profile.news-page-show .left .profile{position:relative;z-index:1;width:88px;height:88px;border-radius:100%;margin:-50px 0 22px -6px;background:#ecf0f0;background-size:cover;background-position:center center;box-shadow:inset 0 0 24px rgba(50,71,91,.1);border:4px solid #fff;box-sizing:content-box} .expert-profile.news-page-show .left .title{margin-bottom:16px} .expert-profile.news-page-show .left h1{font-size:20px;line-height:1.2;margin:0 0 3px 0} .expert-profile.news-page-show .left h2{font-size:14px;line-height:1.5;color:#587086;margin:0!important} .expert-profile.news-page-show .left h3{font-size:13px;line-height:1.5;font-weight:400;color:#587086;margin:0} .expert-profile.news-page-show table.skills{margin:16px 0 0 0} .expert-profile.news-page-show table.skills td:first-of-type{padding-right:12px} .expert-profile.news-page-show table.skills .links td:first-of-type{vertical-align:middle} .expert-profile.news-page-show table.skills .links td:last-of-type{font-size:24px;padding-top:22px} .fa-linkedin{color:#0077b5} .fa-twitter-square{color:#1da1f2} .fa-facebook-square{color:#3b5998} .fa-youtube-square{color:#fb0007} .expert-profile.news-page-show table.skills .fa-globe{font-size:22px;position:relative;top:-1px} .expert-profile.news-page-show .company{padding:40px 0 64px 0;border-top:3px solid #ecf0f0;margin:40px 0 0 -8px;width:calc(100% + 16px)} .expert-profile.news-page-show .company img{margin-bottom:24px} .expert-profile.news-page-show .company h2{font-size:18px;color:inherit} .expert-profile.news-page-show .company p:first-of-type{margin-top:0} .expert-profile.news-page-show .company a{font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:16px;display:block} .expert-form h1{font-size:40px;line-height:1.2;margin:24px 0 32px 0} .expert-form .optional{color:#9cacb8;display:block;position:absolute;top:24px;right:24px} .expert-form{padding:40px 0} .expert-form .wrap{background:#fff;padding:40px;width:100%;position:relative} .expert-form hr{border:0;margin:24px 0;clear:both} .expert-form label{display:block;margin-bottom:16px} .expert-form label::after{content:"";display:block;clear:both} .expert-form textarea[name=introduction]{min-height:190px} .expert-form .form{margin:auto;max-width:800px;width:100%} .expert-form .part::after{content:"";display:block;clear:both} .expert-form .half{width:calc(50% - 8px);float:left} .expert-form .half:nth-child(even){margin-left:16px} .expert-form .firstname,.expert-form .prefix{float:left} .expert-form .firstname{width:calc(70% - 16px);margin-right:16px} .expert-form .prefix{width:30%;margin-left:0} .expert-form .half.quote{margin-left:0} .expert-form .social-media label{position:relative} .expert-form .social-media i{font-size:24px;float:left;line-height:1;position:absolute;top:18px;left:8px} .expert-form .social-media input{padding-left:34px} .expert-form .upload.error .fa-upload{color:red} .expert-form .upload.error .upload-input .text{color:red} .expert-form .upload .fa-upload{font-size:20px;line-height:1;position:absolute;top:21px;left:8px;color:#3cb9c4} .expert-form .upload input{display:none} .expert-form .upload::after{content:"";display:block;clear:both} .expert-form .upload .upload-input{width:100%;padding:9px 8px 5px 34px;line-height:24px;border:1px solid #ced3d8;float:left} .expert-form .upload .upload-input .text{color:#4cbfc9;font-weight:700;text-transform:uppercase} .expert-form .upload .upload-input.active .text{display:none} .expert-form .upload .upload-input .close{display:none;font-size:13px;position:absolute;top:12px;right:5px;color:#9cacb8;line-height:1;padding:3px 4px} .expert-form .upload .upload-input.active .close{display:block} .expert-form .upload .min{position:absolute;bottom:0;left:0;transform:translateY(100%);color:#9cacb8;font-size:10px} @media screen and (max-width:1200px){ .expert-page header .text{width:55%;height:380px;float:left;padding-left:24px} } @media screen and (max-width:1024px){ .expert-page .overview article>div::after,.expert-page .user{width:calc((100% / 3) - 12px)} } @media screen and (max-width:900px){ .expert-page header{padding:24px 0} .expert-page header .text{padding-left:0;height:316px;width:calc(100% - 234px)} .expert-page header .text p{font-size:13px} .expert-page header h1{font-size:40px;margin-bottom:8px} .expert-page .svgWrapper{width:250px;height:316px;float:left;margin:0 8px 0 -24px} .expert-page .svg{transform:scale(.83)} .expert-page .brain{transform:scale(.83)} } @media screen and (max-width:800px){ .expert-page .overview article>div::after,.expert-page .user{width:calc(50% - 6px)} .expert-profile.news-page-show .left+.right{margin-top:24px} } @media screen and (max-width:700px){ .expert-form .half{width:100%;float:none} .expert-form .half::after{content:"";clear:both;display:block} .expert-form .half:nth-child(even){margin-left:0} } @media screen and (max-width:600px){ .expert-page header{padding:0 0 24px 0} .expert-page header .text{float:none;width:calc(100% + 48px);margin:0 0 0 -24px;padding:0 24px;height:auto;background:-webkit-linear-gradient(top,rgba(236,240,240,0) 0,rgba(236,240,240,1) 30%);background:-webkit-linear-gradient(top,rgba(236,240,240,0) 0,rgba(236,240,240,1) 30%);background:linear-gradient(to bottom,rgba(236,240,240,0) 0,rgba(236,240,240,1) 30%)} .expert-page .svgWrapper{margin:0 -40px -170px 0;float:right;transform:rotateY(180deg) translateX(-100%) scale(.7);transform-origin:left top;z-index:-1;position:relative} .expert-profile .back-button{padding-left:24px} } @media screen and (max-width:560px){ .expert-page .overview article>div{margin:0;width:100%} .expert-page .overview article>div::after,.expert-page .user{width:100%;margin-left:0} .expert-page .user .profile{float:left;margin:-2px 16px 16px -2px} .expert-page .user h2{margin-top:11px} .expert-page .user a{clear:both} } @media screen and (max-width:450px){ .expert-page .user .profile{float:none} }