/*
CTC Separate Stylesheet
Updated: 2018-11-14 23:43:47
Theme Name: Editors Canada Webinars Theme
Theme URI: http://www.opencodez.com/free-themes/openstrap
Template: openstrap
Author: Cobweb Text and Design | Tamra Ross
Author URI: http://www.cobwebdesign.ca
Description: The Openstrap theme for WordPress developed on top of Twitter Bootstrap Framework 3.0. 
	The theme is fully responsive and can be viewed on any device. Openstrap theme provides 6 different 
		layouts for posts and pages, 11 widget areas, 3 strategic menu locations, nicely designed and 
			customizable footer with its own widgets. In addition to this the theme comes with pre-installed 
				widgets for Google Custom Search Engine, Social Icon Box and Front Page Marketing Text unit. 
					Openstrap provides 4 beautiful color schemes to choose from. Use any color theme that is suitable to your need.
Tags: one-column,two-columns,three-columns,right-sidebar,left-sidebar,custom-background,custom-header,custom-menu,
	featured-images,flexible-header,full-width-template,post-formats,sticky-post,theme-options,translation-ready,custom-colors
Version: 2.0.3.1542239027

Pale blue: cde7f5
Yellow: d8d76b
Dark yellow: ffcc00
Light yellow: fffd95
Muted red: ff4b4b
Bright red: ff0000
Dark red: b21212

*/

body  {
	font-family: 'Lato', sans-serif;
    font-size: 150%;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
}


#main-container {
    margin-left: 0;
    margin-right: 0;
    
}

@media (min-width: 1200px) {
    #wrap, footer, .container {
        max-width: 1170px;
        margin: auto;
    }
}



/* MAIN TEXT STYLES */

h1, h2, h3, h4 {
	font-family: 'Lato', sans-serif;    
}

h1 {
    font-size: 1.6em;
    line-height: 1.6em;
    font-weight: bold;
    color: #c82509;
}

h2 {
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold;
    color: #777;
    text-align: left;
    margin-bottom: 8px;
}

h3 {
    font-size: 1.1em;
    line-height: 1.1em;
    font-weight: bold;
    color: #333;
}

h4 {
    font-size: 1.0em;
    line-height: 1.0em;
    font-weight: bold;
    color: #333;
    margin-top: 18px;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #c82509;
    font-weight: bold;
}

.post-meta-hr{
    height: 1px;
    background-color: #c82509;
    border: 0;
    border-top: 0;
    margin-top: 5px;
    margin-bottom: 10px;
}


h2.block-title {
    color: #333333;
    font-weight: 100;
    font-size: 30px;
    line-height: 1em;
    margin-bottom: 20px;
}




/* ********************************
**** Custom text styles in MCE **** 
*********************************** */


.action-button {
    background-color:#c82509;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:none;
    color: #fff;
    display:inline-block;
    cursor:pointer;
    padding:10px 30px;
    text-decoration:none;
}

.action-button a:link, .action-button a:visited {
    color: white;    
}

.action-button:hover {
    background-color: #ff0000;
}
 
.content-block {
    padding:10px;
    background:#fffd95;
    margin-bottom:0.5em;
    text-align:center;
    font-weight: 600;
    color: #c82509;
}
 
.content-block:after {
    clear:both;
} 
 
.bio-box {
    padding:5px 10px 8px 10px;
    background:#cde7f5;
    margin-top: 1em;
    margin-bottom:1.75em;
    float: left;
    text-align:left;
    font-weight: 500;
    color: #333;

}

/* END Custom text styles in MCE  */




/* **************************
    NAVBAR STYLES 
***************************/

#nav-container {
    padding: 0;
}

#menu-main-menu {
    clear: both;
}

#search-div{
    display: block;
}

#social-links-top {
    margin-right: 18px;
    float: right;
    padding-top: 10px;
}


/* the search bar */
.navbar-form {
    float: right;
    margin-right: -15px;
    padding-right: 5;
}

input[type=search]:focus {
    width: 150px;
}


#nav-container {
    position: relative;    
}

#topnav-options {
    width: 400px;
    height: 49px;
    float: right;
}

.fa-icon {
    color: white;
    height: 20px;
    margin-right: 10px;
}

.navbar {
    border-radius: none;
    height: 100px;
    margin-bottom: 20px;
}

.navbar-expand-top {
    width: 85%;
    float: right;
}

.navbar-inverse {
    background-color: #b21212;
    margin-right: 0px;
    margin-top: 15px;
}

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav >  a:hover, 
.navbar-inverse .navbar-nav >  a:focus {
    color: #ffffff;
    background-color: #ff0000;
}

.navbar-inverse .navbar-nav > .menu-item > .active > a, 
.navbar-inverse .navbar-nav > .menu-item >  a:hover, 
.navbar-inverse .navbar-nav > .menu-item >  a:focus {
    color: #ffffff;
    background-color: #ff0000;
}

.navbar-collapse {
    float: left;
    clear: both;
    vertical-align: bottom;
    max-height: 340px;
    padding-left: 5px;
    overflow-x: visible;
    border-top: none;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {

    .navbar-collapse li{
        background: #b21212;
        margin-right: 25px;
        margin-left: 15px;

        
    }
	.navbar-nav {
		margin: 0 -15px 1px -15px;
	}
}

.navbar-toggle {
    clear: both;
    margin-left: 15px;
}

#logospace a {
    display: flex;
    float: left;
    width: 15%;
    margin-top: 15px;
    height: 100px;
}

#EClogo {
    width: 55%;
    margin: auto;
}

@media (max-width: 1199.98px) {

}

@media (max-width: 989.98px) {
    #logospace {
        display: flex;
        float: left;
        width: 15%;
        margin-top: 15px;
        height: 70px;
    }
    
    #EClogo {
        width: 55%;
    }

}

@media (max-width: 768px) {

    #EClogo {
        width: 65%;
    }

    #topnav-options {
        width: 250px;
    }

}

@media (max-width: 575px) {
    #EClogo {
        width: 95%;
    }

    #social-links-top {
        float: none;
    }
    
    #topnav-options {
        width: 150px;
    }
    
    .navbar-expand-top {
        width: 80%;
        float: right;
    }
    
    .navbar-toggle {
        clear: both;
        margin-left: 0;
    }
    .navbar-form {
        float: right;
        margin-right: -30px;
        padding-right: 0;
    }



}

.navbar:before {
    
}



/****************************
    MIDDLE SITE CONTENT 
******************************/

#crumbs-container {
    padding-top: 0;
    margin: 0 0 35px 0;

}

#breadcrumbs {
    color: #ff0000;
    text-transform: uppercase;
    font-weight: 3400;
    font-size: .8em;
    
}

#breadcrumbs a {
    color: #333;
    
}


/****************************
     SLIDER STYLES 
*****************************/

.slider {
    margin-top: 5px;    
}


.carousel-control.left, .carousel-control.right {
    background-image: none;
    display: none;
}

.carousel-caption {
    right: 35%;
    left: 5%;
    text-align: left;
    text-shadow: none; 
}

.carousel-caption h1 {
    color: #000;
    font-size: 2.5em;
    line-height: 1.1em;
    margin-bottom: 3px;
}

.carousel-caption p {
    color: #c82509;
    font-size: 22px;
}

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

    .carousel-caption {
        right: 40%;
        left: 5%;
        padding-bottom: 15px;
    }

    .carousel-caption h1 {
        color: #000;
        font-size: 2.0em;
        line-height: 1.1em;
        margin-bottom: 3px;
    }
    
    .carousel-caption p {
        color: #c82509;
        font-size: 1.3em;
        margin-bottom: 3px;
    }

}

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

    .carousel-caption {
        right: 45%;
        left: 5%;
        padding-bottom: 10px;
        bottom: 10px;
    }
    
    .carousel-caption h1 {
        font-size: 1.5em;
        line-height: 1.1em;
        margin-bottom: 3px;
    }
    
    .carousel-caption p {
        font-size: 1.1em;
        margin-bottom: 3px;
    }


    
}

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

    .carousel-caption {
        right: 40%;
        left: 3%;
        padding-bottom: 4px;
        bottom: 2px;
    }
    
    .carousel-caption h1 {
        font-size: 1.3em;
        line-height: 1.1em;
        margin-bottom: 3px;
    }
    
    .carousel-caption p {
        font-size: 0.9em;
        margin-bottom: 0;
    }

	.carousel-indicators {
		display: none;
	}

}



.carousel-indicators {
    position: absolute;
    bottom: 10px;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin: 0px;
    text-align: left;
    list-style: none;
}

.carousel-indicators li {
    display: inline-block;
    width: 14px;
    height: 15px;
    margin: 0px;
    cursor: pointer;
    border: 1px solid #ff0000;
    border-radius: 10px;
}


.caro
usel-indicators .active {
    width: 14px;
    height: 14px;
    background-color: #ff0000;
}


.carousel-caption .btn-primary {
    background-color: #ff4b4b;
    color: white;
    border: none;
    padding: 3px 8px 3px 8px;
    margin-bottom: 0;
    
}

.carousel-caption .btn-primary:hover {
    background-color: #ff4b4b;
}



/* *******************************
     FRONT PAGE LOWER STYLES 
******************************** */

#front-page-lower {
    
    border-top: 1px solid #727a7f;
    margin-bottom: 35px;
    clear: both;
}

.social-feed-box {
    margin-bottom: 15px;

}

.post-tags {
     float: right;
     text-align: right;
    
}

/* *******************************
        FRONT PAGE STYLES 
******************************** */


h4.front-page-widget-title {
    color: #333333;
    font-weight: 100;
    font-size: 30px;
    line-height: 1em;
    margin-bottom: 20px;
    text-transform: none;
}

h4.front-page-widget-title a{
    font-weight: 100;
}

h4.front-page-widget-title:after {
    border: none;
    margin: 0;
}

h4.front-page-widget-title a:after {
    margin: 0 0 0 5px;
    content: "\F101";  
    font-family: FontAwesome;
    font-weight: 200;
    font-size: 20px;
}

.cat-post-title:after {
    margin: 0 0 0 3px;
    content: "\F101";  
    font-family: FontAwesome;
    font-weight: 200;
    font-size: 15px;
}


/* *******************************
            FOOTER STYLES 
******************************** */

#extended-footer {
    background-color: #b21212;
    color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
}

.footer-widget-title {
    font-size: 16px;
    line-height: 1.0;
    font-weight: bold;
    text-transform: uppercase;
    color: #fffd95;
}

#extended-footer li {
	font-size: 16px;
	line-height: 1.2em;
}

#extended-footer a:link, #extended-footer a:visited, #extended-footer a:hover, 
	#extended-footer a:active, #extended-footer a:focus {
	color: #fff;	
}

#extended-footer .menu-item a:before {
	content: ">";
	margin-right: 5px;
}

h4.footer-widget-title:after {
    border-bottom: none;
    display: block;
    margin: 0;
    content: none;
}

h4.footer-widget-title {
    margin-bottom: 2px;
}



#social-links-footer {
    margin-right: 15px;
    padding-top: 10px;
    text-align: center;
    align-content: center;
}





/* ********************
      POST STYLES 
   ********************/


.sidebar-left {
    margin-top: 130px;
}

@media (max-width: 991px) {
	.sidebar-left {
	    margin-top: 50px;
	}
}

.site-content {
    margin-top: 75px;
    
}


.webinar-date {
    font-size: 1.2em;
    font-weight: bold;
    display: block;
}

.webinar-sessions {
    padding-right: 15px;
    font-weight: bold;
}


.btn-primary {
    background-color: #c82509;
    
}

.btn-primary:hover {
    background-color: #ff0000;
}


.taxonomy-description {
    margin-bottom: 40px;       
}


article h2 a {
    line-height: 1.0em;
    margin-bottom: 0;
    padding-bottom: 0;
    
}

article h2 a:after {
    margin: 0 0 0 3px;
    content: "\F101";  
    font-family: FontAwesome;
    font-weight: 200;
    font-size: 15px;
}

.presenter {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.0em;
    margin-bottom: 5px;
}

article {
    margin-bottom: 50px;    
}



/* ********************
      POST STYLES 
   ********************/
   
.tagcloud {
    text-align: center;    
}

    
.tagcloud-dot {
	color: #c82509;
	font-size: 12px;
}
   
   
.front-page-widget .level-1 {
	font-size: 13px;
}





/*
Pale blue: cde7f5
Yellow: d8d76b
Light yellow: fffd95
Muted red: ff4b4b
Bright red: ff0000
Dark red: c82509
*/



/* FOR A BANNER ON THE TOP OF THE WEBINAR PAGE */


.banner {
	width: 65%;
	border: 1px solid grey;
    margin: auto;
}

.banner img {
	width: 100%;
}



@media (max-width: 991px) {

    .banner {
    	width: 100%;
    	max-width: 500px;
    }

}