@import url('common.css');
@import url('aside.css');

/*=====================================



    PLANS PAGE STYLES        
    
    
          
=====================================*/
/*========================================
PLANS PAGE - header (section 1) STYLES              
==========================================*/
#plans-header {
    background: url('../img/plans/Plane_Banner-lg.jpg') no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;      
    width: 100%;      
    color:  #35495a;/*dark ash*/
    font-family: Gotham, sans-serif;
    margin: 0px;
    padding: 120px 5px;
    margin-top: 80px;
    line-height: 1.3;   
    /*font-size: 15px;   */  
}
.plans-header hr {     
    border-bottom: 1px solid #34495a; /*this is working*/
    opacity: 0.1; 
    filter: alpha(opacity=10);   
}
.plans-left-outter-box {        
    padding: 0px;          
}
.plans-left-inner-box { 
    width: 100%;   
    float: left;     
    margin: 0px;    
    padding: 5px;             
}
#plans-header h3 {    
    font-family: Gotham-Bold, sans-serif;
}

/*=====================================*/
/*       PLANS SEARCH STYLES       */
/*=====================================*/
#plans-search {    
    padding: 0px;
    margin: 0px;   
    color:  #35495a;/*dark ash*/ 
}
.search-wrapper {
    padding: 15px;
    padding-top: 20px;    
}
#plans-search-bar {
    margin: 20px 0px 20px 0px;
    border: 1px solid #f8b133; /*#f8b133;*/
    width: 100%;          
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    font-size: 16px;
    padding: 5px;
    padding-left: 42px;  
    background: url(../img/plans/search-image2.PNG) no-repeat left center;
    background-size: 38px 30px;  
    -webkit-background-size: 40px 32px;  
    -moz-background-size: 38px 30px;  
    -o-background-size: 38px 30px;    
    -ms-background-size: 38px 30px;          
    box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -o-box-sizing: padding-box;
    -ms-box-sizing: padding-box;  
    box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;  
     padding-bottom: 5px;    
     height: 50px;     
}
#plans-search-bar:focus {          
     box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -o-box-sizing: padding-box;
    -ms-box-sizing: padding-box; 
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;  
     outline: none;        
     border: 2px solid #f8b133; /*#f8b133;*/
     padding-bottom: 3px;  
}
#plans-desc-label1 {
    font-weight: normal;
    font-size: 22px;
    margin-top: 10px;
    width: 60%;/**/
}
#plans-amount-label1 {
    font-weight: normal;
    margin-top: 10px;
    font-size: 30px;
    float: right;    
}
#plans-per-msg {
    font-size:10px;
    float: right;
    font-weight: normal;
}
#plans-desc-label2 {
    font-weight: normal;
    font-size: 18px;
    margin-top: 10px;
    width: 50%;/**/
}
#plans-amount-label2 {
    font-weight: normal;
    margin-top: 10px;
    float: right;
    font-size: 23px;    
}
#plans-search-bar-wrapper, #plans-desc-label1-wrapper, #plans-desc-label2-wrapper {
    border-bottom: 1px dashed #ddd;
    padding: 20px 0px 20px 0px;    
}
#plans-search-bar-wrapper {
    padding-top: 0px;
}

.autocomplete-suggestions {
 border: 1px solid #999; background: #fff; cursor: default; overflow: auto;
 }

.autocomplete-suggestion { 
padding: 5px 5px; font-size: 0.9em; overflow: hidden; 
}

.autocomplete-suggestion:hover{
background:#ccc;
}

.autocomplete-selected {
 background: #f0f0f0; 
}

.autocomplete-suggestions strong {
 font-weight: normal; color: #3399ff;
}

/*=====================================*/
/*       PLANS SECTION 2 STYLES       */
/*=====================================*/
#plans-section2 {
    color:  #35495a;/*dark ash*/
    margin: 0px;
    padding-top : 60px;
    padding-bottom: 60px;
}
.plans-section2-table-wrapper{
    width: 100%;    
}
/*table */
.plans-section2-table-wrapper table {
    width: 100%;
    margin: auto;    
}
/*table headers*/
.plans-section2-table-wrapper table, td, th{
    border-collapse: collapse;   
}
.plans-section2-table-wrapper table th {
    width: 20%;    
}
.plans-section2-table-wrapper table tr {
    border-bottom: 1px solid #ddd;
}
.plans-section2-table-wrapper table tr:last-child {
    border-bottom: none;
}
.plans-section2-table-wrapper table tr:first-child {
    border-bottom: 1px solid #b2b0b0;
}
.plans-section2-table-wrapper table tr.description-row:hover {
    background-color: #f2f2f2;
}
.plans-section2-table th, .plans-section2-table td { /*both th and td*/
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}
.plans-section2-table img.icon-plans{
    width: 40px;
    height: 40px;
}
.plans-section2-table tr:first-child {    
    font-size: 14px;
    font-weight: bold;
}
.start, .grow, .connect, .enterprise {
    font-family: Gotham-Bold, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 6px;
}
.start{
    color: #e16736;    
}
.grow {
    color: #f8b133;   
}
.connect {
    color: #74a97d;
}
.enterprise {
    color: #16629e;
}
/*table cells*/
.plans-section2-table img.right {
    width: 25px;    
}
/*=====================================*/
/*       MEDIA QUERY STYLES       */
/*=====================================*/
@media only screen and (min-width: 1440px) {
    #plans-header {
        background: white;        
    width: 100%;          
    margin: 0px;
    padding: 0px;
    margin-top: 80px;
         
    }
    #plans-header, .container, .row {
        /*border: 1px solid red;*/
    }
    #plans-header .row {
        background: url('../img/plans/Plane_Banner.jpg') no-repeat right center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;      
    width: 100%;      
    color:  #35495a;/*dark ash*/
    font-family: Gotham, sans-serif;
    margin: 0px;
    padding: 120px 5px;    
    line-height: 1.3;    
     }
}
@media only screen and (max-width: 1200px) and (min-width: 767px) {
    #plans-header {
        background: url('../img/plans/Plane_Banner_md.jpg') no-repeat right center;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        width: 100%;
        color:  #35495a;/*dark ash*/
        font-family: Gotham, sans-serif;
        margin: 0px;
        padding: 70px 5px;
        margin-top: 80px;
        line-height: 1.3;
        /*font-size: 15px;   */
    }
}
@media only screen and (min-width: 768px) and (max-width: 800px) {
    .plans-left-inner-box {
        padding-right: 35px;
    }
}
@media only screen and (max-width: 767px) {
    #plans-header {
    background: url('../img/plans/Plane_Banner.jpg') no-repeat left center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;      
    width: 100%;      
    color:  #35495a;/*dark ash*/
    font-family: Gotham, sans-serif;
    margin: 0px;
    padding: 40px 5px;
    margin-top: 80px;
    line-height: 1.3;   
    /*font-size: 15px;   */  
    }
    #plans-section2 {        
        padding-top : 20px;
        padding-bottom: 20px;
    }
    .plans-section2-table th, .plans-section2-table td { /*both th and td*/
        padding: 5px;
    }
}
@media only screen and (max-width: 460px) {
    .start, .grow, .connect, .enterprise {
        font-family: Gotham-Bold, sans-serif;
        font-size: 10px;
        font-weight: bold;
        margin-top: 6px;
    }
    .plans-section2-table-wrapper table {
        width: 100%;
        margin: 0px;    
    }
}
@media only screen and (max-width: 355px) {
    .start, .grow, .connect, .enterprise {
        font-family: Gotham-Bold, sans-serif;
        font-size: 10px;
        font-weight: bold;
        margin-top: 6px;
    }
    .plans-section2-table-wrapper table {
        width: 100%;
        margin: 0px;    
    }
    .plans-section2-table-wrapper {
        width: 100%;
        margin: 0px;
        padding: 0px;    
    }
    .plans-section2-table img.icon-plans{
        width: 30px;
        height: 30px;
    }
    .plans-section2-table img.right {
        width: 20px;    
    }
    .plans-section2-table tr {    
        font-size: 11px;    
    }
    .plans-section2-table tr:first-child {    
        font-size: 12px;
        font-weight: bold;
    }
    .plans-section2-table th, .plans-section2-table td {
        padding: 0px;
        margin: 0px;
    }
}
@media only screen and (max-width: 400px) and (min-width: 321px){
    #plans-desc-label1 {
    font-weight: normal;
    font-size: 16px;
    margin-top: 10px;
    width: 60%;/**/
    }
#plans-amount-label1 {
    font-weight: normal;
    margin-top: 10px;
    font-size: 22px;
    float: right;
    }
#plans-desc-label2 {
    font-weight: normal;
    font-size: 12px;
    margin-top: 10px;
    width: 50%;/**/
    }
#plans-amount-label2 {
    font-weight: normal;
    margin-top: 10px;
    float: right;
    font-size: 16px;    
    }
}
@media only screen and (max-width: 320px){
    #plans-desc-label1 {
    font-weight: normal;
    font-size: 14px;
    margin-top: 10px;
    width: 60%;/**/
    }
#plans-amount-label1 {
    font-weight: normal;
    margin-top: 10px;
    font-size: 20px;
    float: right;
    }
#plans-desc-label2 {
    font-weight: normal;
    font-size: 12px;
    margin-top: 10px;
    width: 50%;/**/
    }
#plans-amount-label2 {
    font-weight: normal;
    margin-top: 10px;
    float: right;
    font-size: 14px;    
    }
}