/*
Theme Name: Creative Works Theme
Author: Creative Works Sweden AB
Text Domain:  creativeworks-theme
*/

body{
    color:#4D4D4D;
    background-color: #FCE9D1 !important;
}

#CybotCookiebotDialogPoweredbyCybot, #CybotCookiebotDialogPoweredByText, .CookiebotWidget-main-logo{
    display: none !important;
}
#CybotCookiebotDialogDetailBodyContentCookieContainerButton, span.CybotCookiebotDialogDetailBulkConsentCount{
    color:#383838 !important;
}
.break{
    width:100%;
}


/* Webfont: DIN-Medium */@font-face {
    font-family: 'DIN-Medium';
    src: url('../creativeworks/fonts/DIN-Medium.eot'); /* IE9 Compat Modes */
    src: url('../creativeworks/fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../creativeworks/fonts/DIN-Medium.woff') format('woff'), /* Modern Browsers */
         url('../creativeworks/fonts/DIN-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../creativeworks/fonts/DIN-Medium.svg#DIN-Medium') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: DIN-Light */@font-face {
    font-family: 'DIN-Light';
    src: url('../creativeworks/fonts/DIN-Light.eot'); /* IE9 Compat Modes */
    src: url('../creativeworks/fonts/DIN-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../creativeworks/fonts/DIN-Light.woff') format('woff'), /* Modern Browsers */
         url('../creativeworks/fonts/DIN-Light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../creativeworks/fonts/DIN-Light.svg#DIN-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'DIN-Regular';
  src: url('../creativeworks/fonts/DIN-Regular.eot');
  src: url('../creativeworks/fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
       url('../creativeworks/fonts/DIN-Regular.svg#DIN-Regular') format('svg'),
       url('../creativeworks/fonts/DIN-Regular.ttf') format('truetype'),
       url('../creativeworks/fonts/DIN-Regular.woff') format('woff'),
       url('../creativeworks/fonts/DIN-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DIN-Bold';
  src: url('../creativeworks/fonts/DIN-Bold.eot');
  src: url('../creativeworks/fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'),
       url('../creativeworks/fonts/DIN-Bold.svg#DIN-Bold') format('svg'),
       url('../creativeworks/fonts/DIN-Bold.ttf') format('truetype'),
       url('../creativeworks/fonts/DIN-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html a{
  scroll-behavior: smooth;
}
body .container {
        width: 100%;
        padding-right: 40px;
        padding-left: 40px;
        max-width: 1680px !important;
    }
.container-medium{
    width: calc(100% - 80px) !important;
    max-width: 1420px !important;
    margin-left: auto;
    margin-right: auto;
}
.post-type-archive-case .container-medium,
.page-template-template-blog .container-medium{
    max-width: 1440px !important;
}
.col-md-6{
    float:left;
}
.col-blog-heading{
    padding: 0px 20px 0px 20px;
    width: 100%;
    max-width: 100%;
}
.col-blog-heading h1{
    width: calc(50% - 20px);
    max-width: calc(50% - 20px);
}
body.single-post .img-fluid{
    width: 100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
table td{
    padding:20px 10px;
}
td h5{
    font-size: 1.25rem;
}
.open-popup-link::after{
    content:'';
    background-image: url('https://creativeworks.se/wp-content/uploads/2021/08/CW_pil.svg');
    display: inline-block;
    width:60px;
    height:60px;
    transform: rotate(-90deg);
    position: relative;
    top:18px
}

.cw-video-popup{
    display: block;
    width: calc(100% - 160px);
    margin: 0 auto;
    max-height:calc(100vh - 80px);
}
.video-banner{
    width:100%;
    position: fixed;
    left:0px;
    bottom:0px;
    background: #FCE9D1;
    color:#4D4D4D;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top:20px;
}
.video-banner p{
    font-family: "tt-commons-pro", sans-serif !important;
    font-style: normal;
    font-weight: 600 !important; 
    max-width: 1300px;
    font-size: 13px;
}
.mfp-wrap{
    z-index:2011;
}
.mfp-bg{
    background: #FCE9D1;
    z-index:2010;
}

#cookie-notice{
    z-index:2009 !important;
}
body.home .top-section{
    padding-top:0px !important; 
}
button.navbar-toggler{
    display:none;
}

body.page-template-template-blog .blog-container .container,
body.page-template-template-karriar .blog-container .container
{
    padding-right: 0px;
    padding-left: 0px;
}
.cw-scroll-arrow{
    position: absolute;
    bottom: 0px;
    width: 150px;
    border-bottom: 0px !important;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.cw-scroll-arrow:hover{
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
}
.blog-archive-text{
    padding-bottom:40px;
}
.blog-archive-text img{
    margin-bottom:20px;   
}
.blog-archive-text:nth-child(3n+1){
    margin-left:0px;
}
.blog-archive-text a{
	display: block;
	height:100%;
	float: left;
}

.young-creative-archive-text{
    padding-bottom:40px;
}
.young-creative-archive-text img{
    margin-bottom:20px;   
}
.young-creative-archive-text:nth-child(3n+1){
    margin-left:0px;
}
.young-creative-archive-text a{
	display: block;
	height:100%;
	float: left;
}

.author{
    margin-top:40px;
    padding-bottom: 40px;
}

.author div{
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    align-items: center;
    flex-wrap: wrap;
}
.author div.author-info{
    flex-direction: column;
    align-items: flex-start;
}
.author div.author-info p{
    margin-bottom:10px;
}
.author div.author-info .author-email p{
    margin-bottom:0px;   
}

.author .author-image{
    width:140px;
    height:140px;
    border-radius: 140px;
    margin-right:40px;
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
}
.author .author-image img{
    display: block;
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}
.author p{
    font-size: 14px;
}
.author-email{
    display: block;
    float:left;
    clear:left;
}
.single-post h1{
    margin-bottom:40px;
}

.cw-headline{
    font-size: 48px;
}
.page-template-template-karriar h2{
    font-size: 30px;
}
.page-template-template-karriar .index{
    margin-top: 40px;
}
.page-template-template-karriar .index h2{
    margin-bottom: 20px;
}
.page-template-template-karriar .young-creative-container .index{
    margin-top: 0px;
}


.page-template-template-karriar .young-creative-container{
    margin-top: 6vw;
}

.page-template-template-karriar .first-content-container *,
.page-template-template-karriar .young-creative-container *
{
    max-width: 800px;
}
body{
    scroll-behavior: smooth;
    overflow-x: hidden !important;  
    line-height:1.5;
}

.page-template-template-karriar .young-creative-container h2{
    font-size: 48px;
    line-height: 1.5;
}


body.page-id-5{
    padding-top:0px;
}
*:focus {
outline: none !important;
}
.single-jobb-container h1{
    font-size:48px !important;
}
.single-jobb-container h2{
    position: relative;
    top: -40px;
    max-width: 680px;
}
h2, h2.offer-intro{
    font-size:48px;
}

h2.screen-reader-text{
    display:none !important;
}

.single-post h3{
    font-size: 1.25rem !important;
}

a, a:hover{
    color:#4D4D4D;
    text-decoration: none;
}

a, a p{
    opacity: 1;
    transition: all .1s linear;
}
a:hover, a p:hover{
    opacity: 0.5;
}



#menu-huvudmeny a:hover, #menu-huvudmeny a p:hover{
    opacity: 1 !important;
}
.solid-menu>.container>a:hover, .fixed-top>.container>a:hover, .some-icon a:hover{
    opacity: 1;
}  
p, a, #CybotCookiebotDialogBodyContentText, .CybotCookiebotDialogDetailBodyContentCookieTypeIntro{
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
}
p strong, a strong, #CybotCookiebotDialogBodyContentText strong, .CybotCookiebotDialogDetailBodyContentCookieTypeIntro strong{
    font-weight: 800 !important;
}
p b, a b, #CybotCookiebotDialogBodyContentText b, .CybotCookiebotDialogDetailBodyContentCookieTypeIntro b{
    font-weight: 800 !important;
}

p em, a em, #CybotCookiebotDialogBodyContentText em, .CybotCookiebotDialogDetailBodyContentCookieTypeIntro em{
    font-style: italic;
}
p i, a i, #CybotCookiebotDialogBodyContentText i, .CybotCookiebotDialogDetailBodyContentCookieTypeIntro i{
    font-style: italic;
}


p{
    font-size:1.25rem;
}
p b,
p strong{
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 800 !important;
}

.page-template-template-tjanster .col-md-6:nth-child(even){
    float:right;
}
.page-template-template-tjanst footer{
    margin-top: 0px;
}
.top-section a{
    font-family: 'DIN-Medium', sans-serif;
    display: inline-block;
}

.top-section p a:after{
    display:block;
    width:100%;
    content:'';
    height:2px;
    position:relative;
    background-color:#4D4D4D;
    top:-5px;
}

.single-blog-post-content,
.single-post .container-medium{
    max-width: 1372px !important;
}
.single-blog-post-content > div > p > a{
	display: inline-block;
}
.single-blog-post-content > div > p > a:after{
	display:block;
    content:'';
    height:2px;
    position:relative;
    background-color:#4D4D4D;
    bottom:2px;
}
.text-img-c{
    display: flex;
    gap:60px;
}
.img-c{
    max-width: 687px;
    width: 52.4%;
}
.text-c{
    max-width: 622px;
    width: 47.4%;
}
.top-section p{
    font-size: 1.5625rem;
}
.single-post .top-section .blog-intro p{
    font-size: 1.1875rem !important;
    margin-top:148px;
}
.case-ingress p{
    font-size: 1.25rem;
}
.category-separator p{
    font-size: 1.1875rem;

}
.single-case-intro-container.top-section p,
p.single-blog-post{
    font-size: 1.125rem;   
}
.single-case-intro-container.top-section p.client{
    margin-top:100px;
    margin-bottom:45px;
}

.case{
    overflow:visible;
}

h1, h2, h3, h4, h5, h6, li, p.headline-font, a.headline-font, #cw-menu-mobile li a, #cw-menu-desktop li a, .entry-header, .entry-header a, .entry-header p, footer p, .offer-container a, .filter-buttons, .contact-details *, .single-case-container a span, .hero-headline, .category-separator:before, .category-separator:after, .category-separator p, .post-navigation *, .cw-quotation, p.blog-tags, .case-hover-container p, .case-hover-container a, .case-category-container p, .case-preview-text span, .client, .case-client-item, .tjanst a, .cn-button.bootstrap, #cn-notice-text, .author p, p.some-share-text, a.blog-read-more, .cw-headline, #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonDescription, #CybotCookiebotDialogBodyEdgeMoreDetailsLink, .CybotCookiebotDialogBodyButton, .CybotCookiebotDialogDetailBodyContentCookieContainerButton label, a#CybotCookiebotDialogNavItemLink{
    font-family: "tt-commons-pro", sans-serif !important;
    font-style: normal;
    font-weight: 600 !important; 
}
.filter-buttons{
    text-transform: uppercase;
    font-size: 1.1875rem !important;
}
h6{
    font-size: 1.5rem;
}
.client,
.top-section p,
.case-intro p,
.case-button-container a,
.case-category-container p,
.category-separator:before,
.case-ingress p{
    color:#707070 !important;
}
.case-preview-text span{
    font-size: 0.75rem !important;
}
.case-preview-text h3{
    font-size: 2.1875rem !important;
}
#cw-menu-mobile li a{
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 800 !important;
}

.page-template-template-info li,
.single-post li{
    font-family: 'DIN-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 400 !important;
}
.single-post h3{
    margin-top:20px;
    margin-bottom:10px;
}
.page-template-template-info li b{
    font-family: 'DIN-Bold', sans-serif !important;
    font-style: normal;
}
body footer #footer-bottom .footer-about p, .cookie-link{
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 400 !important;
}
.cookie-link{
    margin-top:10px;
    margin-bottom: 2px;
    text-decoration: underline;
}
.case-client-item{
    color: #fff !important;
    margin:0px;
    font-size: 30px;
    position:relative;
    top:16px;
}
.contact-details *{
    font-size:18px;
    margin:0px;
}

header{
	width:100%;
	height:80px;
    z-index:2001 !important;
    background-color:transparent;
    transition:background-color 400ms ease;
    transition-delay: 0.25s;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    transition: top 0.2s ease-in-out;
    
}
header .container{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    z-index:2001;
    max-width:90%;
    display: flex;
    height:100%;
    align-items: center;
}
#header-logo{
	float:left;
	width:214px;
    padding-bottom:2px;
    padding-right:2px;
}
#header-logo path{
    fill:#4D4D4D;
}
.home #header-logo path, .white-path path{
    fill:#fff;
}
.home .animated-icon2 span{
    background: #fff;
}


#cw-menu-mobile .menu-huvudmeny-container{
    height:100vh;
    background-color:#FCE9D1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-up {
    top: -80px;
}

#menu-huvudmeny, #menu-huvudmeny-1{
	float:right;
	margin-top:36px;
}

#menu-huvudmeny li, #menu-huvudmeny-1 li{
	list-style: none;
	margin-left:20px;
}

#menu-huvudmeny li a, #menu-huvudmeny li a, #menu-huvudmeny-1 li a, #menu-huvudmeny-1 li a, a.tjanst-read-more, a.blog-read-more, a.author-email, a.all-offers-link, a.offers-link{
    position:relative;
}


#menu-huvudmeny li.current_page_item a::after, #menu-huvudmeny li.current-menu-item a::after, a.tjanst-read-more::after, a.blog-read-more::after, a.author-email::after, a.all-offers-link::after, a.offers-link::after{
    content:'';
    display:block;
    position:absolute;
    left:0px;
    bottom:-10px;
    margin:0 auto;
    width:20px;
    height:6px;
    background-color: #4D4D4D;
}

#menu-huvudmeny li.current_page_item a::after, #menu-huvudmeny li.current-menu-item a::after, a.offers-link::after{
    right:0;
}
#menu-huvudmeny li a::after, #menu-huvudmeny li a::after, #menu-huvudmeny-1 li a::after, #menu-huvudmeny-1 li a::after{
    content:'';
    display:block;
    position:absolute;
    left:0px;
    right:0px;
    bottom:-10px;
    margin:0 auto;
    width:20px;
    height:6px;
    opacity:0;
}

#menu-huvudmeny-1 li.current_page_item a::after, #menu-huvudmeny-1 li.current-menu-item a::after{
    opacity:1;
    background-color: #4D4D4D;
    right:0px;
    bottom:-6px;
    width:25px;
    height:8px;
}
a.offers-link::after{
    width:40px;
    height:15px;
    bottom:-40px;   
}

#menu-huvudmeny li a.black-bar::after, #menu-huvudmeny li a.black-bar::after{
    background-color: #4D4D4D;
}
#menu-huvudmeny li a.white-bar::after, #menu-huvudmeny li a.white-bar::after{
    background-color: #fff;
}

#menu-huvudmeny li.current_page_item a::after, #menu-huvudmeny li.current-menu-item a::after{
    right:0;
}

#menu-huvudmeny li a:hover:after, #menu-huvudmeny li a:hover:after{
    opacity:1;
    right:0px;
    transition: all .25s linear;
}

#menu-huvudmeny li.current_page_item a::after, #menu-huvudmeny li.current-menu-item a::after, a.tjanst-read-more::after, a.blog-read-more::after{
    content:'';
    display:block;
    position:absolute;
    left:0px;
    bottom:-10px;
    margin:0 auto;
    width:20px;
    height:6px;
    opacity:1;
}

.btn.blog-read-more{
    color: #4D4D4D !important;
}
a.tjanst-read-more::after, a.blog-read-more::after{
    background-color:#4D4D4D;
}
#menu-huvudmeny li.current_page_item a.black-bar::after, #menu-huvudmeny li.current-menu-item a.black-bar::after{
    background-color: #4D4D4D;
}
#menu-huvudmeny li.current_page_item a.white-bar::after, #menu-huvudmeny li.current-menu-item a.white-bar::after, #menu-huvudmeny li a.white-bar::after, #menu-huvudmeny li a.white-bar::after{
    background-color: #fff;
}
#menu-huvudmeny li.current_page_item a::after, #menu-huvudmeny li.current-menu-item a::after{
    right:0;
}

.container{
    max-width:1200px;
}

.row{
    margin: 0px auto;
}

.container-narrow{
    max-width:680px !important;
    position: relative;
}
.container-wide{
    max-width:1800px !important;
}
.blog-container .container{
    max-width:1600px;
}
.young-creative-container .container{
    max-width:1600px;
}

/* body.page-template-template-karriar .item-container-young-creative.container.container-wide{
    max-width: 1240px !important;
} */

.first-content-container{
    margin-top:6vw;
}

.wrapper{
	z-index:2;
	background-color: #FCE9D1;
	position:relative;
	display:block;
}
.wrapper-contact-start{
    padding-bottom:80px;
}

.wrapper.landing-top{
    background-color: #383838;
}

.top-section{
    padding-top:80px;
}
.top-section h1, .top-section p.single-blog-post{
    margin-bottom:34px;
}
.top-section p{
    /* text-align:center; */
}
.single-blog-post-content{
    margin-bottom:120px;
}
.single-blog-post-content h1, .single-blog-post-content p{
    text-align: left !important;
}

.big-headline{
    /* text-align: center; */
    font-size:5.4375rem;
    line-height:1.0;
}
.case-intro .big-headline,
.blog-intro .big-headline,
.kontakt-intro .big-headline,
.jobb-intro .big-headline,
.story-intro .big-headline,
.tjanster-intro .big-headline{
    margin-top: 90px;
}
.case-header:after{
    content:'';
    width:40px;
    height:15px;
    display: block;
    margin: 0 auto;
    background-image: url('https://creativeworks.se/wp-content/uploads/2019/12/short-line-separator-white.svg');
    margin-top:30px;
    margin-bottom:40px;
}               
.home .crew_headline:before{
    content:'';
    width:40px;
    height:15px;
    display: block;
    margin: 0 auto;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-top:60px;
    margin-bottom:40px;
}


.case{
    margin-top:-40px;
    min-height: 600px !important;
    display:flex !important;
    justify-content: center;
    align-items: center;
    padding-bottom:120px;
    padding-top:80px;
    z-index:2 !important;
    background-color: #383838;
}
.case h2, .case p{
    color:#fff;
}


.case .container-narrow{
    top:80px;
}

.case-template-case-top .col-md-6.case-media-container video{
    /* transform: translate(-50%,-53%) !important; */
    width:100%
}


.offers, .case{
    text-align:center;
}
.offers{
    z-index:4 !important;
    padding-bottom:40px;
}



.case-container{
 /*   height:4000px !important;*/
}
.case-hover-container{
    padding:30px 30px;
    top:0px;
    left:0px;
    background-color: rgba(252,217, 201, 0.8);
    text-align: center;
    position:absolute;
    height:100.2%;
    width:100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.case-hover-container a{
    font-size:22px;
    margin-top:26px;
}
.case-hover-container a:before{
    content:'';
    width:30px;
    height:10px;
    display: block;
    margin: 0 auto;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-top:40px;
    margin-bottom:20px;
}

.case-hover-container:hover{
    opacity: 1;
}

.page-template-template-story img{
    width:100%;
    display:block;
}
.page-template-template-tjanst .tjanster-intro, .page-template-template-karriar .jobb-intro{
    
}
.page-template-template-tjanst .tjanster-intro{
    margin-bottom: 120px;
}
.page-template-template-tjanst .tjanster-intro h1:after, .page-template-template-karriar .jobb-intro h1:after{
    margin:0px !important;
}
.page-template-template-tjanst .tjanst, .page-template-template-karriar .jobb{
    margin-top:40px;
}

.page-template-template-tjanst .tjanst a, .page-template-template-karriar .jobb a{
    font-size:18px;
}

.story-container{
    display: flex;
    align-items: top;
    margin-bottom: 2rem;
    gap:40px;
}
.story-col{
    width:50%;
}

.filter-button-container{
    margin:40px 0 80px;
}
.nav-links{
    height:40px;
}
.nav-links .nav-next{
    float:right;
}
.nav-links .nav-previous{
    float:left;
}
.filter-outer-container, .blog-category-outer-container, .case-category-outer-container{
    text-align: right;
    position: relative;
    z-index: 2;
}
.single-case .case-category-outer-container{
    text-align: left;
}
.filter-container, .case-category-container{
    position: relative;
    display: inline-block;  
    margin-top:30px;  
    margin-bottom:30px;
}
.post-type-archive-case .filter-container{
    margin-bottom:0px;
}
.filter-buttons{
    padding:0px 5px 0 0;
    font-size: 20px;
    display:inline-block !important;
}
.filter-buttons:after{
    content:"/";
    padding-left:5px;
}
.last-button{
    padding-right:0px;
}
.last-button:after{
    content:"";
    padding-left:0px;
}
p.blog-tags{
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom:4px !important;
    margin-top:20px !important;
}

.item-container-case .item, .item-container-blog .item, .item-container-young-creative .item{
    width:calc(33.333333% - 26px);
    padding:54px 0px;
}

.item-container-case, 
.item-container-blog{
  margin: -13px;
}

.item-container-case .item,
.item-container-blog .item {
  margin: 13px;
}

@media (min-width: 992px){
    .item-container-young-creative .col-lg-4 {
        -ms-flex: 0 0 49%;
        flex: 0 0 49%;
        max-width: 49%;
    }
}

.single-case-intro-container{
    background-color:#FCE9D1;
}

.single-case-intro-container p{
    display:  block;
    max-width:895px !important;
}

.single-case-intro-container > .container p:nth-child(2){
	margin:0px 0px 40px;

	font-size:26px;
}

.single-case.container{
    width:100%;
    max-width: 100%;
}

.single-case-container{
    display:block;
    position:relative;
    min-height:400px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case-preview-text{
    position:absolute;
    width: calc(100% - 50px);
    max-width:332px;
    top:-40px;
    left:20px;
    right:30px;
    background-color: #FCE9D1;
    padding: 5px 20px;
    z-index: 2;
}

.case-fullwidth{
    width:100%;
}

.case-top-row{
    align-items: center;
}

.case-column-text p{
    text-align: left !important;
}
.case-media-container, .double-image > div{
    position:relative;
    min-height:400px;
    overflow: hidden;
}
.double-image{
	padding:0px;
}
.double-image > div:nth-child(1){
	margin-bottom:24px;
}
.case-media-container video{
    position: absolute;
    top: 50%;
    bottom:0;
    left:0;
    right:0;
    transform: translateY(-50%);
    object-fit: cover;
}
.case-media-container video{
    display: block;
    width:100%;
}
video {
    border-bottom: 1px solid transparent;
}


.case-media-container img, .case-media-container video{
	display: block;
	position:absolute;
	height: auto;
	width:100%;
	min-height:100%;
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
    object-fit: cover;
}
.single-case.postid-356 .case-media-container.high-media video{
    object-fit: contain;   
}
.col-md-12.case-media-container{
	min-height:600px;
	height:50vh;
}
.container .col-md-12.case-media-container{
	margin:0px 12px;
	flex:0 0 calc(100% - 24px);
}
.col-md-8.case-media-container{
	margin:0px 12px;
	flex:0 0 calc(66.666% - 24px);
}
.col-md-6.case-media-container{
	margin:0px 12px;
	flex:0 0 calc(50% - 24px);
}
.col-md-4.case-media-container{
	margin:0px 12px;
	flex:0 0 calc(33.333% - 24px);	
}


.col-md-6.case-media-container img, .col-md-6.case-media-container video, .col-md-4.case-media-container img, .col-md-4.case-media-container video{
	height:100%;
}
.col-md-6.case-media-container img, .col-md-6.case-media-container video{
    /* min-width:580px; */
    height:100%;
}

.col-md-4.case-media-container img, .col-md-4.case-media-container video{
    min-width:380px;
    height:100%;
}

.col-md-6.case-media-container div{
	display: block;
	float:left;
	position:relative;
	height:50%;
	width:100%;
}
.col-md-6.case-media-container.high-media div{
	height:100%;
    overflow: hidden;
}



.blog-container .item-container, .young-creative-container .item-container, .case-wrapper .item-container{
    margin-top:60px;
}
.case-wrapper{
    padding-top:40px;
}


.blog-container .item-container .mb-4, .blog-container .item-container .my-4,
.young-creative-container .item-container .mb-4, .young-creative-container .item-container .my-4
{
    margin-bottom:3.0rem !important;
}

.row{
    width:100%;
}

.blog-container .item-container .row{
    display:flex;
    flex-direction: row;
    align-items: center;
}
.young-creative-container .item-container .row{
    display:flex;
    flex-direction: row;
    align-items: center;
}

.blog-container, .case-container{
    padding-top:60px;
}
.blog-container.young-creative{
    padding-top:0px;
}


.blog-container .container{
    z-index:2;
}
.young-creative-container .container{
    z-index:2;
}

.cw-quotation{
    position: relative;
    top: -5px;
}

.blog-archive-text p{
    font-size: 16px;
}
.young-creative-archive-text p{
    font-size: 16px;
}


.blog-archive-text .cw-quotation:nth-child(2){
    padding-right:10px;
}
.blog-archive-text .cw-quotation:nth-child(4){
    padding-left:10px;
}

.young-creative-archive-text .cw-quotation:nth-child(2){
    padding-right:10px;
}
.young-creative-archive-text .cw-quotation:nth-child(4){
    padding-left:10px;
}

.top-section .container h1:after, 
.page-template-template-tjanst .container h1:after, 
.page-template-template-tjanster .container h2:after, 
.page-template-template-karriar .container h1:after,
.single-case h1:after,
.page-template-template-story .container-medium h1:after,
.page-template-template-tjanster .container-medium h1:after,
.page-template-template-karriar .container-medium h1:after,
.page-template-template-blog .container-medium h1:after,
.page-template-template-kontakt .container-medium h1:after{
    content:'';
    width:60px;
    height:10px;
    display: block;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-bottom:45px;
    margin-top:35px !important;
}
.single-blog-post-content h1.big-headline::after{
    content:'';
    width:60px;
    height:10px;
    display: block;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-bottom:80px;
    margin-top:52px !important;
}

.page-template-template-tjanst .container:after, .page-template-template-karriar .container:after{
    content:'';
    background-image:none;
}


.tjanst p{

}

.tjanst-list p, .tjanst-list, .jobb-list p, .jobb-list, .blog-read-more{
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 800 !important;
}

.tjanst-background{
    height:70vh;
    min-height: 700px !important;
    background-position: center center;
    background-size: cover;
}

.page-template-template-tjanster .top-section .container:after{
    display:none;
}
.blog-archive-text a:after, .young-creative-archive-text a:after, .top-section .container:after{
    margin-top:20px;
}

.page-template-template-tjanster .container h2:after{
    margin-top:10px;   
}
.top-section .big-headline,
body .case-ingress{
    max-width: 840px !important;
}
.top-section .big-headline{
    line-height: 1;
}
.top-section .big-headline:after{
    margin-top:60px !important;
    margin-bottom:0px;
}
.blog-container h2, .cw-quotation{
    display:inline-block;
    font-size:36px;
    float: left;
}
.blog-container p{
    clear:both;
}

.young-creative-container h2, .cw-quotation{
    display:inline-block;
    font-size:42px;
    float:left;
}
.young-creative-container p{
    clear:both;
}

.blog-read-more{
    padding:0px !important;
    font-size: 16px;
    font-family: 'DIN-Bold', sans-serif !important;
    font-weight:400 !important;
}

.case-hover-category-container{
    display: flex;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}

.category-separator{
    text-align: center;
    display:inline-block;
    height:44px;
    margin-right:5px;
}
.category-separator:before{
    content:'#';
}
.category-separator:after{
    content:' ';
    display: inline-block;
    margin-right:4px;
    font-size:20px;
    line-height: 1px;
}
.category-separator:last-child:after{
    content:'';
    display: inline-block;
    margin-right: 4px;
    font-size: 20px;
    line-height: 1px;
}
.category-separator p{
    display:inline-block;    
}

.offer-intro{
    left: 0px;
    right: 0px;
    padding-top: 100px;
}
.offer-intro.container-narrow{
    margin-left: auto;
    margin-right: auto;
}
.offer-intro p, p.cw-landing-case{
    font-size:20px  ;
}
.offer-container div{
    margin-bottom:60px;
}
.offer-container a{
    font-size:32px;
}

p.offer-text{
    font-size:22px;
}

#tjanster .col .offer-text:after{
    content:'';
    width:40px;
    height:15px;
    display: block;
    margin: 0 auto;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-top:60px;
}

.scrollbox-wrapper {
    width: 100vw;
    overflow: hidden
}

.scrollbox {
    position: relative;
    overflow: hidden
}

.scrollbox__inner {
    position: relative;
    z-index:2;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    will-change: transform;
}

.scrollbox__inner .entry-header{
    position:absolute;
    top:14px;
    left:10%;
    z-index:2;
}

.entry-header a, .entry-header p{
    font-size:22px;  
    color:#fff; 
}

.case-title{
    display: block;
    width:65%;

}

.entry-header a.case-title, .entry-header p.case-title{
    font-size:70px;
    line-height:74px;
}

.scrollbox__item,  .scrollbox__item_inner{
    width: calc(100vw);
    height: 100vh;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    background-color: #383838;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
.scrollbox__item_inner{
    overflow:hidden;
    background-position: center center;    
    height:calc(100vh);
    top:100px;
}


.scrollbox__item img, .scrollbox__item svg, .scrollbox__item video {
    display: block
}

section.sidescroll{
	height: calc(100vh * 4);
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, .container {
display: block;
position:relative;
}

.cw-container{
    position:relative;
    display:block;
    height:auto;
    z-index:1;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
    padding-right: 20px;
    padding-left: 20px;
}

.page-template-template-blog .col-lg-4{
    padding-right: 0px;
    padding-left: 0px;   
}
.page-template-template-karriar .col-lg-4{
    padding-right: 0px;
    padding-left: 0px;   
}
.item-container-young-creative{
    margin: -30px;
}
.item-container-young-creative .young-creative-archive-text{
    margin: 30px;
}
.young-creative-archive-text{
    width:calc(50% - 60px);
}

/*Menu*/


.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}


.animated-icon2 span:nth-child(1) {
    top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
    top: 10px;
}

.animated-icon2 span:nth-child(4) {
    top: 20px;
}

.animated-icon2.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}

.animated-icon2 span {
background: #4d4d4d;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}

#cw-menu-mobile{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background-color:#9ee0d9;  
    top:0px;
    left:0px;
    z-index:2000;
    text-align: center
}

#cw-menu-mobile li{
    margin:20px 0px;
}

#cw-menu-mobile li a{
    font-size: 60px
}

.solid-menu{
     background-color: #FCE9D1 !important;
}

.navbar-toggler{
    z-index:2001;
}

.header-background{
    background-color:#FCE9D1;
}

button.second-button{
    right:0px;
    top:20px;
    position:absolute;
}

button.second-button-open{
    right:0px;
    top:52px;
    position:absolute;
}

#cw-menu-desktop{
    width:auto;
    margin-left: auto;
}


#menu-huvudmeny, #menu-huvudmeny-1{
    display:inline-block;
    margin:0px auto 0px;
    position:relative;
    float:left;
    width:100%;
    padding:0px;
}
#menu-huvudmeny li{
    display: inline-block;
    margin-left:20px;
    margin-right:20px;
}
#menu-huvudmeny li:last-child{
    margin-right:0px;
}
#menu-huvudmeny-1 li{
    margin:0px 0px 5px 0px !important;
}
#menu-huvudmeny li a{
    color:#4D4D4D;
    text-decoration: none;
    padding:0px;
    margin: 0px;
    font-size:19px;
    letter-spacing: 2.84px;
    font-family: "tt-commons-pro", sans-serif !important;
    font-weight: 800 !important;
    font-style: normal;
    text-transform: uppercase;
}
.case-button-container a{
    letter-spacing: 2.84px;
}

body.home #menu-huvudmeny li a{
    color:#fff;
}

/*Slanted Menu*/


/* End Menu*/

/*Landing page*/

h1.landingpage-headline{
    font-size: 50px !important;
    margin-bottom:40px;
}

.cw-landing-ingress{
    padding:0px 40px;
    text-align:center;
    font-size:50px;
    line-height:60px;
    max-width:80%;
    display:block;
    margin:0 auto;
    color:#4D4D4D;
    z-index:2;
    display:none;
    overflow:visible;

}

.cw-landing-ingress:after{
    content:'';
    width:40px;
    height:15px;
    display: block;
    margin: 0 auto;
    background-image: url('https://creativeworks.se/wp-content/uploads/2019/12/short-line-separator-white.svg');
    margin-top:60px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.start-ingress .container{
    position:fixed;
    top:42vh;
}

video{
    z-index:-1;
}

.tjanster-intro, .jobb-intro{
    max-width:1200px;
}
.tjanster-intro h1, .tjanster-intro p, .jobb-intro h1, .jobb-intro p{
    text-align: left !important;
}
.tjanster-intro p, .jobb-intro p, .jobb-intro h2{
    font-family: 'DIN-Medium', sans-serif;
    font-weight: 200;
    max-width:800px;
}
.page-template-template-karriar .jobb,
.page-template-template-info .information{
    max-width:800px !important;
    width:100% !important;
	display:flex !important;
	flex-direction:column !important;
	padding-top:40px;
}

.page-template-template-karriar .jobb .tjanst-list{
	display:flex !important;
	flex-direction:column !important;
}
.jobb,
.information{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 3;
}
/*  Contact page   */

.kontakt-intro-container, 
.case-intro-container, 
.blog-intro-container, 
.single-case-intro-container, 
.story-intro-container, 
.tjanster-intro-container, 
.jobb-intro-container,
.single-jobb-intro-container{
    height:auto;
    width:100%;
    display:block;
    clear:both;
    position:relative;
}



/* .kontakt-intro-container, .story-intro-container, .jobb-intro-container, .single-jobb-intro-container{
    background-color:#FCE9D1;
}
.jobb-intro-container.karriar-top-color{
    background-color:#eae9e9;
}
.case-intro-container{
    background-color:#FCE9D1;
}
.blog-intro-container{
    background-color:#FCE9D1;
    z-index:1;
}
.tjanster-intro-container{
    background-color:#FCE9D1;
    z-index:1;
} */
/* Slanted classes */

.slant-top-left:before{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:inherit;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    transform-origin: top left;
    transform: skewY(-4deg);
    z-index:-1;
}
.slant-top-right:before{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:inherit;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    transform-origin: top right;
    transform: skewY(4deg);
    z-index:-1;
}
.slant-bottom-right:after{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:inherit;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    transform-origin: top right;
    transform: skewY(-4deg);
    z-index:-1;
}

.slant-bottom-left:after{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:inherit;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    transform-origin: top left;
    transform: skewY(4deg);
    z-index:-1;
}




/* -- -- -- -- -- -- */

.slanted-padding{
    padding:100px 40px 200px;
}

.hero-headline{
    font-size:120px;
    line-height:120px;
    top:0px;
    color:#fff;
    position:fixed;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index:3;
}

.hero-headline p{
    margin-top:20px;
}

.hero-headline p, .hero-headline a{
    font-family: "tt-commons-pro",sans-serif !important;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 32px;
}
.hero-headline p.se-hela{
    position: absolute;
    width: 300px;
    bottom: 90px;
    text-align: center;
}

.hero-headline a{
    /* border-bottom: 6px solid #fff !important;  */
    color:#fff !important;
}
.hero-headline a#cw-scroll-arrow{
    border-bottom: 0px solid #fff !important; 
}

.hero-headline span{
    text-align: center;
    display: block;
    margin: 0 auto;
    width:1200px;
}

.hero-start{
    height:100vh;
    min-height:700px;
    display: flex;
    z-index:0;
    justify-content: center;
    align-items: center;
    position:fixed;
    width:100% !important;
    top:0px;
    left:0px;
}

.video-overlay, .image-overlay{
    position:absolute;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
}
.video-overlay{
	position:fixed;
}
.video-overlay{
    display: none;
}
.image-overlay{
    top:100px;
    z-index:1;
}


.start-ingress{
    z-index:1;
    margin-top:100vh;
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
 
}

.mobile-hero-video{
    display: none;
}
.desktop-hero-video{
    display: block;
}

#landing-video{
    position: absolute;
    /* top: 0;
    left: 0; */
    min-width: 100%; 
    min-height: 100%;
}
.crew.container{
    padding-top: 80px;
    padding-bottom:40px;
}
.crew_headline{
    display:block;
    width:100%;
}
.crew_headline h2{
    text-align:center;
    margin-bottom:80px; 
}

.contact-container{
    position:relative;
}
.contact-container:hover .contact-img-c img{
    transform: scale(1.1);
}
.contact-img-c{
    width: 100%;
    aspect-ratio: 333 / 324;
    overflow: hidden;
}
.contact-img-c img{
    transition: transform 300ms ease-out;
}

.contact-info{
    position:relative;
    top:-45px;
    left:15px;
}
.contact-name{
    display:block;
    float:left;
    background-color: #FCE9D1;
    padding:5px 15px 0px 10px;
    clear:both;
}
.contact-name:after{
    content:'';
    width:30px;
    height:10px;
    display: block;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-bottom:20px;
    margin-top:20px;


}
.contact-details{
    padding:0 20px 0 10px;
    display: block;
    float:left;
    clear:both;
}

footer{
    width: 100%;
    /* min-height: 1000px; */
    padding-top:120px;
    z-index: 2;
    margin-top:120px;
}

.home footer{
    background-color:#fff;
    margin-top:0px;
}

.page-template-template-tjanst footer{
    height:480px;
}

.some-container{
    display: flex;
    flex-direction: column;
    position:relative;
    z-index:2;
}
.page-template-template-kontakt .some-container{
    display: flex;
    flex-direction: row;
    position:relative;
    z-index:2;
}
.page-template-template-kontakt footer .some-container{
    display: flex;
    flex-direction: column;
    position:relative;
    z-index:2;
    justify-content: flex-start;
}
.some-container .some-icon{
    width:80px;
    height:80px;
    padding:10px;
    transition: all .2s ease-in-out;
}
.some-container .some-icon:nth-child(1){
    margin-left: -10px;
}
.page-template-template-kontakt .some-container .some-icon:nth-child(1){
    margin-left: 0px;
}
.page-template-template-kontakt footer .some-container .some-icon:nth-child(1){
    margin-left: -10px;
}
.footer-logo svg path{
    fill: #4D4D4D !important;
}
.some-container .some-icon:hover{
    transform: scale(1.1);
}
.some-container .some-icon img{
    width:100%;
    height:auto;
}
.some-icon-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
}

#footer-bottom{
    /* position:absolute; */
    bottom:0px;
    width:100%;
    background-color: #FCE9D1;
    padding-top:60px;
    padding-bottom:100px;
}
.slant-top-right-footer:before{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:inherit;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    transform-origin: top left;
    transform: skewY(-4deg);
    z-index:0;
}
.footer-intro{
    margin-bottom:40px;
}
.footer-intro p{
    font-size: 24px;
    line-height: 32px;
}
.footer-contact-tel p{
    margin-bottom:0px;
}
.footer-contact{
    margin-bottom:30px;
}
.footer-contact p, .footer-address p{
    font-size:20px;
    line-height:28px;
}

.cn-button.bootstrap{
    text-align: center;
    font-style: normal;
    vertical-align: middle;
    cursor: pointer;
    color: #383838;
    background-color: #9ee0d9 !important;
    background-image:none !important;
    border:0px;
    border-radius: 0px;
    padding: 5px 15px;
    font-size: 12px;
    text-decoration: none;
    -webkit-border-radius: 3px;
}

footer h3:after{
    content:'';
    width:30px;
    height:6px;
    display: block;
    background-image: url('https://creativeworks.se/wp-content/uploads/2025/01/short-line-separator-2.svg');
    margin-bottom:14px;
    margin-top:14px;
}

footer .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
footer .container > div{
    max-width: 373px;
    margin-right: 40px;
}
footer .container > div:nth-child(3){
    margin-right: 0px;
}

footer .bottom-container{
    position: relative;
    border-top: 1px solid #4D4D4D;
    margin-top: 80px;
    padding-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

footer .bottom-container .footer-logo{
    width: 240px;
    position: relative;
    margin-bottom: 60px;
}

.error-404-container{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap:40px;
    width:calc(100% - 80px);
    max-width: 1200px;
    margin:0px auto;
    position: relative;
    top:56px;
}
.error-404-container > div{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.error-404-text,
.error-404-text a{
    font-family: "tt-commons-pro", sans-serif !important;
    font-size: 38px;
    font-weight: 600!important;
}
.error-404-text span,
.error-404-text span a{
    font-size: 30px;
}
.error-404-image{
    max-height:500px;
}

@media only screen and (max-width: 1600px) {
    .item-container-case .item, .item-container-blog .blog-archive-text, .item-container-young-creative .young-creative-archive-text{
        width:calc(50% - 26px);
        max-width:calc(50%);
    }
    .page-template-template-karriar .item-container-young-creative .young-creative-archive-text{
        width:calc(50% - 60px);
        max-width:calc(50%);
    }
        body .container, body.single .blog-container .container, body.single .young-creative-container .container {
        padding-right: 40px;
        padding-left: 40px;
    }
    
}


@media only screen and (max-width: 1200px) {
    
    body .crew.container {
        padding-right: 40px;
        padding-left: 40px;
    }
    .row{
        margin-left:0px;
    }

    header .container {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
        margin-right: auto;
        margin-left: auto;
    }
    #menu-huvudmeny li{
        margin-left: 10px;
        margin-right: 10px;
    }
    .hero-headline span{
        width:auto;
    }
    .error-404-container{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap:40px;
        width:calc(100% - 80px);
        max-width: 1200px;
        margin:0px auto;
    }
    .error-404-container > div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .error-404-text{
        font-family: "tt-commons-pro", sans-serif !important;
        font-size: 30px;
        font-weight: 600!important;
        margin-top:80px;
        text-align: center;
        line-height:1.4;
    }
    .error-404-text span,
    .error-404-text span a{
        font-size: 22px;
    }
    .error-404-image{
        width:auto;
    }
}

@media only screen and (max-width: 1100px) {
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 16px;
    }
}

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

    #karriar-row {
        margin-bottom: 125px;
    }

    #tjanst-last-row {
        margin-bottom: 75px;
    }

    body .crew.container {
        padding-right: 40px;
        padding-left: 40px;
        margin-bottom: 1.5em;
    }

    button.navbar-toggler{
        display:block;
    }
    #cw-menu-desktop{
        display:none;
    }
    
    .single-post h1{
        font-size:52px !important;
    }
    .container-narrow{
        width:70%;
    }
    .cw-headline{
        font-size: 38px;
    }
    .page-template-template-tjanst footer{
        margin-top: -160px;
    }
    footer {
        min-height: 1280px;
    }
    footer .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
    }
    footer .container > div {
        margin-left: auto;
        margin-right: auto !important;
        margin-bottom: 60px;
    }
    footer .container > div:nth-child(3) {
        padding: 20px;
    }
    footer h3:after {
        margin-right: auto;
        margin-left: auto;
    }
    footer .bottom-container {
        margin-top: 0px;
        padding-top: 80px;
    }
    .some-icon-container{
        justify-content: center;
    }
}

@media only screen and (max-width: 1000px) {
    .hero-headline{
        font-size:85px;
        line-height:85px;
    }
    .crew .contact-container.col-md-4{
        max-width:50% !important;
        flex: 0 0 50%;
    }
    .item-container-case .item, .item-container-blog .blog-archive-text, .item-container-young-creative .young-creative-archive-text{
        width:calc(100%);
        max-width:calc(100%);
    }
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 18px;
    }
    .item-container-case .item, 
    .item-container-blog .item,
    .item-container-case, 
    .item-container-blog{
        margin:0px;
    }
}

@media only screen and (max-width: 850px){
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 16px;
    }
}

@media (min-width: 768px){
    .page-template-template-tjanster .col-md-6, .page-template-template-karriar .col-md-6{
        max-width: 45%;
    }
}
@media (max-width: 767px){
    body .container, body.single .blog-container .container, body.single .young-creative-container .container {
        padding-right: 10px;
        padding-left: 10px;
    }
    body .jobb-intro-container .container{
        padding-right: 30px;
        padding-left: 30px;
    }

    /*anpassning inlead case*/
    .postid-2873 .col-md-12.case-media-container{
        min-height:auto !important;
        height: auto !important;
        aspect-ratio: 2 / 1.5 !important;
    }
    .container-medium {
        width: calc(100% - 40px) !important;
    }
    .text-img-c{
        flex-direction: column;
    }
    .text-img-c .img-c,
    .text-img-c .text-c{
        width:100%;
    }
    .top-section .container h1:after, 
    .page-template-template-tjanst .container h1:after, 
    .page-template-template-tjanster .container h2:after, 
    .page-template-template-karriar .container h1:after,
    .single-case h1:after,
    .page-template-template-story .container-medium h1:after,
    .page-template-template-tjanster .container-medium h1:after,
    .page-template-template-karriar .container-medium h1:after,
    .page-template-template-blog .container-medium h1:after,
    .page-template-template-kontakt .container-medium h1:after{
        width:45px;
        height:7px;
    }
    .single-blog-post-content h1.big-headline::after{
        width:45px;
        height:7px;
        margin-bottom: 50px;
        margin-top: 40px !important;
    }
    .single-post .top-section .blog-intro p{
        font-size: 1rem !important;
        margin-top:80px
    }
}
@media only screen and (max-width: 752px) {
    /* #landing-video{
        display:none;
    } */
     .postid-2873 .row.row-eq-height.pb-4 .col-md-8.case-media-container{
        aspect-ratio: 2 / 1.5 !important;
        min-height: auto;
     }
     .postid-2873 .col-md-6.case-media-container.double-image div:first-child{
        height:auto !important;
        min-height: auto !important;
        aspect-ratio: 1/1 !important;
     }
    .open-popup-link::after{
        width:40px;
        height:40px;
        top:12px
    }
    .cw-video-popup {
        width: calc(100% - 40px);
        }
    .hero-headline p, .hero-headline a{
        font-size: 24px;
    }
    /* .hero-start{
        background-image:url('https://cw.creativebox.se/wp-content/uploads/2020/03/cw-hero-image.jpg');
        background-size: cover;
        background-position:center center;
    } */
    .blog-archive-text, .young-creative-archive-text{
        margin-left:0px;
    }
   .post-template-default.single-post .col{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .blog-container .item-container, .young-creative-container .item-container, .case-wrapper .item-container{
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    .blog-container, .young-creative-container, .case-container{
        padding-top:0px;
    }
    .col-blog-heading h1 {
        width: 100%;
        max-width: 100%;
    }
    .col-blog-heading ~ .col.col-md-6 p:first-of-type{
        margin-top: 40px;
    }
    
    #header-logo{
        width:170px;
    }
    .big-headline, #cw-menu-mobile li a{
        font-size: 40px !important;
    }
    h2{
        font-size: 30px;   
    }
    .single-jobb-container h1{
        font-size:30px;
    }
    p{
        font-size: 16px;
    }
    .crew .contact-container.col-md-4{
        max-width:100% !important;
        flex: 0 0 100%;
    }
    .hero-headline {
        font-size: 40px;
        line-height: 40px;
    }
    .hero-headline p.se-hela{
        bottom: 110px;
    }
    .case-client-item{
        font-size:20px;
    }
    .scrollbox__inner .entry-header{
        top:30px;
    }
    .scrollbox__item,  .scrollbox__item_inner{
    width: 100vw;
    }
    .entry-header a.case-title, .entry-header p.case-title{
        font-size: 36px;
        line-height:36px;
    }
    .footer-contact p, .footer-address p {
        font-size: 24px;
        line-height: 34px;
    }

    h1.landingpage-headline{
        font-size: 32px !important;
        max-width:500px;
        display: block;
        margin:0 auto;
        margin-bottom:40px;
}
    .cw-landing-ingress{
        padding:0px !important;
        font-size: 26px;
        line-height:36px;
    }
    .case-top-row{
    	margin-bottom:0px;
    	/* padding-bottom:0px !important; */
    }
	.col-md-12.case-media-container{
		min-height:600px;
		height:50vh;
	}
	.col-md-8.case-media-container, .col-md-6.case-media-container, .col-md-4.case-media-container{
		margin:0px 0px 24px;
		flex:0 0 100%;

	}
	/*.col-md-6.case-media-container{
		margin:0px 12px;
		flex:0 0 calc(50% - 24px);
	}
	.col-md-4.case-media-container{
		margin:0px 12px;
		flex:0 0 calc(33.333% - 24px);	
	}    
*/
    .case-template-case-top .col-md-6.case-media-container video{
        width:100%;
    }
    .col-md-6.case-media-container img, .col-md-6.case-media-container video, .col-md-4.case-media-container img, .col-md-4.case-media-container video{
        width: 100%;
    }
    .case-media-container.high-media{
        height:800px;
    }
    .last-button:after{
        content:"";
    }

    .cw-container.hero-start.top-section{
        min-height: 10px;
        height: calc(100vw + 80px);
    }
    .cw-container.hero-start.top-section #landing-video{
        height: 100%;
    }
    .start-ingress{
        margin-top: 100vw;
    }
    .hero-headline p.se-hela{
        top: calc(100vw + 75px);
    }

    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 18px;
    }

    body.home{
        background-color: #383838;
    }
    .cw-container.hero-start.top-section #landing-video{
        background-color: #383838;
    }
    .home header{
        background-color: #383838;
    }
    .home .cw-container.hero-start.top-section{
        height: calc(100dvh - 75px);
        margin-top: 75px !important;
        align-items: center;
    }

    .home .cw-container.hero-start.top-section.show-full-width{
        height: auto;
    }
    .home .cw-container.hero-start.top-section.show-full-width #landing-video{
        position: static;
    }

    .home .start-ingress {
        margin-top: calc(100dvh + 30px);
    }

    .mobile-hero-video{
        display: block;
        width: 100%;
        height: auto;
    }
    .desktop-hero-video{
        display: none;
    }
    .top-section p{
        font-size: 1.25rem;
    }
    .page-template-template-karriar .item-container-young-creative .young-creative-archive-text {
        width: 100%;
        max-width: 100%;
    }
}

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

    body .crew.container {
        padding-right: 40px;
        padding-left: 40px;
        margin-bottom: 2.75em;
    }

    .blog-container h2, .young-creative-container h2{
        font-size: 26px !important;
    }
    .hero-headline p, .hero-headline a{
        font-size: 18px;
    }
    .single-post h1{
        font-size:24px !important;
    }
    .filter-buttons{
        font-size: 1rem !important;
    }
    
    .last-button:after{
        content:"";
    }
    .hero-headline p, .hero-headline a {
        display: block;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        font-size: 20px !important;
    }
    .hero-headline p.se-hela{
        box-sizing: border-box;
        width: 100%;
        padding: 0px;
    }
    .hero-headline p.se-hela a{
        box-sizing: border-box;
        width: 100%;
        padding: 0px;
    }
    .hero-headline a{
        line-height: 1.2;
        padding-bottom: 10px;
        margin-top: -6px;
        border-bottom: 0px !important;
    }
    .case-preview-text h3{
        font-size: 1.625rem !important;
    }
}

@media only screen and (max-width: 500px) {
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 16px;
    }
    .filter-buttons {
        font-size: .75rem !important;
    }
}

@media only screen and (max-width: 410px) {
    .case-hover-container{
        padding: 0;
    }
}

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

    #tjanst-last-row {
        margin-bottom: 100px;
    }

}

@media only screen and (max-width: 385px) {
    #karriar-row {
        margin-bottom: 150px;
    }
    .blog-container h2, .young-creative-container h2{
        font-size: 6.8vw !important;
    }
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 14px;
    }
    .container-medium {
        width: calc(100% - 20px) !important;
    }
}

@media only screen and (max-width: 370px) {
    .contact-details * ,
    .contact-container .contact-details a.small,
    .contact-container .contact-details a.small span
    {
        font-size: 15px;
    }
    .contact-container .contact-details a span{
        display: inline-block;
    }
}

@media only screen and (max-width: 350px) {
    .category-separator p {
        font-size: 13px;
    }
}