/* styles.css — Combined stylesheet for Azure Security Podcast.
   Replaces: fonts.css, icons.css, default.css, layout.css, media-queries.css, podcast.css
   Font Awesome CDN dependency eliminated — icons are inline SVG via CSS masks. */

/* ================================================================== */
/* FONTS                                                              */
/* ================================================================== */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/*
 * Open Sans
================================================================================ */
@font-face {
   font-family: 'opensans-regular';
   src: url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'opensans-italic';
   src: url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'opensans-light';
   src: url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'opensans-semibold';
   src: url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'opensans-bold';
   src: url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}


/*
 * Montserrat
================================================================================ */

@font-face {
   font-family: 'montserrat-regular';
   src: url('fonts/montserrat/montserrat-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'montserrat-bold';
   src: url('fonts/montserrat/montserrat-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

/* ================================================================== */
/* DEFAULTS                                                           */
/* ================================================================== */
/*
=====================================================================
*   Woo v1.0 Default Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

TOC:

a. Webfonts and Icon fonts
c. Reset
d. Default Styles
   1. Basic
   2. Typography
   3. Links
   4. Lists
   5. Media
   d. Grid
   e. Others
   1. Clearing
   2. Misc

=====================================================================  */


/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
 ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* c. Reset
      Adapted from:
      Normalize.css - https://github.com/necolas/normalize.css/
      HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
/* ------------------------------------------------------------------ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   scroll-behavior: smooth;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display: block;
}

audio,
canvas,
video {
   display: inline-block;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

[hidden] { display: none; }

code, kbd, pre, samp {
   font-family: monospace, serif;
   font-size: 1em;
}

pre {
   white-space: pre;
   white-space: pre-wrap;
   word-wrap: break-word;
}

blockquote, q { quotes: &#8220 “ }

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
}

mark {
   background-color: #A7F4F6;
   color: #555;
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}


/* ------------------------------------------------------------------ */
/* d. Default and Basic Styles
      Adapted from:
      Skeleton CSS Framework - http://www.getskeleton.com/
      Typeplate Typographic Starter Kit - http://typeplate.com/
/* ------------------------------------------------------------------ */

/* 1. Basic  ------------------------------------------------------- */

*,
*:before,
*:after {
   box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
   background: #fff;
   font-family: 'opensans-regular', sans-serif;
   font-weight: normal;
   font-size: 15px;
   line-height: 30px;
	color: #838C95;

   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

/* 2. Typography
      Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
   color: #313131;
	font-family: 'montserrat-bold', sans-serif;
   font-weight: normal;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; }
h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; }
h3 { font-size: 22px; line-height: 26px; margin-bottom: 6px; background-color: #e3eaf0;}
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 16px; line-height: 24px; }
h6 { font-size: 10px; line-height: 16px; }
.subheader { }

p { margin: 0 0 30px 0; }
p img { margin: 0; }
p.lead {
   font: 19px/36px 'opensans-light', sans-serif;
   margin-bottom: 18px;
}

/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */
em { font: 15px/30px 'opensans-italic', sans-serif; }
strong, b { font: 15px/30px 'opensans-bold', sans-serif; }
small { font-size: 11px; line-height: inherit; }

/*	Blockquotes */
blockquote {
   margin: 30px 0px;
   padding-left: 40px;
   position: relative;
}
blockquote:before {
   content: "\201C";
   opacity: 0.45;
   font-size: 80px;
   line-height: 0px;
   margin: 0;
   font-family: arial, sans-serif;

   position: absolute;
   top:  30px;
	left: 0;
}
blockquote p {
   font-family: georgia, serif;
   font-style: italic;
   padding: 0;
   font-size: 18px;
   line-height: 30px;
}
blockquote cite {
   display: block;
   font-size: 12px;
   font-style: normal;
   line-height: 18px;
}
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a,
blockquote cite a:visited { color: #8B9798; border: none }

/* Abbreviations */
abbr {
   font-family: 'opensans-bold', sans-serif;
	font-variant: small-caps;
	text-transform: lowercase;
   letter-spacing: .5px;
	color: gray;
}
abbr:hover { cursor: help; }

hr { border: solid #E8E8E8; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }


/*  3. Links  ------------------------------------------------------- */

a, a:visited {
   text-decoration: none;
   outline: 0;
   color: #11ABB0;

   transition: color .3s ease-in-out;
}
a:hover, a:focus { color: #333; }
p a, p a:visited { line-height: inherit; }


/*  4. List  --------------------------------------------------------- */

ul, ol { margin-bottom: 24px; margin-top: 12px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 6px 0 6px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { }
li p { }

/* definition list */
dl { margin: 12px 0; }
dt { margin: 0; color:#0aabb1; }
dd { margin: 0 0 0 20px; }

/* 5. Media   --------------------------------------------------------- */

img,
video,
iframe,
embed,
object {
   max-width: 100%;
   height: auto;
}

img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }

img.resize23 {
   max-width:23%;
   max-height:23%;
 }

/* ------------------------------------------------------------------ */
/* d. Grid
--------------------------------------------------------------------- */

/* default
--------------------------------------------------------------- */
.row {
   width: 96%;
   max-width: none;
   margin: 0 auto;
}
.narrow .row{ max-width: 980px; }

.row .row { width: auto; max-width: none; margin: 0 -18px; }

/* row clearing */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

.column, .columns {
   position: relative;
   padding: 0 18px;
   min-height: 1px;
   float: left;
}
.column.centered, .columns.centered  {
    float: none;
    margin: 0 auto;
}

/* removed gutters */
.row.collapsed > .column,
.row.collapsed > .columns,
.column.collapsed, .columns.collapsed  { padding: 0; }

[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: right; }

/* column widths */
.row .one         { width: 8.33333%; }
.row .two         { width: 16.66667%; }
.row .three       { width: 25%; }
.row .four        { width: 33.33333%; }
.row .five        { width: 41.66667%; }
.row .six         { width: 50%; }
.row .seven       { width: 58.33333%; }
.row .eight       { width: 66.66667%; }
.row .nine        { width: 75%; }
.row .ten         { width: 83.33333%; }
.row .eleven      { width: 91.66667%; }
.row .twelve      { width: 100%; }

/* Offsets */
.row .offset-1    { margin-left: 8.33333%; }
.row .offset-2    { margin-left: 16.66667%; }
.row .offset-3    { margin-left: 25%; }
.row .offset-4    { margin-left: 33.33333%; }
.row .offset-5    { margin-left: 41.66667%; }
.row .offset-6    { margin-left: 50%; }
.row .offset-7    { margin-left: 58.33333%; }
.row .offset-8    { margin-left: 66.66667%; }
.row .offset-9    { margin-left: 75%; }
.row .offset-10   { margin-left: 83.33333%; }
.row .offset-11   { margin-left: 91.66667%; }


/* smaller screens
--------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

}

/* screenwidth less than 768px- mobile/smaller tablets
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

   .row {
	   width: 480px;
	   margin: 0 auto;
      padding: 0;
	}
   .column, .columns {
	   width: auto !important;      
	   float: none;
	   margin-left: 0;
	   margin-right: 0;
      padding: 0 30px;
   }
   .row .row { width: auto; max-width: none; margin: 0 -30px; }

   [class*="column"] + [class*="column"]:last-child { float: none; }
   [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }

   /* Offsets */
   .row .offset-1    { margin-left: 0%; }
   .row .offset-2    { margin-left: 0%; }
   .row .offset-3    { margin-left: 0%; }
   .row .offset-4    { margin-left: 0%; }
   .row .offset-5    { margin-left: 0%; }
   .row .offset-6    { margin-left: 0%; }
   .row .offset-7    { margin-left: 0%; }
   .row .offset-8    { margin-left: 0%; }
   .row .offset-9    { margin-left: 0%; }
   .row .offset-10   { margin-left: 0%; }
   .row .offset-11   { margin-left: 0%; }
}

/* screenwidth less than or equal 480px - mobile wide
--------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

   .row { width: auto; }

}

/* ------------------------------------------------------------------ */
/* e. Others
/* ------------------------------------------------------------------ */

/*  1. Clearing
    (http://nicolasgallagher.com/micro-clearfix-hack/
--------------------------------------------------------------------- */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

/*  2. Misc -------------------------------------------------------- */

.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 12px !important; }
.add-bottom { margin-bottom: 24px !important; }
.no-border { border: none; }

.text-center  { text-align: center !important; }
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.pull-left    { float: left !important; }
.pull-right   { float: right !important; }
.align-center {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}


/* ================================================================== */
/* LAYOUT                                                             */
/* ================================================================== */
/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   j. Footer

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { background: #181d21; }

.section-head {
  	padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 54px;
   width: 100%;
   background: #13171B;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;

   margin-top: 1px;
   float: left;
   width: auto; 
   z-index: 991; 

   /* add position relative since z-index only applies to  
   elements that have been given an explicit position */
   position: relative; 
}
header .logo a {
   display: block;
   margin: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 64px;
   height: 18px;   
}


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
   padding-top: 66px;
   background: #23292f url(img/hero-bg.png);
   overflow: hidden;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#hero { 
		background: #23292f url(img/hero-bg_@2X.png); 
		background-size: 200px 200px;
	}
  
}

#hero .row { max-width: 1040px; }

/* Hero Text */
.hero-text {
	color: #676e73;
   width: 95%;
   text-align: center;
   margin: 54px auto 24px auto;
}
.hero-text h1 {
   font: 40px/1.2em 'montserrat-regular', sans-serif; 
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.hero-text h1 span,
.hero-text a { color: #11ABB0; }
.hero-text p {
   font: 16px/30px 'opensans-regular', sans-serif;
   padding: 0;
   margin: 12px 8% 0;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}


/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}
#features .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right {
   padding-left: 32px;
   float: right;   
}
#features .left {
   padding-right: 32px;
   float: left;   
}
#features h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}

/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 84px;
   margin-bottom: 60px;
   color: #dde3e9;
   font-size: 13px;
   line-height: 24px;
   position: relative;   
}

footer a, footer a:visited { color: rgb(43, 143, 145); }
footer a:hover, footer a:focus { color: rgb(250, 244, 244); }

footer .info { padding-right: 90px; }

footer .footer-logo a {
   display: block;
   margin-bottom: 12px;
   margin-top: 12px;
   margin-left: 3px;
}
footer .footer-logo a img {
   height: 24px;
   width: 92px;
}

footer .right-cols .columns {
   padding-right: 5px;
   padding-left: 5px;
   width: 33.33333%; ;
}
footer .right-cols .columns p { margin-bottom: 6px; }

footer h3 {
   font: 13px/24px 'opensans-semibold', sans-serif;
   margin-bottom: 0;
   font-weight: normal;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
}
footer h3:before {
   font-family: 'FontAwesome';   
	margin: 0 0 6px 3px;
	font-size: 30px;
   line-height: 48px;
   text-align: left;
   color: #bec4ca;
   display: block;
}
footer h3.address:before { content: "\f041"; }
footer h3.social:before { content: "\f0c0"; }
footer h3.contact:before { content: "\f0e0"; }

footer ul {
   margin: 0;
   padding: 0;
}
footer ul li {
   margin: 0;
   line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #3c4753; }
footer ul li a:hover,
footer ul li a:focus { color: #fff; }

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0 18px;
   clear: both;
}

/* ================================================================== */
/* MEDIA QUERIES                                                      */
/* ================================================================== */
/* 
=====================================================================
*   Media Queries
*   url: styleshout.com
*   05-02-2014
/* ================================================================== */


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

   /* Hero Section
   ------------------------------------------------------------------ */
   .hero-text { width: 82%; }
   .hero-text h1 { font: 38px/1.2em 'montserrat-regular', sans-serif; } 

}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

	/* General and Common Styles */
	.section-head h1 { font: 18px/30px 'montserrat-bold', sans-serif; }

    /* Hero Section
   ------------------------------------------------------------------ */
   #hero { padding-top: 60px; }
   .hero-text { width: 88%; }
   .hero-text h1 { font: 35px/1.2em 'montserrat-regular', sans-serif; }
   .hero-text p { font: 15px/30px 'opensans-regular', sans-serif; } 

   /* Features Section
   ------------------------------------------------------------------- */
   #features .feature { margin-bottom: 30px; }
   #features .right { padding-left: 18px; }
   #features .left { padding-right: 18px; }
   #features h3 { margin-bottom: 6px; } 

   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { width: 50% !important; }
   footer .right-cols .columns:last-child { 
      clear: left; 
      float: left;      
   }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* General and Common Styles */
	.section-head { padding: 0 30px; }

   /* Header Styles
   -------------------------------------------------------------------- */
   header .logo { margin-right: 36px; }

   /* Hero Section
   -------------------------------------------------------------------- */
   #hero { padding-top: 48px; }
   .hero-text { width: 92%; }
   .hero-text h1 { font: 31px/1.2em 'montserrat-regular', sans-serif; }
   .hero-text p { font: 14px/24px 'opensans-regular', sans-serif; } 

   /* Features Section
   --------------------------------------------------------------------- */   
   #features .feature {
      margin-top: 12px;
      margin-bottom: 60px;
   }
   #features .right {
      padding-left: 30px;
      float: none;
   }
   #features .left {
      padding-right: 30px;
      float: none;
   }
   #features h3 { text-align: center; }  

   /* footer
   ------------------------------------------------------------------------ */
   footer { text-align: center; }
   footer .info { padding-right: 30px; }
   footer .info p { margin-bottom: 18px; }
   footer h3:before { text-align: center; }
   footer .right-cols {       
      width: 90% !important;
      margin: 0 auto ;
      margin-bottom: 42px; 
      text-align: center;
   }
   footer .right-cols .columns {
      float: left;       
      padding: 0 30px;    
   }
   footer .right-cols .columns:last-child { 
      clear: both; 
      float: left;
   }   

}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

   /* Hero Section
   -------------------------------------------------------------------- */
   #hero { padding-top: 42px; }
   .hero-text { width: 96%; }
   .hero-text h1 { font: 25px/1.2em 'montserrat-regular', sans-serif; }
   .hero-text p { font: 13px/24px 'opensans-regular', sans-serif; } 

   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { padding: 0 10px; }        

}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 

    /* Hero Section
   -------------------------------------------------------------------- */
   .hero-text { width: 100%; }

}











/* ================================================================== */
/* PODCAST                                                            */
/* ================================================================== */
/* Podcast Player Styling */
.podcast-player {
    width: 100%; 
    max-width: 600px; 
    height: 200px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12); 
    border-radius: 6px; 
    border: 1px solid #f0f0f0;
}

h3.Heading {
    cursor: pointer;
}

#episodes-container .add-bottom {
    margin-bottom: 6px !important;
}