/* header */
header img {
    height: 129px;
    width: 555px;
    transition: ease-in .5s;
}
.container-header {
    background: #fff;
    border-bottom: 1px solid #000;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .65);
}
.container-header .mod-menu {
    color: var(--body-color);
}
header.shrink img {
    height: 75px;
    width: 323px;
}
/* menu */
.container-header .navbar-toggler {
    border: 1px solid var(--cassiopeia-color-primary);
    color: var(--cassiopeia-color-primary);
    cursor: pointer;
}
.metismenu-item>a {
    text-transform: uppercase;
}
.metismenu-item.active, .metismenu-item:hover {
    background: var(--cassiopeia-color-primary);
    color: var(--white);
}

.container-header .container-search {
    align-items: center;
    display: flex;
}
/* readmore */
/* .blog-item {
    overflow: visible;
}
.img-block {
    position: relative;
}
.blog-item .readmore {
    position: absolute;
    bottom: 0;
    right: -10px;
    transition: all .3s ease-in-out;
}
.blog-item .readmore:hover {
    right: 0;
} */
 dl.article-info {
    margin-bottom: 0;
 }
.readmore .btn-secondary {
    background: var(--cassiopeia-color-primary);
    color: var(--white);
    border: 1px solid var(--cassiopeia-color-primary);
    border-radius: 0;
    font-size: small;
}
/* images */
.leading>img, .intro>img {
    width: 100%;
    height: auto;
}
.leading-head-container {
    background: #ededed;
    opacity: .8;
    margin-top: -140px;
    position: relative;
}
.leading-head-wrapper {
    border: 1px solid #d9d9d9;
    margin: 15px;
    padding: 0 10px;
}
h2 a:not([class]) {
    text-decoration: none;
    color: var(--body-color);
}

/* follow me */

.social-icons {
    margin: 0;
    padding: 0;
}
.social-icons li {
    float: left;
    display: inline;
    list-style: none;
    margin-right: 5px;
    margin-bottom: 5px;
    text-indent: -9999px;
}
.social-icons li a, a.social-icon {
    background: url(../images/social.png);
    width: 28px;
    height: 28px;
    display: block;
    background-repeat: no-repeat;
    transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.social-icons-color li a {
    opacity: .7;
}
.social-icons-color li a:hover {
    opacity: 1;
}
li a.social_facebook {
    background-position: 0 -38px;
}
li a.social_github {
    background-position: 0 -154px;
}
li a.social_googleplus {
    background-position: 0 -270px;
}
li a.social_linkedin {
    background-position: 0 -386px;
}
li a.social_picasa {
    background-position: 0 -502px;
}
li a.social_pintrest {
    background-position: 0 -612px;
}
li a.social_rss {
    background-position: 0 -734px;
}
li a.social_skype {
    background-position: 0 -850px;
}
li a.social_twitter {
    background-position: 0 -966px;
}
li a.social_youtube {
    background-position: 0 -1082px;
}

/* spinning head */

.rotate img {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
    border-radius: 50%;
    display: block;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset, 0 0 0 12px rgba(61, 64, 85, .3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset, 0 0 0 12px rgba(61, 64, 85, .3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset, 0 0 0 12px rgba(61, 64, 85, .3);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: static;
    width: 93%;
    max-width: 200px;
    margin: 15px;
    padding: 0;
    border-style: none;
}
.rotate img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

/* joomla color */

.cs-text {
    font-size: 50px;
    text-transform: uppercase;
    margin: 80px auto 0;
    width: 580px;
    height: 100px;
    padding-left: 20px;
    font-family: Arial;
    font-weight: 400;
    position: relative;
}
.cs-text:after, .cs-text:before {
    content: " ";
    display: table;
}
.cs-text:after {
    clear: both;
}
.cs-text span {
    cursor: default;
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 0 0 -20px;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .1);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.cs-text span:nth-child(1) {
    border-radius: 50%;
    -webkit-transform: translate(300%) translate(-60px);
    -moz-transform: translate(300%) translate(-60px);
    -o-transform: translate(300%) translate(-60px);
    -ms-transform: translate(300%) translate(-60px);
    transform: translate(300%) translate(-60px);
    background: rgba(90, 164, 38, .8) url(../images/noise.png);
}
.cs-text span:nth-child(2) {
    border-radius: 50%;
    -webkit-transform: translate(200%) translate(-40px);
    -moz-transform: translate(200%) translate(-40px);
    -o-transform: translate(200%) translate(-40px);
    -ms-transform: translate(200%) translate(-40px);
    transform: translate(200%) translate(-40px);
    background: rgba(255, 143, 48, .8) url(../images/noise.png);
}
.cs-text span:nth-child(3) {
    border-radius: 50%;
    -webkit-transform: translate(100%) translate(-20px);
    -moz-transform: translate(100%) translate(-20px);
    -o-transform: translate(100%) translate(-20px);
    -ms-transform: translate(100%) translate(-20px);
    transform: translate(100%) translate(-20px);
    background: rgba(229, 38, 38, .8) url(../images/noise.png);
}
.cs-text span:nth-child(4) {
    border-radius: 50%;
    -webkit-transform: translate(100%) translate(-20px);
    -moz-transform: translate(100%) translate(-20px);
    -o-transform: translate(100%) translate(-20px);
    -ms-transform: translate(100%) translate(-20px);
    transform: translate(100%) translate(-20px);
    background: rgba(13, 109, 171, .8) url(../images/noise.png);
}
.cs-text span:nth-child(5) {
    border-radius: 50%;
    -webkit-transform: translate(-100%) translate(20px);
    -moz-transform: translate(-100%) translate(20px);
    -o-transform: translate(-100%) translate(20px);
    -ms-transform: translate(-100%) translate(20px);
    transform: translate(-100%) translate(20px);
    background: rgba(229, 38, 38, .8) url(../images/noise.png);
}
.cs-text span:nth-child(6) {
    border-radius: 50%;
    -webkit-transform: translate(-200%) translate(40px);
    -moz-transform: translate(-200%) translate(40px);
    -o-transform: translate(-200%) translate(40px);
    -ms-transform: translate(-200%) translate(40px);
    transform: translate(-200%) translate(40px);
    background: rgba(255, 143, 48, .8) url(../images/noise.png);
}
.cs-text span:nth-child(7) {
    border-radius: 50%;
    -webkit-transform: translate(-300%) translate(60px);
    -moz-transform: translate(-300%) translate(60px);
    -o-transform: translate(-300%) translate(60px);
    -ms-transform: translate(-300%) translate(60px);
    transform: translate(-300%) translate(60px);
    background: rgba(90, 164, 38, .8) url(../images/noise.png);
}
.cs-text span:not(:last-child) {
    opacity: 0;
    pointer-events: none;
}
.cs-text span:last-child {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 100;
    background: url(../images/joomla.png) no-repeat center center;
}
.cs-text:hover span:not(:last-child) {
    -webkit-transform: translate(0%);
    -moz-transform: translate(0%);
    -o-transform: translate(0%);
    -ms-transform: translate(0%);
    transform: translate(0%);
    opacity: 1;
}
.cs-text:hover span:last-child {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/* my websites */

.view {
    z-index: 9;
    cursor: default;
    overflow: hidden;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0 3px #ddd;
}
.view .content, .view .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view h3 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 5px;
    background: rgba(0, 0, 0, .8);
    margin: 10px 0 0;
    line-height: 1;
}
.view p {
    font-style: italic;
    position: relative;
    color: #fff;
    padding: 10px;
    text-align: center;
    line-height: 1;
}
.view a.info {
    color: #fff;
    background: #000;
    padding: 5px 12px;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    text-transform: uppercase;
}
.view a.info:hover {
    background: #1F7AB7;
}
.view-tenth img {
    left: 10px;
    margin-left: -10px;
    position: relative;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.view-tenth .magazine-badge {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=10);
    opacity: 1;
}
.view-tenth .mask {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
.view-tenth p {
    color: #333;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
}
.view-tenth a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
}
.view-tenth:hover img {
    -webkit-transform: scale(2) rotate(10deg);
    -moz-transform: scale(2) rotate(10deg);
    -o-transform: scale(2) rotate(10deg);
    -ms-transform: scale(2) rotate(10deg);
    transform: scale(2) rotate(10deg);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: .3;
}
.view-tenth:hover .magazine-badge {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=1);
    opacity: .1;
}
.view-tenth:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.view-tenth:hover a.info, .view-tenth:hover h3, .view-tenth:hover p {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  /*Font*/
  /* font-family: Georgia, serif; */
  /* font-size: 16px; */
  /* line-height: 1.2; */
  color: #666;
  /* text-align: justify; */

  /*Borders - (Optional)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;

  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/

  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  padding: 0;
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/* css for the wrapping article */
.rightside { float: right; width: 300px; shape-margin: 10px; shape-outside: polygon(0% 17.96%, 15.12% 19.8%, 42.19% 1.32%, 58.01% 0.64%, 58.78% 12.41%, 76.84% 18.29%, 99.82% 32.33%, 95.25% 41.38%, 68.32% 25.2%, 75.51% 45.37%, 69.76% 63.5%, 72.43% 76.71%, 79.55% 91.11%, 64.57% 100%, 58.01% 100%, 63.22% 86.84%, 59.63% 72.67%, 49.61% 80.99%, 44.57% 80.99%, 46.84% 68.63%, 30.46% 50.42%, 49.61% 38.56%, 44.57% 26.81%, 35.34% 23.49%, 16.71% 25.67%, 4.85% 26.81%); clip-path: polygon(0% 17.96%, 15.12% 19.8%, 42.19% 1.32%, 58.01% 0.64%, 58.78% 12.41%, 76.84% 18.29%, 99.82% 32.33%, 95.25% 41.38%, 68.32% 25.2%, 75.51% 45.37%, 69.76% 63.5%, 72.43% 76.71%, 79.55% 91.11%, 64.57% 100%, 58.01% 100%, 63.22% 86.84%, 59.63% 72.67%, 49.61% 80.99%, 44.57% 80.99%, 46.84% 68.63%, 30.46% 50.42%, 49.61% 38.56%, 44.57% 26.81%, 35.34% 23.49%, 16.71% 25.67%, 4.85% 26.81%); }
.leftside { float: left; width: 300px; shape-margin: 10px; shape-outside: polygon(0% 31.61%, 20.23% 31.61%, 13.72% 7.56%, 33.82% 0%, 53.52% 4.19%, 58.09% 15.2%, 54.62% 21.15%, 54.34% 33.04%, 43.06% 46.26%, 53.76% 59.69%, 51.73% 81.94%, 65.9% 74.67%, 72.54% 67.4%, 71.39% 58.37%, 83.53% 55.51%, 91.91% 64.54%, 100% 67.84%, 80.92% 77.2%, 53.52% 94.6%, 38.15% 97.8%, 30.78% 77.2%, 0% 94.6%); clip-path: polygon(0% 31.61%, 20.23% 31.61%, 13.72% 7.56%, 33.82% 0%, 53.52% 4.19%, 58.09% 15.2%, 54.62% 21.15%, 54.34% 33.04%, 43.06% 46.26%, 53.76% 59.69%, 51.73% 81.94%, 65.9% 74.67%, 72.54% 67.4%, 71.39% 58.37%, 83.53% 55.51%, 91.91% 64.54%, 100% 67.84%, 80.92% 77.2%, 53.52% 94.6%, 38.15% 97.8%, 30.78% 77.2%, 0% 94.6%); }
.laptop { float: left; width: 300px; shape-margin: 10px; shape-outside: polygon(4.97% 79.54%, 7.92% 69.71%, 21.94% 69.95%, 13.74% 44.55%, 31.22% 31.42%, 28.26% 19.33%, 30.87% 9.91%, 40.8% 2.54%, 52.93% 3.5%, 56.15% 15.42%, 50.7% 29.94%, 64.26% 33.46%, 80.5% 47.13%, 86.84% 26.84%, 99.37% 19.81%, 98.34% 32.06%, 92.27% 43.35%, 83.15% 60.55%, 70.72% 58.03%, 71.82% 70.18%, 83.7% 67.66%, 90.61% 76.61%, 80.66% 86.7%, 91.71% 88.76%, 92.8% 98.76%, 63.19% 99.65%, 43.4% 94.13%, 12.27% 100%); clip-path: polygon(4.97% 79.54%, 7.92% 69.71%, 21.94% 69.95%, 13.74% 44.55%, 31.22% 31.42%, 28.26% 19.33%, 30.87% 9.91%, 40.8% 2.54%, 52.93% 3.5%, 56.15% 15.42%, 50.7% 29.94%, 64.26% 33.46%, 80.5% 47.13%, 86.84% 26.84%, 99.37% 19.81%, 98.34% 32.06%, 92.27% 43.35%, 83.15% 60.55%, 70.72% 58.03%, 71.82% 70.18%, 83.7% 67.66%, 90.61% 76.61%, 80.66% 86.7%, 91.71% 88.76%, 92.8% 98.76%, 63.19% 99.65%, 43.4% 94.13%, 12.27% 100%); }

/* blog roll */
details.mod-articles-month {
    padding-inline-start: 1em;
}
.mod-articles-month ul {
    margin-bottom: 0;
}
.mod-articles-month li {
    margin-inline-start: 2em;
    list-style: disc;
}

/* speaker training */
    .speaker {
      background: linear-gradient(180deg, #0bb58a 0%, #099f7a 100%);
      color: #ffffff;
      padding: 40px 30px;
      position: relative;
    }

    .speaker .logo {
      width: 70px;
      margin-bottom: 40px;
    }

    .speaker .headline {
      font-size: 64px;
      font-weight: 700;
      line-height: 1.05;
      margin-bottom: 30px;
    }

    .speaker .subtext {
      font-size: 34px;
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 50px;
    }

    .speaker .hashtag {
      font-size: 32px;
      font-weight: 700;
      color: #ffb020;
    }
.speaker .signup a {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

@media (width <= 575.98px) {

.col {
    flex: none;
}
}