@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

body {
	/*background: #47c6cd;
    background: -moz-linear-gradient(top, #47c6cd 0%, #66e4c0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47c6cd), color-stop(100%,#66e4c0));
    background: -webkit-linear-gradient(top, #47c6cd 0%,#66e4c0 100%);
    background: -o-linear-gradient(top, #47c6cd 0%,#66e4c0 100%);
    background: -ms-linear-gradient(top, #47c6cd 0%,#66e4c0 100%);
    background: linear-gradient(to bottom, #47c6cd 0%,#66e4c0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47c6cd', endColorstr='#66e4c0',GradientType=0 );
    background-repeat: no-repeat;*/
    height: 100vh;
    padding: 15px 0;
    color: #666;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    letter-spacing: .1rem;
    -webkit-transition: all .3s linear 0s;
  	transition: all .3s linear 0s;
}


/* header */
header {
	height: 10vh;
}

img {
    max-width: 100%;
}

.header__name {
	font-size: 1rem;
	font-weight: normal;
	letter-spacing: .3rem;
	text-transform: lowercase;
	font-variant: small-caps;
}


/* switch*/

.btn-toggle {
  	margin: 0 2.4rem;
  	padding: 0;
  	position: relative;
  	border: none;
  	height: 1.5rem;
  	width: 3rem;
  	border-radius: 1.5rem;
  	color: #6b7381;
  	background: #bdc1c8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  	outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  	line-height: 1.5rem;
  	width: 4rem;
  	text-align: center;
  	font-weight: 600;
  	font-size: 0.75rem;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	position: absolute;
  	bottom: 0;
  	transition: opacity 0.25s;
}
.btn-toggle:before { content: "Off"; left: -4rem; }
.btn-toggle:after { font-family: "Font Awesome 5 Free"; content: "\f042"; right: -4rem; opacity: 0.5; }
.btn-toggle > .handle,  .body--outline .btn-toggle > .handle {
  	position: absolute;
  	top: 0.1875rem;
  	left: 0.1875rem !important;
  	width: 1.125rem;
  	height: 1.125rem;
  	border-radius: 1.125rem;
  	background: #fff;
  	transition: left 0.25s;
}
.btn-toggle.active { transition: background-color 0.25s; }
.btn-toggle.active > .handle { left: 1.6875rem !important; transition: left 0.25s; }
.btn-toggle.active:before { opacity: 0.5; /*color: #fff*/ }
.btn-toggle.active:after { opacity: 1; /*color: #fff*/ }
.btn-toggle:before,
.btn-toggle:after {
  	color: #6b7381;
}
.btn-toggle.active { background-color: #29b5a8; }


/* grid */
.visible-grid {     
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 10px; 
    position: fixed;
    width: calc(100% - 30px);
    height: 100%;
    margin: auto;
    top: 0;
    left: 15px;
    z-index: -1;
}
.visible-grid__column {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	background-color: rgba(255,255,255,.1);
    counter-increment: columnCount;
    z-index: -1;
}
/*.internal { background: #1d1d1d; color: #fff; }*/
.internal .visible-grid__column { background-color: rgba(255,255,255,.0); border-left: 1px dotted rgba(256,256,256,.1) }
.visible-grid__column:last-child { border-right: 1px solid rgba(0, 0, 0, 0.1); }


/* color mode */
.body--dark-mode { background: #000; color: #fff;}
.body--dark-mode *, 
.body--dark-mode .first__heading, 
.body--dark-mode .first__description { color: #fff !important; }
.body--dark-mode a { text-decoration: underline; }
.body--gradient { background: -webkit-linear-gradient(0deg, #11c9c3, #b074cb, #ff767e); }
.body--gradient *, 
.body--gradient .first__heading, 
.body--gradient .first__description, 
.body--gradient .btn-toggle:before, 
.body--gradient .btn-toggle:after { color: #fff; }
.body--gradient .link--color { color: #fff; text-decoration: underline; }

.body--outline {
	color: #999;
	background: linear-gradient(90deg, #fff 21px, transparent 1%) center, linear-gradient(#fff 21px, transparent 1%) center, #999;
  	background-size: 22px 22px;
}
.body--outline .heading { 
	-webkit-text-stroke: 1px #666; 
	-webkit-text-fill-color: transparent; 
	border-top: 1px solid rgba(0, 0, 0, 0.1); 
	border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}


/* footer */
footer { width: 100%; }
footer .row { height: calc(100vh - 50vh); }
.btn__choice { border: 2px solid #666; border-radius: 25px; padding: 5px 25px; }
.body--outline .btn__choice--ux { background: #666; border: 2px solid #fff; color: #fff  }
.body--outline .btn__choice--ui { border: 2px solid #666;  }
.body--gradient .btn__choice { border: 2px solid #fff; }
.body--gradient .btn__choice--ui { background: #fff; border: 2px solid #29b5a8; color: #29b5a8;  }
.body--gradient .btn__choice--ui i { color: #29b5a8 }

@media (min-width: 920px) {
    .visible-grid {     
        grid-template-columns: repeat(12, 1fr);
    }
    .footer__copyright { 
        width:auto; 
        height: auto;
        transform: rotate(-90deg); 
        -webkit-transform-origin: 280px 0;
        display:inline-block;
        -webkit-transform:rotate(-90deg);
        text-align:center;
        float: right;
    }
}


/* first */
.first {}
.first__heading { margin: 2rem 0;  color: #292929; }
.first__description { color: #757575; }

.link--color { color: #11c9c3; }
.link--color:hover {
	background: -webkit-linear-gradient(0deg,#11c9c3,#b074cb,#ff767e);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-decoration: underline;
}

/* internal */
.section { padding:2rem; }
.section__heading { font-size: 2.8rem; font-weight: bold; margin-bottom: 2rem; color: #262728; }
.section__heading--2 { font-size: 1.4rem; }
.section__heading--3 { font-size: 1.4rem; font-weight: bold; color: #11c9c3; margin-bottom: 1.5rem; }
.section__heading--3-sm { font-size: 1rem; margin-bottom: 1rem; color: #999; margin-bottom:1.5rem; font-weight:normal; }
.section__description { font-size: .8rem; font-weight: normal; color: #585858; }
.section__btn { padding: 1rem; }
/*.internal .section__description strong { 
    background: -webkit-linear-gradient(0deg,#11c9c3,#b074cb,#ff767e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline; font-weight: 700; 
}*/
.content__list { font-size: .8rem; list-style: none; padding-left: 0; }
.content__img { width:24.5%; display:inline-block; margin-bottom:.3rem }
.content__item { margin-bottom: 3rem; }
.content__item p { margin-bottom: 0; }
.content__subtitle { font-size: .8rem; color: #999; font-weight: bold; }
.content__date { font-size: .8rem; color: #999; }
.content__title { background: none; font-weight: bold; display: block; font-size: 1.2rem; margin: .5rem 0; color: #262728; }

/* gallery */
.grid{ margin:-5px; }
.grid-item {
  float: left;
  width: 250px;
  padding: 5px;
}

.grid-item--width2 { width: 500px; }

.tiktok-embed { float:left; }

.badge { 
  border: 10px solid;
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: linear-gradient(to left, #11c9c3, #b074cb, #ff767e); 
  margin: 5px;
  padding: .5rem;
}

.btn-primary { background: #11c9c3; border:0; transition: ease-in all 1s; }
.btn-primary:hover, .btn-primary:focus { transition: ease-in all 1s; background: -webkit-linear-gradient(0deg,#11c9c3,#b074cb,#ff767e);  }