Current File : //proc/self/root/home/itiffy/public_html/public/css/portfolio-slider.css |
@charset "utf-8";
/* CSS Document */
/*------------------------------------------------------------------*/
body, html {
height: 100%;
}
.wrapper {
height: 100%;
width: 2500px;
}
.homeContHolder {
float: left;
height: 100%;
background: #CCCCCC;
overflow: hidden;
position: relative;
}
.column2 {
background: #FFF;
height: 100%;
width: 75%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.column3 {
height: 100%;
width: 25%;
position: absolute;
top: 0;
left:50% !important;
overflow: hidden;
position: relative;
z-index: 2;
}
.column4 {
background: #00b5e0;
height: 100%;
width: 25%;
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.homeproductDetails {
height: 100%;
position: absolute;
top: 0;
z-index: 4;
}
.homeproductDetailsL {
float: left;
width: 75%;
background: url(../images/contBg.png) repeat-y 100% 0;
height: 100% !important;
position: relative;
}
.homeproductDetailsR {
float: left;
width: 25%;
height: 100%;
}
.sb {
position: absolute;
left: -60px;
top: 0;
background: #cf1218;
z-index: 2;
width: 60px;
height: 100%;
display: none;
}
.sbClose {
position: absolute;
left: 75%;
margin-left: -60px;
bottom: 0;
background: #a91217 url(../images/mCSB_buttons.png) no-repeat 0 100%;
z-index: 5;
width: 60px;
height: 60px;
display: none;
border-top: 1px solid #cf1218;
text-indent: -9999px;
cursor: pointer;
}
.sbClose:hover {
opacity: 0.75;
filter: "alpha(opacity=75)";
-ms-filter: "alpha(opacity=75)";
}
.projectList {padding:5px 15px 5px 15px;}
.projectList li {
position: relative;
cursor: pointer;
overflow: hidden;
height:150px !important;
padding:5px;
margin:10px 0;
list-style:none !important;
}
.projectList li div {
width: 100%;
overflow: hidden;
position: relative;
z-index: 2;
height:140px !important;
}
.projectList li div img {
position: absolute;
left: 0;
top: 0 !important;
right: 0;
bottom: 0;
margin: 0 auto;
z-index: 1;
}
.projectList li div b {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.projectList li h3 {
width: 40%;
padding: 12px 5%;
float: left;
font-size: 11px;
color: #FFF;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
line-height: 15px;
position: relative;
z-index: 2;
}
.projectList li h3 span {
display: block;
padding-top: 3px;
color: #666666;
font-weight: 300;
}
.projectList li:hover h3 span {
color: #FFF;
}
.projectList li strong {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 0;
background: #009bc0;
height: 100%;
}
.projectList li.active div b {
background: none;
}
.projectList li.active h3 span {
color: #FFF;
}
.projectList li.active strong {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100% !important;
height: 100%;
}
.projectInfo {
position: relative;
z-index: 1;
}
.projectInfo li {
color: #FFF;
position: relative;
}
.projectInfo li div {
color: #FFF;
width: 100%;
margin: auto;
height: 100vh;
}
.projectInfo li div a.projectLink {
background: url(../images/white-dash.gif) no-repeat 0 0;
padding-top: 8px;
}
.projectInfo li div h2 {
font-size: 24px;
font-weight: 400;
line-height: 28px;
padding: 50px 0 30px;
}
.projectInfo li div h2 strong {
font-size: 22px;
font-weight: 700;
display: block;
}
.projectInfo li div p {
color: #FFF;
font-size: 16px;
font-weight: 400;
padding: 15px 0;
}
.project li {
text-align: center;
position: relative;
}
.project li img {
position: absolute;
left: 50%;
top: 0;/* width:100%;*/
}
.sliderControlHolder {
position: absolute;
right: 0;
bottom: 0;
height: 50px;
z-index: 2;
}
.counter {
float: right;
width: 150px;
height: 50px;
padding: 0 30px;
background: #00b5e0;
}
.counter strong {
font-family:'Ubuntu', sans-serif;
font-size: 16px;
display: inline-block;
padding-top: 15px;
line-height: 14px;
font-weight: 400;
color: #FFFFFF;
float: left;
}
.counter span {
font-family:'Ubuntu', sans-serif;
font-size: 24px;
display: inline-block;
padding-top: 15px;
line-height: 24px;
font-weight: 500;
color: #FFFFFF;
float: left;
}
.psNext {
float:left;
width: 50px;
height: 50px;
margin-right:2px;
text-indent: -9999px;
background:#ffc605 url(../images/pscontrol.png) no-repeat 15px 50% !important;
}
.psPrev {
float:left;
width: 50px;
height: 50px;
margin-right:2px;
text-indent: -9999px;
background:#ffc605 url(../images/pscontrol.png) no-repeat -45px 50% !important;
}
.homeWhatsnew {
position: fixed;
right: 0;
top: 50%;
margin-top: -50px;
width: 27px;
height: 111px;
z-index: 100;
}
.wnBtn {
display: block;
width: 27px;
height: 111px;
background: url(../images/whatsNew.gif) no-repeat 0 0;
text-indent: -9999px;
position: relative;
z-index: 2;
}
.wnBtnA {
background: url(../images/whatsNew.gif) no-repeat 100% 0;
}
.wnCont {
position: absolute;
right: -280px;
top: -150px;
z-index: 1;
width: 280px;
height: 420px;
background: #FFF;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}
.wnClose {
position: absolute;
right: 0;
top: 0;
width: 25px;
height: 25px;
border-left: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
background: url(../images/closebtn.png) no-repeat 0 0;
text-indent: -9999px;
cursor: pointer;
}
.wnClose:hover {
background: url(../images/closebtn.png) no-repeat 0 100%;
}
.wnCont a.morelink {
color: #cf1218;
text-decoration: none;
border: 1px solid #d6d5d5;
padding: 5px 10px;
font-size: 13px;
margin-left: 120px
}
.wnCont a:hover.morelink {
background: #cf1218;
color: #fff;
text-align: right;
text-decoration: none;
border: 1px solid;
}
.homeWnList {
padding: 30px 20px 0 20px;
font-size: 12px;
}
.homeWnList li {
padding: 0 15px 10px;
background: url(../images/bullet.gif) no-repeat 0 5px;
}
.homeWnList em {
display: block;
padding-bottom: 15px;
color: #cf1218;
font-size: 11px;
}
.homeWnList li strong {
display: block;
padding-bottom: 5px;
color: #cf1218;
font-size: 12px;
}
.homeWnList li a {
line-height: 15px;
color: #111;
font-size: 11px;
}
.homeWnList li a:hover {
text-decoration: underline;
}
.contSec {
margin: 0 30px;
}
.pageName {
background: url(../images/red-dash.gif) no-repeat 0 27px;
padding-top: 35px;
text-transform: uppercase;
color: #898889;
font-size: 11px;
font-weight: 400;
line-height: 15px;
}
.topHeading {
padding: 40px 0;
color: #cf1218;
font-size: 36px;
font-weight: 600;
line-height: 36px;
}
.topHeading small {
font-size: 36px;
font-weight: 300;
line-height: 36px;
display: block;
}
.contCol_left {
float: left;
width: 250px;
}
.contCol_left strong {
display: block;
color: #cf1218;
}
.contCol_left dd {
padding-bottom: 15px
}
.contCol_left h3 {
background: url(../images/black-dash.gif) no-repeat 0 0;
color: #cf1218;
font-size: 20px;
font-weight: 300;
line-height: 20px;
padding-top: 7px;
}
.contCol_right {
float: left;
width: 500px;
}
.mr30 {
margin-right: 30px;
}
.ptb30 {
padding: 30px 0;
}
.ptb40 {
padding: 50px 0;
}
.contSecSlider {
margin: 0 30px;
border-bottom: 1px solid #d6d5d5;
padding-top: 50px;
}
.viewproject {
display: inline-block;
width: 111px;
height: 32px;
color: #FFF;
background: url(../images/vpBtn.png) no-repeat 0 0;
line-height: 32px;
font-size: 14px;
padding-left: 14px;
font-weight: 400;
}
.viewproject:hover {
background: url(../images/vpBtn.png) no-repeat 0 100%;
}
.tabfram {
width: 83.68055555555556%;
margin: 0 auto;
position: relative;
padding-bottom: 7%;
}
.tabfram .tabframimg {
width: 100%;
position: relative;
z-index: 2;
}
.tabfram div.sliderHolder {
width: 65.56016597510373%;
margin: 0 auto;
position: absolute;
top: 2px;
left: 17.98063623789765%;
z-index: 1;
}
.tabfram div.sliderHolder img {
width: 100%;
opacity: 0.5;
}
.gototop {
display: none;
position: absolute;
left: 75%;
margin-left: -60px;
bottom: 183px;
background: #a91217;
z-index: 5;
width: 60px;
height: 60px;
border-top: 1px solid #cf1218;
text-align: center;
line-height: 60px;
cursor: pointer;
color: #FFF;
text-transform: uppercase;
}
.project_details_link {
position: relative;
display: inline-block;
height: 40px;
width: 110px;
border: 1px solid #FFF;
line-height: 40px;
text-align: center;
text-decoration: none;
}
.project_details_link b {
position: absolute;
left: 22px;
top: 0px;
color: #FFF;
font-size: 14px;
font-weight: 600;
width: 64px;
height: 40px;
}
.project_details_link span {
position: absolute;
left: 70px;
top: 0px;
background: url(../images/arrow.png) no-repeat 0 50%;
width: 14px;
height: 40px;
}
.project_details_link:hover {
text-decoration: none;
}
.home_share {
position: relative;
display: inline-block;
height: 35px;
width: 106px;
border: 1px solid #FFF;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 14px;
}
.home_share2 {
position: relative;
display: inline-block;
height: 35px;
width: 136px;
border: 1px solid #FFF;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
}
.home_share:hover {
text-decoration: none;
}
@media screen and (max-width: 1000px) {
.wrapper {
height: auto;
width: auto;
}
.column4 {
display: none;
}
.homeWhatsnew {
display: none;
}
.homeContHolder {
height: auto;
background: #C00;
overflow: auto;
position: inherit;
width: 100%;
}
.homeproductDetails {
height: auto;
position: absolute;
top: 55px;
z-index: 4;
width: 100%;
min-height: 100%;
background: #f1eff0 url(../images/contBg.png) repeat-y 100% 0;
}
.homeproductDetailsL {
float: none;
width: 100%;
background: #f1eff0 url(../images/contBg.png) repeat-y 100% 0;
height: auto;
position: relative;
}
.homeproductDetailsR {
display: none;
}
.column2 {
background: #d0d0d0;
height: auto;
overflow: hidden;
position: relative;
clear: both;
z-index: 2;
}
.column3 {
background: #cf1218;
height: auto;
width: 100%;
overflow: visible;
position: relative;
clear: both;
z-index: 3;
}
.contCol_left {
float: none;
width: auto;
}
.contCol_right {
float: none;
width: auto;
}
.sbClose {
position: absolute;
left: initial;
right: 0;
top: 0;
margin-left: 0px;
bottom: inherit;
background: #a91217 url(../images/mCSB_buttons.png) no-repeat 0 100%;
z-index: 5;
width: 60px;
height: 60px;
display: block;
border-top: 1px solid #cf1218;
text-indent: -9999px;
cursor: pointer;
}
.sbClose:hover {
opacity: 1;
filter: "alpha(opacity=1)";
-ms-filter: "alpha(opacity=1)";
}
.gototop {
position: fixed;
left: 100%;
bottom: 3%;
background: #a91217;
z-index: 5;
width: 60px;
height: 60px;
display: block;
cursor: pointer;
color: #FFF;
display: none;
}
.project {
width: 8000px;
height: auto;
overflow: hidden
}
.project li {
float: left;
overflow: hidden;
}
.project li img {
width: 100%;
position: relative;
left: inherit;
}
.piWrapMobile {
overflow: hidden;
}
.projectInfo {
position: relative;
z-index: 1;
list-style: none;
}
.projectInfo li {
float: left;
}
.projectInfo li div {
position: relative;
}
.projectInfo li div h2 {
}
.projectInfo li div h2 strong {
}
.projectInfo li div p {
}
.sliderControlHolder {
bottom: inherit;
top: -50px;
}
.psNext {
background: url(../images/company-interio-next.png) no-repeat 50% 50%;
}
.psPrev {
background: url(../images/company-interio-prev.png) no-repeat 50% 50%;
}
.project_details_link {
position: relative;
display: inline-block;
height: auto;
width: auto;
border: 0px solid #FFF;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #FFF;
font-size: 13px;
font-weight: 600;
}
.home_share {
position: relative;
display: block;
height: auto;
width: auto;
border: 0px solid #FFF;
line-height: 35px;
text-align: left;
text-decoration: none;
color: #FFF;
font-size: 13px;
font-weight: 600;
}
.home_share2 {
position: relative;
display: inline-block;
height: auto;
width: auto;
border: 0px solid #FFF;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #FFF;
font-size: 13px;
font-weight: 600;
}
}
@media screen and (max-width: 980px) {
.projectInfo li div h2 {
padding: 30px 0 30px;
}
.projectInfo li div a.projectLink {
display: block;
padding-top: 18px;
margin-top: 18px;
}
.projectInfo li div p {
padding-bottom: 30px;
}
.link2 {
display: block;
padding-bottom: 20px;
}
}
.bg-color-cms-01 {background-color:#ef6583; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-02 {background-color:#5cd6eb; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-03 {background-color:#6b65e8; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-04 {background-color:#2bbff5; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-05 {background-color:#dcdcda; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-06 {background-color:#f78ba9; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-cms-05 p {color:#000000 !important;}
.bg-color-cms-05 .project_details_link {border: 1px solid #000000 !important;}
.bg-color-cms-05 .project_details_link b {color: #000000 !important;}
.bg-color-ecommerce-01 {background-color:#fd6b37; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-ecommerce-02 {background-color:#db251d; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-ecommerce-03 {background-color:#171046; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-ecommerce-04 {background-color:#8eb83b; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-ecommerce-05 {background-color:#461844; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-ecommerce-06 {background-color:#a22b6b; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-mobileapp-01 {background-color:#723278; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-mobileapp-02 {background-color:#2a89c1; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-mobileapp-03 {background-color:#509671; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-mobileapp-04 {background-color:#368dec; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-01 {background-color:#f698b4; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-02 {background-color:#517a83; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-03 {background-color:#fcfcfd; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-04 {background-color:#590b0b; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-05 {background-color:#141c03; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-logo-03 p {color:#000000 !important;}
.bg-color-brochure-01 {background-color:#ed1c24; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-brochure-02 {background-color:#806f58; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-brochure-03 {background-color:#fcfcfd; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-brochure-04 {background-color:#01a1c0; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-brochure-05 {background-color:#131013; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-brochure-03 p {color:#000000 !important;}
.bg-color-advertisement-01 {background-color:#433f32; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-advertisement-02 {background-color:#3d0e16; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-advertisement-03 {background-color:#231f20; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-advertisement-04 {background-color:#171716; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-advertisement-05 {background-color:#171817; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-01 {background-color:#00007e; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-02 {background-color:#7073a1; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-03 {background-color:#cadaf0; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-04 {background-color:#ced4d6; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-05 {background-color:#d60211; padding:100px 30px 30px 30px; height:auto; text-align:center;}
.bg-color-social-03 p, .bg-color-social-04 p {color:#000000 !important;}