/*
Theme Name: Fortivisten
Theme URI: http://underscores.me/
Author: Wisely Digital
Author URI: http://underscores.me/
Description: Theme for Fortivisten
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fortivisten
Tags:
Yellow: #FFD428
Grey: #878787
*/
@import url('css/rrssb.css');
body{font-family: "europa", sans-serif;color: #7a7979}
p{font-size: 1.15em}
a{color: #333}
a:hover{text-decoration: none;color: #878787}
.grey{color: #878787}
.skip-link{display: none}

img{max-width: 100%;height: auto}
a img, a > img{ transition: all .2s ease-in-out; }
a:hover img, a:hover > img { transform: scale(1.025); }
h1,h2,h3{color: #000;}
h1{font-weight: 700}


.home h2{text-transform: uppercase;font-size: 20px;padding-bottom: 3px;margin-bottom: 20px;font-weight: 600; letter-spacing: 1px;display: inline-block; padding: 0 15px 0 0; position: relative;}
.home h2:after {background: #959494; content: ""; display: block; height: 1px; position: absolute; top: 80%; width: 1000%;left: 100%;}
.home .col-sm-12{overflow: hidden;width: calc(100% - 15px);}
.home #content {margin-top: 50px}

.boxlink {position: relative;}
.boxlink a{position: relative;box-sizing: border-box;overflow: hidden;width: 100%;display: block;margin-bottom: 2em}

.boxlink .floater{position: absolute; bottom: 0px; background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);width: 100%}
.boxlink .floater .inner{position: relative;text-align: center}

.boxlink.top h3{text-align: center;box-sizing: border-box;padding: 0 .5em .15em;color: #fff;font-size: 36px;font-weight: 700;}
.boxlink .floater .topcat{padding: 5px 10px;margin: 0px;color: #fff;text-transform: uppercase;letter-spacing: 1px}
.boxlink img{width: 100%;height: auto;}
.boxlink h3{font-size: 24px;margin: 0;font-weight: 600;}

#klippitems .boxlink h3{margin-top: 10px}
.boxlink .cat{display: block;margin: 15px 0 0;font-weight: 400;text-transform: uppercase;color: #959494;letter-spacing: 1px;font-size: 12px}
.date{margin-top: 5px;display: block;font-style: italic;color: #959494;background: url(img/klocka.png) no-repeat left center;padding-left: 14px;background-size: 10px;}
.boxlink.top .date{margin: 0 auto 15px;display: inline-flex;justify-content:center;background-image: url(img/klocka_vit.png);color: #fff}

#newsitems div.boxlink:nth-child(3n+1), #klippitems div.boxlink:nth-child(3n+1){clear: left}

#klipp{background: #f1f1f1;padding: 3em 0;margin-top: 50px}

.text-content p{margin-bottom: 30px}
.text-content h2{font-size: 18px;font-weight: 700;margin: 0 0 5px}
.text-content h4{font-size: 22px; font-weight: 700; line-height: 1.15em;margin-bottom: 30px}
.text-content article ul{margin: -20px 0 20px}
.text-content article figure{max-width: 100% !important;height: auto}
.text-content{margin: 60px 0}
.text-content footer{margin-top: 60px;overflow: hidden}
.text-content footer ul{margin: 0}
.text-content footer a{color: #7a7979}
.text-content footer a:hover{color: #000}

.site-title{text-indent: -99999px;margin: 0 !important}
.site-title a{width: 300px;}

#colophon{background:#000;text-align: center;padding: 50px 30px;color: #fff;border-top: 5px solid #fff}
#colophon p{font-size: 12px;margin: 0;color: #ccc}
#colophon a{color: #ccc}
#colophon img{max-width: 140px;height: auto;margin: 30px 0 10px}
#colophon h4{font-style: oblique;}

.video{position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;}
.video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

aside{padding: 15px 30px !important;background: #b9b9b9;color: #fff !important;}
.text-content aside h2{margin: 15px 0;text-transform: uppercase;color: #fff;font-size: 24px;font-weight: 700;font-size: 20px;letter-spacing: 1px}
aside a h3{font-size: 17px;margin:10px 0 30px;color: #fff}
aside ul{padding: 0;margin: 0;list-style: none}
aside ul li {margin-bottom: 30px;position: relative;}
aside ul li a{display: block;overflow: hidden;}
aside ul li a h3{position: absolute; bottom: 0; padding: 10px 15px; background: rgba(0, 0, 0, 0.75);width: 100%;margin: 0}

blockquote{margin: 20px 0; border-left: 5px solid #FFD428; color: #000;}

.archive .boxlink h3{margin-top: 15px;}
.archive .page-title{text-transform: uppercase;font-size: 20px;padding-bottom: 3px;margin-bottom: 20px;font-weight: 600; letter-spacing: 1px;display: inline-block; padding: 0 15px 0; position: relative;}
.archive .page-title:after {background: #959494; content: ""; display: block; height: 1px; position: absolute; top: 80%; width: 1000%;left: 100%;}
.archive .page-header{overflow: hidden;width: calc(100% - 15px);border-bottom: none !important;margin: 50px 0 0 !important}
.archive .site-content{padding-bottom: 80px}

#mailbanner{background: #FFD428;padding: 15px 0}
#mailbanner .bannertext{text-align: right;color: #000;font-weight: 700;font-size: 1.25em;line-height: 30px}
#mailbanner input{border:none;height: 30px}
#mailbanner input[type="email"]{padding: 0 10px;}
#mailbanner input[type="submit"]{background: #fff;border-radius: 0 10px 10px 0;padding: 0 15px 0 10px;color: #000}

#moreinfo{background: #ededed;padding: 15px;margin-top: 0}
#infoknapp{display: block;cursor: pointer;font-size: 1.25em;font-weight: 700;margin: 0;}
#infoknapp:before{content: attr(data-content) '+';display: block;float: left;margin:-.25em .5em 0 0;font-size:1.35em;width: .5em}
#infoknapp.open:before{content: attr(data-content) '-';}
#infobox{display: none;padding-top: 15px;clear: both}


/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.single #site-navigation a, .archive #site-navigation a{color: #7a7979}
.single #site-navigation .current-post-ancestor a, .archive #site-navigation .current-menu-item a{color: #fff}
.single .main-navigation li::after, .archive .main-navigation li::after {color: #7a7979}
.single #site-navigation .current-post-ancestor::after, .archive #site-navigation .current-menu-item::after{color: #fff}
#navborder{background:#000;margin:1em 0 2em}
.main-navigation{display:flex;width:100%;justify-content:center}
.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}
.main-navigation li{position:relative;display:inline-flex}
.main-navigation a{display:block;text-decoration:none;padding:15px 15px 15px 0;color:#fff;text-transform:uppercase;letter-spacing: 1px}
.main-navigation a:hover{color:#FFD428 }
.main-navigation li:after{content:"/";color:#fff;padding:15px 10px 15px 0}
.main-navigation li:last-child:after{content:""}
.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,0.2);float:left;position:absolute;top:1.5em;left:-999em;z-index:99999}
.main-navigation ul ul ul{left:-999em;top:0}
.main-navigation ul ul a{width:200px}
.main-navigation ul li:hover > ul,.main-navigation ul li.focus > ul{left:auto}
.main-navigation ul ul li:hover > ul,.main-navigation ul ul li.focus > ul{left:100%}
.menu-toggle,.main-navigation.toggled ul{display:block}

.post-navigation{margin-top: 30px !important;clear: both}
.nav-previous{padding-left: 15px;background: url(img/left-arrow.png) no-repeat left center;}
.nav-next{padding-right: 15px;background: url(img/right-arrow.png) no-repeat right center}

.site-main .comment-navigation,.site-main .posts-navigation,.site-main .post-navigation{margin:0 0 1.5em;overflow:hidden}
.comment-navigation .nav-previous,.posts-navigation .nav-previous,.post-navigation .nav-previous{float:left;width:50%}
.comment-navigation .nav-next,.posts-navigation .nav-next,.post-navigation .nav-next{float:right;text-align:right;width:50%}
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px);position: absolute !important;height: 1px;width: 1px;overflow: hidden;}

.wp-caption-text{margin: .5em 0 1.5em;font-style: oblique}

.error404{background: #000;color: #fff;margin: 0;padding: 0;text-align: center}
.error404 #wrapper{height: 100vh;display: flex;width: 100%;justify-content: center;align-items: center}
.error404 h1{color: #fff;font-weight: 100}
.error404 p, .error404 a{color: #FFD428;font-weight: 700}
.post-template-default h1 br{display: none}
@media screen and (min-width: 37.5em) {
.menu-toggle{display:none}
.main-navigation ul{display:block}
}

@media screen and (max-width: 37.5em) {
.site-branding{text-align: center}
#navborder{position: fixed; top: 0px; right: 0px;z-index: 999;margin: 0 0 0 -30px;width: 100%}
#navborder{background: transparent}
.menu-toggle{background: url(img/nav.png) no-repeat; background-size: cover;display: block;width: 50px; height: 50px;text-indent: -99999px;border:none;position: absolute;right: 0px;top: 5px}
.toggled{background: url(img/nav_bkg.png) no-repeat center top;justify-content: left;}
.main-navigation{width: 100%}
.main-navigation li:after{content: "";padding: 0}
#site-navigation{padding: 50px 15px 0;position: absolute;left: 0;right: 0}
.main-navigation a{padding: 15px 15px 15px 0;}
aside h2{font-size: 20px;margin-bottom: 10px}
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous {float: none; width: 100%}
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next{float: none;width: 100%;margin: 20px 0 10px}
.home #content{margin-top: 20px}
.boxlink{padding: 0 !important}
.boxlink header {padding: 0 15px}
.single .col-sm-12{padding: 30px 0 0}
.single .text-content{margin: 30px 0 60px}
aside{margin-top: 60px}
}

@media (max-width: 999px) {
.site-branding{display: block;position: relative;width: 100%;margin: 50px auto 0}
.site-branding img{width: 75%;max-width: 300px;height: auto;margin: 0 auto}
.site-description{margin: 0;color: #878787;position: relative;margin-top: 15px}
.site-title{clip: rect(1px, 1px, 1px, 1px);position: absolute !important;height: 1px;width: 1px;overflow: hidden;}

	}
@media (min-width: 1000px) {
.site-branding{display: inline-flex;position: relative;width: 100%;margin: 30px 0 15px}
.site-branding img{width: 100%;max-width: 260px;height: auto;padding-bottom: 4px}
.site-description{justify-content: flex-end;margin: 0;color: #878787;position: absolute;bottom: 0;right: 0}
}

@media (min-width: 768px) {.text-content .col-sm-8{padding-right: 60px}}
.date-blog{margin-top: -30px;display: block;font-style: italic;color: #878787}
footer .sociala{max-height: 40px;overflow: hidden;}
footer .sociala .rrssb-buttons{width: 200px;float: right}
footer .sociala .rrssb-buttons li{float: right !important}