/* header */
header img {
    height: 129px;
    width: 555px;
    transition: all .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;
}
.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:5px;
}

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