@charset "utf-8";html {
overflow-x: hidden;
padding: 0;
margin: 0
}
body {
overflow-x: hidden;
width: 100%;
font-family: open sans;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
word-wrap: break-word;
font-weight: 400;
background-color: #f6fbff;
color: #7d7789;
}
svg {
fill: currentcolor;
width: 15px;
height: 15px
}
img.svg {
width: 15px;
height: 15px
}
::-webkit-input-placeholder {
color: #aaa6b2
}
:-moz-placeholder {
color: #aaa6b2;
opacity: 1
}
::-moz-placeholder {
color: #aaa6b2;
opacity: 1
}
:-ms-input-placeholder {
color: #aaa6b2
}
::-ms-input-placeholder {
color: #aaa6b2
}
::placeholder {
color: #aaa6b2
}
body.dark::-webkit-input-placeholder {
color: #9e9ba3
}
body.dark:-moz-placeholder {
color: #9e9ba3;
opacity: 1
}
body.dark::-moz-placeholder {
color: #9e9ba3;
opacity: 1
}
body.dark:-ms-input-placeholder {
color: #9e9ba3
}
body.dark::-ms-input-placeholder {
color: #9e9ba3
}
body.dark::placeholder {
color: #9e9ba3
}
body::-webkit-scrollbar {
width: 11px
}
body {
scrollbar-width: thin;
scrollbar-color: #999 #fff
}
body:-webkit-scrollbar-track {
background: #fff
}
body::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 6px;
border: 3px solid #fff
}
body.dark::-webkit-scrollbar {
width: 11px
}
h1,h2,h3,h4,h5,h6 {
font-weight: 700;
line-height: 1.2;
font-family: poppins;
color: #333
}
h1 {
font-size: 45px
}
h2 {
font-size: 36px
}
h3 {
font-size: 30px
}
h4 {
font-size: 24px
}
h5 {
font-size: 20px
}
h6 {
font-size: 16px
}
.otb_all_wrap {
width: 100%;
min-height: 100vh;
clear: both;
float: left;
position: relative
}
.otb_all_wrap,.otb_all_wrap * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#preloader {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99999;
display: flex
}
#preloader:before,#preloader:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
z-index: -1;
background-color: #000;
-webkit-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s
}
#preloader:after {
left: auto;
right: 0
}
#preloader .loader_line {
margin: auto;
width: 1px;
height: 250px;
position: relative;
overflow: hidden;
-webkit-transition: all .8s ease 0s;
-o-transition: all .8s ease 0s;
transition: all .8s ease 0s
}
.loader_line:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 0%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #fff;
-webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
-o-animation: lineheight 1000ms ease-in-out 0s forwards;
animation: lineheight 1000ms ease-in-out 0s forwards
}
.loader_line:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #777;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: lineround 1200ms linear 0s infinite;
-o-animation: lineround 1200ms linear 0s infinite;
animation: lineround 1200ms linear 0s infinite;
animation-delay: 2000ms
}
@keyframes lineheight {
0% {
height: 0%
}
100% {
height: 100%
}
}
@keyframes lineround {
0% {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
100% {
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%)
}
}
.preloaded .loader_line:after {
opacity: 0
}
.preloaded .loader_line {
opacity: 0;
height: 100%!important
}
.preloaded:before,.preloaded:after {
-webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
-o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
animation: preloadedzero 300ms ease-in-out 500ms forwards
}
@keyframes preloadedzero {
0% {
width: 50%
}
100% {
width: 0%
}
}
.otb_header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
line-height: 70px;
background-color: #fff;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 70px
}
.otb_header .logo img {
min-height: 59px;
}
.otb_header .menu {
position: relative
}
.otb_header .menu ul {
margin: 0;
list-style-type: none
}
.otb_header .menu ul li {
margin: 0;
float: left
}
.otb_header .menu ul li a {
text-decoration: none;
color: #333;
font-family: poppins;
font-weight: 500;
padding: 0 30px;
display: inline-block;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_header .menu .ccc {
position: absolute;
bottom: 0;
width: 30px;
display: block;
top: 15px;
bottom: 15px;
background-color: #333;
z-index: -1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease
}
.otb_header .menu ul li.mleave.active a {
color: #333
}
.otb_header .menu ul li.active a {
color: #fff
}
.otb_header .menu ul li a:hover {
color: #fff
}
.otb_topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #fff;
z-index: 20;
display: none
}
.otb_topbar .topbar_inner {
width: 100%;
height: 100%;
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px
}
.otb_topbar .logo img {
max-height: 40px
}
.otb_topbar .hamburger {
padding: 0
}
.otb_topbar .hamburger-inner,.otb_topbar .hamburger-inner:after,.otb_topbar .hamburger-inner:before {
width: 30px;
height: 2px
}
.otb_topbar .trigger {
position: relative;
top: 5px
}
.otb_topbar .hamburger-box {
width: 30px
}
.otb_mobile_menu {
position: fixed;
top: 50px;
right: -200px;
height: 100vh;
width: 200px;
z-index: 15;
background-color: #fff;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_mobile_menu.opened {
right: 0
}
.otb_mobile_menu .inner {
position: relative;
width: 100%;
height: 100%;
text-align: right;
padding: 70px 20px 20px
}
.otb_mobile_menu .avatar {
width: 70px;
height: 70px;
position: relative;
float: right;
margin-bottom: 60px
}
.otb_mobile_menu .avatar .image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
.otb_mobile_menu .menu_list {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 50px
}
.otb_mobile_menu .menu_list ul {
margin: 0;
list-style-type: none
}
.otb_mobile_menu .menu_list ul li {
margin: 0 0 7px
}
.otb_mobile_menu .menu_list ul li a {
text-decoration: none;
color: #333;
font-family: poppins
}
.otb_mobile_menu .social {
width: 100%;
float: left;
margin-bottom: 5px
}
.otb_mobile_menu .social ul {
margin: 0;
list-style-type: none
}
.otb_mobile_menu .social ul li {
margin: 0 8px 0 0;
display: inline-block
}
.otb_mobile_menu .social ul li:last-child {
margin-right: 0
}
.otb_mobile_menu .social ul li a {
text-decoration: none;
color: #333
}
.otb_mobile_menu .copyright {
width: 100%;
float: left
}
.otb_mobile_menu .copyright p {
color: #333;
font-family: poppins
}
.otb_mainpart {
position: absolute;
top: 70px;
bottom: 70px;
left: 70px;
right: 70px;
overflow: hidden
}
.otb_mainpart .author_image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
z-index: 15
}
.otb_mainpart .author_image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
.otb_mainpart .main_content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60%
}
.otb_section {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.otb_section {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
z-index: 8;
transition: visibility 1s linear,opacity 0s linear;
-moz-transition: visibility 1s linear,opacity 0s linear;
-webkit-transition: visibility1s linear,opacity 0s linear;
-o-transition: visibility 1s linear,opacity 0s linear
}
.otb_section.animated {
opacity: 1;
visibility: visible;
z-index: 9
}
.otb_section.active {
opacity: 1;
visibility: visible;
z-index: 10
}
.otb_section.hidden {
opacity: 0;
visibility: hidden;
z-index: 9
}
.otb_section::-webkit-scrollbar {
width: 0
}
.otb_section .section_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
padding: 92px 100px 0
}
.otb_section .section_inner:before {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
width: 100px;
background-color: #f6fbff
}
.otb_home {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center
}
.otb_home .content {
padding-left: 100px
}
.otb_home .name {
font-size: 52px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 30px
}
.otb_home .line {
display: inline-block;
width: 70px;
height: 5px;
background-color: #333;
margin-bottom: 30px
}
.otb_home .job {
font-size: 25px;
margin-bottom: 35px;
font-weight: 300
}
.otb_home .job span {
color: #7d7789
}
.otb_home .job b {
font-weight: 600;
font-size: larger;
color: #333
}
.otb_button {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_button a {
text-decoration: none;
color: #fff;
display: inline-block;
background-color: #333;
padding: 13px 38px;
border: 2px solid #333;
font-family: poppins;
font-weight: 500;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_button button {
text-decoration: none;
color: #fff;
display: inline-block;
background-color: #333;
padding: 13px 38px;
border: 2px solid #333;
font-family: poppins;
font-weight: 500;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_button a:hover {
background-color: transparent;
color: #333
}
.otb_button button:hover {
background-color: transparent;
color: #333
}
.cd-headline.clip .cd-words-wrapper::after {
height: 70%;
top: 50%;
width: 2px;
transform: translateY(-50%);
background-color: #999
}
.cd-headline.loading-bar .cd-words-wrapper::after {
background: #333;
height: 2px
}
.otb_about {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_about .biography {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 87px
}
.otb_title {
width: 100%;
height: auto;
clear: both;
float: left;
overflow: hidden
}
.otb_title span {
display: inline-block;
position: relative;
font-family: poppins;
color: #333;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 8px
}
.otb_title span:after {
position: absolute;
content: "";
width: 5000px;
height: 1px;
background-color: #7d7789;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 30px
}
.otb_about .biography .wrapper {
width: 100%;
height: auto;
clear: both;
float: left;
display: flex;
justify-content: space-between;
margin-top: 55px
}
.otb_about .biography .left {
width: 40%
}
.otb_about .biography .left p {
margin-bottom: 15px
}
.otb_about .biography .left p:last-child {
margin-bottom: 0
}
.otb_about .biography .right {
width: 50%
}
.otb_about .biography .right ul {
margin: 0;
list-style-type: none
}
.otb_about .biography .right ul li {
margin: 0 0 8px;
width: 100%;
float: left
}
.otb_about .biography .right ul li:last-child {
margin-bottom: 0
}
.otb_about .biography .right ul li span {
display: inline-block
}
.otb_about .biography .right ul li .first {
min-width: 100px;
font-weight: 700
}
.otb_about .biography .right ul li a {
text-decoration: none;
color: #7d7789;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_about .biography .right ul li a:hover {
color: #333
}
.otb_about .services {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 87px
}
.otb_about .services .wrapper {
width: 100%;
height: auto;
clear: both;
display: flex;
justify-content: space-between
}
.otb_about .services .list {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 55px
}
.otb_about .services .service_list {
width: 40%
}
.otb_about .services .interests {
width: 50%
}
.otb_about .services .service_list ul,.otb_about .services .interests ul {
margin: 0;
list-style-type: none
}
.otb_about .services .service_list ul li,.otb_about .services .interests ul li {
margin: 0 0 8px;
width: 100%;
float: left;
position: relative;
padding-left: 25px
}
.otb_about .services .service_list ul li:last-child,.otb_about .services .interests ul li:last-child {
margin-bottom: 0
}
.otb_about .services .service_list ul li i,.otb_about .services .interests ul li i {
position: absolute;
left: -7px;
top: 50%;
transform: translateY(-50%)
}
.otb_about .skills {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 65px
}
.otb_about .skills .wrapper {
width: 100%;
height: auto;
clear: both;
display: flex;
justify-content: space-between
}
.otb_about .skills .programming {
width: 40%
}
.otb_about .skills .language {
width: 50%
}
.cavani_progress {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 55px
}
.progress_inner {
width: 100%;
margin-bottom: 25px
}
.progress_inner:last-child {
margin-bottom: 0
}
.progress_inner>span {
margin: 0 0 5px;
width: 100%;
display: block;
text-align: left
}
.progress_inner span.number {
float: right
}
.progress_inner .background {
background: rgba(0,0,0,.07);
width: 100%;
min-width: 100%;
position: relative;
height: 3px
}
.progress_inner .background .bar_in {
height: 100%;
background: #7d7789;
width: 0;
overflow: hidden
}
.progress_inner .background .bar {
width: 0;
height: 100%
}
.progress_inner .background .bar.open {
-webkit-animation: wow 2s cubic-bezier(.165,.84,.44,1);
-moz-animation: wow 2s cubic-bezier(.165,.84,.44,1);
animation: wow 2s cubic-bezier(.165,.84,.44,1);
width: 100%
}
@-webkit-keyframes wow {
0% {
width: 0%
}
100% {
width: 100%
}
}
@-moz-keyframes wow {
0% {
width: 0%
}
100% {
width: 100%
}
}
@keyframes wow {
0% {
width: 0%
}
100% {
width: 100%
}
}
.circular_progress_bar {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 62px
}
.circular_progress_bar ul {
margin: 0 0 0 -20px;
list-style-type: none
}
.circular_progress_bar ul li {
margin: 0 0 20px;
width: 33.3333%;
float: left;
padding-left: 20px
}
.circular_progress_bar .myCircle {
position: relative;
float: left
}
.circular_progress_bar .list_inner {
width: 100%;
position: relative;
text-align: center
}
.circular_progress_bar .list_inner:after {
content: '';
position: absolute;
width: 120px;
height: 120px;
border: 3px solid rgba(0,0,0,.07);
left: 0;
top: 0;
border-radius: 50%;
box-sizing: border-box;
z-index: -1
}
.circular_progress_bar .title {
width: 100%;
max-width: 120px;
float: left
}
.circular_progress_bar .number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.otb_about .resume {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 75px
}
.otb_about .resume .wrapper {
width: 100%;
height: auto;
clear: both;
display: flex;
justify-content: space-between
}
.otb_about .resume .list {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_about .resume .education {
width: 40%
}
.otb_about .resume .experience {
width: 50%
}
.otb_about .univ {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 55px
}
.otb_about .univ ul {
margin: 0;
list-style-type: none;
position: relative;
display: inline-block;
padding-top: 10px
}
.otb_about .univ ul:before {
content: "";
position: absolute;
width: 1px;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,.07)
}
.otb_about .univ ul li {
margin: 0;
width: 100%;
float: left;
position: relative;
padding-left: 20px;
padding-bottom: 45px
}
.otb_about .univ ul li:last-child {
padding-bottom: 0
}
.otb_about .univ ul li:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
background: #f6fbff;
border-radius: 100%;
border: solid 1px #ccc;
left: -9px;
top: 8px
}
.otb_about .univ ul li .list_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
position: relative
}
.otb_about .univ ul li .time {
width: 50%;
padding-right: 20px
}
.otb_about .univ ul li .time span {
display: inline-block;
padding: 5px 25px;
background-color: rgba(0,0,0,.05);
border-radius: 50px;
font-size: 14px;
white-space: nowrap
}
.otb_about .univ ul li .place {
width: 50%;
padding-left: 20px
}
.otb_about .univ ul li .place h3 {
font-size: 16px;
margin-bottom: 2px;
font-weight: 600
}
.otb_about .univ ul li .place span {
font-size: 14px
}
.otb_about .partners {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 92px
}
.otb_about .partners .list {
width: 100%;
float: left;
clear: both;
overflow: hidden;
border: 2px solid #e5edf4;
margin-top: 62px
}
.otb_about .partners .list ul {
margin: -2px -10px -2px -2px;
list-style-type: none;
padding-top: 2px;
float: left;
padding-left: 2px;
min-width: calc(100% + 12px)
}
.otb_about .partners .list ul li {
margin: 0;
float: left;
width: 25%;
border: 2px solid #e5edf4;
text-align: center;
height: 130px;
line-height: 130px;
position: relative;
margin-top: -2px;
margin-left: -2px;
overflow: hidden
}
.otb_about .partners .list ul li img {
max-width: 65%;
max-height: 65px
}
.otb_about .partners .list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
opacity: .5;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_about .partners .list ul li .list_inner:hover {
opacity: 1
}
.otb_full_link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5
}
.otb_about .testimonials {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 90px
}
.otb_about .testimonials .list {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 75px
}
.otb_about .testimonials .list ul {
margin: 0;
list-style-type: none;
cursor: e-resize
}
.otb_about .testimonials .list ul li {
margin: 0
}
.otb_about .testimonials .list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative
}
.otb_about .testimonials .list ul li .text {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
border: 2px solid #e5edf4;
padding: 40px;
margin-bottom: 30px
}
.otb_about .testimonials .list ul li .text:before {
position: absolute;
content: "";
height: 0;
width: 0;
top: 100%;
left: 50px;
border: solid transparent;
border-top-color: #e5edf4;
border-width: 18px 18px 0 0
}
.otb_about .testimonials .list ul li .text:after {
position: absolute;
content: "";
top: 100%;
left: 50px;
height: 0;
width: 0;
border: solid transparent;
border-top-color: #f6fbff;
border-width: 14px 13px 0 0;
margin-left: 2px
}
.otb_about .testimonials .list ul li .text i {
position: absolute;
z-index: 1;
font-size: 30px;
top: -29px;
left: 50px
}
.otb_about .testimonials .details {
width: 100%;
height: auto;
clear: both;
float: left;
display: flex;
align-items: center;
padding-left: 20px
}
.otb_about .testimonials .details .image {
position: relative;
width: 60px;
height: 60px
}
.otb_about .testimonials .details .image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 100%
}
.otb_about .testimonials .details .info {
padding-left: 20px
}
.otb_about .testimonials .details .info h3 {
font-size: 16px;
margin-bottom: 2px;
font-weight: 600
}
.otb_about .testimonials .details .info span {
font-size: 14px
}
.otb_about .testimonials .owl-carousel .owl-stage-outer {
overflow: hidden
}
.otb_about .testimonials .owl-carousel .owl-stage-outer {
overflow: visible
}
.otb_about .testimonials .owl-item.active {
opacity: 1
}
.otb_about .testimonials .owl-item {
opacity: 0
}
/* Prices */
.otb_prices {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 70px
}
.otb_prices .wrapper {
width: 100%;
height: auto;
margin-top: 55px;
}
.otb_prices .wrapper p {
margin-bottom: 2em;
}
.otb_prices .wrapper ul {
margin: 2em;
list-style-type: none;
cursor: e-resize
}
/* Portfolio remove*/
.otb_portfolio {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 70px
}
.otb_portfolio .portfolio_filter {
width: 100%;
height: auto;
clear: both;
float: left;
text-align: left;
padding: 55px 0 22px
}
.otb_portfolio .portfolio_filter ul {
margin: 0;
list-style-type: none
}
.otb_portfolio .portfolio_filter ul li {
margin: 0 40px 0 0;
display: inline-block
}
.otb_portfolio .portfolio_filter ul li:last-child {
margin-right: 0
}
.otb_portfolio .portfolio_filter ul li a {
text-decoration: none;
color: #333;
font-family: poppins;
font-weight: 500;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_portfolio .portfolio_list {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_portfolio .portfolio_list ul {
margin: 0 0 0 -30px;
list-style-type: none
}
.otb_portfolio .portfolio_list ul li {
margin: 0 0 30px;
width: 33.3333%;
float: left;
padding-left: 30px
}
.otb_portfolio .portfolio_list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
overflow: hidden
}
.otb_portfolio .portfolio_list ul li .image {
position: relative
}
.otb_portfolio .portfolio_list ul li .image img {
position: relative;
opacity: 0;
min-width: 100%
}
.otb_portfolio .portfolio_list ul li .image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_portfolio .portfolio_list ul li .list_inner:hover .image .main {
filter: blur(2px)
}
.otb_portfolio .portfolio_list ul li .icon {
position: absolute;
z-index: 3;
top: -55px;
left: 20px;
display: inline-block;
border-radius: 100%;
background-color: #fff;
width: 50px;
height: 50px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_portfolio .portfolio_list ul li .list_inner:hover .icon {
top: 20px
}
.otb_portfolio .portfolio_list ul li .icon i {
color: #333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px
}
.otb_portfolio .portfolio_list ul li .details {
position: absolute;
bottom: -100px;
left: 20px;
right: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.1);
z-index: 3;
padding: 15px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_portfolio .portfolio_list ul li .list_inner:hover .details {
bottom: 20px
}
.otb_portfolio .portfolio_list ul li .details h3 {
font-size: 16px;
margin-bottom: 2px;
font-weight: 600
}
.otb_portfolio .portfolio_list ul li .details span {
font-size: 14px
}
.otb_modalbox {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 20;
background-color: rgba(0,0,0,.8);
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_modalbox.opened {
opacity: 1;
visibility: visible
}
.otb_modalbox .box_inner {
position: absolute;
top: 70px;
bottom: 70px;
width: 968px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
z-index: 1;
opacity: 0;
visibility: hidden;
margin-top: -20px;
transition-delay: .3s;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_modalbox.opened .box_inner {
opacity: 1;
visibility: visible;
margin-top: 0
}
.otb_modalbox .close {
position: fixed;
left: 100%;
top: 0;
margin-left: 20px;
z-index: 111111
}
.otb_modalbox .close a {
text-decoration: none;
color: #fff
}
.otb_modalbox .close .svg {
width: 50px;
height: 50px
}
.otb_modalbox .description_wrap {
position: relative;
width: 100%;
height: 100%;
float: left;
overflow: hidden;
padding: 50px;
overflow-y: scroll
}
.otb_modalbox .description_wrap::-webkit-scrollbar {
width: 11px
}
.aali_tm_modalbox .description_wrap {
scrollbar-width: thin;
scrollbar-color: #dfe2e7 #fff
}
.otb_modalbox .description_wrap:-webkit-scrollbar-track {
background: #fff
}
.otb_modalbox .description_wrap::-webkit-scrollbar-thumb {
background-color: #dfe2e7;
border-radius: 10px;
border: 3px solid #fff
}
.otb_portfolio .hidden_content {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -11
}
.otb_modalbox .popup_details {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_modalbox .popup_details .top_image {
position: relative;
overflow: hidden;
margin-bottom: 37px
}
.otb_modalbox .popup_details .top_image img {
position: relative;
min-width: 100%;
opacity: 0
}
.otb_modalbox .popup_details .top_image .main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat
}
.otb_modalbox .portfolio_main_title {
width: 100%;
float: left;
margin-bottom: 20px
}
.otb_modalbox .portfolio_main_title span {
display: inline-block
}
.otb_modalbox .portfolio_main_title h3 {
font-weight: 700;
font-size: 22px;
margin-bottom: 5px
}
.otb_modalbox .main_details {
width: 100%;
height: auto;
clear: both;
display: flex;
margin-bottom: 60px
}
.otb_modalbox .main_details .textbox {
width: 70%;
padding-right: 40px
}
.otb_modalbox .main_details .textbox p {
margin-bottom: 15px
}
.otb_modalbox .main_details .textbox p:last-child {
margin-bottom: 0
}
.otb_modalbox .main_details .detailbox {
width: 30%;
padding-left: 40px
}
.otb_modalbox .main_details .detailbox>ul {
margin: 0;
list-style-type: none
}
.otb_modalbox .main_details .detailbox>ul>li {
margin: 0 0 10px;
width: 100%;
float: left
}
.otb_modalbox .main_details .detailbox>ul>li:last-child {
margin-bottom: 0
}
.otb_modalbox .main_details .detailbox .first {
font-weight: 700;
display: block
}
.otb_modalbox .main_details .detailbox span a {
text-decoration: none;
color: #7d7789
}
.otb_modalbox .main_details .detailbox .share {
margin: 0;
list-style-type: none;
position: relative;
top: 7px
}
.otb_modalbox .main_details .detailbox .share li {
margin: 0 13px 0 0;
display: inline-block
}
.otb_modalbox .main_details .detailbox .share li:last-child {
margin-right: 0
}
.otb_modalbox .main_details .detailbox .share li a {
text-decoration: none;
color: #7d7789
}
.otb_modalbox .additional_images {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_modalbox .additional_images ul {
margin: 0 0 0 -30px;
list-style-type: none
}
.otb_modalbox .additional_images ul li {
margin: 0 0 30px;
float: left;
width: 50%;
padding-left: 30px
}
.otb_modalbox .additional_images ul li:nth-child(3n-2) {
width: 100%
}
.otb_modalbox .additional_images ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative
}
.otb_modalbox .additional_images ul li .my_image {
position: relative
}
.otb_modalbox .additional_images ul li .my_image img {
opacity: 0;
min-width: 100%
}
.otb_modalbox .additional_images ul li .my_image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
.otb_news {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 70px
}
.otb_news .news_list {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 62px
}
.otb_news .news_list ul {
margin: 0 0 0 -30px;
list-style-type: none
}
.otb_news .news_list ul li {
margin: 0 0 30px;
width: 33.3333%;
float: left;
padding-left: 30px
}
.otb_news .news_list ul li .list_inner {
position: relative;
width: 100%;
height: auto;
clear: both;
float: left;
border: 1px solid rgba(0,0,0,.07)
}
.otb_news .news_list ul li .image {
position: relative;
overflow: hidden
}
.otb_news .news_list ul li .image img {
position: relative;
min-width: 100%;
opacity: 0
}
.otb_news .news_list ul li .image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: scale(1) translateZ(0);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_news .news_list ul li .list_inner .image:hover .main {
transform: scale(1.1) translateZ(0)
}
.otb_news .news_list ul li .details {
width: 100%;
height: auto;
clear: both;
float: left;
padding: 19px 30px 3px
}
.otb_news .news_list ul li .metabox {
width: 100%;
float: left;
margin-bottom: 20px
}
.otb_news .news_list ul li .metabox .info {
width: 100%;
float: left;
margin-bottom: 5px
}
.otb_news .news_list ul li .metabox .info span {
position: relative;
padding-left: 25px;
font-size: 14px
}
.otb_news .news_list ul li .metabox .info span:first-child {
padding-left: 0
}
.otb_news .news_list ul li .metabox .info span:before {
position: relative;
content: "|";
color: #7d7789;
right: 14px;
font-size: 12px;
top: -2px
}
.otb_news .news_list ul li .metabox .info span:first-child:before {
display: none
}
.otb_news .news_list ul li .metabox a {
text-decoration: none;
color: #7d7789;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_news .news_list ul li .metabox a:hover {
color: #333
}
.otb_news .news_list ul li .metabox .title h3 {
font-size: 16px;
font-weight: 600;
line-height: 1.4
}
.otb_news .news_list ul li .metabox .title a {
text-decoration: none;
display: inline-block;
color: #333
}
.otb_news .news_hidden_details {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -11
}
.otb_modalbox .news_popup_informations {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_modalbox .news_popup_informations .image {
position: relative;
margin-bottom: 37px
}
.otb_modalbox .news_popup_informations .image img {
position: relative;
opacity: 0;
min-width: 100%
}
.otb_modalbox .news_popup_informations .image .main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
.otb_modalbox .news_popup_informations .details {
width: 100%;
float: left;
margin-bottom: 20px
}
.otb_modalbox .news_popup_informations .details span {
display: inline-block;
margin-bottom: 5px
}
.otb_modalbox .news_popup_informations .details h3 {
font-weight: 700;
font-size: 22px
}
.otb_modalbox .news_popup_informations .text {
width: 100%;
float: left
}
.otb_modalbox .news_popup_informations .text p {
margin-bottom: 15px
}
.otb_modalbox .news_popup_informations .text p:last-child {
margin-bottom: 0
}
.otb_contact {
width: 100%;
height: auto;
clear: both;
float: left;
margin-bottom: 100px
}
.otb_contact .short_info {
width: 100%;
height: auto;
clear: both;
float: left;
margin-top: 62px
}
.otb_contact .short_info ul {
margin: 0 0 0 -30px;
list-style-type: none
}
.otb_contact .short_info ul li {
margin: 0 0 30px;
width: 33.3333%;
float: left;
padding-left: 30px
}
.otb_contact .short_info ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
border: 1px solid rgba(0,0,0,.07);
text-align: center;
padding: 32px 25px
}
.otb_contact .short_info ul li .list_inner span {
display: block
}
.otb_contact .short_info ul li .list_inner i {
font-size: 20px;
margin-bottom: 5px;
display: inline-block;
color: #333
}
.otb_contact .short_info ul li .list_inner a {
text-decoration: none;
color: #7d7789;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease
}
.otb_contact .short_info ul li .list_inner a:hover {
color: #333
}
.otb_contact .form {
width: 100%;
height: auto;
clear: both;
display: flex
}
.otb_contact .form .left {
width: 50%;
padding-right: 15px
}
.otb_contact .form .fields {
width: 100%;
height: auto;
clear: both;
float: left
}
.otb_contact .form .fields .first {
width: 100%;
float: left
}
.otb_contact .form .fields ul {
margin: 0;
list-style-type: none
}
.otb_contact .form .fields ul li {
width: 100%;
margin: 0 0 30px;
float: left
}
.otb_contact .form .fields ul li input {
width: 100%;
border: 1px solid rgba(0,0,0,.07);
background-color: transparent
}
.otb_contact .form .fields ul li input:focus {
outline: none;
border: 1px solid rgba(0,0,0,.2)
}
.otb_contact .form .fields .last textarea {
width: 100%;
border: 1px solid rgba(0,0,0,.07);
height: 120px;
resize: none;
margin-bottom: 20px;
background-color: transparent
}
.otb_contact .form .fields .last textarea:focus {
outline: none;
border: 1px solid rgba(0,0,0,.2)
}
.otb_contact .form .empty_notice {
color: #f52225;
margin-bottom: 7px;
display: none;
text-align: left;
font-weight: 500
}
.otb_contact .form .contact_error {
color: #f52225;
text-align: left;
font-weight: 500
}
.otb_contact .form .returnmessage {
color: #3a00ff;
text-align: left;
font-weight: 500
}
.otb_contact .form .right {
width: 50%;
padding-left: 15px;
position: relative
}
.otb_contact .form .map_wrap .map {
min-height: 355px;
width: 100%;
filter: grayscale(1)
}
.otb_footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background-color: #fff;
z-index: 10;
line-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 70px
}
.otb_footer .copyright p {
color: #333;
font-family: poppins
}
.otb_footer .social ul {
margin: 0;
list-style-type: none
}
.otb_footer .social ul li {
margin: 0 15px 0 0;
display: inline-block
}
.otb_footer .social ul li:last-child {
margin-right: 0
}
.otb_footer .social ul li a {
text-decoration: none;
color: #333
}
.otb_left_border {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 70px;
background-color: #fff;
z-index: 10
}
.otb_right_border {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 70px;
background-color: #fff;
z-index: 10
}
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden
}
.cursor-inner {
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
z-index: 100;
background-color: #333;
-webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;
transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out
}
.cursor-inner.cursor-hover {
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
background-color: #333;
opacity: .3
}
.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border: 2px solid #333;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 100;
opacity: .5;
-webkit-transition: all .08s ease-out;
transition: all .08s ease-out
}
.cursor-outer.cursor-hover {
opacity: 0
}
.otb_all_wrap[data-magic-cursor=hide] .mouse-cursor {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1111
}
.otb_mainpart .author_image .glitch_wrap {
position: relative;
width: 100%;
height: 100%;
float: left;
overflow: hidden
}
.otb_mainpart .author_image .particle_wrapper {
position: relative;
float: left;
width: 100%;
height: 100%
}
#particles-js {
width: 100%;
height: 100%;
position: relative;
z-index: 2
}
.otb_intro {
width: 100%;
height: auto;
clear: both;
float: left;
padding-bottom: 50px
}
.otb_intro .main_title {
width: 100%;
height: auto;
clear: both;
float: left;
text-align: center;
padding: 100px 0
}
.otb_intro .main_title img {
max-width: 200px;
margin-bottom: 20px
}
.otb_intro .main_title p {
font-weight: 500;
font-size: 18px
}
.otb_intro .demo_list {
width: 100%;
max-width: 1000px;
clear: both;
margin: 0 auto;
padding: 0 20px
}
.otb_intro .demo_list ul {
margin: 0 0 0 -50px;
list-style-type: none
}
.otb_intro .demo_list ul li {
margin: 0 0 50px;
float: left;
width: 50%;
padding-left: 50px
}
.otb_intro .demo_list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
text-align: center;
top: 0;
transition: all .3s ease
}
.otb_intro .demo_list ul li .list_inner:hover {
top: -5px
}
.otb_intro .demo_list ul li img {
box-shadow: 0 0 10px rgba(0,0,0,.15);
margin-bottom: 20px
}
.otb_intro .demo_list ul li h3 {
font-size: 18px
}
.intro_copyright {
width: 100%;
height: auto;
float: left;
text-align: center;
padding: 20px 0;
background-color: #333
}
.intro_copyright p {
color: #fff;
font-family: poppins
}
@media(max-width: 1400px) {
body {
font-size:15px
}
.otb_header .logo img {
max-height: 64px
}
.otb_mainpart .author_image {
width: 35%
}
.otb_mainpart .main_content {
width: 65%
}
.otb_section .section_inner:before {
width: 50px
}
.otb_title span {
letter-spacing: 7px
}
.otb_title span:after {
margin-left: 25px
}
.otb_header {
height: 60px;
line-height: 60px;
padding: 0 60px
}
.otb_footer {
height: 60px;
line-height: 60px;
padding: 0 60px
}
.otb_left_border {
width: 60px
}
.otb_right_border {
width: 60px
}
.otb_mainpart {
top: 60px;
left: 60px;
right: 60px;
bottom: 60px
}
.otb_footer .social ul li {
margin-right: 10px
}
.otb_header .menu ul li a {
padding: 0 22px
}
.otb_home .content {
padding-left: 50px
}
.otb_home .name {
font-size: 55px;
margin-bottom: 25px
}
.otb_home .line {
width: 60px;
height: 4px;
margin-bottom: 25px
}
.otb_home .job {
font-size: 23px;
margin-bottom: 30px
}
.otb_button a {
padding: 13px 32px
}
.otb_button button {
padding: 13px 32px
}
.otb_section .section_inner {
padding: 95px 50px 0
}
.circular_progress_bar .list_inner:after {
width: 100px;
height: 100px
}
.circular_progress_bar .title {
max-width: 100px
}
.progress_inner {
margin-bottom: 18px
}
.otb_about .univ ul li .time span {
padding: 3px 12px
}
.otb_about .univ ul li .place {
padding-left: 0
}
.otb_portfolio .portfolio_filter ul li {
margin-right: 30px
}
.otb_about .testimonials .list ul li .text {
padding: 30px
}
.otb_news .news_list ul li .details {
padding: 15px 15px 0
}
.otb_news .news_list ul li .metabox .info span {
font-size: 13px;
padding-left: 20px
}
.otb_news .news_list ul li .metabox .info span:before {
font-size: 11px;
right: 11px
}
.otb_contact .short_info ul li .list_inner {
padding: 20px 10px
}
.otb_modalbox .box_inner {
width: 750px
}
.otb_modalbox .description_wrap {
padding: 30px
}
.otb_modalbox .close .svg {
width: 40px;
height: 40px
}
}
@media(max-width: 1040px) {
.mouse-cursor {
display:none
}
#preloader {
display: none
}
.otb_topbar {
display: block
}
.otb_header {
display: none
}
.otb_footer {
display: none
}
.otb_left_border {
display: none
}
.otb_right_border {
display: none
}
.otb_section .section_inner:before {
width: 20px
}
.otb_mainpart .author_image {
display: none
}
.otb_mainpart {
top: 55px;
left: 0;
right: 0;
bottom: 0
}
.otb_mainpart .main_content {
width: 100%
}
.otb_home .content {
padding: 0 20px
}
.otb_home .name {
font-size: 50px
}
.otb_home .job {
font-size: 22px
}
.otb_about .biography .wrapper {
flex-direction: column;
align-items: baseline
}
.otb_about .biography .left {
width: 100%;
margin-bottom: 55px
}
.otb_about .biography .right {
width: 100%
}
.otb_about .services .wrapper {
flex-direction: column;
align-items: baseline
}
.otb_about .services .service_list {
width: 100%;
margin-bottom: 55px
}
.otb_about .services .interests {
width: 100%
}
.otb_section .section_inner {
padding: 57px 20px 0
}
.otb_about .skills .wrapper {
flex-direction: column;
align-items: baseline
}
.otb_about .skills .programming {
width: 100%;
margin-bottom: 60px
}
.otb_about .skills .language {
width: 100%
}
.circular_progress_bar .title {
float: none
}
.otb_about .resume .wrapper {
flex-direction: column;
align-items: baseline
}
.otb_about .resume .education {
width: 100%;
margin-bottom: 60px
}
.otb_about .resume .experience {
width: 100%
}
.otb_portfolio .portfolio_list ul li {
width: 50%
}
.otb_news .news_list ul li {
width: 50%
}
.otb_contact .short_info ul {
margin: 0
}
.otb_contact .short_info ul li {
width: 100%;
padding-left: 0
}
.otb_contact .form {
flex-direction: column;
align-items: baseline
}
.otb_contact .form .left {
width: 100%;
padding: 0;
margin-bottom: 30px
}
.otb_contact .form .right {
width: 100%;
padding: 0
}
.otb_modalbox .box_inner {
width: 550px
}
.otb_modalbox .description_wrap {
padding: 20px
}
.otb_modalbox .main_details {
flex-direction: column;
align-items: baseline
}
.otb_modalbox .main_details .textbox {
width: 100%;
padding: 0;
margin-bottom: 30px
}
.otb_modalbox .main_details .detailbox {
width: 100%;
padding: 0
}
.otb_modalbox .additional_images ul {
margin: 0
}
.otb_modalbox .additional_images ul li {
width: 100%;
padding-left: 0
}
.otb_modalbox .portfolio_main_title h3 {
font-size: 20px
}
.otb_modalbox .close .svg {
width: 35px;
height: 35px
}
.otb_modalbox .news_popup_informations .details h3 {
font-size: 20px
}
.otb_intro .demo_list ul {
margin: 0
}
.otb_intro .demo_list ul li {
width: 100%;
padding-left: 0
}
}
@media(max-width: 768px) {
.otb_home .name {
font-size:40px
}
.otb_home .job {
font-size: 20px
}
.otb_home .line {
height: 3px;
width: 40px
}
.otb_button a {
padding: 10px 28px
}
.otb_button button {
padding: 10px 28px
}
.circular_progress_bar .list_inner:after {
width: 80px;
height: 80px
}
.circular_progress_bar .title {
max-width: 80px
}
.otb_about .partners .list ul li {
width: 50%
}
.otb_portfolio .portfolio_list ul {
margin: 0
}
.otb_portfolio .portfolio_list ul li {
width: 100%;
padding-left: 0
}
.otb_news .news_list ul {
margin: 0
}
.otb_news .news_list ul li {
width: 100%;
padding-left: 0
}
.otb_news .news_list ul li .details {
padding: 15px 20px 0
}
.otb_title span {
letter-spacing: 4px
}
.otb_title span:after {
margin-left: 15px
}
.otb_modalbox .box_inner {
width: 300px;
top: 100px;
bottom: 40px
}
.otb_modalbox .close {
margin-left: -25px;
top: -35px
}
.otb_modalbox .close .svg {
width: 25px;
height: 25px
}
}