/*
Theme Name: SAI Young Leaders
Theme URI: https://syl.idi.no/
Author: Creotec Limited
Author URI: http://creotec.com/
Description: SAI Young Leaders Bootstrap Responsive
Version: 1.0 
License: Private
Tags: SAI Young Leaders, Responsive
Text Domain: syl.idi.no 
*/

html { width: 100%;  height: 100%; }
body { font-family: 'Poppins', 'Open Sans', sans-serif; line-height:160%; color: #000; background-color: #ffffff; }
/*input,button,select,.btn { border-radius:0px !important; }*/

.xxtoplogonav .overlay { position: absolute; width: 100%;  height: 100%;  background: #000; opacity: 0.3; transition: all 0.2s ease-out; }
.toplogonav { position:relative; xxoverflow: hidden;}
.toplogonav .toplogo { max-width:300px; width:300px; margin-top: 20px; }
.toplogonav .navbar { padding:0px; margin-top: 20px; xxz-index:3;}
.toplogonav .navbar a { color: #fff; font-size: 1.1rem; font-weight: 500; }
.toplogonav .navbar a:hover,.toplogonav .navbar a:active, .toplogonav .nav-item .show { color: #cedb46; }
.toplogonav .navbar .current_page_parent .current_page_item a { color: #E30D25; }
.toplogonav .navbar-toggler { color: #ffffff; background-color: #0f4b87; }
.toplogonav .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
.toplogonav .dropdown-menu { border:0px none; xxborder-left: 1px solid #cedb46; border-radius:0px; margin-top:-1px; margin-left:-1px; background-color: inherit; }
.toplogonav .dropdown-menu .nav-item { border-right: 0px none; }
.toplogonav .offcanvas.show .nav-item { border:0px none; }
/*.toplogonav { height: 100vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url('images/bg-top-homepage.jpg'); border-bottom:20px solid #74B843; }*/
.toplogonav .offcanvas-title { font-size:1.5rem; font-weight: 700; color: #cedb46; }
.toplogonav .btn-outline-secondary { border-color: #cedb46; color: #cedb46; font-weight:500; }
.toplogonav .dropdown-item:focus,.toplogonav .dropdown-item:hover { background-color: transparent; color:#E30D25;  }
.toplogonav .navbar-toggler-icon { width:2.0rem; height:2.0rem; }
.toplogonav .navbar-toggler { background-color: transparent; }

.home-slider-text .row { position:absolute; bottom:85px; max-width:80%; z-index:10; }
.home-slider-text h2 { color: #fff; font-size: 2.4rem; font-weight: 400; margin-top:20px; }

.home-slider-text-mobile { background-color: #74B843; margin-top:-2px; }
.home-slider-text-mobile h2 { color: #fff; font-size: 2.0rem; font-weight: 600; }


.green-dark { color: #007459!important; }
.green-light { color: #74B843!important; }
.brown-dark { color: #A25A48!important; }
.newbody h3 { color: #007459; font-size:1.5rem!important; }
.newbody p { margin-bottom:30px; }
.xnextprevious a { color: #007459!important; }

.pagetitle { padding-bottom:25px; }
.mainbody a { text-decoration: none; }
.mainbody a:hover { color: #0A7457; }
.mainbody h1 { font-size: 2.5rem; font-weight: 600; }
.mainbody h2 { font-size: 2.2rem; font-weight: 500; }
.mainbody h3 { font-size: 1.6rem; font-weight: 500; }
.mainbody h4 { font-size: 1.2rem; font-weight: 400; }
.mainbody h5 { font-size: 1.0rem; font-weight: 300; }
.mainbody .lead { font-weight: normal; }
.topbreadcrumb { color: #74B843!important; } 
.topbreadcrumb p { padding-bottom: 20px; } 
.topbreadcrumb a { color: #007459!important; }

.homeintro { background-color: #ebecde; position:relative; xxz-index:3; }
.greengrass { color: #fff; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url('images/bg-green-grass.jpg'); }
.greengrass .greengrassinner { background: rgba(10,116,87,0.8); padding:30px; font-size:1.3rem; position:relative; z-index:10; }

.greengrassinner::before { border: 30.5px solid transparent; border-top: 0.5px solid rgba(10,116,87,0.8); border-bottom: 0; height: 0; width: 0; border-top-width: 100px; content: ""; display: block; position: absolute; left: 6rem; bottom: -70px; transform-origin: center; transform: rotate(90deg) skew(343deg) translateY(16.6666666667px); }

.saifocus .col-lg-1 p { padding:0px; margin:0px; }
.yearbuttonbanner { position:relative; z-index:3; overflow-x:hidden; }
.yearbuttonbanner a { color: #fff; }
.yearbuttonbanner a:hover { color: #ebecde; }
.yearbuttonbanner p { margin-top: 1.2rem; margin-bottom: 1.2rem; }
.yearbuttonbanner h3 { font-size: 1.7rem; }

.sylprogramme { background-color: #ebecde; }
.sylprogramme .nav-tabs { position:relative; z-index:3; }
.sylprogramme a { color: #74B843; }
.sylprogramme .with-arrow .nav-link.active { position: relative; }
.sylprogramme .with-arrow .nav-link.active::after { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #ebecde; position: absolute;  bottom: -6px; left: 50%; transform: translateX(-50%); display: block; }

#programmeTab button { color: #fff; font-size: 1.2rem; font-weight:600; }
#programmeTabContent li { border-bottom:1px solid rgba(255,255,255,0.7); padding: 8px 0px; }
#programmeTabContent li:last-child { border-bottom:0px none; }
#programmeTabContent .tabimage { padding:0px; margin:0px; }
#programmeTabContent .container { padding-right:0px; padding-left:0px; }
#programmeTab .nav-link { padding:15px; }
#self-tab,#self-body  { background-color: #007459; color: #fff; }
#people-tab,#people-body { background-color: #74B843; color: #fff; }
#universe-tab,#universe-body { background-color: #D5C879; color: #fff; }
#value-tab,#value-body { background-color: #A25A48; color: #fff; }

#nurtureTab button { color: #fff; font-size: 1.2rem; font-weight:600; }
#nurtureTabContent li { border-bottom:1px solid rgba(255,255,255,0.7); padding: 8px 0px; }
#nurtureTabContent li:last-child { border-bottom:0px none; }
#nurtureTabContent .tabimage { padding:0px; margin:0px; }
#nurtureTabContent .container { padding-right:0px; padding-left:0px; }
#nurtureTab .nav-link { padding:15px; }
#nurture-self-tab,#nurture-self-body  { background-color: #007459; color: #fff; }
#nurture-people-tab,#nurture-people-body { background-color: #74B843; color: #fff; }
#nurture-universe-tab,#nurture-universe-body { background-color: #D5C879; color: #fff; }
#nurture-value-tab,#nurture-value-body { background-color: #A25A48; color: #fff; }

#nurtureTabContent .owl-carousel { position: relative; }
#nurtureTabContent .owl-dots { counter-reset:dots; }
#nurtureTabContent .owl-dot:before { counter-increment:dots; content:counter(dots); margin:0px 5px; padding:5px; line-height:100%; color:#c0c0c0; }
#nurtureTabContent .owl-dot span { display:none !important; }
#nurtureTabContent .active:before,
#nurtureTabContent .owl-dot:hover:before { color:#000000; }
#nurtureTabContent .owl-dots { position: absolute; right:5%; bottom:20px; }
#nurtureTabContent .owl-dots .owl-dot { width: inherit; height: inherit; padding: 0 5px; margin: 5px 2px; background-color: #fff; color: #000; border: 1px solid #fff; border-radius: 0; }

.homeharvest h2 { font-size:3.5rem; font-weight: 700; }
.homeharvest h4 { font-size:1.4rem; font-weight: 700; }

#programmeTab .nav-link,#nurtureTab .nav-link { border-top-left-radius: 0.4rem!important; border-top-right-radius: 0.4rem!important; }
#programmeTabContent .tab-pane,#nurtureTabContent .tab-pane { border-bottom-left-radius: 0.4rem!important; border-bottom-right-radius: 0.4rem!important; }

.filter-geogrid-group .btn { padding:10px; font-size:1.0rem; }

.xbtn-group button { margin-right:5px; }
.xbtn-group .btn-pasai { background-color: #2daae1; color: #ffffff; border-color: #2daae1; }
.xbtn-group .btn-olacefs { background-color: #ed6c1d; color: #ffffff; border-color: #ed6c1d; }
.xbtn-group .btn-eurosai { background-color: #76b729; color: #ffffff; border-color: #76b729; }
.xbtn-group .btn-carosai { background-color: #c1d101; color: #ffffff; border-color: #c1d101; }
.xbtn-group .btn-asosai { background-color: #eba833; color: #ffffff; border-color: #eba833; }
.xbtn-group .btn-arabosai { background-color: #528ac8; color: #ffffff; border-color: #528ac8; }
.xbtn-group .btn-afrosai-e { background-color: #9a2307; color: #ffffff; border-color: #9a2307; }
.xbtn-group .btn-crefiaf { background-color: #e50051; color: #ffffff; border-color: #e50051; }
.xbtn-group .btn-no-region { background-color: #878786; color: #ffffff; border-color: #878786; }
.xbtn-group .btn-showall { background-color: #000000; color: #ffffff; border-color: #000000; }

.syltable thead { background-color: #74B843; color: #ffffff; }
.syltable tbody tr td:first-child { color: #007459; }

.footergreen { background-color: #74B843; }
.footergreen a { color: #000; text-decoration: none; }
.footergreen .shareicons a { color: #fff; font-size: 2.0rem; }

xxbody { position: relative; }
#svgholder { overflow-x:hidden; width:100%; height:100%; top:600px; left:0;  pointer-events: none;}
#Layer_1, #Layer_2 { position:relative; width:100%; height:100%; pointer-events: none; }


#Layer_1 { z-index:2; }
#Layer_2 { z-index:1; }

.floatiframediv { position: relative; z-index:3; }
.abovethevine { position:relative; z-index:10; }

/*SVG MAP*/
.mapael .map { position: relative; }
.mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; opacity: 0.70; filter: alpha(opacity=70); border-radius: 10px; padding: 10px; z-index: 1000; max-width: 300px; display: none; color: #343434; }
.mapael .zoomButton {  background-color: #fff; border: 1px solid #ccc; color: #000; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 3px; cursor: pointer; position: absolute; top: 0; font-weight: bold; left: 10px; font-size: 20px; -webkit-user-select: none; -khtml-user-select : none; -moz-user-select: none; -o-user-select : none; user-select: none; }
.mapael .zoomReset { top: 10px; }
.mapael .zoomIn { top: 45px; }
.mapael .zoomOut { top: 85px; }
        
#tooltip { background-color: #878786; color: #ffffff; padding: 15px 25px 10px 25px; border-radius: 4px; font-size: 13px; }
#tooltip[data-show] { display: block; }
#arrow,#arrow::before { position: absolute; width: 20px; height: 20px; background: inherit; }
#arrow { visibility: hidden; }
#arrow::before { visibility: visible; content: ''; transform: rotate(45deg); }
#tooltip[data-popper-placement^='top'] > #arrow { bottom: -4px; }
#tooltip[data-popper-placement^='bottom'] > #arrow { top: -4px; }
#tooltip[data-popper-placement^='left'] > #arrow { right: -4px; }
#tooltip[data-popper-placement^='right'] > #arrow { left: -4px; }
#tooltip .myText h4 { line-height: 1.4rem; padding:0px; padding-bottom:5px; margin-top:10px; font-size:1.3rem; }
#tooltip .myText p { line-height: 1.1rem; }

/*BACK TO TOP*/
.back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display:none; background-color: #171F32; border-color: #171F32; z-index:999; }
#back-to-top.btn-primary:hover { background-color: #007459; border-color: #007459; }
#back-to-top.btn-primary:active,#back-to-top.btn-primary:focus { background-color: #A25A48; border-color: #A25A48; }

/*PAGINATION*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #006699; border-color:#006699;  }
ul.clearfix.pagination { background-color: #006699; border-color:#006699; }
.pagination>li:first-child>a, .pagination>li:first-child>span { border-radius: 0px !important; }
.pagination>li:last-child>a, .pagination>li:last-child>span { border-radius: 0px !important; }
.page-item.active .page-link { background-color:#006699; border-color:#006699; }
.page-link { color:#006699; }
.pagination { margin-top:20px; }

/*PAGING CLASS*/
.pagingclass li { padding:5px 10px; }

/* Very large desktops */
@media (min-width: 1400px) {
	.xbody{ border-left:5px solid grey !important; } /*DEDUG REMOVE*/
}
/* Large desktops and laptops */
@media (min-width: 1199px) and (max-width: 1399px) {
	.xbody{ border-left:5px solid orange !important; } /*DEDUG REMOVE*/
	#Layer_1, #Layer_2 { margin-left:-100px; width: 2000px; }
	#svgholder { top:300px;}
}
/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.xbody{ border-left:5px solid yellow !important; } /*DEDUG REMOVE*/
	.toplogonav .toplogo { width:300px; }
	#Layer_1, #Layer_2 { margin-left:-200px; width: 2000px; }
	#svgholder { top:280px;}
	.toplogonav { background-position: 80% 100%!important; }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
	.xbody{ border-left:5px solid green !important; } /*DEDUG REMOVE*/
	.toplogonav .toplogo { width:300px; }
	.toplogonav .offcanvas { background-color: #0f4b87; }
	.home-slider-text h2 { color: #fff; font-size: 2.0rem; font-weight: 600; }
	.yearbuttonbanner h3 { font-size: 1.7rem; }
	#Layer_1, #Layer_2 { margin-left:-400px; width: 2000px; }
	#svgholder { top:350px;}
	.homeallnews { text-align:left!important; }
	.mapael .mapTooltip { max-width:250px; }
	.toplogonav { background-position: 70% 100%!important; }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	.xbody{ border-left:5px solid blue !important; } /*DEDUG REMOVE*/
	.toplogonav .toplogo { width:300px; }
	.pageoverlay-right { display:none; }
	.toplogonav .offcanvas { background-color: #0f4b87; }
	.home-slider-text h2 { color: #fff; font-size: 2.0rem; font-weight: 600; }
	#Layer_1, #Layer_2 { margin-left:-600px; width: 2000px; }
	#svgholder { top:300px; display:none;}
	.footergreen .text-end { text-align:left!important; }
	.homeallnews { text-align:left!important; }
	.mapael .mapTooltip { max-width:250px; }
	.toplogonav { background-position: 80% 100%!important; }
}

/* Landscape phones and smaller */
@media (max-width: 480px) {
	.xbody{ border-left:5px solid red !important; } /*DEDUG REMOVE*/
	.toplogonav .toplogo { width:300px; }
	.pageoverlay-right { display:none; }
	.toplogonav .offcanvas { background-color: #0f4b87; }
	.home-slider-text h2 { color: #fff; font-size: 2.0rem; font-weight: 600; }
	#Layer_1, #Layer_2 { margin-left:-700px; width: 2000px; }
	#svgholder { top:300px; display:none;}
	.footergreen .text-end { text-align:left!important; }
	.homeallnews { text-align:left!important; }
	.mapael .mapTooltip { max-width:250px; }
	.toplogonav { background-position: 80% 100%!important; }
}