@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=greek');
@import url('https://fonts.googleapis.com/css?family=Sansita:700,800');

*{
    margin: 0;
    padding: 0;
}
::selection{background-color:#000; color:#fff !important;}
::-moz-selection{background-color:#000; color:#fff !important;}

body{
    cursor:url("../imgs/cursor-hand2.png"), auto;
}
a:hover,
a p,
a h1,
a h2,
button:hover{
  cursor:url("../imgs/cursor-hand.png"), auto;
}
p, h1, h2, h3{
    cursor:url("../imgs/text.png"), auto;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #333;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #2583bd;
  transition: all 300ms ease-out;
  cursor: pointer;
  opacity: 0.9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  opacity: 1;
}
body{
    font-family: 'Roboto', sans-serif;
    background-color: #000;
    color: #fff;
    font-size: 17px;
}
.morep{
    background: #ebebeb;  /* fallback for old browsers */
    background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
    color: #000;
}
h1, h2, h3, h4, 
.rw-sentence,
.letter-container{
    font-family: 'Sansita', 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 700;
}
.home h1,
.rw-sentence{
    font-weight: 800;
}
strong{
    font-weight: 700;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    transition: all 500ms ease-out;
    color: #2583bd;
}
button{
    transition: all 500ms ease-out;
}
a:hover{
    color: #e35583;
}
p{
    margin-bottom: 7px;
    line-height: 1.3;
}
p:last-child{
    margin-bottom: 0;
}
img,
iframe{
    max-width: 100%;
    display: inline-block;
}
video{
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
}
.dimensions{
    font-size: 14px;
    margin-bottom: 20px;
}
.visually-hidden{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* tilt effect  */
.tiltwrap{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.7;
}
.tiltwrap img,
.tiltwrap div{
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
.tilt {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.tilt__back,
.tilt__front {
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tilt__back {
	position: relative;
}

.tilt__front {
	position: absolute;
	top: 0;
	left: 0;
}

/* layout */
.all{
    max-width: 1260px;
    padding: 15px 0;
    margin: 0 auto;
    position: relative;
}
.morep .all{
    max-width: 800px;
    padding: 15px;
}
.small{
    padding: 20px 15px;
    background-color: #fff;
    background-color: rgba(255,255,255,0.95);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    color: #000;
}
header{
    padding: 0 15px;
    position: relative;
    z-index: 200;
}

/* navs */
.navarrows a,
.sl-navigation button{
    position: fixed;
    top: 50%;
    margin-top: -25px;
    text-indent: -200px;
    overflow: hidden;
    display: block;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.9);
    border-radius: 50%;
    opacity: 0.7;
    z-index: 100;
}
.morep .navarrows a,
.morep .sl-navigation button{
    background-color: transparent;
}
.navarrows a:focus,
.sl-navigation button:focus{
    outline: none;
}
.navarrows a:first-of-type,
.sl-navigation .sl-prev{
    left: 2%;
}
.navarrows a:last-of-type,
.sl-navigation .sl-next{
    right: 2%;
}
.navarrows a::after,
.sl-navigation button::after{
    position: absolute;
    top: 5px;
    content: " ";
    width: 0;
	height: 0;
	border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.navarrows a:first-of-type::after,
.sl-navigation .sl-prev::after{
    border-right: 30px solid #e35583;
    left: 5px;
}
.navarrows a:last-of-type::after,
.sl-navigation .sl-next::after{
    border-left: 30px solid #2583bd;
    right: 5px;
}
.navarrows a:hover,
.sl-navigation button:hover{
    opacity: 1;
    transform: rotate(120deg);
    transform-origin: center;
}

.close,
.sl-wrapper .sl-close{
    position: fixed;
    top: 20px;
    right: 2%;
    font-size: 32px;
    text-align: center;
    font-weight: 900;
    background-color: #e35583;
    color: #fff;
    display: block;
    line-height: 1;
    width: 38px;
    height: 38px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-family: Arial, monospace;
}
.close:hover,
.sl-wrapper .sl-close:hover{
    background-color: #2583bd;
    color: #fff;
}

nav li{
    display: inline-block;
}
nav a{
    display: block;
}
.nava{
    text-align: center;
    margin: 10px 0;
}
.navb{
    text-align: right;
}
.nava a{
    padding: 7px 0;
    margin: 0 7px;
    font-weight: 700;
    position: relative;
    color: #fff;
    font-size: 16px;
    text-shadow: 1px 1px 3px #000;
}
.nava a::after{
    content: " ";
    display: block;
    background-color: #2583bd;
    width: 0;
    height: 5px;
    position: absolute;
    bottom: -5px;
    transition: all 500ms ease-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.nava li:nth-of-type(2n+1) a::after{
    left: 0;
}
.nava li:nth-of-type(2n) a::after{
    background-color: #e35583;
    right: 0;
}
.nava a:hover::after,
.nava a.active::after{
    width: 100%;
}
.navb{
    position: absolute;
    right: 15px;
    top: 15px;
}
.navb a{
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    text-indent: 60px;
    overflow: hidden;
    margin-left: 3px;
    background-image: url(../imgs/icons.png);
    background-repeat: no-repeat;
}
@keyframes spinAround {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.navb a:hover,
.navb a.active{
    border-color: #2583bd;
    animation: spinAround 2s linear infinite;
    background-color: rgba(0,0,0,0.8);
}
.navb li:nth-of-type(2n) a:hover,
.navb li:nth-of-type(2n) a.active{
    border-color: #e35583;
}
.navb li:nth-of-type(1) a{
    background-position: left top;
}
.navb li:nth-of-type(2) a{
    background-position: -30px top;
}
.navb li:nth-of-type(3) a{
    background-position: -60px top;
}
.navb li:nth-of-type(4) a{
    background-position: -90px top;
}
.navb li:nth-of-type(5) a{
    background-position: -120px top;
}
.navb li:nth-of-type(1) a:hover{
    background-position: left center;
}
.navb li:nth-of-type(2) a:hover,
.navb li:nth-of-type(2) a.active{
    background-position: -30px center;
}
.navb li:nth-of-type(3) a:hover,
.navb li:nth-of-type(3) a.active{
    background-position: -60px center;
}
.navb li:nth-of-type(4) a:hover,
.navb li:nth-of-type(4) a.active{
    background-position: -90px center;
}
.navb li:nth-of-type(5) a:hover{
    background-position: -120px center;
}
.navb li{
    position: relative;
    overflow: hidden;
}
.navb li span{
    position: absolute;
    font-size: 11px;
    background-color: #2583bd;
    top: 48px;
    right: 12px;
    white-space: nowrap;
    padding: 5px 7px;
    transform: translateX(50%);
    opacity: 0;
    transition: all 500ms ease-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.navb li span::before{
    content: " ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #2583bd;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    top: 0;
    transition: all 500ms ease-out;
}
.navb li:hover{
    overflow: visible;
}
.navb li:hover span{
    opacity: 1;
}
.navb li:hover span::before{
    top: -6px;
}
.navb li:nth-of-type(2n) span{
    background-color: #e35583;
}
.navb li:nth-of-type(2n) span::before{
    border-bottom: 6px solid #e35583;
}

/* extra navs */
.navicon{
  position: fixed;
  top: 5px;
  right: -100px;
  transition: all 500ms linear;
  opacity: 0.8;
  width: 50px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  z-index: 100;
}
.under .navicon{
  right: 5px;
}
.navicon::before,
.navicon::after{
  content: " ";
}
.navicon::before,
.navicon::after,
.navicon span{
  position: absolute;
  display: block;
  left: 20%;
  background-color: #e35583;
  width: 60%;
  height: 10%;
  transition: all 300ms ease-out;
}
.navicon::before{
  top: 20%;
}
.navicon span{
  top: 45%;
}
.navicon::after{
  top: 70%;
}
.openmenu .navicon::after,
.openmenu .navicon::before{
  top: 25%;
  left: 47%;
  width: 10%;
  height: 50%;
  transform: rotate(45deg);
  transform-origin: center center;
}
.openmenu .navicon::after{
  transform: rotate(-45deg);
}
.openmenu .navicon::before{
  transform: rotate(45deg);
}
.openmenu .navicon span{
  width: 0;
}
.navicon:hover{
  opacity: 1;
}
.xnavs{
  position: fixed;
  top: 50px;
  right: -280px;
  background-color: #2583bd;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
  transition: all 500ms ease-out;
  padding: 10px;
  width: 280px;
  box-sizing: border-box;
}
header.openmenu .xnavs{
  right: 15px;
}
.xnavs a{
  color: rgba(255,255,255,0.7);
  display: block;
  padding: 7px;
  font-size: 14px;
}
.xnavs a.active,
.xnavs a:hover{
    color: #fff;
}
.xnavs ul{
    display: flex;
    flex-wrap: wrap;
}
.xnavs li{
    width: 50%;
}

.vg{
    position: absolute;
    left: 15px;
    top: 15px;
    display: block;
    font-size: 11px;
    padding: 6px 7px;
    border: 2px solid #fff;
    color: #fff;
}
.vg:hover{
    border: 2px solid #2583bd;
    color: #e35583;
    background-color: rgba(0,0,0,0.8);
}

/* Animated alex tade text */
.text{
    fill: none;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    -webkit-animation: stroke 6s infinite linear;
    animation: stroke 6s infinite linear; 
}
.text:nth-child(5n + 1){
    stroke: #e35583;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s; 
}
.text:nth-child(5n + 2){
    stroke: #F5A503;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s; 
}
.text:nth-child(5n + 3){
    stroke: #E9F1DF;
    -webkit-animation-delay: -3.6s;
    animation-delay: -3.6s; 
}
.text:nth-child(5n + 4){
    stroke: #56D9CD;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s; 
}
.text:nth-child(5n + 5){
    stroke: #3aa1bf;
    -webkit-animation-delay: -6s;
    animation-delay: -6s; 
}
  
@keyframes stroke {
    100% {
      stroke-dashoffset: -400; 
    } 
}
/* End Animated alex tade text */

.melink{
    width: 300px;
    height: 75px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.melink a{
    display: block;
}
.melink svg{
    display: block;
    font-size: 50px;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    transition: all 500ms ease-out;
}
.melink img{
    opacity: 0;
    position: absolute;
    left: 50%;
    margin-left: -37px;
    top: 0;
    transition: all 500ms ease-out;
}
.melink a:hover svg{
   opacity: 0;
   z-index: -1;
}
.melink a:hover img{
    opacity: 1;
}
.melink span{
    transition: all 500ms ease-out;
    color: #fff;
    position: absolute;
    top: -200px;
    left: 200px;
    background-color: #e35583;
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
    z-index: 100;
    opacity: 0;
    text-align: center;
    font-weight: 700;
    width: 100px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.melink a:hover span{
    top: 15px;
    opacity: 1;
}
.melink span::before{
    content: " ";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
	border-right: 8px solid #e35583;
	border-bottom: 5px solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    transition: all 300ms ease-out 500ms;
}
.melink a:hover span::before{
    left: -12px;
}

/* main */
main{
    overflow: hidden;
    margin: 35px 0 50px;
}
.morep main{
    margin-top: 5px;
}

/* home page  */

.rw-wrapper{
	position: relative;
    height: 450px;
    width: 100%;
	overflow: hidden;
}
.rw-sentence{
	margin: 100px auto;
	text-align: center;
	text-shadow: 0 0 5px #000;
    position: relative;
    line-height: 1.5;
    max-width: 600px;
    font-size: 50px;
}
.rw-sentence span,
.rw-sentence p{
	color: #fff;
    white-space: nowrap;
    font-weight: 800;
}
.rw-words{
	display: inline;
    text-indent: 10px;
}
.rw-sentence > span,
.rw-words{
    position: relative;
    left: -150px;
}
.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
	-webkit-animation: rotateWord 12s linear infinite 0s;
	-ms-animation: rotateWord 12s linear infinite 0s;
	animation: rotateWord 12s linear infinite 0s;
}
.rw-words span:nth-child(2) {
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
	color: #6b889d;
}
.rw-words span:nth-child(3) {
    -webkit-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
	color: #6b739d;
}
.rw-words span:nth-child(4) {
    -webkit-animation-delay: 9s;
	-ms-animation-delay: 9s;
	animation-delay: 9s;
	color: #7a6b9d;
}

@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	19% { opacity: 1; -webkit-transform: rotate(98deg); transform: rotate(98deg); }
	21% { opacity: 1; -webkit-transform: rotate(86deg); transform: rotate(86deg); }
	23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

/* grid pages */
.grid{
    display: grid;
    grid-gap: 0;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-items: center;
}
.aboutme .grid{
    align-items: start;
}
.tworows{
    grid-row-end: span 2;
}
.subtitle{
    text-align: center;
}
.subtitle span{
    display: inline-block;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 8px 15px 11px;
    line-height: 1.1;
}
.grid + .subtitle span{
    margin-top: 50px;
}
.grid li > a{
    position: relative;
    margin: 15px;
    display: block;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.grid li > a:hover{
    box-shadow: 0 6px 6px rgba(0,0,0,0.4);
}
.grid li > a img{
    width: 100%;
    display: block;
    background-color: #fff;
    transition: all 2s ease-out;
}
.grid li > a:hover img{
    transform: scale(1.03);
}
.grid li > a div{
    position: absolute;
    transition: all 500ms ease-out;
    background-color: rgba(255,255,255,0.8);
    color: #000;
    padding: 10px 15px;
    bottom: 400px;
    left: -100%;
    max-width: 100%;
    box-sizing: border-box;
}
.grid li > a h2{
    font-size: 15px;
    padding-bottom: 4px;
    margin-bottom: 0;
}
.grid li > a p{
    font-size: 13px;
    margin-bottom: 1px;
}
.grid li > a p:last-of-type{
    margin-bottom: 0;
}
.grid li > a:hover div{
   bottom: 0;
   left: 0;
}
.grid-text{
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    padding: 20px 15px;
    color: #000;
    font-size: 16px;
    margin: 15px;
}
li:nth-of-type(2) .grid-text{
    padding: 0;
    background-color: transparent;
    text-align: center;
}
li:nth-of-type(2) .grid-text img{
    display: block;
    width: 100%;
}
.more,
.more2{
    background-color: #2583bd;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
    margin: 15px auto;
    border: none;
    display: inline-block;
    text-align: center;
    letter-spacing: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
    transition: all 300ms ease-out;
}
.more:hover,
.more2:hover{
    background-color: #e35583;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
}
button.more,
button.more2{
    width: 60px;
    display: block;
    box-sizing: content-box;
}
button.more + button{
    display: none;
}
button.moreplus + button{
    display: block;
}

/* more pages */
.morep{
    text-align: center;
    color: #333;
}
.morep h1,
.small h1{
    font-size: 28px;
    margin-bottom: 30px;
}
.morep h1{
    margin-left: 40px;
    margin-right: 40px;
}
h2{
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1.2;
}
.morep .imgs{
    margin-bottom: 25px;
}
.morep .imgs > *{
    display: inline-block;
    margin-bottom: 15px;
}
.morep .imgs > *:last-child{
    margin-bottom: 0;
}
.morep .text{
    line-height: 1.6;
}

/* small layout 500px */
.small{
    text-align: center;
}
.small > ul > li{
    padding: 30px 0 40px;
    border-top: 2px dashed #888;
    border-top: 2px dashed rgba(0,0,0,0.2);
}
.small > ul > li:last-of-type{
    padding-bottom: 30px;
}
figure{
    margin-top: 25px;
    overflow: hidden;
}
h3 + figure{
    margin-top: 15px;
}
figure a img{
    transition: all 3s ease-out;
}
figure a img:hover{
    transform: scale(1.04);
}
.small .codesnips li{
    padding: 20px 0;
}

/* contact page */
.letter-container{
    text-align: center;
    padding: 30px 0;
}
.letter-container p{
	text-align: center;
	position: relative;
	display: inline-block;
    height: 80px;
    width: 400px;
    padding-top: 20px;
}
.letter-container p a{
	text-align: center;
	font-size: 60px;
    width: 400px;
    height: 80px;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -200px;
    display: block;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.letter-container p a:nth-child(2){
	opacity: 0;
}
.letter-container p a span{
    display: inline-block;
    line-height: 1;
    padding-bottom: 10px;
	position: relative;
	width: 80px;
	margin: 0px;
	background: #333;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	text-shadow:
		2px 2px 2px rgba(0,0,0,0.6),
		1px 1px 2px rgba(0,0,0,0.4),
		0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container p a span:hover{
  text-transform: capitalize;
}
.letter-container p a span:nth-child(odd),
.letter-container p a span.char1{
	-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);
	-ms-transform: skewY(10deg);
	transform: skewY(10deg);
	background: #333;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container p a span:nth-child(even),
.letter-container p a span.char2{
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
	-ms-transform: skewY(-10deg);
	transform: skewY(-10deg);
	background: #666;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container p:hover a:nth-child(1){
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=90);
}
.letter-container p:hover a:nth-child(2){
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
}
.letter-container p:hover a span{
	-webkit-transform: skewY(0deg);
	-moz-transform: skewY(0deg);
	-o-transform: skewY(0deg);
	-ms-transform: skewY(0deg);
	transform: skewY(0deg);
	background: #680121;
}
.letter-container p a span:hover{
	color: #f6b0c5;
}

/* font-pages */
.fontest{
    font-size: 32px;
    background-color: #fff;
    color: #002B59;
    padding: 20px;
    border: none;
    min-width: 250px;
    width: 100%;
    max-width: 96%;
    height: 150px;
    text-align: left;
    margin: 50px 0;
    box-sizing: border-box;
}
.fontest:focus,
.fontest:focus-visible{
    border: none;
}

/* simplelightbox  */
body.hidden-scroll {
  overflow: hidden;
}
.sl-overlay{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #929EAD;
  background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
  background-blend-mode: screen;
  opacity: 0.95;
  display: none;
  z-index: 1050;
}
.sl-wrapper{
  z-index: 1040;
}
.sl-wrapper button{
    border: none;
    background-color: transparent;
}

.sl-wrapper .sl-close{
  display: none;
  z-index: 1060;
}
.sl-navigation button{
  z-index: 1060;
}
.sl-wrapper .sl-counter{
  display: none;
  position: fixed;
  top: 15px;
  left: 2%;
  z-index: 1060;
  color: rgba(0,0,0,0.4);
  font-size: 14px;
}

.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}
.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}
.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* gotop */

.gotop{
  display: block;
  opacity: 0;
  position: fixed;
  right: 2%;
  bottom: 30px;
  z-index: 200;
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  transition: all 400ms ease-out;
  color: rgba(0,0,0,0);
}
.under .gotop{
  opacity: 0.6;
}
.gotop:hover{
  color: rgba(0,0,0,0);
  transform: rotate(120deg);
  transform-origin: center;
  opacity: 0.9;
}
.gotop::after{
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #e35583;
  transition: all 400ms ease-out;
  position: absolute;
  top: 6px;
  left: 5px;
}
.gotop::after:hover{
  border-bottom-color: #2583bd;
}

/* .colorchange */

.colorchange{
    position: fixed;
    left: 10px;
    bottom: 30px;
    width: 24px;
    padding: 3px;
    background-color: #2583bd;
    z-index: 300;
}
.colorchange .sitecolor{
    position: absolute;
    left: 0;
    font-size: 10px;
    top: -44px;
    text-align: center;
    background-color: #2583bd;
    color: #000;
    width: 30px;
    line-height: 1;
    padding: 4px 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.colorchange .sitecolor::after{
    content: " ";
    position: absolute;
    bottom: -9px;
    left: 7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #2583bd;
}
.colorchange:hover .sitecolor{
    top: -41px;
}
.colorchange li{
    width: 20px;
    height: 20px;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;
    border: 2px solid #2583bd;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.colorchange li:last-of-type{
    margin-bottom: 0;
}
.colorchange li.lwhite{
    background-color: #fff;
}
.colorchange li.lblack{
    background-color: #000;
}
.colorchange li.ltade{
    background-color: #e35583;
}
.colorchange li span{
    display: none;
    position: absolute;
    right: -63px;
    background-color: #2583bd;
    color: #fff;
    padding: 5px 8px;
    top: 5px;
    font-size: 12px;
}
.colorchange li.lblack span{
    color: #000;
}
.colorchange li span::before{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 10px solid #2583bd;
    border-left: 10px solid transparent;
}
.colorchange li:hover span{
    display: block;
}
.lwhiteon .lwhite,
.lblackon .lblack{
    border: 2px solid #e35583;
}
.lblackon{
    background: #111;
    background-image: none;
    background: linear-gradient(130deg, #000000, #333333);
}
.lwhiteon{
    background: #ddd;
    background-image: none;
    background: linear-gradient(140deg, #eeeeee, #bbbbbb);
}
.lblackon,
.lwhiteon{
    background-size: 100% 300%;
}
.lblackon .tiltwrap,
.lwhiteon .tiltwrap{
    display: none;
}
.lwhiteon .vg{
  color: #333;
}
.lwhiteon .vg:hover{
    color: #e35583;
}
.lwhiteon .navb li:nth-of-type(1) a{
    background-position: left bottom;
}
.lwhiteon .navb li:nth-of-type(2) a{
    background-position: -30px bottom;
}
.lwhiteon .navb li:nth-of-type(3) a{
    background-position: -60px bottom;
}
.lwhiteon .navb li:nth-of-type(4) a{
    background-position: -90px bottom;
}
.lwhiteon .navb li:nth-of-type(5) a{
    background-position: -120px bottom;
}
.lwhiteon .navb li:nth-of-type(1) a:hover{
    background-position: left center;
}
.lwhiteon .navb li:nth-of-type(2) a:hover,
.lwhiteon .navb li:nth-of-type(2) a.active{
    background-position: -30px center;
}
.lwhiteon .navb li:nth-of-type(3) a:hover,
.lwhiteon .navb li:nth-of-type(3) a.active{
    background-position: -60px center;
}
.lwhiteon .navb li:nth-of-type(4) a:hover,
.lwhiteon .navb li:nth-of-type(4) a.active{
    background-position: -90px center;
}
.lwhiteon .navb li:nth-of-type(5) a:hover{
    background-position: -120px center;
}
.lwhiteon .navb a:hover,
.lwhiteon .navb a.active,
.lwhiteon .vg:hover{
    background-color: #fff;
}
.lwhiteon .gotop,
.lwhiteon .navarrows a, 
.lwhiteon .sl-navigation button{
    background-color: transparent;
}
.lwhiteon header nav a,
.lwhiteon .rw-sentence,
.lwhiteon .rw-sentence span,
.lwhiteon .rw-sentence p{
    color: #333;
    text-shadow: none;
}
.lwhiteon .subtitle span{
    background-color: transparent;
    color: #333;
}

.morep .gotop{
    background-color: transparent;
}
@media screen and (max-width: 1100px){
    .aboutme .grid{
        display: block;
    }
    .rw-sentence{
        font-size: 36px;
    }
    .nava a::after{
        height: 2px;
        bottom: 0;
    }
    .rw-sentence > span,
    .rw-words{
        position: relative;
        left: -107px;
    }
    .morep .imgs a{
        pointer-events: none; /* no lightbox on mobiles */
    }
}
@media screen and (max-width: 850px){
    .grid{
        grid-template-columns: auto auto;
    }
    .rw-sentence{
        font-size: 30px;
    }
    .rw-sentence > span,
    .rw-words{
        left: -92px;
    }
}
@media screen and (max-width: 650px){
    .small{
        margin-top: 15px;
    }
    .vg{
        display: none;
    }
    .navb{
        width: 100%;
        right: unset;
        left: 0;
    }
    .navb > ul{
        display: flex;
        justify-content: space-evenly;
    }
    .morep h1,
    .small h1{
       font-size: 20px;
       margin-bottom: 20px;
    }
    .morep main{
        margin-top: 0;
    }
    h2{
        font-size: 17px;
        margin-bottom: 15px;
    }
    body{
        font-size: 16px;
    }
    .morep .imgs{
        margin-bottom: 15px;
    }
    .dimensions{
        margin-bottom: 7px;
    }
    .close, .sl-wrapper .sl-close{
        top: 9px;
    }
    main{
        margin-top: 0;
    }
    .nava{
        margin: 0;
    }
    .nava a{
        font-size: 13px;
        padding: 5px 0;
        font-weight: 400;
    }
    .navb{
        top: -30px;
    }
    .navb a{
        background-color: rgba(0,0,0,0.8);
        opacity: 0.8;
    }
    header{
        margin-top: 30px;
    }
    .melink{
        width: 250px;
        overflow: hidden;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .melink img{
        top: 20px;
    }
    .melink svg{
        font-size: 40px;
        width: 250px;
    } 
    .text{
        stroke-width: 2;
    }
    .melink span{
        display: none;
    }
    .melink img{
        width: 60px;
        height: 60px;
    }
    .navarrows a, .sl-navigation button, .gotop{
        background-color: transparent;
    }
    .navarrows a:hover, .sl-navigation button:hover, .gotop:hover{
        background-color: transparent;
        transform: none;
    }
    .navarrows a::after, .sl-navigation button::after{
        border-top-width: 15px;
        border-bottom-width: 15px;
    }
    .navarrows a:first-of-type::after, .sl-navigation .sl-prev::after{
        border-right-width: 20px;
    }
    .navarrows a:last-of-type::after, .sl-navigation .sl-next::after{
        border-left-width: 20px;
    }
    .gotop{
        bottom: 0;
    }
    .gotop::after{
       border-left-width: 15px;
       border-right-width: 15px;
       border-bottom-width: 20px;
    }
    .small > ul > li{
        padding: 15px 0 25px;
    }
    .rw-sentence{
        font-size: 26px;
    }
    .rw-sentence > span,
    .rw-words{
        left: -76px;
    }
    .subtitle span{
        font-size: 17px;
        margin-bottom: 0;
        margin-top: 10px
    }
    .grid + .subtitle span {
        margin-top: 20px;
    }
}
@media screen and (max-width: 500px){
    .small{
        margin-left: 15px;
        margin-right: 15px;
    }
    .colorchange{
        display: none;
    }
    .grid{
        display: block;
    }
    .grid-text{
        font-size: 15px;
    }
    .letter-container p{
        height: 40px;
        width: 160px;
    }
    .letter-container p a{
        font-size: 25px;
        height: 40px;
        width: 160px;
        margin-left: -80px;
    }
    .letter-container p a span{
        width: 40px;
    }
    .rw-sentence{
        font-size: 16px;
        margin: 50px auto;
    }
    .rw-sentence > span,
    .rw-words{
        left: -54px;
    }
    .fontest{
        font-size: 22px;
    }
    .xnavs{
        width: calc(100% - 30px);
        right: -100%;
    }
}