body { padding:0; margin:0;}
.MBSContainer { width:100%; display:table; max-width:1500px; }
.MBSContainer .col1 { display: table-cell; position:relative; vertical-align:top; /*position:relative; float: left;height:100%; min-height:100vh;*/ width: 30%; background-color:#c6d8c0; z-index:9;  }
.MBSContainer .col2 { position:relative; display: table-cell; vertical-align:top; /*float: left;*/ width: 70%; }
.MBSContainer .headBar { position:absolute; top:0; left:0; width:100%; height:30px; background-color:#c6d8c0; opacity:50%; }


div.container { padding:0; margin:0; /*min-width:600px; max-width:1500px;*/ }

.MBSContainer .col1 div.logo { position:absolute; top:10px; left:10px; z-index: 10; }
.MBSContainer .col1 div.logo a { text-decoration:none; }
.MBSContainer .col1 div.logo a img { height:20px; width:auto; }

.MBSContainer .col1 .head { position:relative; width: 100%; /*background-image: url(/sites/all/themes/narabnews/templates/threeyrsmbs2/images/bgLeftHead.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;*/ }
.MBSContainer .col1 .head img.bgHead { position:relative; top:0; left:0; width:100%; height:auto;}
.MBSContainer .col1 .head img.imgHead { position:absolute; top:0; left:0; width:100%; height:auto;
         animation-delay: 4s;
        -webkit-animation: fadeInLeft 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeIn 4s; /* Firefox < 16 */
        -ms-animation: fadeIn 4s; /* Internet Explorer */
         -o-animation: fadeIn 4s; /* Opera < 12.1 */
            animation: fadeIn 4s;
}
.MBSContainer .col1 h1 { position:absolute; top:-16%; left:1%; color:#aeb5ac; font-size:24vw; line-height:24vw; padding:0; margin:0; font-family:'Playfair Display'; font-weight: 900;}

.MBSContainer .col1 span#yrsCounterLbl { position:absolute; left: 25%; top: 9.5vw; font-size: 2vw; color:#aeb5ac; }


.MBSContainer .col1 div.lblCongtainer { position:absolute; top:0; left:0; width:95%; left: 50%; margin-left: -47.5%; padding:69% 0 0 0; visibility:hidden; }
.MBSContainer .col1 div.lblCongtainer.active {
        visibility:visible;
        -webkit-animation: fadeInLeft 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeInLeft 2s; /* Firefox < 16 */
        -ms-animation: fadeInLeft 2s; /* Internet Explorer */
         -o-animation: fadeInLeft 2s; /* Opera < 12.1 */
            animation: fadeInLeft 2s;}
.MBSContainer .col1 div.lblCongtainer h2 { color: #fff;  font-family:'Playfair Display'; font-weight: 900; font-size:1.8vw; line-height:1.8vw; display:block; padding:0; margin:0; }
.MBSContainer .col1 div.lblCongtainer h3 {  color: #fff; font-family:'Playfair Display'; font-weight: 900;  font-size:1.2vw; line-height: 1.4vw; display:block; padding:0; margin:8px 0; }

.MBSContainer .col1 ul.groupListMenu { position: relative; padding: 0; margin: 3% auto 0 auto; display: block; width: 90%; min-height:100vh; }
.MBSContainer .col1 ul.groupListMenu li { display:block; float:left; width: 49%; /*height: 130px;*/ margin: 0 0 10px 0; text-align: center;}
.MBSContainer .col1 ul.groupListMenu li a { color:#4b8740; text-decoration: none; font-family: "Playfair Display"; font-size: 0.9vw; line-height:0.9vw; font-weight: bold; display:block;}
.MBSContainer .col1 ul.groupListMenu li a span { display:block; margin:6px 0 0 0; padding:0 2px; }
.MBSContainer .col1 ul.groupListMenu li a .roundedIcon { cursor:pointer; display:block; width:80px; height:80px; background-color:#4b8740; border-radius: 50%; margin: 0 auto; }
.MBSContainer .col1 ul.groupListMenu li a .roundedIcon img { width:100%; height:auto; /*opacity:0*/}
.MBSContainer .col1 ul.groupListMenu li.active a .roundedIcon img { opacity:1 }
.MBSContainer .col1 ul.groupListMenu li a:hover .roundedIcon img { opacity:1 }

.MBSContainer .col1 ul.groupListMenu li:nth-child(1) a { color: #4b8740; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(1) a .roundedIcon { background-color: #4b8740; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(2) a { color: #069599; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(2) a .roundedIcon { background-color: #069599; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(3) a { color: #65873b; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(3) a .roundedIcon { background-color: #65873b; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(4) a { color: #664270; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(4) a .roundedIcon { background-color: #664270; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(5) a { color: #961c1c; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(5) a .roundedIcon { background-color: #961c1c; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(6) a { color: #495556; }
.MBSContainer .col1 ul.groupListMenu li:nth-child(6) a .roundedIcon { background-color: #495556; }


.MBSContainer .col2 div.timelineMBS { position:relative; display:none; }
.MBSContainer .col2 div.timelineMBS.active { display:block;
        -webkit-animation: fadeInLeft 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeInLeft 2s; /* Firefox < 16 */
        -ms-animation: fadeInLeft 2s; /* Internet Explorer */
         -o-animation: fadeInLeft 2s; /* Opera < 12.1 */
            animation: fadeInLeft 2s;}
/*.MBSContainer .col2 div.timelineMBS .headBar { position:absolute; width:100%; top:0; left:0; background-color:#4b8740;  opacity:50%; }*/
.MBSContainer .col2 div.timelineMBS:before { position:absolute; top:5px; left:21.9%; border-left:1px solid #d7cfc0; content:''; display:block; width:1px; height:100%; }
.MBSContainer .col2 div.timelineMBS h2 { margin: 40px 0 10px 23%; padding:0; font-family: "Playfair Display"; font-size: 18px; line-height: 18px; font-weight: bolder;}
.MBSContainer .col2 div.timelineMBS ul { display:block; height:auto; width:78%; margin: 0 0 0 20%; padding:0;}
.MBSContainer .col2 div.timelineMBS ul li { padding:0; margin:0; position:relative; list-style: none; font-family:"Isento-Medium" }
.MBSContainer .col2 div.timelineMBS ul li .imgIcon { position:absolute; left:-15%; min-width:50px; min-height:50px; max-width: 110px; max-height: 110px; width:8.5vw; height:8.5vw; overflow:hidden; border-radius: 50%; cursor:zoom-in}
.MBSContainer .col2 div.timelineMBS ul li .imgIcon.zoom { top:-50px; left:-200px; width:300px; height:300px; max-width: 300px; max-height: 300px; z-index:99;   transition: transform .2s; transform: scale(1.5); cursor:zoom-out}
.MBSContainer .col2 div.timelineMBS ul li .imgIcon img { width:100%; height:auto; padding:0; margin:0;}
.MBSContainer .col2 div.timelineMBS ul li .txtInfo { position:relative; padding:0; margin:0 0 0 4.3%; display:block; border: 1px solid transparent; font-size:1vw; min-height:8.5vw; }
.MBSContainer .col2 div.timelineMBS ul li .txtInfo p { padding:0; margin: 4px 0 0 0; font-size:1vw;}
/*.MBSContainer .col2 div.timelineMBS ul li .txtInfo:before { display:block; position:absolute; left:-1.8%; width:16px; height:16px; background-color:#4a8740; content:''; border-radius: 50%;}*/
.MBSContainer .col2 div.timelineMBS ul li .txtInfo h3 { display:block; position:relative; padding:0; margin:4% 0 0 0; font-size:1vw; font-family: "Isento-Bold"; }
.MBSContainer .col2 div.timelineMBS ul li .txtInfo h3:before { display:block; position:absolute; top:4px; left:-3%; min-width:8px; min-height:8px; max-width:14px; max-height:14px;  width:1vw; height:1vw; background-color:#4a8740; content:''; border-radius: 50%;}

.MBSContainer .col2 .headBarLogo { height:20px; padding:0; margin:0 0 0 0; }
.MBSContainer .col2 .headBarLogo a { display:table; text-decoration: none; display:block; padding:0; margin:4px 4px; font-size:14px; color:#000;}
.MBSContainer .col2 .headBarLogo a img { height:20px; width:auto; vertical-align:middle;}
.MBSContainer .col2 .headBarLogo a span {vertical-align:middle;}

div.footer { position:absolute; bottom:0; display:block; width:100%; padding:10px 4px; margin:0; font-family: "Isento-Medium";}
div.footer p { padding:0; margin:0; font-size:1vw; color:#5f7176; }


.MBSContainer .col2 div.timelineMBS:nth-child(2) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(2) h3
{  color: #4b8740;}
.MBSContainer .col2 div.timelineMBS:nth-child(2) ul li .txtInfo h3:before
.MBSContainer .col2 div.timelineMBS:nth-child(2) .headBar
{ background-color: #4b8740; }
.MBSContainer .col2 div.timelineMBS:nth-child(2):before { border-left:1px solid #4b8740; }


.MBSContainer .col2 div.timelineMBS:nth-child(3) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(3) h3
{  color: #069599; }
.MBSContainer .col2 div.timelineMBS:nth-child(3) ul li .txtInfo h3:before,
.MBSContainer .col2 div.timelineMBS:nth-child(3) .headBar
{ background-color: #069599; }
.MBSContainer .col2 div.timelineMBS:nth-child(3):before { border-left:1px solid #069599; }

.MBSContainer .col2 div.timelineMBS:nth-child(4) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(4) h3
{  color: #65873b; }
.MBSContainer .col2 div.timelineMBS:nth-child(4) ul li .txtInfo h3:before,
.MBSContainer .col2 div.timelineMBS:nth-child(4) .headBar
{ background-color: #65873b; }
.MBSContainer .col2 div.timelineMBS:nth-child(4):before { border-left:1px solid #65873b; }

.MBSContainer .col2 div.timelineMBS:nth-child(5) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(5) h3
{  color: #664270; }
.MBSContainer .col2 div.timelineMBS:nth-child(5) ul li .txtInfo h3:before,
.MBSContainer .col2 div.timelineMBS:nth-child(5) .headBar
 { background-color: #664270; }
.MBSContainer .col2 div.timelineMBS:nth-child(5):before { border-left:1px solid #664270; }


.MBSContainer .col2 div.timelineMBS:nth-child(6) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(6) h3
{  color: #961c1c; }
.MBSContainer .col2 div.timelineMBS:nth-child(6) ul li .txtInfo h3:before,
.MBSContainer .col2 div.timelineMBS:nth-child(6) .headBar
{ background-color: #961c1c; }
.MBSContainer .col2 div.timelineMBS:nth-child(6):before { border-left:1px solid #961c1c; }

.MBSContainer .col2 div.timelineMBS:nth-child(7) h2,
.MBSContainer .col2 div.timelineMBS:nth-child(7) h3
{  color: #495556; }
.MBSContainer .col2 div.timelineMBS:nth-child(7) ul li .txtInfo h3:before,
.MBSContainer .col2 div.timelineMBS:nth-child(7) .headBar
{ background-color: #495556; }
.MBSContainer .col2 div.timelineMBS:nth-child(7):before { border-left:1px solid #495556; }


/* SAFARI FIX */
@media not all and (min-resolution:.001dpcm) { @media {
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo h3 { letter-spacing: -0.09em;}
}}

@media only screen and (min-width: 1200px) {
    .MBSContainer .col1 ul.groupListMenu li { width:33.3%; min-height:130px; }
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo { min-height:110px; }
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo h3 { font-size:15px;}
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo p { font-size: 15px;}
    .MBSContainer .col1 ul.groupListMenu li a { font-size: 14px; line-height: 14px; }

    .MBSContainer .col1 div.lblCongtainer h2 { font-size:26px; line-height:26px;}
    .MBSContainer .col1 div.lblCongtainer h3 { font-size:20px; line-height:20px; }
    div.footer p { font-size:12px; }
    /* SAFARI FIX */
    /*@media not all and (min-resolution:.001dpcm) { @media {
        .MBSContainer .col1 h1  { top:-50px; }
        .MBSContainer .col1 div.lblCongtainer h2 { font-size: 1.8vw; line-height: 1.8vw; }
    }}*/
}


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

    /*.MBSContainer .col2 div.timelineMBS ul li .txtInfo { min-height:110px; }*/
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo h3 { font-size:10px;}
    .MBSContainer .col2 div.timelineMBS ul li .txtInfo p { font-size: 10px;}
    .MBSContainer .col1 ul.groupListMenu li a { font-size: 8px; line-height: 8px; }

    .MBSContainer .col1 div.lblCongtainer h2 { font-size:16px; line-height:16px;}
    .MBSContainer .col1 div.lblCongtainer h3 { font-size:10px; line-height:10px; }

    .MBSContainer .col1 ul.groupListMenu li { min-height:100px;}
    .MBSContainer .col1 ul.groupListMenu li a .roundedIcon { width:65px; height:65px; }

    div.footer p { font-size:10px; }

}


@media only screen and (min-width: 1500px) {
    .MBSContainer .col1 h1 {font-size:360px;line-height: 360px;}

}


/*BEGIN MOBILE STYLE */
@media (min-width: 320px) and (max-width: 480px) {

.MBSContainer { display:block; }
.MBSContainer .col1 { width:100%; display:block; clear:both;}
.MBSContainer .col2 { width:100%; display:block; clear:both; padding:0 0 100px 0;}

 .MBSContainer .headBar { display:none; position:relative; }


.MBSContainer .col1 .head { }
.MBSContainer .col1 ul.groupListMenu { width:100%; margin-top:0; min-height:90px; }
.MBSContainer .col1 ul.groupListMenu li { width:16.66%; }
.MBSContainer .col1 ul.groupListMenu li a { font-size:8px; line-height:8px;}
.MBSContainer .col1 ul.groupListMenu li a .roundedIcon { width: 50px; height:50px; }



.MBSContainer .col1 h1 { font-size: 78vw; line-height: 78vw; top:-65px; }
.MBSContainer .col1 h1.counting { font-size:150px; }
.MBSContainer .col1 span#yrsCounterLbl { top:150px; font-size:20px; }
.MBSContainer .col1 div.lblCongtainer {  }
.MBSContainer .col1 div.lblCongtainer h2 { font-size:7.1vw; line-height: 7.1vw;}
.MBSContainer .col1 div.lblCongtainer h3 { font-size:4.4vw;  line-height: 4.8vw; }


.MBSContainer .col2 .headBarLogo { position:absolute; left:0; top:-48px; }
.MBSContainer .col2 div.timelineMBS:before { left: 21.6%;}
.MBSContainer .col2 div.timelineMBS ul {}
.MBSContainer .col2 div.timelineMBS ul li .imgIcon { left:-60px; width:50px; height:50px; max-width:100px; max-height:100px;}
.MBSContainer .col2 div.timelineMBS ul li .imgIcon.zoom { top:-100px; left:-30px; width:200px; height:200px; max-width: 200px; }
.MBSContainer .col2 div.timelineMBS ul li .txtInfo { min-height:60px; font-size:12px; line-height:12px; margin-left: 3.2%;}
.MBSContainer .col2 div.timelineMBS ul li .txtInfo h3 { font-size:12px; line-height:12px; letter-spacing:-0.04em; margin-top:10px; padding-left: 6px;}
.MBSContainer .col2 div.timelineMBS ul li .txtInfo p { font-size:12px; line-height:12px; margin-left: 6px;}
.MBSContainer .col2 div.timelineMBS ul li .txtInfo h3:before { left: -2.6%;}
.MBSContainer .col2 div.timelineMBS h2 { margin-top:20px; }



div.footer p { font-size:9px; text-align:center;}
div.footer p span { display:block; width:100%;}
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}