/*
Theme Name: Cascade Catalyst
Theme URI: https://wordpress.org/themes/cc
Author: Mokarram
Description:My wordpress theme
Version: 1.0
Author URI: https://khan-works.com

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* 
    Created on : Mar 27, 2015, 12:34:50 PM
    Author     : Mokarram
*/
@font-face {font-family:"003 Engineer's Hand";
            src:url("fonts/003_Engineer__s_Hand.eot?") 
                format("eot"),url("fonts/003_Engineer__s_Hand.woff") 
                format("woff"),url("fonts/003_Engineer__s_Hand.ttf") 
                format("truetype"),url("fonts/003_Engineer__s_Hand.svg#003Engineer'sHand") 
                format("svg");font-weight:normal;font-style:normal;
}
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ 
@font-face {font-family:"F25Executive";
src:url("fonts/F25_Executive.eot?") 
format("eot"),url("fonts/F25_Executive.woff") 
format("woff"),url("fonts/F25_Executive.ttf") 
format("truetype"),url("fonts/F25_Executive.svg#F25Executive") 
format("svg");font-weight:normal;font-style:normal;}



*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body, html{
    font-family:"F25Executive";
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.slicknav_menu{
    display: none;
}
.myContainer{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}
.myHeader{
    background-color: #f9f9f9;
    float: left;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99999;
    height: 120px;
}
.logo{
    width: 20%;
    float: left;
    height: 120px;
}
.pageHeader{
    width: 80%;
    float: left;
}
.myNav{
    width: 20%;
    background-color: rgba(58,97,151,0.77);
    float: left;
    position: fixed;
    top: 0;
    height: 100%;
}
.myNav ul{
    background: url(img/navBG.png) no-repeat;
    padding: 12px 0;
    margin: 170px 0 64px;
    list-style: none;
    float: left;
    width: 100%;
}
.myNav ul li{
    padding: 0px 0 17px 0;
    float: left;
    width: 100%;
}
.myNav ul li a{
    font-family: "003 Engineer's Hand";
    font-size: 25px;
    color: #fdfdfd;
    text-decoration: none;
    padding: 0px 0 0px 30px;
    width: 100%;
    float: left;
}
.myNav ul li a:hover, .mPS2id-highlight-first{
    background-color:rgba(30,73,133,0.5);
}
.copyrightTxt{
    width: 20%;
    float: left;
    color: #fdfdfd;
    text-align: center;
    font-size: 12px;
        position:fixed;
        bottom:10px;
        font-family:Arial, Helvetica, sans-serif;
}
.panelHome{
    /*    background: url(img/homeBG.jpg) no-repeat;
        background-size: 100%;*/
    width: 100%;
    margin: 120px 0 0 0;
    float: left;
}
.panelTechnology{
    background: url(img/technoBG.jpg);
    background-size: 100%;
    width: 100%;
    padding: 0 0 0 21%;
    float: left;
}
h1{
    font-family: "003 Engineer's Hand";
    font-size: 36px;
    font-weight: normal;
    width: 100%;
    float: left;
    background: url(img/titleBG.png) no-repeat;
    padding: 17px 0 0 53px;
    margin: 30px 0 0 0;
    color: #465988;
}
h2{
    font-family: "003 Engineer's Hand";
    font-size: 25px;
    color: #465988;
    padding: 28px 0 20px 0px;
    font-weight: normal;
        line-height:28px;
}
.techContent{
    width: 100%;
    max-width: 848px;
    background: url(img/technologyContentBG.png) no-repeat;
    float: left;
    margin: 30px 0 60px 0;
    padding: 60px 52px;
        line-height:22px;
}
.techContent ul{
    list-style: none;
}
.techContent ul li{
    /* line-height: 26px; */
    background: url(img/bullet.png) no-repeat left 15px;
    padding: 10px 0 12px 30px;
}
.applications{
    background: url(img/applicationsBG.jpg);
    background-size: 100%;
    width: 100%;
    padding: 0 0 0 21%;
    float: left;
}
.appContent{
    width: 100%;
    max-width: 54em;
    background: url(img/applicationsContentBG.png) no-repeat;
    float: left;
    margin: 30px 0 60px 0;
    padding: 50px 52px;
}
.example{
    background-color: #fff;
    margin: 25px 0 0 0;
}
.-accordion__expander img{
    float: left;
    margin: 0 10px 0 0;
        width:435px;
}
.myContactPanel{
    background: url(img/contactBG.jpg);
    background-size: 100%;
    width: 100%;
    padding: 0 0 0 21%;
    float: left;
}
.contactContent{
    background: url(img/contactContentBG.png) no-repeat;
    width: 100%;
    max-width: 848px;
    float: left;
    margin: 20px 0 40px 0;
    padding: 30px 20px 30px 45px;
}
.contactInfo{
    width: 40%;
    float: right;
}
h3{
    font-family: "003 Engineer's Hand";
    font-size: 25px;
    font-weight: normal;
    width: 100%;
    float: left;
    background: url(img/contactColumnHeaderBG.png) no-repeat;
    padding: 3px 0 5px 12px;
    margin: 10px 0 0 0;
    color: #465988;
}
.contactInfo ul{
    list-style: none;
    float: left;
    width: 100%;
}
.contactInfo ul li{
    width: 100%;
    float: left;
    padding: 0 0 0 75px;
}
.contactInfo ul li:nth-child(1){
    background: url(img/ico1.png) no-repeat;
    padding-top: 8px;
        min-height:80px
}
.contactInfo ul li:nth-child(2){
    background: url(img/ico2.png) no-repeat;
    padding-top: 15px;
        min-height:70px;
}
.contactInfo ul li:nth-child(3){
    background: url(img/ico3.png) no-repeat;
    padding-top: 28px;
        min-height:70px;
}
.contactInfo ul li:nth-child(4){
    background: url(img/ico1.png) no-repeat;
    padding-top: 28px;
        min-height:80px
}
.contactForm{
    width: 60%;
    float: left;
    max-width: 425px;
    margin: 20px 0 15px 0;
}
.contactForm form{
    width: 100%;
    float: left;
    margin: 10px 0;
}
.contactForm input{
    font-family:"F25Executive";
    width: 100%;
    background: none;
    border: thin solid #ccc;
    padding: 5px 10px;
    margin: 5px 0;
    font-size: 18px;
    color: #000;
}
.contactForm button{
    font-family:"F25Executive";
    background-color: #617097;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 5px 30px;
    float: left;
    margin: 5px 0;
        clear:both;
}
.formInfo{
    width: 100%;
    float: left;
    margin: 40px 0 0 0;
}
.formInfo p{
    margin: 0 0 10px 0;
    float: left;
}
.contactForm textArea{
    font-family:"F25Executive";
    width: 100%;
    background: none;
    border: thin solid #ccc;
    padding: 5px 10px;
    margin: 5px 0;
    font-size: 18px;
    color: #000;
    max-height: 70px;
}
.example ul li:nth-child(4){
    border: none;
}
.pageHeaderMobile{
    display: none;
}
.logo img{
    height: 100%;
}


.dl-menuwrapper{
    display: none;
}


.homeImgCont{
    width: 100%;
    padding: 0 0 0 20%;
}
.homeImgCont img{
    width: 100%;
    max-width: 1143px;
}
.iconsHolder{
        position:absolute;
        z-index:999;        
}
.icon1 img, .icon2 img, .icon3 img, .icon4 img{
        max-width:133px;
        float:left;
}
.icon1, .icon2, .icon3, .icon4{
        float:left;
}

.icon1{
        margin: 63px 0 0 405px;
    width: 340px;
}
.icon2{
        margin: -35px 0 0 484px;
    width: 340px;
}
.icon3{
        margin: -27px 0 0 404px;
    width: 340px;
}
.icon4{
        margin: -31px 0 0 483px;
    width: 340px;
}
.colored{
        width:500px;
        position:absolute;
        transition: 1s ease all;
        opacity:0;
        -moz-opacity:0;
        -webkit-opacity:0;
        -o-opacity:0;
}
.colored:hover{
        opacity:1;
}
.colored img{
        max-width:133px;
}
.blackAndWhite{
        width:500px;
}
.colored span, .blackAndWhite span{
        float:left;
        color: #33497c;
    font-family: "003 Engineer\'s Hand";
    font-size: 21px;
    font-weight: 700;
    line-height: 22px;
    padding: 55px 0 0 12px;
    text-transform: uppercase;
}
.icon4 .colored span, .icon4  .blackAndWhite span{
    padding: 73px 0 0 12px;
}

ul, li{
        margin:0;
        padding:0;
        
}
#commentForm label {
    color: #f00;
    float: left;
    font-size: 12px;
    padding: 0 0 10px;
}

#thankYou{
        color:green;
        margin-top:20px;
        margin-left:100px;
        font-family:arial;
        font-size:20px;
        margin-bottom:40px;
}
.thankYou{
        background: rgba(140, 198, 62, .7);
        position:fixed;
        width:100%;
        height:40px;
        z-index:999999999;
        bottom:0;
        color:#ffffff;
        text-align:center;
        line-height:40px;
        display:none;
}







@media only screen and (max-width: 1100px) {
        
        .icon1 {
    margin: 33px 0 0 276px;
    width: 400px;
}
.icon1 img, .icon2 img, .icon3 img, .icon4 img{
        max-width:90px;
}
.colored span, .blackAndWhite span {
    font-size: 15px;
    line-height: 14px;
    padding: 38px 0 0 12px;
}
        
        .icon2 {
    margin: -21px 0 0 325px;
}
.icon3 {
    margin: -15px 0 0 275px;
}
        .icon4 {
    margin: -18px 0 0 325px;
}
.icon4 .colored span, .icon4 .blackAndWhite span {
    padding: 45px 0 0 12px;
}
        
}












@media only screen and (max-width: 800px) {
        
        
        .blackAndWhite img, .colored img{
                max-width:90px;
        }
        .colored span, .blackAndWhite span{
                font-size: 14px;
    line-height: 14px;
    padding: 38px 0 0 12px;
        }
        
.icon1 {
    margin: 46px 0 0 290px;
    width: 160px;
}
.icon2 {
    margin: -25px 0 0 345px;
    width: 160px;
}

.icon3 {
    margin: -23px 0 0 290px;
    width: 160px;
}

.icon4 {
    margin: -18px 0 0 335px;
    width: 160px;
}
        
        

    .slicknav_menu{
        display: block;
    }

    .myHeader{
        height: auto;
    }
    .pageHeader{
        display: none;
    }
    .logo{
        float: none;
        margin: 10px auto;
        width: 40%;
    }

    .pageHeaderMobile{
        display: block;
        margin: 0 auto;
        padding: 0 0 25px;
        width: 60%;
    }
        .pageHeaderMobile img{
    width: 100%;
}
    .myNav{
        display: none;
    }
    .panelHome{
        margin:280px 0 0 0;
    }
    .homeImgCont{
        padding: 0;
    }
    .panelTechnology{
        float: none;
        margin: 0 auto;
        overflow: hidden;
        padding: 10px;
        width: 100%;
    }
    .techContent{
        background-size: 100%;
        font-size: 14px;
    }
    h2{
        font-size: 21px;
        padding: 17px 0 20px;
    }
    .applications{
        padding: 20px;
    }
    .-accordion--box.-accordion--vertical .-accordion__panel, -accordion--active{
        width: 100% !important;
    }
    .-accordion__panel span{
        font-family: "003 Engineer's Hand";
        font-size: 20px;
        padding:20px 5px 20px 15px !important;
    }
    .-accordion__panel {
        border-bottom: thin solid #ccc;
        margin-bottom: 0 !important;
        border-right: none !important;
    }
    .myContactPanel{
        padding: 0 20px;
    }
    .contactContent, .appContent, .techContent{
        background-size: 100% 100%;
        padding: 45px 35px !important;
    }
    .appContent{
        padding: 35px;
    }
    .contactForm{
        margin-top: 10px;
    }
    .formInfo{
        margin-top: 20px;
    }
    .techContent h2{
        padding-top: 35px;
        padding-left: 12px;
    }


}

@media only screen and (max-width: 768px) {
        .pageHeader{
        display: none;
    }
        .icon1 {
    margin: 42px 0 0 270px;
    width: 160px;
}
.icon2 {
    margin: -23px 0 0 325px;
    width: 160px;
}
.icon3 {
    margin: -20px 0 0 270px;
    width: 160px;
}

.icon4 {
    margin: -18px 0 0 320px;
    width: 160px;
}
.icon4 .colored span, .icon4  .blackAndWhite span{
    padding: 49px 0 0 15px;
}
        
}




@media only screen and (max-width: 360px) {
.pageHeader{
        display: none;
    }
.homeImgCont img{
        width:100%;
}
    .myHeader{
        height: auto;
    }
        .blackAndWhite img, .colored img{
                max-width:40px;
        }
        
.icon1 {
    margin: 23px 0 0 130px;
        width:200px;
}
        .icon2 {
    margin: -8px 0 0 152px;
        width:200px;
}
        .icon3 {
    margin: -5px 0 0 131px;
        width:225px;
}
        .icon4 {
    margin: -8px 0 0 153px;
        width:200px;
}
.icon4 .colored span, .icon4  .blackAndWhite span{
    padding: 15px 0 0 5px;
}
.icon3 .colored{
        width:225px;
}
.icon2 .colored, .icon1 .colored, .icon4 .colored{
        width:200px;
}
.blackAndWhite{
        width:100%;
}

    .homeImgCont{
        padding: 0;
    }
    .logo{
        height: auto;
    }
    .logo img {
        width: 100%;
        height: auto;        
    }
    .panelHome{
        margin-top: 160px;
    }
    h1{
        background-size: 160%;
        font-size: 25px;
        margin: 5px 0 0;
        padding: 11px 0 0 36px;
    }
    .techContent{
        margin-top: 15px;
        font-size: 10px;
        padding: 15px;
    }
    h2{
        font-size: 12px;
        padding: 6px 0 0;
    }
    .techContent ul li {
        background: url("img/bullet.png") no-repeat scroll left 10px rgba(0, 0, 0, 0);
        padding: 7px 0 0 25px;
    }

    .applications{
        font-size: 12px;
    }
    .appContent{
        padding: 25px 15px !important;
    }
    .example{
        margin-top: 10px;
    }
    .-accordion__expander{
        padding: 5px !important;
    }
    .-accordion__panel span{
        font-size: 16px;
    }
    .-accordion__expander{
        padding: 15px 5px !important;
    }
    .-accordion__expander img{
        width: 40%;
    }
    .-accordion--box.-accordion--vertical .-accordion__panel{
        margin-bottom: 0 !important;
    }
    .contactInfo{
        width: 100%;
        font-size: 12px;
        padding-top: 10px;
    }
    .contactInfo ul li{
        background-size: 25% !important;
    }
    .contactForm{
        width: 100%;
    }
    .contactContent, .appContent, .techContent{
        padding: 30px 15px !important;
    }


    .contactForm button {
        background-color: #54aa54;
        border: medium none;
        color: #fff;
        float: left;
        font-family: "PT Sans",sans-serif;
        font-size: 12px;
        margin: 5px 0;
        padding: 3px 20px;
        border-radius: 5px;
    }
    .formInfo{
        font-size: 12px;
    }
    .contactForm input, .formInfo input{
        font-size: 14px;
    }
    #myContact{
        background-position-x: 395px !important;
    }
    #dl-menu ul{
        font-family: "arial";
    }
    #dl-menu ul li{
        border-bottom: thin solid #466aa0;
    }

    .techContent h2{
        padding:11px 5px;
    }
    .contactContent{
        margin-top: 5px !important;
    }
    .appContent{
        margin-bottom: 0;
    }
    .techContent{
        margin-bottom: 0;
    }
        .contactInfo ul li:nth-child(2), .contactInfo ul li:nth-child(3){
                min-height:60px;
                
        }
        .colored span, .blackAndWhite span {
    font-size: 12px;
    line-height: 10px;
    padding: 13px 0 0 3px;
        font-weight:400;
}

}