/* Jurideko */

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap');

/* animation*/
@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

/* ==========================================================================
Generellt 
========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
    background-repeat: no-repeat;
}

body, body.isMobile .body-background {
    -webkit-font-smoothing: antialiased;
    background-position: center center;
    background-size: cover;
	font-family: 'Karla', sans-serif;
}

html {
	font-size: 62.5%;
}

.LayoutPage .section-block-wrapper {
	max-width: 150rem;
}

.LayoutPage .width-1100 .section-block-wrapper {
	max-width: 110rem;
}

.LayoutPage .section-wrapper {
    background-color: #fff;
}

.LayoutPage .section-block, .SubPage .LayoutPage .section-block {
    padding: 12rem 3rem;
}

.container {
	max-width: 100%;
}

@media only screen and (max-width: 1024px) {
	.LayoutPage .section-block, .SubPage .LayoutPage .section-block {
		padding: 11rem 3rem;
	}	
}

@media only screen and (max-width: 580px) {
	.LayoutPage .section-block, 
	.SubPage .LayoutPage .section-block {
		padding: 6rem 2rem;
	}
}

.pt-2 {
	padding-top: 2rem;
}


/* ==========================================================================
Knappar & speciella länkar
========================================================================== */

.btn {
    max-width: 24rem;
    width: auto;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 4px;
    line-height: 1em;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    display: inline-block;
    display: block;
}

.btn-primary {
	background-color: #fff;
    border: 2px solid #fff;
    color: #b07754 ;
}

.btn-secondary,
.btn:hover {
    border: 2px solid #31566a;
    background-color: #31566a;
    color: #fff ;
}

.btn-secondary:hover {
	border: 2px solid #fff;
    background-color: #fff;
    color: #b07754 ;
}

.btn-wrapper.center {
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 480px) {
    .btn {
        display: block;
        width: 100%;
    }
    
    .btn-wrapper .btn {
        margin: 1.5rem 0;
    }
}

/* länk med pil */
.btn::after {
	content: ' \f0da';
	opacity: 1;
	transition: all .3s ease;
	font-family: 'Font Awesome 5 Pro';
	margin-left: 3px; 
/* 	font-weight: 400; */
}

.btn:hover::after {
	content: ' \f0da';
	opacity: 1;
	margin-left: 10px;
}

/* knapp med cirkel */
.btn-wrapper {
	margin-top: 3rem;
}

.btn-wrapper a {
	color: #222;
}

.btn-wrapper a:hover {
	color: #fff;
}

.button {
	text-decoration: none;
	display: inline-block;
	font-weight: 400;
}

.button,
.button::before,
.button::after {
	transition: all .3s ease;
} 

.button:hover {
	text-decoration: none;
}

.button-circle {
  position: relative;
  margin: auto;
  padding: 1rem 3.5rem;
  transition: all 0.2s ease;
}

.button-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 3rem;
  background: #ffad4e;
  width: 4.6rem;
  height: 4.6rem;
  transition: all 0.3s ease;
}

.button-span {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: all .3s ease;
}

.button-span::after {
	content: '\2192';
	margin-left: .5em;
	transition: all .3s ease;
}

.button:hover .button-span::after {
	margin-left: 1em;
	transition: all .3s ease;
}

.button-circle:hover::before {
  width: 100%;
  background: #040713;
}

.button-circle:active {
  transform: scale(0.96);
}


/* ==========================================================================
Text och typsnitt
========================================================================== */
p, li, a {
    color: #222;
    font-family: inherit;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
}

.EditMode a {
	font-size: 1.5rem;
	letter-spacing: normal;
}

a:hover {
	text-decoration: underline;
	color: #b07754;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

h1, h2, h3, .section-title {
    color: #616161;
    letter-spacing: normal;
}

h1 {
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    font-size: 6rem;
    line-height: 1.2;
}

h2, h3, .section-title {
    font-style: normal;
    padding-bottom: 4rem;
    text-align: left;
    font-weight: 300;
    font-size: 5rem;
    line-height: 1.5;
    text-transform: none;
}

h4 {
    font-size: 2.8rem;
    text-transform: none;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 400;
    padding-bottom: 1rem;
}

/* text klasser */
.bold {
	font-weight: 800;
}

.italic {
	font-style: italic;
}

.ingress {
    font-weight: 600;
}

.link-styled {
	text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: .4rem;
    font-size: 1.45rem;
    text-align: left;
    text-shadow: none;
    font-family: inherit;
    font-weight: 600;
    font-style: normal;
}

.text-label {
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: .4rem;
    font-size: 1.45rem;
    text-align: left;
    padding-bottom: 2.5rem;
    text-shadow: none;
    font-family: inherit;
    font-weight: 600;
    font-style: normal;
}

.ingress-title {
    text-align: left;
    font-weight: 800;
    text-align: left;
    max-width: 100rem;
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.1;
}

.small-title {
	max-width: 80rem;
	padding-bottom: 1rem;
    text-transform: none;
    font-size: 3rem;
    letter-spacing: normal;
	line-height: 1.4;
	font-weight: 600;
	color: #31566a;
}

.highlight {
    background: linear-gradient(180deg,rgba(255,255,255,0) 70%, #e7f1ec 70%);
}

.ingress-title {
    font-size: 4.8rem;
    font-weight: 300;
    line-height: 1.5;
}

/* textblock i CMS */

.smalltext-type {
	max-width: none;
}

.normaltext-type {
	max-width: 100rem;
    margin: 0 auto;
    text-align: left;
}

@media only screen and (max-width: 1300px) {
	h2, h3, .section-title {
		font-size: 4.5rem;
	}
}

@media only screen and (max-width: 1200px) {
	h2, h3, .section-title {
		font-size: 4rem;
	}
}


@media only screen and (max-width: 1100px) {
	h2, h3, .section-title {
		font-size: 3.5rem;
	}
}

@media only screen and (max-width: 1000px) {
	p, li, a {
	    font-size: 1.7rem;
	}
}

@media only screen and (max-width: 500px) {
	h2, h3, .section-title {
		font-size: 3rem;
	}
}




/* ==========================================================================
Färger
========================================================================== */
.LayoutPage .bg-primary {
	background-color: #31566a ;
}

.primary-color,
.color-primary {
	color: #31566a;
}

.LayoutPage .bg-secondary {
	background-color: #b07754  ;
}

.color-secondary {
	color: #b07754  ;
}

.LayoutPage .bg-dark {
	background-color: #333 ;
}

.LayoutPage .bg-dark-transparency {
	background-color: rgba(0, 0, 0, 0.88);
}


/* alla sektioner som ska ha vit text */
.LayoutPage .bg-dark-transparency *,
.LayoutPage .bg-primary *,
.LayoutPage .bg-primary h2,
.LayoutPage .bg-primary li:before,
.LayoutPage .bg-secondary *,
.LayoutPage .bg-secondary li:before {
	color: #fff;
}

.LayoutPage .bg-primary .btn-primary {
	background-color: #fff;
    border: 2px solid #fff;
    color: #b07754 ;
}




.bla-farg {
	background-color: #31566a ;
}

/* ==========================================================================
Header / Navigation
========================================================================== */
/* header */
header {
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
	background-color: transparent;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    margin-top: 0;
    background-color: #ffffff;
	z-index: 10001;
}

header.scrolled {
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

header .container {
	padding: 0 2rem;
}

/* logotyp */

header .header-logo {
    width: 19rem;
    position: absolute;
    line-height: 0;
    padding-top: 1.3rem;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
}


/* navigering */
nav.mainmenu {
	text-align: right;	
    display: inline-block;
}

nav.mainmenu ul.TemplateMenu > li {
	line-height: normal;
	height: auto;
}

nav.mainmenu a {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    font-size: 1.4rem;
    color: #333;
    text-transform: unset;
    padding: 0 1.5rem;
    letter-spacing: 0.25em;
    display: block;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    height: 7.2rem;
    line-height: 7.2rem;
}

nav.mainmenu .fas {
	font-size: 1.4rem;
}

header nav.mainmenu a {
	display: inline-block;
}

nav.mainmenu li:hover, 
nav.mainmenu li.active {
	background-color: transparent;
}

nav.mainmenu li:hover a, 
nav.mainmenu li.active a,
header.scrolled nav.mainmenu .fab  {
	color: #9AAEBB;
}  

/* hamburgemenyn */
header .mobile-menu span{
	height: 2px;
	width: 100%;
	background: #333;
	border-radius: 2px;
	margin-bottom: 12px;
	display: none;
}

header.scrolled .mobile-menu span {
	background: #9AAEBB;
}

header .close-menu {
	display: none;
}

header .close-menu:before, 
header .close-menu:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 3px;
	background-color: #fff;
}

header .close-menu:before {
  	transform: rotate(45deg);
}

header .close-menu:after {
  	transform: rotate(-45deg);
}


nav.mainmenu ul > li.expandable-li:hover > a,
nav.mainmenu li:hover a, 
nav.mainmenu li.active a {
	color: #b07754;
}  

header .mobile-menu span{
	height: 2px;
	width: 100%;
	background: #333;
	border-radius: 2px;
	margin-bottom: 1rem;
	display: none;
}

.expandable:after {
	font-family: 'Font Awesome 5 Pro';
    font-weight: 700;
    content: '\f107';
    text-decoration: none;
    display: inline-block;
    color: #b07754;
    margin-left: 1rem;
}

nav.mainmenu li:hover .expandable:after {
	text-decoration: none ;
}

/* Dropdown menu */
.expandable-li ul li a {
	line-height: 5rem;
}

nav.mainmenu ul > li > ul {
    top: 72px;
    width: 42rem;
    left: -23rem;
    background-color: #fff;
	border: 1px solid rgba(101, 101, 101, 0.3);
	border-top: 1px solid rgba(255, 255, 255, 1);
	z-index: 1000;
}

nav.mainmenu ul > li > ul > li {
	height: 6.3rem;
	line-height: 6.3rem;
	
}

nav.mainmenu ul > li > ul > li:hover {
	background-color: #f8f8f8;
}

nav.mainmenu .expandable-li:hover ul > li > a {
	color: #333;
	text-decoration: none;
	font-weight: 400;
}

nav.mainmenu .expandable-li ul > li:hover > a {
	color: #b07754;
	text-decoration: none;
}

nav.mainmenu ul > li > ul > li > a {
    color: #fff;
    padding: 0 3rem;
	height: 6rem;
    letter-spacing: normal;
}

.dropdown-arrow::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 700;
    content: '\f0d7';
    text-decoration: none;
    display: inline-block;
    color: #222;
    right: 40px;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

.dropdown-link {
	font-size: 18px ;
	padding: 0 30px ;
}

.dropdown-link::after {
	color: #222;
	content: '\f0da';
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	font-size: .8em;
	margin-left: 1rem;
	transition: all .3s ease;
}

.expandable-li ul li:hover .dropdown-link::after {
	color: #b07754;
	margin-left: 1.5rem;
	transition: all .3s ease;
}
@media only screen and (min-width: 980px) {
    
    .hamburger {
        display: none;
    }
}

@media only screen and (max-width: 980px) {

    .cta-menu {
		right: 7rem;
	}
	
	/* Hamburger */
	.hamburger {
	    position: absolute;
	    z-index: 1000;
	    left: auto;
	    right: 1rem;
	    top: 1.1rem;
	}
	
	.hamburger-inner, 
	.hamburger-inner::after, 
	.hamburger-inner::before {
		color: #b07754;
        background-color: #b07754;
    }

    .scrolled .hamburger-inner, 
	.scrolled .hamburger-inner::after, 
	.scrolled .hamburger-inner::before {
		color: #333;
		background-color: #333;
    }
    
    /* Navigation */
	nav.mainmenu {
		text-align: left;
		display: none;
		position: fixed;
		height: 100%;
		right: 0;
		width: 35rem;
		background-color: #FFF;
		z-index: 1000;
		top: 0;
		box-shadow: none;
		overflow-y: scroll;
	}
	
	nav.mainmenu .Padding {
		margin: 8rem 0 !important;
	}
	
	nav.mainmenu li {
		text-align: left;
		display: block;
	}
	
	nav.mainmenu li a {
		margin: unset;
		padding: unset;
		padding-left: 4rem;
		font-size: 1.6rem;
        line-height: 3.7;
        opacity: 1;
        color: #333;
		width: 100%;
		letter-spacing: normal;
	}
	
	nav.mainmenu .header-btn {
		left: 4rem;
		margin-top: 2rem;
	}

	header nav.mainmenu li.header-btn a {
		padding: inherit !important;
		color: #fff !important;
	}

	header nav.mainmenu li.header-btn:hover a  {
		color: #333 !important;
	}
	
	#overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0 , 0, 0.75);
	    z-index: 7;
	}

	.dropdown-arrow::before {
		display: none;
	}
    
	
	/* Dropdown */
	nav.mainmenu ul > li > ul {
	    background-color: #fff !important;
	    width: auto !important;
	    border: none;
	}
	
	nav.mainmenu ul > li > ul {
		display: contents !important;
	}

	nav.mainmenu ul > li > ul > li.active {
		background-color: transparent;
	}
	
	nav.mainmenu ul > li > ul > li a {
		color: #333 !important;
		
	}
	
	nav.mainmenu ul > li > ul > li > a {
	    width: auto;
	    padding: 0 0 0 6rem;
	    font-size: 1.5rem;
	}
	
	nav.mainmenu ul > li > ul {
		margin-bottom: 4rem;
	}
	
	nav.mainmenu ul > li > ul > li > a,
	nav.mainmenu ul > li > ul > li {
		height: 5rem;
		width: 100%;
		letter-spacing: normal !important;
	}
	
	nav.mainmenu ul > li.expandable-li:hover > a {
		padding-bottom: 0;
	}
	 
	nav.mainmenu ul.TemplateMenu > li,
	.scrolled nav.mainmenu ul.TemplateMenu > li {
	    line-height: unset;
	    height: unset;
	}
	
	#overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0 , 0, 0.75);
	    z-index: 7;
	}
	
}

@media only screen and (max-width: 980px) {
	nav.mainmenu {
		left: auto;
		right: 0;
		width: 70%;
	}
}

@media only screen and (max-width: 768px) {
	
	header .container {
		padding-left: 1rem;
	}
}

@media only screen and (max-width: 510px) {
	.cta-menu {
		display: none;
	}

	nav.mainmenu {
		width: 100%;
	}

	header .header-logo {
		width: 14rem;
		padding-top: 1.9rem;
	}
}


/* Parallax
========================================================================== */
.LayoutPage .parallax {
    max-width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 50rem;
}

@media only screen and (hover:none) {
	*,
	*::before,
	*::after {
		background-attachment: scroll ;
		background-position: center center;
	}
}

@media only screen and (max-width: 980px) {
	.SubPage .parallax {
		height: 40rem;
	}
}

@media only screen and (max-width: 600px) {
	.SubPage .parallax {
		height: 30rem;
	}
}



/* Split Wrapper
========================================================================== */

.split-section .normaltext-type {
	max-width: none;
}

.split-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
	position: relative;
}

.split-wrapper.reverse {
	flex-direction: row-reverse;
}

.split-content {
    width: 55%;
    padding: 10rem;
	text-align: left;
	align-self: center;
}

.split-image {
    width: 45%;
    position: relative;
    overflow: hidden;
}

.split-image img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none ;
}

@supports (object-fit: cover) {
    .split-image img {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        object-fit: cover;
        object-position: center;
        height: 100% ;
        width: 100% ;
    }
}

@media screen and (max-width: 1100px) {
	.split-content {
	    width: 50%;
		text-align: left;
		padding: 5rem;
	}
}

@media screen and (max-width: 1000px) {
	.split-wrapper {
		display: block;
	}
	
	.split-wrapper.reverse {
		flex-direction: row;
	}
	
	.split-content {
		width: 100% ;
	}
	
	.split-text {		
		max-width: 85rem;
	}
	
	.split-image {
		width: 100% ;
		height: 40rem;
		padding: 0;
	}
}

@media screen and (max-width: 500px) {
	
	.split-content {
		padding: 7rem 0 0 ;
	}
	
	.split-image {
		height: 30rem;
	}
}




/* kontakta oss sektion
========================================================================== */
.LayoutPage .contact-section {
	background-image: url('/assets/images/jurideko-start-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

.LayoutPage .contact-section .section-block {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 19rem 6rem;
}

.LayoutPage .contact-section h2,
.LayoutPage .contact-section p {
	color: #fff;
}

.LayoutPage .contact-section p {
	font-weight: 400;
}

@media only screen and (max-width: 1024px) {
	.LayoutPage .contact-section .section-block {
		padding: 16rem 3rem;
	}	
}

@media only screen and (max-width: 580px) {
	.LayoutPage .contact-section .section-block{
		padding: 8rem 2rem;
	}
}


/* Gör img tag till bakgrundsbild
========================================================================== */
.LayoutPage .image-wrapper {
    position: relative;
    overflow: hidden;
}

.LayoutPage .image-wrapper img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none ;
}

@supports (object-fit: cover) {
    .image-wrapper img {
        position: relative;
        transform: none;
        top: unset;
        left: unset;
        object-fit: cover;
        object-position: center;
        height: 100% ;
        width: 100% ;
    }
}



/* ==========================================================================
Top-section
========================================================================== */
.top-section {
    height: 90vh;
    background-color: transparent;
    background-image: url('/assets/images/jurideko-topillustration.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: auto 96%;
}

.top-section:after {
	position: absolute;
    content: '';
    display: block;
/*     z-index: -1; */
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.42);
}

.page-title-wrap {
	background-color: transparent;
    top: 22vh;
    left: 50%;
    width: 100%;
    max-width: none;
    padding: 0;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);	
}

.page-title-innerwrap {
    width: 100%;
    text-align: center ;
    position: relative;
    margin-left: 30rem;
    box-sizing: border-box;
    max-width: 101rem;
	padding: 0 2rem;
}

.page-title-wrap h1 {
    font-style: normal;
    line-height: 0.5;
    text-shadow: none;
    text-align: left;
    color: #333;
    font-style: normal;
    text-transform: none;
    line-height: 1.5;
    font-weight: 500;
    text-shadow: none;
    letter-spacing: normal;
    font-size: 5.5rem;
    padding-bottom: 5rem;
}


.page-title-wrap p {
	color: #333;
	max-width: none;
	padding-bottom: 0rem;
	max-width: 90rem;
	text-align: left;
	font-weight: 300;
	
}

.page-title-wrap a {
	text-align: center;
	margin: 0 auto;
}


.usp-decoration {
	font-style: italic;
}

@media screen and (max-width: 1440px) {
	.page-title-wrap {
		top: 19vh;
	}

	.page-title-innerwrap {
		margin-left: 16rem;
	}
	
}

@media only screen and (max-width: 1300px) {
	.page-title-innerwrap {
		margin-left: 8rem;
	}

	.page-title-innerwrap {
		max-width: 93rem;
	}
    
    .page-title-wrap h1 {
    	font-size: 5rem;
	}
	
	
}

@media only screen and (max-width: 1150px) {    
    .page-title-wrap h1 {
    	font-size: 4.2rem;
	}
	
}

@media only screen and (max-width: 1030px) {
	.page-title-wrap {
		padding: 0 2rem 0 10rem;
	}

    .page-title-innerwrap {
	    max-width: none;
	    margin-left: 0rem;
		padding: 0;
	}
}

@media only screen and (max-width: 920px) {
	.page-title-wrap {
		padding: 0 2rem 0 6rem;
	}

}

@media only screen and (max-width: 650px) {
	.page-title-wrap {
		padding: 0 2rem;
	}

	.page-title-wrap h1 {
		font-size: 3rem;
		padding-bottom: 2rem;
	}
}

@media only screen and (max-width: 320px) {
	.page-title-wrap h1 {
		font-size: 2.6rem;
	}
}



/* social-media knappar - ligger i .parallax sektionen */

.parallax {
	position: relative;
}

.social-media-top {
	position: absolute;
	right: 5rem;
	top: -29rem;
}

.social-media-top a {
	display: inline-block;
}

.social-media-top a .fab {
	font-size: 2.3rem;
    margin-right: 1.5rem;
    color: #b07754;
	-webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.social-media-top a:hover .fab {
	color: rgb(104, 104, 104);	
}


@media only screen and (max-width: 650px) {
	.social-media-top {
		right: 1rem;
		top: -17rem;
	}
}

@media only screen and (max-width: 320px) {
	.social-media-top {
		top: -13rem;
	}
}



/* ==========================================================================
Startsida
========================================================================== */

/* Parallax
========================================================================== */
.top-img {
	padding: 2rem 2rem 0 18rem;
	position: relative;
	z-index: 3;
}

.top-img .section-block {
    max-width: 100% ;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50rem;
    border-radius: 0.5rem;
	background-image: url('/assets/images/jurideko-fastigheter-2000px.jpg');
	margin-top: -25rem;
}

@media only screen and (hover:none) {
	*,
	*::before,
	*::after {
		background-attachment: scroll ;
		background-position: center center;
	}
}

@media only screen and (max-width: 1300px) {
	.top-img {
		padding: 2rem 2rem 0 10rem;
	}
}

@media only screen and (max-width: 1100px) {
	.top-img .section-block {
		height: 40rem;
	}
}

@media only screen and (max-width: 920px) {
	.top-img {
		padding: 2rem 2rem 0 6rem;
	}
}


@media only screen and (max-width: 650px) {
	.top-img {
		padding: 2rem 2rem 0 2rem;
	}

	.top-img .section-block {
		height: 30rem;
		margin-top: -15rem;
	}
}

@media only screen and (max-width: 320px) {
	.top-img .section-block {
		height: 23rem;
		margin-top: -11rem;
	}
}



/* Om oss
========================================================================== */
.LayoutPage .about .section-block {
	padding: 17rem 3rem ;
}

.LayoutPage .about .col-0 {
	width: 60%;
	padding-right: 4%;
}

.LayoutPage .about .col-1 {
	width: 40%;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	padding-right: 1%;
}

/* slider med citat */
.lSSlideOuter .lSPager.lSpg>li a {
	background-color: #ffffff ;
	opacity: 0.6 ;
	z-index: 7 ;
}

.lSSlideOuter .lSPager.lSpg>li.active a, .lSSlideOuter .lSPager.lSpg>li:hover a {
	background-color: #fff ;
	opacity: 1 ;
}

/* .lightSlider {
	display: flex;
	flex-wrap: wrap;
} */

.quote-cards {
    background: transparent;
    box-sizing: border-box;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.LayoutPage .quote-cards .fas {
    padding: 0.3rem;
    font-size: 2.3rem;
    color: rgba(255, 255, 255, 0.6) ;
}

.quote-cards p {
	text-align: center;
	padding-bottom: 2rem;
}

.quote-cards .quote-person {
	margin-bottom: 1rem;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
}

.LayoutPage .lSSlideOuter .lSPager.lSpg>li {
	padding: 0 1rem;
}

@media only screen and (max-width: 1230px) {
	.LayoutPage .about .col-0 {
		width: calc(100% - 46rem);
	}
	
	.LayoutPage .about .col-1 {
		width: 46rem;
	}
}

@media only screen and (max-width: 1050px) {
	.LayoutPage .about .section-block {
		padding: 17rem 3rem 10rem;
	}
}

@media only screen and (max-width: 1020px) {

	.LayoutPage .about .col-0 {
		width: 100%;
		padding-right: 0;
		margin-bottom: 5rem;
	}
	
	.LayoutPage .about .col-1 {
		width: 100%;
		border: none;
		border-top: 1px solid #fff;
		padding-top: 5rem;
	}
}

@media only screen and (max-width: 650px) {
	.LayoutPage .about .section-block {
		padding: 6rem 2rem ;
	}
}

/* Tjänster
========================================================================== */
.services .smalltext-type {
	padding-bottom: 7rem;
	max-width: 90rem;
}

.service-card-wrapper {
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
}

.service-card {
	display: inline-block;
	vertical-align: top;
	width: 31.33%;
	margin: 0 1% 3rem;
	padding: 3rem;
	border-radius: 0.5rem;
	border: 1px solid #dddddd;
	background-color: #fff;
	-webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.service-card:hover {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	text-decoration: none;
}

.LayoutPage .service-card img {
	max-height: 6rem ;
	width: auto;
	margin-bottom: 3rem;
}

.service-card h3 {
	font-size: 2.5rem;
	padding-bottom: 1rem;
}

.service-card p {
	font-size: 1.5rem;
}


@media only screen and (max-width: 1200px) {
	.service-card {
		width: 48%;
	}
}

@media only screen and (max-width: 860px) {
	.service-card {
		width: 100%;
		margin: 0 0 2rem ;
	}
}

@media only screen and (max-width: 500px) {
	.service-card {
		padding: 3rem 2rem;
	}
}


/* Tjänster
========================================================================== */
.hyresforhandling {
	overflow: hidden;
}

.LayoutPage .hyresforhandling .section-block {
	padding-bottom: 23rem;
}

.hyresforhandling p {
    max-width: 90rem;
    margin: 0 auto;
}

.hyresforhandling .btn {
	margin: 3rem 2rem 0 0;
}

.split-wrapper.split-alternative {
    justify-content: space-between;
    z-index: 1;
}

.split-wrapper.split-alternative::after {
    position: absolute;
    content: '';
    display: block;
    z-index: -1;
    width: 80%;
    height: 100%;
    top: 0;
	right: 0;
	background-color:#9AAEBB;
	border-radius: 0.5rem;
}

.split-wrapper.split-alternative * {
	color: #fff;
}

.split-wrapper.split-alternative .split-image {
    width: 40%;
    position: relative;
    top: 10rem;
    border-radius: 0.5rem;
}

.split-wrapper.split-alternative .split-content {
    padding: 10rem 7rem 10rem 0;
}

@media only screen and (max-width: 1100px) {
	.split-wrapper.split-alternative .split-content {
	    padding: 7rem 7rem 7rem 0;
	}
	
	.split-wrapper.split-alternative .split-content {
    	width: 55%;
	}
}

@media only screen and (max-width: 1000px) {
	.split-wrapper.split-alternative .split-image,
	.split-wrapper.split-alternative::after {
		width: 100%;
	}

	.split-wrapper.split-alternative::after {
		height: 60%;
	}

	.split-wrapper.split-alternative .split-content {
		padding: 10rem;
	}

	.hyresforhandling .split-image {
		max-height: 60rem;
	}
	
	.split-wrapper.split-alternative .split-image {
	    top: 4rem;
	}
}

@media only screen and (max-width: 768px) {

	.split-wrapper.split-alternative .split-content {
		padding: 8rem 6rem;
	}
}

@media only screen and (max-width: 630px) {

	.hyresforhandling .section-block {
		padding: 0;
	}

	.split-wrapper.split-alternative::after {
		height: 100%;
		width: 100%;
	}

	.split-wrapper.split-alternative .split-content {
		padding: 4rem;
	}
}


/* ==========================================================================
Underdidor generellt
========================================================================== */
.SubPage .top-section {
	display: none;
}


/* Undersida: "stor" topsektion för "huvudundersidorna"
========================================================================== */
.SubPage .subpage-topsection {
	margin-top: 7.2rem;
	background-color: transparent;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.SubPage .subpage-topsection .section-block {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	padding: 3rem ;
}

.SubPage .subpage-topsection .block-object {
	height: 55rem;
	display: flex;
    justify-content: center;
}

.SubPage .subpage-topsection h1 {
	color: #fff;
	text-align: left;
	padding-bottom: 0;
	font-size: 6rem;
	align-self: center;
}

@media only screen and (max-width:1024px) {
	.SubPage .subpage-topsection .block-object {
    	height: 30rem;
	}

	.SubPage .subpage-topsection h1 {
		font-size: 5rem;
	}
}

@media only screen and (max-width:1020px) {
	.SubPage .subpage-topsection .block-object {
    	height: 40rem;
	}
}

@media only screen and (max-width: 980px) {
	.SubPage .subpage-topsection {
		margin-top: 7.2rem;
		background-color: transparent;
	}
}

@media only screen and (max-width:768px) {
	.SubPage .subpage-topsection h1 {
		font-size: 5rem;
	}
	
	.SubPage .subpage-topsection .block-object {
    	height: 30rem;
	}
}

@media only screen and (max-width:500px) {
	.SubPage .subpage-topsection h1 {
		font-size: 4rem ;
	}
	
	.SubPage .subpage-topsection .block-object {
    	height: 25rem;
	}
}


/* Undersida: "liten" topsektion får "tjänsterna"
========================================================================== */
.EditMode .small-topsection {
	padding-top: 20rem ;
}

.SubPage .small-topsection {
	background-color: #b07754 ;
	padding-top: 7.2rem;
}

.SubPage .small-topsection{
	background-image: url('/assets/images/houses-topsection-brown.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: auto 100%;
}

.SubPage .small-topsection .section-block {
	background-color: rgba(176, 119, 84, 0.4);
}

.SubPage .small-topsection * {
	color: #fff;
}

.SubPage .small-topsection .section-block-wrapper {
	max-width: 130rem ;
}

.SubPage .small-topsection h1  {
	font-weight: 700;
	font-size: 5.5rem;
}

.LayoutPage .small-topsection .col-0 {
	width: 40%;
	padding-right: 3%;
}

.LayoutPage .small-topsection .col-1 {
	width: 60%;
	padding-left: 3%;
}

.small-topsection p {
	font-weight: 400;
}

@media only screen and (max-width:1300px) {
	.SubPage .small-topsection h1  {
		font-size: 5rem;
	}
}

@media only screen and (max-width:1180px) {
	.LayoutPage .small-topsection .col-0,
	.LayoutPage .small-topsection .col-1 {
		padding: 0;
		width: 100%;
	}
}

@media only screen and (max-width:768px) {
	.SubPage .small-topsection h1  {
		font-size: 5rem;
	}
}

@media only screen and (max-width:600px) {
	.SubPage .small-topsection h1  {
		font-size: 4rem;
	}
}

@media only screen and (max-width:500px) {

	.SubPage .small-topsection h1  {
		font-size: 3.5rem;
	}
	
}

@media only screen and (max-width:320px) {

	.SubPage .small-topsection h1  {
		font-size: 3rem;
	}
	
}

/* Undersida: sektion med löptext i 2 kolumner
========================================================================== */
.LayoutPage .sub-text .section-block .section-block-wrapper {
	max-width: 150rem;
}

.sub-text .col-1 {
	padding-right: 3% ;
}

.sub-text .col-2 {
	padding-left: 3% ;
}

.sub-text .small-heading {
	padding-top: 2rem;
	font-size: 2.5rem;
	font-weight: 500;
	color: #333;
	letter-spacing: 0.02em;
}

.sub-text .col-0 .heading-type {
	padding-bottom: 3rem;
	text-align: left;
}

.sub-text .col-0 .heading-type .subheading {
	text-align: left;
}

.sub-text .col-0 .heading-type p {
	max-width: 100rem;
	text-align: center;
	margin: 0 auto;
}


/* gör alla länkar i löptext udnerstrukna */
.SubPage .split-text p a,
.sub-text p a {
	text-decoration: underline;
}

/* om en kolumn börjar med en rubrik ska man ta bort paddingen */
.no-padding {
	padding-top: 0 ;
}


/* lista i löptext */
.SubPage .section-block li:before {
	content: "\f111";
	color: #31566a;
	font-weight: bold;
    display: inline-block;
    width: 1.9em;
    margin-left: -1.2em;
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.2rem;
}

.SubPage .section-block ul {
	list-style: none;
	padding-left: 2rem;
}

.SubPage .section-block li {
	padding-bottom: 10px;
}

@media only screen and (max-width:980px) {
	.LayoutPage .sub-text .col-1,
	.LayoutPage .sub-text .col-2 {
		padding: 0;
		width: 100%;
	}
	
	.sub-text .col-0 .heading-type h2 {
		font-size: 4rem;
		
		text-align: left ;
	}
	
	.sub-text .col-0 .heading-type {
		padding-bottom: 0rem;
	}
	
	.sub-text .col-0 .heading-type p {
		max-width: none;
		text-align: left;
		margin: 0;
	}
	
	.no-padding {
		padding-top: 2rem;
	}
}

@media only screen and (max-width:480px) {
	.sub-text .small-heading {
		font-size: 2.3rem;
		padding-top: 1rem;
		padding-bottom: 2rem;
	}
	
}



/* Accordion med automatiskt stängning
========================================================================== */
.acc-body {
    display: none;
    background: rgba(255,255,255,.8);
    padding: .5rem 1rem;
    margin: 0 0 0 .8rem;
    width: 80%;
	color: #333;
}

.LayoutPage .accordion-wrapper * {
	color: #333;
}

.crc-chevron {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    font-size: 1rem;
    max-width: 10%;
}

.accordion-wrapper {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	padding-top: 4rem;
}

.accordion-title {
    display: flex;
    align-items: center;
	text-transform: none;
	padding-bottom: 0;
	font-weight: 600;
	max-width: 52rem;
	font-size: 1.6rem;
	font-family: 'Playfair Display', serif;
}

.fa-chevron-down {
    font-size: 2rem;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .2s ease-in;
    transition: -webkit-transform .2s ease-in;
    -o-transition: transform .2s ease-in;
    transition: transform .2s ease-in;
    transition: transform .2s ease-in, -webkit-transform .2s ease-in;
    float: right;
    cursor: pointer;
    padding:1.5rem;
}

.acc-head {
    width: 80%;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
	border-bottom: 1px solid #b4b4b4;
 }

.acc-head:nth-child(odd) {
	background: #f8f8f8;
}
 

.acc-body {
    padding: 1.5rem;
	margin: 0;
}

.acc-body .crc-close-anim {
	-webkit-transform: scale(.7);
	-ms-transform: scale(.7);
    transform: scale(.7);
}

.acc-body .close {
    background-color: transparent;
    border: none;
}

.acc-body button, select {
    text-transform: none;
    transform: scale(1);
}


@media only screen and (max-width: 1000px) {
	.accordion-wrapper {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.acc-head {
		width: 100%;
		padding-right: 0;
	}

	.acc-body {
		width: 95%;
	}
}

@media only screen and (max-width: 550px) {
	.acc-head {
		padding: 1rem;
	}

	.accordion-title {
		font-size: 1.4rem;
	}

	.acc-body {
		width: 100%;
		margin: 0;
		padding: 2rem 0;
	}
}


/* ==========================================================================
Undersida: områden
========================================================================== */
.sub-omrade .section-block-wrapper {
	max-width: 140rem ;
}



/* ==========================================================================
Individuella undersidor områden
========================================================================== */


/* ==========================================================================
Undersida: Bostadsrätt
========================================================================== */
.bostadsratt-parallax {
	background-image: url('/assets/images/jurideko-vasastan-2000.jpg');
}


/* ==========================================================================
Undersida: Hyresrätt
========================================================================== */
.hyresforhandling-parallax{
	background-image: url('/assets/images/jurideko-stockholmarkitektur-2000.jpg');
}


/* ==========================================================================
Undersida: Nyproduktion
========================================================================== */
.nyproduktion-parallax {
	background-image: url('/assets/images/jurideko-byggnadsolnedgang-2000.jpg');
}


/* ==========================================================================
Undersida: Kapitaltillskott
========================================================================== */
.kapitaltillskott-parallax {
	background-image: url('/assets/images/jurideko-vitochgronbyggnad-stockholm-2000.jpg');
}


/* Sekiton: längst ner, kontaktpersoner
========================================================================== */
.sub-omrade .kontaktpersoner-section .section-block-wrapper {
	max-width: 120rem ;
}

.LayoutPage .kontaktpersoner-section {
    background-image: url('/assets/images/jurideko-start-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.LayoutPage .kontaktpersoner-section .section-block {
    background-color: rgba(0, 0, 0, 0.7);
}

.LayoutPage .kontaktpersoner-section * {
	color: #fff;
}

.LayoutPage .kontaktpersoner-section .heading-type {
	border-bottom: 1px solid #fff;
	max-width: 120rem;
	margin: 0 auto;
	margin-bottom: 7rem;
}


.kontaktpersoner-section h2 {
	padding-bottom: 7rem;
}

.kontaktpersoner-wrapper {
	/* font-size: 0; */
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.kontaktperson-card {
	text-align: center;
}

.contact-2 .kontaktperson-card {
	width: 50%;
}

.contact-3 .kontaktperson-card {
	width: 30%;
}

.contact-name {
	font-family: 'Playfair Display', serif;
	font-size: 2.5rem;
	padding-bottom: 1.5rem;
}

.kontaktperson-card a {
	text-decoration: none;
	font-size: 1.6rem;
	color: #333;
	font-weight: 400;
}

.kontaktperson-card a:hover {
	text-decoration: underline;
}


@media only screen and (max-width:1000px) {
	.kontaktperson-card {
		width: 100% !important;
		margin-bottom: 3rem;
	}
}



/* ==========================================================================
Undersida: kontakt
========================================================================== */
.subpage-contact .subpage-topsection {
	background-image: url('/assets/images/jurideko-stockholmskyline-2000.jpg');
}

.subpage-contact .footer {
	border-top: 1px solid rgba(211, 211, 211, 0.65);
}


/* Medarbetare
========================================================================== */
.coworker-wrapper {
	font-size: 0;
	display: flex;
	flex-wrap: wrap;	
}

.coworer-card {
	width: 25%;
	display: inline-block;
	vertical-align: top;
}

.coworer-card:hover .image-wrapper .img-text {
	background-color: hsla(201, 37%, 30%, 1);
}

.coworer-card .image-wrapper {
	height: 45rem;
}

.coworer-card .image-wrapper .img-text {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 1.5rem 4rem 1.5rem 2rem;
	background-color: hsla(201, 37%, 30%, 0.7);
	-webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.coworer-card .image-wrapper .img-text * {
	color: #fff;
}

.coworer-info {
	padding: 3rem 0rem 7rem;
}

.coworker-name {
	font-family: 'Playfair Display', serif;
	font-size: 2.4rem;
	padding-bottom: 0;
	font-weight: 600;
}

.coworker-title {
	font-weight: 700;
	/* padding-bottom: 2rem; */
}

.location {
	font-size: 1.5rem;
	text-transform: uppercase;
	color: #6b6b6b;
	letter-spacing: 0.2em;
	/* padding-bottom: 2rem; */
}

.coworer-info .coworker-link {
	line-height: 1;
	padding-bottom: 0;
}

.coworer-info .coworker-link  a:hover {
	text-decoration: underline;
}


@media only screen and (max-width:1370px) {
	.coworer-card {
		width: 33.33%;
	}
}

@media only screen and (max-width:1000px) {
	.coworer-card {
		width: 50%;
	}
}

@media only screen and (max-width:696px) {
	.coworer-card {
		width: 100%;
	}
}

@media only screen and (max-width:320px) {
	.coworer-card .image-wrapper {
		height: 38rem;
	}
}



/* sektion med kartor
========================================================================== */
.split-map {
	padding: 0 !important;
}

.offices .clinic-wrapper {
    border-bottom: 1px dotted #c8c6c6;
    padding-bottom: 5rem;
    padding-top: 5rem;
}

.offices .split-wrapper:first-child { margin-bottom: 4rem; }

.offices .split-wrapper {
    flex-wrap: nowrap;
}

.offices .split-text {
    padding: 0;
}

.offices .split-content {
	padding: 8rem;
} 

.offices .split-content {
    width: 40%;
}

.offices .split-content.split-map {
    width: 60%;
}

.offices .split-content h3 {
	font-size: 1.5rem;
}

.offices .split-content {
    padding-right: 0;
}

.offices .reverse .split-content {
    padding-left: 0;
    padding-right: 8rem;
}


@media only screen and (max-width:1200px) {
	.offices .split-content {
		padding: 6rem 5rem;
	}
}

@media only screen and (max-width:1020px) {
	.offices .split-wrapper.reverse {
		flex-direction: row-reverse;
	}
}

@media only screen and (max-width:1024px) {
	.offices .split-content.split-map,
	.offices .split-content {
		width: 50%;
	}
}

@media screen and (max-width: 1000px) {
	.offices .split-wrapper {
		display: flex;
	}
}

@media only screen and (max-width:900px) {
	.offices .split-wrapper {
		display: block;	
	}
	
	.offices .split-content {
		width: 100%;
		padding: 7rem 0 4rem 0;
	}
	
	.offices .split-content.split-map {
		width: 100%;
	}
	
	.offices .split-content.split-map iframe {
		height: 40rem;
	}
}

@media only screen and (max-width:696px) {
	.offices .split-content {
	    padding: 2rem 0rem;
	    background: transparent;
	}
	
	.offices .split-content.split-map iframe {
		height: 30rem;
	}
}



/* ==========================================================================
Undersida: mer information om medarbetaren
========================================================================== */
.LayoutPage .section-person-info {
	padding-top: 10rem;
}

.section-person-info .section-block-wrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: 130rem;
}

.LayoutPage .section-person-info .col-0 {
	padding: 0rem;
	align-self: center;
	display: flex;
	width: 40%;
}

.section-person-info .col-0  img {
	box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
}

.LayoutPage .section-person-info .col-1 {
	align-self: center;
	display: flex;
	padding-left: 10rem;	
	width: 60%;
}

.section-person-info .col-0 .block-object, 
.section-person-info .col-1 .block-object {
	align-self: center;
}

.person-name {
	font-size: 3rem;
}

.section-person-info a:hover {
	text-decoration: underline;
}

@media only screen and (max-width:1250px) { 
	.LayoutPage .section-person-info .col-1 {
		padding-left: 5rem;
	}
}

@media only screen and (max-width:1024px) { 
	.LayoutPage .section-person-info .col-1 {
		padding-left: 3rem;
	}
}

@media only screen and (max-width:1000px) { 
	.LayoutPage .section-person-info .col-0,
	.LayoutPage .section-person-info .col-1 {
		width: 100%;
		padding: 0;
	}

	.LayoutPage .section-person-info .col-0 {
		margin-bottom: 4rem;
	}

	.section-person-info .col-0 img {
		max-width: 50rem !important;
		width: 100%;
	}
}

/* ==========================================================================
Steg för steg / vanliga frågor
========================================================================== */
.LayoutPage .steps .section-block {
	padding-top: 20rem;
}

.steps .intro {
	text-align: center;
	padding-bottom: 4rem;
}

.steps .fad:after {
	margin-left: -0.4rem;
}

.steps .fad {
	color:#b07754;
	padding-right: 1rem;
}

.steps .bold {
	color: #31566a;
}

.steps .step {
	padding-bottom: 2rem;
}

.acc-body {
	width: 100% !important;
}

@media only screen and (max-width: 550px) { 
	.steps .section-title {
		text-align: left;
	}

	.accordion-title {
		font-size: 1.7rem;
	}

	.acc-body {
		padding: 1rem;
	}
}

/* ==========================================================================
Footer
========================================================================== */
.footer {
	background-color: #fff;
	box-sizing: border-box;
	padding: 0;
	background-image: url('/assets/images/jurideko-buildings-long.png');
	background-position: center bottom;
	background-size: 100% auto;
	padding: 10rem 0;
	position: relative;
}

.footer::after {
	position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
}

.footer .container {
	max-width: none;
	box-sizing: border-box;
	margin: 0 auto;
	padding:0;
	position: relative;
	z-index: 3;
}

.footer .container .footer-wrapper {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

/* font styling */
.footer h2 {
	padding-bottom: 2rem;
	font-size: 4rem;
	color: #333;
	font-weight: 700;
}

.footer h3 {
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
    font-weight: 700;
    padding-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #333;
    font-family: inherit;
	text-align: left;
}

.footer p, 
.footer a,
.footer li {
    font-size: 1.4rem;
    padding: 0;
    font-weight: 400; 
    line-height: 1.6em;
    padding-bottom: 4px;
    color: #333;
    text-decoration: none ;
    letter-spacing: 0.012em;
    text-align: left;
}

.footer a {
	display: inline-block;
}

.footer a:hover {
    color: #9AAEBB;
    text-decoration: underline ;
    cursor: pointer;
}


/* footer top */
.footer .footer-top {
    max-width: 160rem;
    padding: 7rem 4rem;
   	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

.footer-col-top * {
	text-align: left ;
}

.footer-col-top {
	width: 20%;
}

.footer-col-top:first-child {
	width: 25%;
}

/*
.footer-col-top:nth-child(2) {
	width: 32%;
	padding-right: 3rem;
}
*/

.footer-col-top img {
	width: 27rem;
	height: auto;
}

/* footer bottom */
.footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
/* 	background-color: #df7e42; */
	text-align: center;
	width: 100%;
	padding: 2.5rem 2rem 2rem;
	max-width: 160rem;
	margin: 0 auto;
	border-top: 1px solid rgba(55, 55, 55, 0.79);
}

.footer-col-bottom * {
    text-align: center ;
}

.footer-col-bottom p {
    color: #fff;
}

/* WebbEss Stamp  */
.webbess-stamp {
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 1.3rem;
    font-weight: normal;
}

.webbess-stamp img {
    width: 3rem;
    margin-left: 1rem;
}

@media only screen and (max-width: 1320px) {
	.footer-col-top {
    	width: 24%;
	}
	
	.footer-col-top img {
    	width: 23rem;
	}
}

@media only screen and (max-width: 1150px) { 
	.footer-col-top {
		width: 50% ;
		margin-bottom: 2rem;
	}
	
	.footer *,
	.footer-col-bottom:last-child p {
		text-align: center ;
	}
}

@media only screen and (max-width: 800px) {
	.footer {
		padding: 7rem 0 5rem;
		background-position: 10% bottom;
    	background-size: 300% auto;
	}

	.footer .footer-top {
		max-width: 160rem;
		padding: 2rem 2rem 7rem 2rem;
	}
	
	.footer-col-top {
		width: 100% ;
	}
	
	.footer-col-top:nth-child(2) {
		padding-right: 0;
	}
	
	.footer-col-bottom {
		width: 100%;
		margin: 10px 0; 
	}
	
	.footer *,
	.footer-col-bottom:last-child p {
		text-align: center ;
	}
	
	.footer h3 {
		padding-bottom: 10px;
	}

	.footer .footer-bottom {
		min-height: auto;
	}
}