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

@import url('https://static.fontawesome.com/css/fontawesome-app.css');

/* FONTS */
a { transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; outline: none; color: #0092B0; text-decoration: none;}
a:hover { text-decoration:none; color: #003D71;}
a:focus { outline: none;}

/* SPACING CLASSES */
.pad30 { padding: 30px;}
.pad60 { padding: 60px;}
.pad90 { padding: 90px;}
.pad120 { padding: 120px;}
.padX30 { padding: 0 30px;}
.padX60 { padding: 0 60px;}
.padX90 { padding: 0 90px;}
.padX120 { padding: 0 120px;}
.padY30 { padding: 30px 0;}
.padY60 { padding: 60px 0;}
.padY90 { padding: 90px 0;}
.padY120 { padding: 120px 0;}

/* HEADINGS & TEXT */
h1,h2,h3,h4,h5,h6 { margin: 0 0 1.5rem 0; font-weight: 700; color: #003D71;}
.underlined { background: url("../images/heading-underline.jpg") bottom left no-repeat; padding: 0 0 15px 0;}
.underlined.center { background: url("../images/heading-underline.jpg") bottom center no-repeat; padding: 0 0 15px 0;}
p { font-size: 1.2rem; margin: 0 0 1rem 0; line-height: 2rem;}

#success { display: none;}
#successN { display: none;}
.error { color: red;}

/* GENERAL */
html,body { overflow-x: hidden;}
body { font-family: "Lato", sans-serif; font-weight: 400; color: #272929;}
.bg-offwhite { background-color: #F7F9FA;}
.bg-calculators { background: url("../images/bg-calculators.jpg") 0 0 repeat-x;}
.section-border-top { border-top: 2px solid #0092B0;}

#holding { max-width: 600px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#holding img { max-width: 200px;}

header { border-bottom: 2px solid #0092B0; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; background-color: #fff;}
header .cta-link { color: #272929;}
header .cta-link:hover { color: #0092B0;}
header .cta-link i { color: #0092B0; font-size: 1.2rem; position: relative; top: 1px;}
header.sticky { position: fixed; top: 0; left: 0; width: 100%; padding: 5px 0 !important; z-index: 100;}

#hero h1 { font-size: 2.5rem;}
#hero h2 { font-weight: 300; color: #272929; margin: 0 0 2.5rem 0;}

#intro-bar { color: #fff; background-color: #003D71;}
#intro-bar h3 { color: #fff; margin: 0;}
#intro-bar p { font-size: 1.4rem;}
#intro-bar .container { background: url("../images/bg-curve.jpg") 0 0 no-repeat;}
#intro-bar.small .container { background: url("../images/bg-curve-small.jpg") 0 0 no-repeat;}
#intro-bar.smaller .container { background: url("../images/bg-curve-smaller.jpg") 0 0 no-repeat;}
#years { font-weight: 900; font-size: 8rem; line-height: 7rem;}
#experience { font-weight: 300; font-size: 1.3rem; letter-spacing: 1px;}

.accreditations img { max-width: 375px;}

.team-member { border-top: 2px solid #0092B0;}
.position { color: #0092B0; font-weight: 300; font-size: 1.4rem; margin-bottom: 25px;}

.quote { background-color: #fff; border-radius: 50px; padding: 70px 45px 40px 45px; position: relative; height: 100%;}
.quote.internal { background-color: #F7F9FA;}
.quote .fa-comments { background-color: #fff; border-radius: 50%; border: 5px solid #F7F9FA; padding: 20px 15px; color: #0092B0; font-size: 2.5rem; position: absolute; top: -45px; left: 50%; transform: translateX(-50%);}
.quote .stars i { color: #EDD418; font-size: 1.4rem;}
.quote .author { font-weight: 700; margin: 10px 0;}
.quote p { font-size: 1.1rem; font-weight: 300;}

.service-links a { display: block; background-image: url("../images/service-link-curve.jpg"); border-radius: 20px; padding: 0; text-transform: uppercase; height: 200px; position: relative; font-weight: 300; font-size: 1.4rem; line-height: 1.8rem; color: #003D71; -webkit-transition: background-image 2s ease-in-out; transition: background-image 2s ease-in-out; -moz-transition: background-image 2s ease-in-out; margin-bottom: 25px;}
.service-links a span { font-weight: 700; display: block; font-size: 1rem; margin-top: 5px;}
.service-links a .text { position: absolute; top: 50%; left: 90px; transform: translateY(-50%); width: 60%;}
.service-links a:hover, .service-links a.active { background-image: url("../images/service-link-curve-hover.jpg"); color: #fff;}
.service-links a:hover .text { cursor: pointer;}

.content ul { list-style: none; padding: 0;}
.content ul li { padding-left: 30px; font-size: 1.2rem; margin-bottom: 6px;}
.content ul li::before { content: "\f111"; font-family: FontAwesome; display: inline-block; margin-left: calc( 1.3em * -1 ); width: 1.3em; color: #0092B0; font-size: 0.5rem; position: relative; left: -7px; top: -2px;}

article.summary { background-color: #F7F9FA; border-radius: 30px; padding: 40px 40px 20px 40px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; margin-bottom: 30px; height: 100%;}
article.summary:hover { box-shadow: 0px 0px 15px #e3dfdf;}
article.summary p { font-size: 1.1rem;}

.pagination .page-item { margin: 0 8px; border-radius: 10px;}
.pagination .page-item .page-link { border-radius: 10px; padding: 10px 17px; border-width: 0; background-color: #F7F9FA; color: #272929;}
.pagination .page-item .page-link:hover, .pagination .page-item.active .page-link { background-color: #003D71; color: #fff;}

#map { height: 500px; background-image: url("../images/map.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
#map .btn { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);}

#cta { color: #fff; background: rgb(0,61,113); background: linear-gradient(45deg, rgba(0,61,113,1) 0%, rgba(3,37,66,1) 100%);}
#cta h3 { color: #fff;}

footer { border-bottom: 2px solid #0092B0;}
footer #f-logo { max-width: 400px;}
footer h6 { margin: 0 0 1rem 0;}
footer p { font-size: 1.1rem; line-height: 1.75rem;}
footer ul { list-style: none; padding: 0; margin: 0 0 30px 0;}
footer ul li { margin-bottom: 5px;}
footer ul li a { color: #272929;}
footer ul li a:hover { color: #0092B0;}

/* NAVIGATION */
header #logo { height: 80px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
header .navbar-logo-centered { height: 80px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
.navbar { padding: 0;}
.navbar .nav-item { margin: 0 15px;}
.navbar .nav-item .nav-link { padding: 28px 0; color: #272929; font-size: 1.075rem;}
.navbar .nav-item .nav-link:hover, .navbar .nav-item.active .nav-link { color: #0092B0;}
.navbar .nav-item.active .nav-link { font-weight: 700;}

/* BUTTONS */
.btn { border-radius: 30px; border-width: 2px; text-transform: uppercase; padding: 15px 30px; width: 300px;}
.btn-primary { border-color: #0092B0; background-color: transparent; color: #000;}
.btn-primary:hover, .btn-primary:focus { border-color: #0092B0; background-color: #0092B0; color: #fff;}
.btn-primary.white { border-color: #fff; background-color: transparent; color: #fff;}
.btn-primary.white:hover, .btn-primary.white:focus { border-color: #0092B0; background-color: #0092B0; color: #fff;}
.btn-secondary { border-color: #003D71; background-color: #003D71; color: #fff; font-weight: 300;}
.btn-secondary:hover, .btn-secondary:focus { border-color: #0092B0; background-color: #0092B0; color: #fff;}
.btn-secondary.teal { border-color: #0092B0; background-color: #0092B0; color: #fff; font-weight: 300;}
.btn-secondary.teal:hover, .btn-secondary.teal:focus { border-color: #fff; background-color: #fff; color: #0092B0;}
.btn-secondary.white { border-color: #fff; background-color: #fff; color: #0092B0; font-weight: 300;}
.btn-secondary.white:hover, .btn-secondary.white:focus { border-color: #0092B0; background-color: #0092B0; color: #fff;}
.btn .fa-linkedin { font-size: 1.5rem; position: relative; top: 2px; margin-right: 10px;}

.effect { display: inline-block; position: relative; text-decoration: none; overflow: hidden;}
.effect.effect-1 { -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;}
.effect.effect-1::before { font: var(--fa-font-solid); content: "\f178"; font-size: 15px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; right: 15px; top: 0; opacity: 0; height: 100%; width: 40px; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.effect.effect-1:hover { text-indent: -20px;}
.effect.effect-1:hover::before { opacity: 1; text-indent: 0px;}

/* NAVIGATION */
.form-control { border-color: #0092B0; border-radius: 10px; padding: 15px 20px;}

/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1080px */
@media only screen and (min-width: 960px) and (max-width: 1080px) {
	.btn { width: auto; min-width: 200px; font-size: 0.9rem;}
	.accreditations img { max-width: 100%;}
	header .cta-link i { font-size: 1.5rem; top: 2px;}
	#intro-bar p { font-size: 1.1rem;}
	#intro-bar.small h3 { font-size: 1.2rem;}
	#years { font-size: 5rem; line-height: 4rem;}
	#experience { font-size: 0.8rem; margin-top: 10px;}
	#map { height: 400px;}
	#cta p { font-size: 1.2rem !important;}
	footer p { font-size: 1rem;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.padY60,.padY90,.padY120 { padding: 40px 0;}
	#map { height: 400px;}
}

/* #Tablet downwards
================================================== */
/* Note: Design for a max width of 768px */
@media only screen and (max-width: 959px) {
	.btn { width: 100%; min-width: 200px; padding: 12px 15px;}
	.accreditations img { max-width: 100%;}
	#intro-bar .container, #intro-bar.small .container, #intro-bar.smaller .container { background: none;}
	#intro-bar p { font-size: 1.1rem;}
	footer #f-logo { max-width: 100%;}
	.quote { margin-bottom: 60px;}
	.quote.last { margin-bottom: 0px;}
	#cta p { font-size: 1.2rem !important;}
	
	.navbar-brand { margin-left: auto; margin-right: calc( 42% - 15px );}
	.navbar-toggler { border: 0; padding: 0; margin: 0; font-size: 2rem; color: #0092B0;}
	.navbar-toggler:focus { box-shadow: none;}
	.navbar-nav { padding-top: 15px;}
	.navbar .nav-item { margin: 0;}
	.navbar .nav-item .nav-link { padding: 10px; font-size: 1rem;}
	.navbar .nav-item .nav-link:hover, .navbar .nav-item.active .nav-link { background-color: #F7F9FA;}
	header { position: relative;}
	header #mobile-links { position: absolute; top: 50px; left: 7%; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
	header.sticky #mobile-links { top: 37px;}
	header .cta-link i { font-size: 1.5rem;}
	#map .btn { max-width: 240px; bottom: 40px;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
	#holding { width: 90%;}
	.padY60,.padY90,.padY120 { padding: 30px 0;}
	header.py-3 { padding-top: 10px !important; padding-bottom: 10px !important;}
	header #mobile-links { top: 42px;}
	header.sticky #mobile-links { top: 42px;}
	header.sticky .navbar-toggler { margin-right: 12px;}
	#map { height: 300px;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.navbar-brand { margin-right: calc( 37% - 15px );}
	.service-links a .text { left: 70px;}
}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
	.mb-5 { margin-bottom: 1rem !important;}
	.navbar-brand { margin-left: auto; margin-right: calc( 35% - 25px );}
	.l-mob { margin-right: -25px;}
	.quote { padding: 70px 30px 40px 30px;}
	#intro-bar.small, #intro-bar.smaller { text-align: center;}
	#intro-bar.smaller h3.me-5 { margin-right: 0 !important; margin-bottom: 15px !important;}
	.service-links a { height: 120px; background-image: url("../images/service-link-curve-mob.jpg"); font-size: 1.3rem;}
	.service-links a:hover { height: 120px; background-image: url("../images/service-link-curve-mob-hover.jpg");}
}
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}