/* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #000; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 20px; color: #818181; display: block; transition: 0.3s; } /* When you mouse over the navigation links, change their color */ .sidenav a:hover { color: #f1f1f1; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 10px; right: 10px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } /* Topbar CSS */ .top-bar-area { border-bottom: 1px solid #e7e7e7; padding: 10px 0; overflow: hidden; } .top-bar-area .row { align-items: center; display: flex; float: none; vertical-align: middle; }.top-bar-area .info.box li { display: inline-block; text-align: left; float: left; }.top-bar-area .info.box li .icon, .top-bar-area .info.box li .info { display: table-cell; vertical-align: middle; letter-spacing:2px;color: #000; }.top-bar-area .info.box li .info span { display: block; color:#000; font-weight: 600; line-height: 20px; text-transform: uppercase; letter-spacing:2px; }.top-bar-area .info.box li .icon i { font-size: 30px;color: #000; } .top-bar-area.bg-light .info.box li .icon i { color: #1cb9c8; } .top-bar-area .info.box li .icon { padding-right: 15px; }.top-bar-area .address-info.text-right .info.box li { margin-left: 15px; padding-left: 15px; position: relative; } .top-bar-area .address-info.text-left .info.box li { margin-right: 15px; padding-right: 15px; position: relative; } .top-bar-area .address-info.text-right .info.box li::after { background: #e7e7e7 none repeat scroll 0 0; content: ""; height: 200px; left: 0; position: absolute; top: -50%; width: 1px; } .top-bar-area .address-info.text-left .info.box li::after { background: #e7e7e7 none repeat scroll 0 0; content: ""; height: 200px; right: 0; position: absolute; top: -50%; width: 1px; } .top-bar-area .address-info.text-right .info.box li:first-child::after { display: none; } .top-bar-area .address-info.text-left .info.box li:last-child::after { display: none; }.top-bar-area .address-info.text-right .info.box li:first-child { border: medium none; margin-left: 0; padding-left: 0; } .top-bar-area .address-info.text-left .info.box li:last-child { border: medium none; margin-right: 0; padding-right: 0; } .top-bar-area .address-info.text-right .info { display: inline-block; } .top-bar-area .link.text-right a { margin-left: 5px; } .top-bar-area .social li { display: inline-block; } .top-bar-area .social li a { color: #666666; display: inline-block; font-size: 20px; } .top-bar-area .social.text-right li { margin-left: 15px; } .top-bar-area.one-line li { margin-right: 15px; padding-right: 15px; } .top-bar-area.bg-dark li { color: #ffffff; } .top-bar-area.one-line.bg-dark li { border-right: 1px solid rgba(255, 255, 255, 0.3); } .top-bar-area.one-line li:last-child { border: medium none; margin-right: 0; padding-right: 0; } .top-bar-area.one-line li i { margin-right: 5px; } .top-bar-area.one-line li i { color: #1cb9c8; } .top-bar-area.one-line .link a { border-left: 1px solid #e7e7e7; font-weight: 500; margin-left: 13px; padding-left: 15px; text-transform: uppercase; } .top-bar-area.one-line.bg-dark .link a { border-left: 1px solid #ffffff; } .top-bar-area.one-line .link a:hover, .top-bar-area.one-line .link a:last-child:hover { color: #1cb9c8; } .top-bar-area.one-line .link a:last-child { color: #232323; } .top-bar-area.one-line.bg-dark .link a:last-child { color: #ffffff; } .top-bar-area.one-line .link a:first-child { border: medium none; padding-left: 0; } .icon { float:left; letter-spacing:2px; padding:10px; } .icon i{ font-size:35px; color:#000; } .info span{ font-size:18px; letter-spacing:2px; font-weight:600; } .info p{ font-size:18px; letter-spacing:2px; } .informations{ padding:0px 10px; border-left:1px solid #ccc; } /* Team member style */ .concern-tm-theme-4.style2 { padding-top: 80px; padding-bottom: 80px; } .concern-tm-theme-4.style2 .vt-team .team { position: relative; padding: 10px 10px 10px 10px; } .concern-tm-theme-4.style2 .vt-team .team:before { content: ""; width: 40px; height: 100%; position: absolute; top: 0; left: 0; background: #011627; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .concern-tm-theme-4.style2 .vt-team .team:after { content: ""; width: 40px; height: 100%; position: absolute; top: 0; right: 0; background: #011627; z-index: -1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .concern-tm-theme-4.style2 .vt-team:hover .team:before { width: 50%; } .concern-tm-theme-4.style2 .vt-team:hover .team:after { width: 50%; } .concern-tm-theme-4.style2 .vt-team .pic { position: relative; overflow: hidden; } .concern-tm-theme-4.style2 .vt-team .pic img { width: 100%; height: auto; } .concern-tm-theme-4.style2 .vt-team .social-links { padding: 0; margin: 0; list-style: none; width: 100%; position: absolute; bottom: 8px; left: 0; text-align: center; z-index: 1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .concern-tm-theme-4.style2 .vt-team .social-links li { display: inline-block; margin-right: 5px; } .concern-tm-theme-4.style2 .vt-team .social-links li a { display: block; width: 30px; height: 30px; line-height: 30px; font-size: 18px; color: #fff; border-radius: 0%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background-color: #d42121; } .concern-tm-theme-4.style2 .vt-team:hover .social-links li a { border-radius: 50%; } .concern-tm-theme-4.style2 .vt-team:hover .social-links li a:hover { background: #011627; } .concern-tm-theme-4.style2 .vt-team .team-info { padding: 20px; height: auto; color: #011627; text-align: center; position: relative; overflow: hidden; z-index: 1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background-color: #d42121; } @media (max-width: 991px) { .concern-tm-theme-4.style2 .vt-team .team-info { height: 150px; } } .concern-tm-theme-4.style2 .vt-team .team-info:before { content: ""; height: 100%; width: 0%; position: absolute; top: 0; left: 0%; background: #011627; z-index: -1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .concern-tm-theme-4.style2 .vt-team .team-info:after { content: ""; width: 0%; height: 100%; position: absolute; top: 0; right: 0%; background: #011627; z-index: -1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .concern-tm-theme-4.style2 .vt-team:hover .team-info:before { width: 50%; } .concern-tm-theme-4.style2 .vt-team:hover .team-info:after { width: 50%; } .concern-tm-theme-4.style2 .vt-team .title { font-size: 20px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; margin-top: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .concern-tm-theme-4.style2 .vt-team:hover .title { color: #fff; } .concern-tm-theme-4.style2 .vt-team .post { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .concern-tm-theme-4.style2 .vt-team .team-info, .concern-tm-theme-4.style2 .vt-team .post { color: #fff; } .concern-tm-theme-4.style2 .vt-team .description { font-size: 14px; line-height: 22px; overflow: hidden; max-height: 63px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: -o-ellipsis-lastline; }