.page-data { width: 100%; overflow: hidden; }
.left-data { width:45%; float: left; position:fixed; height: 100%; }
.leftInnerdata { display: none; height: 100%; position: relative; }
.leftInnerdata.active { display: block; }
.page-data .left-data .inner-project-name { }
.page-data .left-data .leftInnerdata .inner-project-name h2 { bottom: 40px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-style: italic; font-size: 44px; margin-top: 0; color: #ffffff; left: -163px; padding-top:28%; position: relative; }
.page-data .left-data .leftInnerdata .inner-project-name h2:before { content: ""; border-bottom:1px solid #fff; position: absolute; left: 0; bottom:-8px; display: block; width: 90px; height: 2px; }
.page-data .left-data .leftInnerdata .inner-project-name h2 a{ color:#fff;}
.page-data .left-data .left-para { margin-left: 46px; padding-bottom: 16%; top: 120px; opacity: 0; position: relative; color: #fff; width: 274px; }
.page-data .left-data .left-para p { font-size: 16px; color: #ffffff; line-height: 27px; letter-spacing: 1px; }
.page-data .left-data .left-para .view-case-study { padding-top:35px; }
.page-data .left-data .left-para .view-case-study { background: url(../images/eye-sprite.png) no-repeat left bottom 0; width: 64px; height: 17px; overflow: hidden; transition: 0.2s; }
.page-data .left-data .left-para .view-case-study:hover { background: url(../images/eye-sprite1.png) no-repeat; transition: 0.2s; }
.page-data .left-data .left-para .view-case-study a { font-size: 14px; color: #ffffff; font-family: 'open_sanssemibold'; display: inline-block; padding: 10px 0 0 30px; }
/*page-data-right
========================================================================*/
.right-data { width: 55%; float:right; background: #f2f2f2; position: fixed; height: 100%; right: 0; /*overflow: scroll;*/ top: 0 !important; }
.right-data:after { content: " "; background: #fff; left: 0; top: 0; height: 100%; position: absolute; width: 10%; z-index: 0; }
.right-data .inner-right { padding-top: 60px; text-align: center; }
.overflowportfollio { overflow: auto; height: 400px; margin-top: 40px; }
.right-data .inner-right select { padding: 15px 15px; width:60%; border-radius: 25px 25px 0 0; margin-left: -100px; margin-top: 60px; font-size: 16px; letter-spacing: 2px; background: url(../images/down-arrow.png)no-repeat top 19px right 10px; }
.right-data .inner-right select option { border:0px solid #333; border-radius:10%; margin:20px 0 10px; border:1px solid green; padding:25px 15px !important; }
.right-data .inner-right select option:nth-child(odd) { background-color: #f3f3f3;  padding:25px 15px;}
.right-data .inner-right select option:nth-child(even) {background-color: #fff;  padding:25px 15px;}
.right-data .inner-right select option:not(:first-child):not(:last-child) > option {border-radius: 0; height: 100%;}
.right-data .project-list ul { margin-top: 30px; list-style: none; padding: 0; }
.right-data .project-list ul li { z-index: 9; position: relative; }
.right-data .project-list ul li a { padding:20px 0; display: block; font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 22px; text-decoration: none; }
.right-data .project-list ul li a:hover, .right-data .project-list ul li.current a { background:rgba(234, 234, 234, 0.73); }
.right-data .project-list ul li a .pro-no { font-size: 14px; color: #000000; position: relative; display: inline-block; vertical-align: middle; transform-origin: center; transform: rotate(-90deg) translateX(0em); padding: 0 30px; }
.right-data .project-list ul li a .pro-name { font-size: 22px; color: #000000; padding-left: 120px; position: relative; font-style: italic; }
.right-data .project-list ul li a .pro-name:before { content: " "; background: url(../images/arro.png) no-repeat; width:45px; height: 10px; position: absolute; top: 14px; left: 40px; transition: 0.3s; }
.right-data .project-list ul li a:hover .pro-name:before, .right-data .project-list ul li.current a .pro-name:before { width:60px; transition: 0.3s; }
#efficloud, #vilberry { position: relative; }
#efficloud:before { background: url(../images/text-e.png)no-repeat; position: absolute; content: ''; display: block; z-index: 5; right: 0; bottom: 13%; width: 192px; height: 332px; }
#vilberry:before { background: url(../images/text-v.png)no-repeat; position: absolute; content: ''; display: block; z-index: 5; right: 0; bottom: 13%; width: 192px; height: 332px; }
.black.casetext { width: 70px; height: 70px; border-radius: 50%; display: inline-block; float: left; text-align: center; background: #333; }
.black.casetext .eye { margin-left:5px !important; width: 60px !important; height: 60px !important; margin-top: 5px; }
 @font-face {
 font-family: 'open_sansregular';
 src: url('fonts/opensans-regular-webfont.html');
 src: url('fonts/opensans-regular-webfontd41d.html?#iefix') format('embedded-opentype'), url('fonts/opensans-regular-webfont-2.html') format('woff'), url('fonts/opensans-regular-webfont-3.html') format('truetype'), url('fonts/opensans-regular-webfont-4.html#open_sansregular') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'open_sansbold_italic';
 src: url('fonts/opensans-bolditalic-webfont.html');
 src: url('fonts/opensans-bolditalic-webfontd41d.html?#iefix') format('embedded-opentype'), url('fonts/opensans-bolditalic-webfont-2.html') format('woff'), url('fonts/opensans-bolditalic-webfont-3.html') format('truetype'), url('fonts/opensans-bolditalic-webfont-4.html#open_sansbold_italic') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'open_sanssemibold';
 src: url('fonts/opensans-semibold-webfont.html');
 src: url('fonts/opensans-semibold-webfontd41d.html?#iefix') format('embedded-opentype'), url('fonts/opensans-semibold-webfont-2.html') format('woff'), url('fonts/opensans-semibold-webfont-3.html') format('truetype'), url('fonts/opensans-semibold-webfont-4.html#open_sanssemibold') format('svg');
 font-weight: normal;
 font-style: normal;
}
.inner-project-name { position: relative; }
.ikfimgholdportf { position: absolute; display: block; z-index: 5; right: -60px; top: 50%; width: 400px; height: 332px; transform: translateY(-50%); transform: -webkit-translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%);}
.ikfimgholdportf img { width: 100%; }
@media only screen and (max-width: 1080px) {
.ikfimgholdportf {
 width:50% !important;
}
}
 @media only screen and (max-width: 768px) {
.ikfimgholdportf {
 width:50% !important;
}
.page-data .left-data .leftInnerdata .inner-project-name h2 {
padding-top: 60%;
left:20px !important;
}
.right-data .project-list ul li a .pro-name:before {
left:0px;
}
.right-data .project-list ul li a .pro-name {
padding-left:70px;
font-size:20px;
}
}
@media only screen and (max-width: 767px) {
.page-data .left-data .leftInnerdata .inner-project-name h2 {padding-top:36%; font-size:32px;}
.right-data .inner-right select{ margin-top:20px; padding:10px 15px;}
.right-data .project-list ul{ margin-top:0}
.right-data .project-list ul li a{ padding:10px 0}
.overflowportfollio{ margin-top:10px;}
.page-data .left-data .left-para img{ display:none}
.overflowportfollio{ height:230px;}
}

@media only screen and (max-width: 568px) {
	.right-data .inner-right select{letter-spacing:0px}
	.page-data .left-data .leftInnerdata .inner-project-name h2 {padding-top:48%; font-size:24px;}
	.page-data .left-data .left-para{ margin-left:20px;}
	.right-data .inner-right select {padding: 10px 25px 10px 25px !important; }
}
@media only screen and (max-width:427px) {
.overflowportfollio{ height:300px;}
.right-data .inner-right select{ margin:20px !important}
.right-data .project-list ul li a .pro-name{ font-size:17px;padding-left:0px;}
.black.casetext{display:block; float:none;}
.keepviewaside{margin-top:0px;}
.right-data::after { width:1%;}
.right-data .project-list ul li a .pro-no{ padding:0 10px;}
.page-data .left-data .leftInnerdata .inner-project-name h2 {padding-top:80%; padding-right: 1px;}
.right-data .project-list ul li a .pro-name:before {top:20px;}
}
@media only screen and (max-width:400px) {
.overflowportfollio{ height:300px;}
}

@media only screen and (max-width:320px) {
.page-data .left-data .leftInnerdata .inner-project-name h2 {padding-top:80%; padding-right: 14px;}
.single-cb_portfolios .mainhead h1{font-size: 35px !important;}
}