/* 
Theme Name: Vieuws Theme
Author: Jules Colle
Author URI: http://bdwm.be
Description: The Vieuws Theme
*/

/* ------------------------------------------------------*/
/* General */
/* ------------------------------------------------------*/

body { font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; font-size: 12px; background-color: #F8F8F8; line-height: 1.2; }

.alignleft { float: left; margin-right: 10px; }
.alignright { float: right; margin-left: 10px; }
.aligncenter { margin: 10px auto; }

.clear, .clearfloat { clear:both; }

img { max-width: 100%; height:auto; }
.wp-caption { max-width: 100%; }

a, a:visited { color: #082E55; }
a:hover, a:focus { color: #082E55; }

a:hover { -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear;  transition: all .3s linear; }
a { -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear;  transition: all .2s linear; }

ul, ol {
    padding-left: 30px;
    list-style: disc;
}

h1 { margin: 0; }
h2 {text-transform: none;}

/* ------------------------------------------------------*/
/* Mobile vs. Desktop styling */
/* ------------------------------------------------------*/

html.mobile.phone .top-story-main { padding: 0 20px; }
html.mobile.phone .top-story-related { padding: 0 20px; }

.tablet-only, .desktop-only, .phone-landscape-only, .phone-portrait-only { display: none; }
html.desktop .desktop-only, html.tablet .tablet-only, html.phone-landscape .phone-landscape-only, html.phone-portrait .phone-portrait-only { display: inherit; }


/* ------------------------------------------------------*/
/* Header */
/* ------------------------------------------------------*/

/* ------------------------------------------------------*/
/* Header */
/* ------------------------------------------------------*/

#header-top { background: #003760; color: #ffffff; height: 36px; }
html.small-desktop #header-top {}
html.mobile.phone #header-top { background: #3A414B; color: #ffffff; height: 45px; }

#header-top a, #main-menu a { color: #cfcdcd; text-decoration: none;}
#header-top a:hover { color: #FFD503; }
#header-top-2 {
    margin-bottom: 20px;
    padding: 17px 0 0 0;
    position: relative;
    background: #003760;
    background: -moz-linear-gradient(top,  #003760 0%, #0456a2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003760), color-stop(100%,#0456a2));
    background: -webkit-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: -o-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: -ms-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: linear-gradient(to bottom,  #003760 0%,#0456a2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003760', endColorstr='#0456a2',GradientType=0 );

}

#main-nav-container-new { background: #003760; }
#main-nav-container-new .container { position: static; }
#top-menu { position: relative; line-height: 34px; text-align: right; padding: 0 22px 0 0; }
html.mobile.phone #top-menu { position: relative; line-height: 43px; }
#top-menu ul { margin: 0; padding:0; position: relative; z-index: 5; }
#top-menu ul li { display: inline-block; margin: 0 0 0 15px; font-size: 15px; }
#top-menu ul li:first-child { margin-left: 0;}
#top-menu .search-and-social { display: inline-block; margin:0; position: relative; z-index: 5;}
#top-menu .search-form { display:inline; }
#top-menu .search-form input { margin:0 5px 0 0; display: inline-block; padding:4px; width: 85px; font-size: 12px; }
#top-menu .search-form .submit-icon { margin-right: 10px; }
#top-menu .share-icons { display: inline; }
#top-menu .share-icons .share-icon { margin-left: 14px; font-size: 24px; vertical-align: middle; }
html.mobile #top-menu .search-form input { width: 90px; }
html.mobile #top-menu ul li { font-size: 11px; }

html.phone #top-menu ul, html.phone #top-menu .search-form { display:none; } 

#logo-container { width:250px; height:125px; margin: -33px 20px 12px 5px; float:left; }
#logo-container h1 { margin:0; height: 100%; }
#site-logo { display: block; width:100%; height:100%; background: url("images/vieuws-logo-4.png") no-repeat 0 center; text-indent:-9999px; background-size:contain;}

/*html.small-desktop #logo-container { width:188px; height:94px; margin-top: -15px; }*/
html.mobile #logo-container { width:170px; height:85px; margin-top: -20px; }
html.small-desktop #header-top { margin:0; }
html.small-desktop #header-top-2 { margin:0; }

#main-nav-container { float:left; width: 913px; }
html.mobile #main-nav-container { width: 553px; }
html.phone #main-nav-container { width: 420px; margin: 0 auto 5px; }
html.phone-portrait #main-nav-container { width: 300px; }

#main-nav-container { margin: 0 10px 0 20px; width: auto; float: none; overflow: hidden; display: block; position: relative; top: -5px; }
#main-nav-container img {  vertical-align: bottom; width: 100%; height: auto;}

#main-menu { font-size: 13px; }
#main-menu ul { margin: 5px 0 0; padding-left: 0; list-style: none; text-align: center; }
#main-menu ul li { display: inline-block; vertical-align:top; margin: 0;}
#main-menu ul li a { color: #ffffff; text-shadow: 0 1px 1px #000000; padding: 4px 3px 6px; text-align: center; display: table-cell; height: 31px; vertical-align: middle; /*max-width: 130px;*/ }
#main-menu ul li a:hover { background-color: #F8F8F8; color: #666666; text-shadow: 0 1px 1px #FFFFFF; }
#main-menu ul li.current-menu-item a { background-color: #F8F8F8; color: #666666; text-shadow: 0 1px 1px #FFFFFF; }

html.mobile #main-menu ul li { }
html.mobile #main-menu ul li a { font-size: 12px; padding: 10px 7px; max-width: 90px; }

html.phone #logo-container { width: 100%; margin: 0 0 15px; }
html.phone #site-logo { background-position: center; }
html.phone #main-menu { display: none; }

#main-menu-mobile { display: none; }
#main-menu-mobile a { background-color: #082E55; color: #FFFFFF; display: block; float: left; font-size: 19px; margin-right: 2px; padding: 8px 11px; text-decoration: none; box-shadow: 0 1px 2px #222222;}
#main-menu-mobile ul { margin:0; padding:0; list-style: none; display: block; width:421px; }
#main-menu-mobile > ul { top: 39px; position:absolute; z-index: 30; }
#main-menu-mobile ul li { display:block; margin:0; }
#main-menu-mobile ul li a { float: none; margin:0; box-shadow: none; border-bottom: 1px solid #22486F; }
#main-menu-mobile ul li.title > a { color: #ffffff; }
#main-menu-mobile ul li.title > a:after { font-family: 'FontAwesome';  ;content: ''; font-size: 16px; margin-left: 10px; }
#main-menu-mobile ul li li a:before { font-family: 'FontAwesome'; content: ''; margin: 0 10px; font-size: 16px; }

#main-menu-mobile .mobile-search-container { background-color: #082E55; text-align: center; padding: 20px 0 ;}
#main-menu-mobile .mobile-search-container form { margin:0; }
#main-menu-mobile .mobile-search-container input { display: inline-block; margin:0; }
#main-menu-mobile .mobile-search-container .submit-icon { display: inline-block; background-color: #C6C6C6; border: none; color: #333; font-size: 14px; box-shadow: 0 1px 2px #007C11;}
#main-menu-mobile .mobile-search-container .submit-icon:after { content: 'Search'; margin-left: 10px; }

html.phone #main-menu-mobile { position: absolute; display: block; left: 50%; margin-left: -210px; position: absolute; top: -41px; }
html.phone-portrait #main-menu-mobile { margin-left: -150px; }
html.phone-portrait #main-menu-mobile ul { width: 300px; }
html.phone-portrait #main-menu-mobile .mobile-search-container input { width: 153px; }

#top-menu ul { margin: 0 18px 0 0; display: inline-block;}

@media only screen and (min-width: 1200px) {
	#header-top .container, #header-top-2 .container, #main-nav-container-new .container { width: 1188px;}
	#main-menu ul li { margin: 0 2px 0 0;}
	#main-menu ul li a { padding-right: 6px; padding-left: 6px;}
}

/* ------------------------------------------------------*/
/* TOP STORY BOX */
/* ------------------------------------------------------*/

.top-stories-container { margin-bottom: 20px; }

.top-story-box { background-color: #ffffff; box-shadow: 0 0 10px #CCCCCC; margin: 0; }
.top-story-box a { text-decoration: none; }
.top-story-box h2 { margin-bottom: 8px; margin-top: 8px; }

.top-story-main {padding-left: 0px; padding-bottom: 0; overflow:auto; }
.top-story-main h2 { font-size: 20px; }
.top-story-main p { line-height: 30px; font-size:21px; margin-bottom: 10px; display: inline; }
/*.top-story-main iframe { margin-bottom: 20px; }*/
.top-story-main .meta { display:block; background: #ccc; padding: 5px 7px; font-size:19px; margin-right: 10px; text-shadow: 0 1px #dfdfdf; }
.top-story-main .read-more { display:inline-block; font-size:18px; padding: 0 5px; margin-left: 4px; }
.top-story-main .read-more:hover { background-color: #082E55; color:#ffffff; }

.top-story-main.no-video { padding: 0 20px; }

.no-related .top-story-main { padding-right: 20px; }
.single .top-story-main { padding-left:20px; }

.top-story-related {padding-right: 0px;}
.top-story-related .info {height: 50px; display:block; overflow:hidden; text-overflow: ellipsis; font-size: 13px; line-height:16px; font-weight: bold; }
.top-story-related ul { border-top: 1px solid #EEEEEE; padding-left: 0; list-style: none; margin-bottom:0; }
.top-story-related li { border-bottom: 1px solid #EEEEEE; padding: 6px; margin:0; overflow:hidden; height: 50px; }
.top-story-related li.stakeholder { background-color:#C5C5C5; }
.top-story-related li.stakeholder a { color: #082E55; text-shadow: 0 1px 0 #ddd; }

html.mobile.phone .top-story-related li:nth-child(n+5){ display:none; }

.top-story-box.single { height:auto; }
.top-story-box.single .top-story-main p { line-height: 1.4; font-size:12px; margin-bottom: 10px; display: block; }
.top-story-box.single .top-story-main .meta { line-height: 16px; font-size:12px; background: none; text-shadow: none; padding: 0; margin:10px 0; font-weight: bold; }

.top-story-box .top-story-related ul { overflow:auto; }

#top-stories-slider-wrap { position:relative; }
#top-stories-slider { }

#top-stories-slider-wrap .slider-prevnext { background: rgba(0,0,0,0.6); color: #ffffff; font-size: 40px; display: block; height: 40px; width: 30px; line-height:100%; position: absolute; top:43%; z-index:27; text-decoration: none; text-align: center; box-shadow: 0 2px 2px #555;  }
#slider-next { right: 418px; padding-left:5px; border-radius: 4px; }
#slider-prev { left: -2px; padding-right: 5px;border-radius: 4px; }
#top-stories-slider-wrap .slider-prevnext:hover { background: rgba(0,0,0,0.9); }

#top-stories-slider-wrap.full-width #slider-next { right: 16px; }
#top-stories-slider-wrap.full-width .video-thumb { /*max-height: 300px; overflow: hidden;*/  }
#top-stories-slider-wrap.full-width .video-thumb img { }

/*
#slider-nav { text-align:center; margin: -10px 0 10px; }
#slider-nav a { display: inline-block; width: 14px; height: 14px; text-indent: -9999px; background-color:#acacac; margin: 0 2px; border-radius: 7px; box-shadow: 0 1px 0 #fff; }
#slider-nav a.activeSlide { background-color: #082E55; }
*/

.top-story-box.single h2 { height: auto; margin-bottom: 10px; }
html.phone #top-stories-slider { height: auto; }
html.phone .top-story-box { height: auto; }
html.phone .top-story-box.single .top-story-related ul { max-height: none;}

html.mobile #top-stories-slider-wrap .slider-prevnext { top: 100px; }
html.mobile #slider-next { right: 334px; }
html.phone #slider-next, html.phone #top-stories-slider-wrap.full-width #slider-next { right: -4px; }
html.phone #slider-prev { left: -4px; }

.top-story-box.overlays .video-thumb { position:relative; display:block; }
.top-story-box.overlays .video-thumb img { width: 100%; margin-top: 0px; display:block; }
.top-story-box.overlays .caption-box { position: absolute; width: 100%; background-color: rgba(0,0,0,0.6); bottom: 20px; left:0; }
.top-story-box.overlays .inner-caption-box { color: #efefef; text-shadow: 0 1px 0 #000; width:83%; display: inline-block; vertical-align: middle; }

.top-story-box.overlays .caption-box .title { font-size: 17px; font-weight: bold; margin: 7px 0 4px; padding: 0 10px; }
.top-story-box.overlays .caption-box .content { padding: 0 10px 10px 10px; }
.top-story-box.overlays .caption-box .content p { font-size: 12px; line-height: 1em; }
.top-story-box.overlays .play-box { color: #FFFFFF; display: block; width: 15%; display: inline-block; vertical-align: middle; padding: 10px 0; }
.top-story-box.overlays .inner-play-box { font-size: 50px; height: 50px; margin: 0 10px; text-align: center; width: 50px; }
.top-story-box.overlays .inner-play-box img { margin:0; display: block; }
.top-story-box.overlays .video-thumb:hover .inner-play-box { color: #d0d0d0; }

.video-box .video-thumb .caption-box { position: absolute; width: 100%; background-color: rgba(0,0,0,0.6); bottom: 10px; left:0; }
.video-box .video-thumb .inner-caption-box { color: #efefef; text-shadow: 0 1px 0 #000; width:82%; display: inline-block; vertical-align: middle; font-weight:bold; }
.video-box .video-thumb .inner-play-box { font-size: 20px; height: 35px; margin:0; text-align: center; width: 35px; }
.video-box .video-thumb .inner-play-box img { margin:0; }
.video-box .video-thumb .play-box { color: #FFFFFF; display: block; width: 13%; display: inline-block; vertical-align: middle; padding: 10px 0; }
.video-box .video-thumb .title {background-color: transparent; padding-right:0;}
.video-box .video-thumb img { display: block; }

.top-story-box.overlays .top-story-related ul { border-top: none; }
.top-story-box.overlays .top-story-related ul li:first-child { }
.top-story-box.overlays .top-story-related ul li:last-child { border-bottom: none; }

html.mobile .top-story-box.overlays .top-story-related ul li:last-child { display: none; }
html.mobile .top-story-box.overlays .top-story-related ul li:nth-child(4) { padding-bottom:0; border-bottom: none; }
html.mobile .top-story-related h2 {font-size: 14px; margin-bottom:8px;}

html.mobile.phone .top-story-box.overlays .caption-box { bottom: 2px; }
html.mobile.phone .top-story-box.overlays .caption-box .date { font-size: 12px; color: #8B8B8B; }
html.mobile.phone .top-story-box.overlays .caption-box .title { font-size: 13px; font-weight: bold; margin: 7px 0 4px; }
html.mobile.phone .top-story-box.overlays .caption-box .content p { display:none; }
html.mobile.phone .top-story-box.overlays .inner-play-box { bottom: 6px; height: 30px; width: 30px;}

/* ------------------------------------------------------*/
/* WIDGETS */
/* ------------------------------------------------------*/

.widget { background-color: #ffffff; box-shadow: 0 0 10px #CCCCCC; margin: 0 0 20px 0; padding: 10px }
.widget .title { padding: 10px; background-color: #3A414B; color: #ffffff; margin: -10px -10px 10px -10px; }
.specialwidget .title { background-color: #9d9d9d !important; }
.custom-video-widget>.title { background-color: #3A414B !important; }

.widget.no-margins { padding: 0; margin: 0; }
.widget.no-margins .title { margin:0; }
.widget.no-margins img { display: block; } 

/* ------------------------------------------------------*/
/* VIDEO BOXES */
/* ------------------------------------------------------*/

.video-box { background-color: #ffffff; box-shadow: 0 0 10px #CCCCCC; margin: 0 0 20px 0; }
.video-box a { text-decoration: none; color: #333; display:block; position: relative; }
.video-box .title { padding: 10px; background-color: #082E55; color: #ffffff; }
.video-box .title a { color: #ffffff; }
.video-box .video {  }
.video-box .content { padding: 10px; }
.video-box .content h2 { margin: 0 0 10px 0; }
.video-box .content p { margin: 0; }
.video-box img { width: 100%; }

.video-box.stakeholder .title { background-color: #3A414B; }

/* ------------------------------------------------------*/
/* VIDEO BOX - Multiline */
/* ------------------------------------------------------*/

.video-box .video-line { padding-top: 0; margin:0; border-bottom: 1px solid #eeeeee; }
.video-box .video-line h2 { padding: 0; }
.video-box .video-line p { padding: 0; }
.video-box .video-line .video { float: left; width: 180px; margin: 0; padding: 10px;}
.video-box .video-line .video a { position: relative; display:block; }
.video-box a .thumb-play-icon { position: absolute;  color: #ffffff; left: 5px; bottom: 8px; width: 35px; height: 35px; line-height: 35px; text-align: center; display:block; border-radius: 20px; }
.video-box a:hover .thumb-play-icon {  }
.video-box .video-line .content { float:left; width: 400px; }
.video-box .video-line p.cat-links { font-size:12px; padding-top: 10px; }
.video-box .video-line p.cat-links a { display: inline; color: #082E55; }

.video-box .video-line.stakeholder { background: #9D9D9D; }

html.mobile .video-box .video-line .video { width: 142px;}
html.mobile .video-box .video-line .content { width: 310px; }

html.phone .video-box .video-line .video { width: 100px;}
html.phone .video-box .video-line .content { width: 280px; }

html.phone-portrait .video-box .video-line .video { width: 280px;}
html.phone-portrait .video-box .video-line .content { width: 280px; }

/* ------------------------------------------------------*/
/* FOOTER */
/* ------------------------------------------------------*/

#footer-wrap { background: #003760;
    background: -moz-linear-gradient(top,  #003760 0%, #0456a2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003760), color-stop(100%,#0456a2));
    background: -webkit-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: -o-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: -ms-linear-gradient(top,  #003760 0%,#0456a2 100%);
    background: linear-gradient(to bottom,  #003760 0%,#0456a2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003760', endColorstr='#0456a2',GradientType=0 ); padding: 20px 0; }

html.phone #footer-wrap .footer-item { display: none; }

.footer-logo { float: left;}
#footer-foot .logo { height: 34px; margin: 3px 0 0; }

#footer-menu { margin: 0; padding: 0; height: 40px; line-height: 40px; float:right; text-align:right; }
.footer-menu li { display: inline-block; margin-left: 20px; font-size: 14px;}
.footer-menu li a { color: #ffffff; text-decoration: none; }

@media only screen and (max-width: 959px) {
	.footer-menu { height: auto; float: none; overflow: hidden; }
}

@media only screen and (max-width: 767px) {
	.footer-logo { float: none; text-align: center; display: block;}
	.footer-menu { text-align: center; }
}

#footer-category-menu { padding: 0; }
#footer-category-menu li { margin: 0 20px 10px 0; }

/* ------------------------------------------------------*/
/* PAGINATION */
/* ------------------------------------------------------*/

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
text-align:center;
}
 
.pagination span, .pagination a {
display:inline-block;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #082E55;
height: 14px;
}
 
.pagination a:hover{
color:#fff;
background: #9D9D9D;
}
 
.pagination .current{
padding:6px 9px 5px 9px;
background: #9D9D9D;
color:#fff;
}

/* ------------------------------------------------------*/
/* PAGES */
/* ------------------------------------------------------*/

#cadre, .cadre { background-color: #ffffff; box-shadow: 0 0 10px #CCCCCC; margin: 0 0 20px 0; padding: 10px; overflow: hidden; }
#cadre #section, .cadre .section { padding: 10px; background-color: #3A414B; color: #ffffff; margin: -10px -10px 10px -10px; }
#cadre #section h3 { padding:0; margin:0; color:#ffffff; font-weight: normal; font-size: 17px; text-transform: none; }

/* ------------------------------------------------------*/
/* RGG Gallery */
/* ------------------------------------------------------*/
.bbg_img { box-shadow: none !important; }


.leaderboard-widget { margin: 0; box-shadow: none; padding:0; background: none; color: #ffffff;  }
.leaderboard-widget .title { display: none; }

.coin-slider div { width: 100% !important; background-size: 100% !important; background-repeat: no-repeat; }
.coin-slider div a { width: 100% !important; display: block; background-size: 100%; background-repeat: no-repeat; }
.coin-slider div a img { width: 200px !important; height: auto !important;  }

/* .top-story-main > p > span { display: none; } */
/* .fb-comments > span > iframe { height: 100px !important; overflow:auto; } */


/* Storify fix */

.sfy-story { display: none !important; }

#page #Facebook_Counter iframe {
    width: 80px !important;
}