/*
Theme Name: Valsalen
Theme URI: https://www.2creative.se
Author: 2Creative
Author URI: https://www.2creative.se
*/
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; border: 0; outline: 0; font-size: 100.01%; vertical-align: baseline; background: transparent; }

body { line-height: 1; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; }

h1, h2, h3, p { margin: 0px; padding: 0px; line-height: 1; }

textarea { overflow: auto; }

input { border: 0px solid white; margin: 0; padding: 0; }

ol, ul { list-style: none; margin: 0px; padding: 0px; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/************************************************************************************
MIXINS
*************************************************************************************/
/************************************************************************************
COLORS
*************************************************************************************/
/************************************************************************************
TYPO
*************************************************************************************/
* { color: #fff; font-family: arial; font-weight: 500; text-transform: none; font-family:'jost', sans-serif; }

h1{font-size:80px;text-transform:uppercase;font-weight:900;line-height:1.2;}

#intro-text h1:after{content:'\f0ab'; font-family:'Font Awesome 5 Pro';display:block;font-weight:300;opacity:0.5;margin-top:50px;font-size:34px;  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;}


@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}


h2.el__heading{font-size:40px;font-weight:300;text-transform: inherit;max-width:60%;text-align: center;text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-webkit-text-shadow:0px 5px 15px rgba(0,0,0,0.3);-moz-text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-ms-text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-o-text-shadow:0px 5px 15px rgba(0,0,0,0.3);padding-top:200px;}

h2 { font-size:36px; margin-bottom: 20px; font-weight: 500; line-height: 1.2;text-transform:uppercase;}

h3 { font-size: 29px; font-weight: 300; margin-bottom: 20px; line-height: 1.2; }

h4 { line-height: 1.4; font-size: 14px; }

p { line-height: 1.5; font-size: 19px; font-weight: 400; padding-bottom: 20px; }
p:last-of-type { padding-bottom: 0px; margin-bottom: 0px; }

a { text-decoration: none; }

p a { color: #fff; }

/************************************************************************************
FLEX
*************************************************************************************/
#content { position: relative; }


.front-heading{position:absolute;z-index:100; width:100%;padding-top:150px;pointer-events:none;/* display:none; */}

.front-heading h1 { font-weight: 900; font-size: 137px; line-height: 1.3; color: #fff; text-align:center; text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-webkit-text-shadow:0px 5px 15px rgba(0,0,0,0.3);-moz-text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-ms-text-shadow:0px 5px 15px rgba(0,0,0,0.3) ;-o-text-shadow:0px 5px 15px rgba(0,0,0,0.3);	text-transform: uppercase;}

h2 .fal{font-size:34px;display:block;margin-top:20px;opacity:0.5;}

.front-heading h1 span{font-size:32px;font-weight:400;display:block;text-shadow:none;}

.block { align-content: stretch; background: #000; width: 100%; position: relative; }
.block.video-wrap .col { width: 30%; padding-left: 50px; padding-right: 50px; }
.block.video-wrap .video { width: 100%; }
.block .inline-YTPlayer { width: 60%; margin-top: auto; margin-bottom: auto; }

.block__inner { height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

.block--text-content h2{font-size:36px;font-weight:500;}



.block--text-content{background-size:cover;}

.block--text-content .col.text{max-width:600px;margin-left:100px;}
.block--text-content.video-wrap{position:relative;}
.block--text-content.video-wrap h2{text-align: center;font-size:60px;font-weight:900;}
.block--text-content.video-wrap .col.text{position:absolute;z-index:1;left:0px;right:0px;margin:auto;max-width:1000px;} 
.block--text-content.video-wrap .col, .block--text-content.video-wrap .inline-YTPlayer{width:100%;} 
.block--text-content.video-wrap .block__inner{align-items: center;}


.block--text .block__inner{background-image:url(images/contour.png);background-size:cover;}

.block:first-of-type { background: inherit; }

.block--page-builder { flex-flow: column; }

.col { padding-top: 60px; width: 50%; }
.col.text { max-width: 600px; margin: auto;padding:0px; z-index:1000;}
.col.text ul{margin-top:30px;}
.col.text ul li{font-size:19px;font-weight:400;margin-bottom:20px;line-height:1.2;padding-left:30px;position: relative;}
.col.text ul li:before{content:'\f111';color:	#ee4266;font-family: 'Font Awesome 5 Pro';margin-right:10px;position: absolute;left:0px;top:1px;}
.col.text.right { order: 2; }
.col.image { background-size: cover; background-position: center center; overflow: hidden; position:relative; }

.col.image.img-middle{background-size:90%;background-repeat: no-repeat;}

.caption{position:absolute;right:20px;bottom:20px;color:#fff;font-size:15px;}

.blue{background:#000d21;}

.grey{background: #586f7c;}

.light-blue{background: #186A77;}

.green{background: #0F1F0A;}

.brown{background:#55493A;}


.opacity{background:#000d21;position: absolute;top:0px;bottom:0px;left:0px;right:0px;}

#intro-text .text{max-width:1200px;text-align:center;}
.video { height: 100vh!important; width: 100%; }

.lang{ position:absolute;right:20px;top:20px;z-index:1000; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;}
.lang .wpml-ls-legacy-list-horizontal{padding:0px;}

.map-wrapper{width:100%;padding-top:100px;padding-bottom:100px;height:100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center;align-items:center;flex-flow: column;}
.map-wrapper__text{width:100%;max-width:800px;text-align:center;margin-bottom:60px;}
.map{position:relative;max-width:1150px;margin:auto;}
.map img{max-width:100%;}
.marker{position: absolute;}
/* .marker:after{font-family:'Font Awesome 5 Pro'; content:'\f72c';} */


 .marker i{font-weight:bold;color:#ee4266;font-size:30px;cursor:pointer; z-index:100;}
  .marker i:hover{color:#f56482;}
 
 .spin{color:#f56482!important;-webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 10s; animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 2s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}

 
@-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(-360deg); } }
@keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
	
	
 
.marker1{top:7%;right:49%;}
.marker2{top:20%;right:49%;}
.marker3{top:22%;right:57%;}
.marker4{top:19%;right:64%;}
.marker5{top:25%;right:76%;}
.marker6{top:20%;right:88%;}
.marker7{top:38%;right:86%;}
.marker8{top:46%;right:85%;}
.marker9{top:51%;right:97%;}
.marker10{top:43%;right:73%;}
.marker11{top:35%;right:69%;}
.marker12{top:40%;right:61%;}
.marker13{top:80%;right:45%;}
.marker14{top:80%;right:46%;}
.marker14{top:82%;right:14%;}
.marker15{top:80%;right:9%;}
.marker16{top:90%;right:5%; }
.marker17{top:29%;right:53%; }
.marker18{top:59%;right:29%;}

.marker.right .marker-content{left:inherit;right:45px;}
.marker-content{position:absolute;top:0px;left:45px;background:#dbdbdb;border-radius:10px;padding:20px;width:300px;display:none;z-index:1000;}
.marker-content * {color:#111;}
.marker-content h3{font-weight:bold;font-size:19px;margin-bottom:10px;text-transform:uppercase;}
.marker-content p{font-weight:400;font-size:15px;}
.marker-content .close-marker{position:absolute;right:10px;top:10px; color:black;font-size:20px;}

/************************************************************************************
ANIMATION
*************************************************************************************/
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }

body { background: #000d21	; font-family: 'Open Sans', Helvetica, Arial, sans-serif; }

.cont { position: relative; overflow: hidden; height: 100vh; padding: 0px 0px; }
.cont__inner { position: relative; height: 100%; }
.cont__inner:hover .el__bg:after { opacity: 1; }

.el { position: absolute; left: 0; top: 0; width: 33.3333333333%; height: 100%; background: #000; transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s; will-change: transform, width, opacity; }
.el:not(.s--active) { cursor: pointer; }
.el__overflow { overflow: hidden; position: relative; height: 100%; }
.el__inner { overflow: hidden; position: relative; height: 100%; transition: transform 1s; }
.cont.s--inactive .el__inner { transform: translate3d(0, 100%, 0); }
.el__bg { position: relative; width: calc(100vw - 0px); height: 100%; transition: transform 0.6s 0.7s; will-change: transform; }
.el__bg:before { content: ""; position: absolute; left: 0; top: -5%; width: 100%; height: 110%; background-size: cover; background-position: center center; transition: transform 1s; transform: translate3d(0, 0, 0) scale(1); }
.cont.s--inactive .el__bg:before { transform: translate3d(0, -100%, 0) scale(1.2); }
.el.s--active .el__bg:before { transition: transform 0.8s; }
.el__bg:after { content: ""; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.5s; }
.cont.s--el-active .el__bg:after { transition: opacity 0.5s 1.4s; opacity: 1 !important; }
.el__preview-cont { z-index: 2; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.3s 1s; }
.cont.s--inactive .el__preview-cont { opacity: 0; transform: translateY(10px); }
.cont.s--el-active .el__preview-cont { opacity: 0; transform: translateY(30px); transition: all 0.5s; }
.el__heading { color: #fff; text-transform: uppercase; font-size: 18px; }
.el__content { z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0px; opacity: 0; pointer-events: none; transition: all 0.1s; }
.el.s--active .el__content { z-index: 2; opacity: 1; pointer-events: auto; transition: all 0.5s 1.4s; }
.el__text { text-transform: uppercase; font-size: 40px; color: #fff; }

.el__close-btn {  z-index: -1; position: absolute; left: 20px; top: 20px;  opacity: 0; pointer-events: none; /* transition: all 0s 0.45s; */ cursor: pointer;  cursor: pointer; font-size:15px; text-transform:uppercase;font-weight:400; }
.el__close-btn .fal{font-size:60px;vertical-align:-16px;margin-right:10px;opacity:0.5;position:relative;/* transition: all 0s 0.45s; */}
.el__close-btn:hover .fal{opacity:1;}
.el.s--active .el__close-btn { z-index: 5; opacity: 1; pointer-events: auto; /* transition: all 0s 1.4s; */ }

.el__close-btn.active-btn { z-index: 5; opacity: 1; position: fixed; pointer-events: auto; transition: all 0s 1.4s; }

.el__index { overflow: hidden; position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; min-height: 250px; text-align: center; font-size: 33.3333333333vw; line-height: 0.85; font-weight: bold; transition: transform 0.5s, opacity 0.3s 1.4s; transform: translate3d(0, 1vw, 0); }
.el:hover .el__index { transform: translate3d(0, 0, 0); }
.cont.s--el-active .el__index { transition: transform 0.5s, opacity 0.3s; opacity: 0; }
.el__index-back, .el__index-front { position: absolute; left: 0; bottom: 0; width: 100%; }
.el__index-back { color: #2f3840; opacity: 0; transition: opacity 0.25s 0.25s; }
.el:hover .el__index-back { transition: opacity 0.25s; opacity: 1; }
.el__index-overlay { overflow: hidden; position: relative; transform: translate3d(0, 100%, 0); transition: transform 0.5s 0.1s; color: transparent; }
.el__index-overlay:before { content: attr(data-index); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; color: #fff; transform: translate3d(0, -100%, 0); transition: transform 0.5s 0.1s; }
.el:hover .el__index-overlay { transform: translate3d(0, 0, 0); }
.el:hover .el__index-overlay:before { transform: translate3d(0, 0, 0); }
.el:nth-child(1) { transform: translate3d(0%, 0, 0); transform-origin: 50% 50%; }
.cont.s--el-active .el:nth-child(1):not(.s--active) { transform: scale(0.5) translate3d(0%, 0, 0); opacity: 0; transition: transform 0.95s, opacity 0.95s; }
.el:nth-child(1) .el__inner { transition-delay: 0s; }
.el:nth-child(1) .el__bg { transform: translate3d(0%, 0, 0); }
.el:nth-child(1) .el__bg:before { transition-delay: 0s; }
.el:nth-child(2) { transform: translate3d(100%, 0, 0); transform-origin: 150% 50%; }
.cont.s--el-active .el:nth-child(2):not(.s--active) { transform: scale(0.5) translate3d(100%, 0, 0); opacity: 0; transition: transform 0.95s, opacity 0.95s; }
.el:nth-child(2) .el__inner { transition-delay: 0.1s; }
.el:nth-child(2) .el__bg { transform: translate3d(-33.3333333333%, 0, 0); }
.el:nth-child(2) .el__bg:before { transition-delay: 0.1s; }
.el:nth-child(3) { transform: translate3d(200%, 0, 0); transform-origin: 250% 50%; }
.cont.s--el-active .el:nth-child(3):not(.s--active) { transform: scale(0.5) translate3d(200%, 0, 0); opacity: 0; transition: transform 0.95s, opacity 0.95s; }
.el:nth-child(3) .el__inner { transition-delay: 0.2s; }
.el:nth-child(3) .el__bg { transform: translate3d(-66.6666666667%, 0, 0); }
.el:nth-child(3) .el__bg:before { transition-delay: 0.2s; }
.el:hover .el__bg:after { opacity: 0; }
.el.s--active { z-index: 1; width: 100%; transform: translate3d(0, 0, 0); transition: transform 0.6s, width 0.7s 0.7s, z-index 0s; }
.el.s--active .el__bg { transform: translate3d(0, 0, 0); transition: transform 0.6s; }
.el.s--active .el__bg:before { transition-delay: 0.6s; transform: scale(1.1); }

.el:nth-child(1) .el__bg:before { background-image: url(images/valars-beteende-top.jpg); }

.el:nth-child(2) .el__bg:before { background-image: url(images/valar-manniskan-top.jpg); }

.el:nth-child(3) .el__bg:before { background-image: url(images/forskning-top.jpg); }

.icon-link { position: absolute; left: 5px; bottom: 5px; width: 32px; }
.icon-link img { width: 100%; vertical-align: top; }
.icon-link--twitter { left: auto; right: 5px; }

/*# sourceMappingURL=style.css.map */