/* --------------- HERO BANNER/SLIDER --------------- */


#m_content .inspiration-header-wrapper {
    background: black;
    color: white;
}

.article h2, .article h3 {
    margin-top: 1em;
}

.inspiration-header-wrapper h1 {
    color: white;
}

.article ul {
    list-style: disc;
}

#hero_wrapper {
    /*border-left: 1px solid #ddd;*/
    margin-left: 10px;
    height: 400px;
    width: 580px;
    overflow: hidden;
    box-shadow: 0 0 4px #eee;
    float: right
}
    
/* ----- OUTER CONTAINER ----- */	
#hero_wrapper div#slides {
	position: relative;
	width:580px;
	border: 0px; 
    overflow:hidden; /* only for IE7 and below */
}
  
/* ----- SLIDES CONTAINER ----- */		
#hero_wrapper div.slides_container {
	height:400px;
    width: 580px;
    background:#eee;
    overflow:hidden;
    /*background-color:Black;*/
}

#hero_wrapper div.slide {
    position:relative;
    height:400px;
    width: 580px;
	overflow:hidden;
	}
    

img.hero_bg_image {
    height:400px;
    width: 580px;
}


#header_logo{
    position:absolute;
    right: 20px;
    top: -20px;
    z-index: 10;
}


/* --------------- HEADER --------------- */ 

#header_wrapper {
    border: 1px solid #ddd;
    min-height: 115px;
    padding: 0px;
    width: 960px;
    overflow: hidden;
    position:relative;
    background: #eee; /* Fallback*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#eeeeee');
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#eeeeee));
    background: -webkit-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -moz-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -ms-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -o-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: linear-gradient(top,  #f1f1f1,  #eeeeee);
    box-shadow: 0 0 4px #eee;
}
   

#header_wrapper div.inner {
    padding: 20px 25px 10px 25px;
}
    
#header_wrapper .name {
    margin-bottom: 5px;
}

#header_wrapper .position {
    margin: 0;
    font-style: italic;
    font-size: 14px; 
    color: #333;
}
    
#header_wrapper .logo {
    position: relative;
    margin: 20px 0 0 0;
    width: 325px;
    height: 100px;
}
    
#header_wrapper .profile_photo {
    position: relative;
    margin: 5px 0 10px 0;
    width: 100px;
    height: 100px;
}
    
#header_wrapper div.logo img {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
    
#header_wrapper .company {
    margin: 10px 0 0 0;
max-width: 700px;
}
    
#header_wrapper .web {
    margin: 5px 0 0 0;
}
    


/* --------------- DESCRIPTION WRAPPER (Main content) --------------- */ 

#description_wrapper,
#comment_wrapper {
	border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    min-height: 50px;
    width: 960px;
    overflow: hidden;
    box-shadow: 0 0 4px #eee;
    padding: 0px;
}

    #description_wrapper .section {
        position: relative;
        min-height: 1px;
        margin: 0px;
        padding: 25px;
        overflow: auto;
        width: auto;
    }

    #comment_wrapper .section {
        position: relative;
        min-height: 1px;
        margin: 0px;
        padding: 25px;
        overflow: auto;
        width: 910px;
    }
#comment_wrapper .section {
    padding-bottom: 0px;
    overflow:hidden;
}
    
#description_wrapper .section h2 {
    font-weight:bold;
}
    
#comment_wrapper .section h2 {
    font-size: 14px;
    font-style: italic;
    margin-top:1.8em;  
    margin-bottom: 15px;
}
    
#description_wrapper .section h3,
#comment_wrapper .section h3 {
    font-weight:bold;
    margin-top:1em;  
}
    
#description_wrapper .section h2:first-child,
#description_wrapper .section h3:first-child,
#comment_wrapper .section h2:first-child,
#comment_wrapper .section h3:first-child {
    margin-top:0px;   
}
    
    
#description_wrapper .section p,
#comment_wrapper .section p {
    margin-bottom:1em;
}    


/*style overrides*/
html.me-site-blog #description_wrapper .section,
html.me-site-blog-black #description_wrapper .section {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html.me-site-blog #header_wrapper {
    border-bottom: none;
    background: black;
    color: white;
}

    html.me-site-blog #header_wrapper h1 {
        color: white;
    }

    html.me-site-blog #header_wrapper .inner {
        padding: 70px 25px 10px 25px;
    }


#description_wrapper .nav {
    position: relative;
    min-height: 50px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}
    
#description_wrapper .nav span.date {
    float: left;
    font-size: 11px;
    font-style: italic;
    padding: 15px 0px 0px 25px;
}
#description_wrapper .nav a {
    float: right;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    background: #eee; 
    padding: 15px 25px;
}
#description_wrapper .nav a:first-child {
    margin-right: 0px;
}
#description_wrapper .nav a:hover {
    background: #fff; 
}
#description_wrapper .nav a:visited {
}


#comment_wrapper .header {
    position: relative;
    min-height: 20px;
    margin: 0px;
    padding: 10px 25px;
    overflow:auto;
    width:910px;
    border-bottom: 1px solid #ddd;
    background: #6d84b4; 
}
#comment_wrapper.hassidenav .header,
#comment_wrapper.hassidenav .section {
    width: 708px;
}   
#comment_wrapper .header h3 {
    float: left;
    display: block;
    margin: 0px;
    padding: 12px 0 0 10px;
    line-height: 0em;
    font-weight: bold;
    color: #fff;
}

#comment_wrapper .header a {
    color: #bfccec;
}
#comment_wrapper .header a:hover {
    color: #fff;
}
#comment_wrapper .header a:visited {
    color: #bfccec;
}

#comment_wrapper .header .facebook_logo {
	float: left;
    display: inline-block;
    height: 25px;
    width: 25px;
}
#comment_wrapper .header .facebook_logo a {
    float: left;
    display: block;
    height: 25px;
    width: 25px;
    background-position: 0px 0px;
    background-image: url('/images/icon_facebook_25.png');
    background-repeat: no-repeat;
    text-indent: -9999px; /* to hide text */
}
#comment_wrapper .facebook_logo a:hover {
    opacity:0.5;
    filter:alpha(opacity=50);
}
    
    
#description_wrapper .third_width {
    float:left;
    width:225px;
    position:relative;
    margin:10px 10px 10px 0;
    /*border: 1px solid #ddd;*/
}

#description_wrapper .third_width h3 {
    font-size:13px;
    margin:0px;
    font-weight:bold;
}

#description_wrapper .third_width p {
    font-size:11px;
    margin-top:0.5em;
}


   
.sectionall {
    position: relative;
    min-height: 50px;
    margin: 10px 0px;
    padding: 0px;
    /*max-width: 960px;
    background-image: url('/images/section_bg_full.jpg');
    background-position: center top;
    background-repeat: no-repeat;*/
    overflow:auto;
}
.sectionall h3 {
    font-style: italic;
    margin:20px 0px;
}


/* ------ Horizontal Rule ------ */
div.horizontal_rule {
    height: 1px;
    width: 100%;
    float:left;
    margin: 0;
    background: #e9e9e9; /* Fallback for non supported browsers */
    background: -moz-linear-gradient(left, #eeeeee 0%, #e9e9e9 30%, #e9e9e9 70%, #eeeeee 100%);
    background: -webkit-linear-gradient(left, #eeeeee 0%, #e9e9e9 30%, #e9e9e9 70%, #eeeeee 100%);
    overflow: hidden; /* fixes ie6 lameness */
}


/* ------ In other page ------ */
#wrapper_other_page {
    margin: 20px 0;
}

#logo_other_page{
    position:absolute;
    right: 10px;
    top: 2px;
    z-index: 10;
}
    
/* ------ List Item ------ */

    
div.list_item {
    float:left;
    background-color:White; 
    /*border:1px solid #ddd; */
    width: 200px;
    height: 200px;
    margin: 0 30px 30px 0;
    padding: 8px;
}

.freshideas div.list_item {
    margin: 0 24px 30px 0;
}
    
#wrapper_other_page div.list_item  {
    margin: 0 9px 10px 0;
}

div.list_item .inner {
    display: block;
    overflow: hidden;
    padding:5px; 
    height: 165px;
    width: 190px;
    color: #666 !important;
    text-decoration:none !important;
    text-indent: -9999px;
    background-repeat: no-repeat;
    z-index: 10;
}

div.list_item .inner:hover,
div.list_item .inner_hover {
    text-indent: -0px;
    background-position: -9999px;
}
        
div.list_item .inner_img {
    display: block;
    position:absolute;
    background-color:#ddd;
    padding:5px; 
    height: 165px;
    width: 190px;
    background-repeat: no-repeat;
    z-index: 8;
    
    opacity: 1;
    transition: opacity .25s   ease-in;
    -moz-transition: opacity .25s ease-in;
    -webkit-transition: opacity .25s ease-in;
}
div.list_item .inner_img:hover {
    opacity: 0.15;
    filter: alpha(opacity=15);
}


div.list_item .inner .title {
    display: block;
    margin: 5px 5px 0 5px;
    color: #111 !important;
    font-size: 15px;
    line-height: 1.5em;
    text-decoration:none;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: clip; 
}

div.list_item .inner:has(.description) .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: clip;
}

div.list_item .inner .description {
    display: block;
    margin: 5px 5px 0 5px;
    color: #333 !important;
    font-size: 12px;
    line-height: 1.5em;
    text-decoration:none;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: clip;
}

div.list_item .inner .title + .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: clip;
}
  
div.list_item .date {
    margin: 8px 0 0 0;
    float: right;
    color: #999 !important;
    font-size: 11px;
    line-height: 1.5em;
    text-decoration:none;
}

div.list_item .name {
    display: block;
    margin: 5px 0 0 0;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
} 
div.list_item a .name {
    color: #000000 !important;
    text-decoration:none;
}
div.list_item a:hover .name  {
    color: #666 !important;
    text-decoration:none;
}
div.list_item a:hover {
    text-decoration:none;
}
div.list_item a:hover .name {  
    color: red !important;
    text-decoration:underline;
}

    

div.list_item.main_cat {
    width: 334px;
    height: 300px;
}
div.list_item.main_cat .inner {
    height: 265px;
    width: 290px;
}
div.list_item.main_cat .inner_img {
    width: 300px;
    height: 263px;
    background-color:#fff;
    background-size: 100%;
   
}
div.list_item.main_cat .name {
    font-size: 16px;
    font-weight:bold;
} 
    


div.column_1 {
    float: left;
    width: 225px; /* width of left column */
}

div.column_2 {
    float: left;
    width: 510px;
}
    
div.column_all {
    padding-right: 15px;
}
div.column_all.logo {
    padding-right: 220px;
}



/* ------ Thumbnail Image ------ */

a.thumbnail {
    display: block;
    position: relative; 
    width: 200px;
    height: 120px;
    margin-top: 10px;
    
    -moz-border-radius: 5px;
    border-radius: 5px; /* Box-shadow */
    
    border: 1px solid #ddd;
    
    box-shadow: inset 0 0  3px #eee;  
}

a.thumbnail.square {
    width: 190px;
    height: 190px;
}

a.thumbnail:hover {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ddd; 
}

       
a.thumbnail span {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    
    border: 1px solid white;
    height: 100%;
    width: 100%;
    
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.desktop-flex {
    display: flex;
}



/* MOBILE SITE */
@media screen and (max-width: 960px) {

    .desktop-flex {
        display: block;
    }

    html.me-site-blog #description_wrapper .section, html.me-site-blog-black #description_wrapper .section {
        padding: 0 1rem;
    }

    .mob .sectionall {
        width: auto;
    }

.mob #header_logo {
	display: none;
}
.mob div.column_all.logo {
    padding-right: 0px;
}

.mob #header_wrapper {
	width: auto;
	height: auto;
}
.mob #header_wrapper div.inner {
    padding: 10px;
}
.mob #header_wrapper .logo {
	width: auto;
}

.mob #hero_wrapper {
	width: auto;
	height: auto;
	max-width: 580px;
	border-left: none;
	margin-left: auto;
	margin-right: auto;
    overflow: auto;
    box-shadow: none;
    float: none;
}



.mob #description_wrapper, 
.mob #comment_wrapper {
	width: auto;
	clear: both;
}
.mob #description_wrapper .section, 
.mob #comment_wrapper .section {
	width: auto;
	padding: 20px 10px;
}

.mob #description_wrapper .nav {
	min-height: 30px;
}
.mob #description_wrapper .nav a {
	padding: 15px 10px;
}
.mob #description_wrapper .nav span.date {
	padding: 17px 0px 0px 8px;
}

.mob #comment_wrapper .header {
	width: auto;
	padding: 10px;
}
.mob #comment_wrapper .header h3 {
	float: none;
	margin-left: 40px;
	line-height: 1em;
	padding: 0px;
	
}

}