@media screen and (min-device-width: 768px) and (max-device-width: 768px) {
        #operationcard{
    height: 300px;
  
        }
    }
    @media screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
        #operationcard1{
    height: 270px;
  
        }
    }




#testingcard1,#modecard{
height: 270px;
}


@media screen and (min-device-width: 320px) and (max-device-width:767px) {
        #testingcard1,#modecard{
        height: 300px;
        }
    }



@media screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
#pagecard{
  height: 270px;
}
#modecard{
  height: 300px;
}
#behavebutton{
margin-top: -50px;
}
}

*,:before,:after{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
body{
    position:relative;
    background:#fff;
    color:#888;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,serif;
    font-size:16px;
    font-weight:400;
    line-height:1.5
}
img{
    max-width:100%;
    height:auto;
    display:inline-block;
    vertical-align:middle
}
blockquote{
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    padding:0 0 0 15px;
    margin:0 0 20px;
    border-left:5px solid #eee
}
table{
    background-color:transparent;
    border-collapse:collapse;
    border-spacing:0;
    width:100%
}
caption{
    padding-top:8px;
    padding-bottom:8px;
    color:#777;
    text-align:left
}
th{
    text-align:left
}
table{
    width:100%;
    max-width:100%;
    margin-bottom:20px;
    border:1px solid #ddd;
    background:#fff
}
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{
    padding:8px;
    line-height:1.42857143;
    vertical-align:top;
    border-top:1px solid #ddd;
    vertical-align:middle
}
.table > thead > tr > th{
    vertical-align:bottom;
    border-bottom:2px solid #ddd
}
.table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{
    border-top:0
}
.table > tbody + tbody{
    border-top:2px solid #ddd
}
.table .table{
    background-color:#fff
}
.table-condensed > thead > tr > th,.table-condensed > tbody > tr > th,.table-condensed > tfoot > tr > th,.table-condensed > thead > tr > td,.table-condensed > tbody > tr > td,.table-condensed > tfoot > tr > td{
    padding:5px
}
.table-bordered{
    border:1px solid #ddd;
    border-radius:4px
}
.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td{
    border:1px solid #ddd;
    padding:8px
}
.table-bordered > thead > tr > th,.table-bordered > thead > tr > td{
    border-bottom-width:2px
}
.table-striped > tbody > tr:nth-of-type(odd){
    background-color:#f9f9f9
}
.table-hover > tbody > tr:hover{
    background-color:#f5f5f5
}
table col[class*="col-"]{
    position:static;
    display:table-column;
    float:none
}
table td[class*="col-"],table th[class*="col-"]{
    position:static;
    display:table-cell;
    float:none
}
.table > thead > tr > td.active,.table > tbody > tr > td.active,.table > tfoot > tr > td.active,.table > thead > tr > th.active,.table > tbody > tr > th.active,.table > tfoot > tr > th.active,.table > thead > tr.active > td,.table > tbody > tr.active > td,.table > tfoot > tr.active > td,.table > thead > tr.active > th,.table > tbody > tr.active > th,.table > tfoot > tr.active > th{
    background-color:#f5f5f5
}
.table-hover > tbody > tr > td.active:hover,.table-hover > tbody > tr > th.active:hover,.table-hover > tbody > tr.active:hover > td,.table-hover > tbody > tr:hover > .active,.table-hover > tbody > tr.active:hover > th{
    background-color:#e8e8e8
}
.table > thead > tr > td.success,.table > tbody > tr > td.success,.table > tfoot > tr > td.success,.table > thead > tr > th.success,.table > tbody > tr > th.success,.table > tfoot > tr > th.success,.table > thead > tr.success > td,.table > tbody > tr.success > td,.table > tfoot > tr.success > td,.table > thead > tr.success > th,.table > tbody > tr.success > th,.table > tfoot > tr.success > th{
    background-color:#dff0d8
}
.table-hover > tbody > tr > td.success:hover,.table-hover > tbody > tr > th.success:hover,.table-hover > tbody > tr.success:hover > td,.table-hover > tbody > tr:hover > .success,.table-hover > tbody > tr.success:hover > th{
    background-color:#d0e9c6
}
.table > thead > tr > td.info,.table > tbody > tr > td.info,.table > tfoot > tr > td.info,.table > thead > tr > th.info,.table > tbody > tr > th.info,.table > tfoot > tr > th.info,.table > thead > tr.info > td,.table > tbody > tr.info > td,.table > tfoot > tr.info > td,.table > thead > tr.info > th,.table > tbody > tr.info > th,.table > tfoot > tr.info > th{
    background-color:#d9edf7
}
.table-hover > tbody > tr > td.info:hover,.table-hover > tbody > tr > th.info:hover,.table-hover > tbody > tr.info:hover > td,.table-hover > tbody > tr:hover > .info,.table-hover > tbody > tr.info:hover > th{
    background-color:#c4e3f3
}
.table > thead > tr > td.warning,.table > tbody > tr > td.warning,.table > tfoot > tr > td.warning,.table > thead > tr > th.warning,.table > tbody > tr > th.warning,.table > tfoot > tr > th.warning,.table > thead > tr.warning > td,.table > tbody > tr.warning > td,.table > tfoot > tr.warning > td,.table > thead > tr.warning > th,.table > tbody > tr.warning > th,.table > tfoot > tr.warning > th{
    background-color:#fcf8e3
}
.table-hover > tbody > tr > td.warning:hover,.table-hover > tbody > tr > th.warning:hover,.table-hover > tbody > tr.warning:hover > td,.table-hover > tbody > tr:hover > .warning,.table-hover > tbody > tr.warning:hover > th{
    background-color:#faf2cc
}
.table > thead > tr > td.danger,.table > tbody > tr > td.danger,.table > tfoot > tr > td.danger,.table > thead > tr > th.danger,.table > tbody > tr > th.danger,.table > tfoot > tr > th.danger,.table > thead > tr.danger > td,.table > tbody > tr.danger > td,.table > tfoot > tr.danger > td,.table > thead > tr.danger > th,.table > tbody > tr.danger > th,.table > tfoot > tr.danger > th{
    background-color:#f2dede
}
.table-hover > tbody > tr > td.danger:hover,.table-hover > tbody > tr > th.danger:hover,.table-hover > tbody > tr.danger:hover > td,.table-hover > tbody > tr:hover > .danger,.table-hover > tbody > tr.danger:hover > th{
    background-color:#ebcccc
}
.table-responsive{
    min-height:.01%;
    overflow-x:auto;
    box-shadow:0 14px 32px 10px rgba(0,0,0,0.2)
}
@media screen and (max-width: 767px){
    .table-responsive{
        width:100%;
        margin-bottom:15px;
        overflow-y:hidden;
        -ms-overflow-style:-ms-autohiding-scrollbar;
        border:1px solid #ddd
    }
    .table-responsive > .table{
        margin-bottom:0
    }
    .table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{
        white-space:nowrap
    }
    .table-responsive > .table-bordered{
        border:0
    }
    .table-responsive > .table-bordered > thead > tr > th:first-child,.table-responsive > .table-bordered > tbody > tr > th:first-child,.table-responsive > .table-bordered > tfoot > tr > th:first-child,.table-responsive > .table-bordered > thead > tr > td:first-child,.table-responsive > .table-bordered > tbody > tr > td:first-child,.table-responsive > .table-bordered > tfoot > tr > td:first-child{
        border-left:0
    }
    .table-responsive > .table-bordered > thead > tr > th:last-child,.table-responsive > .table-bordered > tbody > tr > th:last-child,.table-responsive > .table-bordered > tfoot > tr > th:last-child,.table-responsive > .table-bordered > thead > tr > td:last-child,.table-responsive > .table-bordered > tbody > tr > td:last-child,.table-responsive > .table-bordered > tfoot > tr > td:last-child{
        border-right:0
    }
    .table-responsive > .table-bordered > tbody > tr:last-child > th,.table-responsive > .table-bordered > tfoot > tr:last-child > th,.table-responsive > .table-bordered > tbody > tr:last-child > td,.table-responsive > .table-bordered > tfoot > tr:last-child > td{
        border-bottom:0
    }
}
a{
    text-decoration:none;
    color:#2f2c2c;
    transition:all .15s linear
}
p{
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    margin:0 0 .75em;
    line-height:26px;
    font-size:14px
}
@media (max-width: 600px){
    p{
        font-size:14px
    }
}
figure{
    margin:0
}
select{
    width:100%;
    border:1px solid #acacac;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none
}
textarea{
    height:auto;
    min-height:50px
}
textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{
    color:#acacac
}
textarea:-moz-placeholder,input:-moz-placeholder{
    color:#acacac
}
textarea:-ms-input-placeholder,input:-ms-input-placeholder{
    color:#acacac
}
input{
    -moz-box-shadow:none;
    box-shadow:none;
    width:100%
}
input:invalid{
    box-shadow:none
}
input:-moz-submit-invalid{
    box-shadow:none
}
input:-moz-ui-invalid{
    box-shadow:none
}
.screen-reader-text{
    clip:rect(1px,1px,1px,1px);
    position:absolute!important;
    height:1px;
    width:1px;
    overflow:hidden
}
.screen-reader-text:focus{
    background-color:#f1f1f1;
    border-radius:3px;
    box-shadow:0 0 2px 2px rgba(0,0,0,0.6);
    clip:auto!important;
    color:#21759b;
    display:block;
    font-size:14px;
    font-size:.875rem;
    font-weight:700;
    height:auto;
    left:5px;
    line-height:normal;
    padding:15px 23px 14px;
    text-decoration:none;
    top:5px;
    width:auto;
    z-index:100000
}
#content[tabindex="-1"]:focus{
    outline:0
}
.ovh{
    overflow:hidden
}
.f-left{
    float:left
}
.f-right{
    float:right
}
.f-none{
    float:none
}
.align-center{
    text-align:center
}
.align-left{
    text-align:left
}
.align-right{
    text-align:right
}
.c-white{
    color:#fff!important;
    text-align: justify;
}
.c-dark{
    color:#2f2c2c!important
}
.c-primary{
    color:#4cc2c0
}
.c-secondary{
    color:#f15b26!important
}
.c-gray{
    color:#acacac!important
}
.c-green{
    color:#3cb878!important
}
.c-orange{
    color:#fcb03b!important
}
.c-semitransparent-white{
    color:rgba(255,255,255,0.15)
}
.shadow-image{
    box-shadow:24px 50px 60px rgba(0,0,0,0.3)
}
.table{
    display:table
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    float:none
}
@media (max-width: 640px){
    .table-cell{
        display:block;
        float:left
    }
}
.text-t-none{
    text-transform:none
}
@media (max-width: 480px){
    .centered-on-mobile{
        text-align:center
    }
}
.overlay--light{
    background:rgba(0,0,0,0.2)
}
.no-padding{
    padding:0
}
.no-margin{
    margin:0
}
.full-block{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0
}
.full-height{
    height:100%
}
.display-flex{
    display:flex;
    align-items:center
}
.display-flex.content-center{
    justify-content:center
}
.inline-block{
    display:inline-block
}
.overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(17,17,17,0.7);
    transition:all .4s ease
}
.full-block-link{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0
}
.medium-padding80{
    padding:80px 0
}
@media (max-width: 800px){
    .medium-padding80{
        padding:35px 0
    }
}
.medium-padding100{
    padding:50px 0  
}
@media (max-width: 800px){
    .medium-padding100{
        padding:35px 0
    }
}
.medium-padding120{
    padding:120px 0
}

@media (max-width: 800px){
    .medium-padding120{
        padding:35px 0
    }
   
}
.pb100{
    padding-bottom:100px
}
@media (max-width: 800px){
    .pb100{
        padding-bottom:35px
    }
}
.pt80{
    padding-top:80px
}
@media (max-width: 800px){
    .pt80{
        padding-top:35px
    }
}
.pt100{
    padding-top:100px
}
@media (max-width: 800px){
    .pt100{
        padding-top:35px
    }
}
.pt400{
    padding-top:400px
}
@media (max-width: 1024px){
    .pt400{
        padding-top:200px
    }
}
@media (max-width: 768px){
    .pt400{
        padding-top:100px
    }
}
.pb360{
    padding-bottom:360px
}
.pb120{
    padding-bottom:120px
}
@media (max-width: 800px){
    .pb120{
        padding-bottom:35px
    }
}
.pt120{
    padding-top:120px
}
@media (max-width: 800px){
    .pt120{
        padding-top:35px
    }
}
.pb80{
    padding-bottom:80px
}
@media (max-width: 800px){
    .pb80{
        padding-bottom:35px
    }
}
.pb30{
    padding-bottom:30px
}
.mt60{
    margin-top:60px
}
@media (max-width: 800px){
    .mt60{
        margin-top:35px
    }
}
.mb30{
    margin-bottom:30px
}
.mb60{
    margin-bottom:60px
}
@media (max-width: 800px){
    .mb60{
        margin-bottom:35px
    }
}
.bg-primary-color{
    background-color:#4cc2c0
}
.bg-secondary-color{
    background-color:#f15b26
}
.bg-orange-color{
    background-color:#fcb03b
}
.bg-orangedark-color{
    background-color:#ff9700
}
.bg-green-color{
    background-color:#3cb878
}
.bg-greendark-color{
    background-color:#8dc63f
}
.bg-white-color{
    background-color:#fff
}
.bg-violet-color{
    background-color:#6739b6
}
.bg-border-color{
    background-color:#f7f9f9!important
}
.bg-dark-color{
    background-color:#302c2d
}
.bg-grey-input{
    background-color:#373434
}
.bg-blue-color{
    background-color:#00bff3
}
.bg-blue-color-light{
    background-color:#64d8ff
}
.bg-yellow-color{
    background-color:#fcd846
}
.bg-pink-color{
    background-color:#e91d62
}
.bg-greydark-color{
    background-color:#434141
}
.font-primary-color{
    color:#4cc2c0!important
}
.font-secondary-color{
    color:#f15b26!important
}
.font-orange-color{
    color:#fcb03b!important
}
.font-orangedark-color{
    color:#ff9700!important
}
.font-green-color{
    color:#3cb878!important
}
.font-greendark-color{
    color:#8dc63f!important
}
.font-white-color{
    color:#fff!important
}
.font-violet-color{
    color:#6739b6!important
}
.font-border-color{
    color:#f7f9f9!important
}
.font-dark-color{
    color:#302c2d!important
}
.font-grey-input{
    color:#373434!important
}
.font-blue-color{
    color:#00bff3!important
}
.font-blue-color-light{
    color:#64d8ff!important
}
.font-yellow-color{
    color:#fcd846!important
}
.font-pink-color{
    color:#e91d62!important
}
.font-greydark-color{
    color:#434141!important
}
.bg-boxed-dark{
    background-image:url(../img/bg-boxed-dark.jpg)
}
.bg-boxed-light{
    background-image:url(../img/bg-boxed-light.jpg)
}
.bg-boxed-red{
    background-image:url(../img/bg-boxed-red.jpg)
}
.bg-boxed-primary{
    background-image:url(../image/breadcrumb/bg-boxed-primary.jpg)
}
.bg-boxed-black{
    background-image:url(../img/bg-boxed-black.jpg)
}
.bg-boxed-blue{
    background-image:url(../img/bg-boxed-blue.jpg)
}
.border-orange-color{
    border-color:#fcb03b
}
.border-green-color{
    border-color:#3cb878
}
.border-primary-color{
    border-color:#4cc2c0
}
.border-secondary-color{
    border-color:#f15b26
}
.facebook-bg-color{
    background-color:#3a589b
}
.twitter-bg-color{
    background-color:#08acee
}
.linkedin-bg-color{
    background-color:#007bb6
}
.google-bg-color{
    background-color:#ea4335
}
.pinterest-bg-color{
    background-color:#ca2127
}
h1,.h1{
    margin:0;
    font-size:28px;
    font-weight:400;
    color:#2f2c2c;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif
}
h1 a,.h1 a{
    color:inherit
}
@media (max-width: 800px){
    h1,.h1{
        font-size:22px
    }
}
@media (max-width: 640px){
    h1,.h1{
        font-size:18px
    }
}
@media (max-width: 480px){
    h1,.h1{
        font-size:18px
    }
}
@media (max-width: 360px){
    h1,.h1{
        font-size:18px
    }
}
h2,.h2{
    margin:0;
    font-size:25px;
    font-weight:400;
    color:#2f2c2c;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif
}
h2 a,.h2 a{
    color:inherit
}
@media (max-width: 800px){
    h2,.h2{
        font-size:18px
    }
}
@media (max-width: 570px){
    h2,.h2{
        font-size:18px
    }
}
@media (max-width: 480px){
    h2,.h2{
        font-size:18px
    }
}
h3,.h3{
    margin:0;
    font-size:30px;
    font-weight:400;
    color:#2f2c2c;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif
}
h3 a,.h3 a{
    color:inherit
}
@media (max-width: 800px){
    h3,.h3{
        font-size:30px
    }
}
@media (max-width: 570px){
    h3,.h3{
        font-size:26px
    }
}
@media (max-width: 480px){
    h3,.h3{
        font-size:22px
    }
}
h4,.h4{
    margin:0;
    font-size:30px;
    font-weight:400;
    color:#2f2c2c;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif
}
h4 a,.h4 a{
    color:inherit
}
@media (max-width: 800px){
    h4,.h4{
        font-size:28px
    }
}
@media (max-width: 570px){
    h4,.h4{
        font-size:24px
    }
}
@media (max-width: 480px){
    h4,.h4{
        font-size:20px
    }
}

h5, .h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #2f2c2c;
    font-family: "Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif;
}



/*@media (max-width: 980px){
    h5,.h5{
        font-size:15px
    }
}
@media (max-width: 480px){
    h5,.h5{
        font-size:14px
    }
}*/
h6,.h6{
    margin:0;
    font-size:18px;
    font-weight:400;
    color:#2f2c2c;
    font-family:"Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif
}
h6 a,.h6 a{
    color:inherit
}
@media (max-width: 800px){
    h6,.h6{
        font-size:15px
    }
}
/*@media (max-width: 480px){
    h6,.h6{
        font-size:13px
    }
}*/
.first-letter--dark-round span:first-of-type{
    display:block;
    position:relative;
    width:70px;
    height:70px;
    background-color:#2f2c2c;
    border-radius:50%;
    float:left;
    margin-right:20px;
    line-height:70px;
    font-size:30px;
    color:#fff;
    text-align:center
}
.first-letter--squared span:first-of-type{
    display:block;
    position:relative;
    width:70px;
    height:70px;
    background-color:#4cc2c0;
    border-radius:5px;
    float:left;
    margin-right:20px;
    line-height:70px;
    font-size:30px;
    color:#fff;
    text-align:center
}
.first-letter--dark span:first-of-type{
    margin-right:20px;
    font-size:48px;
    line-height:48px;
    color:#2f2c2c;
    float:left
}
.first-letter--primary span:first-of-type{
    margin-right:20px;
    font-size:48px;
    line-height:48px;
    color:#4cc2c0;
    float:left
}
.selection--dark::-moz-selection{
    background:#2f2c2c;
    color:#acacac
}
.selection--dark::selection{
    background:#2f2c2c;
    color:#acacac
}
.selection--primary::-moz-selection{
    background:#4cc2c0;
    color:#fff
}
.selection--primary::selection{
    background:#4cc2c0;
    color:#fff
}
.selection--gray::-moz-selection{
    background:#e1e1e1;
    color:#2f2c2c
}
.selection--gray::selection{
    background:#e1e1e1;
    color:#2f2c2c
}
.list > li{
    margin-bottom:18px;
    font-size:18px;
    transition:all .3s ease
}
@media (max-width: 640px){
    .list > li{
        font-size:14px
    }
}
.list > li a,.list > li li{
    color:#acacac;
    display:block;
    overflow:hidden
}
.list > li i{
    margin-right:30px;
    margin-top:8px;
    font-size:12px;
    float:left;
    transition:all .3s ease
}
.list--secondary a:hover,.list--secondary li:hover{
    color:#f15b26
}
.list--secondary i{
    color:#f15b26
}
.list--primary a:hover,.list--primary li:hover{
    color:#4cc2c0
}
.list--primary i{
    color:#4cc2c0
}
.list--standard a:hover,.list--standard li:hover{
    color:#2f2c2c
}
.list--standard .number{
    color:#2f2c2c;
    margin-right:24px;
    float:left
}
.list{
    list-style:none;
    padding:0;
    margin:0
}
 .latest-blog .blog-post-box {
      float:left;
      width:100%;
      border-radius:12px;
      background:#FFFFFF;
      position:relative;
      z-index:1000;
      margin-top:35px;


      -webkit-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
  -moz-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
  box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
  }

  .blog-post-content {
      float:left;
      width:100%;
      padding:30px;
      min-height: 321px;
  }


  .latest-blog figure {
      float:left;
      width:100%;
  }

  .latest-blog figure img {
      float:left;
      text-align:center;
      width:100%;
      border-radius:10px 10px 0 0;
      height:231px;
  }

  .latest-blog ul {
      float:left;
      text-align:left;
      width:100%;
      padding:0px;
      margin:0;
  }

  .latest-blog ul li {
      float:left;
      text-align:left;
      padding:0 15px 0 0;
      margin:0;
      list-style:none;
      font-size:13px;
      color:#a0aec0;
  }

  .latest-blog a {
      display:inherit;
  }

  .latest-blog a h4 {
      float:left;
      width:100%;
      font-size:22px;
      font-weight:600;
      color:#516074;
      text-align:left;
      padding:20px 0 5px 0;
      margin:0;
  }

  .latest-blog span {
      float:left;
      width:100%;
      font-size:12px;
      font-weight:600;
      color:#516074;
      text-align:left;
      padding:0 0 5px 0;
      margin:0;
  }

  .blog-post-box p {
      float:left;
      width:100%;
      font-size:15px;
      font-weight:normal;
      color:#708198;
      text-align:justify;
      padding:20px 0 5px 0;
      margin:0;
      line-height:1.8;
  }

  .latest-blog .blog-more-button {
      float:left;
      width:100%;
      font-size:13px;
      font-weight:700;
      color:#FFFFFF;
      text-transform:uppercase;
      text-align:left;
      letter-spacing:1px;
      padding:40px 0 20px 30px;
      margin:0;
      line-height:1.8;
      border-radius:0 0 12px 12px;
      margin-top:-24px;

      background: rgba(12,206,188,1);
  /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
   /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
  /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
   /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
   /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
   /* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
  /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  }


  @keyframes bounce {
      /* ------------------------ blog hover animation */
      0%, 20%, 60%, 100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
      }

      40% {
          -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
      }

      80% {
          -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
      }
  }

  .latest-blog .blog-post-box:hover {
      animation: bounce 1s;
  }
.container-fluid.wide {
    max-width: 1400px;
  }

  @media screen and (min-width: 768px) {
    .container-fluid.wide {
      padding-left: 5rem;
      padding-right: 5rem;
    }
  }
  .servicescont {
    color: #708198;
    line-height: 1.625rem;
    text-align: justify;
}

 .site-packages {
    margin: 0;
    padding:0 0 40px 0;
    display: block;
    width: 100%;
    clear: both;
    background-color: #f8f7f7;
  }

  .site-packages .color-gredient {
      width:100%;
      height:325px;
  }

  .site-packages-inner {
      margin-top:-300px;
  }

  .site-packages h1 {
    /* Heading */
    margin-bottom: 4.375rem;

  }

  .site-packages .box.left {
      border-radius:12px 0 0 12px;
  }

  .site-packages .box.left .price-box-header {
      border-radius:12px 0 0 0;
  }

  .site-packages .box.right {
      border-radius:0 12px 12px 0;
  }

  .site-packages .box.right .price-box-header {
      border-radius:0 12px 0 0;
  }


  .site-packages .box {
    /* Box (class) */
    background-color: #fcfcfb;
    text-align: center;
    margin:40px 0 0 0;
    width: 100%;
    display: block;
    transition: 300ms linear;
    transition-property: box-shadow;
    max-width:100%;
    border-radius:12px;
   -webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08);
  -moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08);
  box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08);
  }

  @media screen and (max-width: 767px) {
    .site-packages .box {
      margin-left: auto;
      margin-right: auto;
    }

    .site-packages .box.left .price-box-header {
      border-radius:12px 12px 0 0;
      }

   .site-packages .box.left {
      border-radius:12px 12px 0 0;
      }

       .site-packages .box.right .price-box-header {
      border-radius:12px 12px 0 0;
      }

   .site-packages .box.right {
      border-radius:12px 12px 0 0;
      }

  }

  .price-box-header {
      background:#f2f4f5;
      padding-bottom:40px;
      border-radius:12px 12px 0 0;
  }

  .site-packages .price {
    /* price (class) */
    color: #315db7;
    font-size:45px;
    font-weight:700;
    text-align: center;
    display: inline-block;
    margin-top:0;
    position: relative;
    top:0;
    overflow: visible;
    z-index: 1;
    transition: 300ms linear;
    width:100%;
    height:auto;
    line-height:1.5;
  }

  .site-packages .price span {
    /* price (class) */
    font-size:18px;
    font-weight:normal;
  }

  .site-packages .price:before {
    /*content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
    border-radius: 6.9375rem;
    background-color: #f8f7f7;
    z-index: -1;
    border: 0.375rem solid white;
    transition: 300ms linear;
    transition-property: background-color;*/
  }

  .site-packages .heading {
    /* Heading (class) */
    text-align: center;
    color: #4b535e;
    margin-top:0;
    margin-bottom:0;
    padding:40px 0 0 0;
    font-family: inherit;
    font-size:20px;
    font-weight:700;
    line-height:1.5;
  }

  .site-packages .options {
    /* Options (Class) */
    background-color: white;
    margin: 0;
    padding: 0;
    border-top: 0.0625rem solid #f3f1f1;
    text-align: left;
    color: #6c6b6b;
    font-family: inherit;
    font-size:15px;
    font-weight:normal;
    line-height:1;
  }

  .site-packages .options li {
    border-bottom: 0.0625rem solid #f3f1f1;
    position: relative;
    padding: 1.5rem 1.875rem 1.25rem;
    list-style: none;
  }

  .site-packages .options span {
    position: relative;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
    display: block;
    max-width: 14.375rem;
    margin-left: auto;
    margin-right: auto;
  }

  .site-packages .options i.fa, .site-packages .options i.fa.fa-close {
    /* Icons */
    width: 0.813rem;
    height: 0.625rem;
    font-weight: 400;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    margin: 0;
    line-height: 0.875rem;
    color: #2dc100;
    font-size: 0.875rem;
  }

  .site-packages .options i.fa.fa-close {
    color: red;
    line-height: 0.75rem;
  }

  .site-packages a {
    background-color: black;
    border-radius: 15rem;
    color: white;
    font-size:13px;
    font-weight: 700;
   /* line-height: 3.125rem;*/
    text-transform: none;
    /*padding: 0 3.125rem;*/
    margin-bottom: -1.875rem;
    margin-top: 2.1875rem;
    position: relative;
    margin-left: 60px;
    top: 0.625rem;
    display: inline-block;
    vertical-align: baseline;
    transition: 300ms linear;
    transition-property: color, background;
   
  }

  .site-packages .box.active .price-box-header {
      background: rgba(70,200,255,1);
  /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
   /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
  /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
   /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
   /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
   /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
  /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
  /* IE6-9 */
  }

  .site-packages .box.active .heading{
      color:#FFFFFF;
  }

  .site-packages .box.active .price{
      color:#FFFFFF;
  }

  .site-packages .box.active {
      margin-top:0px;
      position:relative;
      z-index:1000;
  }



  .site-packages .box.active, .site-packages .box:hover {
    /* -------------------- active plan */
    /*box-shadow: 0 0 1.75rem rgba(2, 3, 3, 0.15);*/
  }

  .site-packages .box.active a, .site-packages .box:hover a {
    background-color: #315db7;
    color: white;
  }

  .site-packages .box.active .price, .site-packages .box:hover .price {
    /*border-color: #2b8dd9;
    color: white;
    box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);*/
  }

  .site-packages .box.active .price:before, .site-packages .box:hover .price:before {
    /*background-color: #2b8dd9;*/
  }

  .site-packages .box:hover {
    /* ------------------------ hover plan animation */
  }


  @keyframes bounce {
      /* ------------------------ plan hover animation */
      0%, 20%, 60%, 100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
      }

      40% {
          -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
      }

      80% {
          -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
      }
  }

  .site-packages .box:hover {
      animation: bounce 1s;
  }
  .row.no-gutter {
    margin-left: 0;
    margin-right: 0;
  }

  .row.no-gutter [class*='col-']:not(:first-child),
  .row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
  }

  .bold-color {
      color:#315db7;
  }

  /*---  */

  /* Template wrapper */
  .wrapper {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    clear: both;
    overflow: hidden;
    overflow-y: auto;
  }

  /* Template white section and blue section */
  .section-white, .section-blue   {
    margin: 0;
    padding: 0px 0;
    display: block;
    width: 100%;
    clear: both;
    background: white;
    text-align: center;
    overflow: hidden;
    /* Section h1 heading */
  }

  .section-grey  {
    margin: 0;
    padding: 57px 0;
    display: block;
    width: 100%;
    clear: both;
    background: #f2f4f5;
    text-align: center;
    overflow: hidden;
    /* Section h1 heading */
  }

  .section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1 {
    color: #315db7;
    font-size: 2.75rem;
    line-height: 4.125rem;
    font-weight: 300;
    margin-top: 0;
    position: relative;
    margin-bottom: 2.75rem;
  }

  .main-heading-text {
      float:left;
      width:100%;
      padding:0 0 20px 0;
  }

  .main-heading-text p{
      float:left;
      width:100%;
     /* text-align:justify;*/
      font-size:16px;
      color:#708198;
      line-height:1.5;
      white-space:pre-line;
  }

  .site-testimonial .main-heading-text p{
      float:left;
      width:100%;
      text-align:center;
      font-size:16px;
      color:#708198;
      line-height:1.5;
      white-space:pre-line;
      padding:0 0 30px 0;
  }

  @media screen and (max-width: 767px) {
    .section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1 {
      font-size: 2rem;
      line-height:1.2;
    }
  }

  .section-white h1 strong, .section-blue h1 strong {
    font-weight: 700;
  }

  .section-white h1:after, .section-blue h1:after, .section-grey h1:after {
    /* H1 heading icon add */
    content: "";
    position: relative;
    background: url("../images/heading-before.png") no-repeat center;
    background-size: 3.375rem 1.125rem;
    display: block;
    width: 40px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    top: 0.5rem;
  }

  .left-heading h1:after {
    /* H1 heading icon add */
    content: "";
    position: relative;
    background: url("../images/heading-before.png") no-repeat left;
    background-size: 3.375rem 1.125rem;
    display: block;
    min-width: 181px;
    height: 4px;
    margin-left: 0;
    margin-right: auto;
    clear: both;
    top: 0.5rem;
    background-color: #315db7;
  }

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 200px;}
  }

  @keyframes mymove {
      from {left: 0px;}
      to {left: 200px;}
  }


  .testingpara:hover {
    transform: scale(1,1);
    border: solid 2px #FC5185;
    z-index: -1;
    border-radius: 12px;
    transition: transform 0.6s linear;
    transform: scale(0.97, 0.93);
   }
.testingpara {
    height: 300px;
    color: #6c6b6b;
    padding: 26px;
    text-align: justify;
    line-height: 1.5rem;
  }

  .testingmainhover:hover .testinhover {
    background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
 /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
  }
  .testingmainhover:hover {
    position: relative;
    z-index: 1000;
  }

  .servicescont {
    color: #708198;
    line-height: 1.625rem;
	text-align:justify; 
  }

/*@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
        .card_height{
        height: 330px;
        }
    }*/

/*@media screen and (min-device-width: 320px) and (max-device-width: 1200px) {
        .card_height_testing{
        height: 470px;
        }
    }*/

    .subheading{
   color: #315db7;
    font-size: 1.7rem;
   line-height: 4.125rem;
   font-weight: 300;
   margin-top: 0;
   position: relative;
   float: left;
}
@media screen and (min-device-width: 320px) and (max-device-width: 570px) {
        .subheading{
        text-align: left;
        line-height: 35px;
        font-size: 1.3rem;
        font-weight: 500;
        }
        .infotextMain {
   width: 90%;
   margin: auto;
   padding: 0px;
   margin-top: -40px;
   margin-bottom: 10px;
 }
    }
  @media screen and (min-device-width: 320px) and (max-device-width: 425px) {

.stunning-header .stunning-header-content .stunning-header-title {
      color: #fff;
      font-size: 19px;
      font-weight: 400;
      font-family: sans-serif;
      line-height: 1.5;
      text-transform: uppercase;
    }
  }
      @media screen and (min-device-width: 426px) and (max-device-width: 768px) {

.stunning-header .stunning-header-content .stunning-header-title {
      color: #fff;
      font-size: 30px;
      font-weight: 400;
      font-family: sans-serif;
      line-height: 1.5;
      text-transform: uppercase;
    }
  }
   @media screen and (min-device-width: 320px) and (max-device-width: 650px) {
  .stunning-header .stunning-header-content .breadcrumbs {
      margin-top: 15px;
      font-size: 12px;
      line-height: 1.5;
      padding: 0;
    }
    .main_heading_new{
    display:table;
    text-align: left;
    line-height: 1.3;
    color: #315db7;
    font-size: 0.1rem;
    font-weight: 300;
    margin-top: 0;
    position: relative;
    margin-bottom: 2.75rem;

    }
    .mbView{
      display: none;
    }
    .mbViewImg{
      display: none;
    }
    .mbBan{

      margin-top: 120px;
    }
    .header-slider {
    height: 590px;
}
.static-banner .slide-button {
    margin: 70px 0;
}
.banner-caption p {
    margin-top: 20px;
}
.banner-caption h1 {
    margin-top: 40px;
}
  }

 @media screen and (min-device-width: 992px) and 
 (max-device-width: 1200px) {
.DesView{
margin-top: -70px;
}
.mbView{
  margin-top: 70px;
}
  }
  .main_heading_new{
    display:table;
    text-align: left;
    line-height: 1.3;
    color: #315db7;
    font-size: 2.0rem;
    font-weight: 300;
    margin-top: 0;
    position: relative;
    margin-bottom: 1.75rem;
  }

  @media screen and (max-width: 639px) {
    .main_heading_new{
      font-size: 1.16rem;
      margin-top: 65px;

    }
    .main_heading_new:after {
   border-bottom: solid 2px #315db7 !important;
 }
  }

  @media screen and (min-device-width: 640px) and (max-device-width: 768px) {
    .main_heading_new{
      margin-top: 84px;
    }
  }
   .row.no-gutter {
    margin-left: 0;
    margin-right: 0;
  }

  .row.no-gutter [class*='col-']:not(:first-child),
  .row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
  }

  .bold-color {
      color:#315db7;
  }


.main_heading_new:after {
width: 100%;
display: block;
position: relative;
top: 3px;
content: '';
border-bottom: solid 3px #315db7;
transform: scaleX(0);
transition: transform .25s ease-in-out;
}

.main_heading_new:after {
transform: scaleX(1);
}
@media screen and (min-device-width: 992px) and (max-device-width: 1200px) {
.blog-post-box p {
    height: 250px;
    
}
}