/*
Theme Name: Janine Stoll Media Parent Theme
Theme URI: http://janinestoll.ca
Author: Janine Stoll
Author URI: http://janinestoll.ca
Description: Janine Stoll Media theme is a custom theme which uses a parent and child theme to create customized sites.
Version: 1.0
Text Domain: janinestollmedia

*/


@charset "UTF-8";
@import url("css/reset.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i);
@import url(https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i|Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i);





/* Elements */
p {font-family: 'Open Sans', sans-serif; font-size: 1em; margin: 0px 0px 10px 0px; line-height: 1.6em; color:#eee;}
li {font-family: 'Open Sans', sans-serif; font-size: 1em; margin: 0px 0px 10px 0px; line-height: 1.6em; color:#eee; margin-left:10px;}
ul {list-style-type: circle; margin-left:40px;}
ol {list-style-type: decimal; font-family: 'Lato', sans-serif; margin-left:40px;}
h1 {font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 3em; line-height:1em; margin-bottom:20px; color:#fbf8eb; text-transform:uppercase; }
h2 {font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 2.4em; line-height:1em; margin-bottom:10px; color:#fbf8eb; text-transform:uppercase; }
h3 {font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 2em; line-height:1em; margin-bottom:10px; line-height:1.2em; color:#fbf8eb; text-transform:uppercase; }
h4 {font-family: 'Open Sans', sans-serif; font-size: 1.2em; color:#fbf8eb; }
em {font-style:oblique}
strong {font-weight:bold}
b {font-weight:bold}
i {font-style:oblique}
a {color: #8ebcf5; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a:hover {color: #fff; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
hr { color:#4370a8; background-color: #4370a8; height: 2px; border: 0; width:100%; margin:20px 0 20px 0; display:block; clear:left;}
hr.white {color: #fff; background-color: #fff; height: 1px; border: 0; width:100%; margin:20px 0 20px 0;  display:block; clear:left;}
blockquote {margin-left: 20px; background:#4370a8; padding:20px; margin-bottom:20px; border-radius: 10px;}

/* Main Structure */
body {font-family: 'Open Sans', sans-serif; font-size: 1em; margin: 0px 0px 10px 0px; line-height: 1.6em; color:#ebe7cd; background: #658fba url(https://www.suzievinnick.com/site/wp-content/uploads/2022/09/wp2022.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
div.bodyCont {width: 100%; margin: 0 auto;}

/* Header Social Bar */
div.headerBar {background: #cfcba6; width: 100%; height: 30px; border-bottom:#000 solid 2px;}
div.headerBarRight {float:right; width: 40%; height:30px; margin-top:5px;}
div.social {float:left; width: 50%; height: 30px;}
div.social img.button {float:left; opacity: 0.8; width:36px !important; height:36px; margin-left:2px; margin-right:2px; margin-top:10px; background: #fff; border-radius:100px; border:3px solid #fff; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
div.social img.button:hover {opacity: 1; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}


/* Header Structure */
div.headerCont {margin:0 auto; max-width: 100%; height: 160px; position: relative;}


/* Nav Structure */
div.navCont {font-family: 'Open Sans', sans-serif; font-weight:700; margin:0 auto; background: url(); width: 100%; overflow: hidden; }
div.navCont div ul {text-align: center; margin: 0; padding: 0;}
div.navCont div li {list-style: none; display: inline-block; margin: 0px; }
div.navCont div ul ul {display: none; position: absolute; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
div.navCont div ul ul li {display: block; padding: 10px 0px 8px 0px; position: relative; text-align: left; background: none; }
div.navCont div ul li:hover > ul {display: block; z-index: 1000; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
div.navCont div li a {font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 1.1em; line-height:1.2em; padding: 6px 6px 6px 6px; color:#244f85; text-align:center; text-transform:uppercase; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
div.navCont div li a:hover {color:#051e3e; border-radius:5px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
div.navCont div li a:active {color: #efefef}
div.navSearch {display: none}
label.screen-reader-text {display: none}

/* Content Structure */
div.contentMain {margin:0 auto; background: url(https://www.suzievinnick.com/site/wp-content/uploads/2022/09/bgB2022.png) repeat; width: 1040px; max-width: 1040px; min-height:800px; overflow: hidden; margin-top:30px; margin-bottom:30px; padding-bottom:100px;}
div.mainHome {margin:0 auto; max-width: 1040px; overflow: hidden; margin-top:2px; margin-bottom:0px; }
div.contentCont {float: left; width:66%; padding: 30px 3% 100px 3%; overflow: hidden;}
div.contentFull {width: 93.75%; padding: 30px 3% 100px 3%;}


/* Sidebars and Widget Containers */
div.sideBar {float: right; padding: 20px 1% 20px 1%; width: 22%; background: url(https://www.suzievinnick.com/site/wp-content/uploads/2018/03/bg.png) repeat; margin: 30px 3% 20px 0px; }
div.widget {margin: 14px 0px 10px 0px; min-width: 220px}
div.widget h3 {font-family: 'Open Sans', sans-serif; font-size: 1.4em; text-align:center;}
div.widgetTablet, div.widgetMobile {display: none}

/* Footer Structure */
div.footerCont {margin:0 auto; font-size: .8em; line-height: 1em; max-width: 100%; height: 200px; padding-top:10px; background: url('https://www.suzievinnick.com/site/wp-content/uploads/2018/03/bg.png') repeat;}
div.footerCont img.button {opacity: 0.8; width:36px; height:36px; margin-left:2px; margin-right:2px; margin-top:10px;}
div.footerCont img.button:hover {opacity: 1; width:36px; height:36px;}
div.footerCont p {color: #ebe7cd; text-align: center;}
div.footerCont a {color: #ebe7cd;}
div.footerCont a:hover {color: #fff;}


/* Post Structure and Elements */
div.page {overflow: hidden; margin-bottom: 14px; }
div.postPreview { border-bottom: #cfcba6 2px solid; padding: 20px 0px 20px 0px; overflow: hidden; display:block; }
div.post {overflow: hidden; }
div.byline {font-size: .8em; margin-bottom: 10px; font-weight:700; }
div.post div.content {padding: 0px}
div.post div.content img.alignleft {float: left; width: 36.807817589577%; margin: 0px 10px 0px 0px; height: auto; display: inline; border: 1px solid #666;}
div.post ul {list-style-type: disc; margin: 10px}
div.post li {line-height: 1.3em; margin-left: 30px;}
img.wp-post-image {float: left; width: 36.807817589577%; margin: 0px 10px 0px 0px; height: auto; display: inline; border: 5px solid #ebe7cd !important;}
img.wp-post-image:hover {border: 5px solid #3b3b3b !important; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; opacity: 0.8; }
div.pagination {font-family: 'Open Sans', sans-serif; width: 100%; overflow: hidden; padding: 20px 0px 10px 0px}
div.pagination div.previous {float: left; width: 50%; height: 40px; text-align: left; font-family: 'Open Sans', sans-serif; font-style:oblique; font-size: 1.4em; }
div.pagination div.next {float: left; width: 50%; height: 40px; text-align: right; font-family: 'Open Sans', sans-serif; font-style:oblique; font-size: 1.4em; }
div.pagination a {color:#cfcba6; display: block; line-height: 30px; padding: 0px 8px 0px 8px; width: 150px; margin: 0 auto}
div.wp-post-navigation {padding-top:30px;}


/* Images */
img.alignleft, img.left {float: left; margin-right: 20px; margin-bottom: 20px;}
img.alignright, img.right {float: right; margin-left: 20px !important; margin-bottom: 20px;}
img.aligncenter, img.center { display: block; margin-right: auto; margin-left: auto; float: none; clear: both; height:auto; }
img.alignnone, img.block {width:100%; display: block; clear: both;}
img.frame { background: #fff; border-style: solid; border-color: #fff;}
img.stack { clear: none !important; }
img[align="left"] { float: left; clear: left; }
img[align="right"] { float: right; clear: right; }
img[align="middle"] { display: block; margin-right: auto; margin-left: auto; float: none; clear: both; }
img.wp-post-image {border:#fff solid 5px; margin-top:4px;}
img.attachment-thumbnail {border:#fff solid 5px !important; width:150px; height:150px;}
img.attachment-thumbnail:hover {border:5px solid #212121 !important; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; opacity: 0.8; }
dl.gallery-item img.attachment-thumbnail {width:90%; height:auto;}
p.wp-caption-text {display:block;}
img#wpstats {display: none}

/* Buttons */
a.button {font-family: 'Open Sans', sans-serif; text-transform:uppercase; font-weight:700 !important; font-size: 1em; color:#fff; background:#8ebcf5; border-radius:3px; padding:5px 15px 6px 15px; margin:10px 0px 10px 0px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a.button:hover {background:#4475b2; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a.buyButton {font-family: 'Open Sans', sans-serif; text-transform:uppercase; font-weight:700 !important; font-size: 1em; color:#fff; background:#8ebcf5; border-radius:3px; padding:5px 15px 6px 15px; margin:10px 0 10px 0; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a.buyButton:hover {background:#4475b2; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
img.button:hover {background:#fff; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a.bigButton {font-family: 'Open Sans', sans-serif; text-transform:uppercase; font-weight:400 !important; font-size: 1.6em; color:#000; background:#8ec596; border-radius:3px; padding:5px 15px 6px 15px; margin:10px 0px 10px 0px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
a.bigButton:hover {background:#eee; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}


/* Search */
input#searchsubmit {font-family: 'Open Sans', serif; font-weight:400; font-size: 1.4em; color:#000; background:#cfcba6; border-radius:3px; padding:5px 20px 6px 20px; font-style:oblique; border:0px; margin:10px 0 10px 0;}
input#searchsubmit:hover {background:#e4e1c0; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
input#s {border: 1px solid #e4e1c0; height:20px; width:160px;}


/* Instagram */
ul.instagram-pics {display:inline; margin:0px; padding:0;}
ul.instagram-pics li {display:inline; list-style-type:none; margin:0px; padding:0;}
ul.instagram-pics img {width:50%; height:auto; float:left; margin:0px; padding:0;}

/* Music Page */
div.cdCont {width:100%; height:auto; display:block; }
div.cdImg {float:left; width:32%; margin-right:2%; display:block-inline;}
div.cdImg img {width:100%; height:auto;}
div.cdDesc {float:left; width:66%; display:block-inline;}

/*Social Links */
div.socialCont {width:100%; min-height:40px;}
img.icon {width:30px; height:30px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; margin:6px 2px 4px 2px;}
img.icon:hover {transform: rotate(-90deg); -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; opacity: 0.5; filter: alpha(opacity=50);}




/* Mobile Structure LARGE */
@media screen and (max-width: 768px) {

p  {font-size: 1em;}
h1 {font-size: 2.4em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.4em;}

/* Page Structure */
body {}
div.bodyCont {width: 100%; margin: 0 auto; margin-bottom: 20px}
div.headerCont {padding: 0px; width: 100%; margin: 0px 0px 0px 0px; position: relative}
div.navCont {}

/* Header Structure */
div.navSearch {display: none}
div.navCont {}

/* Content Structure */
div.contentCont {width: 96%; padding: 10px 2% 20px 2%;}
div.contentFull {width: 96%; padding: 10px 2% 20px 2%;}

/* Sidebars and Widget Containers */
div.sideBar {overflow: auto; float: left; padding: 20px 5% 20px 5%; width: 88%; margin: 0px 1% 20px 1%}
div.widgetTablet {display: block; float: left; width: 50%; margin: 14px 0px 10px 0px;}
div.widget, div.widgetMobile {display: none}
div.social {width:44%; float:left; padding-left:1%;}
div.social img.button {float:left; opacity: 0.8; width:30px !important; height:30px; margin-left:2px; margin-right:2px; margin-top:10px; background: #fff; border-radius:100px; border:3px solid #fff;}
div.headerBarRight  {width:55%; float:right;}
ul.language-chooser li {background:#fff; color:#fff; padding:3px 3px 3px 3px; opacity: 1; font-size: .9em;}

/* SOCIAL BUTTONS */
img.social {width:30px; height:30px;}
}


/* Mobile Structure SMALL */
@media screen and (max-width: 480px) {

h1 {font-size: 2em;}

/* Page Structure */
div.bodyCont {width: 100%; margin: 0 auto; margin-bottom: 10px}
div.headerCont {background: url() center no-repeat; padding: 0px; width: 100%; margin: 0px 0px 0px 0px; position: relative}
div.headerBarRight {float:right; width: 70%; height:30px; margin-top:5px;}
div.footerCont {height: 60px;}

/* Header Structure */
div.navSearch {}

/* Content Structure */
div.contentCont {margin:0 auto; width: 96%; padding: 10px 2% 20px 2%;}
div.widgetMobile {display: block; float: none; width: 100%; margin: 14px 0px 10px 0px;}
div.widgetTablet, div.widget {display: none}

/* Music Page */
div.cdCont {width:100%; height:auto; display:block; margin-bottom:20px; }
div.cdImg {float:none; width:100%; margin-right:0%; display:block;}
div.cdImg img {width:100%; height:auto;}
div.cdDesc {float:none; width:100%; display:block;}
}

/*------------------------------------*\
	$IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px) {

h1 {font-size: 2.2em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.4em;}

/* Page Structure */
div.bodyCont {width: 100%; margin: 0 auto; margin-bottom: 10px}
div.headerCont {background: url() center no-repeat; padding: 0px; width: 100%; margin: 0px 0px 0px 0px; position: relative}
div.headerBarRight {float:right; width: 70%; height:30px; margin-top:5px;}
div.footerCont {height: 60px;}

/* Header Structure */
div.navSearch {}

/* Content Structure */
div.contentCont {margin:0 auto; width: 96%; padding: 10px 2% 20px 2%;}
div.widgetMobile {display: block; float: none; width: 100%; margin: 14px 0px 10px 0px;}
div.widgetTablet, div.widget {display: none}

/* Music Page */
div.cdCont {width:100%; height:auto; display:block; margin-bottom:20px; }
div.cdImg {float:none; width:100%; margin-right:0%; display:block;}
div.cdImg img {width:100%; height:auto;}
div.cdDesc {float:none; width:100%; display:block;}
}