/* General styles **************************************************/ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: local('Lato Black'), local('Lato-Black'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/BVtM30trf7q_jfqYeHfjtA.woff) format('woff'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; src: local('Lato Italic'), local('Lato-Italic'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/oUan5VrEkpzIazlUe5ieaA.woff) format('woff'); } body { font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 400; background: #4D4D4D; } a,a:hover,a:focus { text-decoration: none; outline: 0; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: "Lato", Helvetica, Arial, sans-serif; font-weight: 300; } /* mobile menu **************************************************/ .mobilemenu { position: fixed; top: 0px; left: 0; right: 0; z-index: 1002; font-size: 30px; padding: 2px 10px; background: #2b2b2b; display: block; width: 50px; height: 50px; color: #fff; display: none; } .mobilemenu:hover,.mobilemenu:focus { color: #fff; } /* layout **************************************************/ #main-nav { text-align: left; vertical-align: top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 250px; background: #2b2b2b; position: absolute; left: 0; top: 0; bottom: 45px; overflow: hidden; } #main { position: absolute; left: 250px; right: 0; top: 0; bottom: 0; background: #fefefe; overflow: hidden; } .page { overflow: auto; position: absolute; top: 0; left: 2000px; bottom: 0; width: 85%; background-color: #f7f7f7; } .home { left: 0px; z-index: 0; width: 100%; } #overlay { position: absolute; top: 0; left: 0px; bottom: 0; right: 0px; background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); opacity: 0.25; display: none; z-index: 300; cursor: crosshair; cursor: url(../img/pointer.png), auto; } #runner { position: absolute; width: 30px; height: 20px; color: #fff; font-size: 20px; z-index: 2000; } .currentpage { -webkit-box-shadow: -2px 0 4px -2px rgba(0,0,0,.25); box-shadow: -2px 0 4px -2px rgba(0,0,0,.25); } /* sidebar **************************************************/ #nav-container { position: relative; padding-bottom: 75px; bottom: 0; height: 100%; } #profile { text-align: center; padding: 30px 10px; position: relative; } #profile .portrate { background-image: url(../Director1.jpg); width: 125px; margin: 0 auto; height: 125px; border-radius: 50%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } #profile .title h2 { font-size: 28px; font-weight: 300; color: #fff; margin: 20px 0 10px 0; } #profile .title h3 { font-size: 18px; font-weight: 300; color: #aaa; margin: 0px 0 10px 0; } ul#navigation { padding: 0; margin: 0; } ul#navigation li { display: block; float: none; clear: both; background: #303030; border-top: 1px solid #373737; border-bottom: 1px solid #2B2B2B; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; -ms-transition: background 0.5s; transition: background 0.5s; } ul#navigation li a { color: #ccc; font-size: 14px; } ul#navigation li:hover,ul#navigation li:focus { background: #363636; } ul#navigation li:hover a,ul#navigation li:focus a { color: #f7f7f7; } ul#navigation .currentmenu { font-weight: bold; } ul#navigation li.currentmenu a { color: #fff; } /*ul#navigation li.external:hover .icon, ul#navigation li.currentmenu .icon{ color: #03cc85; }*/ ul#navigation li.currentmenu { background: #363636; border-top: 1px solid #3d3d3d; border-bottom: 1px solid #252525; } ul#navigation li .text { padding-left: 5%; margin-left: 50px; line-height: 45px; -webkit-box-shadow: -3px 0 5px -4px #000; box-shadow: -3px 0 5px -4px #000; } ul#navigation li .icon { float: left; line-height: 45px; width: 50px; text-align: center; font-size: 27px; } .social-icons { position: absolute; bottom: 0; left: 0; width: 100%; background: #202020; border-top: 1px solid #1A1A1A; width: 250px; z-index: 2; height: 45px; } .social-icons ul { padding: 0; margin: 0; list-style: none; } .social-icons li { float: left; width: 33%; padding: 10px; text-align: center; } .social-icons a { color: #ccc; } .social-icons a:hover,.social-icons a:focus { color: #fff; } .social-icons i { font-size: 16px; } /* page specifics **************************************************/ .page-container { position: relative; } .pageheader { background: #f3f3f3; position: relative; padding: 60px 0 45px 0; } .pageheader:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(8, 4, 13, 0); border-top-color: #f3f3f3; border-width: 30px; left: 50%; margin-left: -30px; z-index: 1; } .headercontent .title { font-size: 50px; margin-bottom: 25px; border-bottom: 1px solid #ccc; padding: 0 0 20px 0; } .headercontent .subtitle { border-bottom: 1px solid #ccc; margin: 0 0 10px 0; padding: 5px 0; } .headercontent .subtitle h3 { margin: 0; padding: 0; } .page .section { padding: 70px 0; position: relative; } .section-container { padding: 0 10%; } .color-1 { background: #fcfcfc; } .color-2 { background: #f7f7f7; } .color-3 { background: #2c2c2d; color: #fff; } .color-4 { background: #000; } .section .title { border-bottom: 1px solid #ccc; margin: 0 0 30px 0; padding: 20px 0; } .section .title h3 { padding: 0; margin: 0; font-size: 26px; } .biothumb{position: relative;} .biothumb .overlay{ position: absolute; width: 100%; color:#fff; bottom: 0; background-color: black; background-color: rgba(0,0,0,0.5); padding:25px; } .biothumb .overlay h1{ font-size: 45px; } /************************************************* * uls **************************************************/ .ul-bolded li { font-weight: bold; } .ul-boxed li { padding: 7px; background-color: #FdFdFd; margin-bottom: 10px; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; border-radius: 2px; border-left: 5px solid; } /* ul-card **************************************************/ ul.ul-card { padding: 0; margin: 0; list-style: none; } ul.ul-card li { position: relative; padding: 50px 15px 20px 15px; background-color: #fff; margin-bottom: 15px; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; border-radius: 3px; margin-left: 10px; color: #333; } ul.ul-card li .dy { position: absolute; top: 10px; left: -10px; border-radius: 0px; padding: 0; color: white; } ul.ul-card li .dy span { padding: 7px 10px; line-height: 30px; margin: 0; } /*ul.ul-card li .dy .degree { background-color: #03bb7a; }*/ ul.ul-card li .dy .year { /*background-color: #03cc85;*/ -webkit-box-shadow: -3px 0px 7px -3px rgba(68, 68, 68, 0.5); box-shadow: -3px 0px 7px -3px rgba(68, 68, 68, 0.5); margin-left: -3px !important; } ul.ul-card li .description p { font-size: 16px; margin: 0; } ul.ul-card li .description p.where { font-weight: 300; font-size: 14px; } /* ul-dates **************************************************/ ul.ul-dates,ul.ul-dates-gray { margin: 0; padding: 0; list-style: none; } ul.ul-dates li,ul.ul-dates-gray li { margin-bottom: 15px; /*margin-left: 20px; */ } ul.ul-dates div.dates,ul.ul-dates-gray div.dates { float: left; width: 75px; } ul.ul-dates div.dates span,ul.ul-dates-gray div.dates span { /*background-color: #03cc85;*/ padding: 6px; display: block; text-align: center; color: #fff; position: relative; } ul.ul-dates-gray div.dates span { background-color: #BBBBBB; } /*ul.ul-dates div.dates span:last-child { background-color: #03bb7a; }*/ ul.ul-dates-gray div.dates span:last-child { background-color: #979797; } ul.ul-dates-gray div.dates span:first-child,ul.ul-dates div.dates span:first-child { -webkit-box-shadow: 0px 2px 6px -3px rgba(68, 68, 68, 0.5); box-shadow: 0px 2px 6px -3px rgba(68, 68, 68, 0.5); z-index: 3; position: relative; } ul.ul-dates div.content,ul.ul-dates-gray div.content { margin-left: 90px; min-height: 70px; padding-top: 10px; } ul.ul-dates div.content h4,ul.ul-dates-gray div.content h4 { font-weight: 400; font-size: 16px; margin-top: 0; } ul.ul-dates div.content p,ul.ul-dates-gray div.content p { font-size: 13px; } /* ul-timeline **************************************************/ ul.timeline { border-left: 8px solid #FFF; list-style: none; padding: 1px 0; margin-left: 100px; } ul.timeline li .date { float: left; padding: 10px 15px 10px 10px; margin-top: 10px; margin-left: -115px; font-size: 15px; width: 110px; text-align: center; /*background: #03cc85;*/ color: #fff; } /*ul.timeline li.open .data { background: #03bb7a; }*/ ul.timeline li .circle { float: left; margin: 20px 0; margin-left: -14px; width: 20px; height: 20px; border: 4px solid #FFFFFF; border-radius: 50%; background-color: #d5d5d5; } ul.timeline li.open .circle { /*background-color: #03bb7a;*/ -webkit-box-shadow: 0px 2px 6px -3px rgba(68, 68, 68, 0.5); box-shadow: 0px 2px 6px -3px rgba(68, 68, 68, 0.5); } ul.timeline li .data { background: #fdfdfd; margin: 10px 0px 10px 20px; border-left: 10px solid; padding: 18px 20px; font-size: 16px; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; border-radius: 3px; } ul.timeline li.open .data { /*border-color: #03bb7a;*/ background: #fff; } ul.timeline li .data .subject { cursor: pointer; color: #777; font-size: 18px; } ul.timeline li .data .text { display: none; margin-top: 15px; font-size: 14px; } /* ul-withdetails **************************************************/ .ul-withdetails { list-style: none; padding: 0; } .ul-withdetails li { background-color: #FdFdFd; margin-bottom: 15px; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; border-radius: 3px; } .ul-withdetails li .image { position: relative; overflow: hidden; } .ul-withdetails li .imageoverlay { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; /*background: #03cc85;*/ cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; } .ul-withdetails li .imageoverlay i { color: #fff; position: absolute; top: 40%; left: 45%; font-size: 30px; } .ul-withdetails li .meta { overflow: hidden; padding: 20px; cursor: pointer; } .ul-withdetails li .details { display: none; padding: 20px; background: #fff; -webkit-box-shadow: inset 0px 3px 5px -3px #ccc; box-shadow: inset 0px 3px 5px -3px #ccc; } /************************************************* * lab partnerts **************************************************/ #labp-heads-wrap { /*background-color: #03bb7a;*/ position: relative; height: 180px; } #labp-heads-wrap:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 103, 103, 0); /*border-top-color: #03bb7a;*/ border-width: 15px; left: 50%; margin-left: -15px; } #lab-carousel { width: 100%; height: 200px; position: absolute; top: 0; left: 0; } #lab-carousel div { float: left; width: 100px; height: 100px; } #lab-carousel img { border: none; position: relative; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; } .caroufredsel_wrapper { margin-top: -10px !important; padding-top: 20px !important; padding-bottom: 20px !important; } #labp-heads-wrap #next,#labp-heads-wrap #prev { position: absolute; top: 0; height: 100%; line-height: 180px; padding: 0 10px; color: #f7f7f7; font-size: 30px; z-index: 4; } #labp-heads-wrap #next { right: 0; } #labp-heads-wrap #prev { left: 0; } #labp-heads-wrap #prev.disabled,#labp-heads-wrap #next.disabled { color: #ccc; cursor: default; } #lab-details { background-color: #fff; padding: 20px; padding-top: 40px; text-align: center; min-height: 150px; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; border-radius: 2px; } #lab-details div { display: none; } #lab-details h3 { margin-top: 0; } /* filter dropdowns **************************************************/ #filters,.filters,#pub-grid { padding: 20px 0 30px 0 !important; } #filters h3,.filters h3,div#sort { margin-top: 30px; } #sort span { line-height: 30px; } .stuck { position: fixed !important; z-index: 1001; top: 0; right: 0; -webkit-box-shadow: 0px 2px 4px 0px #cecece; box-shadow: 0px 2px 4px 0px #cecece; } .cd-dropdown,.cd-select { position: relative; margin: 20px auto; display: block; } .cd-dropdown > span { width: 100%; height: 40px; line-height: 40px; color: #999; font-weight: 700; font-size: 16px; background: #fff; display: block; padding: 0 10px 0 30px; position: relative; cursor: pointer; } .cd-dropdown > span:after { content: ''; position: absolute; right: 0px; top: 0px; width: 50px; text-align: center; font-size: 12px; padding: 8px; height: 70%; line-height: 24px; } .cd-dropdown.cd-active > span:after { content: ''; } .cd-dropdown ul { list-style-type: none; margin: 0; padding: 0; display: block; position: relative; } .cd-dropdown > span,.cd-dropdown ul li:nth-last-child(-n+3) span { -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0,0,0,0.1); } .cd-dropdown ul { position: absolute; top: 0px; width: 100%; } .cd-dropdown ul li { position: absolute; width: 100%; } /*.cd-active.cd-dropdown > span { color: #03cc85; }*/ .cd-active.cd-dropdown > span,.cd-active.cd-dropdown ul li span { -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0,0,0,0.1); } .cd-active.cd-dropdown ul li span { -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .cd-active.cd-dropdown ul li span:hover { /*background: #03cc85;*/ color: #fff; } .cd-dropdown ul li span { width: 100%; background: #fafafa; line-height: 40px; padding: 0 10px 0 30px; display: block; color: #bcbcbc; cursor: pointer; font-weight: 700; } /* publications **************************************************/ #pub-grid .mix { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; display: none; } .pitems .item { margin-bottom: 20px; width: 100%; } .pitems .pubmain { background: #fefefe; padding: 25px 25px 35px 25px; min-height: 130px; position: relative; -webkit-box-shadow: 0px 3px 3px -3px #ccc; box-shadow: 0px 3px 3px -3px #ccc; cursor: pointer; } .pitems .pubtitle { margin: 0; padding: 0 0 15px 0; font-size: 20px; font-weight: 300; } .pitems .pubmain div { font-size: small; } .pitems .pubmain .label { margin-right: 10px; } .pitems .pubmain .pubassets { position: absolute; bottom: 0; right: 0; background: #fafafa; text-align: center; border-top: 2px solid; } .pitems .pubmain .pubassets a { color: #9b9b9b; padding: 5px 15px; float: right; font-size: 18px; } .pitems .pubmain .pubassets a:hover,.pitems .pubmain .pubassets a:focus,.pitems .pubmain .pubassets a.pubcollapse { /*background: #03cc85;*/ color: #fff; } .pitems .pubdetails { background: #fff; padding: 25px; display: none; } /* Gallery **************************************************/ #gallery-header { color: #f7f7f7; } #gallery-header h2 { font-size: 50px; text-align: center; } #gallery-large { background: #303030; padding-top: 20px; } ul.grid { max-width: 69em; list-style: none; margin: 30px auto; padding: 0; } ul.grid li { display: block; float: left; padding: 15px; width: 33%; } @media screen and (max-width: 900px) { ul.grid li { width: 50%; } } @media screen and (max-width: 400px) { ul.grid li { width: 100%; } } ul.grid li >div { -webkit-box-shadow: 0 0 8px -1px #000; box-shadow: 0 0 8px -1px #000; overflow: hidden; position: relative; } ul.grid li .over { position: absolute; bottom: -100%; width: 102%; right: -1%; left: -1%; color: #fff; } ul.grid li .comein { position: relative; z-index: 1; padding: 15px; height: 100%; } ul.grid li .comein i { display: block; width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; font-size: 22px; color: #FFF; -webkit-box-shadow: 0 0 60px #fff; box-shadow: 0 0 60px #fff; border: 1px solid #fff; text-align: center; padding-top: 17px; border-radius: 50%; } ul.grid li .comein-bg { -khtml-opacity: .70; -moz-opacity: .70; -ms-filter: â€alpha(opacity=70)â€; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7); filter: alpha(opacity=70); opacity: .70; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: #000; z-index: -1; } ul.grid li a,ul.grid li img { outline: none; border: none; display: block; max-width: 100%; } /* at start */ .my-mfp-slide-bottom .mfp-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); } /* animate in */ .my-mfp-slide-bottom.mfp-ready .mfp-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); } /* animate out */ .my-mfp-slide-bottom.mfp-removing .mfp-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); } /* Dark overlay, start state */ .my-mfp-slide-bottom.mfp-bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-slide-bottom.mfp-ready.mfp-bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; } /* animate out */ .my-mfp-slide-bottom.mfp-removing.mfp-bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } /* contanct **************************************************/ .contact-office { background: #fff url('../img/contact-office.jpg') no-repeat; } .contact-lab { background: #000 url('../img/contact-lab.jpg') no-repeat; color: #fff; } /*.contact-office .icon-huge, .contact-lab .icon-huge{ color: #03cc85; }*/ .icon-huge { font-size: 170px; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; display: block; padding-top: 30px; } @media (max-width: 500px) { ul.timeline { margin: 0; border-left: none; } ul.timeline .circle { display: none; } ul.timeline .data { margin: 0 !important; margin-bottom: 10px !important; padding-top: 65px !important; } ul.timeline .date { margin-left: 0 !important; } } @media (max-width: 991px) { .mobilemenu { display: block; } .social-icons,#main-nav { left: -250px; z-index: 3; } #main { left: 0; } }