@charset "utf-8";
/* CSS Document */
 
 
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.copyright-textjc {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  color: #505050;
  text-align: center;
}

.navbar {
  font-size: 16px;
  background-image: linear-gradient(260deg, #6495ED 0%, #c16ecf 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}

.main-nav {
  list-style-type: none;
  display: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
}

.active {
  display: block;
}

@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
  }

  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }

  .main-nav li {
    margin: 0;
  }

  .nav-links {
    margin-left: 40px;
  }

  .logo {
    margin-top: 0;
  }

  .navbar-toggle {
    display: none;
  }

  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}




/*
 * ==== Losange triangle for image
 */
.losange, .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 250px;
  height: 250px;
}
.losange {
  transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
  width: 355px;
  height: 355px;
  transform: rotate(-45deg) translateY(-74px);
}
.losange .los1 img {
  width: 100%;
  height: auto;
}
 

/*
 * ==== border jc
 */
p.groove {border-style: groove;}


/*
 * ==== images round border jc
 */
.img {
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.center {
  padding: 30px; 
  text-align: center;
  background-color:#5D3C84; 
  opacity: 0.7;
  filter: alpha(opacity=10); /* For IE8 and earlier */
  }



/*
 * ==== BACKGROUND IMAGE stays at back and scrolls behind jc
 */

.mainbanner {
    background: url('../images/banners/oean1999x778.jpg') no-repeat center top fixed;
    background-size: cover;
    min-height: 550px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
	font-size: 20px;  
	line-height: 20px;
	text-align: center; 
	vertical-align: middle; 
    padding: 90px; 
	padding-top: 90px; 
	padding-bottom: 90px; 
	color:#ffffff;
    border-radius: 0px; 
} 
 
.bannerindex-main {
    background: url('../images/banners/mountain1580x425.jpg') no-repeat center top fixed;
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.backgroundlightmauve {
	background: #F2EFF6;
	background-size: cover;
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
	padding: 50px;
	padding-bottom: 30px;
	color: #ffffff;
	border-radius: 0px;
} 

.bannerabout {
    background: url('../images/banners/paintbrushesbeige1335x425.jpg') no-repeat center top fixed;
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.bannerlearn {
    background: url('../images/banners/banner-easelplantscloseup2-1300w.jpg') no-repeat center top fixed;
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.bannerpaintings {
    background: url('../images/banners/banner-brushes1300w.jpg') no-repeat center top fixed;
    background-size: cover;
    min-height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
	font-size: 20px;  
	line-height: 20px;
	text-align: center; 
	vertical-align: middle; 
	color:#ffffff;
    border-radius: 0px; 
	margin-bottom: 35px; 
  background-color:#ffffff;  
}
.bannerpleinair {
    background: url('../images/banners/bottletopbay-karakaoct19-81-1398x315.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}
  

.bannerstudio {
    background: url('../images/banners/moutainhillsmist1335x305.jpg')no-repeat center top fixed; 
    background-size: cover;     
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}
  
.banner-contact {
    background: url('../images/banners/banner-paintonbrusheblue1918x478right.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.banner-classes {
    background: url('../images/banners/paintbrushesmauvebckgrnd1335x425.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}
 
.bannerdigital {
    background: url('../images/banners/mirror--purplegoldfloralcentre1918x468.jpg')no-repeat center top fixed;
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center;  
}

.bannerresin {
    background: url('../images/banners/oean1999x778.jpg')no-repeat center top fixed;
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}
 
.banner-originals {
    background: url('../images/banners/banner-brushes1300w.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
} 
.banneroriginalshort {
    background: url('../images/banners/paintandbrushespalette1999w.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
}
  
.banneraboutpaintings {
    background: url('../images/banners/brushestogethonblue-1398x315.jpg')no-repeat center top fixed; 
    background-size: cover;
    height: 300px; 
	font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;
  display: flex;
  justify-content: center;
  align-items: center; 
} 

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;	
}

p.ex1 {
    border: 1px solid red; 
}

.entry-title-jc {
	font-size: 22px;
	font-weight: 400;
	color: #92839A;
	margin-bottom: 10px;
	text-align: center;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-style: normal;
} 

.nav-title-jc {
	font-size: 11px;
	font-weight: 400;
	color: #92839A; 
	text-align: center;
	font-style: normal;
}

.color-grayindent {
  color: #767676;
  text-align: left;
  padding-left: 15px;
}

.color-grayright {
  color: #767676;
  text-align: right;
}


/*start up button style*/
/*.up now display: none, when scrollTop be > 80 display will be : block*/
.up{
    border: 1px solid #fff;
    border-radius: 50%;
    background: #87CEFF;
    color: #C7EEFA;
    position: fixed;
    bottom: 15%;
    left: 95%;
    text-align: center;
    cursor: pointer;
    display: none; 
}
 



/* --  triangle notches code pen
=====================================*/

.clear {
  clear: both;
  height: 30px;
  background: purple;
  display: block;
}


.hero {
  display: block;
  position: relative;
  width: 100%;
  height: 200px;
  background-color: black; // fallback bg color
  // background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.8)),
  //   url(#) no-repeat;
  background-size: cover;
  background-position: top center;
  
  display: flex;
  text-align: center;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  color: white;
}
.hero p {
  font-size: 2em;
}

// hfa PNG down arrow
// The image is inserted at it's exact dimensions and cannot be resized.
// Use media query if needed to swap out image for smaller version.
.arrow {
  background: transparent; // transparent notch
  height: 6px; // height of border height
  top: 0;
  position: relative;

  // higher than index of the next row underneath it
  // z-index: 10; 
}
.arrow-divider {
  position: relative;
  margin: 0 auto; // center element
  width: 100%; // fullwidth
}
// arrow image
.arrow-divider:after {
  content: "";
  display: inline-block;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/arrow-down-yellow.png")
    no-repeat;
  width: 120px; // width of image
  height: 66px; // width of image
  position: absolute;
  margin-left: -60px; /* Modify so PNG centered */
  left: 50%; /* Centers element */
  top: -30px; // move up or down to show desired location

  z-index: 3;
}
// Yellow divider lines
.arrow-divider span.yellow:before,
.arrow-divider span.yellow:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 0; // position the dividing lines to the top
  border-bottom: 6px solid #ffe900; // dividing lines
  top: -30px; // move up or down to show desired location

  z-index: 2;
}
.arrow-divider span.yellow:before {
  left: -2em; // left dividing line
}
.arrow-divider span.yellow:after {
  right: -2em; // right dividing line
}
// Black divider lines
.arrow-divider span.yellow span:before,
.arrow-divider span.yellow span:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 0; // position the dividing lines to the top
  border-bottom: 30px solid black; // 30px for solid color; 6px for image below
  top: -30px; // move up or down to show desired location

  z-index: 1;
}
.arrow-divider span.yellow span.black:before {
  left: -2em; // left dividing line
}
.arrow-divider span.yellow span.black:after {
  right: -2em; // right dividing line
}

//  Element
.element {
  display: block;
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(
      -164deg,
      transparent 75%,
      #2a80b9 75%,
      #2a80b9 100%
    ),
    linear-gradient(164deg, transparent 75%, #2a80b9 75%, #2a80b9 100%),
    url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: auto, auto, cover;
  overflow: hidden;
}

// Splash Divider
// Background
.splash {
  overflow: hidden;
  height: 200px;
  background: linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
    url(http://i.imgur.com/k8BtMvj.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
}
// Divider Lines
.splash-divider {
  position: relative;
  // margin: 20px auto 0 auto;
  margin: 0 auto;
  width: 100%;
  // height: 20px;
  border-bottom: 30px solid transparent;
}
// V-Notch
.splash-divider:after {
  content: "";
  position: absolute;

  top: -25px; // vertical position
  left: 51%; // center the element

  width: 50px; // size of notch same as height
  height: 50px; // size of notch same as width;

  border-left: 2px solid #ffffff; // v-left; notch thickness
  border-bottom: 2px solid #ffffff; // v-right; notch thickness
  box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);

  transform: rotate(-45deg) translate(-50%, -50%);
  -webkit-transform: rotate(-45deg) translate(-50%, -50%);
  -ms-transform: rotate(-45deg) translate(-50%, -50%);
  -moz-transform: rotate(-45deg) translate(-50%, -50%);
  -o-transform: rotate(-45deg) translate(-50%, -50%);
}
// Divider lines left and right
.splash-divider span:before,
.splash-divider span:after {
  content: "";
  position: absolute;

  top: 0;

  display: block;

  width: 50%; // center the element
  height: 0; // vertical position; 0 = flush to top

  border-bottom: 2px solid #fff; // thickness of line; match notch thickness
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.splash-divider span:before {
  left: -15px; // v-left width relative to notch size
}
.splash-divider span:after {
  right: -15px; // v-right width relative to notch size
}

// Pure CSS Notch (instantly scalable)
.black {
  background: black;
  height: 200px; /*10rem;*/
  color: white;
  display: flex;
  text-align: center;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
// .row2:after {
//   content: "";
//   display: inline-block;
//   height: 400px;
// }
.notch2 {
  position: relative; /* Element position must be relative to absolutely position :after */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6f8f9+0,d7dee3+0,d7dee3+0,e5ebee+32,ffffff+96 */
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(215,222,227,1) 0%, rgba(215,222,227,1) 0%, rgba(229,235,238,1) 32%, rgba(255,255,255,1) 96%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(215,222,227,1) 0%,rgba(215,222,227,1) 0%,rgba(229,235,238,1) 32%,rgba(255,255,255,1) 96%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(215,222,227,1) 0%,rgba(215,222,227,1) 0%,rgba(229,235,238,1) 32%,rgba(255,255,255,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

/* above permalink blend Background color to show effect */
  color: white;
  height: 90px;
  max-width: 100%;
  text-align: center;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
.notch2:after {
  content: ""; /* Required to display content */
  position: absolute; /* Sets the position absolute to the top div */
  top: 0;
  left: 50%; /* Centers element */
  margin-left: -50px; /* Set margin equal to border px so it centers */
  width: 0;
  z-index: 1;
  height: 0;
  border-top: solid 50px #AB79B0; /* Creates the notch */
  border-left: solid 50px transparent; /* Creates triangle effect */
  border-right: solid 50px transparent; /* Creates triangle effect */
#AB79B0}
.notch2 p {
  position: relative;
  top: 0;
  left: 0;
  margin: 50% auto;
}


/*  text shadowed large from W3c
 * ====  
 */
.textshadlge {
  color: white; 
	font-size: 16px;
  text-shadow: 2px 2px 3px black, 0 0 35px blue, 0 0 5px darkblue;
text-align: left;
	line-height: 1.5em;
}

   .textshadlgered {
  color: #A576FF; 
	font-size: 24px;
  text-shadow: 1px 1px 2px black, 0 0 35px red, 0 0 5px darkblue;
text-align: left;
	line-height: 1.5em;
}
  
 
/*  text top pgh index page
 * ====  
 */
.textindex {
  color: dimgray; 
	font-size: 14px; 
text-align: center;
	line-height: 1.5em;
}
        
/*  scroll back to top from code my files
 * ====  
 */

.scrollToTop { 
background: #B674C5;
width:50px; 
height:50px; 
text-align:center;  
position:fixed; 
bottom:50px; 
right:50px; 
display:none; 
z-index: 99; 
border-radius:100%; 
-webkit-border-radius:100%; -moz-border-radius:100%;}
.scrollToTop:hover{ text-decoration:none; opacity:0.8;}
.scrollToTop .scrollarrow {
width: 0; height: 0; 
border-style: solid; 
border-width:  0 8px 13px 8px; 
border-color: transparent transparent #ffffff; 
display: block; margin:20px auto 0;
} 

p.stb {
	text-indent: 15px;  
}

.btop-1px {
	border-top: 0.6px solid CornflowerBlue; 
	margin-top:1px; 
}

.copyright-textcenter {
	aalign=center
}