body{ font-family: 'Nunito Sans', sans-serif; z-index: -1; height: 100vh; background-position: initial; background-image: url(//b.content.wso2.com/sites/all/images/cloudoverview-headerimg.jpg); background-repeat: no-repeat;background-attachment: fixed; background-size: cover;}
    p, h2, h3, h4, ul, ol { margin: 1em 0;}
    .H-header { background-size: cover; }
    .cHeaderWrapper { text-align: left; padding: 10em 0 0; display: inline-block;}
    .cHeaderWrapper h2 { color: #fff; font-weight: 900; font-size: 2.5em; line-height: 1.25em; text-transform: none; margin: 0; text-align: left;}
    .cHeaderWrapper h1 { color: #fff; font-size: 2em; font-weight: 300; text-transform: none; margin-top: .5em; padding-bottom: 0em;}
    .cHeaderWrapper h3 { color: #fff; font-size: 21px; line-height: 36px; padding-bottom: 20px; border-right: 1px solid rgba(255, 255, 255, 0.5); margin-right: 2.5em;}
    .cWrapperSpace { background-color: #ffffff; padding: 80px 0 90px;}
    .cCommonWrapperWhite h2{ font-size: 40px; font-weight: bold; line-height: 50px; margin: 0 0 50px; text-align: left; color: #fff;}
    .cCommonWrapperWhite h3{ font-size: 30px; font-weight: bold; line-height: 30px; margin: 0; text-align: center; font-size: 30px; border-bottom: 3px solid #505050;}
    .cCommonWrapperGray { font-size: 1.2em; font-weight: bold; line-height: 50px; text-align: left; color: #505050;}
    .cCommonWrapperGray h3{ font-size: 30px; font-weight: bold; line-height: 30px; margin: 0; text-align: center; font-size: 30px; border-bottom: 3px solid #505050;}
    .cTxtAlignR{ border-right: 1px solid #cccccc; padding-left: 0;}
    .cTxtAlignL h3, .cTxtAlignL p { text-align: left; float: left; margin-top: 15px; font-size: 1.1em; line-height: 1.8em;}
    .cTxtAlignR h3, .cTxtAlignR p  { text-align: right; float: right; margin-top: 15px; font-size: 1.1em; line-height: 1.8em;}
    .cTxtAlignR img{ text-align: right; float: right;  }
    .cTxtAlignL img{ text-align: left; float: left; }
    .cSubWrapper { padding: 2em 0 0; display: inline-block; width: 100%;}
    .cSubWrapper h3{ font-size: 21px; font-weight: bold; padding-bottom: 10px; margin-bottom: 30px; color: #505050;}
    .cSubWrapperHeading{ padding:0 15em;}
    .cLightGray{ background-color: #f5f5f5;}
    .capability{ border-bottom: 2px solid rgba(204, 204, 204, 0.15); padding: 1em 0; text-align: left;}
    .capability h3{ font-size: 1.5em; font-weight: bold; color: #fff; text-align: left;}
    .capability p { font-size: 1.2em; line-height: 1.8em; color: #fff;}
    .cNoBorder h3{ border: 0 !important}
    .cCapButton { width: 175px; text-decoration: none; text-align: center; float: none; margin-top: 20px;}
    .cCapButton a { border: dotted 1px #4D4D4D; padding: 1em 2em; line-height: 1em; text-align: center; text-decoration: none; display: block; color: #4D4D4D; font-weight: 800; font-size: 1em; margin-bottom: 0em;}
    .cCapButton:hover a{background-color: #FF4C00; text-decoration: none; border:1px solid #FF4C00; color: #fff;}
    .cCapConnect{ background-image: url(/sites/all/products/common/images/pro-ov-connect.jpg); background-position: center; background-repeat: no-repeat; height: 30px;}
    .cOverView p{ padding-bottom: 30px; font-size: 21px; font-weight: bold; color: #505050;}
    .cR{ float: right;}
    .cL{ float: left;}
    .cProductName{ height: 105px; padding: 30px;}
    .cProductDescription{padding: 25px; display: inline-block;}
    .cProductsWrapper{ float: left;}
    .cProductsWrapper h2{ color: #fff; text-transform: uppercase; font-size: 24px; margin: 0; font-weight: bold;}
    .cApiColor{ background-color: rgba(119, 188, 31, 0.2);}
    .cIntegrationColor{ background-color: rgba(140, 24, 155, 0.2);}
    .cIdentityColor{ background-color: rgba(255, 164, 0, 0.2);}
    .cAnalyticsColor{ background-color: rgba(178, 30, 40, 0.2);}
    .cIoTColor{ background-color: rgba(0, 161, 155, 0.2);}
    .cProductsWrapper p{ color: #4D4D4D; font-size: 18px; height: 150px; font-weight: 300; margin: 0;}
    .cApiM{ background-image: url(//b.content.wso2.com/sites/all/images/ApimOimg.jpg); background-position: center top; background-size: cover;}
    .cIntegration{ background-image: url(//b.content.wso2.com/sites/all/images/IntegrationOimg.jpg); background-position: center top; background-size: cover;}
    .cIam{ background-image: url(//b.content.wso2.com/sites/all/images/IdentityOimg.jpg); background-position: center top; background-size: cover;}
    .cSa{ background-image: url(//b.content.wso2.com/sites/all/images/product-analytics.jpg); background-position: center top; background-size: cover;}
    .cIot{ background-image: url(//b.content.wso2.com/sites/all/images/IotOimg.jpg); background-position: center top; background-size: cover;}
    .cApiMDes{ border: 1px solid #77BC1F; border-top: 10px solid #77BC1F; width: 100%;}
    .cIntegrationDes { border: 1px solid #9163A9; border-top: 10px solid #9163A9; width: 100%;}
    .cIamDes{ border: 1px solid #FFA400; border-top: 10px solid #FFA400; width: 100%;}
    .cIotDes{ border: 1px solid #00A19B; border-top: 10px solid #00A19B; width: 100%;}
    .panel-title img{ max-width: 50px;}
    .cIcon{ background-repeat: no-repeat; background-position: left; padding: 50px;}
    .cUs{ background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/uptime.svg); }
    .cSla{ background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/sla.svg);}
    .cSc{ background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/sc.svg);}
    .cDef{background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/def.svg);}
    .cScsc{background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/scsc.svg);}
    .cDp{background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/dp.svg);}
    .cCsse{background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/csse.svg);}
    .cMod{background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/cloud-pages/images/mod.svg);}
    .cCommonWrapperGray h2 { font-size: 40px; font-weight: bold; line-height: 50px; margin: 0 0 50px; text-align: left; color: #505050;}
    .cTransWrapper { background-image: url(//b.content.wso2.com/sites/all/images/CloudOverviewpage-bg.jpg); background-attachment: fixed; background-size: cover;}
    .cBlogTitle h2{  font-size: 1.3em; color: #505050; font-weight: 900; margin: 0; line-height: 1.3em;}
    .cBlogTitle{ min-height: 120px;}
    .cBlogPublishDate{ font-size: 1em; color: #505050; line-height: 1.75em; font-weight: normal;}
    .cBlogDescription{ font-size: 1em;
    color: #505050;
    line-height: 1.75em;
    font-weight: normal;
    border-top: 1px solid #cccccc;
    text-align: left;
    display: -webkit-box;
    height: 210px;
    margin: 0 auto;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1em;
    }
    .cMainProducts{ margin: auto;}
    .cNoBorder{border: 0;}
    .cCapButtonGray a {
        border: dotted 1px #505050;
        padding: 1em 2em;
        line-height: 1em;
        text-align: center;
        text-decoration: none;
        display: block;
        color: #505050;
        font-weight: 800;
        font-size: 1em;
        margin-bottom: 0em;
        margin-top: 15px;
    }
    .cPaddingZero{ padding: 0 !important;}
    .cCapButtonGray a:hover{background-color: #FF4C00; text-decoration: none; border:1px solid #FF4C00; color: #fff;}

    /* ---  --- */
    .panel { border-width: 0 0 1px 0; border-style: solid; border-color: transparent; background: none; box-shadow: none;}
    .panel:last-child { border-bottom: none;}
    .panel-group > .panel:first-child .panel-heading {}
    .panel-group .panel { border-radius: 0;}
    .panel-group .panel + .panel { margin-top: 0;}
    .panel-heading { background-color: #eaeaea; border-radius: 0; border: none; color: #fff; padding: 0; border-left: 10px solid #eaeaea;}
    .panel-title a { display: block; color: #333333; padding: 15px; position: relative; font-size: 16px; font-weight: 400; margin-bottom: 5px; height: 60px; border: 5px solid #eaeaea;padding-left: 65px; text-decoration: none;}
    .panel-body { background: #fff; margin-bottom: 5px; padding: 3em;}
    .panel-body p{ font-size: 1.1em; line-height: 1.3em; color: #505050; font-weight: normal; padding-bottom: 20px;}
    .panel-body li{ font-size: 1.1em; line-height: 1.3em; color: #505050; font-weight: normal; margin-bottom: 20px;}
    .panel:last-child .panel-body { border-radius: 0 0 4px 4px; padding: 3em 4em!important;}
    .panel:last-child .panel-heading { border-radius: 0 0 4px 4px; transition: border-radius 0.3s linear 0.2s;}
    .panel:last-child .panel-heading.active { border-radius: 0; transition: border-radius linear 0s;}
    /* #bs-collapse icon scale option */

    .panel-heading a:before {
        content: '\e146';
        position: absolute;
        font-family: 'Material Icons';
        right: 5px;
        top: 10px;
        font-size: 24px;
        transition: all 0.5s;
        transform: scale(1);
        color: #b7b7b7 !important;
    }

    .panel-heading.active a:before {
        content: ' ';
        transition: all 0.5s;
        transform: scale(0);
    }

    #bs-collapse .panel-heading a:after {
        content: ' ';
        font-size: 24px;
        position: absolute;
        font-family: 'Material Icons';
        right: 5px;
        top: 10px;
        transform: scale(0);
        transition: all 0.5s;
        color: #b7b7b7 !important;
    }

    #bs-collapse .panel-heading.active a:after {
        content: '\e909';
        transform: scale(1);
        transition: all 0.5s;
    }
    /* #accordion rotate icon option */

    #accordion .panel-heading a:before {
        content: '\e316';
        font-size: 24px;
        position: absolute;
        font-family: 'Material Icons';
        right: 5px;
        top: 10px;
        transform: rotate(180deg);
        transition: all 0.5s;
    }

    #accordion .panel-heading.active a:before {
        transform: rotate(0deg);
        transition: all 0.5s;
    }
    input[type="text"]{ width:98%; border:1px solid #e3e1d9; font-weight: 400 ; font-size:1.2em ;color:#706c63; padding: 10px;}

    textarea{ width:250px; height:160px; border:1px solid #e3e1d9; font-weight: 600 ; font-size:13px ; color:#706c63; padding: 10px;}

    input[type="submit"]{ width: 100%; background-color:#FF4C00; font-size: 1.45em; font-weight: 600; line-height: 2.25em; color:#ffffff; border:0 none; padding:0 10%; display:inline-block; cursor:pointer; text-align: center;}

    input[type="button"]{ text-transform: uppercase; border: 0 none; margin-top: 20px; display: inline-block; cursor: pointer; padding: 0 2em; background-color: #f47a20; color: #ffffff;
    font-size: 1.5em; font-weight: 600; line-height: 40px; height: 45px;}

    input[type="button"]:hover{color: #fff;}

    select{ border-radius: 0 !important; background-color:#f1f0ec; width:98%; padding-left:10px; border:1px solid #e3e1d9; font-weight: 400 ; font-size:1.2em ; color:#706c63; padding:10px; height: 45px; }
    .fixedWidth{ display: inline-block;}
    .cTextarea, contact_can_help { padding: 8px; width: 99%; color: rgb(169, 169, 169); font-weight: 400 ; font-size:1.2em ; }
    .cloudcontact_inner{display:block;}
    .cCloudSignup p { color: #ffffff; margin:10px 0 0 20px; font-size: 1.3em;}
    .cCloudSignup a.cCloudSignIn { background-color: #00acda; padding: 5px 15px; font-size: 16px; font-weight: 700; color: #ffffff; text-transform: uppercase; margin: 0 0 0 10px; text-align: center;}
    .cTopMenu{position: fixed;top: 0;width: 100%;z-index: 100;margin-top:50px;display: none;}
    ul.collapse{  }
    ul.collapse li {  }
    div.collapseWrapper { overflow: hidden; }
    a.collapseMore { padding: 10px 30px; color: #2DA9DE; text-align: center; float: none; display: table; margin: auto; border: 1px solid #ccc; font-size: 1.5em;}
    a.collapseMore:hover { background-color: #2DA9DE; color: #fff;  }
    .fader { position: inherit; padding-top: 7%; overflow: hidden; padding-left: 0; text-align: left; display: inline-block;}.fader .pager_list { position: absolute; width: 100%; height: 10px; line-height: 40px; bottom: 0; text-align: left; z-index: 4; padding-left: 0;}
    .inner-nav{ display: block;  left: 0; position: fixed; top: 51px; width: 100%; z-index: 100; }
    .inner-nav .cFloating { display: block;}
    #iInnerMenuContainer { text-align: left; margin-top: 0px; } 
    .cTermscondition p { color: #ffffff; padding-bottom: 0; margin: 0; font-size: 1.3em; line-height: 1.45em; padding-left: 20px;}
    .cFreeTrial{padding: 10px; text-align: center;}
    .cFreeTrialBtn a { font-size: 1.2em; text-transform: uppercase; color: #ffffff; font-weight: 700; padding: 10px 50px 10px 15px; display: inline-block}
    .cPurple{ background-color: #9163A9;}
    .cGreen{ background-color: #77BC1F;}
    .cYellow{ background-color: #FFA400;}
    .cPersianGreen{ background-color: #00A19B;}
    .cSignUplayer{ background-color: rgba(0, 24, 106, 0.95); padding: 1% 0;}
    .cSignUplayerNormal{ background-color: rgba(0, 24, 106, 0.95); padding: 3em 0;}
    .api-click, .iot-click, .identity-click, .integration-click {cursor:pointer;background-image: url(//b.content.wso2.com/sites/all/2017-d7-theme/products/common/images/download-arrow.svg); background-position: center right 65px; background-repeat: no-repeat; background-size: 20px;}
    .api-trial, .iot-trial, .identity-trial, .integration-trial {display:none;text-align:center;background:#e8e8e8;color:#fff;padding:30px 20px}
    .cAPICloud .cEmail {
        border: 1px solid #00acda;
        font-size: 1.2em;
        margin: 10px 0 10px;
        padding: 5px 10px;
        width: 100% !important;
        background-color: #e4f6fb;
    }
    .cAPICloud .cCloudButton {
        border: 0;
        background-color: #00acda;
        padding: 5px 20px;
        font-weight: 700;
        font-size: 20px;
        color: #ffffff;
        text-transform: uppercase;
        margin: 0 0 5px;
        width: 100% !important;
        text-align: center;
    }
    @media screen and (max-width: 1200px) {.cProductsWrapper h2{ font-size: 20px;} .cCloudSignup p {font-size: 1.1em;}}
    @media screen and (max-width: 992px) {
        .cSubWrapperHeading{ padding: 0;}
        .cTxtAlignL h3, .cTxtAlignL p, .cTxtAlignR h3, .cTxtAlignR p { text-align: center; padding-top: 1em; margin: 0 auto; float: none; width: 100%; height: auto;}
        .cTxtAlignL img,  .cTxtAlignR img{ text-align: center; float: none; margin-top: 15px; width: 100%;}
        .cR{ float: none;}
        .cL{ float: none;}
        .cTxtAlignR{ border: 0; margin-bottom: 25px;}
        .capability {padding: 1em 0;}
        .cNoDisplay{ display: none;}
        .cProductsWrapper { width: 100%; padding-bottom: 3em;}
        .cHeaderWrapper{ top:50px}
        .cProductName h2{ font-size: 2em;}
        .cHeaderWrapper h3 { font-size: 18px;line-height: 30px; border: 0 !important;}
        .cApiM, .cIntegration,.cIam, .cSa, .cIot { background-size: cover; padding: 2em;}
        .cLongTitle h2{ line-height: 28px !important}
        .cCloudSignup a.cCloudSignIn { margin: 0; width: 100%; float: left; margin-top: 20px;}
        input[type="text"]{ width: 100%;}
        .cCapButton {width:200px;padding: 2em 0 3em;float: left;}
        .cBlogTitle { min-height: 100px; padding-top: 30px;}
        .cCloudSignup p { margin: 0;}
        .cProductsWrapper p {height: inherit !important;}
        .cBlogDescription {height: auto; min-height: initial;}
        .cSignIn{padding-top: 30px; text-align: center;}
        .cHeaderWrapper { padding: 4em 0;}
        .api-click, .iot-click, .identity-click, .integration-click{ background-image: none;}
        .cSignUplayer{ display: none !important;}
        .signup input{ width: 100%;}
    }