/* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 700; font-display: swap; src: local('DM Sans Bold Italic'), local('DMSans-BoldItalic'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Ap2ywxg089UriCZawpBqWB3wTyCg.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 700; font-display: swap; src: local('DM Sans Bold Italic'), local('DMSans-BoldItalic'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Ap2ywxg089UriCZawpBqWCXwT.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: local('DM Sans Regular'), local('DMSans-Regular'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: local('DM Sans Regular'), local('DMSans-Regular'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: local('DM Sans Medium'), local('DMSans-Medium'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: local('DM Sans Medium'), local('DMSans-Medium'), url(https://fonts.gstatic.com/s/dmsans/v5/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Savan - lite bootstrap */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } *{text-decoration: none;box-shadow: none;outline: none;} input, textarea, select {font-family: 'DM Sans', sans-serif;font-weight:200;} @media (min-width: 768px) { .container {width: 660px;} } @media (min-width: 992px) { .container { width: 880px; } } @media (min-width: 1200px) { .container { width: 1080px; } } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px } .no-gutters { margin-right: 0; margin-left: 0 } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0;} .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto, .col-custom { position: relative; width: 100%; padding-right: 15px; padding-left: 15px } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .row-cols-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .row-cols-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .row-cols-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .row-cols-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .row-cols-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% } .row-cols-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .col-custom { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-first { -ms-flex-order: -1; order: -1 } .order-last { -ms-flex-order: 13; order: 13 } .order-0 { -ms-flex-order: 0; order: 0 } .order-1 { -ms-flex-order: 1; order: 1 } .order-2 { -ms-flex-order: 2; order: 2 } .order-3 { -ms-flex-order: 3; order: 3 } .order-4 { -ms-flex-order: 4; order: 4 } .order-5 { -ms-flex-order: 5; order: 5 } .order-6 { -ms-flex-order: 6; order: 6 } .order-7 { -ms-flex-order: 7; order: 7 } .order-8 { -ms-flex-order: 8; order: 8 } .order-9 { -ms-flex-order: 9; order: 9 } .order-10 { -ms-flex-order: 10; order: 10 } .order-11 { -ms-flex-order: 11; order: 11 } .order-12 { -ms-flex-order: 12; order: 12 } .offset-1 { margin-left: 8.333333% } .offset-2 { margin-left: 16.666667% } .offset-3 { margin-left: 25% } .offset-4 { margin-left: 33.333333% } .offset-5 { margin-left: 41.666667% } .offset-6 { margin-left: 50% } .offset-7 { margin-left: 58.333333% } .offset-8 { margin-left: 66.666667% } .offset-9 { margin-left: 75% } .offset-10 { margin-left: 83.333333% } .offset-11 { margin-left: 91.666667% } @media (min-width:576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .row-cols-sm-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .row-cols-sm-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .row-cols-sm-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .row-cols-sm-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .row-cols-sm-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% } .row-cols-sm-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .col-custom { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-sm-first { -ms-flex-order: -1; order: -1 } .order-sm-last { -ms-flex-order: 13; order: 13 } .order-sm-0 { -ms-flex-order: 0; order: 0 } .order-sm-1 { -ms-flex-order: 1; order: 1 } .order-sm-2 { -ms-flex-order: 2; order: 2 } .order-sm-3 { -ms-flex-order: 3; order: 3 } .order-sm-4 { -ms-flex-order: 4; order: 4 } .order-sm-5 { -ms-flex-order: 5; order: 5 } .order-sm-6 { -ms-flex-order: 6; order: 6 } .order-sm-7 { -ms-flex-order: 7; order: 7 } .order-sm-8 { -ms-flex-order: 8; order: 8 } .order-sm-9 { -ms-flex-order: 9; order: 9 } .order-sm-10 { -ms-flex-order: 10; order: 10 } .order-sm-11 { -ms-flex-order: 11; order: 11 } .order-sm-12 { -ms-flex-order: 12; order: 12 } .offset-sm-0 { margin-left: 0 } .offset-sm-1 { margin-left: 8.333333% } .offset-sm-2 { margin-left: 16.666667% } .offset-sm-3 { margin-left: 25% } .offset-sm-4 { margin-left: 33.333333% } .offset-sm-5 { margin-left: 41.666667% } .offset-sm-6 { margin-left: 50% } .offset-sm-7 { margin-left: 58.333333% } .offset-sm-8 { margin-left: 66.666667% } .offset-sm-9 { margin-left: 75% } .offset-sm-10 { margin-left: 83.333333% } .offset-sm-11 { margin-left: 91.666667% } } @media (min-width:768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .row-cols-md-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .row-cols-md-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .row-cols-md-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .row-cols-md-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .row-cols-md-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% } .row-cols-md-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .col-custom { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .order-md-first { -ms-flex-order: -1; order: -1 } .order-md-last { -ms-flex-order: 13; order: 13 } .order-md-0 { -ms-flex-order: 0; order: 0 } .order-md-1 { -ms-flex-order: 1; order: 1 } .order-md-2 { -ms-flex-order: 2; order: 2 } .order-md-3 { -ms-flex-order: 3; order: 3 } .order-md-4 { -ms-flex-order: 4; order: 4 } .order-md-5 { -ms-flex-order: 5; order: 5 } .order-md-6 { -ms-flex-order: 6; order: 6 } .order-md-7 { -ms-flex-order: 7; order: 7 } .order-md-8 { -ms-flex-order: 8; order: 8 } .order-md-9 { -ms-flex-order: 9; order: 9 } .order-md-10 { -ms-flex-order: 10; order: 10 } .order-md-11 { -ms-flex-order: 11; order: 11 } .order-md-12 { -ms-flex-order: 12; order: 12 } .offset-md-0 { margin-left: 0 } .offset-md-1 { margin-left: 8.333333% } .offset-md-2 { margin-left: 16.666667% } .offset-md-3 { margin-left: 25% } .offset-md-4 { margin-left: 33.333333% } .offset-md-5 { margin-left: 41.666667% } .offset-md-6 { margin-left: 50% } .offset-md-7 { margin-left: 58.333333% } .offset-md-8 { margin-left: 66.666667% } .offset-md-9 { margin-left: 75% } .offset-md-10 { margin-left: 83.333333% } .offset-md-11 { margin-left: 91.666667% } } @media (min-width:992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .row-cols-lg-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .row-cols-lg-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .row-cols-lg-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .row-cols-lg-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .row-cols-lg-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% } .row-cols-lg-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .col-custom { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .order-lg-first { -ms-flex-order: -1; order: -1 } .order-lg-last { -ms-flex-order: 13; order: 13 } .order-lg-0 { -ms-flex-order: 0; order: 0 } .order-lg-1 { -ms-flex-order: 1; order: 1 } .order-lg-2 { -ms-flex-order: 2; order: 2 } .order-lg-3 { -ms-flex-order: 3; order: 3 } .order-lg-4 { -ms-flex-order: 4; order: 4 } .order-lg-5 { -ms-flex-order: 5; order: 5 } .order-lg-6 { -ms-flex-order: 6; order: 6 } .order-lg-7 { -ms-flex-order: 7; order: 7 } .order-lg-8 { -ms-flex-order: 8; order: 8 } .order-lg-9 { -ms-flex-order: 9; order: 9 } .order-lg-10 { -ms-flex-order: 10; order: 10 } .order-lg-11 { -ms-flex-order: 11; order: 11 } .order-lg-12 { -ms-flex-order: 12; order: 12 } .offset-lg-0 { margin-left: 0 } .offset-lg-1 { margin-left: 8.333333% } .offset-lg-2 { margin-left: 16.666667% } .offset-lg-3 { margin-left: 25% } .offset-lg-4 { margin-left: 33.333333% } .offset-lg-5 { margin-left: 41.666667% } .offset-lg-6 { margin-left: 50% } .offset-lg-7 { margin-left: 58.333333% } .offset-lg-8 { margin-left: 66.666667% } .offset-lg-9 { margin-left: 75% } .offset-lg-10 { margin-left: 83.333333% } .offset-lg-11 { margin-left: 91.666667% } } @media (min-width:1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .row-cols-xl-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .row-cols-xl-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .row-cols-xl-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .row-cols-xl-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .row-cols-xl-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20% } .row-cols-xl-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .col-custom { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .order-xl-first { -ms-flex-order: -1; order: -1 } .order-xl-last { -ms-flex-order: 13; order: 13 } .order-xl-0 { -ms-flex-order: 0; order: 0 } .order-xl-1 { -ms-flex-order: 1; order: 1 } .order-xl-2 { -ms-flex-order: 2; order: 2 } .order-xl-3 { -ms-flex-order: 3; order: 3 } .order-xl-4 { -ms-flex-order: 4; order: 4 } .order-xl-5 { -ms-flex-order: 5; order: 5 } .order-xl-6 { -ms-flex-order: 6; order: 6 } .order-xl-7 { -ms-flex-order: 7; order: 7 } .order-xl-8 { -ms-flex-order: 8; order: 8 } .order-xl-9 { -ms-flex-order: 9; order: 9 } .order-xl-10 { -ms-flex-order: 10; order: 10 } .order-xl-11 { -ms-flex-order: 11; order: 11 } .order-xl-12 { -ms-flex-order: 12; order: 12 } .offset-xl-0 { margin-left: 0 } .offset-xl-1 { margin-left: 8.333333% } .offset-xl-2 { margin-left: 16.666667% } .offset-xl-3 { margin-left: 25% } .offset-xl-4 { margin-left: 33.333333% } .offset-xl-5 { margin-left: 41.666667% } .offset-xl-6 { margin-left: 50% } .offset-xl-7 { margin-left: 58.333333% } .offset-xl-8 { margin-left: 66.666667% } .offset-xl-9 { margin-left: 75% } .offset-xl-10 { margin-left: 83.333333% } .offset-xl-11 { margin-left: 91.666667% } } /* Savan - lite bootstrap */ .white-bg { background: #ffffff } .gray-bg { background: #e8e8e8; } .light-gray-bg{ background: #f5f5f5; } /*.gray-bg { background: #f7f7fd }*/ .white-bg { background: #fff } .black-bg { background: #121212 } .theme-bg { background: #f15f22 } .brand-bg { background: #f1f4fa } .orange-bg { background: #ED5427 } .yellow-bg { background-color: #F6B01A; } .white-color { color: #fff } .black-color { color: #000 } .theme-color { color: #f15f22 } .yellow-color { color: #F6B01A } .orange-color { color: #ED5427 } .gray-color { color: #666; } /*.boxed-btn { background: #fff; color: #f15f22 !important; display: inline-block; padding: 18px 44px; font-family: "Teko", sans-serif; font-size: 14px; font-weight: 400; border: 0; border: 1px solid #f15f22; letter-spacing: 3px; text-align: center; color: #f15f22; text-transform: uppercase; cursor: pointer } .boxed-btn:hover { background: #f15f22; color: #fff !important; border: 1px solid #f15f22 } .boxed-btn:focus { outline: none } .boxed-btn.large-width { width: 220px }*/ [data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center } [data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: "" } [data-opacity="1"]::before { opacity: 0.1 } [data-opacity="2"]::before { opacity: 0.2 } [data-opacity="3"]::before { opacity: 0.3 } [data-opacity="4"]::before { opacity: 0.4 } [data-opacity="5"]::before { opacity: 0.5 } [data-opacity="6"]::before { opacity: 0.6 } [data-opacity="7"]::before { opacity: 0.7 } [data-opacity="8"]::before { opacity: 0.8 } [data-opacity="9"]::before { opacity: 0.9 } body { font-family: 'DM Sans', sans-serif; font-weight: normal; font-style: normal; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'DM Sans', sans-serif; color: #000; margin-top: 0px; font-style: normal; font-weight: 500; text-transform: normal } p { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 30px; margin-bottom: 15px; font-weight: normal } .bg-img-1 { background-image: url(../img/slider/slider-img-1.jpg) } .bg-img-2 { background-image: url(../img/background-img/bg-img-2.jpg) } .cta-bg-1 { background-image: url(../img/background-img/bg-img-3.jpg) } .img { max-width: 100%; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s } .f-left { float: left } .f-right { float: right } .fix { overflow: hidden; } .clear { clear: both } a { color: #635c5c } /*a:hover { color: #fff }*/ a:focus, a:hover, .portfolio-cat a:hover, .footer -menu li a:hover { text-decoration: none } button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0 } .uppercase { text-transform: uppercase } input:focus::-moz-placeholder { opacity: 0; -webkit-transition: .4s; -o-transition: .4s; transition: .4s } .capitalize { text-transform: capitalize } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit } ul { margin: 0px; padding: 0px } li { list-style: none } hr { border-bottom: 1px solid #eceff8; border-top: 0 none; margin: 30px 0; padding: 0 } .theme-overlay { position: relative } .theme-overlay::before { background: #1696e7 none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100% } .overlay { position: relative; z-index: 0 } .overlay::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1 } .overlay2 { position: relative; z-index: 0 } .overlay2::before { position: absolute; content: ""; background-color: #2E2200; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5 } .section-padding { padding-top: 120px; padding-bottom: 120px } .separator { border-top: 1px solid #f2f2f2 } .mb-90 { margin-bottom: 90px } @media (max-width: 767px) { .mb-90 { margin-bottom: 30px } } @media (min-width: 768px) and (max-width: 991px) { .mb-90 { margin-bottom: 45px } } .mt-0 { margin-top: 0; } .mt-20 { margin-top: 20; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .pt-0 { padding-top: 0; } .mb-0 { margin-bottom: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .pr-0 { padding-right: 0; } .plr-0 { padding-left: 0;padding-right: 0; } .pb-24 { padding-bottom: 24px; } .pt-24 { padding-top: 24px; } .mtb-40 { margin-top: 40px; margin-bottom: 40px; } .mtb-20 { margin-top: 20px; margin-bottom: 20px; } .mb-10 { margin-bottom: 10px; } .mb-30 {margin-bottom: 30px; } .mr-10 { margin-right: 10px; } .mr-20 { margin-right: 20px; } .mr-15 { margin-right: 15px; } .owl-carousel .owl-nav div { background: rgba(255,255,255,0.8) none repeat scroll 0 0; height: 40px; left: 20px; line-height: 40px; font-size: 22px; color: #646464; opacity: 1; visibility: visible; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); transition: all 0.3s ease 0s; width: 40px } .owl-carousel .owl-nav div.owl-next { left: auto; right: 0; } .owl-carousel .owl-nav div.owl-next i { position: relative; right: 0; top: 1px } .owl-carousel .owl-nav div.owl-prev i { position: relative; right: 1px; top: 0px } .owl-carousel:hover .owl-nav div { opacity: 1; visibility: visible } .owl-carousel:hover .owl-nav div:hover { color: #fff; background: #ff3500 } .header-btn { padding: 25px 35px } .submit-btn { width: 100%; background: #ff5f13; padding: 19px 44px; color: #fff; cursor: pointer; text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-size: 14px; border-radius: 5px; border: 0 } .hero-btn { padding: 30px 38px } .submit-btn2 { background: #ec5b53; width: 100%; height: 60px; padding: 10px 20px; border: 0; color: #fff; text-transform: capitalize; cursor: pointer; font-size: 16px; border-radius: 0px } .border-btn { border: 1px solid #e3c6c6; color: #464d65; background: none; border-radius: 5px; text-transform: capitalize; padding: 25px 57px; -moz-user-select: none; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 1px; margin-bottom: 0; position: relative; transition: color 0.4s linear; position: relative; overflow: hidden; margin: 0 } @media (max-width: 575px) { .border-btn { display: none } } .border-btn::before { border: 1px solid transparent; content: ""; position: absolute; left: 0; top: 0; width: 101%; height: 101%; background: #f15f22; z-index: -1; transition: transform 0.5s; transition-timing-function: ease; transform-origin: 0 0; transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7); transform: scaleY(0); border-radius: 0 } .border-btn:hover::before { transform: scaleY(1); border: 1px solid transparent } .breadcrumb > .active { color: #888 } #scrollUp, #back-top { background: #f15f22; height: 50px; width: 50px; right: 31px; bottom: 18px; position: fixed; z-index: 10; color: #fff; font-size: 20px; text-align: center; border-radius: 50%; line-height: 48px; border: 2px solid transparent; box-shadow: 0 0 10px 3px rgba(108,98,98,0.2) } @media (max-width: 575px) { #scrollUp, #back-top { right: 16px } } #scrollUp a i, #back-top a i { display: block; line-height: 50px } #scrollUp:hover { color: #fff } .sticky-bar { left: 0; margin: auto; position: fixed; top: 0; width: 100%; -webkit-box-shadow: 0 10px 15px rgba(25,25,25,0.1); box-shadow: 0 10px 15px rgba(25,25,25,0.1); z-index: 99; -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0 10px 15px rgba(25,25,25,0.1); background: #fff } .title { margin: 20px auto 40px; } .title h2 { font-size: 38px; font-weight: bold; letter-spacing: 2px;} .title h3 { font-size: 35px; font-weight: bold; } .title h4 { font-size: 32px; font-weight: bold; } .title h5 { font-size: 28px; font-weight: bold; } .title span { font-size: 22px; font-weight: normal; color: #C3C1C1; } .title p { font-size: 22px; font-weight: normal;} .color-black { color: #000000; } .color-white { color: #ffffff; } .color-white { color: #ffffff; } .color-orange { color: #ED5427; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .pull-left { float: left; } .pull-right { float: right; } .fs-27 { font-size: 27px; } .fs-22 { font-size: 22px; } .fs-18 { font-size: 18px; } .rotate:hover { -webkit-transform: rotateZ(10deg); -ms-transform: rotateZ(10deg); transform: rotateZ(10deg); } /*** Header Start ***/ body { position: relative; } #header { background: rgba(18,18,18,1); color: #d5d5d5; cursor: default; height: 6em; left: 0; line-height: 2em; position: fixed; text-align: right; top: 0; width: 100%; z-index: 10000; } #header .inner { max-width: 65em; width: calc(100% - 6em); margin: 1.5em auto; position: relative; } @media screen and (max-width: 480px) { #header .inner { max-width: 90%; width: 90%; margin: 1em auto; background: #000fff; } } #header .logo { font-family: 'Pacifico', cursive; display: inline-block; height: inherit; left: 0; line-height: inherit; margin: 0; padding: 0; position: absolute; top: 0; color: #e5474b; font-size: 1.75em; text-transform: none; font-weight: normal; padding: 0; } #header .logo:hover { color: rgba(229, 71, 75, 0.75); } #header a { -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; display: inline-block; padding: 0.5em 1em; color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: .85em; } #header a:hover { color: rgba(255, 255, 255, 0.75); } /*#header a:last-child { padding-right: 0em; }*/ #header a.active { border: 1px solid #fff; border-radius: 5px; background: #333333; } @media screen and (max-width: 736px) { #header a { padding: 0 0.5em; } } @media screen and (max-width: 480px) { #header { min-width: 320px; height: 4em; } } #nav {display: inline-block;} .nav-icon { width: 40px; position: fixed; top: 10px; right: 15px; display:none;} @media screen and (max-width: 980px) { #nav {display: none;width: 100%;background-color: black;} #nav > a, #nav .dropdown, #nav .flage-box {display: block;width: 100%;padding: 20px;border-bottom: 1px solid #444;background-color: black;text-align: center;} #header .inner {margin: 65px auto auto !important;width: 100%;} #header .logo { top: -55px; left: 0px; } .dropdown-content { width: 100%; text-align: center !important;} .nav-icon { width: 40px; position: fixed; top: 10px; right: 15px; display:block;} .nav-icon:after, .nav-icon:before, .nav-icon div { background-color: #fff;border-radius: 3px; content: ''; display: block !important;height: 4px !important; margin: 7px 0; transition: all .2s ease-in-out;} } /*.navPanelToggle {position: absolute;text-decoration: none; height: 4em;right: 15PX;*/ /* top: .75em; */ /*width: 40px; display: none; z-index: 10002;}*/ /*.navPanelToggle:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; color: #fff; display: block; font-size: 16px; height: 2.25em; left: 0.5em; line-height: 2.25em; position: absolute; text-align: center; top: 0.5em; width: 3.5em; } @media screen and (max-width: 980px) { .navPanelToggle { display: block; } } @media screen and (max-width: 736px) { .navPanelToggle { right: 1em; } } .navPanelToggle *:before { color: #fff; display: block; font-size: 16px; height: 2.25em; left: 0.5em; line-height: 2.25em; position: absolute; text-align: center; top: 0.5em; width: 3.5em; } .nav-icon:before{width: auto !important;position: static !important;} #navPanel { -moz-transform: translatex(20em); -webkit-transform: translatex(20em); -ms-transform: translatex(20em); transform: translatex(20em); -moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -webkit-overflow-scrolling: touch; visibility: hidden; overflow-y: auto; position: fixed; right: 0; top: 0; background: #1c1c1c; color: #fff; height: 100%; max-width: 80%; width: 20em; padding: 1.5em; text-transform: uppercase; z-index: 10003; display: none; } #navPanel.visible { -moz-transform: translatex(0); -webkit-transform: translatex(0); -ms-transform: translatex(0); transform: translatex(0); box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2); visibility: visible; } #navPanel a:not(.close) { border-top: solid 1px rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; display: block; padding: 0.75em 0; text-decoration: none; } #navPanel a:not(.close):first-child { border: none; } #navPanel .close { text-decoration: none; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; border: 0; color: #484848; cursor: pointer; display: block; height: 4em; padding-right: 1.25em; position: absolute; right: 0; text-align: right; top: 0; vertical-align: middle; width: 5em; } #navPanel .close:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; content: '\f00d'; width: 3em; height: 3em; line-height: 3em; display: block; position: absolute; right: 0; top: 0; text-align: center; } #navPanel .close:hover { color: inherit; } @media screen and (max-width: 980px) { #navPanel { display: block; } }*/ /*.menu-icon { width: 35px; height: 5px; background-color: #fff; margin: 6px 0; }*/ .flage-box { float: right; width: auto; line-height: 2em; } .flage-box a { width: auto; height: auto; padding: 0 2em; } .flage-box span { float: right; padding: 0 10px; } /** flage **/ /*.topbar-lang-switcher { float: right; min-width: 80px; min-height: 20px; margin-top: -10px; } .topbar-lang-switcher .lang-switcher-wpml { width: 100px; } .topbar-lang-switcher ul, .topbar-lang-switcher ul li { list-style-type: none; padding: 0; margin: 0; } .topbar-lang-switcher ul li.wpml-ls-item, .topbar-lang-switcher ul li { display: none; float: left; max-height: 13px; line-height: 12px; margin-bottom: 15px; } .topbar-lang-switcher ul li.wpml-ls-item .wpml-ls-display { display: none; } .topbar-lang-switcher ul li.wpml-ls-item.wpml-ls-current-language, .topbar-lang-switcher ul li.wpml-ls-item, .topbar-lang-switcher ul:hover li, .topbar-lang-switcher ul li.current-lang { display: block; } .topbar-lang-switcher .wpml-ls-legacy-list-vertical .wpml-ls-flag + span, .topbar-lang-switcher .wpml-ls-legacy-list-horizontal .wpml-ls-flag + span { margin-top: 2px; } .footer_widget .wpml-ls-legacy-list-horizontal, .footer_widget .wpml-ls-legacy-list-vertical { padding: 0; } .footer_widget .wpml-ls-legacy-list-horizontal a, .footer_widget .wpml-ls-legacy-list-vertical a { padding-left: 0; margin-right: 20px; } .topbar-lang-switcher .wpml-ls-legacy-list-vertical > ul { margin-top: 3px !important; border: 0; } .topbar-lang-switcher .wpml-ls-legacy-list-horizontal > ul, .topbar-lang-switcher .wpml-ls-legacy-list-vertical > ul { padding: 5px; } .topbar-lang-switcher .wpml-ls-legacy-list-horizontal { padding-top: 0; } .topbar-lang-switcher ul, .topbar-lang-switcher ul li a { color: #fff; border: none; } .topbar-lang-switcher ul, .topbar-lang-switcher ul li a img { border-radius: 100%; border: 3px solid #fff; min-height: 15px; } .topbar-lang-switcher ul { margin-left: 2px; margin-top: 5px; max-height: 30px; overflow: hidden; -webkit-transition: .25s; -o-transition: .25s; transition: .25s; position: absolute; padding: 0 13px 0 13px; z-index: 99; padding-bottom: 2px; border-radius: 4px; border: none; background: rgba(0,0,0,0.0); } .topbar-lang-switcher ul:hover { max-height: 150px; box-shadow: 0 5px 40px rgba(0,0,0,.07); background: rgba(0,0,0,0.7); } .topbar-lang-switcher ul:hover a { color: #fff !important; } .topbar-lang-switcher ul:hover a img { color: #fff !important; } .topbar-lang-switcher ul li span { margin-left: 5px !important; font-size: 14px; -webkit-transition: .25s; -o-transition: .25s; transition: .25s; display: inline-flex; }*/ .promocode_wrap {display: inline-block;width: 100%;vertical-align: top;position: relative;} .promocode_wrap button{display: inline-block;width: 45px;height: 45px; border:2px solid #000; border-radius:3px; vertical-align: top;position: absolute;top: 0;bottom: 0;margin: auto;right: 0;} .promocode_wrap input[type="text"]{height: 38px;} .summary_block{background: #f5f5f5 !important;} /*** Header Start ***/ /*** Footer Start ***/ .footer-area { background: #2f2f2f; padding-top: 4em; padding-bottom: 4em; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .footer-area { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-area { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area { padding-top: 40px; padding-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-area { padding-top: 200px; padding-bottom: 40px; } } @media (max-width: 767px) { .footer-area { padding-top: 40px; padding-bottom: 40px; } } .footer-area .footer-top .single-footer-caption .footer-logo { margin-bottom: 15px; text-align: center; } .footer-area .footer-top .single-footer-caption .footer-pera .info1 { line-height: 1.5; margin-bottom: 15px; padding-right: 0; color: #9c9c9c; font-size: 14px; text-align: center; } .footer-area .footer-top .single-footer-caption .footer-pera .info1 strong { color: #9c9c9c; font-size: 18px; font-weight: bold; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-area .footer-top .single-footer-caption .footer-pera .info1 { padding-right: 0px } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-top .single-footer-caption .footer-pera .info1 { padding-right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-area .footer-top .single-footer-caption .footer-pera .info1 { padding-right: 0px } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-area .footer-top .single-footer-caption .footer-pera .info1 { padding-right: 0px } } .footer-area .footer-top .single-footer-caption .footer-tital ul{padding-bottom:20px;} .footer-area .footer-top .single-footer-caption .footer-tital ul li { color: #bbbcbc; margin-bottom: 5px; text-transform: capitalize } .footer-area .footer-top .single-footer-caption .footer-tital ul li a { color: #9c9c9c; font-weight: 300; text-decoration: none; } .footer-area .footer-top .single-footer-caption .footer-tital ul li a:hover { color: #f15f22; padding-left: 5px } .footer-area .footer-top .single-footer-caption .footer-tital ul.footer-link-left { width: 60%; float: left; } .footer-area .footer-top .single-footer-caption .footer-tital ul.footer-link-right { width: 40%; float: left; } .footer-area .footer-social{width:100%; text-align:center;} .footer-area .footer-social a { color: #848493; font-size: 18px; text-align: center; margin:0 5px } .footer-area .footer-social a:first-child { margin-left: 0px } .footer-area .footer-social a:hover { color: #fff } .app-box { padding-bottom: 20px; text-align:left; padding-top:0; } .app-box h5 { font-size: 10px; font-weight: bold; } @media (max-width: 575px) { .app-box { padding-bottom: 20px; text-align:center; padding-top:20px;} } .newslatter { } .newslatter h5 { font-size: 10px; font-weight: 500; } .newsletter-input { border: 1px solid #ffffff; line-height: 24px; padding: 5px; background-color: transparent; border-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; float: left; color: #fff; } /*** Footer End ***/ /*** (1) Banner section Start*****/ .banner-section { padding: 0; position: relative; } .banner-contant { margin-top: 350px; } .slider-height { background-color: #131313; min-height: 900px; background-repeat: no-repeat; background-position: center 70px; background-size: contain; background-attachment: fixed;} .hero_caption {width:45%; margin-right:55%;} @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-height { min-height: 700px } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-height { min-height: 500px } .banner-contant { margin-top: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-height { min-height: 500px } .banner-contant { margin-top: 50px; } } @media (max-width: 575px) { .slider-height { min-height: 600px } .banner-contant { margin-top: 100px; } .hero_caption {width:100%; text-align:center;margin-right:0;} } .slider-height2 { background-image: url(../../assets/img/hero2.jpg); min-height: 460px; background-repeat: no-repeat; background-size: cover } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-height2 { min-height: 350px } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-height2 { min-height: 260px } } @media (max-width: 575px) { .slider-height2 { min-height: 260px } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area .hero_caption { padding-top: 0; } } @media (max-width: 575px) { .slider-area .hero_caption { padding-top: 0; } } .slider-area .hero_caption h1 { font-size: 2.7rem; font-weight: 600; margin-bottom: 14px; color: #fff; line-height: 56px; text-transform: capitalize; margin-bottom: 32px;letter-spacing: 2px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-area .hero_caption h1 { font-size: 30px; line-height: 1.2 } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .hero_caption h1 { font-size: 25px; line-height: 1.2 } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area .hero_caption h1 { font-size: 20px; line-height: 1.2 } } @media (max-width: 575px) { .slider-area .hero_caption h1 { line-height: 1.2 } } .slider-area .hero_caption h1 span { color: #f15f22 } .slider-area form.search-box { display: flex; flex-wrap: wrap; border-radius: 50px; margin-bottom: 15px } .slider-area form.search-box .input-form { width: 53%; position: relative; overflow: hidden } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area form.search-box .input-form { width: 66% } } @media (max-width: 575px) { .slider-area form.search-box .input-form { width: 100% } } .slider-area form.search-box .input-form input { height: 60px; width: 100%; color: #777777; font-size: 18px; font-weight: 400; padding: 9px 33px 9px 32px; border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px } @media (max-width: 575px) { .slider-area form.search-box .input-form input { margin-bottom: 20px; border-top-left-radius: 0px; border-bottom-left-radius: 0px } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area form.search-box .input-form input { padding: 9px 33px 9px 25px } } .slider-area form.search-box .input-form input::placeholder { color: #616875; } @media (max-width: 575px) { .slider-area form.search-box .input-form input::placeholder { font-size: 13px; } } .slider-area form.search-box .search-form { width: 22%; overflow: hidden } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area form.search-box .search-form { width: 34% } } @media (max-width: 575px) { .slider-area form.search-box .search-form { width: 100% } } .slider-area form.search-box .search-form a { width: 100%; height: 60px; background: #ff5f13; font-size: 20px; line-height: 1; text-align: center; color: #fff; display: block; padding: 15px; border-radius: 0px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; line-height: 1.2; line-height: 29px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; border-top-right-radius: 5px; border-bottom-right-radius: 5px } @media (max-width: 575px) { .slider-area form.search-box .search-form a { border-top-right-radius: 0px; border-bottom-right-radius: 0px } } .slider-area .hero-pera p { color: #9f9f9f; margin-bottom: 30px; font-size: 22px; font-style: normal; text-transform: none; } .hero-overly { position: relative; z-index: 1 } .hero-overly::before { position: absolute; content: ""; background-color: rgba(1,10,28,0.6); width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; background-repeat: no-repeat } .slider-area .hero-cap h2 { color: #fff; font-size: 95px; font-weight: 600; text-transform: capitalize; line-height: 1 } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area .hero-cap h2 { font-size: 50px } } @media (max-width: 575px) { .slider-area .hero-cap h2 { font-size: 35px } } .slider-area .hero-cap .breadcrumb { background: none; padding: 0; margin: 0 } .slider-area .hero-cap .breadcrumb a { color: #dcdcdc; font-size: 18px; text-transform: capitalize } .slider-area .hero-cap .breadcrumb-item + .breadcrumb-item::before { color: #dcdcdc } .services-section { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 4em 0 5em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; background-position: center; background-size: cover; background-repeat: no-repeat; border-top: 0; position: relative; text-align: left; text-decoration: none !important; } /* (2) Digital Section Start*/ .digital-section { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 4em 0 10em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; border-top: 0; /*min-height: 100vh; height: 100vh;*/ position: relative; text-decoration: none !important; } @media (max-width: 575px) { .digital-section { padding: 0 } .digital-section .section-container { position: relative; top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .digital-section { padding: 30px; } .digital-section .section-container { position: relative; top: 0; } } @media (max-width: 575px) { .slider-area .hero-cap h2 { font-size: 35px } .digital-section .section-container { position: relative; top: 0; } } .digital-section .section-container { } @media only screen and (min-width: 576px) and (max-width: 767px) { .digital-section .section-container { position: relative; top: 0; } } @media (max-width: 575px) { .digital-section .section-container { position: relative; top: 0; } } .section-container { display: inline-block; width: 100%; vertical-align: top; padding-right: 25px; padding-bottom: 10px; position: relative; margin-bottom: 2rem; background-color: transparent; } .digital-section .container { position: relative; } .digital-section .future-title { background: #d1d1d1; text-align: center; } .digital-section .future-title h3 { font-size: 24px; font-weight: bold; margin: 0; padding: 10px 0; line-height: normal; } .future-list { background-color: transparent; padding: 0; } .future-list ul { list-style: none; display: contents !important; } .future-list .future-box { padding-top: 30px; padding-bottom: 30px; text-align: center; } .future-list .future-box a h4 { margin-bottom: 5px; color: #fff; font-size: 18px; text-decoration: none !important; } .future-list .future-box:nth-child(odd) a:hover h4 { color: #ED5427; } .future-list .future-box:nth-child(even) a:hover h4 { color: #F6B01A; } .digital-section .digital-left { margin: 10px 0; } .digital-section .digital-left p { font-size: 22px; color: #C3C1C1; font-weight: normal; padding-top: 10px;} .digital-section .digital-left ul { padding: 50px 0 10px; } .digital-section .digital-left ul span { font-size: 18px; color: #fff; padding-top: 10px; padding-bottom: 0; display: block; } @media (max-width: 575px) { .digital-section .digital-left .text-left{text-align:center;} .future-list .future-box { padding-top: 10px; padding-bottom: 10px;} .digital-section .digital-left p {text-align:center; } .digital-section .digital-left ul span {padding-bottom: 20px;} } /*.section-container:after { position: absolute; content: ""; right: 0; bottom: 0; width: 10px; height: 75%; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .section-container:before { position: absolute; content: ""; right: 0; bottom: 0; width: 96%; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; }*/ /* (3) Building Section Start */ .building-banner { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 21em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; background-position: center; background-size: cover; background-attachment:fixed; background-repeat: no-repeat; border-top: 0; /*min-height: 100vh; height: 100vh;*/ position: relative; text-align: left; text-decoration: none !important; } .building-section { background: #f3f3f3; padding: 2em 0 6em 0; border-radius: 0; position: relative; } @media (max-width: 575px) {.building-section { padding: 20px }} @media only screen and (min-width: 576px) and (max-width: 767px) {.building-section { padding: 30px; }} /*.building-section .title { text-align: center; margin: 20px auto 40px; } .building-section .title h2 { text-align: center; font-size: 38px; color: #000000; font-weight: bold; }*/ .building_cards { padding: 0; margin: 0 -30px 20px; } .building_cards li { list-style: none; margin: 0; padding: 0; padding: 0 30px; float: left; width: 50%; } .building_cards li.rightbar .buildind_card_box { padding-left: 0; padding-right: 10px; } .building_cards li.rightbar .buildind_card_box:after { left: auto; right: 0; } .building_cards li.rightbar .buildind_card_box:before { left: auto; right: 0; } .buildind_card_box { display: inline-block; width: 100%; vertical-align: top; padding-left: 10px; padding-bottom: 10px; position: relative; } .buildind_card_box:after { position: absolute; content: ""; left: 0; bottom: 0; width: 10px; height: 100px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-ransition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .buildind_card_box:before { position: absolute; content: ""; left: 0; bottom: 0; width: 100px; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-ransition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .buildind_card_box .inner_buildingcard { display: inline-block; width: 100%; vertical-align: top; padding: 20px 50px 10px 50px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); background: #fff; } .buildind_card_box .inner_buildingcard h6 { display: inline-block; width: 100%; vertical-align: top; text-align: center; font-weight: 700; color: #ED5427; font-size: 20px; margin: 15px 0; } .buildind_card_box .inner_buildingcard .imgbox { width: 80%; vertical-align: top; text-align: center; margin: 30px auto 40px; } .buildind_card_box .inner_buildingcard .imgbox img { max-width: 100%; } .buildind_card_box .inner_buildingcard p { font-size: 16px; line-height: 1.5; margin: 0; color: #585858; } .buildind_card_box .inner_buildingcard p.right-text { text-align: right; } .buildind_card_box .inner_buildingcard p.right-text a { display: inline-block; width: auto; vertical-align: top; position: relative; text-decoration: none; font-weight: bold; color: #000000; margin-right: 30px; } .buildind_card_box .inner_buildingcard p.right-text a:after { position: absolute; content: ">>"; color: #ED5427; margin-left: 5px; transition: 5ms all; -webkit-transition: 5msall; -moz-transition: 5ms all; -o-transition: 5ms all; } .buildind_card_box .inner_buildingcard p.right-text a:hover { color: orange; } .buildind_card_box:hover:after { height: 100%; } .buildind_card_box:hover:before { width: 100%; } .buildin-f-list { margin-top: 40px; } .unit-4 { margin-bottom: 10px; display: -ms-flexbox !important; display: flex !important; } .unit-4-icon { margin:5px 10px 0 10px;} .unit-4-icon:hover { filter: grayscale(100%); } .buildin-f-list h3 { font-size: 24px; font-weight: bold; color: #000; margin:5px 0 0; } .buildin-f-list h4 { font-size: 22px; font-weight: normal; color: #707070; margin:5px 0 0; } @media (max-width: 640px) { .buildin-f-list h4 { margin:5px 0 30px; } } /*.buildin-f-list p { font-size: 18px; font-weight: normal; color: #616161; margin-top: 0; }*/ /* (4) Experience Start */ .experience-section { /*display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center;*/ padding: 4em 0 4em 0; /*-moz-align-items: center; -webkit-align-items: center; -ms-align-items: center;*/ align-items: center; /*display: -moz-flex; display: -webkit-flex; display: -ms-flex;*/ display: flex; /*-moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center;*/ justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; border-top: 0; /*min-height: 100vh; height: 100vh;*/ position: relative; text-align: left; } /*.experience-section { background: url(../../assets/img/experience_bg.jpg) no-repeat top left !important; background-size: 100%; background-attachment: fixed; padding: 80px 0; border-radius: 0; position: relative; }*/ .testimonial-box { border-radius: 10px; padding: 20px; margin-top: 0; } /*.testimonial-inner{position:relative; top:-200px;}*/ .testimonial-box h4 { font-size: 24px; font-weight: bold; padding: 0 0 10px 0; margin: 0; } .testimonial-box span { font-size: 18px; font-weight: normal; padding: 0; } .experience-section .number { color: #fff; font-size: 54px; font-weight: bold; } /*.haul-with-us{position:relative; top:-100px;}*/ /*@media (max-width: 575px) { .testimonial-inner{top:0;} }*/ .user_image { width: 200px; height: 200px; margin-bottom: 1.6rem; overflow: hidden; border-radius: 50%; margin: 1rem auto 1rem auto; display: flex; border: 4px solid #fff; box-shadow: 0 5px 5px .2rem rgba(0,0,0,.5) } .user_image img { width: 100%; min-width: 100%; min-height: 100%; } .user_name { text-align: center; padding: 0; margin: 0; } .user_name h4 { font-size: 24px; font-weight: bold; text-align: center; padding: 0; margin: 0; line-height: 26px; } .user_name p { font-size: 18px; text-align: center; padding: 0; margin: 0; line-height: 26px; } .user_name strong { font-size: 18px; font-weight: bold; text-align: center; padding: 0; margin: 0; line-height: 26px; } .speech { background: #E1E1E1; -webkit-border-radius: 4px; border-radius: 4px; font-size: 1.1rem; line-height: 1.6; margin: 30px 100px 40px 10px; max-width: 100%; padding: 40px; position: relative; filter: drop-shadow(-4px 4px 0px rgba(0, 0, 0, 1)); border: 2px dashed black; } .onLeft::after { border-left: 18px solid transparent; border-right: 18px solid #efefef; border-top: 11px solid #efefef; border-bottom: 11px solid transparent; content: ""; position: absolute; left: -35px; top: 88px; filter: drop-shadow(-2px -1px 0px black); } .onRight:after { content: ""; position: absolute; border-left: 11px dashed #efefef; border-right: 11px dashed transparent; border-top: 11px dashed #efefef; border-bottom: 11px dashed transparent; right: -20px; top: 8px; filter: drop-shadow(2px -1px 0px black); } @media (max-width: 575px) {.speech { margin: 30px 10px 40px 10px; }} /** customer-section***/ .customer-section { /*background: white;*/ padding: 60px; border-radius: 0; position: relative; } @media (max-width: 575px) {.customer-section { padding: 20px }} @media only screen and (min-width: 576px) and (max-width: 767px) {.customer-section { padding: 30px; }} .client { width: 120px; height: 120px; margin-bottom: 1.6rem; overflow: hidden; border-radius: 50%; margin: 1rem auto 1rem auto; float: left; margin: 0 23px; } .client img { width: 100%; min-width: 100%; min-height: 100%; } .client-services{width:100%; text-align:center;} .client-services strong{font-size:20px; font-weight:500; color:#fff; display:block; padding:20px 0 0} /* (5) shippers Start */ .shippers-section { padding: 60px; border-radius: 0; position: relative; } @media (max-width: 575px) {.shippers-section { padding: 20px }} @media only screen and (min-width: 576px) and (max-width: 767px) {.shippers-section { padding: 30px; }} .shippers-section h3 { font-size: 22px; font-weight: bold; } .shippers-section p { font-size: 18px; line-height: 28px; margin-top:10px; } .shippers-section .unit-4-icon:hover { filter: grayscale(100%); } .shippers-pulse-box { position: relative; padding-bottom:20px;} .shippers-pulse-box h3 { font-size: 42px; color: #222324; margin-bottom:20px; } .shippers-pulse-box p { font-size: 22px; color: #707070; line-height: 26px; padding-bottom: 20px; } .shippers_img { display: inline-block; width: 100%; vertical-align: top; padding-left: 10px; padding-top: 10px; position: relative; margin-bottom: 2rem; } .shippers_img:after { position: absolute; content: ""; left: 0; top: 0; width: 10px; height: 100px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .shippers_img:before { position: absolute; content: ""; left: 0; top: 0; width: 100px; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .shippers_img img { max-width: 100%;} /* (7) Carriers Section Start */ .carriers-section { background: #121212; padding: 60px; border-radius: 0; position: relative; } @media (max-width: 575px) {.carriers-section { padding: 20px }} @media only screen and (min-width: 576px) and (max-width: 767px) {.carriers-section { padding: 30px; }} .carriers-pulse-left { position: relative; } .carriers-pulse-left h3 { font-size: 40px; color: #F3F3F3; font-weight:bold; margin-bottom:20px; letter-spacing:2px; } .carriers-pulse-left p { font-size: 17px; color: #C3C1C1; line-height: 28px; padding-bottom: 20px; } .carriers_img { display: inline-block; width: 70%; vertical-align: top; padding-right: 10px; padding-top: 10px; position: relative; margin-bottom: 2rem; } .carriers_img:after { position: absolute; content: ""; right: 0; top: 0; width: 10px; height: 100px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .carriers_img:before { position: absolute; content: ""; right: 0; top: 0; width: 100px; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .carriers_img img { max-width: 100%; width: 100%; } .fangshan-box { padding: 6rem 0 5rem; } .fangshan-box h4 { font-size: 22px; font-weight: bold; color: #dfdfdf; } .fangshan-box p { font-size: 18px; color: #C3C1C1; line-height:22px; margin-right:50px; } @media (max-width: 575px) {.fangshan-box { padding: 20px 0 }} .carriers-pulse-right { background: url(../../assets/img/bg-mobile.jpg) no-repeat center top; background-size: 88%; } .carriers-pulse-right .img-center { padding: 0; margin:0 auto; text-align:center;} .carriers-pulse-right .img-center img { width: 35%; margin: 34px auto 0 160px; } /* (8) media Section Start */ .title_square{display: inline-block; width: auto; vertical-align: top; position: relative; padding: 5px; border: 1px solid #999; margin-bottom:40px;} .title_square .inner_title_square{display: inline-block; width: auto; vertical-align: top; font-size: 24px; font-weight:bold; letter-spacing:2px; line-height: normal;color: #fff; background: #222; padding: 10px 15px;} .title_square:after{position: absolute; content: ""; display: inline-block; vertical-align: top; left: -1px; top:-1px; width: 10px; height: 10px; border-left: 2px solid #fff; border-top: 2px solid #fff; z-index: 1} .title_square:before{position: absolute; content: ""; display: inline-block; vertical-align: top; right:-1px; top:-1px; width: 10px; height: 10px; border-right:2px solid #fff; border-top: 2px solid #fff; z-index: 1} .title_square .inner_title_square:after{position: absolute; content: ""; display: inline-block; vertical-align: top; left: -1px; bottom:-1px; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; z-index: 1} .title_square .inner_title_square:before{position: absolute; content: ""; display: inline-block; vertical-align: top; right:-1px; bottom:-1px; width: 10px; height: 10px; border-right:2px solid #fff; border-bottom: 2px solid #fff; z-index: 1} .media-section { padding: 2rem 0 5rem; /*box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);*/ position: relative; display: block; } /*.media-section .blog-entry a iframe{width:100%; height:560px; border:1px solid #121212;} .media-section .blog-inner-video{height:560px;}*/ .media-section .blog-entry{display:inline-block; height:100%;} .media-section .blog-entry a{width:100%; display:block; font-size:14px; position:relative; color:#fff; margin:15px 0; padding:0; height:100%; border:1px solid #121212;} .media-section .blog-entry a img{width:100%; height:auto; position:relative; height:auto; display:block;} .media-section .blog-entry a h2 { display:block; width: 100%; height: auto; font-size: 14px; color: #fff !important; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.8); background-size: 100%; text-align: center; padding: 20px 10px; margin:0;/*transform: translateY(0);transition: .5s ease-in-out;*/ } .media-section .blog-entry a:hover h2 {/*text-transform: translateY(-10px);transition: .5s ease-in-out;*/ } .media-section .blog-entry a iframe{width:100%; min-height:233px; height:556px; border:1px solid #121212;} .media-section .blog-inner-video{height:556px;} .media-section .blog-video{display:inline-block; height:100%;} .media-section .blog-video a{width:100%; display:block; font-size:14px; position:relative; color:#fff; margin:15px 0; padding:0; height:100%; border:1px solid #121212;} .media-section .blog-video a img{width:100%; height:auto; position:relative; height:auto; display:block;} .media-section .blog-video a h2 { display:block; width: 100%; height: auto; font-size: 14px; color: #fff !important; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.8); background-size: 100%; text-align: center; padding: 20px 10px; margin:0;/*transform: translateY(0);transition: .5s ease-in-out;*/ } .media-section .blog-video a:hover h2 {/*text-transform: translateY(-10px);transition: .5s ease-in-out;*/ } .media-section .blog-video a iframe{width:100%; min-height:233px; height:568px; border:1px solid #121212;} @media (max-width: 780px) { .media-section .blog-inner-video{height:auto; margin-bottom:10px;} .media-section .blog-entry a iframe{width:100%; height:100%;} .media-section .blog-video a iframe{width:100%; height:100%;} } /*.media-section .view-link a { line-height: 60px; } .media-section .view-link a strong { color: #fff; padding-right: 5px; } .media-section .view-link a i { color: #b74121; font-size: 20px; } .media-section .view-link a:hover strong { color: #fff; } .media-section .view-link a:hover i { color: #fff; } .media-section .bg-black { background-color: #121212 !important; color: #b74121; }*/ /*.media-section .title { text-align: center; color: #fff; } .media-section .title h2 { text-align: center; color: #fff; }*/ .social-media { text-align: right; } .social-media a { padding: 0 6px; } @media (max-width: 575px) {.social-media { text-align: center; }} @media only screen and (min-width: 576px) and (max-width: 767px) {.social-media { text-align: center; }} .media-item { text-align: center; line-height: 100%; text-transform: none; cursor: pointer; } .media-item img { width: 100%; overflow: hidden; transition: transform .5s ease-in-out; } .media-item .thumb { position: relative; overflow: hidden; } .media-item .hover-effect .hover-content { position: absolute; text-align: left; width: 100%; bottom: 0; left: 0; background: rgba(0,0,0,0.8); height: 70px; } .media-item h4 { position: relative; font-size: 18px; text-transform: none; color: #fff; display: inline-block; padding-left: 0; line-height: 15px; transform: translateY(30px); transition: .5s ease-in-out; letter-spacing: 0.5px; text-align: center; width: 100%; } .media-item:hover h4 { transform: translateY(20px); } /*.media-item:hover img:hover { transform: scale(1.5) rotate(5deg);}*/ /* (9) getintuch Section Start */ .getintuch-section { padding: 6rem 0 5rem; position: relative; display: block; } .getintuch-section h2 { font-weight: bold; font-size: 32px; } .getintuch-section p { font-weight: 500; font-size: 20px; } /**** About Us Start *****/ /* Banner */ #banner { background-color: #e5474b; color: #f2a3a5; padding: 20em 0 18em; background-color: #0c0c0c; background-size: cover; background-repeat: no-repeat; background-position: 15% center; text-align: left; position: relative; z-index: 9; } #banner input, #banner select, #banner textarea { color: #ffffff; } #banner a { color: #ffffff; } #banner strong, #banner b { color: #ffffff; } /*#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { color: #fff; }*/ #banner blockquote { border-left-color: #fff; } #banner code { background: none; border-color: #fff; } #banner hr { border-bottom-color: #fff; } #banner:after { -moz-transition: opacity 4s ease; -webkit-transition: opacity 4s ease; -ms-transition: opacity 4s ease; transition: opacity 4s ease; content: ''; position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; background-color: #0c0c0c; opacity: 0.25; } #banner .inner { max-width: 65em; width: calc(100% - 6em); margin: 0 auto; position: relative; z-index: 10000; line-height: 1.5; text-align: center; } @media screen and (max-width: 480px) { #banner .inner { max-width: 90%; width: 90%; } } #banner h1 { font-size: 2.0em; margin: 0 0 0 0; padding:30px 0 0; letter-spacing: 3px; font-weight: 700; } #banner h1 span { font-weight: 400; } body.is-loading #banner:after { opacity: 1; } @media screen and (max-width: 1680px) { #banner { padding: 10em 0 8em 0; } } @media screen and (max-width: 1280px) { #banner { padding: 8em 0 6em 0; } } @media screen and (max-width: 980px) { #banner { padding: 12em 0 10em 0; } #banner br { display: none; } } @media screen and (max-width: 736px) { #banner { padding: 6em 0 2em 0; } #banner h1 { font-size: 1.75em; } } @media screen and (max-width: 480px) { #banner { padding: 5em 0 3em 0; } #banner ul { margin-top: 1em; } } .banner-social-icon {border-left:1px solid #fff; z-index:999; position:fixed; right:0; top:40%; background-color:transparent; width:60px;} .banner-social-icon ul {list-style:none;} .banner-social-icon ul li {padding:10px 5px; text-align:center;} @media screen and (max-width: 736px) { .banner-social-icon{display:none;} } /* (4) Experience Start */ .about-section { padding: 60px 0 60px; border-radius: 0; position: relative; } .about-section .number { font-size: 45px; font-weight: bold; } .about-section span { font-size: 18px; color: #fff; } .aboutus-left { position: relative; } .aboutus-left h3 { font-size: 42px; color: #222324; } .aboutus-left p { font-size: 22px; color: #C3C1C1; line-height: 28px; padding-bottom: 20px; } .aboutus-left-img { display: inline-block; width: 100%; vertical-align: top; padding-left: 10px; padding-bottom: 5px; position: relative; margin-bottom: 2rem; } .aboutus-left-img:after { position: absolute; content: ""; left: 0; bottom: 0; width: 10px; height: 100px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .aboutus-left-img:before { position: absolute; content: ""; left: 0; bottom: 0; width: 100px; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .aboutus-left-img img { max-width: 100%; width: 100%; } .aboutus-right-img { display: inline-block; width: 100%; vertical-align: top; padding-right: 10px; padding-bottom: 5px; position: relative; margin-bottom: 2rem; } .aboutus-right-img:after { position: absolute; content: ""; right: 0; bottom: 0; width: 10px; height: 100px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .aboutus-right-img:before { position: absolute; content: ""; right: 0; bottom: 0; width: 100px; height: 10px; background: #eb4f25; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .aboutus-right-img img { max-width: 100%; width: 100%; } .about-welcome { padding: 60px; border-radius: 0; position: relative; } @media (max-width: 575px) { .about-welcome { padding: 20px } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-welcome { padding: 30px; } } .about-welcome p { line-height: 32px; padding-right: 10px; color:#707070; } /**** About Us End *****/ /**Careers**/ .careers-section { padding: 60px 0 60px; border-radius: 0; position: relative; } .careers-section .number {font-size:45px; font-weight:bold;} .careers-what { padding: 8em 0 7em; } .careers-left { position: relative; } .careers-left h3 { font-size: 42px; color: #222324; } .careers-left p { font-size: 22px; color: #C3C1C1; line-height: 28px; padding-bottom: 20px; } .careers-left-img { display: inline-block; width: 100%; vertical-align: top; padding-left: 10px; padding-bottom: 5px; position: relative; margin-bottom: 2rem; } .careers-left-img:after { position: absolute; content: ""; left: 0; bottom: 0; width: 10px; height: 100px; background: #F6B01A; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .careers-left-img:before { position: absolute; content: ""; left: 0; bottom: 0; width: 100px; height: 10px; background: #F6B01A; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .careers-left-img img { max-width: 100%; width: 100%; } .careers-right-img { display: inline-block; width: 100%; vertical-align: top; padding-right: 10px; padding-bottom: 5px; position: relative; margin-bottom: 2rem; } .careers-right-img:after { position: absolute; content: ""; right: 0; bottom: 0; width: 10px; height: 100px; background: #F6B01A; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .careers-right-img:before { position: absolute; content: ""; right: 0; bottom: 0; width: 100px; height: 10px; background: #F6B01A; z-index: 1; transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; -o-transition: 500ms all; } .careers-right-img img { max-width: 100%; width: 100%; } .careers-right { text-align: right; float: right; } .careers-welcome { padding: 60px 0 80px; border-radius: 0; position: relative; } @media (max-width: 575px) { .careers-welcome { padding: 10px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .careers-welcome { padding: 30px; } } .careers-welcome p { line-height: 28px; padding-right: 10px; } .corees-what { padding: 60px 0 80px; border-radius: 0; position: relative; } .corees-what p { line-height: 28px; padding-right: 10px; } /***/ .vendor-section { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 4em 0 4em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; border-top: 0; min-height: 100vh; height: 100vh; position: relative; text-align: left; background-color: #121212; } .vendor-section h2 { font-weight: bold; font-size: 32px; } .vendor-section p { font-weight: 400; font-size: 18px; } @media (max-width: 575px) { .vendor-section { height: auto; } } /* Slideshow container */ .slideshow-container { position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Number text (1/3 etc) */ .slideshow-container .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4} to { opacity: 1 }} @keyframes fade { from { opacity: .4;} to { opacity: 1; }} /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) {.prev, .next, .text { font-size: 11px }} /* width */ ::-webkit-scrollbar { width: 10px;} /* Track */ ::-webkit-scrollbar-track { background: rgba(10,10,10,1);} /* Handle */ ::-webkit-scrollbar-thumb { background: #f1f1f1; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555;} .animate { opacity: 0; transform: translate(0, 20vh); transition: all 2s; } .animate.visible { opacity: 1; transform: translate(0, 0); } /*** Media page start ***/ .media-page { width: 94%; margin: 0 auto; display: grid; color: white; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .media-page a { cursor: pointer; } .media-page a img{width:100%; height:100%;} .div1 { grid-row: 1/4; grid-column: 1/3; position: relative; overflow:hidden; } .div1 span {width:100%;height:60px;font-size:18px; color: #fff;position: absolute;bottom: 0; left: 0; background: rgba(0,0,0,0.5); background-size:100%; text-align: center; padding: 20px 0 ; } .div1:hover span {padding:0; transform: translateY(10px);transition: .5s ease-in-out;} .div2 { grid-row: 1/3; grid-column: 3/3; position: relative; overflow:hidden; } .div2 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size:100%; text-align: center; padding: 15px 0 0; } .div2:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div3 { grid-row: 3/5; grid-column: 3/4; position: relative; overflow:hidden;} .div3 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div3:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div4 { grid-row: 4/5; grid-column: 1/2; position: relative; overflow:hidden; } .div4 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div4:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div5 { grid-row: 4/5; grid-column: 2/2; position: relative; overflow:hidden; } .div5 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div5:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div6 { grid-row: 5/5; grid-column: 1/2; position: relative; overflow:hidden; } .div6 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div6:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div7 { grid-row: 5/6; grid-column: 2/4; position: relative; overflow:hidden; } .div7 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div7:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div8 { grid-row: 6/6; grid-column: 1/2; position: relative; overflow:hidden; } .div8 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5);background-size: 100%; text-align: center; padding: 15px 0 0; } .div8:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div9 { grid-row: 6/6; grid-column: 2/2; position: relative; overflow:hidden; } .div9 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5); background-size: 100%; text-align: center; padding: 15px 0 0; } .div9:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} .div10 { grid-row: 6/6; grid-column: 3/3; position: relative; overflow:hidden; } .div10 span {width:100%;height:80px;font-size:18px; color: #fff;position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5); background-size: 100%; text-align: center; padding: 15px 0 0; } .div10:hover span {padding:0; transform: translateY(30px);transition: .5s ease-in-out;} @media (max-width: 575px) { .media-page { grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .div1 { grid-column: 1/5; } .div2 { grid-row: 4/4; grid-column: 1/5; } .div3 { grid-row: 5/5; grid-column: 1/5; } .div4 { grid-row: 6/6; grid-column: 1/5; } .div5 { grid-row: 7/7; grid-column: 1/5; } .div6 { grid-row: 8/8; grid-column: 1/5; } .div7 { grid-row: 9/9; grid-column: 1/5; } .div8 { grid-row: 10/10; grid-column: 1/5; } .div9 { grid-row: 11/11; grid-column: 1/5; } .div10 { grid-row: 12/12; grid-column: 1/5; } } /*** Media page End ***/ .career-positions { padding: 86px 0 100px; width: 100%; position: relative; text-align: center; } .inner-page-wrapper.callouts-wrapper { padding: 100px 0; } .career-positions .callouts { margin: 0 0 0; text-align: center; transition: all 0.3s ease 0s; padding: 30px 0; background: #f9f9f9; border-radius: 0 0; } .career-positions .callouts:hover { background: #f2f2f2; } .career-positions .callouts:hover h3 { color: #000; } .career-positions p { text-align: center; margin: 0; padding: 0 0 5px; font-size: 16px; } .career-positions .callouts .icon { text-align: center; margin: 0 0 15px; display: block; } .career-positions .callouts p { font-size: 14px; line-height: 23px; margin: 0; padding: 0; color: #2d2e2e; } .career-positions .callouts a:hover:before { transform: rotate(90deg); } .career-positions .callouts h3 { font-size: 18px; font-weight: 300; text-align: center; color: #1d2833; letter-spacing: 0.5px; margin: 0 0 5px; font-family: 'Roboto', sans-serif; } .inner-page-wrapper .our-location.color1 a { background: #282828; color: #ffffff; display: inline-block; float: right; font-size: 15px; margin: 0; padding: 5px 14px; text-align: right; } .fs-28 { font-size: 28px !important; } .btn { padding: .80rem 2.5rem; font-size: 1rem; line-height: 1.5; cursor: pointer; display: inline-block; border-radius: 5px; font-weight: 600; text-transform: capitalize; border: none; letter-spacing: 1px; } .btn:disabled { opacity: 0.8; } .btn-sm {padding: .25rem 1.5rem;font-size: .875rem;line-height: 1.5;border-radius: .2rem;} .btn-block {display: block;width: 100%;} .btn.orange:not(.outline) { background-color: #ED5427; color: white; } .btn.orange.outline { border: 2px solid #ED5427; color: #ED5427; background: transparent; } .btn.orange.outline:hover {background: #ED5427 !important;color: #141414 !important;} .btn.yellow:not(.outline) { background-color: #F6B01A; } .btn.yellow.outline { border: 2px solid #F6B01A; color: #F6B01A; background: transparent; } .btn.yellow.outline:hover {color: #141414 !important;background: #F6B01A !important;} #thank_wrap .employee_id_box,.thank_wrap .employee_id_box{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; margin-bottom: 20px; justify-content: center;} #thank_wrap .employee_id_box label,.thank_wrap .employee_id_box label{font-size: 18px; line-height: 24px; color: rgba(81,81,81,0.50); margin: 0; margin-right: 15px;} #thank_wrap .employee_id_box .id_box,.thank_wrap .employee_id_box .id_box{display: inline-block; width: 245px; vertical-align: top; position: relative;} #thank_wrap .employee_id_box .id_box span,.thank_wrap .employee_id_box .id_box span{ border: 1px solid #B5B5B5; padding-left: 18px; height: 37px; color: #EF5126; font-weight: 700; line-height: 37px;font-size: 19px; padding-right: 50px; display: inline-block; width: 100%; vertical-align: top; padding: 0; text-align: center; } .milestone-section-english {padding: 6em 0 48em 0; width:100%; align-items: center; display: flex; justify-content: center; background-position: center; background-size: contain; background-repeat: no-repeat; border-top: 0; position: relative; text-align: left; background-color:#121212; background-image: url(../../assets/img/trukker-milestone-english.gif);} @media (max-width: 768px) { .milestone-section-english .title h2{font-size:14px;} .milestone-section-english {padding:2em 0 41em;} } .milestone-section-arabic { padding: 6em 0 48em 0; align-items: center; display: flex; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; border-top: 0; position: relative; text-align: left; background-image: url(../../assets/img/trukker-milestone-arabic.gif); } @media (max-width: 575px) { .milestone-section-arabic .title h2{font-size:14px;} .milestone-section-arabic {background-size:100%; padding:2em 0;} } /*Careers inner pages css start*/ .list-title {width:100%; text-align:center; font-size:22px; margin-bottom:2em;} .list-title a { display: inline-block; color:#121212; margin: 0 15px; text-decoration:none;} .list-title a:hover { border-bottom :2px #F6B01A solid !important; } .list-title a.active { border-bottom: 2px #F6B01A solid !important; } .latest-jobs-wrapper { position: relative; text-align: left; padding: 3rem 0; background:#F2F2F2;} .card-box{display: inline-block; width: 100%; vertical-align: top; border-radius:8px; padding: 20px 50px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); background: #fff; margin:10px 0; } .card-box h4{font-size:22px; font-weight:bold; color:#F6B01A; text-transform:uppercase; float:left;} .card-box span{float:right; display:inline-block; line-height:30px; font-size:18px; color:#707070; text-transform:uppercase; display: -ms-flexbox !important; display: flex !important;} .card-box h3{font-size:26px; font-weight:bold; color:#000; margin:0;} .card-box p{font-size:18px; color:#707070; line-height:28px;} .card-box .read-more{position:absolute; bottom:20px; right:10px; font-size:16px; color:#000; display: flex; align-items: center; gap: 8px;} @media (max-width: 640px) { .list-title{position:relative; bottom:0;} .latest-jobs-wrapper{padding:50px 0;} .card-box{padding:20px; text-align:center;} .card-box .read-more{position:relative; bottom:0; right:0; font-size:16px; color:#000; text-align:center;} } .form-group { position: relative; border-radius: 4px; margin-bottom: 20px; } .form-group .form-control { display: block; outline: none; box-shadow: none; font-size: 14px; color: #444444; font-weight: 500; width: 100%; height: 40px; border: none; background: white; padding: 5px 10px; border-radius: 4px; border: 1px solid #B5B5B5; font-family: 'DM Sans' !important;} .form-group .form-control:focus { outline: none; } .jobs-details { position: relative; text-align: left; padding: 10rem 0; background:#F2F2F2;} .jobs-details .job-location{float:right; display:inline-block; line-height:30px; font-size:18px; color:#707070; text-transform:uppercase; display: -ms-flexbox !important; display: flex !important;} .career-inner {width:100%; display:inline-block;} .career-inner h3 {font-size:26px; font-weight:bold;} .career-inner h6 {font-size:22px; font-weight:normal;} .career-inner h6 a {color:#F6B01A; font-weight:500;} .career-inner p {font: size 20px; font-weight:normal; line-height:28px;} .career-inner ul{width:100%;padding:0 0 20px} .career-inner ul li{width:100%;background:url(../../assets/img/arrow-orange.png) no-repeat left 13px;padding:5px 0 5px 15px;font-size:18px; line-height:22px;} button#search_btn { display: inline-block; border-radius: 3px; vertical-align: top; position: absolute; top: 0; bottom: 0; margin: auto; right: 0; border: none; background: #fff; border: 1px solid #B5B5B5; border-top-left-radius: 0; border-bottom-left-radius: 0; } /*** Contant Us Start ***/ .contact-location { position: relative; padding:1rem 0 5rem 0; background:#F2F2F2;} .contact-card{background:#fff; width:100%; display:block; padding:20px 20px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); min-height:200px; margin-bottom:20px;} .contact-title{width:100%; text-align:center;} .contact-title h4{font-size:26px; font-weight:500; padding:15px 0 0; margin:0;} .contact-list { margin-top: 20px; display: -ms-flexbox !important; display: flex !important; } .contact-list-icon { margin-right: 20px; margin-left: 20px; margin-top: 8px; } .contact-list-icon:hover { filter: grayscale(100%); } .contact-list p { font-size: 18px; font-weight: normal; color: #707070; margin: 0; padding:0; line-height:28px;} /*** FAQs Start ***/ .faq-page { position: relative; text-align: left; padding:2rem 0 5rem 0; background:#F2F2F2;} .sitemap-page { position: relative; text-align: left; padding:2rem 0 5rem 0; background:#F2F2F2;} #faq_according{} #faq_according ul{} #faq_according ul li{display:inline-block; vertical-align:top;} .tab_box{background:#f5f5f5; border-radius:8px; border:1px solid #ED5427; padding:20px; text-align:left; color:#707070; min-height:120px; margin-bottom:20px;} .tab_box span{width:100%; text-align:right; display:block;} .tab_box.active{background:#ED5427; border-radius:8px; border:1px solid #ED5427; padding:20px; text-align:left; color:#fff;} .tab_box.active .icon { display: inline-block; width: auto; vertical-align: top; background: #fff; padding: 5px 10px; border-radius: 5px; position: relative; width: 63px; height: 46px; text-align: center; } .tab_box.active .icon img { max-height: 26px; position: relative; top: 50%; transform: translateY(-50%); width: auto; } .tab_box.active .icon:after {position: absolute;content: "";left: 8px;bottom: -18px;width: 0;height: 0;border-style: solid;border-width: 20px 20px 0 0;border-color: #ffffff transparent transparent transparent;} .cnt_according{width:100%; position:relative; display:inline-block; vertical-align:top; margin:20px 0 0;} .cnt_according h3 { font-size:22px; font-weight:normal; padding:0; margin:40px 0; font-weight:bold;} .according{width:100%;position:relative; display:inline-block; vertical-align:top;} .according li{width:100%; float:left; margin:0;} .according li .according_box { border-bottom:1px solid #C3C1C1; width:100%; display:inline-block; line-height:28px; padding:20px 5px;} .according li .according_box.active { border-bottom:1px solid #C3C1C1; width:100%; background:#f5f5f5; display:inline-block; padding:20px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35);} .according li .according_box p {font-size:18px; color:#707070;} .according li .according_box h2 { font-size:18px; font-weight:normal; padding:0; margin:0;text-align:initial;} .according li .according_box table {border-top:1px solid #707070;border-left:1px solid #707070; margin:20px 0 0; display:inline-block; vertical-align:top;} .according li .according_box table th {border-bottom:1px solid #707070;border-right:1px solid #707070; font-size:18px; color:#000; font-weight:bold; padding:5px 8px;} .according li .according_box table td {border-bottom:1px solid #707070;border-right:1px solid #707070; font-size:18px; color:#000; padding:5px 8px;} .according_box .accordion-content{text-align:initial;} .according_box:hover .accordion-content {display: block !important;} .according_box:hover {border-bottom: 1px solid #C3C1C1;width: 100%;background: #f5f5f5;display: inline-block;padding: 20px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35);} .down-arrow {} .dropdown {position: relative;display: inline-block;} .dropdown-content {display: none;position: absolute;background-color: #222;min-width: 160px;padding: 0px;z-index: 1;text-align:left} @media (min-width: 780px) { .dropdown-content a {width:100%;} } .dropdown-content a:hover {background: #ED5427;} .dropdown a img{margin:0 5px;} .dropdown:hover .dropdown-content {display: block;} .menu-country-flag {vertical-align:middle;} @keyframes scroll {0% {transform: translateX(0);} 100% {transform: translateX(calc(-250px * 7));}} .slider {height: auto;margin: auto;overflow: hidden;position: relative;} .slider::before, .slider::after {content: "";height: 100px;position: absolute;width: 200px;z-index: 2;} .slider::after {right: 0;top: 0;transform: rotateZ(180deg);} .slider::before {left: 0;top: 0;} .slider .slide-track {animation: scroll 40s linear infinite;display: flex;width: calc(170px * 50);} .slider .slide {height: 170px; width: 170px; padding:10px; margin:0 50px; text-align:center; background:#FFF; display:inline-block; border-radius:50%; position:relative;} .slider .slide img{height: 124px; text-align: center; border-radius: 10px; top: 50%; transform: translateY(-50%); position: absolute; left: 0; right: 0; margin: auto;} .section-over{position:relative; top:0; left:0; padding:50px 0; margin-top:-150px; z-index:99; border-radius:8px;} @media (max-width: 780px) { .section-over{padding:20px 0; margin-top:0; z-index:99; border-radius:8px;} } .box-shadow {-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); } .sitemap-page { position: relative; text-align: left; padding:2rem 0 5rem 0; background:#F2F2F2;} .sitemap-page .sitemap-card{background:#fff; width:100%; display:block; padding:20px 40px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.35); min-height:200px; margin-bottom:20px;} .sitemap-page .sitemap-card ul{width:100%; position:relative;} .sitemap-page .sitemap-card ul li {margin-left:20px;} .sitemap-page .sitemap-card ul li a{background:url(../../assets/img/arrow-orange.png) no-repeat left center; padding-left:15px; line-height:24px;} .sitemap-page .sitemap-card ul li ul{padding:0 0 10px;} .sitemap-page .sitemap-card ul li ul li a{background:url(../../assets/img/arrow-orange.png) no-repeat left center; padding-left:15px; line-height:24px;} .whatsapp-icon{position: fixed; bottom: 20px; right: 20px;} .whatsapp-icon span { background: #fff; border-radius: 5px; padding: 8px 10px; float: left; font-size: 18px; color: #707070;font-weight: bold; text-transform: none; margin-right: 5px;} .call-icon{position: absolute; top: 0; right: -180px;font-size: 16px; color: #fff;font-weight: normal; text-transform: none; margin-right: 0;} .call-icon a{text-transform:none !important; font-weight:normal !important;} .call-icon a span {border-radius: 5px; padding: 0px;display:inline-block; text-transform:none; font-weight:normal;} @media (max-width:823px) { #header{height:4em;} .call-icon{position: absolute;top: -50px;right: 18px;font-size: 18px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } @media (max-width:768px) { #header{height:4em;} .col-sm-5-cst { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-sm-6-cst { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .call-icon{position: absolute;top: -50px;right: 45px;font-size: 18px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } @media (max-width:411px) { .call-icon{position: absolute;top: -50px;right: 18px;font-size: 18px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } @media (max-width:375px) { .call-icon{position: absolute;top: -50px;right: 18px;font-size: 17px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } @media (max-width:360px) { .call-icon{position: absolute;top: -50px;right: 18px;font-size: 14px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } @media (max-width:320px) { .call-icon{position: absolute;top: -50px;right: 18px;font-size: 12px; color: #fff;font-weight: normal; text-transform: none; margin-right: 20px;} } .centerText{ text-align: center } .dFlex{ display: flex; } .flexEvenly{ justify-content: space-evenly; } .dBlock{ display: block; } .flexRow{ flex-direction: row; } .flexCol{ flex-direction: column; } /*SECTION : landing*/ #landing{ background-color: #FEFEFE; padding-top: 24px; padding-bottom: 74px; } .formContainer{ padding-top: 32px; padding-right: 53px; padding-left:54px; padding-bottom: 43px; background: #FCFCFC 0% 0% no-repeat padding-box; border: 2px solid #E4E4E4; border-radius: 16px; opacity: 1; width: 50%; } /*SECTION : landing*/ /*SECTION : why_book*/ #why_book{ background-color: #feead2; padding-top: 70px; padding-bottom: 299px; } .noHasselsServicesContainer{ margin-top: 32px } .noHasselsServicesItem{ width: 345px; text-align: center } .noHasselsServicesItemImg{ width: 120px; height: 106px } .noHasselsServicesItemHeader{ margin-top: 34px } .noHasselsServicesItemPara{ margin-top: 6px } /*SECTION : why_book*/ /*SECTION : why_we*/ .why_we{ background-color: #FFFFFF; box-shadow: 0px 3px 6px #00000029; border-radius: 8px; padding: 30px; /* padding-top: 51px; padding-bottom: 58px; padding-left: 132px; padding-right:103px; */ } /*SECTION : why_we*/ /*SECTION : process_explanation*/ #process_explanation{ background-color: #FEFEFE; padding-top:75px; padding-bottom:90px; } .iconContainer{ width: 200px; text-align: center; justify-content:space-around } .icon{ width: 50px; height: 50px } /*SECTION : process_explanation*/ /*SECTION : how_it_works*/ #how_it_works{ background-color: #fdf6cf; padding-top:75px; padding-bottom:99px } /*SECTION : how_it_works*/ /*SECTION : client_reviews*/ #client_reviews{ background-color: #434343; padding-top:74px; padding-bottom:67px; } /*SECTION : client_reviews*/ /*SECTION : faqs*/ #faqs{ background-color: #FEFEFE; padding-top: 77px; padding-bottom:63px; } .questionContainer{ padding-top: 30px; padding-left: 40px; padding-bottom: 30px; padding-right: 40px; border: solid grey 1px; border-radius: 2px; margin-top: 20px; } .summaryContainer{ /* padding-top: 30px; */ padding-left: 5px; } /*SECTION : faqs*/ /*SECTION : why_do_we_succeed*/ @media (max-width: 576px) { .mobFlex{ display: flex; flex-wrap: nowrap; height: 100%; overflow-x: auto; width: auto; } .mobFlex>div{ margin-left: 20px } body.wPostFull #controllerContent{ height:auto !important; } .mobFlex::-webkit-scrollbar { display: none; } .mobM30 { margin-top: 30px; } } #why_do_we_succeed{ padding-top:76px; padding-bottom: 63px; background-color: #feead2 } .why_do_we_succeed_card_container{ border-radius: 4px; background: white; box-shadow: 0px 2px 4px #00000029 } /*SECTION : why_do_we_succeed*/ /*SECTION :blogs*/ #blogs{ background-color: #FEFEFE; padding-top:75px; padding-bottom:99px } /*SECTION :blogs*/ .w100{ width: 100%; } .inputContainer{ padding:15px; border: 2px solid #B5B5B5; border-radius:5px } .hr{ margin: auto; background-color: gray; height: 2px; width: 80px; } /*ALL MARGINS*/ .mt0{ margin-top: 0px; } .mt4{ margin-top:4px } .mt6{ margin-top:6px } .mt8{ margin-top:8px } .mt12{ margin-top:12px } .mt15{ margin-top:15px } .mt16{ margin-top:16px } .mt17{ margin-top:17px } @media (max-width: 576px) { .mt20{ margin-top:0px !important } } .mt20{ margin-top:20px } .mt24{ margin-top:24px } /* @media (min-width:576px) { .mt-sm-26 { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } */ .mt26{ margin-top:26px } .mt32{ margin-top: 34px } .mt34{ margin-top: 34px } .mt36{ margin-top: 36px } .mt38{ margin-top: 38px } .mt54{ margin-top: 36px } .mt66{ margin-top: 66px } .mt75{ margin-top: 75px } .ml8{ margin-left: 8px } .ml36{ margin-left: 36px } .mr24{ margin-right: 24px } .mr70{ margin-right: 70px } .mr24{ margin-right: 24px } .mb0{ margin-bottom: 0px } .mb6{ margin-bottom: 6px } .mb16{ margin-bottom:16px } .mb40{ margin-bottom: 40px; } /*ALL MARGINS*/ /*ALL PADDING*/ .p15{ padding:15px; } .pl20{ padding-left: 20px; } .pl54{ padding-left: 54px; } .pr48{ padding-right: 48px; } /*ALL PADDING*/ /*ALL FONT SIZES*/ .fs16{ font-size: 16px; } .fs18{ font-size: 18px; } .fs20{ font-size: 20px; } .fs24{ font-size: 24px; } .fs30{ font-size: 30px; } .fs32{ font-size: 32px; } .fs42{ font-size: 42px; } .justify-text{ text-align: justify; } ul.type1 { list-style-type: circle !important; } #subTruckTypeWrapper::-webkit-scrollbar{ display: none; } /*ALL FONT SIZES*/ .footer-link-privacy{ text-align: left; } @media screen and (max-width: 600px) { .footer-link-privacy{ text-align: center !important; } }