@charset "utf-8";
/* Custom Styles for Just Worldwide website created by Monsters Edge */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

a { transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; outline: none; color: #112c5f; text-decoration: none;}
a:hover { text-decoration: none; color: #5b9ed6;}
a:focus { outline: none;}

h1,h2,h3,h4,h5,h6 { font-weight: 100; margin: 0 0 1rem 0;}
p { font-size: 1.1rem; margin: 0 0 1rem 0; font-weight: 400;}
p.introP { font-size: 1.4rem; font-weight: 300;}
.cut-corners { position: relative;}
.cut-corners::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;}
.cut-corners::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}
.cut-corners.blue-bg::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid #eff4ff; border-top:15px solid #eff4ff; border-bottom:15px solid transparent; border-right:15px solid transparent;}
.cut-corners.blue-bg::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid #eff4ff; border-right:15px solid #eff4ff;}

.g-recaptcha { margin: 0 auto; width: 304px;}
.error { color: red;}

/* GENERAL */
body { font-family: 'Roboto', sans-serif; font-weight: 300; color: #112c5f; overflow-x: hidden;}

header a#email { display: inline-block; margin-right: 15px;}
header a#email span { font-size: .9rem;}
header ul.social { list-style: none; padding: 0; margin: 0; display: inline-block;}
header ul.social li { display: inline-block; margin-left: 5px;}
header ul.social li a { font-size: 1.4rem; margin: 0;}
header ul.social li.link img { position: relative; top: -2px;}
header ul.social li #search-link-m img { width: 22px; border-radius: 2px;}
#search-bar { padding: 15px 0; background-color: #eff4ff; display: none;}
#search-bar .btn { width: 100%;}

#hero-panel { position: relative;}
#hero-panel #down { position: absolute; bottom: 8%; left: 50%; margin-left: -35px;}
#text-box { position: absolute; bottom: 20%; left: 18%; background-color: #112c5f; opacity: 0.8; border-radius: 10px; color: #fff; padding: 30px 75px 30px 30px; max-width: 50%; min-width: 40%;}
#text-box h1 { font-size: 3.5rem;}
#text-box p { font-size: 1.5rem; margin: 0;}
#text-box .link { position: absolute; bottom: 50px; right: 30px;}

.content { padding: 100px 0;}
.content.grey-bg { background-color: #f2f2f2;}
.content ul { padding: 0; margin: 0 0 1rem 0; font-size: 1.1rem;}
.content ul.two-col { width: 100%;}
.content ul.two-col li { width: 48%; display: inline-block;}
.content ul.two-col li:before { content: "• ";}
.content ul.social { list-style: none; padding: 0; margin: 0; display: inline-block;}
.content ul.social li { display: inline-block; margin-left: 5px;}
.content ul.social li a { font-size: 1.4rem; margin: 0;}
.accordion-body ul { margin: 0 0 1rem 1rem;}

#intro { padding: 100px 0; background: #eff4ff url("../images/logo-bg-large.png") bottom right no-repeat;}
#intro #comment-box { background: #fff; position: relative; padding: 75px 60px;}
#intro #comment-box p { font-size: 1.3rem; font-weight: 300;}
#intro #comment-box .divider-line { height: 1px; background-color: #112c5f;}
#intro #comment-box .name { font-size: 1.4rem; font-weight: 300;}
#intro #comment-box .position { font-weight: 400;}
#intro #comment-box::before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#eff4ff transparent transparent #eff4ff;}
#intro #comment-box::after { content:""; position:absolute; bottom:0; right:0; border-width:0px 0px 30px 30px; border-style:solid; border-color:transparent #eff4ff #eff4ff transparent;}
#intro.bg-white #comment-box { background: #eff4ff;}
#intro.bg-white #comment-box::before { border-style:solid; border-color:#fff transparent transparent #fff;}
#intro.bg-white #comment-box::after { border-style:solid; border-color:transparent #fff #fff transparent;}
ul#coverage { list-style: none; padding: 0; margin: 0 0 30px 0; width: 100%; display: flex;}
ul#coverage li { display: inline-block; width: 19%; font-size: .9rem; position: relative; padding: 30px 25px; margin-right: 1%; line-height: 1.1rem;}
ul#coverage li strong { font-size: 1.1rem; line-height: 1.2rem;}
ul#coverage li::before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#fff transparent transparent #fff;}
ul#coverage li::after { content:""; position:absolute; bottom:0; right:0; border-width:0px 0px 30px 30px; border-style:solid; border-color:transparent #fff #fff transparent;}
ul#coverage li:nth-child(1) { background-color: #a9c3e6;}
ul#coverage li:nth-child(2) { background-color: #dfe4ee;}
ul#coverage li:nth-child(3) { background-color: #dddfd4;}
ul#coverage li:nth-child(4) { background-color: #f3f4b9;}
ul#coverage li:nth-child(5) { background-color: #ffca92;}

.cta-panel { padding: 130px 0; background-position: top left; background-size: cover; background-repeat: none;}
.cta-panel h2 { font-size: 3.8rem;}

#latest-news { padding: 100px 0;}
#latest-news .art-img { position:relative; overflow:hidden; display: block;}
#latest-news .art-img::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;}
#latest-news .article-image { position: relative; display: block;}
#latest-news .article-image .arrow { position: absolute; bottom: 30px; right: 30px;}
#latest-news .article-info { padding: 40px 30px; position: relative; min-height: 280px;}
#latest-news .article-info.grey-bg { background-color: #e5e5e5;}
#latest-news .article-info.blue-bg { background-color: #bfd4ed;}
#latest-news .article-info.peach-bg { background-color: #ffdbae;}
#latest-news .article-info::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}
#latest-news .article-info p { margin: 0 0 .5rem 0;}
#latest-news .article-info a { font-size: 2rem; line-height: 2.4rem; display: block; padding: 0; font-weight: 300;}
#latest-news .article-info a.author-link { font-size: 0.9rem; line-height: inherit; display: inline-block; padding: 0; font-weight: 300;}
ul.tags { list-style: none; margin: 10px 0 0 0; padding: 0;}
#latest-news .cs-img { position:relative; overflow:hidden; display: block; overflow: hidden; max-height: 240px;}
#latest-news .cs-img::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;}
#latest-news .cs-image::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}
#latest-news .cs-image { position: relative; display: block;}
#latest-news .cs-image .arrow { position: absolute; bottom: 30px; right: 30px;}
#related-articles .article-info { min-height: inherit;}
#related-articles .article-info.grey-bg { background-color: #fff; border-bottom: 30px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
#related-articles .article-info.blue-bg { background-color: #fff; border-bottom: 30px solid #bfd4ed; border-left: 1px solid #bfd4ed; border-right: 1px solid #bfd4ed;}
#related-articles .article-info.peach-bg { background-color: #fff; border-bottom: 30px solid #ffdbae; border-left: 1px solid #ffdbae; border-right: 1px solid #ffdbae;}
#related-articles .article-info a { font-size: 1.8rem; line-height: 2rem; display: block; padding: 0 0px 0 0; font-weight: 100;}
#related-articles .article-info::after { content: ''; position:absolute; bottom:-30px; right:-1px; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}
.article-summary { margin-bottom: 30px;}
.article-summary h5 { margin: 0 0 .25rem 0;}
.article-summary h5 a { font-weight: 400;}
.article-summary p { font-size: .9rem; font-weight: 300;}
.article-summary .info { font-size: .8rem; font-weight: 400; margin-bottom: 5px;}
.article-full h1 { text-transform: uppercase; font-size: 3rem;}
.article-full .links { text-transform: uppercase; font-size: 1.1rem; margin-bottom: 1rem;}
.article-full .quick-info { text-transform: uppercase; color: #00afb7; margin-bottom: 1rem; font-size: 1.1rem;}
.article-full .quick-info a { color: #00afb7;}
.article-full .quick-info a:hover { color: #112c5f;}
.article-full .quick-info .fas, .article-full .quick-info .far { font-size: 1.5rem;}
.article-full .quick-info .fa-clock, .article-full .quick-info .fa-tags { margin-left: 1rem;}
ul.categories { list-style: none; padding: 0; margin: 0 0 1rem 0;}
ul.categories li { margin-bottom: .5rem;}
ul.categories li a { font-weight: 400; font-size: 1.1rem;}
ul.categories li a span { font-weight: 300;}
ul#share{ list-style: none; padding: 25px 0; margin: 0 0 15px 0; border-top: 1px solid #00b0b8; border-bottom: 1px solid #00b0b8; text-align: center}
ul#share li { display: inline-block; margin: 0 20px; text-align: center}
ul#share li a .icon { background:#00b0b8; border-radius: 50%; width: 40px; height: 40px; padding:4px 0 0 0; color:#fff; font-size:1.4rem; display:inline-block; margin-right: 10px;}
ul#share li a { color:#00b0b8; font-size: 1rem}
ul#share li a:hover { color:#112c5f}
ul#share li a:hover .icon { background:#112c5f}
#article-image, #author-image { position:relative; overflow:hidden; display: block; margin-bottom: 1rem;}
#article-image::before, #author-image::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;}
#article-image::after, #author-image::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}

.button { display: inline-block; padding: 12px 15px 10px 15px; margin-bottom: 10px; background: #EEE; border: none; border-radius: 4px; background-color: #112c5f; color: #fff; font-family: sans-serif; font-size: 16px; cursor: pointer;}
.button:hover { background-color: #5b9ed6;}
.button:active,.button.is-checked { background-color: #5b9ed6;}
.button-group:after { content: ''; display: block; clear: both;}
.button-group .button { float: left; border-radius: 0; margin-left: 0; margin-right: 1px;}
.button-group .button:first-child { border-radius: 4px 0 0 4px; }
.button-group .button:last-child { border-radius: 0 4px 4px 0; }

.team-member { margin-bottom: 60px;}
.team-member h4 { font-weight: 400; margin: 0;}
.team-member .job-title { margin: 0 0 15px 0;}
.team-member .office, .team-member .industry { margin: 0 0 5px 0;}
.team-member .fa-linkedin { font-size: 1.6rem; margin-right: 5px; position: relative; top: 2px;}

#populations { padding: 100px 0; background-position: top center; background-repeat: no-repeat; background-size: cover;}
#populations #blue-box { background: url("../images/blue-80-bg.png") 0 0 repeat; color: #fff; padding: 40px; border-radius: 10px;}
#populations #blue-box .icon, #populations #blue-box h2 { display: inline-block;}
#populations #blue-box p { font-weight: 100;}

ul.tags li { display: inline-block; font-size: 1.4rem; margin-right: 5px;}
ul.tags li a { padding: 0 !important; font-size: 1.2rem !important; font-weight: 400 !important;}

#locations { padding: 100px 0;}
#locations .loc-img { position:relative; overflow:hidden; display: block;}
#locations .loc-img::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;}
#locations .location-image { position: relative; display: block;}
#locations .location-info { padding: 40px 30px 30px 30px; position: relative;}
#locations .location-info.grey-bg { background-color: #e5e5e5;}
#locations .location-info.blue-bg { background-color: #bfd4ed;}
#locations .location-info.peach-bg { background-color: #ffdbae;}
#locations .location-info::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid white; border-right:15px solid white;}
#locations .location-info h4 { font-weight: 400; margin: 0 0 .5rem 0;}
#locations .location-info.peach-bg.just { background: #ffdbae url("../images/just-bg-repeat.png") 0 0 repeat; text-align: center; min-height: 390px; position: relative;}
#locations .location-info.peach-bg.just::before { content: ''; position:absolute; top:0; left:0; height: 0px; width: 0px; border-left:15px solid white; border-top:15px solid white; border-bottom:15px solid transparent; border-right:15px solid transparent;} 
#locations .location-info.peach-bg.just .just-i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%;}

#contact-form { padding: 100px 0; background-color: #eff4ff;}
#contact-form.grey-bg { background-color: #e5e5e5;}
#contact-form .form-control { border: none; border-radius: 0; height: auto; padding: 20px 15px; font-weight: 300; color: #112c5f;}
#contact-form .txtarea { min-height: 145px;}

#cta-question { padding: 100px 0;}
#cta-question.grey-bg { background-color: #e5e5e5;}
#cta-question h2 { margin: 0;}
#cta-question a { font-weight: 400;}

#team-members { background: url("../images/team-bg-repeat.jpg") 0 0 repeat; padding: 100px 0;}
#team-members .member { display: block; position: relative; background: #fff;}
#team-members .member::before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#bfd4ed transparent transparent #bfd4ed;}
#team-members .member::after { content: ''; position:absolute; bottom:0; right:0; height: 0px; width: 0px; border-left:15px solid transparent; border-top:15px solid transparent; border-bottom:15px solid #bfd4ed; border-right:15px solid #bfd4ed;}
#team-members .member .name { font-weight: 400; font-size: 1.5rem;}
.owl-nav { position: absolute; top: 50%; left: 0; width: 100%;}
.owl-nav .owl-prev { position: absolute; left: -60px; display: block !important;}
.owl-nav .owl-next { position: absolute; right: -60px; display: block !important;}
.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover { background: none !important;}

footer { padding: 60px 0 300px 0; background: url("../images/footer-bg.jpg") top center no-repeat; background-size: cover; color: #fff;}
footer ul { list-style: none; padding: 0; margin: 0;}
footer ul li a { color: #fff; text-transform: uppercase; font-size: .9rem;}
footer ul li a:hover { color: #112c5f;}
footer ul li ul li a { text-transform: none;}
footer p { font-size: .9rem; font-weight: 300;}
footer p a { color: #fff;}
footer p a:hover { color: #112c5f;}
footer .logos a { display: inline-block;}

.btn-primary { background-color: #112c5f; border-color: #112c5f; font-weight: 500; padding: 10px 30px;}
.btn-primary:hover { background-color: #5b9ed6; border-color: #5b9ed6;}
.btn-primary.white { background-color: #fff; border-color: #fff; color: #112c5f;}
.btn-primary.white:hover { background-color: #5b9ed6; border-color: #5b9ed6; color: #fff;}

.input-group-text { background-color: #fff; border-radius: 0; border-width: 0 1px 0 0; color: #112c5f;}
.form-control { border: none; border-radius: 0; height: auto; padding: 11px 15px; font-weight: 300; color: #112c5f;}
.form-control.search { border-left: 1px solid #eff4ff;}
#article-search .form-control.search { border: 1px solid #eff4ff;}
#article-search-alt .input-group { border: 1px solid #ccc;}
#article-search-alt .input-group-text { border-right: none;}
#article-search-alt button { border: none; background-color: transparent; color: #112c5f;}

/* Navbar Styles */
.navbar { padding: 0;}
.navbar a { text-transform: uppercase; color: #112c5f;}
.navbar-light .navbar-nav .nav-link { color: #112c5f; padding: .25rem 1rem 0 1rem;}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-item.active .nav-link { color: #5b9ed6;}
.dropdown-menu { border-radius: 0; border: none; padding: 1rem 0; opacity: 0.75; box-shadow: 3px 3px 3px -3px #ccc, 3px 3px 3px -3px #ccc, -3px 3px 3px -3px #ccc;}
.dropdown-menu .dropdown-item, .dropdown-menu li .nav-link { opacity: 1; color: #112c5f;}
.dropdown-menu .dropdown-item:hover, .dropdown-menu li .nav-link:hover { background-color: #112c5f; color: #fff !important;}

@media only screen and (min-width:1600px) and (max-width: 1920px) {
    #hero-panel #down { bottom: 15%;}
    #text-box { bottom: 26%; left: 18%; max-width: 60%;}
}

@media only screen and (min-width:769px) {
    .dropdown:hover .dropdown-menu { display: block;}
    header ul.social li.link { display: none;}
}

@media only screen and (max-width:768px) {
    .navbar-nav { margin-top: 15px;}
    .navbar-light .navbar-nav .nav-link { border-top: 1px solid #f5f5f5; padding: .5rem 0rem;}
    .dropdown-menu { border-radius: 0; border: none; padding: 0 0 .5rem 0; opacity: 1; box-shadow: none;}
    .dropdown-menu .dropdown-item { padding: .25rem .5rem; font-weight: 300;}
    .navbar-toggler { border: none; color: #112c5f !important; font-size: 1.75rem;}
    ul#coverage { display: contents;}
    ul#coverage li { width: 100%; margin: 0 0 15px 0;}
}

/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1024px */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
    .navbar-brand img { max-width: 250px;}
    .navbar-light .navbar-nav .nav-link { padding: .25rem .5rem 0 .5rem;}
    #text-box { bottom: 25%; left: 5%; max-width: 80%;}
    .cta-panel h2 { font-size: 2.8rem;}
    footer ul { margin: 0 0 15px 0;}
    .owl-nav .owl-prev { left: -40px;}
    .owl-nav .owl-next { right: -40px;}
    .contact-details { padding: 1.75rem 3rem !important;}
    .contact-details p { line-height: 1.6rem; font-size: 1.1rem;}
    #locations .location-info.peach-bg.just { min-height: 354px;}
    #latest-news .article-info a { font-size: 1.6rem; line-height: 2rem; padding: 0;}
    #latest-news .article-info { min-height: 320px;}
    .team-member { text-align: center;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .navbar-brand img { max-width: 250px;}
    #text-box { bottom: 22%; left: 5%; max-width: 90%;}
    #text-box h1 { font-size: 2.3rem;}
    #text-box p { font-size: 1.2rem;}
    #hero-panel #down { bottom: 4%; margin-left: -25px;}
    #hero-panel #down img { width: 50px;}
    .cta-panel h2 { font-size: 2rem;}
    #latest-news .article-info a, #related-articles .article-info a { font-size: 1.6rem; line-height: 2rem; padding: 0 0px 0 0;}
    footer ul { margin: 0 0 15px 0;}
    .owl-nav .owl-prev { left: -35px;}
    .owl-nav .owl-next { right: -35px;}
    #locations .location-info.peach-bg.just { min-height: 342px;}
    #locations .location-info p { font-size: 1rem;}
    .article-full h1 { font-size: 2rem;}
    ul#share li { margin: 0 10px;}
    #latest-news .article-info { min-height: 290px;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
    #hero-panel #down { display: none;}
    #intro, #latest-news, #contact-form, #cta-question, .content, #team-members, #populations, #locations { padding: 30px 0;}
    #intro #comment-box { padding: 60px 30px;}
    .cta-panel { background-position: top center;}
    .cta-panel h2 { font-size: 1.8rem;}
    #latest-news .article-info { margin-bottom: 30px; min-height: inherit;}
    footer { padding: 0 !important;}
    footer ul { margin: 0 0 15px 0;}
    .article-full h1 { font-size: 2rem;}
    ul#share li { margin: 0 5px 10px 5px;}
    .team-member h4 { margin-top: 1rem;}
    .team-member .btn { margin-bottom: 1rem;}
    .cta-panel { padding: 0;}
    #cta-bg { background-color: rgba(255,255,255,.8); width: 100%; height: 100%; padding: 30px 0;}
    #footer-bg { background-color: rgba(17,44,95,.4); width: 100%; height: 100%; padding: 60px 0 100px 0;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #text-box { bottom: 15%; left: 5%; max-width: 90%;}
    #text-box h1 { font-size: 2.3rem;}
    #text-box p { font-size: 1.2rem;}
}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    #hero-panel { background-color: #112c5f;}
    #text-box { position: static; bottom: 0; left: 0; background-color: #112c5f; opacity: 1; border-radius: 0px; color: #fff; padding: 30px 60px 30px 0; max-width: 100%;}
    #text-box h1 { font-size: 1.6rem;}
    #text-box p { font-size: 1rem; margin: 0;}
    #text-box .link { position: absolute; bottom: 60px; right: 30px;}
    .navbar-brand img { max-width: 200px;}
    ul.social li.s-link { display: none;}
    #latest-news .article-info a { padding: 0;}
    .owl-nav { top: 100%;}
    .owl-nav .owl-prev { left: 40%;}
    .owl-nav .owl-next { right: 40%;}
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}