html,
body {
    background: #404040;
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
}

a {
    color: #e4d713;
}

input[type="text"]#trp_chk {
    display: none;
}

.mobile {
    display: none;
}

.parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.parent div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.rpp_head {
    position: fixed;
    z-index: 10;
}

.rpp_mobile {
    display: flex;
    flex-direction: row;
}

.rpp_mobile_left {
    text-align: center;
}

.rpp_mobile_right {
    text-align: center;
}

.rpp_mobile_left img {
    width: 90%;
}

.rpp_mobile_right img {
    width: 90%;
}

.rpp_bar {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    position: fixed;
    z-index: 10;
}

.rpp_col_left img {
    width: 35%;
}

.rpp_col_right img {
    width: 35%;
}

.rpp_col_left {
    margin-left: 10px;
    text-align: left;
}

.rpp_col_right {
    margin-right: 10px;
    text-align: right;
}

.rpp_top {
    z-index: 10;
    overflow: hidden;
}

.rpp {
    margin-top: 5%;
    display: flex;
    flex-direction: row;
}

.rpp_left {
    align-items: flex-start;
    margin: auto;
}

.rpp_right {
    margin: auto;
}

.rpp_left img {
    margin-left: auto;
    margin-right: 2%;
    width: 50%;
    height: 50%;
    -webkit-transition: left 1s ease-out;
    -moz-transition: left 1s ease-out;
    -ms-transition: left 1s ease-out;
    -o-transition: left 1s ease-out;
    transition: left 1s ease-out;
}

.rpp_right img {
    margin-left: 2%;
    margin-right: auto;
    width: 50%;
    height: 50%;
    -webkit-transition: right 1s ease-out;
    -moz-transition: right 1s ease-out;
    -ms-transition: right 1s ease-out;
    -o-transition: right 1s ease-out;
    transition: right 1s ease-out;
}

.rpp_m {
    display: flex;
    flex-direction: column;
}

.rpp_m img {
    padding: 4%;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 90%;
}

.rpp_mid {
    z-index: 0;
}

.slide_left {
    left: -600px !important;
}

.slide_right {
    right: 600px !important;
}

.newsletter {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 60px;
    padding-bottom: 60px;
}

.newsletter .button {
    margin: auto;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.newsletter .button h4 {
    padding: 15px;
    cursor: pointer;
    color: #e4d713;
    font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
    font-size: 1.2em;
    text-align: center;

}

.newsletter .buttonStyle {
    font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    padding: 10px;
    color: #e4d713;
    background: #404040;
    border: 2px solid #e4d713;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.newsletter .buttonStyle:hover {
    background: #606060;
}

.mobile .newsletter {
    margin-top: 20px;
}

.mobile .newsletter .button h4 {
    text-align: center;
    font-size: .9em;
}

.press {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 60px;
}

.press td {
    padding: 10px;
}

.company {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 130px 0px;
    width: 100%;
}

.comp-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.comp-info h3 {
    color: #e4d713;
    font-size: 2em;
    font-variant: small-caps;
}

.comp-info p {
    margin: auto;
    font-size: 20px;
    color: #898989;
    text-align: justify;
}

.comp-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.comp-menu h3 {
    color: #e4d713;
    font-variant: small-caps;
}

.index-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 50px;
    width: 100%;
}

.indeximg {
    width: 16.67%;
}

.indeximg a {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
}

.indeximg p {
    text-align: center;
}

* .indeximg-2nd {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.indeximg img {
    cursor: pointer;
}

/*-- photo slider --*/

/*-- //photo slider --*/

.spacer {
    margin-top: 90px;
    padding: 20px;
}

.top-spacer {
    margin-top: 45px;
    padding: 20px;
}

.page-break {
    padding-bottom: 25px;
    border-bottom: 6px solid #898989;
}

.whydi h3 {
    border-bottom: 2px solid #898989;
}

.tandc {
    margin-bottom: 15px;
    margin-top: 15px;
}

.tandc li {
    margin-bottom: 20px;
}

.footnote {
    font-size: 12px;
    text-align: right;
}

.caps {
    font-variant: small-caps;
}

.prodcat {
    background: #b9b9b9;
    font-family: 'Lato', sans-serif;
    margin: 0;
}

.prodcat button {
    font-variant: small-caps;
}

.prod-description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prod-description img {
    background-color: white;
    border: 4px solid black;
    padding: 15px;
    margin: auto;
    height: 90%;
    width: 70%;
}

.prod-description-no-background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prod-description-no-background img {
    padding: 15px;
    margin: auto;
    height: 90%;
    width: 70%;
}

.slct-kit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.slct-kit-mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
}

.slct-kit img {
    width: 90%;
}

.slct-kit-mobile img {
    width: 60%;
}

.slct-kit-mobile div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    width: 40%
}

.slct-kit h4 {
    font-size: 1.3em;
    font-variant: small-caps;
}

.slct-kit hr {
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}

.univ-setup button {
    font-weight: bold;
}

.univ-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.prod-stack {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.prod-stack img {
    margin: auto;
    width: 60%;
}

.prod-stack .prod-stack {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.prod-stack div {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prod-info {
    margin-top: 20px;
    min-width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.prod-info div {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prod-info p {
    text-align: center;
}

.prod-price {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.prod-price h2 {
    font-variant: small-caps;
}

.prod-price h3 {
    font-variant: small-caps;
}

.prodimg img {
    width: 89%;
}

.prodimg-2nd img {
    width: 89%;
}

.prodimg-3rd img {
    width: 70%
}

.prodimg-4th img {
    cursor: pointer;
    width: 50%;
}

.prodimg-4th h3 {
    font-variant: small-caps;
}

.prodimg-5th img {
    background: #ffffff;
    border: 4px solid black;
    padding: 5px;
    height: 80%;
    width: 60%;
}

.prodimg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prodimg-2nd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.prodimg-3rd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.prodimg-4th {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 45px;
    color: #e4d713;
    text-align: center;
    font-style: italic;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.prodimg-5th {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 45px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.title {
    color: #e4d713;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 71px;
    padding: 30px;
}

.title h2 {
    font-variant: small-caps;
}

.title2 {
    color: #e4d713;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-variant: small-caps;
    margin-top: 15px;
    padding: 30px;
}

.title2 h2 {
    font-variant: small-caps;
}

/*-- video --*/

.vidparent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.vidparent p {
    color: #e4d713;
}

.video {
    margin-top: 90px;
    margin-right: 120px;
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/*-- //video --*/

/*-- columns --*/

.col-1-8 {
    width: 12.5%
}

.col-1-6 {
    width: 16.67%
}

.col-1-5 {
    width: 20%
}

.col-1-4 {
    width: 25%
}

.col-1-3 {
    width: 33.33%
}

.col-3-8 {
    width: 37.5%
}

.col-2-5 {
    width: 40%
}

.col-1-2 {
    width: 50%
}

.col-3-5 {
    width: 60%
}

.col-5-8 {
    width: 62.5%
}

.col-2-3 {
    width: 66.66%
}

.col-3-4 {
    width: 75%
}

.col-4-5 {
    width: 80%
}

.col-5-6 {
    width: 83.33%
}

.col-7-8 {
    width: 87.5%
}

/*-- //columns --*/

/*-- banner --*/

.banner {
    background: url("../images/banner/quality_diagram_1920x985.jpg") no-repeat 0px 0px;
    background-color: #000000;
    background-position: center;
    border: 4px solid #000000;
    min-height: 990px;
}

.banner-info {
    margin-top: 10em;
}

.banner-info h2:nth-child(2) {
    margin-top: 70px;
}

.banner-info img {
    width: 25%;
    margin: 0 auto;
}

/*--
.banner-info: img {
    transition: 2s all;
    -webkit-transition: 2s all;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    -moz-transition: 2s all;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
--*/

.banner-info h2 {
    margin: 0;
    text-align: center;
    color: #e4d713;
    font-family: "Arial", sans-serif;
    font-style: italic;
    font-size: 34px;
    font-variant: small-caps;
    font-weight: 700;
}

.banner-info h1 {
    color: #000000;
    margin: 10px 0;
    font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
    font-size: 68px;
    text-align: center;
    font-variant: small-caps;
    font-weight: 700;
}

.learnmore {
    margin: 50px 0 187px 0;
}

/* Sweep To Right */

a.button,
a.button2 {
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* //Sweep To Right */

.arrow-icon {
    margin-top: 39%;
    text-align: center;
}

.arrow-icon img {
    width: 3%;
}

.tooltip-wrap {
    position: relative;
}

.tooltip-wrap .tooltip-content {
    font-size: 45px;
    text-align: center;
    font-variant: small-caps;
    font-weight: bolder;
    color: #e4c416;
    background-color: #404040;
    border-radius: 50px;
    display: none;
    position: relative;
    padding: .1em;
}

.tooltip-wrap:hover .tooltip-content {
    display: block;
}

/*-- //banner --*/

/*-- navigation --*/

.wrap {
    width: 90%;
    margin: 0 auto;
}

.navigation {
    background: #000000;
}

.nav-left {
    width: 4%;
    padding: 5px 0;
    float: left;
}

.nav-left2 {
    width: 25%;
    padding: 5px 0;
    float: left;
}

.bar-right {
    width: 20%;
    padding: 18px 0;
    float: right;
}

.bar-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 10px;
    margin-top: 90px;
}

.bar-left div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    margin-left: 15px;
}

.bar-left h3 {
    color: #898989;
    font-variant: small-caps;
    font-weight: 500;
    padding-right: 15px;
}

.bar-left a {
    color: #e4d713;
    font-size: 16px;
}

@-webkit-keyframes background {
    0% {
        background-color: #404040
    }

    100% {
        background-color: #606060;
    }
}

@keyframes background {
    0% {
        background-color: #404040
    }

    100% {
        background-color: #606060;
    }
}

.bar-left a:focus {
    background: #404040;
    -webkit-animation: background 2s;
    animation: background 2s;
    outline: #404040;
}

.bar-right h3 {
    color: #898989;
    font-weight: 500;
    margin: auto;
    padding: 30px;
    text-align: justify;
}

.bar-right button {
    color: #000000;
    padding: 13px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border: 3px solid #292929;
    background: #898989;
    width: 70%;
}

.bar-right button:hover {
    background: #292929;
    border: 3px solid #090909;
    color: #898989;
    transition: .7s all;
    -webkit-transition: .7s all;
    -o-transition: .7s all;
    -ms-transition: .7s all;
    -moz-transition: .7s all;
}

.nav-left img {
    width: 100%;
}

.nav-left2 img {
    padding: 15px;
    width: 100%;
    /* height: 100%; */
}

.nav-left:hover img {
    transition: 2s all;
    -webkit-transition: 2s all;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    -moz-transition: 2s all;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

/*-- menu --*/

.nav-right span {
    display: none;
}

/*-- //menu --*/

/*-- fixed-header --*/

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0 auto;
    left: 0;
    z-index: 9999;
}

/*-- //fixed-header --*/

.nav-right {
    float: right;
    width: 60%;
    margin-top: 7px;
}

.nav-right ul {
    float: right;
    padding: 0;
    margin: 0;
}

.nav-right ul li {
    display: inline-block;
}

.nav-right ul li a {
    color: #ffffff;
    margin: 25px 5px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.nav-right ul li a:hover {
    color: #e4d713;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
}

/*-- effect for nav --*/

.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    outline: none;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    outline: none;
    opacity: 1;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

/*-- //effect --*/

/*-- //navigation --*/

.container hr {
    border-style: solid;
    border-width: 3px;
}

/*-- about --*/

.about {
    background: #404040;
}

.about ul li {
    display: inline-block;
    margin: 5px;
}

.about-left h3,
.hist-left h3,
.what-info h3,
.team-info h3,
.portfolio-info h3,
.pricing-info h3,
.clients-info h3,
.contact-info h3 {
    font-size: 18px;
    margin: 0 0 14px 0;
    font-weight: 700;
    color: #000000;
}

.about-left h2 {
    color: #e4d713;
    font-size: 27px;
    font-weight: 300;
    margin: 20px 0;
}

.man-left h2 {
    color: #e4d713;
    font-size: 27px;
    font-variant: small-caps;
    font-weight: 300;
}

.man-left h4 {
    color: #000000;
    font-size: 19px;
}

.man-left h3 {
    color: #898989;
}

.man-button h4 {
    background: #898989;
    border: 3px solid #292929;
    color: #000000;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.man-button a {
    background: #898989;
    border: 3px solid #292929;
    color: #000000;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/* .man-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
} */

.man-button {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 80vh;
    align-content: flex-start;
  
}

.man-box {
    margin: 10px;
    padding: 80px;
    border: 1px solid black;
}


* {
    box-sizing: border-box;
  }


.hist-left h2 {
    color: #e4d713;
    font-size: 27px;
    font-variant: small-caps;
    font-weight: 300;
    margin: 20px 0;
}

.hist-left a {
    color: #e4d713;
    font-size: 20px;
    font-variant: small-caps;
    font-weight: 500;
}

.about-left p {
    color: #999999;
    margin: 0;
    font-size: 17px;
    line-height: 1.8em;
    text-align: justify;
}

.hist-left p {
    color: #999999;
    margin: 0;
    font-size: 17px;
    line-height: 1.8em;
    text-align: justify;
    text-align: justify;
}

.about-right img {
    width: 63%;
    height: 312px;
}

.strip {
    background: #999999;
    width: 10%;
    padding: 1px;
}

/*-- //about --*/

.calc li {
    color: #e4d713;
    font-size: 18px;
    font-variant: small-caps;
}

.calc-title {
    color: #e4d713;
    font-size: 18px;
    font-variant: small-caps;
}

/*-- showme --*/

.showme {
    color: #999999;
    text-align: justify;
    font-size: 17px;
}

.showme h2,
.showme h3,
.showme strong {
    font-variant: small-caps;
}

.showme strong {
    font-size: 20px;
}

.showme li {
    cursor: pointer;
}

.showme button {
    background: #898989;
    border: 1px solid #292929;
    color: #000000;
    padding-bottom: 5px;
    margin: 8px 3px 6px;
}

.showme input[type=button] {
    background: #898989;
    border: 1px solid #292929;
    color: #000000;
    font-size: 12px;
    padding-bottom: 5px;
    margin: 8px 3px 6px;
}

.showme button:hover {
    background: #202020;
    border: 1px solid #e4d713;
    color: #ffffff;
}

.showme input[type=button]:hover {
    background: #202020;
    border: 1px solid #e4d713;
    color: #ffffff;
}

.showme marquee {
    background-color: #e4d713;
    color: black;
    font-size: 28px;
    font-variant: small-caps;
    font-weight: bold;
}

.marquee-mobile marquee {
    font-size: 19px;
}

/*-- //showme --*/

/*-- what-we-do --*/

.what-we-do {
    padding-top: 90px;
    background: #404040;
    color: #999999;
}

.what-we-do h3 {
    font-variant: small-caps;
}

.what-we-do button {
    color: #000000;
    padding: 13px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border: 3px solid #292929;
    background: #898989;
    min-width: 300px;
    margin: 0px 40px 0px;
}

.what-we-do button:hover {
    background: #292929;
    border: 3px solid #090909;
    color: #898989;
    transition: .7s all;
    -webkit-transition: .7s all;
    -o-transition: .7s all;
    -ms-transition: .7s all;
    -moz-transition: .7s all;
}

#usa {
    background-image: url("../images/usa_static.jpg");
    background-repeat: no-repeat;
    border: 3px solid black;
    width: 240px;
    height: 132px;
    display: block;
    margin: 0 auto;
    margin-top: 34px;
    margin-bottom: 34px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

#usa:hover {
    background: url("../images/usa_motion.gif");
    background-repeat: no-repeat;
    border: 4px solid #e4d713;
    display: block;
    cursor: pointer;
}

#canada {
    background: url("../images/canada_static.jpg");
    background-repeat: no-repeat;
    border: 3px solid black;
    width: 240px;
    height: 132px;
    display: block;
    margin: 0 auto;
    margin-top: 34px;
    margin-bottom: 34px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

#canada:hover {
    background: url("../images/canada_motion.gif");
    background-repeat: no-repeat;
    border: 4px solid #e4d713;
    display: block;
    cursor: pointer;
}

#international {
    background-image: url("../images/international2.png");
    background-size: 200px 200px;
    background-repeat: no-repeat;
    border: 3px solid black;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

#international:hover {
    background: url("../images/international2.gif");
    background-size: 200px 200px;
    background-repeat: no-repeat;
    border: 4px solid #e4d713;
    display: block;
    cursor: pointer;
}

.locationselection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 45px;
    color: #e4d713;
    text-align: center;
    font-style: italic;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.locationselection h3 {
    font-variant: small-caps;
}

.selectusa {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.selectcan {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.selectcan h3 {
    color: #e4d713;
}

.what-info {
    width: 100%;
}

.what-info h2 {
    color: #e4d713;
    font-variant: small-caps;
}

.location-left {
    width: 35%;
    float: left;
}

.location-right {
    width: 35%;
    float: right;
}

.what-info p {
    margin: 20px 0 0 0;
    color: #999999;
    font-size: 26px;
    font-weight: 300;
    text-align: justify;
}

.what-grids {
    padding: 50px 0;
    width: 100%;
}

.what-grid p {
    color: #999999;
    font-size: 14px;
    margin: 12px 0 0 0;
    text-align: justify;
}

.border {
    width: 20%;
    margin: 0 auto;
    background: rgb(0, 220, 255);
    padding: 1px 0;
}

/*-- //what-we-do --*/

/*-- what-bottom --*/

.what-bottom {
    background: #000000;
    padding: 125px 0;
}

.bottom-grid h3 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    margin: 20px 0 5px 0;
}

.bottom-grid p {
    color: #999999;
    margin: 0;
    font-size: 14px;
    text-align: justify;
}

/*-- //what-bottom --*/

/*-- team --*/

.team {
    background: #797979;
    padding-top: 90px;
}

.team-info {
    width: 65%;
}

.team-info p {
    margin: 20px 0 0 0;
    color: #999999;
    font-size: 26px;
    font-weight: 300;
    text-align: justify;
}

.team-grid {
    background: url("../images/d.jpg") no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    padding: 60px 0;
    position: relative;
    margin: 50px 0 0 0;
}

.team-arrow1 img {
    position: absolute;
    top: -3.8%;
    left: 21%;
}

.team-arrow2 img {
    position: absolute;
    top: -3.8%;
    left: 40%;
}

.team-arrow3 img {
    position: absolute;
    top: -3.8%;
    left: 59%;
}

.team-arrow4 img {
    position: absolute;
    top: -3.8%;
    left: 77%;
}

.team-left h3 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

p.highlight {
    color: #e4d713 !important;
}

.team-left p {
    color: #a8a8a8;
    margin: 0;
    font-size: 16px;
    text-align: justify;
}

.team-left ul {
    margin: 0;
    padding: 0;
}

.team-left ul li {
    display: inline-block;
    padding-left: 3px;
}

.team-left ul li a.fbook {
    background: url("../images/sprite.png") no-repeat 2px -2px;
    width: 30px;
    height: 30px;
    display: block;
}

.team-left ul li a.fbook:hover {
    background: url("../images/sprite.png") no-repeat -22px -2px;
    border-radius: 3px;
}

.team-left ul li a.twitt {
    background: url("../images/sprite.png") no-repeat -50px -2px;
    width: 30px;
    height: 30px;
    display: block;
}

.team-left ul li a.twitt:hover {
    background: url("../images/sprite.png") no-repeat -79px -3px #e4d713;
    border-radius: 3px;
}

.team-left ul li a.pinin {
    background: url("../images/sprite.png") no-repeat -108px -3px;
    width: 30px;
    height: 30px;
    display: block;
}

.team-left ul li a.pinin:hover {
    background: url("../images/sprite.png") no-repeat -138px -4px #e4d713;
    border-radius: 3px;
}

.team-left p:nth-child(3) {
    margin: 25px 0;
}

.bar p {
    color: #ffffff;
    text-align: right;
    font-size: 14px;
    margin: 26px 0 0 0;
    text-align: justify;
}

ul.resp-tabs-list li {
    display: inline-block;
    width: 23%;
    position: relative;
}

ul.resp-tabs-list li:hover label.sed-in {
    display: block;
}

label.sed-in {
    background: rgba(228, 215, 19, 0.64);
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 4px solid #000000;
    display: none;
}

/*-- start tabs --*/

.sap_tabs {
    margin: 80px 0 0 0;
}

.resp-tabs-list {
    width: 1170px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.resp-tabs-list ul {
    margin: 0;
}

.resp-tab-item:first-child {
    border-left: none;
}

.resp-tab-item {
    font-size: 0.8125em;
    cursor: pointer;
    display: inline-block;
    margin: 0 11px;
    text-align: center;
    list-style: none;
    float: left;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: uppercase;
}

.resp-tab-active {}

.resp-tab-item span {}

.resp-tabs-container {
    padding: 0px;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
}

.resp-content-active,
.resp-accordion-active {
    display: block;
}

h2.resp-accordion {
    font-size: 1em;
    margin: 0px;
    padding: 10px 15px;
    background: #e4d713;
    margin: 10px 0;
    color: #30318b;
}

h2.resp-accordion:hover {
    background: #e4d713;
    text-shadow: none;
}

/*-- //start tabs --*/

/*-- //team --*/

/*-- portfolio --*/

#portfolio {
    background: #404040;
}

.portfolio-info {
    width: 79%;
}

.portfolio-info p {
    margin: 20px 0 0 0;
    color: #999999;
    font-size: 26px;
    font-weight: 300;
    text-align: justify;
}

.portfolio-wrapper h3 {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0px;
    padding: 2px;
}

.b-animate-go:hover div.portfolio-wrapper h3 {
    color: #ffffff;
}

.portfolio-wrapper p {
    color: #999999;
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    margin: 0 0 0 20px;
    text-align: justify;
}

/*----- Strip -----*/

.b-link-stripe {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-weight: 300;
    overflow: hidden;
}

.b-link-stripe .b-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
}

.b-wrapper h3 {
    background: rgba(0, 0, 0, 0.45);
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #a8a8a8;
    font-size: 18px;
    font-variant: small-caps;
}

.b-wrapper:hover h3 {
    background: #000000;
    color: #e4d713;
}

.b-link-stripe .b-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    background: rgba(15, 207, 140, 0.9);
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    opacity: 0;
    visibility: hidden;
    /* lt-ie9 */
}

/*------------------------------------------*/

/*	Animation effects
/*------------------------------------------*/

.b-animate-go {
    text-decoration: none;
}

.b-animate {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    visibility: hidden;
}

.b-animate img {
    margin-top: 28.5%;
    display: -webkit-inline-box;
}

/* lt-ie9 */

.b-animate-go:hover .b-animate {
    visibility: visible;
}

.b-from-left {
    position: relative;
    left: -100%;
}

.b-animate-go:hover .b-from-left {
    left: 0;
}

ul#filters {
    padding: 0px;
    margin: 79px auto 47px auto;
    width: 40%;
}

/*--team--*/

.b-wrapper:hover {
    background: rgba(228, 215, 19, 0.45);
    border: 2px solid #000000;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

/* lt-ie9 */

.b-link-stripe:hover .b-line {
    visibility: visible;
}

.b-link-stripe .b-line1 {
    left: 0;
}

.b-link-stripe .b-line2 {
    left: 20%;
    transition-delay: 0.1s !important;
    -moz-transition-delay: 0.1s !important;
    -ms-transition-delay: 0.1s !important;
    -o-transition-delay: 0.1s !important;
    -webkit-transition-delay: 0.1s !important;
}

.b-link-stripe .b-line3 {
    left: 40%;
    transition-delay: 0.2s !important;
    -moz-transition-delay: 0.2s !important;
    -ms-transition-delay: 0.2s !important;
    -o-transition-delay: 0.2s !important;
    -webkit-transition-delay: 0.2s !important;
}

.b-link-stripe .b-line4 {
    left: 60%;
    transition-delay: 0.3s !important;
    -moz-transition-delay: 0.3s !important;
    -ms-transition-delay: 0.3s !important;
    -o-transition-delay: 0.3s !important;
    -webkit-transition-delay: 0.3s !important;
}

.b-link-stripe .b-line5 {
    left: 80%;
    transition-delay: 0.4s !important;
    -moz-transition-delay: 0.4s !important;
    -ms-transition-delay: 0.4s !important;
    -o-transition-delay: 0.4s !important;
    -webkit-transition-delay: 0.4s !important;
}

.b-link-stripe:hover .b-line {
    opacity: 1;
}

#filters {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 6%;
}

#filters div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#filters div span {
    border-radius: 4px;
    padding: 6px 26px;
    text-decoration: none;
    color: #000000;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    margin: 0 10px 0 0;
}

#filters div span.active,
#filters div span:hover {
    background: #e4d713;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding-left: 2.5em;
    padding-right: 2.5em;
    width: 20%;
    display: none;
    float: none;
    overflow: hidden;
}

.portfolio-wrapper {
    overflow: hidden;
    position: relative !important;
    cursor: pointer;
}

.portfolio img {
    max-width: 100%;
    /*--position: relative;--*/
    transition: all 300ms !important;
    -webkit-transition: all 300ms !important;
    -moz-transition: all 300ms !important;
}

.portfolio .label {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: -40px;
}

.portfolio .label-bg {
    background: #22B4B8;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio .label-text {
    color: #fff;
    position: relative;
    z-index: 500;
    padding: 5px 8px;
}

.portfolio .text-category {
    display: block;
    font-size: 9px;
    font-size: 12px;
    text-transform: uppercase;
}

.prod-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-left: 20px;
}

/* Self Clearing Goodness */

.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*-- //portfolio --*/

/*-- pricing --*/

.pricing {
    background: #404040;
    padding: 90px 0;
}

.pricing-info {
    width: 56%;
}

.pricing-info p {
    margin: 20px 0 0 0;
    color: #999999;
    font-size: 26px;
    font-weight: 300;
    text-align: justify;
}

.pricing-grid:hover div.basic-plan h3 {
    color: #e4d713;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.pricing-grid:hover div.basic-plan p span {
    color: #e4d713;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.pricing-grid:hover div.basic-plan p label {
    color: #e4d713;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.pricing-grid:hover div.basic-plan p {
    color: #e4d713;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.basic-plan h3 {
    color: #000;
    margin: 0px;
    font-size: 25px;
}

.basic-plan p {
    padding: 15px 0;
    color: #000000;
    margin: 0px;
    font-size: 20px;
    font-weight: 400;
}

.basic-plan p span {
    font-size: 50px;
}

.basic-plan p label {
    font-size: 30px;
}

.pricing-grids {
    margin: 100px 0 0 0;
}

.pricing-grid:hover div.sign-up a {
    color: #000;
    background: #e4d713;
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.pricing-grid:hover {
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    background: #262626;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.pricing-grid {
    width: 24.7%;
    background: #262626;
    padding: 0 37px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    text-align: center;
    float: right;
}

.pricing-grid ul {
    margin: 0px;
    padding: 0px;
}

.pricing-grid ul li {
    list-style-type: none;
    color: #000000;
    padding: 12px 0;
}

.rent-button {
    margin-top: 1.5em;
}

.rent-button a {
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    background: #333333;
    font-size: 15px;
    min-width: 200px;
    text-align: center;
}

.rent-wrap:hover {
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.rent-button:hover a {
    color: #000;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    background: #e4d713;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.sign-up {
    margin-top: 2.5em;
}

.sign-up a {
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    background: #333333;
    font-size: 15px;
}

.pricing-grid ul li:nth-child(5) {
    border: none;
}

/*-- //pricing --*/

/*-- clients --*/

.trade {
    padding: 100px 0;
    background: #ffffff;
}

.trade h2 {
    font-size: 40px;
    font-variant: small-caps;
}

.client {
    padding: 30px;
    background: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.client img {
    width: 100px;
}

.clients {
    padding: 30px 0;
    background: #ffffff;
}

.clients-info {
    width: 80%;
}

.clients-info p {
    margin: 20px 0 0 0;
    color: #999999;
    font-size: 26px;
    font-weight: 300;
    text-align: justify;
}

.client-grid {
    float: left;
    height: 100px;
    line-height: 100px;
    width: 12.5%;
}

.clients-grids {
    margin-top: 70px;
}

/*-- //clients --*/

/*-- contact --*/

.contact {
    background: #404040;
    padding: 90px 0;
    color: #898989;
}

.contact h1,
.contact h4 {
    color: #e4d713;
    font-weight: 500;
}

.contact h3 {
    font-family: 'Lato', sans-serif;
}

.contact button {
    color: #000000;
    font-size: 16px;
    cursor: pointer;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border: 3px solid #292929;
    background: #898989;
}

.contact-info {
    margin-bottom: 52px;
    width: 61%;
}

.contact-form h3 {
    color: #e4d713;
    font-size: 27px;
    font-weight: 400;
}

.contact-add {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.contact-add h1,
.contact-add h4 {
    font-variant: small-caps;
}

.contact-add button {
    max-width: 100px;
}

.contact-map {
    height: 100%;
    width: auto;
}

.holiday {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.holiday-title {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-variant: small-caps;
}

.holiday h3 {
    color: #e4d713;
    cursor: pointer;
    text-align: center;
    margin-bottom: 60px;
}

.holiday-exp {
    font-size: 18px;
    margin-bottom: 60px;
}

.holiday-name {
    color: #e4d713;
    font-variant: small-caps;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #404040;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #404040;
    opacity: 1;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #404040;
    opacity: 1;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #404040;
}

.contact-us {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
}

.contact-us form {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.contact-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.contact-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.contact-right div {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.contact-left input[type="text"],
.contact-left input[type="email"] {
    background: #898989;
    width: 93%;
    color: #090909;
    margin: 0 23px 23px 0;
    padding: 12px 10px;
    outline: none;
    border: 1px solid #000000;
}

.contact-right input[type="text"] {
    background: #898989;
    width: 45%;
    color: #090909;
    margin: 0 23px 23px 0;
    padding: 12px 10px;
    outline: none;
    border: 1px solid #000000;
}

.contact-right textarea {
    background: #898989;
    width: 93.1%;
    color: #090909;
    resize: none;
    height: 185px;
    padding: 15px;
    outline: none;
    border: 1px solid #000000;
}

.contact-form input[type="submit"] {
    color: #000000;
    padding: 13px 43px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border: 3px solid #e4d713;
    background: #e4d713;
}

.contact-form input[type="submit"]:hover {
    background: #000000;
    border: 3px solid #e4d713;
    color: #e4d713;
    transition: .5s all;
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    -moz-transition: .5s all;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

/*-- //contact --*/

/*-- footer --*/

.footer {
    background: #404040;
    height: 80px;
    padding: 20px 0;
}

.footer-left {
    float: left;
}

.footer-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 1.5%;
}

.footer-left p {
    font-size: 15px;
    margin: 15px 0 0 0;
    color: #999999;
}

.footer-right ul {
    margin: 0;
    padding: 0;
}

.footer-right ul li {
    display: inline-block;
    padding-left: 3px;
}

.footer-right ul li a.fb {
    background: url("../images/a.png") no-repeat 0px 0px;
    width: 44px;
    height: 44px;
    display: block;
}

.footer-right ul li a.fb:hover {
    border: 1px solid #e4d713;
    background: url("../images/i.png") no-repeat 0px 0px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
}

.footer-right ul li a.twit {
    background: url("../images/a.png") no-repeat -50px 0px;
    width: 44px;
    height: 44px;
    display: block;
}

.footer-right ul li a.twit:hover {
    border: 1px solid #e4d713;
    background: url("../images/i.png") no-repeat -50px 0px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
}

.footer-right ul li a.googl {
    background: url("../images/a.png") no-repeat -100px 0px;
    width: 44px;
    height: 44px;
    display: block;
}

.footer-right ul li a.googl:hover {
    border: 1px solid #e4d713;
    background: url("../images/i.png") no-repeat -100px 0px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
}

.footer-right ul li a.linkin {
    background: url("../images/a.png") no-repeat -150px 0px;
    width: 44px;
    height: 44px;
    display: block;
}

.footer-right ul li a.linkin:hover {
    border: 1px solid #e4d713;
    background: url("../images/i.png") no-repeat -150px 0px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
}

.fa-bkgrnd {
    background-color: #808080 !important;
    margin: 2px !important;
    text-align: center !important;
    width: 70% !important;
    height: 100% !important;
}

.fa-bkgrnd:hover {
    background-color: #606060 !important;
    border: 2px solid #e4d713 !important;
    margin-bottom: 25px !important;
    transition: .5s all !important;
    -webkit-transition: .5s all !important;
    -moz-transition: .5s all !important;
    -o-transition: .5s all !important;
    -ms-transition: .5s all !important;
}

.fa-color {
    color: #404040 !important;
    margin: 2px !important;
    padding: 10px !important;
}

.fa-color:hover {
    color: #E4D713 !important;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    /* Height of the footer */
}

/*-- //footer --*/

/*-- sticky footer --*/

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;
}

.footer,
.push {
    height: 80px;
}

/*-- //sticky footer --*/

/*-- to-top --*/

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 0px;
    right: 2%;
    overflow: hidden;
    z-index: 999;
    width: 32px;
    height: 32px;
    border: none;
    text-indent: 100%;
    background: url("../images/arr.png") no-repeat 0px 0px;
}

#toTopHover {
    width: 32px;
    height: 32px;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

/*-- //to-top --*/

@media (max-width: 1440px) {
    .nav-right {
        float: right;
        width: 70%;
    }

    .nav-left2 {
        display: none;
    }

    .team-arrow1 img {
        left: 17%;
    }

    .team-arrow2 img {
        left: 38%;
    }

    .team-arrow4 img {
        left: 80%;
    }

    .portfolio-wrapper h3 {
        margin: 50px 0 0 20px;
    }

    ul#filters {
        margin: 66px auto 38px auto;
    }

    .b-animate-go img {
        width: 70%;
    }

    .b-wrapper h3 {
        font-size: 16px;
        width: 80%;
    }
}

@media (max-width: 1366px) {
    .banner-info h1 {
        font-size: 65px;
    }

    .banner-info h2 {
        font-size: 30px;
    }

    .banner-info img {
        width: 9%;
    }

    .arrow-icon img {
        width: 2.5%;
    }

    .banner-info h2:nth-child(2) {
        margin-top: 56px;
    }

    .learnmore {
        margin: 50px 0 170px 0;
    }

    .banner {
        min-height: 935px;
    }

    .nav-right {
        width: 67.5%;
        margin-top: 3px;
    }

    .nav-left {
        padding: 16px 0;
    }

    .bar-right {
        padding: 16px 0;
    }

    .team-arrow1 img {
        left: 16%;
    }

    .team-arrow2 img {
        left: 38%;
    }

    .team-arrow3 img {
        left: 59%;
    }

    .team-arrow4 img {
        left: 81%;
    }

    ul#filters {
        width: 40%;
    }

    .b-animate img {
        width: 16%;
    }

    .pricing-grids {
        margin: 68px 0 0 0;
    }

    .contact-form input[type="submit"] {
        padding: 10px 30px;
    }

    .b-animate-go img {
        width: 70%;
    }

    .b-wrapper h3 {
        font-size: 16px;
        width: 80%;
    }
}

@media (max-width: 1280px) {
    .nav-right {
        width: 70%;
    }

    .nav-left2 {
        width: 20%;
    }

    .team-arrow1 img {
        left: 13%;
    }

    .team-arrow2 img {
        left: 37%;
    }

    .team-arrow3 img {
        left: 61%;
    }

    .team-arrow4 img {
        left: 84%;
    }

    ul#filters {
        width: 43%;
    }

    .b-animate-go img {
        width: 70%;
    }

    .b-wrapper h3 {
        font-size: 14px;
        width: 80%;
    }
}

@media (max-width: 1083px) {
    .nav-right {
        width: 70%;
    }

    .nav-left2 {
        width: 20%;
    }
}

@media (max-width: 1024px) {
    .nav-right {
        width: 70%;
    }

    .nav-left2 {
        width: 20%;
    }

    .banner-info h1 {
        font-size: 60px;
    }

    .banner-info h2 {
        font-size: 26px;
    }

    a.button,
    a.button2 {
        padding: 8px 18px;
    }

    .banner {
        display: none;
        min-height: 20px;
        background: url("../images/banner2.jpg") no-repeat -332px -327px;
    }

    .banner-info {
        margin-top: 1em;
    }

    .learnmore {
        margin: 50px 0 150px 0;
    }

    .nav-right ul li a {
        margin: 25px 0px;
    }

    .nav-left {
        width: 5%;
    }

    .bar-right {
        width: 15%;
    }

    .col-md-7.about-left {
        float: left;
        width: 60%;
    }

    .col-md-7.man-left {
        float: left;
        width: 100%;
    }

    .col-md-7.hist-left {
        float: left;
        width: 60%;
    }

    .col-md-5.about-right {
        float: right;
        width: 40%;
    }

    .about-right img {
        height: 290px;
        width: 68%;
    }

    .col-md-5.hist-right {
        float: right;
    }

    .hist-right img {
        width: 220px;
    }

    .what-grids {
        padding: 65px 0 82px 0;
    }

    .about,
    .what-we-do,
    .team,
    #portfolio {
        padding-top: 92px;
    }

    .what-grid p {
        overflow: hidden;
        height: 65px;
    }

    .what-bottom {
        padding: 88px 0;
    }

    .what-info {
        width: 69%;
    }

    .team-info {
        width: 79%;
    }

    ul.resp-tabs-list li span img {
        width: 100%;
    }

    ul.resp-tabs-list li {
        width: 22.7%;
    }

    .resp-tabs-list {
        width: 1007px;
    }

    .sap_tabs {
        margin: 55px 0 0 0;
    }

    .team-left p {
        font-size: 14px;
    }

    .team-grid {
        margin: 40px 0 0 0;
    }

    .team-arrow1 img {
        left: 11%;
    }

    ul#filters {
        width: 53%;
    }

    .portfolio-wrapper h3 {
        font-size: 14px;
        margin: 29px 0 0 20px;
    }

    .portfolio-wrapper p {
        font-size: 13px;
    }

    .b-animate-go img {
        width: 70%;
    }

    .b-wrapper h3 {
        font-size: 14px;
        width: 80%;
    }

    .pricing-info {
        width: 70%;
    }

    .basic-plan p label {
        font-size: 24px;
    }

    .basic-plan p {
        font-size: 14px;
    }

    .basic-plan p span {
        font-size: 45px;
    }

    .basic-plan h3 {
        font-size: 20px;
    }

    .sign-up a {
        padding: 8px 15px;
    }

    .sign-up {
        margin-top: 1.5em;
    }

    .clients-info {
        width: 90%;
    }

    .clients {
        padding: 82px 0;
    }

    .clients-grids {
        margin-top: 52px;
    }

    .contact-form input[type="submit"] {
        padding: 6px 19px;
    }

    .contact-left {
        width: 34%;
    }

    .contact-right {
        width: 65%;
    }
}

@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .nav-right {
        width: 20%;
    }

    .nav-left2 {
        display: block;
        width: 50%;
    }

    .banner-info img {
        width: 10%;
    }

    .banner {
        max-height: 645px;
        background: url("../images/banner2.jpg") no-repeat -458px -513px;
    }

    .fixed {
        position: absolute;
    }

    span.menu {
        display: block;
        cursor: pointer;
        width: 100%;
        position: relative;
        text-align: right;
        margin-top: 18px;
    }

    ul.nav1 {
        display: none;
        background: #000000;
    }

    .nav-right ul.nav1 li {
        display: inline-block;
        text-align: center;
        margin: 0;
        width: 100%;
        padding: 0px 0;
    }

    .banner-info h1 {
        font-size: 45px;
    }

    .banner-info h2 {
        font-size: 20px;
    }

    .banner-info {
        margin-top: 9em;
    }

    .learnmore {
        margin: 50px 0 109px 0;
    }

    .arrow-icon img {
        width: 3%;
    }

    .nav-right ul {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 77.8%;
        left: 0%;
        width: 100%;
        z-index: 999;
    }

    .nav-left {
        width: 6%;
    }

    .bar-right {
        width: 15%;
    }

    .about-left h2 {
        font-size: 21px;
    }

    .man-left h2 {
        font-size: 21px;
    }

    .about-left p {
        font-size: 15px;
    }

    .hist-left h2 {
        font-size: 21px;
    }

    .hist-left p {
        font-size: 15px;
    }

    .about,
    .what-we-do,
    .team,
    #portfolio {
        padding-top: 110px;
    }

    .about-right img {
        height: 286px;
        width: 78%;
    }

    .hist-right img {
        width: 220px;
    }

    .what-info p,
    .team-info p,
    .portfolio-info p,
    .pricing-info p,
    .clients-info p {
        font-size: 20px;
    }

    .col-md-3.what-grid {
        width: 50%;
    }

    .what-grid h3 {
        font-size: 13px;
    }

    .what-grids {
        padding: 48px 0 0 0;
    }

    .col-md-3.bottom-grid {
        float: left;
        width: 25%;
    }

    .what-bottom {
        padding: 75px 0;
    }

    .sap_tabs {
        margin: 33px 0 0 0;
    }

    ul.resp-tabs-list li {
        width: 22%;
    }

    .resp-tabs-list {
        width: 751px;
    }

    .team-grid {
        margin: 30px 0 0 0;
    }

    .team-arrow1 img,
    .team-arrow2 img,
    .team-arrow3 img,
    .team-arrow4 img {
        top: -2.8%;
    }

    .team-arrow2 img {
        left: 36%;
    }

    .team-arrow4 img {
        left: 86%;
    }

    .col-md-7.team-left {
        float: left;
        width: 80%;
    }

    .col-md-5.team-right {
        float: right;
        width: 40%;
    }

    .bar p {
        margin: 12px 0 0 0;
        font-size: 13px;
    }

    .team-left p:nth-child(3) {
        margin: 15px 0;
        overflow: hidden;
        height: 104px;
    }

    .portfolio-info {
        width: 88%;
    }

    ul#filters {
        width: 71%;
        margin: 28px auto 28px auto;
    }

    .portfolio-wrapper h3 {
        font-size: 13px;
        margin: 13px 0 0 7px;
    }

    .portfolio-wrapper p {
        margin: 0 0 0 7px;
        font-size: 11px;
    }

    .pricing,
    .clients,
    .contact {
        padding: 60px 0;
    }

    .pricing-grid {
        padding: 0 17px
    }

    .pricing-grid ul li {
        padding: 9px 0;
    }

    .sign-up {
        margin-top: 1em;
    }

    .basic-plan p span {
        font-size: 38px;
    }

    .border {
        width: 28%;
    }

    .pricing-grids {
        margin: 32px 0 0 0;
    }

    .clients-grids {
        margin-top: 33px;
    }

    .contact-info {
        margin-bottom: 32px;
    }

    .contact-left {
        width: 37%;
    }

    .contact-left input[type="text"],
    .contact-right input[type="text"],
    .contact-left input [type="email"] {
        padding: 9px;
    }

    .contact-right {
        width: 63%;
    }

    .contact-right textarea {
        height: 167px;
        padding: 8px;
    }

    .contact-form input[type="submit"] {
        font-size: 14px;
    }

    .client-grid img {
        width: 80%;
    }
}

@media (max-width: 640px) {
    .banner-info img {
        width: 12%;
    }

    .banner {
        min-height: 645px;
        background: url("../images/banner2.jpg") no-repeat -518px -513px;
    }

    .banner-info h1 {
        font-size: 39px;
    }

    .banner-info h2 {
        font-size: 17px;
    }

    a.button,
    a.button2 {
        font-size: 13px;
    }

    .arrow-icon img {
        width: 4% !important;
    }

    .nav-right ul {
        top: 153.6%;
    }

    .nav-right ul li a {
        margin: 17px 0px;
    }

    span.menu {
        margin-top: 14px;
    }

    .about-left h2 {
        font-size: 17px;
    }

    .man-left h2 {
        font-size: 17px;
    }

    .about-left p {
        font-size: 14px;
    }

    .hist-left h2 {
        font-size: 17px;
    }

    .hist-left p {
        font-size: 14px;
    }

    .about-right img {
        height: 270px;
        width: 96%;
    }

    .what-info p,
    .team-info p,
    .portfolio-info p,
    .pricing-info p,
    .clients-info p {
        font-size: 16px;
    }

    .col-md-3.what-grid:nth-child(2) {
        display: none;
    }

    .col-md-3.what-grid {
        float: left;
        width: 33.3%;
    }

    .what-grid h3 {
        font-size: 13px;
    }

    .bottom-grid p {
        font-size: 12px;
    }

    .bottom-grid h3 {
        font-size: 29px;
    }

    .team-info {
        width: 78%;
    }

    ul.resp-tabs-list li {
        width: 21.4%;
    }

    .resp-tabs-list {
        width: 622px;
    }

    .team-arrow1 img,
    .team-arrow2 img,
    .team-arrow3 img,
    .team-arrow4 img {
        top: -4.8%;
    }

    .team-arrow1 img {
        left: 9%;
    }

    .team-arrow2 img {
        left: 35%;
    }

    .team-arrow3 img {
        left: 60%;
    }

    .team-arrow4 img {
        left: 84%;
    }

    .team-grid {
        padding: 45px 0;
    }

    #portfoliolist .portfolio:nth-child(5) {
        display: none !important;
    }

    #portfoliolist .portfolio:nth-child(10) {
        display: none !important;
    }

    #portfoliolist .portfolio {
        width: 20%;
    }

    ul#filters {
        width: 85%;
        margin: 21px auto 21px auto;
    }

    .about-left h3,
    .hist-left h3,
    .what-info h3,
    .team-info h3,
    .portfolio-info h3,
    .pricing-info h3,
    .clients-info h3,
    .contact-info h3 {
        font-size: 16px;
    }

    .pricing-info {
        width: 68%;
    }

    .pricing-grid:nth-child(4) {
        display: none;
    }

    .pricing-grid {
        width: 33.3%;
    }
}

@media (max-width: 480px) {
    .banner-info {
        margin-top: 5em;
    }

    .banner-info h1 {
        font-size: 31px;
    }

    .banner {
        min-height: 462px;
        background: url("../images/banner2.jpg") no-repeat -618px -681px;
    }

    .banner-info h2:nth-child(2) {
        margin-top: 39px;
    }

    .banner-info img {
        width: 14%;
    }

    .learnmore {
        margin: 30px 0 66px 0;
    }

    .banner-info h2 {
        font-size: 14px;
    }

    .arrow-icon img {
        width: 4.5% !important;
    }

    .nav-left {
        width: 9%;
    }

    .bar-right {
        width: 9%;
    }

    span.menu {
        margin-top: 17px;
    }

    .nav-right ul {
        top: 114.6%;
    }

    a.button,
    a.button2 {
        font-size: 11px;
    }

    .strip {
        width: 20%;
    }

    .about-left h2 {
        font-size: 14px;
    }

    .man-left h2 {
        font-size: 14px;
    }

    .hist-left h2 {
        font-size: 14px;
    }

    .about-left h3,
    .hist-left h3,
    .what-info h3,
    .team-info h3,
    .portfolio-info h3,
    .pricing-info h3,
    .clients-info h3,
    .contact-info h3 {
        font-size: 14px;
    }

    .about-left p {
        font-size: 14px;
        overflow: auto;
        height: auto;
    }

    .hist-left p {
        font-size: 14px;
        overflow: auto;
        height: auto;
    }

    .about-right img {
        height: 248px;
        width: 104%;
    }

    .what-info p,
    .team-info p,
    .portfolio-info p,
    .pricing-info p,
    .clients-info p {
        font-size: 14px;
    }

    .what-info {
        width: 81%;
    }

    .what-grid h3 {
        font-size: 10px;
    }

    .what-grid p {
        font-size: 13px;
        overflow: auto;
        height: auto;
    }

    .col-md-3.bottom-grid:nth-child(3) {
        display: none;
    }

    .col-md-3.bottom-grid {
        width: 33.3%;
    }

    ul.resp-tabs-list li:nth-child(4) {
        display: none;
    }

    ul.resp-tabs-list li {
        width: 28.5%;
    }

    .resp-tabs-list {
        width: 460px;
    }

    .bar p {
        margin: 8px 0 0 0;
        font-size: 11px;
    }

    .team-left p:nth-child(3) {
        margin: 5px 0;
    }

    .team-arrow1 img {
        left: 12%;
    }

    .team-arrow2 img {
        left: 45%;
    }

    .team-arrow3 img {
        left: 78%;
    }

    .team-left p {
        font-size: 13px;
    }

    #filters li span {
        padding: 3px 10px;
        font-size: 13px;
        margin: 0;
    }

    ul#filters {
        width: 94%;
    }

    .b-animate img {
        width: 20%;
        margin-top: 17.9%;
    }

    .portfolio-wrapper h3 {
        font-size: 12px;
        margin: 6px 0 0 7px;
    }

    .portfolio-wrapper p {
        font-size: 10px;
    }

    .bottom-grid h3 {
        font-size: 25px;
        margin: 13px 0 5px 0;
    }

    .what-bottom {
        padding: 60px 0;
    }

    .portfolio-info {
        width: 94%;
    }

    .pricing-info {
        width: 74%;
    }

    .team-info {
        width: 92%;
    }

    .what-grids {
        padding: 33px 0 60px 0;
    }

    .pricing-grid ul li {
        font-size: 12px;
    }

    .basic-plan p span {
        font-size: 33px;
    }

    .basic-plan p label {
        font-size: 19px;
    }

    .pricing-grid {
        padding: 0 12px;
    }

    .basic-plan p {
        padding: 5px 0;
    }

    .basic-plan h3 {
        font-size: 17px;
    }

    .sign-up a {
        font-size: 12px;
        padding: 6px 10px;
        margin-top: 5px;
    }

    .client-grid:nth-child(5) {
        display: none;
    }

    .client-grid {
        width: 25%;
    }

    .contact-right input[type="text"],
    .contact-left input[type="text"],
    .contact-left input[type="email"] {
        padding: 7px;
    }

    .contact-right textarea {
        height: 155px;
        width: 100%;
    }

    .contact-form input[type=submit] {
        font-size: 12px;
        padding: 4px 9px;
    }

    .footer-left {
        float: none;
    }

    .footer-left p {
        font-size: 14px;
        text-align: center;
    }

    .footer {
        padding: 18px 0;
    }

    .footer-right {
        float: none;
        text-align: center;
        margin-top: 15px;
    }
}

@media (max-width: 320px) {
    body {
        background: #898989;
    }

    .banner-info img {
        width: 17%;
    }

    .banner-info h1 {
        font-size: 26px;
    }

    .banner-info {
        margin-top: 4em;
    }

    .banner-info h2 {
        font-size: 12px;
    }

    .banner-info h2:nth-child(4) {
        overflow: auto;
        height: 15px;
    }

    .nav-right ul {
        top: 85.5%;
    }

    .nav-right ul li a {
        margin: 12px 0px;
    }

    .learnmore {
        margin: 21px 0 30px 0;
    }

    a.button,
    a.button2 {
        font-size: 11px;
        padding: 6px 11px;
    }

    .arrow-icon img {
        width: 5.5% !important;
    }

    .banner {
        min-height: 357px;
        background: url("../images/banner2.jpg") no-repeat -650px -732px;
    }

    span.menu img {
        width: 11%;
        margin-top: 0px;
    }

    .nav-left {
        width: 10%;
    }

    .bar-right {
        padding: 0px;
        display: none;
    }

    .col-md-7.about-left {
        float: left;
        width: 100%;
    }

    .col-md-7.man-left {
        float: left;
        width: 100%;
    }

    .about-left h2 {
        font-size: 17px;
        overflow: auto;
        height: 38px;
        margin: 11px 0 0 0;
    }

    .man-left h2 {
        font-size: 17px;
        overflow: auto;
        height: 38px;
        margin: 11px 0 0 0;
    }

    .about-left p {
        font-size: 14px;
        overflow: auto;
        height: auto;
        margin-bottom: 25px;
    }

    .col-md-7.hist-left {
        float: left;
        width: 100%;
    }

    .hist-left h2 {
        font-size: 17px;
        overflow: auto;
        height: 38px;
        margin: 11px 0 0 0;
    }

    .hist-left p {
        font-size: 14px;
        overflow: auto;
        height: auto;
        margin-bottom: 25px;
    }

    .col-md-5.about-right {
        float: right;
        width: 100%;
    }

    .about-right img {
        height: 179px;
        width: 93%;
    }

    .strip {
        width: 18%;
    }

    .about,
    .what-we-do,
    .team,
    #portfolio {
        padding-top: 105px;
    }

    .what-info {
        width: 100%;
    }

    .col-md-3.what-grid {
        float: left;
        width: 100%;
        margin-bottom: 20px;
    }

    .what-info p {
        margin: 10px 0 0 0;
        overflow: hidden;
        height: 42px;
    }

    .what-grids {
        padding: 22px 0 45px 0;
    }

    .what-grid h3 {
        font-size: 14px;
        margin: 16px 0 12px 0;
    }

    .col-md-3.bottom-grid {
        width: 50%;
    }

    .col-md-3.bottom-grid:nth-child(4) {
        display: none;
    }

    .what-bottom {
        padding: 45px 0;
    }

    .team-info {
        width: 100%;
    }

    .team-info p {
        margin: 13px 0 0 0;
        overflow: hidden;
        height: 40px;
    }

    .sap_tabs {
        margin: 19px 0 0 0;
    }

    ul.resp-tabs-list li:nth-child(3) {
        display: none;
    }

    ul.resp-tabs-list li {
        width: 42.7%;
    }

    .resp-tabs-list {
        width: 303px;
    }

    .team-left p:nth-child(3) {
        overflow: hidden;
        height: 88px;
        font-size: 13px;
    }

    .team-grid {
        padding: 30px 0;
    }

    .col-md-7.team-left {
        float: left;
        width: 100%;
    }

    .col-md-5.team-right {
        float: right;
        width: 100%;
    }

    .team-arrow1 img,
    .team-arrow2 img,
    .team-arrow3 img,
    .team-arrow4 img {
        top: -3.8%;
    }

    .team-arrow1 img {
        left: 18%;
    }

    .team-arrow2 img {
        left: 69%;
    }

    .bar p {
        font-size: 11px;
    }

    .portfolio-info p {
        margin: 10px 0 0 0;
        overflow: hidden;
        height: 44px;
    }

    #filters li:nth-child(3) {
        display: none;
    }

    #filters li span {
        font-size: 12px;
    }

    ul#filters {
        width: 90%;
    }

    #portfoliolist .portfolio:nth-child(1) {
        display: none !important;
    }

    #portfoliolist .portfolio:nth-child(3) {
        display: none !important;
    }

    #portfoliolist .portfolio {
        width: 33.3%;
    }

    .b-animate img {
        width: 23%;
        margin-top: 4.9%;
    }

    .portfolio-wrapper h3 {
        font-size: 11px;
        margin: 0px 0 0 7px;
    }

    .pricing,
    .clients,
    .contact {
        padding: 45px 0;
    }

    .pricing-info p {
        margin: 10px 0 0 0;
        overflow: hidden;
        height: 41px;
    }

    .pricing-info {
        width: 100%;
    }

    .pricing-grids {
        margin: 22px 0 0 0;
    }

    .pricing-grid:nth-child(3) {
        display: none;
    }

    .pricing-grid {
        width: 50%;
    }

    .basic-plan p span {
        font-size: 28px;
    }

    .clients-info p {
        margin: 10px 0 0 0;
        overflow: hidden;
        height: 40px;
    }

    .client-grid:nth-child(2) {
        display: none;
    }

    .client-grid {
        width: 33.3%;
    }

    .clients-grids {
        margin-top: 16px;
    }

    .contact-left {
        width: 100%;
    }

    .contact-right input[type="text"],
    .contact-left input[type="text"],
    .contact-left input[type="email"] {
        padding: 5px;
        margin: 0px 0px 14px 0;
        width: 100%;
    }

    .contact-right {
        width: 100%;
    }

    .contact-right textarea {
        height: 124px;
        margin-bottom: 10px;
        width: 100%;
    }

    .contact-form input[type=submit] {
        font-size: 12px;
        padding: 2px 7px;
    }

    .footer-left p {
        font-size: 12px;
    }
}