@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&subset=latin-ext');


.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}



.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

.transition(@transition) {
  -moz-transition: @transition;
          -webkit-transition: @transition;
          -o-transition: @transition;
          transition: @transition;
}

.delay(@delay) {
    -webkit-transition-delay: @delay; /* Safari */
    transition-delay: @delay;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.fade {
  .opacity(0);
}

.reveal .fade {
  .opacity(1);
  .transition(opacity 2s ease);
}

.reveal .delay-2 {
  .delay(1s);
}
.reveal .delay-3 {
  .delay(1.5s);
}
.reveal .delay-1 {
  .delay(0.5s);
}

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

html {
    margin: 0;
    padding: 0;
}

a {
    color: #0070bb;
    
    &:hover {
        color: #bc1b20;
    }
}

body {
    font-family: 'Montserrat', sans-serif;
    background: #f1f1f1;
    font-size: 15px;
    font-weight: 300;
    line-height: 22/15;
    margin: 0;
    padding: 0;
}

b {
    font-weight: 700;
}

.container {
    width: 1280px;
    margin: 0 auto;
}

.clearfix {
    .clearfix();
}

header {
    background: #dcddde;
    height: 70px;
}

.main-menu {
    margin: 0;
    padding: 0;
    position: relative;
    z-index:8;
}

.main-menu ul {
    background: #0060a0;
    .clearfix();
    padding: 0;
    margin: 0;
    .border-radius(0 0 10px 10px);
    text-align: center;
}

.main-menu ul li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-menu ul li a {
    line-height: 95px;
    display: inline-block;
    color:#fff;
    font-size: 17px;
    padding: 0 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    vertical-align: middle;
    
    &:hover {
        background: #bd1b20;
        .transition(all 0.25s ease);
    }
}

.menu-li-a-red {
	background: #bd1b20;
}


body.search .main-annotation.list {
    width: auto;
}

body.search .articles-wrapper h3 {
    margin-top: 0;
}

header {
    position: relative;
    z-index: 1;
    
    .share-top {
        position: absolute;
        top: 24px;
        right: 30px;
        width: 65px;
        .twitter-top {
            margin-right: 15px;
            height: 20px;
        }
        .instagram-top {
            height: 20px;
        }
    }
    
    .container {
        position: relative;
    }
    
    .search {
        float: right;
        position: relative;
        /* z-index: 2; */
        z-index: 100; 
        padding: 12px 0 0 0;
        
        input[type="text"] {
            width: 395px;
            border: 1px solid #dcddde;
            height: 45px;
            background: #fff;  
            .border-radius(10px);
            padding: 0 50px 0 15px;
        }
        input[type="submit"] {
            position: absolute;
            top:25px;
            right: 15px;
            background: transparent url(../images/CSU/search.svg) no-repeat 0 0;
            background-size: contain;
            width: 20px;
            height: 0;
            border: 0;
            margin: 0;
            padding: 20px 0 0 0;
            font-size: 0;
            cursor: pointer;
            
        }
        
    }
}

#search select {
	display: none;
}

#search input[type="image"] {
	background-size: contain;
	position: absolute;
	width: 20px;
	top:0px;
	right: 15px;
	padding: 26px 0 0 0;
	z-index: 3;
}


h1 {
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 50px 0 0 0;
}

h2 {
    font-size: 24px;
    color: #231f20;
    font-weight: 600;
    text-transform: uppercase;
}

menu {
    position: relative;
    z-index: 2;
}

.banan-big-blue,
.banan-big-red,
.banan-big-white {
    position: absolute;
    height: 495px;
    top: -230px;
}

.banan-big-blue {
    right: 370px;
}

.banan-big-red {
    right: 120px;
}

.banan-big-white {
    right: -125px;
}


.defW(){ 
	@defWidth:  'window.screen.width';

	width: @defWidth;
}

.main-white {
    background: #fff;
    .defW();
    
    &.pagination {
        margin-top: 20px;

    }
}

.breadcrumb {
    padding: 30px 0 0 20px;
    font-size: 10px;
    text-transform: uppercase;
    position: relative;
    z-index: 99;
    font-weight: 400;
    
    a {
        color: #231f20;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    
    .separator {
        display: inline-block;
        margin: 0 5px;
        width: 5px;
        height: 0;
        overflow: hidden;
        padding-top: 10px;
        background: transparent url(../images/CSU/caret-right.svg) no-repeat center center;
        background-size: contain;
    }

/*    .separatorwp {
        display: inline-block;
        margin: 0 5px;
        width: 5px;
        height: 0;
        overflow: hidden;
        padding-top: 10px;
        background: transparent url(../images/CSU/caret-right.svg) no-repeat center center;
        background-size: contain;
    }*/
}

.pager {
    font-size: 13px;
    text-transform: uppercase;
    padding: 65px 0;
    text-align: center;
    font-weight:600;
    word-spacing: 3px;
    font-weight: 400;

    .current {
        font-weight:bold;
    }
    
    a {
        color: #231f20;
        text-decoration: none;
        font-weight:400;
        &:hover {
            text-decoration: underline;
        }
    }
    
    .separator.hide {
        display: none;
    }
    .next,
    .prev {
        display: inline-block;
        margin: 0 5px;
        width: 10px;
        height: 0;
        overflow: hidden;
        padding-top: 10px;
        /*background: transparent url(../images/CSU/caret-right.svg) no-repeat center center;
        background-size: contain;*/
    }
    .prev {
        background: transparent url(../images/CSU/caret-left.svg) no-repeat center center;
        background-size: contain;
    }
    .next {
        background: transparent url(../images/CSU/caret-right.svg) no-repeat center center;
        background-size: contain;
    }
}

.csu-logo {
    height:35px;
    margin-top: 17px;
    margin-right: 15px;
}



.main-annotation.list + .articles-wrapper.white {
    margin-bottom: 80px;
}

.articles-wrapper {
    padding: 20px 20px 40px 20px;
    .border-radius(10px);
    .clearfix();
    
    + .articles-wrapper {
        margin: 30px 0 0 0;
    }
    
    &.white {
        background: #fff;
        
    }
    
    .articles article {
        width: 400px;
        float: left;
        margin: 0 0 0 20px;
        position: relative;
        
        &:nth-child(3n+1) {
            margin: 0 0 0 0;
        }
        &:nth-child(n+4) {
            margin-top: 50px;
        }
        
        .stick {
            position: absolute;
            z-index: 5;
            top: 0;
            right: 10px;
            line-height: 30px;
            padding: 0 20px;
            background: #bc1b20;
            color: #fff;
            font-size: 13px;
            text-transform: uppercase;
            font-weight:500;
            .border-radius(0 0 10px 10px);
          
            .transition(all .3s ease-in-out);
        }
        
    }
   
    
    .articles.list article {
        h3 {
            margin-bottom: 10px;
        }
    }
    
    a.thumbnail img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        
        .transition(all .3s ease-in-out);
        
    }
    
    a.thumbnail:hover {
        img {
            transform: scale(1.05);
            z-index: 3;
        }
        
        .stick {
            top: -6px;
            right: 4px;
           
        }
    }
    
    .annotation  {
        height: 110px;
        overflow: hidden;
        
        p {
            margin: 0;
            padding: 0;
        }
    }
    
    h3 {
        margin: 30px 0 30px 0;
        padding: 0;
        color: #231f20;
        font-size: 20px;
        
        a {
            color: #231f20;
            .transition(all 0.25s ease);
            &:hover {
                color: #bc1b20;
            }
        }
    }
    
    h2 {
        font-size: 16px;
        line-height: 60px;
        padding:0 0 0 45px;
        margin: 0 0 15px 0;
        position: relative;
        &:before {
            content: "";
            display: block;
            width: 30px;
            height: 60px;
            background: transparent url(../images/CSU/banan.svg) no-repeat 0 0;
            overflow: hidden;
            background-size: contain;
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;
        }
    }
}

.articles-wrapper.blue-sticks .articles article .stick {
    background: #0154a6;
}

.main-annotation {
    position: relative;
    padding: 80px 0 65px 175px;
    width: 890px;
    
    .banan-white {
        height: 210px;
        
        position: absolute;
        top: 95px;
        left: 20px;
    }
    
    .logo-100 {
        width: 440px;
        margin: 0 0 0 0;
    }
    .logo-100-tablet {
        display: none;
    }
}

.main-annotation.list {
    padding-top: 45px;
}

.main-annotation.list .banan-white {
    top: auto;
    bottom: -25px;
}

.footer-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    
    a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        &:hover {
            text-decoration: underline;
        }
    }
}

.clear {
    clear:both;
}

#menu-item-170 {
    a:after {
        content: "";
        width: 15px;
        height: 15px;
        display: inline-block;
        background: transparent url(../images/CSU/twitter-footer.svg) no-repeat top left;
        background-size: contain;
        position: relative;
        top: 4px;
        left: 7px;
    }
}

#menu-item-2108 {
    a:after {
        content: "";
        width: 15px;
        height: 15px;
        display: inline-block;
        background: transparent url(../images/CSU/ig.svg) no-repeat top left;
        background-size: contain;
        position: relative;
        top: 3px;
        left: 7px;
    }
}

#menu-item-2109 {
    a:after {
        content: "";
        width: 15px;
        height: 15px;
        display: inline-block;
        background: transparent url(../images/CSU/in.svg) no-repeat top left;
        background-size: contain;
        position: relative;
        top: 1px;
        left: 7px;
    }
}


footer {
    background: #0070bb;
    padding: 80px 0 80px 0;
    .clearfix();
    position: relative;
    clear: both;
    
    .logo-100-footer {
        width: 225px;
        margin-bottom: 65px;
     
        float: left
    }
    
    .csu-logo-footer {
        width: 160px;
        margin-bottom: 65px;
        margin-left: 65px;
        float: left;
        margin-right: 145px;
    }
    
    .twitter {
        float: left;
        margin-right: 30px;
        margin-top: 10px;
        height: 27px;
    }
    
    .instagram {
        float: left;
        margin-top: 10px;
        height: 27px;
    }
    
    ul {
        margin:0;
        padding: 0;
    }
    
    .footer-menu {
        float: left;
        margin:0;
        padding:0;
        
        &.fm-1 {
            width: 290px;
          
        }
        &.fm-2 {
            width: 300px;
        }
        &.fm-3 {
            width: 230px;
        }
    }
}

main.detail {
    width: 860px;
    float: left;
    padding: 0 75px 110px 70px;
    .clearfix();
    
    &.no-aside {
        width: 100% !important;
    }
    
    h2 {
        margin-top: 50px
    }
    
    img {
        max-width: 100%;
        margin:50px 0 0;
    }
    
    .breadcrumb {
        margin-left: -70px;
    }
    .main-annotation.list {
        margin-left: -270px;
    }
} 

aside {
    width: 420px;
    float: left;
    margin-top: 240px;
    
    .articles-wrapper {
        padding-bottom: 30px;
        
        .annotation {
            height: auto;
        }
    }
    
    
    
    a.more {
        color: #231f20;
        text-decoration: none;
        text-transform: uppercase;
        margin: 30px 0 0 0;
        clear:both;
        display: block;
        text-align: right;
        font-weight: 400;
     
        &:after {
            background: transparent url(../images/CSU/caret-right.svg) no-repeat center right;
            background-size: contain;
            display: inline-block;
            content: "";
            width: 12px;
            height: 12px;
            margin-left: 5px;
        }
        
        
        &:hover {
            text-decoration: underline;
        }
    }
}

.top {
    position: absolute;
    bottom: 90px;
    right: 95px;
    font-size: 16px;
    color: #003366;
    font-weight: 600;
    z-index: 99;
    text-decoration: none;
    text-align: center;
    img {
        width: 15px;
        margin-bottom: 5px;
    }
}

.copy {
    background: #231f20;
    padding: 0 30px;
    line-height: 50px;
    color: #77787b;
    font-size: 13px;
    overflow: hidden;
    
    .right {
        float: right;
        img {
            margin-top: 15px;
            margin-left: 7px;
            height: 20px;
        }
    }
}

.fancybox-bg {
    background: #888;
}

.fancybox-slide--html {
    padding:30px;
}

.main-annotation.list {
    padding: 65px 0 40px 275px;
    margin-left: -200px;
}


.articles-wrapper .articles.old-list a.thumbnail {
    width: 275px;
    display: block;
    position: relative;
    float: left;
    margin-right: 25px;
}

.articles-wrapper .articles.old-list h3 {
    margin: 15px 0;
}

.articles-wrapper .articles.old-list .annotation {
    max-width: 700px;
}
    
.articles-wrapper .articles.old-list article,
aside .articles-wrapper .articles article,
.articles-wrapper .articles.old-list article:nth-child(3n+1) {
    width: auto;
    float: none;
    margin: 0 0 30px 0;
    position: relative;
    .clearfix();
}

.articles-wrapper h2 {
    margin: 0 0 35px 0;
}

ul.areas {
    margin: 0;
  /*padding: 40px 0 0 0;*/
    padding: 4px 0 0 0;
    font-weight: 600;
    width:50%;
    float:left;

    li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    li a {
        font-size: 20px;
        color: #231f20;
        text-decoration: none;
        padding: 0 35px;
        line-height: 65px;
        background: #fff;
        display: inline-block;
        .border-radius(10px);

        &:hover {
            background: #0070bb;
            color: #fff;
            .transition(all 0.25s ease);
        }
    }

    > li + li {
        margin-top: 10px;
    }
}

ul.story {
    margin: 80px 0 0 0;
    padding: 0 0 0 0;
    line-height: 1;
    
    li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        position: relative;
        top: -3px;
    }
    
    > li > ul {
        padding: 25px 0 25px 31px;
        
        li a {
            font-size: 20px;
            color: #231f20;
            text-decoration: none;
            padding: 0 35px;
            line-height: 65px;
            background: #fff;
            display: inline-block;
            .border-radius(10px);
            
            &:hover {
                background: #0070bb;
                color: #fff;
                .transition(all 0.25s ease);
            }
        }
        
        > li + li {
            margin-top: 10px;
        }
    }
    
    color: #0070bb;
    font-weight: 600;
    font-size: 24px;
    
    
    > li {
        left: 0; 
        border-left: 1px solid #0070bb;
        margin: 0 0 0 0;
        
        &:before {
            content: ""; 
            display: block; 
            width: 18px;
            height: 18px;
            .border-radius(50%);
            background: #0070bb;
            float: left;
            margin-right: 15px;
            position: relative;
            top: 3px; 
            left: -9px;
        }
        
        &:last-child {
            border:0;
        }
    }
}

.fancybox-slide--html .fancybox-close-small svg {
    display: none;
}

.fancybox-slide--html .fancybox-close-small:before {
    content: "";
    width: 17px;
    height: 17px;
    background: transparent url(../images/CSU/times.svg) no-repeat 0 0;
    background-size: contain;
    display: block;
    margin-left: 1px;
    &:hover {
        background-color: #bc1b20;
    }
}

.fancybox-slide--html .fancybox-close-small {
    background: #0070bb;
    .border-radius(50%);
    border: 2px solid #fff;
    top: -15px !important;
    right: -15px !important;
    color: #fff;
    .opacity(1);
}

.story-item {
    .clearfix();
    .container;
    .border-radius(10px);
    overflow: visible !important;
    
    
    h2 {
        color: #0070bb;
        text-transform: none;
        padding: 0;
        margin: 0 0 15px 0;
        font-size: 28px;
    }
    
    img {
        max-width: 100%;
    }
    
    .left {
        width: 60%;
        float: left;
    }
    
    .right {
        width: 35%;
        float: right;
    }
}

a.button,.button {
    display: inline-block;
    padding: 0 50px;
    line-height: 70px;
    color: #fff;
    font-size: 20px;
    background: #0072bc;
    font-weight: 500;
    .border-radius(10px);
    text-transform: uppercase;
    text-decoration: none;
    
    &:hover {
        background-color: #bd1b20;
        .transition(all 0.25s ease);
    }
}
/*-------------------------*/
main.detail .quiz {
    padding: 60px 60px;
    margin: 0 -75px 0 -70px;
    
    p.play {
        padding: 80px 0 200px;
        text-align: center;
        
        a.button {
            letter-spacing: 1px;
            
            &:after {
                content: "";
                display: inline-block;
                width: 13px;
                height: 13px;
                background: transparent url(../images/CSU/caret-right-white.svg) no-repeat center center;
                background-size: contain;
                margin-left: 10px;
            }
        }
    }
    .quiz-bottom, .trivia_quiz {
        padding: 30px 0 130px;
        text-align: center;
        margin: 50px 0 0 0;
        border-top: 1px solid #000;
    }
    .quiz-top {
        
    }
    
    .quiz-headline {
        font-size: 40px;
        font-weight: 600;
    }
    
    .quiz-query {
        font-size: 22px;
        font-weight: 600;
        padding: 35px 0 30px;
    }
    
    .wq_questionTextCtr {
        background: transparent !important;
        float:none !important;
        text-align: center;
        margin-bottom:40px;
    }
    
    ul.quiz-answers,.wq_singleQuestionCtr {
        max-width: 820px;
        margin: 50px auto 0 auto;
        padding: 0;
        
        li {
            list-style-type: none;
            margin: 0;
            padding: 0;
            
            + li {
                margin-top: 10px;
            }
            
            a.button {
                display: block;
                font-weight: 600;
                line-height: 55px;
            }
        }
    }
    
    .wq_btn-continue {
	text-shadow: none;		/*  */

        .button;
        background: #0072bc !important;
        &:hover {
          background-color: #bd1b20 !important;
            .transition(all 0.25s ease);
        }
    }
    
    .wq_singleAnswerCtr {
	cursor: pointer;
	margin: 0 0 15px 0;	/* */
    }

    .wq_singleAnswerCtr {
        .button;
        background: #0072bc !important;
        color:#fff !important;
        border:0 !important;
        display: block;
        font-weight: 600;
        line-height: 55px;
        
        .wq_answerTxtCtr {
          background:none;
          padding:0;
        }
        
        &:hover {
          background-color: #bd1b20 !important;
            .transition(all 0.25s ease);
        }
    }

.wq_quizTitle {
	display: none;		/*  */
}

.wq_quizProgressBar {

    font-size: 11px;
    line-height: 1.285;
    position: relative;
    box-sizing: initial;
    width: 100%;
    height: 18px;
    margin: 0 1px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    background-color: #ebebeb;
    box-shadow: inset 0 1px 1px rgba(100,100,100,0.1);

}

.wq_quizProgressBar > span {

    line-height: 16px;
    position: relative;
    display: block;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 10px;
    min-width: 30px;
    height: 100%;
    margin: 0 -1px;
    padding: 0 3px;
    text-align: right;
    border: 1px solid;
        border-top-color: currentcolor;
        border-right-color: currentcolor;
        border-bottom-color: currentcolor;
        border-left-color: currentcolor;
    border-color: rgba(0,0,0,0.05) rgba(0,0,0,0.2) rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: var(--wq-bar-color, #85c440);
    box-shadow: inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);

}
.wq_quizProgressBar {

    font-size: 11px;
/*    line-height: 1.285;
    text-align: center;    */
    color: #fff;

}


.wq_questionTextCtr h4 {	
    font-size: 28px;
    line-height: 1;
    margin: 0;
    color: inherit;
}
.wq-explanation-head-correct {
    color: #8BC34A;
}
.wq-explanation-head-incorrect {
    color: #FF5722;			
}

.wq_triviaQuestionExplanation span {		
    font-weight: 700;
    font-size: 1.2em;
} 

main.detail .quiz .trivia_quiz {
    padding: 30px 0 130px;
    text-align: center;
    margin: 50px 0 0 0;
    border-top: 1px solid #000;
}

.wq-quiz-593 {
    --wq-question-width: 100%;
    --wq-question-color: #009cff;
    --wq-question-height: auto;
    --wq-bar-color: #0083ef;
    --wq-font-color: #444;
}
   
.wq_quizCtr {
    width: 100%;
}


/*.wq_singleAnswerCtr .wq_answerTxtCtr:before, .wq_singleAnswerCtr.chosen .wq_answerTxtCtr:after {  */
.wq_singleAnswerCtr.chosen .wq_answerTxtCtr:after {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid;
	position: absolute;
	left: 0;
	top: 1px;
	border-radius: 2px;
	box-sizing: border-box
}
.wq_singleAnswerCtr.chosen .wq_answerTxtCtr:after {
	content: "";
	width: 0;
	height: 0;
	background: #fff;
	border: 5px solid;
	left: 4px;
	top: 5px
}
.wq_singleAnswerCtr .wq_answerTxtCtr {
	font-size: 18px;
	font-weight: 700;
	line-height: 19px;
	display: inline-block;
	height: auto;
	padding-left: 25px;
	cursor: pointer;
	vertical-align: middle;
	color: inherit;
	background-repeat: no-repeat;
	margin-bottom: 0;
	position: relative
}
/*
.wq-skin-traditional {
	border: 1px solid rgba(0,0,0,0.1);
	padding: 7px 7px 8px;
	margin: 0 0 15px 0;
	line-height: 30px
}
*/
.wq-results .wq_resultScoreCtr {
    font-weight: bold;
}
.wq-results {
    font-size: 18px;
}

.wq_triviaQuestionExplanation {
    padding: 10px 10px 0 10px;
    border: 1px solid #dddddd;
    margin: 20px 0 0 0;
    clear: both;
    width: 100%;
    box-sizing: border-box;
}
.wq_questionAnswered.is-incorrect .wq_triviaQuestionExplanation, .wq_questionAnswered.is-correct .wq_triviaQuestionExplanation {
    display: block;
}

.wq_singleQuestionWrapper .wq_continue button, .wq_quizEmailCtr form button {
    margin: 30px 0 10px 0;
}

@font-face{
  font-family:'Glyphicons Halflings';
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot");
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

.glyphicon-ok::before {
    content: "\e013";
}
.glyphicon {

    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
    
    h2 {
        font-size: 24px;
        line-height: 1.4;
        text-transform: uppercase;
        padding: 20px 0;
        margin: 0;
        &:before {
            display: none;
        }
    }

    .domovdiv { margin-left:0px; }
    .strankadiv { margin-left:0px; }

    div.obsah ul.story li ul {
	margin:0px;
    }


}


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

@media (min-width: 1280px) {

.domovdiv { margin-left:175px; }
.strankadiv { margin-left:75px; }

aside .articles-wrapper {
	margin-top:  20px;
}



body {
    font-size:13px;
}

h1 {
    font-size: 25px;
    padding: 35px 0 0 0;
}

.articles-wrapper h2 {
    font-size: 15px;
    line-height: 50px;
    padding: 0px 0 0 36px;
}

/*main.detail img {
	margin: 10px 0 0;
}*/

ul.story > li:before {
    top: 0;
}

ul.story > li > ul li a {
    font-size: 16px;
    line-height: 50px;
}

.story-item {
    max-width: 800px;
}

ul.story {
    margin: 50px 0 40px 80px;
    padding: 0 0 0 0;
}

aside a.more {
    /*margin: 15px 0 0 0;*/
    margin: 0 0 15px 0;

}
aside .articles-wrapper h3 {
    margin: 20px 0 5px 0;
}



ul.story {
	font-size: 20px;
}

.articles-wrapper h2::before {
height:50px;
}

.main-annotation.list {
    padding: 65px 0 10px 275px;
}

.articles-wrapper h3 {
    font-size:16px;
    margin: 20px 0 15px 0;
}

.main-annotation .logo-100 {
    width: 400px;
}

.articles-wrapper .articles article .stick {
    line-height: 25px;
    font-size: 11px;
}

.main-menu ul li:nth-child(1) a {
    width: 16px;
    height: 0;
    overflow: hidden;
    padding-top: 95px;
    
    position: relative;
    
    &:before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background: transparent url(../images/CSU/home.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        top: 39px;
        left: 22px;
    }
    &:hover {
        background-color: #bd1b20;
        .transition(all 0.25s ease);
    }
}
}
/*------------------------------*/
@media (max-width: 1480px) {
    .container {
        width: 1240px;
    }
    
    header .search {
        margin-right: 155px;
    }
    
    .banan-big-blue {
        right: 520px;
    }

    .banan-big-red {
        right: 270px;
    }

    .banan-big-white {
        right: 25px;
    }
  
    .articles-wrapper,
    .articles-wrapper + .articles-wrapper{
        margin-left: -20px;
        margin-right: -20px;
    }
    
    
    .csu-logo-footer {
 
    }
    
    main.detail {
        width: 800px;
        
    }
}
/*------------------------------*/
@media (max-width: 1279px) {
    .container {
        width: 747px;
    }
    main.detail.no-aside {
        padding-bottom: 80px;
    }
    header .container {
        position: relative;
    }
    header .share-top,
    .banan-big-white {
        display: none;
    }
    .banan-big-red {
	right: 15px;
    }
    .banan-big-blue {
	right: 260px;
    }
    header .search input[type="text"] {
        width: 315px;
    }
    .main-menu ul li {
        display: block;
    }
    .main-menu ul li a {
        display: block;
        line-height: 45px;
        
    }
    .main-menu ul li + li a {
        border-top: 1px solid #0682d2;
    }
    
    .main-menu {
        display: none;
        ul {
            padding-top: 5px;
        }
    }
    
    ul.story {
        margin: 0 0 0 40px;
    }
    
    .main-annotation.list,
    main.detail .main-annotation.list,
    main.detail .breadcrumb {
        margin-left: 0;
    }
    
    aside {
	width: auto;
	float: none;
	margin-top: 40px;
	margin-bottom: 40px;
    }
    
    aside a.more {
        text-align: left;
        display: inline;
    }
    
    main.detail .quiz {
        margin: 0;
    }
    
    main.detail {
        padding: 0;
        width: auto;
        float: none;
    }
    
    .burger {
        width: 45px;
        position: absolute;
        top: 17px;
        right: 20px;
        cursor:pointer;
        
        span {
            display: block;
            width: 100%;
            height: 3px;
            background: #000;
            + span {
                margin-top: 14px;
            }
        }
    }
    
    .main-annotation {
	padding: 80px 85px 30px 30px;
	width: auto;
        font-size: 18px;
        line-height: 22/18;
    }
    
    .main-annotation.list {
	padding: 65px 0 40px 0;

    }
    
    .main-annotation .logo-100-tablet {
        width: 220px;
        display: block;
        margin-bottom: 50px;
        margin-top: 0;
        margin-left: 15px;
    }
    .main-annotation .logo-100,
    .main-annotation .banan-white {
        display: none;
    }
    
    .articles-wrapper, .articles-wrapper + .articles-wrapper {
	margin-left: 0;
	margin-right: 0;
    }
    
    .articles-wrapper .articles article,
    .articles-wrapper .articles article:nth-child(3n+1) {
	width: auto;
	float: none;
	margin: 0 0 45px 0;
	position: relative;
        .clearfix();
  }  
    .articles-wrapper .articles article:last-child {
        margin: 0 0 0 0;
    }
    
    
    
    .articles-wrapper .articles article .stick {
        right: 13px;
    }
    
    .articles-wrapper h3 {
        margin: 0 0 15px 0;
    }
    
    .articles-wrapper {
        padding: 20px 25px 25px 25px;
    }
    
    .articles-wrapper h2 {
        margin-bottom: 20px;
    }
    
    footer .csu-logo-footer {
        margin-right: 80px;
    }
    
    footer .footer-menu.fm-1,
    footer .footer-menu.fm-2,
    footer .footer-menu.fm-3 {
        width: 245px;
        margin: 0;
    }
    
    ul.story > li:before {
        top: -2px;
    }
}
/*------------------------------*/
@media (min-width: 746px) and (max-width: 1279px) {
    .articles-wrapper a.thumbnail {
        width: 345px;
        display: block;
        position: relative;
        float: left;
        margin-right: 25px;
    }
}
/*------------------------------*/
@media (max-width: 746px) {
    .container {
        width: auto;
        padding: 0 10px;
    }
    
    
    
    .banan-big-red {
        display: none;
    }
    
    header .search {
	top: 40px;   /**/
        margin: 0;
        width: 100%;
        padding: 20px 10px;
        float: none;
    }
    header .search input[type="text"] {
	width: 100%;
    }
    .banan-big-blue {
	right: 20px;
        height: 375px;
        top: -160px;
    }
    
    .csu-logo {
        margin-left: 5px;
    }
    
    header .search {
        display: none;
    }
    
    header .search input[type="submit"] {
	top: 33px;
	right: 23px;
    }
    
    h1 {
        padding-top: 0;
    }
    
    ul.story {
        margin: 0 20px 0 20px;
    }
    
    ul.areas {
        width: auto;
        float: none;
        padding: 0 0 0 20px;
        
        + ul.areas {
            padding: 10px 0 0 20px;
        }
    }
    
    ul.story > li > ul li a,
    ul.areas li a {
        line-height: 1.3;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .story-item .left,
    .story-item .right {
        width: auto;
        float: none;
    }
    
    .search-button {
        width: 25px;
        height: 25px;
        background: transparent url(../images/CSU/search-white.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        top:22px;
        right: 117px;
        cursor: pointer;
    }
    
    .main-annotation,
    .main-annotation.list {
        padding: 40px 20px;
        margin-left: 0;
    }
    
    .main-annotation .logo-100-tablet {
	width: 160px;
	margin-left: 0;
    }   
    
    .articles-wrapper h3 {
        margin-top: 10px;
    }
    
    .articles-wrapper .annotation {
        /*display: none;*/
        margin-bottom: 2em;
    }
    
    .articles-wrapper .articles article, 
    .articles-wrapper .articles article:nth-child(3n+1) {
        margin: 0 0 10px 0;
    }
    
    footer .logo-100-footer {
	width: 155px;
	margin-bottom: 20px;
	margin-left: 20px;
    }
    footer .csu-logo-footer {
	width: 129px;
	margin-bottom: 20px;
	margin-left: 26px;
	margin-right: 0;
    }
    footer {
        padding: 30px 0;
    }
    
    .top {
        bottom: 20px;
        right: 20px;
    }
    
    footer .twitter,
    footer .instagram {
        float: right;
        margin-left: 15px;
    }
    
    main.detail .quiz p.play a.button {
        line-height: 1.4;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    main.detail .quiz {
        padding: 25px;
    }
    
    .csu-logo.logo-2 {
         display: none;
    }
    
    .footer-menu ul {
        padding-left: 21px;
    }
}

/*------------------------*/
.addtoany_content {
    text-align: right;
    clear: both;
    margin: 16px 0;
}
.a2a_kit, .a2a_menu, .a2a_modal, .a2a_overlay {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
.addtoany_list {
    display: inline;
    line-height: 16px;
}
.a2a_kit a {
    cursor: pointer;
}
.addtoany_list a, .widget .addtoany_list a {
    border: 0;
    box-shadow: none;
    display: inline-block;
    font-size: 16px;
    padding: 0 4px;
    vertical-align: middle;
}
.addtoany_list a:not(.addtoany_special_service) > span {
    border-radius: 4px;
    display: inline-block;
    opacity: 1;
}
.a2a_kit .a2a_svg {
    background-repeat: repeat;
}
.addtoany_list a span {
    display: inline-block;
    float: none;
}
.a2a_svg {
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    padding: 0;
    width: 32px;
}
.addtoany_list a:not(.addtoany_special_service) > span {
    border-radius: 4px;
    display: inline-block;
    opacity: 1;
}
.addtoany_list a span {
    display: inline-block;
    float: none;
}
.a2a_label {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0 0,0 0,0 0);
    -webkit-clip-path: polygon(0 0,0 0,0 0);
    overflow: hidden;
    height: 1px;
    width: 1px;
}
#cookie-bar .cookie-bar-text {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.klik {text-decoration:underline;
          text-decoration-color:#0059A9;
          color:#0059A9;
          cursor:pointer
}

.csu-block-column {
	flex: 1;
	flex-basis: 100%;
	margin-bottom: 1em;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

@media (min-width:960px) {
.csu-block-columns {
	display: flex;
	flex-wrap: wrap;
}
}

@media (min-width:782px) {
.csu-block-columns {
	flex-wrap: nowrap;
}
}


@media (min-width:600px) {
.csu-block-column {
	flex-basis: 50%;
	flex-grow: 0;
}
.csu-block-column:nth-child(odd) {
	margin-right: 32px;
}
.csu-block-column:not(:first-child), .csu-block-column:nth-child(2n) {
	margin-left: 32px;
}
.csu-block-column:not(:last-child) {
	margin-right: 32px;
}

.csu-block-image {
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}
.csu-block-image img {
	max-width: 100%;
}
.csu-block-image.aligncenter {
	text-align: center;
}
.csu-block-image.alignfull img, .csu-block-image.alignwide img {
	width: 100%;
}
.csu-block-image .aligncenter, .csu-block-image .alignleft, .csu-block-image .alignright, .csu-block-image.is-resized {
	display: table;
	margin-left: 0;
	margin-right: 0;
}
.csu-block-image .aligncenter>figcaption, .csu-block-image .alignleft>figcaption, .csu-block-image .alignright>figcaption, .csu-block-image.is-resized>figcaption {
	caption-side: bottom;
	display: table-caption;
}
.csu-block-image .alignleft {
	float: left;
	margin-right: 1em;
}
.csu-block-image .alignright {
	float: right;
	margin-left: 1em;
}
.csu-block-image .aligncenter {
	margin-left: auto;
	margin-right: auto;
}
.csu-block-image figcaption {
	color: #555d66;
	font-size: 13px;
	margin-bottom: 1em;
	margin-top: .5em;
	text-align: center;
}
}


.breadcrumbs {}
.breadcrumbs-horizontal {}
.lfr-component {}

.lfr-component li:not(:first-child)::before {
        display: inline-block;
	content: "\0020";

	width: 5px;
        height: 10px;
	margin: 0 5px;
	
        background: transparent url(../images/CSU/caret-right.svg) no-repeat center center;
        background-size: contain;
}


.portlet-Attachments ul {
    list-style-image: none;
    list-style-type: none;
}

@media (min-width: 600px) {
    .csu-block-column:not(:first-child), .csu-block-column:nth-child(2n) {
            margin-left: 0 !important;
    }
}


.portlet-dropzone .portlet-column-content .portlet-column-content-only {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}


#layout-column_column-1 {
	padding: 0 !important;
}

div.obsah h1 {
	padding-left:75px;
}

.bgcreator {
	background-color:#ffffff; 
	height:100%; padding-left:4000px; 
	margin-left:-4000px; 
	padding-right:4000px; 
	margin-right:-4000px; 
	z-index:-100; 
	position:absolute;
	padding-top:20px;
	padding-bottom:20px;
	top:0px;
	left:0px;
}

body.compensate-for-scrollbar {

    margin-right: 0px !important;

}
/*-------------------------------------------------------*/
.wp-block-gallery {
 display:flex;
 flex-wrap:wrap;
 list-style-type:none;
 padding:0;
}
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
 display:flex;
 flex-direction:column;
 flex-grow:1;
 justify-content:center;
 margin:0 16px 16px 0;
 position:relative
}
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure {
 height:100%;
 margin:0
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
 .wp-block-gallery .blocks-gallery-image figure,
 .wp-block-gallery .blocks-gallery-item figure {
  align-items:flex-end;
  display:flex;
  justify-content:flex-start
 }
}
.wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item img {
 display:block;
 height:auto;
 max-width:100%;
 width:100%
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
 .wp-block-gallery .blocks-gallery-image img,
 .wp-block-gallery .blocks-gallery-item img {
  width:auto
 }
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
 background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 60%,transparent);
 bottom:0;
 color:#fff;
 font-size:13px;
 max-height:100%;
 overflow:auto;
 padding:40px 10px 5px;
 position:absolute;
 text-align:center;
 width:100%
}
.wp-block-gallery .blocks-gallery-image figcaption img,
.wp-block-gallery .blocks-gallery-item figcaption img {
 display:inline
}
.wp-block-gallery.is-cropped .blocks-gallery-image a,
.wp-block-gallery.is-cropped .blocks-gallery-image img,
.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img {
 width:100%
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
 .wp-block-gallery.is-cropped .blocks-gallery-image a,
 .wp-block-gallery.is-cropped .blocks-gallery-image img,
 .wp-block-gallery.is-cropped .blocks-gallery-item a,
 .wp-block-gallery.is-cropped .blocks-gallery-item img {
  -o-object-fit:cover;
  flex:1;
  height:100%;
  object-fit:cover
 }
}
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
 width:calc(50% - 8px)
}
.wp-block-gallery .blocks-gallery-image:nth-of-type(2n),
.wp-block-gallery .blocks-gallery-item:nth-of-type(2n) {
 margin-right:0
}
.wp-block-gallery.columns-1 .blocks-gallery-image,
.wp-block-gallery.columns-1 .blocks-gallery-item {
 margin-right:0;
 width:100%
}
@media (min-width:600px) {
 .wp-block-gallery.columns-3 .blocks-gallery-image,
 .wp-block-gallery.columns-3 .blocks-gallery-item {
  margin-right:16px;
  width:calc(33.33333% - 10.66667px);
 }
 .wp-block-gallery.columns-4 .blocks-gallery-image,
 .wp-block-gallery.columns-4 .blocks-gallery-item {
  margin-right:16px;
  width:calc(25% - 12px)
 }
 .wp-block-gallery.columns-5 .blocks-gallery-image,
 .wp-block-gallery.columns-5 .blocks-gallery-item {
  margin-right:16px;
  width:calc(20% - 12.8px)
 }
 .wp-block-gallery.columns-6 .blocks-gallery-image,
 .wp-block-gallery.columns-6 .blocks-gallery-item {
  margin-right:16px;
  width:calc(16.66667% - 13.33333px)
 }
 .wp-block-gallery.columns-7 .blocks-gallery-image,
 .wp-block-gallery.columns-7 .blocks-gallery-item {
  margin-right:16px;
  width:calc(14.28571% - 13.71429px)
 }
 .wp-block-gallery.columns-8 .blocks-gallery-image,
 .wp-block-gallery.columns-8 .blocks-gallery-item {
  margin-right:16px;
  width:calc(12.5% - 14px)
 }
 .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n),
 .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n),
 .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n),
 .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n),
 .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n),
 .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n),
 .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n),
 .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n),
 .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n),
 .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n),
 .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n),
 .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n),
 .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n),
 .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n),
 .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n),
 .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n) {
  margin-right:0
 }
}
.wp-block-gallery .blocks-gallery-image:last-child,
.wp-block-gallery .blocks-gallery-item:last-child {
 margin-right:0
}
.wp-block-gallery .blocks-gallery-item.has-add-item-button {
 width:100%
}
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright {
 max-width:305px;
 width:100%
}
.wp-block-gallery.aligncenter,
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright {
 display:flex
}
.wp-block-gallery.aligncenter .blocks-gallery-item figure {
 justify-content:center
}

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