/* Minification failed. Returning unminified contents. (3660,1): run-time error CSS1019: Unexpected token, found '@import' (3660,9): run-time error CSS1019: Unexpected token, found 'url('variables.css')' (3661,1): run-time error CSS1019: Unexpected token, found '@import' (3661,9): run-time error CSS1019: Unexpected token, found 'url('flexbox.css')' (3690,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (3702,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-title' (3703,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-title' (3704,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-title' (3709,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-subtitle' (3710,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-subtitle' (3711,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-subtitle' (3715,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-subtitle2' (3716,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-subtitle2' (3717,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-subtitle2' (3721,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (3722,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-body' (3730,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-body' (3854,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-navbar' (3855,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-navbar' (3856,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-navbar' (3857,21): run-time error CSS1039: Token not allowed after unary operator: '-font-color' (3861,25): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3985,29): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (4057,1): run-time error CSS1019: Unexpected token, found '}' (4071,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4072,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-button' (4073,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-button' (4101,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color' (4324,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-subtitle' (4332,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (4352,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4353,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-button' (4368,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4369,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-button' (4380,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color' (4496,1): run-time error CSS1019: Unexpected token, found '@keyframes' (4497,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (4570,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4605,1): run-time error CSS1019: Unexpected token, found '@keyframes' (4606,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (4655,1): run-time error CSS1019: Unexpected token, found '@keyframes' (4656,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (4689,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4716,1): run-time error CSS1019: Unexpected token, found '@import' (4716,9): run-time error CSS1019: Unexpected token, found 'url('variables.css')' (4717,1): run-time error CSS1019: Unexpected token, found '@import' (4717,9): run-time error CSS1019: Unexpected token, found 'url('flexbox.css')' (4718,1): run-time error CSS1019: Unexpected token, found '@import' (4718,9): run-time error CSS1019: Unexpected token, found 'url('styles.css')' (4766,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4783,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (4784,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-button' (4785,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-button' (4795,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color' (4905,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (4910,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (4997,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (5063,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (5101,1): run-time error CSS1019: Unexpected token, found '@keyframes' (5102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (5112,1): run-time error CSS1019: Unexpected token, found '@keyframes' (5113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (5120,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5157,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5166,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5177,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (5274,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5328,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5353,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5661,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5683,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5776,1): run-time error CSS1019: Unexpected token, found '@import' (5776,9): run-time error CSS1019: Unexpected token, found 'url('variables.css')' (5777,1): run-time error CSS1019: Unexpected token, found '@import' (5777,9): run-time error CSS1019: Unexpected token, found 'url('flexbox.css')' (5778,1): run-time error CSS1019: Unexpected token, found '@import' (5778,9): run-time error CSS1019: Unexpected token, found 'url('styles.css')' (5811,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5895,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5903,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (5931,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6000,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6012,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6074,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6091,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6099,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6115,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6304,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6314,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6334,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6341,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6350,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6390,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6394,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6472,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (6549,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6550,10): run-time error CSS1035: Expected colon, found '{' (6856,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6857,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6861,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6862,10): run-time error CSS1035: Expected colon, found '{' (6885,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-button' (6925,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6926,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6938,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7013,1): run-time error CSS1019: Unexpected token, found '@import' (7013,9): run-time error CSS1019: Unexpected token, found 'url('variables.css')' (7014,1): run-time error CSS1019: Unexpected token, found '@import' (7014,9): run-time error CSS1019: Unexpected token, found 'url('flexbox.css')' (7015,1): run-time error CSS1019: Unexpected token, found '@import' (7015,9): run-time error CSS1019: Unexpected token, found 'url('styles.css')' (7030,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7059,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7073,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7081,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7088,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7096,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7103,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7116,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7142,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7307,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7338,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7362,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' (7418,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-body' */ @font-face { font-family: 'latoregular'; src: url('/content/fonts/lato-regular-webfont.woff2') format('woff2'), url('/content/fonts/lato-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'latomedium'; src: url('/content/fonts/lato-medium-webfont.woff2') format('woff2'), url('/content/fonts/lato-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'latobold'; src: url('/content/fonts/lato-bold-webfont.woff2') format('woff2'), url('/content/fonts/lato-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'latolight'; src: url('/content/fonts/lato_light-webfont.woff2') format('woff2'), url('/content/fonts/lato_light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'latoitalic'; src: url('/content/fonts/lato-italic-webfont.woff2') format('woff2'), url('/content/fonts/lato-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'latoheavy'; src: url('/content/fonts/lato-heavy-webfont.woff2') format('woff2'), url('/content/fonts/lato-heavy-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'cabinregular'; src: url('/content/fonts/cabin-regular-webfont.woff2') format('woff2'), url('/content/fonts/cabin-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'cabinitalic'; src: url('/content/fonts/cabin-italic-webfont.woff2') format('woff2'), url('/content/fonts/cabin-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'cabinmedium_italic'; src: url('/content/fonts/cabin-medium-italic-webfont.woff2') format('woff2'), url('/content/fonts/cabin-medium-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Bodoni Moda'; src: url('https://fonts.gstatic.com/s/bodonimoda/v15/aFT67PS8i85daOM05nWMyX7E4DKfywIoNFr1VgTCuDo.woff2') format('woff2'); font-weight: 400 900; font-style: italic normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtXK-F2qO0isEw.woff2') format('woff2'); font-weight: 400 900; font-style: italic normal; font-display: swap; } /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } .mobileOnly { display:none; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; color:#cd2128; text-decoration:none; } a.fa { color: #333333 !important; font-size: 24px !important; margin:0px 10px; } a.forceUnderline { text-decoration:underline !important; } .footerSocial { margin:30px auto -15px auto; padding:15px; } .mb30 { margin-bottom:30px; } .mb45 { margin-bottom:45px; } .mb15 { margin-bottom:15px; } .mtn15 { margin-top:-15px !important; } .m0 { margin:0px !important; } a:active, a:hover { outline: 0; text-decoration:underline; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-family: 'latobold'; font-weight:normal; } i{ font-family: 'latoitalic'; font-style: normal; } dfn { font-family: 'latoitalic'; font-style: normal; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } .darkred { color:darkred; } .red { color:red; } .cursor { cursor:pointer; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } .localeLink { float:left; margin-right:15px; margin-top:10px; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } input.text_field::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} input.text_field:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} input.text_field::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} input.text_field:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} textarea::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} textarea:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} textarea::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} textarea:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color: #333; opacity: 1;} /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /***********************************************************************************************/ body{ width:100%; max-width:100%; margin:0 auto; font-family: 'latoregular'; font-size:18px; color:#333333; font-weight:normal; } .wrapper{ max-width:1200px; width:90%; margin:0 auto; } .site-header{ width:100%; height:104px; position:absolute; top:0; left:0; } .site-header .wrapper{ position:relative; } .site-header .inside { width: 100%; height: 104px; } .site-header .inside a#logo { display: inline-block; margin-top: 15px; float:left; } .site-header .inside a#logo img{ display:block; } .site-header .top_menu { float: right; margin-top: 40px; display: inline-block; } .site-header .inside .top_menu button.menu-toggle{ display:none; } .site-header .top_menu ul { list-style: none; padding: 0; } .site-header .top_menu ul li { float: left; margin-left: 30px; } .site-header .top_menu ul li a{ color:#fff; font-size:20px; font-weight:500; text-decoration:none; font-family: 'latomedium'; } .site-header .top_menu.blackColor ul li a { color:#333 !important; } .site-header .top_menu ul li a:hover{ text-decoration:underline; } #content-side.site-content{ } .center{ text-align:center; } #top_side { background: url("/content/images/registration_top_new.jpg") no-repeat scroll 0 0 transparent; background-position:center !important; background-size: cover; width: 100%; height: 461px; padding-top:104px; text-align:center; } .home #top_side { background: url("/content/images/home_top_new.jpg") no-repeat scroll 0 0 transparent; background-position:center; height: 831px; text-align: left !important; } .registration #top_side { background: url("/content/images/registration_top_new.jpg") no-repeat scroll 0 0 transparent; } .testimonials #top_side { background: url("/content/images/top_testi_new.jpg") no-repeat scroll 0 0 transparent; } .features #top_side { background: url("/content/images/features_top_new.jpg") no-repeat scroll 0 0 transparent; } .faq #top_side { background: url("/content/images/faq_top_new.jpg") no-repeat scroll 0 0 transparent; } .job #top_side { background: url("/content/images/job_top_new.jpg") no-repeat scroll 0 0 transparent; } .about #top_side { background: url("/content/images/about_top_new.jpg") no-repeat scroll 0 0 transparent; } .privacy #top_side { background: url("/content/images/privacy_top_new.jpg") no-repeat scroll 0 0 transparent; } .contact #top_side { background: url("/content/images/contact_top_new.jpg") no-repeat scroll 0 0 transparent; } .account #top_side { background: url("/content/images/account_top_new.jpg") no-repeat scroll 0 0 transparent; } #top_side article{ margin-top:120px; } .home #top_side article{ margin-top:60px; } .registration #top_side article{ margin-top:55px; } .testimonials #top_side article{ margin-top:70px; } .features #top_side article{ margin-top:60px; } .job #top_side article{ margin-top:60px; } .account #top_side article{ margin-top:70px; } #top_side article h1{ font-family: 'cabinregular'; color:#fff; font-size:46px; font-weight:normal; line-height:1.2em; } .home #top_side article h1{ font-family: 'cabinregular'; color:#fff; font-size:54px; font-weight:bold; line-height:1.2em; } #top_side article p{ color:#fff; font-size:28px; } .home #top_side article p{ color:#fff; font-size:32px; } .home #top_side article p span{ font-family: 'latobold'; font-weight:bold; font-size:48px; } .features #top_side article p span{ font-family: 'latoheavy'; } a.btn{ font-family: 'latobold'; font-size:32px; text-decoration:none; text-transform:uppercase; color:#fff; background-color:#cd2128; line-height:1; display:inline-block; padding:26px 40px; border-radius: 10px; margin-top: 30px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } a.btn.white { background-color:white !important; color:#cd2128 !important; } a.btn.white:hover { background-color:#d0d0d0 !important; color:#cd2128 !important; } a.btn:hover{ background-color:#7b2707; } a.btn.white.redBorder { border: solid 2px #cd2128 !important; } #check_it{ width:100%; margin-top:60px; } .features #check_it{ margin-top:80px; } #check_it h2{ font-family: 'Montserrat'; font-size:46px; font-weight:normal; text-align:center; margin:0; } #check_it .item{ width:33.33%; float:left; text-align:center; padding:20px 15px 0 15px; margin-top:45px; } #check_it .item.center_one{ margin-left:33.33%; margin-top:0; } #check_it .item.mb{ padding:20px 0 0 0; } #check_it .item .img_side{ text-align:center; height: 131px; } #check_it .item .img_side img{ display:inline-block; } #check_it .item h3{ font-size:26px; font-weight:normal; margin: 0.6em 0; } #check_it .item p{ font-size:18px; line-height:1.6em; } .home #testimonial{ background: url("/content/images/home_middle_new.jpg") no-repeat scroll 0 0 transparent; background-size: cover; background-position: center top; width: 100%; min-height: 530px; margin-top:60px; color:#fff; text-align:center; } .home #testimonial .testi_item{ margin-top:130px; } .home #testimonial blockquote:before{ position:absolute; content:'“'; font-family: 'Bodoni Moda'; font-size:114px; top: 0; left: 50%; margin-left:-18px; } .home #testimonial blockquote:after{ position:absolute; content:'”'; font-family: 'Bodoni Moda'; font-size:114px; bottom: -60px; left: 50%; margin-left:-18px; } .home #testimonial blockquote{ font-family: 'Bodoni Moda'; font-size:24px; position:relative; padding:95px 0; } .home #ninja{ background: url("/content/images/home_ninja_bg_new.png") no-repeat scroll center 0px transparent; background-position-y:top; width:100%; min-height:540px; margin:20px 0; text-align:center; padding-top: 60px; } .home #ninja p{ line-height:1.6em; letter-spacing: 0.01em; margin-bottom:2em; } span.under_link{ display:block; color:#7b7b7b; font-size:20px; font-family: 'latoitalic'; margin-top: 20px; } .site-footer{ width:100%; height:270px; background-color:#f5f6f6; margin-top: 30px; } .site-footer .footer_menu ul { list-style: none; padding: 0; } .site-footer .footer_menu ul li { margin: 0 5px; display:inline-block; } .site-footer .footer_menu ul li a{ color:#333; font-size:16px; text-decoration:none; font-family: 'latomedium'; } .site-footer .footer_menu ul li a:hover{ text-decoration:underline; } .site-footer .social{ text-align: center; width: 100%; margin: 65px 0 0 0; } .site-footer .social a { background: url("/content/images/social_ico.png") no-repeat scroll 0 0 transparent; display: inline-block; width: 24px; height: 24px; margin: 0 5px; } .site-footer .social a.fb{ background-position: 0 0; } .site-footer .social a.twt{ background-position: 0 -24px; } .site-footer .social a.g_plus{ background-position: 0 -48px; } .site-footer .social a.in{ background-position: 0 -74px; } .site-footer .copy{ text-align: center; width: 100%; color:#333; font-size:16px; font-family: 'latomedium'; margin: 30px 0 0 0; } .site-footer .copy span{} .site-content #content_inside{ width:100%; margin:100px 0; float: left; } .testimonials .site-content #content_inside { margin: 50px 0; } .faq .site-content #content_inside { margin: 80px 0; } .job .site-content #content_inside { margin: 0px 0; } .contact .site-content #content_inside { margin: 110px 0; } .spage .site-content #content_inside { margin: 110px 0; } .site-content #content_inside p { line-height: 1.6em; margin-bottom: 1.8em; } .site-content #content_inside h1{ font-size:73px; font-weight:normal; font-family: 'Playfair Display'; color:#333; } .orange_line{ position:relative; padding-bottom: 70px; margin-bottom: 60px; } .orange_line:after{ position:absolute; content:""; border-bottom:4px solid #cd2128; width:168px; height:0; bottom:0; left:50%; margin-left:-84px; } .spage #content_inside p{ margin-bottom: 1.6em; } .spage #content_inside img{ display:inline-block; } .registration #top_side ul.subhead { padding: 0; margin: 20px 0 0 0; list-style: none; } .registration #top_side ul.subhead li { color: #fff; font-size: 27px; display: inline-block; position: relative; padding: 0 52px 0 0; } .registration #top_side ul.subhead li.last{ padding:0; } .registration #top_side ul.subhead li:before { position: absolute; content: "."; font-size: 65px; line-height: 0; top: 0%; right: 15px; } .registration #top_side ul.subhead li.last:before{ content: ""; } .registration #content_inside .form_inside{ width:540px; margin:0 auto; } .registration #content_inside .form_inside .top_form_banner { width: 100%; border-top: 14px solid #f5f6f6; position: relative; height: 160px; } .registration #content_inside .form_inside .top_form_banner .n_one{ display: inline-block; position: absolute; top: -50px; } .registration #content_inside .form_inside .top_form_banner .n_one .outside{ width: 96px; text-align: center; height: 96px; border-radius: 60px; background-color: #f5f6f6; padding-top:11px; } .registration #content_inside .form_inside .top_form_banner .n_one.left{ left:102px; } .registration #content_inside .form_inside .top_form_banner .n_one.right{ right:102px; } .registration #content_inside .form_inside .top_form_banner .n_one .n_one_inside { font-size: 56px; font-family: 'Playfair Display'; background-color: #f5f6f6; display: inline-block; width: 74px; text-align: center; height: 74px; border: 1px solid #cfd0d0; border-radius: 40px; color:#cfd0d0; } .registration #content_inside .form_inside .top_form_banner .n_one.activ .n_one_inside { border: 1px solid #afafaf; color:#333; } .registration #content_inside .form_inside .top_form_banner .n_one span.text{ font-size:20px; text-align: center; color:#cfd0d0; display:inline-block; width:100%; margin-top:8px; } .registration #content_inside .form_inside .top_form_banner .n_one.activ span.text{ color:#333; } .registration #content_inside .form_inside form#r_form{ float: left; width: 100%; } .registration #content_inside .form_inside form#r_form .form_item { float: left; width: 100%; position:relative; margin-bottom:30px; } .registration #content_inside .form_inside form#r_form .form_item:before{ position:absolute; content:""; width:54px; height:52px; top:2px; left:2px; background-color: #fff; border-right:1px solid #c0c0c0; border-radius:5px 0 0 5px; } .registration #content_inside .form_inside form#r_form .form_item#company_name:before{ background: #fff url("/content/images/r_company_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#contact_name:before{ background: #fff url("/content/images/r_name_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#phone_number:before, .registration #content_inside .form_inside form#r_form .form_item#phone_number_2:before{ background: #fff url("/content/images/r_phone_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#email_address:before{ background: #fff url("/content/images/r_email_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#password:before, .registration #content_inside .form_inside form#r_form .form_item#password_2:before{ background: #fff url("/content/images/r_pass_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#cc_number:before{ background: #fff url("/content/images/r_ccard_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#cc_expiration:before{ background: #fff url("/content/images/r_calendar_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#cc_cvv:before{ background: #fff url("/content/images/r_cvv_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item#cc_zip:before{ background: #fff url("/content/images/r_zip_ico_new.png") no-repeat scroll center center; } .registration #content_inside .form_inside form#r_form .form_item input.text_field, .btHostedField{ width: 100%; font-size:20px; height:56px; padding:0 10px 0 75px; border:1px solid #c0c0c0; border-radius:5px; background-color:#f7f6f4; } .registration #content_inside .form_inside form#r_form .form_item input.text_field:focus, .btHostedField:focus{ border:2px solid #333333; } .registration #content_inside .form_inside form#r_form .form_item input.text_field.error, .btHostedField.error{ border:2px solid red; } .registration #content_inside .form_inside form#r_form .form_item .field_info{ color:#7b7b7b; font-size:16px; font-family: 'latoitalic'; padding:2px 4px; } .form_inside .next_step_ext{ display:block; width:100%; text-align:center; } #emailPreviouslyRegisteredSection { margin-bottom:30px; margin-top:-30px; background-color:palegreen; border:solid 1px palegreen !important; border-radius: 10px; font-size:15px; } #emailPreviouslyRegisteredSection div { padding:0px 15px !important; margin-bottom:15px !important; } #emailPreviouslyRegisteredSection p { margin-bottom:5px !important ; } .form_inside a#next_step.btn { font-size: 34px; padding: 28px 90px; margin-top: 30px; } .registration #content_inside .form_inside #part_2 .cc_image_side{ text-align:center; margin-bottom: 20px; margin-top:30px; cursor:pointer; } .registration #content_inside .form_inside #part_2 img#ccard_image{ display:inline-block; } .registration #content_inside .form_inside .free_month{ float:left; width:100%; margin-bottom:20px; } .registration #content_inside .form_inside .free_month h3{ text-align:center; font-size:28px; font-weight:normal; font-family: 'cabinregular'; } .registration #content_inside .form_inside .free_month .r_item{ float:left; width:100%; margin-bottom:10px; padding-left: 60px; } .registration #content_inside .form_inside .free_month label{ } .toggleR { background: url("/content/images/radio_btn.png") no-repeat scroll 0 -23px transparent; display: inline-block; height: 21px; width: 21px; position: relative; top: 4px; margin-right:10px; } .toggleR.checked { background-position: 0 0; } .toggleC { background: url("/content/images/checkbox_btn.png") no-repeat scroll 0 4px transparent; display: inline-block; height: 24px; width: 21px; position: absolute; top: 0px; left:0; margin-right:10px; } .toggleC.checked { background-position: 0 -23px; } #content_inside .form_inside .by_checking { position: relative; width: 100%; float: left; margin-bottom:60px; } #content_inside .form_inside .by_checking label { padding-left: 30px; display: inline-block; } #content_inside .form_inside .capcha{ width: 100%; float: left; text-align:center; } #debitCreditCardsOuter { margin-bottom:60px; } #content_inside .form_inside .capcha p{ margin: 0 0 15px 0; } #content_inside .form_inside .capcha .capcha_side{ text-align:center; } #content_inside .form_inside .capcha .capcha_side .g-recaptcha{ display:inline-block; } #content_inside .form_inside .submit-holder{ float:left; width:100%; margin-top:40px; text-align:center; } #content_inside .form_inside .submit-holder input#sendForm{ font-family: 'latobold'; font-size:34px; text-decoration:none; text-transform:uppercase; color:#fff; background-color:#cd2128; line-height:1; display:inline-block; padding:30px 130px; border-radius: 10px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border:none; } #sendForm.btn.white { background-color:white !important; color:#cd2128 !important; } #sendForm.btn.white.redBorder { border:solid 1px #cd2128 !important; } #sendForm.btn.white:hover { background-color:#d0d0d0 !important; color:#cd2128 !important; } #content_inside .form_inside .submit-holder input#sendForm:hover{ background-color:#b27320; } .testimonials #content_inside .testi_item { float: left; width: 100%; box-shadow: 0px 5px 50px 8px #ddd; padding:50px 40px 40px 100px; position:relative; margin-bottom:65px; } .testimonials #content_inside .testi_item:before { position: absolute; content: '“'; font-family: 'Bodoni Moda'; font-size: 240px; top: -28px; left: 32px; color: #f6f6f6; line-height: 1; z-index: -1; } .testimonials #content_inside .testi_item .testi_text{ font-family: 'Bodoni Moda'; font-size:24px; } .testimonials #content_inside .testi_item .testi_item_footer { float: right; margin-top: 20px; text-align: right; display: table; } .testimonials #content_inside .testi_item .testi_item_footer span.logo { display: table-cell; } .testimonials #content_inside .testi_item .testi_item_footer span.logo img { display: inline-block; } .testimonials #content_inside .testi_item .testi_item_footer span.author{ color:#7b7b7b; display: table-cell; vertical-align: middle; padding-left: 20px; } .testimonials #content_inside .center_section { background: url("/content/images/center_testi_new.jpg") no-repeat scroll 0 0 transparent; float: left; width: 100%; min-height: 976px; padding:100px 0; margin-bottom:50px; background-position:center; } .testimonials #content_inside .center_section h2{ font-weight:normal; color:#fff; font-size:52px; font-family: 'cabinregular'; text-align:center; line-height:1; margin-bottom: 1.5em; } .testimonials #content_inside .center_section .three_sec .item { float: left; width: 33.33%; } .testimonials #content_inside .center_section .three_sec .item .image_side{ text-align:center; } .testimonials #content_inside .center_section .three_sec .item .image_side img{ display:inline-block; } .testimonials #content_inside .center_section .three_sec .item h3{ color:#fff; font-size:30px; font-family: 'cabinregular'; font-weight:normal; text-align:center; } .testimonials #content_inside .center_section .btn_side{ text-align:center; } .testimonials #content_inside .center_section .btn_side a.btn{ margin-top: 50px; padding: 30px 50px; } .testimonials #content_inside .center_section .btn_side .under_btn{ color:#fff; font-size:28px; font-family: 'latoitalic'; margin-top:30px; } .free_banner{ background: url("/content/images/home_ninja_bg_new.png") no-repeat scroll center 0 transparent; width: 100%; min-height: 540px; margin: 0px 0 50px; text-align: center; padding-top: 130px; } .free_banner .s1{ font-size:108px; font-family: 'Playfair Display'; color:#333; } .free_banner .s2{ font-size:108px; font-family: 'Playfair Display'; color:#cd2128; } .free_banner a.btn{ font-size:34px; padding: 28px 65px; } .free_banner .under_link{ font-family: 'latoregular'; color:#333; margin-top: 30px; } .free_banner .under_link a{ color:#cd2128; } .faq #content_inside .left_col{ float:left; width:50%; padding-right:30px; } .faq #content_inside .right_col{ float:right; width:50%; padding-left:30px; } .faq #content_inside .item{ float: left; width: 100%; margin-bottom: 10px; } h3.u_line{ font-size:28px; font-family: 'cabinregular'; font-weight:normal; position:relative; padding-bottom:35px; } h3.u_line:after{ position: absolute; content: ""; border-bottom: 4px solid #cd2128; width: 168px; height: 0; bottom: 0; left: 0; } h3.u_line_center{ font-size:28px; font-family: 'cabinregular'; font-weight:normal; position:relative; padding: 0 10px 35px; text-align: center; } h3.u_line_center:after{ position: absolute; content: ""; border-bottom: 4px solid #cd2128; width: 168px; height: 0; bottom: 0; left: 50%; margin-left:-84px; } .faq #content_inside ul{ padding: 0; margin: 0; list-style: none; } .faq #content_inside ul li { display: block; position: relative; padding: 0 0 0 23px; margin-bottom:12px; line-height:1.5em; } .faq #content_inside ul li.last{ padding:0; } .faq #content_inside ul li:before { position: absolute; content: "."; font-size: 30px; line-height: 0; top: 5px; left: 5px; } .faq #content_inside p { line-height: 1.5em; margin-bottom: 1.5em; } .job #top_side .search_side{ float:left; width:100%; text-align:center; margin-top: 5px; } .job #top_side .search_side form{ display: inline-block; } .job #top_side .search_side input.text_field { font-family: 'latolight'; width: 413px; height: 60px; border-radius: 5px; border: none; margin-right: 15px; background-color: #f7f6f4; padding: 0 20px 0 50px; display: block; float: left; } .job #top_side .search_side input.text_field.company_keywords{ background: #f7f6f4 url("/content/images/lupa.png") no-repeat scroll 18px center; } .job #top_side .search_side input.text_field.city_zip{ background: #f7f6f4 url("/content/images/point_rot.png") no-repeat scroll 18px center; } .job #top_side .search_side input#sendForm { font-family: 'latobold'; font-size: 22px; text-transform: uppercase; background-color: #cd2128; color: #fff; height: 60px; padding: 0 27px; border: none; border-radius: 5px; display: block; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .job #top_side .search_side input#sendForm:hover{ background-color:#7b2707; } #content_inside .job_section{ float: left; width:100%; margin-top: 40px; } #content_inside .job_section .row { float: left; width: 100%; padding:17px 0; display: table; border-left:5px solid transparent; position: relative; } #content_inside .job_section .row.odd{ background-color:#fbfbfb; border-left:5px solid #c0c0c0; } #content_inside .job_section .row .item{ display: table-cell; vertical-align: middle; } #content_inside .job_section .row .item.j_title{ width: 41%; padding:0 23px 0 23px; } #content_inside .job_section .row .item.j_title.t2{ width: 21%; } #content_inside .job_section .row .item.j_point{ width: 24%; padding:0 10px 0 27px; background-image:url("/content/images/point.png"); background-repeat: no-repeat; background-position: 0 center; } #content_inside .job_section .row .item.j_time{ width: 14%; padding:0 10px 0 27px; background-image:url("/content/images/clock.png"); background-repeat: no-repeat; background-position: 0 center; } #content_inside .job_section .row .item.j_more{ width: 131px; } #content_inside .job_section .row .item.j_more a.j_btn{ background-color:#cd2128; color:#fff; font-size:16px; font-family: 'latobold'; padding:8px 26px; line-height:1; text-transform:uppercase; border-radius: 5px; display: inline-block; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-align:center; border: solid 1px #cd2128; } #content_inside .job_section .row .item.j_more a.j_btn:hover{ background-color:#fff; color: #cd2128; text-decoration:none; } .job #top_side .metadata{} .job #top_side .metadata .item { color: #fff; font-size: 18px; font-family: 'cabinregular'; display: inline-block; margin-right: 33px; } .job #top_side .metadata .item.sj_point{ padding:0 10px 0 27px; background-image:url("/content/images/point_white.png"); background-repeat: no-repeat; background-position: 0 center; } .job #top_side .metadata .item.sj_time{ padding:0 10px 0 27px; background-image:url("/content/images/clock_white.png"); background-repeat: no-repeat; background-position: 0 center; } .job #content_inside .ls{ float:left; width:72%; padding-right: 30px; } .job #content_inside .rs{ float:right; width:28%; } .job #content_inside h3{ font-size:28px; font-family: 'cabinregular'; font-weight:normal; } .job .site-content #content_inside p { margin-bottom: 1.3em; } .job #content_inside ul{ padding: 0; margin: 0; list-style: none; } .job #content_inside ul li { display: block; position: relative; padding: 0 0 0 48px; margin-bottom:12px; line-height:1.5em; } .job #content_inside ul li.last{ padding:0; } .job #content_inside ul li:before { position: absolute; content: "."; font-size: 50px; line-height: 0; top: -2px; left: 26px; } .job #content_inside a.btn{ margin-top:60px; font-size: 28px; padding:20px 54px; } #content_inside a.italic{ font-family: 'latoitalic'; } .about #content_inside .row{ float:left; width:100%; position:relative; margin-bottom:100px; } .about #content_inside .row .ls{ float:left; width:50%; position:relative; } .about #content_inside .row img{ display:block; } .about #content_inside .row .rs{ float:right; width:50%; position:relative; } .about #content_inside .row article{ position:absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); width:100%; } .about #content_inside .row img.center_image { position: absolute; top: 50%; left: 50%; margin-top: -107px; margin-left: -107px; z-index: 2; } .about #content_inside .row#r1 .ls{ height:328px; } .about #content_inside .row#r1 article{ padding-right:196px; } .about #content_inside .row#r2 .rs{ height:328px; } .about #content_inside .row#r2 article{ padding-left:152px; } .about #content_inside .row#r3 .ls{ height:328px; } .about #content_inside .row#r3 article{ padding-right:102px; } .privacy #content_inside .item{ float:left; width:33%; padding:0 50px; text-align:center; } .contact #content_inside .ls{ float:left; width:72.5%; padding-right: 30px; } .contact #content_inside .rs{ float:right; width:27.5%; padding-top: 85px; } .contact #content_inside .ls p{ font-size:24px; margin-bottom: 1.3em; } .contact #content_inside .ls form#c_form{ max-width:750px; width:100%; } .contact #content_inside .ls form#c_form input.text_field { width: 100%; margin-bottom: 20px; border-radius: 5px; height:54px; border:1px solid #c0c0c0; background-color:#f7f6f4; font-size:20px; padding:0 20px; } .contact #content_inside .ls form#c_form textarea.message{ width: 100%; margin-bottom: 20px; border-radius: 5px; height:305px; border:1px solid #c0c0c0; background-color:#f7f6f4; font-size:20px; padding:12px 20px; resize:none; } .contact #content_inside .ls form#c_form input#sendForm{ font-family: 'latobold'; font-size: 28px; text-transform: uppercase; background-color: #cd2128; color: #fff; padding: 15px 54px; border: none; border-radius: 5px; display: block; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; margin-top: 20px; } .contact #content_inside .ls form#c_form input#sendForm:hover{ background-color:#b27320; } .contact #content_inside .rs .item { float: left; width: 100%; text-align: center; margin-bottom: 62px; } .contact #content_inside .rs .item img.pict{ display:inline-block; margin-bottom: 15px; } .contact #content_inside .rs .item .tel{ font-size:35px; } .contact #content_inside .rs .item .tel a{ font-size:30px; text-decoration:underline; } .contact #content_inside .rs .item .tel a:hover{ text-decoration:none; } .contact #content_inside .ls .form_submitted{ text-align: center; float:left; width:100%; background: transparent url("/content/images/contact_submitted.png") no-repeat scroll center center; min-height:618px; } .contact #content_inside .ls .form_submitted h2{ font-family: 'Playfair Display'; font-size:73px; font-weight:normal; margin: 200px 0 0px 0; } .contact #content_inside .ls .form_submitted p{ font-size:18px; } .contact #content_inside .form_section .error_side { float: left; width: 100%; display: block; position: relative; height: 40px; } .contact #content_inside .form_section p.error{ color:#cd2128; font-size:18px; margin: 0; position: absolute; top: -12px; left: 0; } .contact #content_inside .form_section .validation_error{ color:#fff; background-color:#cd2128; margin-top:40px; float:left; width:100%; border-radius:5px; padding:22px 34px; font-size:20px; } #content_inside .video { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; float:left; width:100%; text-align:center; } #content_inside .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .footer-div { margin-top:45px; float:left; width:33.33%; padding:0 2%; } .footer-div img { margin-top:-15px !important; } #newsletterDiv { margin: 0px 30px; } #newsletterDiv p { width:100%; margin-top:5px; } #blogPostsOuter { float: left; width: 100%; margin: 60px 0 0px 0px; padding-top: 0px; } #blogPostsOuter #blogPostsTitle{ text-align:center; margin-bottom: 50px; } #blogPostsOuter #blogPostsTitle a{ font-family: 'Montserrat'; font-size: 46px; font-weight: normal; color:#333; } #blogPostsOuter #blogPostsTitle a:hover{ text-decoration:none; } #blogPostsOuter .blogOuter{ float:left; width:33.33%; padding: 0 2%; } #blogPostsOuter .blogOuter .blogDate{ font-family: 'latobold'; font-size: 15px; border-top: 3px solid #960c11; padding: 15px 0 0 0; } #blogPostsOuter .blogOuter .blogDate span{ } #blogPostsOuter .blogOuter .blogTitle { font-family: 'Montserrat'; margin: 10px 0; font-size: 20px; cursor: pointer; color:#cd2128; } #blogPostsOuter .blogOuter .blogTitle:hover { text-decoration:underline; } #blogPostsOuter .blogOuter .blogContent{ } #blogPostsOuter .blogOuter .blogReadMore { font-family: 'latoheavy'; margin: 10px 0; font-size: 15px; cursor: pointer; color: #000; float: right; margin: 15px 0; } #blogPostsOuter .blogOuter .blogReadMore:hover{ text-decoration:underline; } .form_section form#c_form .rec p{ margin-bottom:0.6em; } .opros { float: left; width: 60%; border: 2px solid #cd2128; border-radius: 8px; margin-left:20%; margin-top:30px; } .opros .inside { padding: 60px; } .opros .inside h3 { font-size: 36px; font-family: 'cabinregular'; margin: 0; } .opros .inside form#op_form .item p { margin-bottom: 0.5em; margin-top: 2em; } form#op_form .item span.selectbox{ width:60%; } form#op_form .item span.selectbox .select { border: 1px solid #c0c0c0; border-radius: 5px; padding: 0 40px 0px 16px; background-color:#f7f6f4; height:56px; line-height:56px; width:100%; } .item.w100{ width:100%; } form#op_form .item span.selectbox .select span.text{ color:#333; font-size:20px; line-height:1; display: inline-block; padding-top: 6px; } form#op_form .item span.selectbox .select b.trigger { position: absolute; top: 1px; right: 1px; background-color:#fff; width:53px; height:53px; border-radius: 0 5px 5px 0; } form#op_form .item span.selectbox .select b.trigger i.arrow { background: transparent url("/content/images/demo_apply_triangle.png") no-repeat scroll center center; width:100%; height:100%; display: inline-block; } form#op_form .item span.selectbox ul.dropdown{ border: 1px solid #222; border-radius: 5px; top: 56px; margin:0; padding:0; width:100%; background-color:#f7f6f4; } form#op_form .item span.selectbox ul.dropdown li{ color:#333; padding: 5px 38px 5px 16px; } form#op_form .item span.selectbox ul.dropdown li:hover{ background-color:#e3e1dd; } form#op_form .item{ float:left; width:100%; margin-bottom:20px; } form#op_form .item textarea{ width: 100%; font-size: 20px; height: 196px; padding: 10px 15px; border: 1px solid #c0c0c0; border-radius: 5px; background-color: #f7f6f4; resize: none; display:none; } form#op_form .item textarea:focus{ border:2px solid #333333; } .opros form#op_form .submit-holder{ margin-top:30px; } .opros form#op_form .submit-holder input#sendForm { font-family: 'latobold'; font-size: 26px; text-decoration: none; text-transform: uppercase; color: #fff; background-color: #cd2128; line-height: 1; display: inline-block; padding: 20px 60px; border-radius: 10px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border: none; } .opros form#op_form .submit-holder input#sendForm:hover { background-color: #b27320; } .negTop15 { margin-top:-15px !important; } form#r_form { margin-top:-50px !important; } @media screen and (max-width:1680px){ body{ margin:0 auto; } } @media screen and (max-width:1366px){ body{ width:1366px; } } @media screen and (max-width:1360px){ body{ width:1360px; } } @media screen and (max-width:1280px){ body{ width:1280px; } .features #check_it .item br{ display:none; } .home #check_it .item br{ display:none; } .job .site-content #content_inside p br { display:none; } .job .site-content #content_inside div.wrapper div.ls p br { display:inline-block; } .job #content_inside ul li br{ display:none; } .registration #top_side ul.subhead li:before { font-size: 50px; top: 8%; right: 8px; } .registration #top_side ul.subhead li { font-size: 25px; padding: 0 32px 0 0; } } @media screen and (max-width:1152px){ body{ width:1152px; } .wrapper { width: 96%; } .site-header .top_menu ul li { margin-left: 15px; } .site-header .top_menu ul li a { font-size: 18px; } .about #content_inside .row img { margin-top: 25px; } .about #content_inside .row img.center_image { margin-top: -90px; margin-left: -90px; width: 180px; } .about #content_inside .row#r1 article { padding-right: 116px; } .about #content_inside .row#r2 article { padding-left: 112px; } .site-content #content_inside { margin: 100px 0; } .home #top_side { height: 731px; background-size: cover; } .home #top_side article { margin-top:0px !important; } .home #top_side article h1 { font-size:40px; } .home #top_side article p { font-size:24px; } .home #top_side article.btn { margin-top:30px !important; } .job #top_side .search_side input.text_field { width: 35%; margin-right: 2%; } .job #top_side .search_side input#sendForm { padding: 0 27px; width: 26%; } .registration #top_side ul.subhead li:before { font-size: 45px; top: 9%; right: 6px; } .registration #top_side ul.subhead li { font-size: 22px; padding: 0 26px 0 0; } } @media screen and (max-width:1024px){ body{ width:1024px; } form#r_form { margin-top:0px !important; } .site-header .top_menu ul li { margin-left: 12px; } #top_side { height: 380px; background-size: cover!important; } #top_side article { margin-top: 90px; } .account #top_side article { margin-top: 50px; } .free_banner .s1,.free_banner .s2 { font-size: 80px; } .about #content_inside .row img { margin-top: 40px; } #top_side article p { font-size: 25px; } .contact .site-content #content_inside { margin: 60px 0; } .features #top_side article { margin-top: 40px; } .home #top_side { height: 631px; background-size: cover; } .home #top_side article { margin-top: 80px; } .home #top_side article a.btn { margin-top: 0px !important; } a.btn { margin-top: 60px; } .privacy #content_inside .item { padding: 0 20px; } .registration #top_side ul.subhead { margin: 0px; } .site-content #content_inside h1 { font-size: 70px; } .spage #content_inside p { font-size:16px; } .testimonials #top_side article { margin-top: 50px; } .site-footer .footer_menu ul li { margin: 0 5px; } } @media screen and (max-width:960px){ body{ width:960px; } .footer-div { width:100%; } #newsletterDiv { margin: 0px; } #footerImgWrapper { display:none; } .home #top_side { margin-top:50px; } .site-header .top_menu { margin-top: 20px; position: absolute; top: 0; right: 0; } .site-header .inside .top_menu button.menu-toggle { display: block; } .cmn-toggle-switch { float:right; top:15px; display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 47px; height: 42px; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: none; z-index: 2; border: 1px solid #fff; border-radius:8px; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; } .cmn-toggle-switch.black { border-color:#333 !important; } .cmn-toggle-switch span { background: white none repeat scroll 0 0; display: block; height: 3px; left: 9px; position: absolute; right: 9px; top: 18px; } .cmn-toggle-switch.black span { background-color:#333 !important; } .cmn-toggle-switch span:before, .cmn-toggle-switch span:after { background-color: #fff; content: ""; display: block; height: 3px; left: 0; position: absolute; width: 100%; } .cmn-toggle-switch.black span:before, .cmn-toggle-switch.black span:after { background-color:#333 !important; } .cmn-toggle-switch span:before { top: -8px; } .cmn-toggle-switch span:after { bottom: -8px; } .cmn-toggle-switch__rot { background-color: rgba(255, 255, 255, 0); } .cmn-toggle-switch__rot span { -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } /* active state, i.e. menu open */ .cmn-toggle-switch__rot.active { background-color: rgba(255, 255, 255, 0); } .cmn-toggle-switch__rot.active span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .cmn-toggle-switch:focus { outline: none; } .site-header .top_menu ul { list-style: none; padding: 6px 0; width: 230px; position: absolute; right: 0; top: 60px; border: 1px solid #fff; background-color:rgba(255, 255, 255, 0.95); display:none; z-index: 2; } .site-header .top_menu.active ul { display:block; box-shadow: 0px 2px 8px #aaa; } .site-header .top_menu ul li { float: none; margin-left: 0px; width: 100%; text-align: right; display: inline-block; margin-bottom: 5px; padding:3px 10px; } .site-header .top_menu ul li:hover{ background-color:#ff7b83; } .site-header .top_menu ul li a { color:#333; display:block; } .site-header .top_menu ul li a:hover { text-decoration:none; } .about #content_inside .row img.center_image { margin-top: -70px; margin-left: -70px; width: 140px; } .about #content_inside .row#r1 article { padding-right: 70px; } .about #content_inside .row#r2 article { padding-left: 80px; } .site-content #content_inside { margin: 50px 0; } .site-footer .footer_menu ul li { margin: 0 20px 0 0; } #top_side { height: 330px; } #top_side article { margin-top: 60px; } #top_side article p { font-size: 22px; margin-top: 0.5em; } #top_side article h1 { font-size: 42px; margin: 0 0 10px 0; } .features #top_side article { margin-top: 30px; } .home #testimonial { min-height: 430px; margin-top: 80px; } .home #testimonial .testi_item { margin-top: -30px; } .job #top_side article { margin-top: 30px; } .job #top_side .search_side { margin-top: 15px; } .registration #top_side article { margin-top: 35px; } .spage #content_inside img { max-width: 70%; } .site-content #content_inside h1 { font-size: 60px; } .orange_line { padding-bottom: 50px; margin-bottom: 60px; } .testimonials #top_side article { margin-top: 40px; } .testimonials #content_inside .testi_item { padding: 50px 40px 40px 80px; margin-bottom: 65px; } .testimonials #content_inside .center_section .three_sec .item h3 { font-size: 26px; } .testimonials #content_inside .center_section .three_sec .item .image_side img { width: 180px; } .testimonials #content_inside .center_section { background-size: cover; min-height: 876px; background-position: center top; } .spage .site-content #content_inside { margin: 80px 0 0 0; } .site-footer .footer_menu ul li { margin-bottom: 10px; } } @media screen and (max-width:800px){ body{ width:800px; } #top_side { height: 280px; } #top_side article { margin-top: 40px; } #top_side article h1 { font-size: 38px; } .free_banner { background-size: 600px; } .about #content_inside .row .ls { width: 100%; height:auto; } .about #content_inside .row .rs { float: left; width: 100%; } .about #content_inside .row { text-align: center; } .about #content_inside .row#r1 article { padding-right: 0; } .about #content_inside .row#r2 article { padding-left: 0; } .about #content_inside .row#r3 article { padding-right: 0; } .about #content_inside .row h3.u_line:after{ position: absolute; content: ""; border-bottom: 4px solid #cd2128; width: 168px; height: 0; bottom: 0; left: 50%; margin-left: -84px; } .about #content_inside .row img { display: inline-block; } .about #content_inside .row { margin-bottom: 20px; } .free_banner .s1, .free_banner .s2 { font-size: 60px; } .site-footer .footer_menu ul li { margin: 0 10px; } .site-footer { height: auto; margin-top: 60px; padding-bottom: 20px; } .account #top_side article { margin-top: 30px; } .contact #content_inside .ls { float: left; width: 100%; padding-right: 0; text-align: center; } .contact #content_inside .rs { float: right; width: 100%; padding-top: 85px; } .contact #content_inside .ls form#c_form input#sendForm { display: inline-block; } .features #top_side article { margin-top: 10px; } .home #top_side article p { font-size: 24px; } .job #top_side article { margin-top: 20px; } .job #top_side .search_side input.text_field { height: 40px; } .job #top_side .search_side input#sendForm { font-size: 20px; height: 40px; } #content_inside .job_section .row .item.j_more { width: 100%; display: block; position: absolute; left: 0; top: 0; height: 100%; } #content_inside .job_section .row .item.j_more a.j_btn { background-color: transparent; padding: 0; display: block; position: absolute; width: 100%; height: 100%; text-indent: -9999px; border-radius:0; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } #content_inside .job_section .row .item.j_more a.j_btn:hover { background-color:rgba(254, 254, 254, 0.2); border:2px solid #ccc; } #content_inside .job_section .row { display: block; text-align: center; } #content_inside .job_section .row .item { display: block; } #content_inside .job_section .row .item.j_title { width: 100%; padding: 0 23px 0 23px; float:left; font-size:20px; margin-bottom: 8px; } #content_inside .job_section .row .item.j_point { width: auto; padding: 0 23px 0 57px; float: none; background-position: 23px center; display:inline-block; } #content_inside .job_section .row .item.j_time { width: auto; padding: 0 23px 0 27px; float: none; display:inline-block; } #content_inside .job_section .row .item.j_title.t2 { width: 100%; margin-top:10px; float:none; } .job #content_inside .ls { width: 100%; padding-right: 0; text-align: center; } .job #content_inside ul { text-align: left; } .job #content_inside .rs { float: left; width: 100%; text-align: center; } #content_inside .rs h3.u_line:after { position: absolute; content: ""; border-bottom: 4px solid #cd2128; width: 168px; height: 0; bottom: 0; left: 50%; margin-left: -84px; } .privacy #content_inside .item { width: 100%; padding: 0 10px; } .registration #top_side article { margin-top: 25px; } .registration #top_side ul.subhead li:before { font-size: 40px; } .registration #top_side ul.subhead li { font-size: 18px; padding: 0 24px 0 0; } .registration #content_inside .form_inside { width: 70%; margin: 0px auto; } .site-content #content_inside h1 { font-size: 50px; } .orange_line { padding-bottom: 40px; margin-bottom: 50px; } .testimonials #content_inside .center_section { min-height: 200px; } .testimonials #content_inside .center_section h2 { font-size: 45px; } .testimonials #content_inside .center_section .three_sec .item .image_side img { width: 120px; } .testimonials #content_inside .center_section .three_sec .item h3 { font-size: 22px; } .site-content #content_inside .apply .form_side p { font-size: 18px; } .form_section form#c_form .rec{ } .form_section form#c_form .g-recaptcha { display: inline-block; } .opros { width: 80%; margin-left: 10%; } .opros .inside { padding: 40px; } } @media screen and (max-width:768px){ body{ width:768px; } .faq #content_inside .left_col { float: left; width: 100%; padding-right: 0; } .faq #content_inside .right_col { float: left; width: 100%; padding-left: 0; } #check_it { margin-top:30px; } #check_it .item { width: 100%; float: left; text-align: center; padding: 20px 15px 0 15px; margin-top: 15px; } #check_it .item.center_one { margin-left: 0; margin-top: 0; } .features #check_it { margin-top: 40px; } .home #top_side article p { font-size: 24px; } .home #top_side article h1 { font-size: 32px; } .home #testimonial { margin:0px 0px; } .home #ninja { margin:15px 0px; padding-top:10px; } .free_banner { min-height: auto; } .testimonials #top_side article { margin-top: 20px; } #blogPostsOuter { margin: 0px 0; padding-top: 15px; } #blogPostsOuter .blogOuter { width: 100%; padding: 0 2%; } } @media screen and (max-width:736px){ body{ width:736px; } .spage #content_inside p br { display:none; } } @media screen and (max-width:640px){ body{ width:640px; } .mobileOnly { display:inline; } .about #content_inside .row article { position: relative; top: 0; transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); -moz-transform: translateY(0%); width: 100%; } .about #content_inside .row#r1 .ls, .about #content_inside .row#r2 .rs, .about #content_inside .row#r3 .ls{ height: auto; margin-bottom:70px; } .about #content_inside .row img.center_image { top: auto; left: 50%; bottom: 260px; } .contact #content_inside .ls .form_submitted { min-height: 418px; background-size: 300px; } .contact #content_inside .ls .form_submitted h2 { font-size: 63px; margin: 110px 0 0px 0; } .home #top_side { background-position:left !important; margin-top:15px !important; } .home #testimonial blockquote { font-size: 22px; padding: 85px 0; } .job #top_side { height: 390px; } .job.details #top_side { height: 340px; } .job #top_side .search_side input.text_field { width: 100%; margin-right: 0; margin-bottom: 10px; } .job #top_side .search_side input#sendForm { padding: 0 27px; width: 100%; } .job #top_side .metadata span.rz { display: block; margin-bottom: 10px; } .registration #content_inside .form_inside .free_month .r_item { padding-left: 30px; } .testimonials #content_inside .center_section .three_sec .item h3 { font-size: 20px; padding: 0 15px; } .testimonials #content_inside .testi_item .testi_text { font-size: 22px; } } @media screen and (max-width:627px){ body{ width:627px; } } @media screen and (max-width:600px){ body{ width:600px; } .registration #content_inside .form_inside .top_form_banner .n_one.left { left: 15%; } .registration #content_inside .form_inside .top_form_banner .n_one.right { right: 15%; } .about #content_inside .row img.center_image { bottom: 235px; } .free_banner { margin: 60px 0 50px; padding-top: 80px; } .free_banner .s1, .free_banner .s2 { font-size: 50px; } .contact #content_inside .ls p { font-size: 20px; } .home #top_side article { margin-left:15px; } .home #top_side article h1 { margin-top:15px; font-size: 36px; } .home #top_side article p { margin:10px 0; font-size: 22px; } .home #top_side article a.btn { margin-top:30px !important; font-size:22px; } .home #top_side article p span { font-size: 26px; } .testimonials #content_inside .testi_item .testi_item_footer span.logo img { max-width: 120px; } .free_banner { background-size: 90%; } #top_side article p { font-size: 20px; margin-top: 0.5em; } .opros { width: 90%; margin-left: 5%; } } @media screen and (max-width:568px){ body{ width:568px; } } @media screen and (max-width:480px){ body{ width:480px; } .about #content_inside .row img.center_image { bottom: 185px; } .free_banner .s1, .free_banner .s2 { font-size: 40px; } .home #testimonial { min-height: 450px; } .home #ninja { background: url("/content/images/home_ninja_bg_new.png") no-repeat scroll center 85px transparent; width: 100%; min-height: auto; margin: 15px 0; text-align: center; padding-top: 10px; background-size: 90%; } .site-content #content_inside { margin: 80px 0; } .registration #content_inside .form_inside { width: 90%; margin: 0 auto; } .registration #top_side ul.subhead li:before { content: ""; } .registration #top_side ul.subhead li { font-size: 18px; padding: 0; } .site-content #content_inside h1 { line-height: 1.2; } .testimonials #content_inside .testi_item:before { position: absolute; content: '“'; font-family: 'Bodoni Moda'; font-size: 200px; top: -20px; left: 12px; color: #f6f6f6; line-height: 1; z-index: -1; } .testimonials #content_inside .testi_item { padding: 50px 40px 40px 50px; margin-bottom: 65px; } .testimonials #content_inside .testi_item .testi_text { font-size: 20px; } .testimonials #content_inside .testi_item .testi_item_footer span.logo img { max-width: 100px; } .testimonials #content_inside .center_section h2 { font-size: 32px; } .testimonials #content_inside .center_section .three_sec .item { float: left; width: 100%; } form#op_form .item span.selectbox { width: 100%; } } @media screen and (max-width:414px){ body{ width:414px; } .about #content_inside .row img.center_image { margin-left: -50px; width: 100px; bottom: 165px; } .about #content_inside .row#r1 .ls, .about #content_inside .row#r2 .rs, .about #content_inside .row#r3 .ls { height: auto; margin-bottom: 20px; } .free_banner a.btn { font-size: 26px; padding: 20px 35px; } a.btn { margin-top: 30px; font-size: 24px; } .home #testimonial { min-height: 500px; } .opros form#op_form .submit-holder input#sendForm { font-size: 20px; padding: 20px 40px; } } @media screen and (max-width:411px){ body{ width:411px; } } @media screen and (max-width:375px){ body{ width:375px; } .about #content_inside .row img.center_image { bottom: 145px; } #content_inside .job_section .row .item.j_point { width: 100%; } #content_inside .job_section .row .item.j_time { padding: 0 23px 0 57px; float: left; background-position: 23px center; width: 100%; } .site-content #content_inside { margin: 40px 0; } .faq .site-content #content_inside { margin: 30px 0; } .free_banner { margin: 30px 0 30px; padding-top: 30px; } .faq #content_inside .item { text-align: center; } .faq #content_inside .item h3.u_line:after { position: absolute; content: ""; border-bottom: 4px solid #cd2128; width: 168px; height: 0; bottom: 0; left: 50%; margin-left: -84px; } .faq #content_inside ul { text-align: left; } .home #testimonial blockquote { font-size: 20px; } #top_side article h1 { font-size: 34px; } .registration #content_inside .form_inside .top_form_banner { margin-top: 40px; } .registration #content_inside .form_inside .top_form_banner .n_one.left { left: 10%; } .registration #content_inside .form_inside .top_form_banner .n_one.right { right: 10%; } .form_inside a#next_step.btn { font-size: 30px; padding: 22px 30px; } .site-content #content_inside h1 { font-size: 45px; } #content_inside .form_inside .submit-holder input#sendForm { font-size: 28px; padding: 24px 68px; } } @media screen and (max-width:360px){ body{ width:360px; } #rc-imageselect, .g-recaptcha { transform:scale(0.95); -webkit-transform:scale(0.95); -o-transform: scale(0.95); -moz-transform: scale(0.95); transform-origin:0 0; -webkit-transform-origin:0 0; } .registration #top_side ul.subhead li { font-size: 16px; } #top_side article h1 { font-size: 32px; } .testimonials #content_inside .testi_item { padding: 50px 20px 40px 20px; } .registration #content_inside .form_inside form#r_form .form_item input.text_field, .btHostedField { font-size: 16px; } } @media screen and (max-width:320px){ body{ width:320px; } .about #content_inside .row img.center_image { bottom: 125px; } .contact #content_inside .ls .form_submitted { background-size: 220px; min-height: 218px; } .contact #content_inside .ls .form_submitted h2 { margin: 40px 0 0px 0; } #rc-imageselect, .g-recaptcha { transform:scale(0.85); -webkit-transform:scale(0.85); -o-transform: scale(0.85); -moz-transform: scale(0.85); transform-origin:0 0; -webkit-transform-origin:0 0; } #c_form #rc-imageselect, #c_form .g-recaptcha { transform:scale(1); -webkit-transform:scale(1); -o-transform: scale(1); -moz-transform: scale(1); transform-origin:0 0; -webkit-transform-origin:0 0; } #top_side article p { font-size: 18px; margin-top: 0.5em; } .home #top_side article h1 { font-size: 38px; } .home #testimonial blockquote { margin: 15px; } .home #ninja { padding-top: 0px; } .job #content_inside a.btn { margin-top: 60px; font-size: 26px; padding: 20px 34px; } .registration #top_side { height: 330px; } .testimonials #top_side { height: 330px; } .opros .inside form#op_form .item p { margin-top: 1em; } .opros .inside { padding: 20px; } } /* -------------------------------------------------- IMPORTS -------------------------------------------------- */ @import url('variables.css'); @import url('flexbox.css'); html { overflow-x: hidden; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: column; } .container-global { flex: 1; display: flex; flex-direction: column; min-height: 100%; } .main-content { flex: 1; } .strength-feedback, .password-strength-indicator { font-family: var(--font-family-body); } /* -------------------------------------------------- GLOBAL TYPOGRAPHY AND STRUCTURE -------------------------------------------------- */ .body { margin: 0; height: auto; } h1 { font-family: var(--font-family-title); font-weight: var(--font-weight-title); font-size: var(--font-size-title); line-height: 1; } h2 { font-family: var(--font-family-subtitle); font-weight: var(--font-weight-subtitle); font-size: var(--font-size-subtitle); } h3 { font-family: var(--font-family-subtitle2); font-weight: var(--font-weight-subtitle2); font-size: var(--font-size-subtitle2); } h4, h5, h6 { font-family: var(--font-family-body); font-size: var(--font-size-body); } h4 { font-weight: 500; } h5, h6 { font-weight: var(--font-weight-body); margin: 0; } h6 { font-size: 16px; } /* -------------------------------------------------- HEADER SECTION -------------------------------------------------- */ .header-container { width: calc(100% - 64px); margin: 25px 25px 0 25px; background-image: url('../images/home/maskGroup-op.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 32px 32px 32px 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 32px 32px 48px 32px; display: flex; flex-direction: column; position: relative; box-sizing: border-box; } .header-content { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; } .header-content { margin-top: 24px; } .header-content .promo-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } @media (max-width: 992px) { .header-container { width: calc(100% - 32px); margin: 20px 16px 0 16px; padding: 24px 24px 32px 24px; border-radius: 24px; } .header-content { flex-direction: column; align-items: center; text-align: center; gap: 20px; } .header-content .promo-wrapper { flex-direction: column; padding: 10px; text-align: center; } } @media (max-width: 576px) { .header-content { flex-direction: column; gap: 16px; justify-content: center !important; align-items: center !important; } .header-content .promo-wrapper { flex-direction: column; align-items: center; } } /* -------------------------------------------------- NAVBAR SECTION -------------------------------------------------- */ .background-banner { padding: 0px 80px 0px 90px; border-top-left-radius: 15px; border-top-right-radius: 15px; margin: 20px; margin-bottom: 0px; background-image: url('../images/home/maskGroup.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .m-body { margin-left: 90px; margin-right: 90px; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; position: relative; } .navbar-logo img { height: 50px; } .navbar-links { list-style: none; display: flex; gap: 1.5rem; } .navbar-links a { text-decoration: none; font-family: var(--font-family-navbar); font-size: var(--font-size-navbar); font-weight: var(--font-weight-navbar); color: var(--font-color); } .navbar-links a:hover { color: var(--primary-color); } .desktop-buttons { display: flex; gap: 1rem; } .navbar-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .navbar-toggle span { width: 25px; height: 3px; background-color: black; } .mobile-buttons { display: none; } @media (max-width: 844px) { .background-banner { padding: 0px; border-radius: 10px; margin: 7px; } .navbar-links { position: absolute; top: 100%; left: 0; right: 0; background-color: white; flex-direction: column; display: none; padding: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navbar-links.active { display: flex; } .navbar-toggle { display: flex; } .desktop-buttons { display: none; } .mobile-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .mobile-buttons button { width: 100%; } } @media (max-width: 60em) { .background-banner { padding: 0px; border-radius: 10px; margin: 7px; } .navbar { z-index: 100; position: relative; padding: 1rem 1.2rem; border-radius: 10px; } .navbar-links { position: absolute; top: 100%; left: 0; right: 0; background-color: #65afd5; flex-direction: column; display: none; padding: 1.5rem 1.5rem 1rem; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); border-top: 1px solid #eaeaea; animation: slideDown 0.3s ease forwards; border-radius: 10px; } .navbar-links.active { display: flex; } .navbar-links li.active a { color: #0089D1; font-weight: bold; } .navbar-links li { padding: 0.85rem 0; border-bottom: 1.5px solid #f2f2f2; } .navbar-links li:last-child { border-bottom: none; } .navbar-links a { font-size: 1.05rem; font-weight: 600; color: white; transition: color 0.2s ease; } .navbar-links a:hover { color: var(--primary-color); } .navbar-toggle { display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .navbar-toggle span { width: 26px; height: 3px; background-color: #333; transition: all 0.3s ease; border-radius: 2px; } .mobile-buttons { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; border-radius: 40px; } .mobile-buttons a { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.75rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .mobile-buttons .button-secondary { background-color: #F4B425; color: #333; } .mobile-buttons .button-secondary:hover { background-color: white; } .mobile-buttons .button-primary { background-color: white; color: black; } .mobile-buttons .button-primary:hover { background-color: #0075c4; color: white; } .desktop-buttons { display: none; } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-8%); } 100% { opacity: 1; transform: translateY(0); } } } /* -------------------------------------------------- GENERAL BUTTONS -------------------------------------------------- */ .button-primary, .button-secondary, .button-third, .button-fourth, .button-five, .button-card-feature { display: flex; justify-content: center; align-items: center; font-family: var(--font-family-button); font-size: var(--font-size-button); font-weight: var(--font-weight-button); border: none; border-radius: 7px; text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color 0.3s ease; width: auto; } /* Ensure no text decoration on all button states */ .button-primary:hover, .button-primary:active, .button-secondary:hover, .button-secondary:active, .button-third:hover, .button-third:active, .button-fourth:hover, .button-fourth:active, .button-five:hover, .button-five:active, .button-card-feature:hover, .button-card-feature:active { text-decoration: none !important; } .button-primary { padding: 10px 20px; background-color: var(--secondary-color); color: black; } .button-secondary { padding: 10px 20px; background-color: transparent; } .button-third { padding: 10px 20px; background-color: #33a2da; color: white; } .button-fourth { padding: 10px 20px; background-color: #33A2DA; color: white; } .button-five { padding: 10px 20px; background-color: #0384C7; color: white; } .button-card-feature { padding: 5px 25px; font-size: 12px; background-color: #434344; border-radius: 25px; color: white; } .button-primary:hover { background-color: #0056b3; color: white; } .button-primary:hover span { color: white; } .button-third:hover { background-color: lightgray; color: black; } .button-fourth:hover { background-color: lightgray; color: black; } .button-five:hover { background-color: lightgray; color: black; } .button-primary:focus { outline: 2px solid #0056b3; outline-offset: 2px; } .button-primary span, .button-secondary span { padding: 0px; text-align: center; white-space: nowrap; color: black; } .button-primary img, .button-secondary img { width: 20px; height: 20px; } .svg-button-hiring { width: 16px; height: 16px; } .button-primary:hover .svg-button-hiring { fill: white; } /* -------------------------------------------------- FOOTER SECTION -------------------------------------------------- */ .container-footer { background-color: #d4ecfe; background-image: url('../images/home/marca-agua.png'); background-repeat: no-repeat; background-position: right center; background-size: 20% auto; padding: 30px 20px; box-sizing: border-box; width: 100%; border-radius: 20px; height: 450px; } .option-footer { color: black; display: flex; justify-content: center; align-items: center; } @media (min-width: 1024px) { .footer-right-spacing { margin-right: 100px; } } @media (max-width: 768px) { .container-footer { background-image: none; padding: 20px 15px; height: auto; border-radius: 15px; text-align: center; } .container-footer .flex.w-full { flex-direction: column; } .container-footer img { width: 250px; margin-top: 60px; margin-bottom: 10px; } .container-footer > div > div { flex-direction: column; margin: 0; gap: 2rem; align-items: center; } .container-footer h5 { font-size: 1.2rem; } .container-footer h6 { font-size: 1rem; margin-bottom: 0.5rem; } .option-footer { justify-content: center; flex-direction: row; gap: 0.5rem; } .container-footer svg { width: 24px !important; height: 24px !important; } .container-footer > .flex.justify-around.w-full { flex-direction: column; align-items: center; gap: 0rem; padding-bottom: 0rem !important; } .footer-right-spacing > div { margin-right: 30px !important; } } /* -------------------------------------------------- FOOTER BANNER -------------------------------------------------- */ .footer-banner-container { display: flex; justify-content: center; width: 100%; margin-bottom: -75px; position: relative; z-index: 10; background-blend-mode: overlay; } .footer-banner-content { width: 90%; max-width: 900px; height: 300px; background-image: url('/Content/images/footer.svg'); background-size: cover; background-position: center; color: white; padding: 1rem 2.5rem; border-radius: 2rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; } .job-title { text-align: center; font-weight: 600; font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; } .job-title-2 { text-align: center; font-weight: 600; font-size: 3rem; line-height: 1; margin-top: -0.5rem; margin-bottom: 0.5rem; } .footer-subtitle { font-family: var(--font-family-subtitle); text-align: center; font-size: 3rem; font-weight: 600; margin-bottom: 3rem; } .footer-subtitle-2 { font-family: var(--font-family-body); text-align: center; font-size: 18px; margin-top: 1rem; margin-bottom: 1rem; white-space: normal; } .footer-button-group { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-btn-cta, .footer-btn-faq { display: flex; justify-content: center; align-items: center; padding: 10px 15px 10px 25px; font-family: var(--font-family-button); font-size: var(--font-size-button); font-weight: 800; border-radius: 7px; text-align: center; cursor: pointer; transition: background-color 0.3s ease; width: auto; text-decoration: none !important; } .footer-btn-call { display: flex; justify-content: center; align-items: center; padding: 10px 15px 10px 25px; font-family: var(--font-family-button); font-size: var(--font-size-button); font-weight: 500; border-radius: 7px; text-align: center; cursor: pointer; transition: background-color 0.3s ease; width: auto; text-decoration: none !important; } .footer-btn-cta { background-color: var(--secondary-color); color: black; } .footer-btn-cta:hover { background-color: #0056b3; color: white; text-decoration: none !important; } .footer-btn-faq { background-color: white; color: black; } .footer-btn-faq:hover { background-color: lightgray; color: black; text-decoration: none !important; } .footer-btn-call { background-color: white; color: black; } .footer-btn-call:hover { background-color: lightgray; color: black; text-decoration: none !important; } /* Ensure footer buttons never show underlines */ .footer-btn-cta:active, .footer-btn-faq:active, .footer-btn-call:active { text-decoration: none !important; } @media (max-width: 768px) { .footer-banner-content { height: auto; padding: 2rem 1.5rem; border-radius: 1.5rem; } .job-title, .footer-subtitle { font-size: 2rem; line-height: 1.2; } .footer-subtitle { margin-bottom: 2rem; } .footer-button-group { flex-direction: column; align-items: center; gap: 0.75rem; } .footer-btn-cta, .footer-btn-faq { width: 100%; max-width: 300px; padding: 0.75rem 1rem; font-size: 1rem; } } /* -------------------------------------------------- FLOATING RESET BUTTON -------------------------------------------------- */ .floating-reset-btn { opacity: 0; pointer-events: none; transition: all 0.3s ease; position: fixed !important; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, #162960, #1e3a72) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(22, 41, 96, 0.3); z-index: 1000 !important; color: white; } .floating-reset-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 25px rgba(22, 41, 96, 0.4); background: linear-gradient(135deg, #1e3a72, #162960); } .floating-reset-btn:active { transform: translateY(-1px) scale(1.05); } .floating-reset-btn svg { width: 24px; height: 24px; fill: currentColor; } .floating-reset-btn.show { opacity: 1; pointer-events: auto; animation: bounceIn 0.6s ease-out; } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3) translateY(100px); } 50% { opacity: 1; transform: scale(1.1) translateY(-10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* -------------------------------------------------- LOGO CONTAINER -------------------------------------------------- */ .logo-container { display: flex; justify-content: center; align-items: center; margin: 1.5rem 0; } .logo-container img { width: 200px; height: auto; transition: transform 0.3s ease; } .logo-container img:hover { transform: scale(1.05); } /* -------------------------------------------------- LOAD MORE BUTTON -------------------------------------------------- */ .load-more-container { justify-content: center; text-align: center; margin-top: 2rem; } .load-more-btn { background-color: #ffb400; color: black; border: none; padding: 0.75rem 1.5rem; border-radius: 2rem; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .load-more-btn:hover { background-color: #0056b3; color: white; } .load-more-arrow { width: 16px; height: 16px; fill: currentColor; transition: transform 0.3s ease; } .load-more-btn.loading { background-color: #E0EFF7; } .loading-text { font-family: var(--font-family-button); font-weight: 700; font-size: 18px; color: #162960; margin: 0; } .spinner-ring { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .spinner-circle { position: absolute; width: 100%; height: 100%; border: 3px solid #263e80; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .spinner-logo { width: 14px; height: 14px; z-index: 1; pointer-events: none; align-items: center; justify-content: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .load-more-jobs-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; } .spinner-ring-jobs { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .spinner-circle-jobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #263e80; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .spinner-logo-jobs { width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -40%); z-index: 2; pointer-events: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 480px) { .title-principal { font-size: 40px; } .container-title h5 { font-size: 20px; line-height: 1.1; } } /* -------------------------------------------------- BUTTONS FEATURES HEADER -------------------------------------------------- */ .section-buttons { margin-top: 5px; margin-bottom: -25px; gap: 10px; } .button-features { display: flex; justify-content: center; align-items: center; font-family: var(--font-family-button); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; width: auto; padding: 8px 16px; background: #f0f9ff; border: 1px solid #0384C7; border-radius: 15px; font-size: 14px; font-weight: 600; color: #0384C7; } .button-features.active { background-color: #0384C7 !important; color: white !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22, 41, 96, 0.3); } .button-features:hover:not(.active) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); background-color: rgba(22, 41, 96, 0.1); } @import url('variables.css'); @import url('flexbox.css'); @import url('styles.css'); /* ==================================== JOBS HEADER CONTENT CENTERING ====================================*/ .promo-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .container-title-main { width: 100%; display: flex; justify-content: center; align-items: center; } .container-title { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 8px 0 8px; } .title-principal { text-align: center; margin: 0; margin-bottom: 20px; } .button-gradient { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; text-decoration: none; padding: 14px 28px; border-radius: 30px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(25, 154, 218, 0.3); margin-top: 40px; font-family: var(--font-family-button); } .button-gradient:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(25, 154, 218, 0.4); } .button-gradient:active { transform: translateY(-1px); } .button-gradient-jobs { margin-top: 40px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--font-family-button); font-size: var(--font-size-button); font-weight: var(--font-weight-button); border: none; border-radius: 7px; text-align: center; text-decoration: none !important; cursor: pointer; transition: all 0.3s ease; width: auto; gap: 8px; padding: 10px 20px; background-color: var(--secondary-color); color: black; box-shadow: 0 2px 8px rgba(244, 180, 37, 0.2); } .button-gradient-jobs:hover { background-color: #199ada; color: white; text-decoration: none !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(25, 154, 218, 0.4); } .button-gradient-jobs:active { transform: translateY(-1px); text-decoration: none !important; } .button-gradient-jobs:focus, .button-gradient-jobs:visited { text-decoration: none !important; color: black; } .button-gradient-jobs:focus:hover, .button-gradient-jobs:visited:hover { color: white; } /* ==================================== JOBS SPECIFIC STYLES ====================================*/ /* Job Cards Section */ .jobs-section { padding: 40px 20px; max-width: 1400px; margin: 0 auto; width: 100%; } #jobsContainer { width: 100%; } .job-card { display: grid; grid-template-columns: 3fr 2.5fr 2.5fr 1.8fr; align-items: center; background-color: white; color: black; border-radius: 18px; padding: 24px; gap: 20px; width: 100%; max-width: 1400px; margin: 16px auto; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .job-card:hover { background-color: #199ada; box-shadow: 0 4px 20px rgba(25,154,218,0.3); color: white; transform: translateY(-2px); } .job-card:hover .title { color: #FEC851; } .job-card:hover > div { color: white; } .job-card:hover .icon { background-color: #FEC851; } .job-card:hover .icon img { filter: brightness(0) saturate(100%); } .job-card.selected { background-color: #199ada; box-shadow: 0 4px 20px rgba(25,154,218,0.3); color: white; } .job-card.selected .title { color: #FEC851; } .job-card.selected > div { color: white; } .job-card.selected .icon { background-color: #FEC851; } .job-card .title { font-weight: 700; color: black; white-space: normal; word-break: break-word; font-size: 20px; font-family: var(--font-family-body); line-height: 1.4; } .job-text { font-family: var(--font-family-body); white-space: normal; overflow-wrap: break-word; word-break: break-word; } .job-card.selected .title { color: #FEC851; } .job-card > div { display: flex; align-items: center; gap: 8px; min-width: 0; } .job-card > div:not(.title) { white-space: normal; word-break: break-word; font-size: 15px; font-weight: normal; } .job-card > div:last-child { font-size: 14px; } .job-card.selected > div { color: white; } .job-card .icon { background-color: #d9effa; padding: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; margin-right: 12px; } .job-card .icon img { width: 24px; height: 24px; object-fit: contain; } .job-card.selected .icon { background-color: #FEC851; } .job-card.selected .icon img { filter: brightness(0) saturate(100%); } .job-card.selected .icon svg { fill: none; stroke: #000000; stroke-width: 2; } /* ==================================== LOAD MORE JOBS BUTTON ====================================*/ .load-more-section { display: flex; justify-content: center; align-items: center; padding: 40px 20px; max-width: 1200px; margin: 0 auto; } .load-more-btn { background-color: #162960; color: white; border: none; border-radius: 12px; padding: 16px 32px; font-size: 16px; font-weight: 600; font-family: var(--font-family-button); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; text-align: center; box-shadow: 0 2px 8px rgba(22, 41, 96, 0.2); min-width: 180px; justify-content: center; } .load-more-btn:hover { background-color: #1a2f6b; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(22, 41, 96, 0.3); } .load-more-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(22, 41, 96, 0.2); } .load-more-btn:disabled { background-color: #6c757d; cursor: not-allowed; transform: none; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2); } .load-more-container { display: flex; justify-content: center; align-items: center; padding: 40px 20px; max-width: 1400px; margin: 0 auto; } .load-more-text { display: inline-block; } .load-more-spinner { display: none; width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 8px; } .load-more-arrow { width: 16px; height: 16px; fill: currentColor; transition: transform 0.3s ease; } .load-more-btn:hover .load-more-arrow { transform: translateX(2px); } .initial-loading { font-family: var(--font-family-button); text-align: center; padding: 60px 20px; max-width: 1400px; margin: 0 auto; } .initial-spinner-ring { position: relative; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; } .initial-spinner-circle { position: absolute; width: 100%; height: 100%; border: 3px solid #263e80; border-top-color: transparent; border-radius: 50%; animation: initial-spin 1s linear infinite; } .initial-spinner-logo { width: 18px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-60%, -60%); z-index: 1; pointer-events: none; } @keyframes initial-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { color: #666; font-size: 16px; font-family: var(--font-family-body); } /* Improved message for no jobs */ .no-jobs-jumbotron { background-color: white; border-radius: 18px; padding: 60px 40px; text-align: center; max-width: 800px; margin: 40px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .no-jobs-icon { width: 80px; height: 80px; margin: 0 auto 20px; background-color: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .no-jobs-icon svg { width: 40px; height: 40px; stroke: #6c757d; fill: none; stroke-width: 2; } .no-jobs-jumbotron h2 { font-size: 28px; color: #333; margin-bottom: 16px; font-family: var(--font-family-body); font-weight: 700; } .no-jobs-jumbotron p { font-size: 16px; color: #666; margin-bottom: 30px; line-height: 1.5; font-family: var(--font-family-body); } .reload-btn { background-color: #162960; color: white; border: none; border-radius: 12px; padding: 16px 32px; font-size: 16px; font-weight: 600; font-family: var(--font-family-button); cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; box-shadow: 0 2px 8px rgba(22, 41, 96, 0.2); } .reload-btn:hover { background-color: #1a2f6b; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(22, 41, 96, 0.3); } .reload-btn svg { width: 16px; height: 16px; fill: currentColor; } /* Responsive Design for Jobs */ @media (max-width: 768px) { .job-card { grid-template-columns: 1fr; gap: 12px; padding: 16px; text-align: left; } .job-card .title { font-size: 18px; margin-bottom: 8px; } .job-card > div { justify-content: flex-start; } .job-card > div:not(.title) { font-size: 14px; font-weight: normal; } .jobs-section { padding: 20px 10px; } .container-title { padding: 20px 10px 0 10px; } .title-principal { font-size: 28px; } .load-more-section { padding: 30px 10px; } .load-more-btn { width: 100%; max-width: 300px; padding: 14px 28px; font-size: 15px; } } @media (max-width: 480px) { .job-card { margin: 12px; padding: 25px; } .job-card .title { font-size: 16px; } .title-principal { font-size: 24px; } .load-more-btn { width: 100%; max-width: 250px; padding: 12px 24px; font-size: 14px; } .load-more-arrow { width: 14px; height: 14px; } } .filters-section { font-family: var(--font-family-body); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px; border-radius: 10px; margin-bottom: 30px; } .filter-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #f0f9ff; border: 1px solid #0384C7; border-radius: 20px; font-family: 'Satoshi', sans-serif; font-size: 14px; font-weight: 600; color: #0384C7; } .dropdown-toggle { all: unset; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Generic icon rule - moved to be more specific to avoid conflicts */ .dropdown-toggle .icon, .filter-section .icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dropdown-toggle .icon img, .filter-section .icon img { width: 17px; height: auto; display: block; } .label { font-family: var(--font-family-body); flex-grow: 1; text-align: left; } .arrow { font-size: 12px; color: #0384C7; } .dropdown-menu { display: none; position: absolute; top: 110%; left: 0; background: #4babde; color: #fff; padding: 6px 0; border-radius: 8px; min-width: 100%; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .dropdown-menu li { font-family: var(--font-family-body); padding: 8px 12px; cursor: pointer; } .dropdown-menu li:hover { background: #4094c2; } .dropdown.open .dropdown-menu { display: block; } /* Company Jobs Styles - Complementary to stylesJobs.css */ /* Company Header in HeaderContent */ .company-header-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .company-logo-small { flex-shrink: 0; } .company-logo-small img { max-width: 50px; max-height: 40px; object-fit: contain; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Company Info Banner */ .company-info-banner { max-width: 1200px; margin: 0 auto 30px auto; padding: 0 20px; } .company-description-content { background: white; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); line-height: 1.6; color: #444; font-size: 14px; } .company-description-content p { margin-bottom: 12px; } .company-description-content p:last-child { margin-bottom: 0; } .company-website-section { text-align: center; } .company-website-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; text-decoration: none; padding: 10px 20px; border-radius: 20px; font-weight: 500; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(25, 154, 218, 0.3); } .company-website-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(25, 154, 218, 0.4); text-decoration: none; color: white; } .company-website-btn svg { width: 14px; height: 14px; } /* No Jobs Message - Styled to match Jobs page */ .no-jobs-message { text-align: center; padding: 40px 20px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin: 20px auto; max-width: 500px; } .no-jobs-content { display: flex; flex-direction: column; align-items: center; } .no-jobs-icon { width: 60px; height: 60px; margin-bottom: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .no-jobs-icon svg { width: 30px; height: 30px; color: #6c757d; } .no-jobs-message h3 { font-size: 20px; font-weight: 600; color: #162960; margin-bottom: 8px; } .no-jobs-message p { color: #666; font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .browse-all-jobs-btn { background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; text-decoration: none; padding: 10px 20px; border-radius: 20px; font-weight: 500; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(25, 154, 218, 0.3); } .browse-all-jobs-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(25, 154, 218, 0.4); text-decoration: none; color: white; } /* Back Navigation */ .back-navigation { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .back-link { display: inline-flex; align-items: center; gap: 8px; color: #199ada; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.3s ease; } .back-link:hover { color: #162960; text-decoration: none; transform: translateX(-4px); } .back-link svg { width: 16px; height: 16px; } /* Responsive Design */ @media (max-width: 768px) { .company-header-info { flex-direction: column; text-align: center; gap: 12px; } .company-logo-small img { max-width: 40px; max-height: 32px; } .company-description-content { padding: 16px; font-size: 13px; } .no-jobs-message { padding: 30px 16px; margin: 16px; } .no-jobs-icon { width: 50px; height: 50px; } .no-jobs-icon svg { width: 24px; height: 24px; } .no-jobs-message h3 { font-size: 18px; } } @media (max-width: 480px) { .company-website-btn, .browse-all-jobs-btn { padding: 8px 16px; font-size: 13px; } .company-description-content { padding: 14px; font-size: 12px; } } /* Company Jobs - Minimal styles to complement stylesJobs.css */ /* Simple no jobs message - matches Jobs page styling */ .no-jobs-simple { text-align: center; padding: 40px 20px; color: #666; } .no-jobs-simple p { margin-bottom: 16px; font-size: 16px; line-height: 1.5; } .no-jobs-simple a { color: #199ada; text-decoration: none; font-weight: 500; } .no-jobs-simple a:hover { color: #162960; text-decoration: underline; } /* Company Info Styles - Styled like JobDetails sidebar */ .company-info-wrapper { max-width: 1200px; margin: 30px auto 10px auto; padding: 0 20px; } .company-info-card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; } .company-header-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #199ada; } .company-logo-display { flex-shrink: 0; } .company-logo-display img { max-width: 80px; max-height: 60px; object-fit: contain; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .company-title-section h2 { font-size: 20px; font-weight: 700; color: #162960; margin: 0; } .company-description-section { font-family: var(--font-family-body); font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 20px; } .company-description-section p { margin-bottom: 12px; } .company-description-section p:last-child { margin-bottom: 0; } .company-actions-section { text-align: center; padding-top: 16px; border-top: 1px solid #f0f0f0; } .company-website-button { font-family: var(--font-family-body); display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; text-decoration: none; padding: 12px 24px; border-radius: 25px; font-weight: 500; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(25, 154, 218, 0.3); } .company-website-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(25, 154, 218, 0.4); text-decoration: none; color: white; } .company-website-button svg { width: 16px; height: 16px; } /* Alert for no description */ .company-no-description-alert { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; } .company-no-description-alert svg { width: 18px; height: 18px; flex-shrink: 0; color: #0c5460; } /* Responsive Design */ @media (max-width: 768px) { .company-header-section { flex-direction: column; text-align: center; gap: 16px; } .company-logo-display img { max-width: 60px; max-height: 45px; } .company-title-section h2 { font-size: 18px; } .company-info-card { padding: 20px; } .company-description-section { font-size: 13px; } } @media (max-width: 480px) { .company-info-wrapper { padding: 0 16px; } .company-info-card { padding: 16px; } .company-title-section h2 { font-size: 16px; } .company-website-button { padding: 10px 20px; font-size: 13px; } } @import url('variables.css'); @import url('flexbox.css'); @import url('styles.css'); /* ==================================== JOBS LOCALE - MAPA INTERACTIVO ====================================*/ /* Main Container */ .jobs-locale-container { width: calc(100% - 20px); margin: 0 5px 0 5px; /* Same margin as header */ padding: 30px 0 30px 0; } .jobs-locale-container-two { margin: 30px 55px 0 55px; } /* Header Stats Grid - Bootstrap-like System */ .header-stats-grid { display: flex; justify-content: center; align-items: center; margin: 25px auto 5px auto; padding: 20px 0 5px 0; max-width: 900px; gap: 0; } .header-stat-item { text-align: center; flex: 0 0 25%; max-width: 25%; padding: 0 15px; font-family: var(--font-family-body); } .header-stat-number { font-size: 54px; font-weight: 800; margin-bottom: 10px; color: #199ada; line-height: 1; transition: transform 0.3s ease; } .header-stat-label { font-size: 17px; font-weight: 700; color: #199ada; line-height: 1.3; opacity: 1; letter-spacing: 0.3px; } .split-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; width: 100%; padding: 0 32px; box-sizing: border-box; } .map-section { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); height: auto; } .states-section { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); height: auto; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } .states-grid { overflow-y: auto; overflow-x: hidden; /* flex-grow: 1; */ min-height: 0; } /* Custom Scrollbar for States Section */ .states-section::-webkit-scrollbar { width: 8px; } .states-section::-webkit-scrollbar-track { background: #f8fdff; border-radius: 10px; } .states-section::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #199ada 0%, #162960 100%); border-radius: 10px; transition: background 0.3s ease; } .states-section::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #162960 0%, #0d47a1 100%); } .map-header { text-align: center; margin-bottom: 15px; } .map-title { font-family: var(--font-family-body); font-size: 28px; font-weight: 700; color: #162960; margin-bottom: 8px; } .map-subtitle { font-family: var(--font-family-body); font-size: 16px; color: #666; margin: 0; } /* USA Map Container */ .usa-map-container { position: relative; background: linear-gradient(135deg, #f8fdff 0%, #e3f2fd 100%); border-radius: 10px; padding: 5px; margin-bottom: 15px; min-height: 580px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(25, 154, 218, 0.1); } /* D3.js Map Container */ .d3-map-container { width: 100%; height: 580px; display: block; } .d3-map-container svg { font-family: var(--font-family-body); width: 100% !important; height: 100% !important; border-radius: 8px; display: block; } /* State Paths */ .state-path { fill: #e3f2fd; stroke: #199ada; stroke-width: 1; cursor: pointer; transition: all 0.3s ease; } .state-path:hover { fill: #199ada; stroke: #162960; stroke-width: 2; filter: drop-shadow(0 4px 12px rgba(25, 154, 218, 0.4)); } .state-path:active { transform: scale(0.98); transition: transform 0.1s ease; } /* SVG MAP DYNAMIC STYLES DISABLED - Numbers only, no colors */ /* .state-path.jobs-high { fill: #4caf50; } .state-path.jobs-high:hover { fill: #388e3c; } .state-path.jobs-medium { fill: #ff9800; } .state-path.jobs-medium:hover { fill: #f57c00; } .state-path.jobs-low { fill: #81c784; } .state-path.jobs-low:hover { fill: #66bb6a; } .state-path.jobs-none { fill: #f5f5f5; opacity: 0.7; cursor: not-allowed; } .state-path.jobs-none:hover { fill: #f5f5f5; transform: none; filter: none; } */ /* State Labels */ .state-label { font-family: var(--font-family-body); font-size: 12px; font-weight: 700; fill: #162960; text-anchor: middle; pointer-events: none; -webkit-user-select: none; user-select: none; text-shadow: 1px 1px 2px rgba(255,255,255,0.8); } .state-counter { font-family: var(--font-family-body); font-size: 10px; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; -webkit-user-select: none; user-select: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* Tooltip */ .map-tooltip { position: absolute; background: rgba(22, 41, 96, 0.95); color: white; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(-5px); white-space: nowrap; max-width: 250px; } .map-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(22, 41, 96, 0.95) transparent transparent transparent; } .tooltip-state-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .tooltip-job-count { font-size: 14px; opacity: 0.9; } .tooltip-click-hint { font-size: 12px; opacity: 0.8; margin-top: 4px; font-style: italic; } .map-tooltip span, small, strong { font-family: var(--font-family-body); } /* States Grid Section */ .states-grid-section { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .states-grid-header { text-align: center; margin-bottom: 30px; } .states-grid-title { font-family: var(--font-family-body); font-size: 28px; font-weight: 700; color: #162960; margin-bottom: 8px; } .states-grid-subtitle { font-family: var(--font-family-body); font-size: 16px; color: #666; margin: 0; } /* Search Box */ .state-search-container { position: relative; width: 100%; max-width: 100%; margin: 0 0 30px 0; box-sizing: border-box; } .state-search-input { font-family: var(--font-family-body); width: 100%; padding: 12px 45px 12px 20px; border: 2px solid #e3f2fd; border-radius: 25px; font-size: 16px; outline: none; transition: all 0.3s ease; background: #f8f9fa; box-sizing: border-box; } .state-search-input:focus { border-color: #199ada; background: white; box-shadow: 0 0 0 3px rgba(25, 154, 218, 0.1); } .state-search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #666; pointer-events: none; } /* States Grid */ .states-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-top: 20px; padding: 10px 12px 10px 5px; list-style: none; width: 100%; box-sizing: border-box; } /* State Card */ .state-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; position: relative; border: 2px solid transparent; } /* Effect Hover - State Card */ .state-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(25, 154, 218, 0.15); border-color: rgba(25, 154, 218, 0.3); background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); } .state-card:hover .state-name { color: #199ada; } .state-card:hover .state-job-count { transform: scale(1.05); box-shadow: 0 4px 12px rgba(25, 154, 218, 0.3); } .state-card:hover .state-description { color: #555; } .state-card:active { transform: translateY(-2px); transition: all 0.1s ease; } /* Additional improvement for accessibility */ .state-card:focus { outline: 2px solid #199ada; outline-offset: 2px; } .state-card:focus-visible { outline: 2px solid #199ada; outline-offset: 2px; } /* DYNAMIC STYLES DISABLED - Only the number is updated, not the colors */ /* .state-card.jobs-high { border-color: #4caf50; background: linear-gradient(135deg, #ffffff 0%, #f1f8e9 100%); } .state-card.jobs-high:hover { box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2); transform: translateY(-3px); } .state-card.jobs-high .state-job-count { background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%); color: white; font-weight: 700; } .state-card.jobs-medium { border-color: #ff9800; background: linear-gradient(135deg, #ffffff 0%, #fff8e1 100%); } .state-card.jobs-medium:hover { box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2); transform: translateY(-3px); } .state-card.jobs-medium .state-job-count { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); color: white; font-weight: 700; } .state-card.jobs-low { border-color: #2196f3; background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%); } .state-card.jobs-low:hover { box-shadow: 0 8px 25px rgba(33, 150, 243, 0.2); transform: translateY(-3px); } .state-card.jobs-low .state-job-count { background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%); color: white; font-weight: 700; } .state-card.jobs-none { border-color: #e0e0e0; background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); opacity: 0.7; } .state-card.jobs-none:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-1px); opacity: 0.9; } .state-card.jobs-none .state-job-count { background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%); color: white; font-weight: 500; } */ .state-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #199ada 0%, #162960 100%); border-radius: 12px; opacity: 0; transition: all 0.3s ease; z-index: -1; } .state-card:hover::before { opacity: 0.08; transform: scale(1.02); } .state-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .state-name { font-family: var(--font-family-body); font-size: 18px; font-weight: 700; color: #162960; margin: 0; transition: color 0.3s ease; will-change: color; } .state-job-count { font-family: var(--font-family-body); background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; text-align: center; min-width: 60px; transition: all 0.3s ease; will-change: transform; } /* Loading states */ .state-job-count.loading, .state-cities-count.loading { opacity: 0.6; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Smooth transitions for updates */ .state-cities-count { font-family: var(--font-family-body); transition: all 0.3s ease; } .state-cities-count:hover { color: #199ada; } .state-description { font-family: var(--font-family-body); color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 15px; transition: color 0.3s ease; } .state-stats { display: flex; justify-content: space-between; align-items: center; } .state-cities-count { color: #999; font-size: 13px; } .state-arrow { width: 16px; height: 16px; color: #199ada; transition: transform 0.3s ease; } .state-card:hover .state-arrow { transform: translateX(3px); } /* Map Legend */ .map-legend { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; padding: 15px 20px; background: linear-gradient(135deg, #f8fdff 0%, #e3f2fd 100%); border-radius: 10px; border: 1px solid rgba(25, 154, 218, 0.1); font-family: var(--font-family-body); } .legend-item { font-family: var(--font-family-body); display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; font-weight: 500; transition: transform 0.2s ease; } .legend-item:hover { transform: translateY(-1px); } .legend-color { width: 22px; height: 16px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.8); transition: transform 0.2s ease; } .legend-item:hover .legend-color { transform: scale(1.1); } .legend-color.highest { background-color: #0d47a1; box-shadow: 0 2px 4px rgba(13, 71, 161, 0.3); } .legend-color.high { background-color: #1976d2; box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3); } .legend-color.medium { background-color: #42a5f5; box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3); } .legend-color.low { background-color: #90caf9; box-shadow: 0 2px 4px rgba(144, 202, 249, 0.3); } .legend-color.none { background-color: #cfd8df; box-shadow: 0 1px 2px rgba(227, 242, 253, 0.5); } /* Loading State */ .map-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; color: #666; } .map-loading-spinner { width: 40px; height: 40px; border: 3px solid #e3f2fd; border-top: 3px solid #199ada; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; } /* Map Instructions */ .map-instructions { text-align: center; margin-bottom: 20px; } .map-instructions p { font-family: var(--font-family-body); color: #666; font-size: 14px; margin: 0; } /* Statistics Section */ .stats-section { background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; padding: 40px 30px; border-radius: 15px; margin-bottom: 40px; text-align: center; box-shadow: 0 8px 25px rgba(25, 154, 218, 0.3); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 30px; } .stat-item { text-align: center; } .stat-number { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #ffffff; } .stat-label { font-size: 14px; opacity: 0.9; font-weight: 500; } /* Floating Reset Button */ .floating-reset-btn { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, #199ada 0%, #162960 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; opacity: 0; pointer-events: none; z-index: 1000; box-shadow: 0 4px 15px rgba(25, 154, 218, 0.3); } .floating-reset-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(25, 154, 218, 0.4); } .floating-reset-btn svg { width: 24px; height: 24px; color: white; } /* Animations */ .fade-in-up { animation: fadeInUp 0.6s ease forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Large screens - optimize for wide displays */ @media (min-width: 1400px) { .split-layout { gap: 40px; padding: 0 50px; } .map-section, .states-section { padding: 25px; } .d3-map-container { height: 700px; } .d3-map-container svg { width: 100% !important; height: 100% !important; } .usa-map-container { min-height: 700px; padding: 8px; } .states-grid { max-height: 700px; } .states-section { max-height: 750px; } .state-search-container { margin: 0 0 25px 0; } } /* Responsive Design */ @media (max-width: 1024px) { .split-layout { gap: 20px; padding: 0 20px; } .map-section, .states-section { padding: 15px; } .jobs-locale-container { width: calc(100% - 30px); margin: 0 15px; } .state-search-container { margin: 0 0 25px 0; } .state-search-input { padding: 11px 42px 11px 18px; font-size: 15px; } } @media (min-width: 1440px) { .states-section { max-height: none; } } @media (max-width: 768px) { .split-layout { grid-template-columns: 1fr; gap: 20px; } .states-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; max-height: none; overflow-y: visible; padding-right: 0; } } @media (max-width: 768px) { .jobs-locale-container { width: calc(100% - 14px); margin: 0 7px; padding: 5px 0 15px 0; } .split-layout { padding: 0 15px; } .header-stats-grid { margin: 20px auto 3px auto; padding: 15px 0 3px 0; max-width: 100%; gap: 0; } .header-stat-item { flex: 0 0 25%; max-width: 25%; padding: 0 8px; } .header-stat-number { font-size: 42px; font-weight: 800; margin-bottom: 8px; color: #199ada; } .header-stat-label { font-size: 15px; font-weight: 700; color: #199ada; letter-spacing: 0.2px; } .map-section, .states-section { padding: 15px; } .states-section { max-height: 560px; } .map-title, .states-grid-title { font-size: 24px; } .usa-map-container { padding: 5px; min-height: 420px; } .d3-map-container { height: 420px; } .d3-map-container svg { width: 100% !important; height: 100% !important; } .states-grid { grid-template-columns: 1fr; gap: 15px; } .state-card { padding: 15px; } .map-legend { gap: 15px; } .legend-item { font-size: 12px; } .floating-reset-btn { bottom: 20px; right: 20px; width: 45px; height: 45px; } .floating-reset-btn svg { width: 20px; height: 20px; } .state-search-container { margin: 0 0 20px 0; } .state-search-input { padding: 10px 40px 10px 16px; font-size: 15px; border-radius: 22px; } .state-search-icon { right: 13px; width: 19px; height: 19px; } } @media (max-width: 600px) { .header-stats-grid { margin: 15px auto 2px auto; padding: 12px 0 2px 0; flex-wrap: wrap; } .header-stat-item { flex: 0 0 50%; max-width: 50%; padding: 0 5px; margin-bottom: 10px; } .header-stat-number { font-size: 36px; font-weight: 800; margin-bottom: 6px; color: #199ada; } .header-stat-label { font-size: 14px; font-weight: 700; color: #199ada; letter-spacing: 0.2px; } .state-search-container { margin: 0 0 18px 0; } .state-search-input { padding: 9px 38px 9px 14px; font-size: 14px; border-radius: 20px; } .state-search-icon { right: 11px; width: 17px; height: 17px; } } @media (max-width: 480px) { .header-stats-grid { margin: 15px auto 2px auto; padding: 12px 0 2px 0; flex-direction: column; gap: 20px; } .header-stat-item { flex: 1; max-width: 100%; padding: 0; margin-bottom: 0; } .header-stat-number { font-size: 44px; font-weight: 800; margin-bottom: 8px; color: #199ada; } .header-stat-label { font-size: 16px; font-weight: 700; color: #199ada; letter-spacing: 0.3px; } .map-legend { flex-direction: column; align-items: center; gap: 10px; } .state-search-container { margin: 0 0 20px 0; } .state-search-input { padding: 10px 40px 10px 15px; font-size: 14px; border-radius: 20px; } .state-search-icon { right: 12px; width: 18px; height: 18px; } } /* Animation keyframes */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; height: fit-content; } /* -------------------------------------------------- MAP LOADING SPINNER -------------------------------------------------- */ .map-loading-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: var(--font-family-button); background-color: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; } .map-spinner-ring { position: relative; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin: 0 0 5px 0; } .map-spinner-circle { position: absolute; width: 100%; height: 100%; border: 3px solid #263e80; border-top-color: transparent; border-radius: 50%; animation: map-spin 1s linear infinite; } .map-spinner-logo { width: 18px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-60%, -60%); z-index: 1; pointer-events: none; } @keyframes map-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .map-loading-text { color: #666; font-size: 16px; font-family: var(--font-family-body); } @media (max-width: 768px) { /* Breadcrumb */ .jobs-locale-container-two nav { padding: 12px 16px !important; } .breadcrumb-section div { flex-wrap: wrap; gap: 4px; font-size: 13px; line-height: 1.4; } .breadcrumb-section svg { width: 14px; height: 14px; } /* Banner */ .location-info-banner { padding: 20px 15px !important; border-radius: 12px; } .location-info-banner h2 { font-size: 20px !important; line-height: 1.3; } .location-info-banner p { font-size: 14px !important; line-height: 1.4; } /* Citys */ .location-info-banner h3 { font-size: 16px !important; text-align: center; } } @media (max-width: 768px) { /* Buttons container */ .location-info-banner div[style*="flex-wrap"] { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: center; width: 100%; } /* Buttons */ .location-info-banner a { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 44px; text-align: center; font-size: 14px !important; padding: 8px 12px !important; box-sizing: border-box; } /* Icon Button */ .location-info-banner a svg { margin-left: 6px; flex-shrink: 0; } } @import url('variables.css'); @import url('flexbox.css'); @import url('styles.css'); /* ==================================== JOB DETAILS MODERN STYLES ====================================*/ /* Main container */ .job-details-container { max-width: 1400px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 1fr 350px; gap: 40px; align-items: start; font-family: var(--font-family-body); } /* Job content area */ .job-content { background: white; border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); overflow: hidden; } .job-main-section { padding: 40px; } /* Section styles */ .job-section { margin-bottom: 40px; } .job-section:last-child { margin-bottom: 0; } .section-title { font-size: 24px; font-weight: bold; color: #162960; margin-bottom: 20px; font-family: var(--font-family-body); border-bottom: 2px solid #199ada; padding-bottom: 10px; } /* Job description */ .job-description { font-size: 16px !important; line-height: 1.6 !important; color: #333 !important; } .job-description p { margin-bottom: 16px; font-family: var(--font-family-body) !important; font-size: 16px !important; line-height: 1.6 !important; color: #333 !important; } .job-description b { margin-bottom: 16px; font-family: var(--font-family-body) !important; font-size: 16px !important; line-height: 1.6 !important; color: #333 !important; } .job-description span { font-family: var(--font-family-body) !important; font-size: 16px !important; color: #333 !important; } .job-description ul, .job-description ol { margin: 16px 0; padding-left: 24px; font-family: var(--font-family-body) !important; font-size: 16px !important; color: #333 !important; } .job-description li { margin-bottom: 8px; font-family: var(--font-family-body) !important; font-size: 16px !important; color: #333 !important; } /* Job information grid */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .info-item { font-family: var(--font-family-body); background: #f8f9fa; border-radius: 12px; padding: 20px; border-left: 4px solid #199ada; } .info-label { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #162960; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .info-label svg { width: 18px; height: 18px; stroke: #199ada; } .info-value { font-family: var(--font-family-body) !important; font-size: 16px; font-weight: 400; color: #333; } .info-value.salary { font-size: 18px; font-weight: 700; color: #27ae60; } .salary-period { font-size: 14px; font-weight: 400; color: #666; } /* Apply section */ .apply-section { background: linear-gradient(135deg, #199ada 0%, #162960 100%); color: white; border-radius: 16px; padding: 32px; text-align: center; } .apply-section .section-title { color: white; border-bottom: 2px solid rgba(255, 255, 255, 0.3); } .apply-description { font-size: 16px; margin-bottom: 24px; opacity: 0.9; } .apply-btn { display: inline-flex; align-items: center; gap: 12px; background: #ffb400; color: #162960; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(255, 180, 0, 0.3); } .apply-btn:hover { background: #ffa000; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 180, 0, 0.4); color: #162960; text-decoration: none; } .apply-btn svg { width: 20px; height: 20px; } /* Job expired section */ .job-expired { text-align: center; padding: 60px 40px; background: #f8f9fa; border-radius: 16px; border: 2px dashed #ddd; } .expired-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: #ff6b6b; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .expired-icon svg { width: 40px; height: 40px; stroke: white; } .job-expired h2 { color: #ff6b6b; margin-bottom: 16px; } .back-to-jobs-btn { display: inline-flex; align-items: center; gap: 8px; background: #162960; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; margin-top: 20px; transition: all 0.3s ease; } .back-to-jobs-btn:hover { background: #1a2f6b; transform: translateY(-2px); text-decoration: none; color: white; } /* Sidebar */ .job-sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar-section { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .sidebar-section h3 { font-size: 18px; font-weight: 700; color: #162960; margin-bottom: 16px; border-bottom: 2px solid #199ada; padding-bottom: 8px; } /* Company info */ .company-logo { text-align: center; margin-bottom: 20px; padding: 16px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .company-logo img { max-width: 140px; max-height: 80px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: all 0.3s ease; } .company-logo img:hover { transform: scale(1.05); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); } .company-description { font-size: 16px; font-family: var(--font-family-body); font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 16px; text-align: justify; text-justify: inter-word; } .company-description p { margin-bottom: 12px; text-align: justify; text-justify: inter-word; } .company-description p:last-child { margin-bottom: 0; } .company-description ul, .company-description ol { margin: 12px 0; padding-left: 20px; } .company-description li { margin-bottom: 6px; text-align: justify; text-justify: inter-word; } .company-website, .view-all-jobs { font-family: var(--font-family-body); display: flex; align-items: center; gap: 8px; color: #199ada; text-decoration: none; font-weight: 800; margin-bottom: 12px; transition: all 0.3s ease; } .company-website:hover, .view-all-jobs:hover { color: #162960; text-decoration: none; transform: translateX(4px); } .company-website svg, .view-all-jobs svg { width: 16px; height: 16px; } /* Action buttons */ .action-btn { font-family: var(--font-family-body); display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 8px; text-decoration: none; font-weight: 500; margin-bottom: 12px; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 14px; box-sizing: border-box; min-height: 44px; } .action-btn.secondary { background: #f8f9fa; color: #162960; border: 1px solid #ddd; } .action-btn.secondary:hover { background: #162960; color: white; text-decoration: none; } .action-btn.share-btn { background: #199ada; color: white; } .action-btn.share-btn:hover { background: #162960; transform: translateY(-2px); } .action-btn svg { width: 16px; height: 16px; } /* Header metadata */ .job-meta-header { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; font-size: 16px; } .job-meta-header span { font-family: var(--font-family-body); display: flex; align-items: center; color: black; font-weight: 500; gap: 6px; } .job-meta-header i { color: black; } .company-name { color: #199ada !important; font-weight: 700 !important; } /* Responsive design */ @media (max-width: 1024px) { .job-details-container { grid-template-columns: 1fr; gap: 24px; padding: 20px 10px; } .job-main-section { padding: 24px; } .info-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .p-4 { padding: 0px !important; } .job-details-container { padding: 20px 25px; } .job-main-section { padding: 20px; } .section-title { font-size: 20px; } .apply-section { padding: 24px; } .job-meta-header { flex-direction: column; gap: 12px; justify-content: center; align-items: center; } .apply-btn { padding: 14px 28px; font-size: 15px; } .company-logo { padding: 12px; margin-bottom: 16px; } .company-logo img { max-width: 120px; max-height: 70px; } .company-description { font-size: 13px; line-height: 1.5; } } @media (max-width: 480px) { .job-main-section { padding: 16px; } .sidebar-section { padding: 16px; } .section-title { font-size: 18px; } .info-item { padding: 16px; } .company-logo { padding: 10px; margin-bottom: 14px; } .company-logo img { max-width: 100px; max-height: 60px; } .company-description { font-size: 12px; line-height: 1.4; } } /* ADA/WCAG Accessibility Styles */ /* Focus Visible Styles for Keyboard Navigation */ .job-card:focus, .job-card:focus-visible, .state-card:focus, .state-card:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #199ada; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(25, 154, 218, 0.3); } /* Remove default outline for mouse users */ .job-card:focus:not(:focus-visible), .state-card:focus:not(:focus-visible), button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Job Card Focus Styles */ .job-card { cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .job-card:focus-visible { background-color: #199ada !important; color: white !important; border-color: #199ada; box-shadow: 0 4px 20px rgba(25, 154, 218, 0.3); transform: none; outline: none; } .job-card:focus-visible .title { color: #FEC851 !important; } .job-card:focus-visible > div { color: white !important; } .job-card:focus-visible .icon { background-color: #FEC851 !important; } .job-card:focus-visible .icon img { filter: brightness(0) saturate(100%); } /* State Card Focus Styles */ .state-card { cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; text-decoration: none; color: inherit; display: block; } .state-card:hover, .state-card:focus { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); text-decoration: none; } .state-card:focus-visible { border-color: #199ada; } /* Button Focus Styles */ .floating-reset-btn:focus-visible, .load-more-btn:focus-visible, .button-gradient-jobs:focus-visible, .action-btn:focus-visible { outline: 3px solid #199ada; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(25, 154, 218, 0.3); } /* Navbar Toggle Focus */ .navbar-toggle:focus-visible { outline: 3px solid #199ada; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(25, 154, 218, 0.3); } /* Form Input Focus */ input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: #199ada; box-shadow: 0 0 0 3px rgba(25, 154, 218, 0.2); } /* Skip Link Styles */ .skip-link { position: absolute; top: -40px; left: 0; background: #199ada; color: white; padding: 8px 16px; text-decoration: none; z-index: 100; border-radius: 0 0 4px 0; } .skip-link:focus { top: 0; } /* Screen Reader Only Text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .job-card:focus-visible, .state-card:focus-visible, button:focus-visible, a:focus-visible { outline: 4px solid currentColor; outline-offset: 2px; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }