/*
Theme Name: brix
Author: Widescreen Media AB
Version: 1.0
*/


/*---------- ALLT -------------*/
body {font-family: 'Martel Sans', sans-serif; margin:0; width: 100vw; zoom: 100%!important;}
html {zoom: 100%!important;}
html,body {overflow-x: hidden;}
body, .megamenu {width:100vw; max-width: 1800px!important; margin: auto!important;}

p {line-height: 28px; font-weight: 400; margin-block-end: unset; margin-block-start: unset;}

.comment-body p, .glomt {font-size:14px; line-height: 20px;}

p strong {padding-top: 2vh;}

p, h1, h2, h3, h4, h5, .content, .hero70 .wp-block-buttons, .hero70 .wp-block-buttons, .hero60 .wp-block-buttons, .wp-block-post-date, .wp-block-table, .wp-block-stackable-posts .stk-inner-blocks {padding: 0px 0px 1vh; position: relative; margin-block-end: unset; margin-block-start: unset; max-width:960px; width: 96%; margin: 0 auto;}


.content-wide {font-weight: 200; padding: 0px 0px 1vh; margin-block-end: unset; margin-block-start: unset; max-width:1160px; width: 96%; margin: 0 auto;}


.ingress, .ingress p, .ingress a {font-size: calc(16px + 0.4vw); font-weight: 100; padding-top:30px;}


.fn, .fn a {font-style: unset; font-size: 18px!important;}
.comment-author {margin-bottom: -14px;}
footer p {font-style: unset; font-size: 12px!important; line-height: 16px;}



.wp-block-media-text {position: relative;}


/*---------- TYPOGRAFI -------------*/
p, a {font-size: 16px;}
a {text-decoration: none;}

h1,h2,h3,h4,h5,h6, .wp-block-post-excerpt__excerpt {font-family: 'Arimo', sans-serif;}

h1 {font-size: calc(40px + 2vw); line-height: 60px;}
h2 {font-size: calc(24px + 0.4vw);}
h3, .stk-block-posts__title a {font-size: calc(16px + 1vw);padding-top: 5vh;}
h4, .wp-block-post-excerpt__excerpt {font-size: calc(14px + 0.8vw); line-height: 30px; padding-top: 2vh;}
h5, .wp-block-post-date, .ugb-blog-posts__meta {font-size: calc(12px + 0.6vw)!important;}

ol, ul {max-width:960px; width: 96%; margin: 0 auto; padding-inline-start: 20px;}



/*---------- Justera Wordpress -------------*/
.wp-block-image.aligncenter, .wp-block-image .aligncenter, .wp-block-image.alignleft, .wp-block-image .alignleft, .wp-block-image.alignright, .wp-block-image .alignright {display: block;}

.mega-indicator {display: unset!important; margin: 0!important;}


/*---------- ladda ner anima -------------*/
.wp-block-file {margin: 2vh auto; width: fit-content; padding: 12px; border-radius: 4px; text-align: center;}


/*---------- MENY -------------*/
.menu {list-style-type: none; padding-inline-end: 20px;}
.megamenu {align-items: center; box-shadow: 0 0 5px #08731a40; display: flex; flex-direction: row; height: 70px; justify-content: flex-end; position: fixed!important; width: 100vw; z-index: 999!important;}
.mega-menu-wrap {margin-right: 25px!important;}
.mega-menu-item {padding: 0px 12px!important;}
.mega-sub-menu {box-shadow: #1b406dad 4px 4px 10px!important;}


a:hover {cursor:pointer;}


/*---------- LOGOTYP -------------*/
.logotyp {position: absolute; left: 0;}
.logotyp img {height: 45px; -webkit-filter: saturate(100%)!important; position:relative; top: -2px; padding: 8px; width: auto!important;}
.logotyp:hover img {filter: saturate(500%)!important;-webkit-filter: saturate(500%)!important;}



/*---------- ADMINIKONER -------------*/
.admin, .adminlist:hover span {background: #182f489e;}
.admin {position:fixed; top: 70px; width:42px; z-index:5}
.adminlist {position:relative;display:inline-block; font-size: 14px!important; width:42px}
.adminlist .material-icons-outlined {font-size: 20px;}

.admin a {float: right;padding: 16px;}

.adminlist:hover span {z-index:999;display:inline!important;position:absolute;left:42px;top:12px;padding:4px;min-width: 170px;text-align: center}


/*---------- F Ä R G ----------*/

/*---------- TEMA grön textfärg important----------*/
.color, h1,h2,h3,h4,h5,h6, a, .wp-block-post-date, .mega-sub-menu .mega-menu-link:hover, .reply a, .form-submit input, .login-submit input, li::marker, .footerknapp, .knapp, .stk-block-posts__title a, .graybox:hover {color: #1F8C43!important;}


/*---------- vit important ----------*/
.hero70 h1, .hero70 h4, .adminlist a, .adminlist:hover span, .wp-block-file a, #wp-submit, .wp-block-button a:hover, .knapp:hover, .footerknapp:hover, .white, .wp-block-post-excerpt__excerpt, .animatebox h4, .stk-block-posts__title a, .stk-block-posts__readmore, .mega-menu-item:hover a {color: #ffffff!important;}


/*---------- svart textfärg important----------*/
.ugb-blog-posts__excerpt p, .ugb-blog-posts__title a, .stk-block-posts__excerpt p, .loginfo i, .glomt, .texten h3, .texten p, .mega-sub-menu li a, .graybox {color: #000000!important;}




/*---------- grön textfärg ----------*/
.wp-block-file__button:hover, .form-submit input:hover, .reply a:hover, .form-submit input:hover, .login-submit input:hover, #wp-submit:hover {color: #bcddff!important;}


/*---------- Punktlista -------------*/
.punktlista {line-height: 24px;}
.punktlista li {list-style-type: square; margin-left: 20px;}
.punktlista li::marker {font-size: 20px;}


/*---------- B A K G R U N D E R  ----------*/
.wp-block-button a {background-color:unset;}

/*---------- TEMAgrön bakgrund----------*/
.line {background: #1F8C43!important;}

/*---------- TEMAgrå bakgrund----------*/
.knapp:hover, .wp-block-button a:hover, .ugb-blog-posts__item:hover, .pgc-sgb-cb, .footerknapp:hover, .wp-block-file__button:hover, .texten .form-submit input:hover, .login-submit input:hover, .bullet div {background: #757473!important;}

/*---------- Ljusgrå bakgrund----------*/
.graybox, .gray-bkg {background: #cacaca!important;}

/*---------- solid vit bakgrund ----------*/
.megamenu, .glomt:hover, .teammember a {background: #ffffff!important;}

/*---------- ljusvarm grön ----------*/
.timelinebox, .mega-sub-menu .mega-menu-link:hover, .teammember, .contact-me {background: #e7f1e6!important;}


/*---------- ljusgrön bakgrund ----------*/
.ugb-blog-posts__readmore a:hover, .wp-block-button a, .knapp, .form-submit input:hover, footer {background: #b9ccbf;}


/*---------- GRÅGRÖN bakgrund important ----------*/
.wp-block-file__button, .stk-block-posts__item, .mega-menu-item:hover, .mega-sub-menu .mega-menu-link {background: #9dab9a!important;}



/*---------- Grönt fält stiger fr vänster t höger ----------*/
.triangel, .ingress {background: linear-gradient(to right bottom, #fcfcfc 50%, #f0f6f1 50%);}





/*---------- B O R D E R  ----------*/
/*---------- grön border ----------*/
.wp-block-file__button:hover, .ugb-blog-posts__readmore a, .ugb-blog-posts__item:hover .ugb-blog-posts__readmore a, .knapp:hover, .wp-block-button a:hover, .contact-me {border-color: #1F8C43!important;}


/*---------- tjock vit border ----------*/
.stk-block-posts__readmore:hover {border-color: #ffffff!important;}


/*---------- bildernas overlay-grön ----------*/
.nk-awb-overlay {background-color: rgb(0 35 4 / 35%)!important;}


.manyboxes {display: flex; flex-direction: row; justify-content: space-evenly;}


/*---------- Graybox ----------*/
.graybox {align-content: center; border-radius: 27px; display: flex; flex-direction: column; height: 270px; justify-content: center; padding: 2vw; width: 270px;}
.graybox * {text-align: center;}



/*---------- INFLYGANDE RUTOR ----------*/
.animatebox {align-items: center; display:flex; height: 38vh; min-height: 200px; padding: 12px;}
.dot{align-items: center; background: gray; border-radius: 14px; display: flex; height: calc(90px + 1.5vw); margin-right: 1vw; text-align: center; width: calc(90px + 1.5vw);}
.dot-large {align-items: center; background: gray; border-radius: 14px; display: flex; height: calc(120px + 1.5vw); margin-right: 1vw; text-align: center; width: calc(120px + 1.5vw);}
.dot h4 {padding:0!important; width: calc(90px + 1.5vw)}
.dot-large h4 {padding:0!important; width: calc(120px + 1.5vw)}



/*---------- INFLYGANDE TIMELINE ----------*/
.xxxxxxxxxxxxxtimelinebox444 {display: flex; align-items: center; width: calc(600px + 2vw); min-height: 400px; padding: 15px;}
.xxxxxxxxxxxxxtimelinebox444 tbody {width: inherit;}
.xxxxxxxxxxxxxtimelinebox tr {align-items: center; display:flex;}
.xxxxxxxxxxxxxdot {align-items: center; background: gray; border-radius: 14px; display: flex; height: calc(90px + 1.5vw); margin-right: 1vw; text-align: center; width: calc(90px + 1.5vw);}
.xxxxxxxxxxxxxdot h4 {padding:0!important; width: calc(90px + 1.5vw)}


.bullet {align-items: center; display: flex; margin: 15px 0 15px;}
.bullet div {height: 18px; margin-right: 8px; min-width:18px; width: 18px; border-radius: 4px;}
.timelinetext {min-width: 75%;}


.dot-large {align-items: center; background: gray; border-radius: 14px; display: flex; height: calc(120px + 1.5vw); margin-right: 1vw; text-align: center; width: calc(120px + 1.5vw);}

.dot-large h4 {padding:0!important; width: calc(120px + 1.5vw)}

.timelinelax {display: flex; align-items: center; width: calc(600px + 2vw); min-height: 330px; margin: 10vh 2vw 14vh 2vw; padding: 15px;}

.timelinelax .nk-awb-wrap {border-radius: 10px;}
.timelinelax .nk-awb-wrap-content {width: inherit;}



.timelinelax table {width: inherit!important;}
.timelinelax table .dot-large {float: right!important;}

.timelinelax table tr {display: flex; justify-content: center; align-items: center;}



body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {margin: 0;}
.timelineright {display: grid; justify-content: end; margin: 10vh 2vw 10vh 2vw}


/*---------- POSTERNAS singlesida ----------*/
.autoposttitle  {text-transform: uppercase;}



/*---------- TeamMember ----------*/
.teammember {border: 3px solid #cad8e3; max-width: 630px; margin: 35px auto;}
.teammember h4 {text-transform: uppercase; font-weight:100!important;}
.teammember .wp-block-buttons {width: 96%!important;}


/*---------- Contact me - på alla postsidor ----------*/
.contact-me {border: 1px solid;}
.contact-me h3 {padding: 0;}
.contact-me input {height: 26px!important;}



/*---------- KNAPPAR ----------*/
.wp-block-buttons {width: 96%;max-width: 960px;margin: 0 auto;}




.wp-block-file__button, .form-submit input {width: fit-content; border-radius: 6px!important;}


.knapp, .footerknapp, .wp-block-button a, .ugb-blog-posts__readmore a, .reply a, .login-submit input {border: 1px solid; border-radius:4px; font-size: 11px; font-weight: 600; padding:8px 20px; text-transform: uppercase;}


.wp-block-button a:hover {background-color: unset;}

.stk-block-posts__readmore {border: 2px solid transparent;}



/*---------- HERO 70----------*/
.hero70 {align-items: center; height: 62vh; display: flex; flex-direction: column; justify-content: center; margin-bottom:4vh; margin-top: 70px;}
.hero70 img {width: calc(200px + 50vh);}
.hero70 .posticon {width: 300px;}
.hero70 h1 {font-weight: 400; text-transform: uppercase!important; width: 90vw;}


/*---------- BRIXHEADER----------*/
.brixheader {align-items: center; display: flex; height: 65vh; justify-content: center; margin-bottom:4vh; margin-top: 70px; padding: 0;}


.brixheader figure {display: contents!important;}

.brixheader .logo-img img {position: absolute; background: #0000006b; padding: 4vw; border-radius: 20px; bottom: 40px; left:40px; max-width: 80vw;}



.brixheader h2 {position: absolute; padding: 0; mix-blend-mode: difference; text-shadow: 1px 1px 9px #ffffff99;}

.brixinnerheader {height: 65vh; mix-blend-mode: overlay; opacity: 44%; width: 100vw;}

.brixinnerheader .nk-awb-wrap {overflow: visible!important;}
.brixinnerheader img {height: auto!important; top: 90vh!important; min-width: 1200px;}


.wp-block-post-excerpt__excerpt {font-weight: 600!important;}


/*-------- post-lista -------*/
.stk-container-padding {padding-left: 0px!important;}
.stk-container-padding {align-items: center; display: flex; flex-direction: column; justify-content: center;}

.wp-block-stackable-posts .stk-inner-blocks {max-width: unset!important;}
.stk-block-posts__items {justify-content: space-evenly;}
.stk-block-posts__item {column-gap: var(--stk-column-gap,10px)!important;flex-basis: unset; width: 20vw!important; margin: 8px;}

.stk-block-posts__item article {align-items: center; display: flex; flex-direction: column;}


.stk-block-posts__title {min-height: 60px;}
.stk-block-posts__title, .stk-block-posts__excerpt {text-align: center!important;}
.stk-block-posts__image-link {display: unset!important; margin-bottom: 0px!important;width: 100%;}

.stk-block-posts__readmore {margin-bottom: 8px!important;}


.stk-img-wrapper img {height: auto!important; transform: scale(0.8); filter: saturate(0) brightness(400%);-webkit-filter: saturate(0) brightness(400%); width: inherit!important;}

.stk-container:hover .stk-img-wrapper img {transform: scale(0.9); transition: all .7s ease-in-out; filter: saturate(0) brightness(100%); -webkit-filter: saturate(1) brightness(100%);}



/*---------- TRANSITION ----------*/
.wp-block-button a, .footerknapp, .knapp, .mega-menu-link, .large img, .ugb-blog-posts__readmore a, .wp-block-file__button, .ikonknapp {transition: 0.35s;}

.logotyp img, .ugb-blog-posts__item, .form-submit input, .reply a, .glomt, .stk-block-posts__item, .stk-block-posts__readmore, .mega-menu-item, .graybox {transition: 0.5s!important;}






/*---------- RESPONSIVITET ----------*/
@media screen and (max-width: 950px){
.stk-block-posts__item {width: 40vw!important;}

.manyboxes {align-items: center; flex-direction: column;}
.manyboxes .graybox {height: auto; margin-top: 4vh; width: 80vw;}
.manyboxes h4 {line-height: unset; padding-top: 0;}

}


@media screen and (max-width: 768px){
.hero70 {height: 46vh;}
h1 {font-size: calc(28px + 1vw);line-height: 33px;}
.logotyp img {height: 26px;}
.ugb-blog-posts__item {display:block!important;}
.ugb-blog-posts__featured-image a img {max-height:200px!important;}
.ugb-blog-posts__title {text-align:center!important;}
.mega-menu-link::before {bottom: 8px!important; left: 10px!important; width: 32%!important;}

.bildlogga img {max-width: 40vmin!important;}
footer {flex-direction: column!important; min-height: 280px!important;}
footer .knapprad {margin-bottom: 0px;}
.footercol2 {max-width: 96%!important; text-align: center;}
.vd { align-items: center; display: flex;flex-direction: column;}

.hero70 {margin-bottom: 4vh;}


.timelinelax {min-height: 300px; margin: 10vh auto; width: 90vw;}

.stk-block-posts:not(.stk--has-container) .stk-block-posts__items {row-gap: 14px;}
.footerknapp {margin: 5px 0;}
}


@media screen and (max-width: 650px){
.transpbox .wp-block-buttons {gap: 0.4rem!important; width: 100vw;}
}


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

.timelinelax {min-height: 250px; padding: 10px;}
.theright {width: inherit;}
.theright table {justify-content: flex-end;}
.timelinetext {max-width: 75vw;}
.dot-large {height: calc(110px + 1vw); width: calc(110px + 1vw);}


.stk-container, .posterna {flex-direction: column;}
.stk-container-padding {width: 100%!important;}
.posterna img {height: auto; width: 100vw;}

.stk-block-posts__title, .texten h3 {margin-bottom:0px!important; padding-top: 8px!important; text-align: center;}
.stk-block-posts__excerpt {margin-bottom: 2px!important;}

.hero70 {margin-bottom: 2vh;}


.stk-block-posts:not(.stk--has-container) .stk-block-posts__items {row-gap: 8px;}
h3 {padding-top: 2vh!important;}
}


@media screen and (max-width: 500px){
.megamenu {justify-content: flex-end;}
.mega-menu-wrap, .mega-toggle-blocks-right {height: 55px!important;}
.stk-block-posts__item {width: 94vw!important;}
.stk-block-posts__title {min-height: unset;}
.stk-block-posts__image-link {width: 65%;}

.contact-me {max-width: 80%!important;}


.dot-large {height: calc(70px + 0.6vw); width: calc(70px + 0.6vw);}
.animatebox .dot-large {height: calc(100px + 0.6vw); width: calc(100px + 0.6vw)!important;}
}




/*---------- MARGINALER ----------*/
.centrera {text-align:center;}

.services li {padding: 6px;}
.stk-block-posts__title, .stk-block-posts__title a {padding: 0!important;}
.ugb-blog-posts__featured-image, .ugb-blog-posts__readmore {margin-bottom: 0!important;}
.margtopp3 {margin-top: calc(2vh + 1vw)!important;}
.margtopp6 {margin-top: calc(3vh + 3vw)!important;}
.marg10 {margin-top: calc(5vh + 5vw)!important;margin-bottom: calc(5vh + 5vw)!important;}

.paddtopp2, h2 {padding-top: calc(1vh + 1vw);}
.paddtopp4 {padding-top: calc(2vh + 2vw);}
.paddtopp6 {padding-top: calc(3vh + 3vw);}
.paddtopp8 {padding-top: calc(4vh + 4vw);}
.paddtopp14 {padding-top: calc(7vh + 7vw);}

.paddbott2 {padding-bottom: calc(1vh + 1vw);}
.paddbott4 {padding-bottom: calc(2vh + 2vw);}
.paddbott6 {padding-bottom: calc(3vh + 3vw);}

.padding4 {padding: calc(2vh + 2vw);}

.stk-block-posts__title {margin-bottom: 2vh!important;}
  
.margbott6, .ingress {margin-bottom: calc(3vh + 3vw)!important;}



/*---------- DISPLAY NONE -------------*/
.screen-reader-text, .ab-label, #wp-admin-bar-wp-logo, #wp-admin-bar-customize, #wp-admin-bar-updates, #wp-admin-bar-comments, #wp-admin-bar-wpseo-menu, #wp-admin-bar-search, #wp-admin-bar-themes, #wp-admin-bar-widgets, #wp-admin-bar-menus, #wp-admin-bar-new-media, #wp-admin-bar-new-user, #wp-admin-bar-new-page, #wp-admin-bar-user-info, #wp-admin-bar-edit-profile, .adminlist span, .logged-in-as, .comment-form-comment label, .says {display: none!important;}


/*---------- FOOTER -------------*/
footer {align-items: center;display: flex; flex-direction: row; justify-content: space-evenly; margin-top: 6vh; min-height: 170px;}


.footercol1 {align-items: center;display: flex; flex-direction: column;}

.footercol2 {max-width: 40%;}
.knapprad {display: flex; flex-direction: row;}


.footerknapp {align-items: center; border: 1px solid transparent; display: flex; width: fit-content;}


.footerknapp:hover {border: 1px solid white;}
.footerknapp i {font-size:16px!important;padding-right: 8px;}
footer img {width: calc(220px + 2vw); height: auto;}


.wp-block-media-text__media img {height: auto!important;}