@charset "UTF-8";
html, body, header, nav, div, ol, ul, li, dl, dt, dd, heading, img, p, h1, h2, h3, h4, h5, h6, main, aside, article, section, footer, pre, form, fieldset, input, blockquote, textarea, table, th, td, embed, object {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
@font-face {
  font-family: silk-rough;
  src: url("../_fonts/SilkRemington-SBRough.ttf");
	font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: silk;
  src: url("../_fonts/SilkRemington-Regular.ttf");
	font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: encode;
  src: url("../_fonts/EncodeSansExpanded-Medium.ttf");
	font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: encode-bold;
  src: url("../_fonts/EncodeSansExpanded-SemiBold.ttf");
	font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: bellamy;
  src: url("../_fonts/bellamy.ttf");
	font-weight: normal;
    font-style: normal;
}
body {
  width: 100%;
	min-height: 100vh;
}
html {
  font-size: 62.5%;
background-color: #FCF4E8;
}
.body-class{
position: relative;
min-height: 100vh;
}
html, body{
    overflow-x:hidden;
}
img,
.no-drag {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.background {
    width: 100%;
    height: auto;
    position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    background-image: url("../_images/background.png");
    background-repeat: no-repeat;
    background-size: 105% 110%;
	background-position: center center;
	z-index: -10;
	transition: background .8s 0s ease-in-out;

}



/*HEAD*/
.top-right {
  width: 19%;
  max-width: 150px;
  position: absolute;
  top: 3em;
  right: -1.5em;
}
.main-head {
  position: relative;
}
.yellow-bg {
  width: 110%;
  max-height: 450px;
  margin-top: -5%;
}
.top-tablet {
  display: none;
}
.top-compu {
  display: none;
  width: 110%;
  margin-left: -1em;
}
.hd-name {
  position: absolute;
  left: 7%;
  top: 12%;
  width: 70%;
  max-width: 440px;
}
.hidden-tear {
  display: none;
}
.top-left {
  position: absolute;
  width: 60%;
  height: auto;
  top: 7.5em;
  left: -5.2em;
  transform: rotate(-40deg);
}
.logo-sm {
  width: 8%;
  top: 2em;
  left: 2em;
  max-width: 38px;
  z-index: 300;
  position: fixed;
  background-color: #F7C957;
  padding: 1em;
  border-radius: 1em;
  box-sizing: inherit;
}








/*NAV*/
label .menu {
  position: absolute;
  right: -110px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
	border: solid 1.5px rgba(0,0,0,1.00);
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}
label .hamburger {
  position: absolute;
  top: 135px;
  left: 40px;
  border-radius: 1em;
  width: 30px;
  height: 3px;
  background: #c3b6ce;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .6s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  border-radius: 1em;
  height: 100%;
  background: #c3b6ce;
}
label .hamburger:before {
  top: -9px;
}
label .hamburger:after {
  bottom: -9px;
}
label input {
  display: none;
}
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
  position: fixed;
}
label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}
label input:checked + .menu + ul {
  opacity: 1;
  visibility: visible;
}
label ul {
  z-index: 200;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .6s 0s ease;
  transition: .6s 0s ease;
  position: fixed;
}
label a {
  margin-bottom: .5em;
  font-family: silk;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
  font-size: 5em;
  display: block;
  color: black;
  text-align: center;
	transition: all .5s;
}
label a:hover {
  background-color: #C3B6CE;
  transition: .4s ease;
  border-radius: .5em;
  color: white;
  padding: .3em;
}
label li {
  list-style: none;
}







/*MAIN AREA*/
.grid {
  width: 100%;
  position: relative;
  padding: 0px 25px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hd hd"
    "ab ab"
    "wm wm"
    ".. fe"
    "ne ne"
    "de de"
    "le le"
    "pr pr";
}
h1 {
  font-family: silk;
font-weight: normal;
	font-style: normal; 
    text-decoration: none;
  font-size: 3.5em;
  margin-top: .3em;
  letter-spacing: .2em;
  grid-area: hd;
}
.bulb:hover {
  animation: bulb 1s ease-in-out .2s 2 alternate;
}

.purp-abt {
  grid-area: ab;
  width: 70vw;
  max-width: 400px;
  background-color: #c3b6ce;
  height: 24em;
  border-radius: 4em;
  border: solid 2px rgba(0,0,0,1.00);
  box-shadow: -10px 10px 10px #DAF3FF;
  position: relative;
  padding: 4em 2em 2em 4em;
  margin: 9em 10vw 6em 10vw;
}
.antenna {
  position: absolute;
  transform: rotate(-10deg);
  width: 5em;
  top: -2.5em;
  left: -3.5em;
}
.purp-face {
  position: absolute;
  width: 12.5em;
  top: -8.6em;
  right: 5em;
}
.purp-lines {
  position: absolute;
  width: 70vw;
  max-width: 400px;
  max-height: 230px;
  top: -1em;
  left: 1.5em;
}
.purp-controls {
  position: absolute;
  width: 7em;
  bottom: 2.2em;
  right: 3em;
}
p {
  font-family: encode;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}
.middle-tear {
  position: absolute;
  width: 9em;
  left: -5.4em;
  top: 15em;
  z-index: -1;
}

.purp-abt p {
  color: white;
  font-size: 1.3em;
  line-height: 2.0em;
}
.purp-abt p::first-line {
  color: black;
  font-size: 1.5rem;
}
.lrn-more {
  grid-area: wm;
  margin-left: 24em;
}
.feet-tv {
  grid-area: fe;
  width: auto;
  height: 250px;
  margin-bottom: 5em;
}
.feet-tv div {
  position: absolute;
  right: -7em;
}
.feet {
  width: 350px;
  position: relative;
}
#lrn {
  position: absolute;
  width: 40px;
  top: 6em;
  left: 3.8em;
}
.feet-arrow {
  position: absolute;
  top: -5em;
  left: -7.5em;
  width: 180px;
  animation: ft-arrow 2s ease 2s infinite alternate;
}
.creative-dg h2{
	text-align: center;
}
h2 {
  font-family: silk;
  font-size: 3em;
  letter-spacing: .5rem;
  position: relative;
  z-index: 30;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}
.creative-dg {
  grid-area: ne;
  position: relative;
  margin: 0px auto;
  width: 250px;
}
.creative-dg p {
  font-family: encode-bold;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
  color: #613E98;
  font-size: 1.35em;
  text-align: center;
  position: inherit;
  z-index: 20;
  margin-top: 1.5em;
  transform: rotate(-5deg);
}
.creative-dg h2 span {
  font-family: silk-rough;
  font-size: 1.2em;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}
.creative-dg h2::before {
  content: '';
  position: absolute;
  width: 290px;
  height: 50px;
  right: -.5em;
  top: 2.25em;
  z-index: -1;
  background-color: #BFA7D0;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  -webkit-clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
.arrow {
  position: absolute;
  width: 120px;
  top: 8.5em;
  left: -1em;
  z-index: 10;
  margin: 0px auto;
}
.middle {
  position: absolute;
  top: 70em;
  width: 100%;
  height: 740px;
  z-index: 1;
  background-image: url(../_images/middle-tear.png);
  background-repeat: no-repeat;
  background-size: 110% 95%;
  background-position: center center;
}
.design-tear {
  grid-area: de;
  position: inherit;
  height: 200px;
  margin: 0px auto 5em;
  z-index: 20;
  max-width: 450px;

}
.controls {
  width: 70px;
  position: absolute;
  top: 7em;
  right: 2em;
}
.design-tear p {
	border: solid 2px rgba(0,0,0,1.00);
	background-color: #bfa7d0;
	margin: 50px 6rem 0rem;
	border-radius: 30px;
  padding:3em 2em;
  text-align: center;
  color: white;
  font-family: encode;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
  line-height: 2em;
  font-size: 1.15em;
  letter-spacing: .05rem;
}
.btm-tear {
  position: absolute;
  bottom: 20%;
  left: -4em;
}







/*SWITCH-BUTTON*/
.btn-talk {
  grid-area: le;
  margin: 7em auto 0rem;
  position: relative;
  z-index: 20;
}
 .learn-more {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: silk-rough;
	 font-weight: normal;
    font-style: normal; 
}
.learn-more {
  padding: 1.25em 2em;
  border: 2px solid #5A5A5A;
  border-radius: 0.75em;
  color: #2FA3CC;
  text-transform: uppercase;
  background: #FEF3DB;
  transform-style: preserve-3d;
  transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
  animation: button 2s ease 2s infinite alternate;
}
.learn-more::before {
  content: '';
  position: absolute;
	z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #FEF3DB;
  box-shadow: 0 0 0 2px #585858, 0 0.7em 5px 2px #CEEFFF;
  transform: translate3d(0, 0.75em, -1em);
  transition: .15s cubic-bezier(0, 0, .6, 1);
}
.learn-more:hover {
  background: #F3E9D8;
  transform: translate(0, 0.25em);
}
.learn-more:hover::before {
  box-shadow: 0 0 0 1.5px #5A5A5A, 0 0.4em 4px 2px #CEEFFF;
  transform: translate3d(0, 0.5em, -1em);
}
.learn-more:active {
  background: #E4D9C6;
  transform: translate(0em, 0.75em);
}
.learn-more:active::before {
  box-shadow: 0 0 0 1.5px #000000, 0 0 #E8DABE;
  transform: translate3d(0, 0, -1em);
}
.me-button{
	position: inherit;
	top: -16em;
}
.me-button img{
		width: 150px;
	height: auto;
}





/*PORTFOLIO-TV*/
.portfolio {
  grid-area: pr;
  width: 110%;
  margin: 10em auto 2em;
}
.port-small {
  width: 80%;
}
.portfolio-compu {
  display: none;
}









/*FOOTER*/
.main-ft {
  position: relative;
  width: 100%;
	height: 100%;
	bottom: -8em;
	margin: auto 0;
  padding: 10rem 20px 70px 20px;
  background-color: #F7C957;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "lg nv dt co ar"
    "bm nv dt co cn";
}
.footer-nav li {
  list-style-type: none;
}
.footer-nav a {
  text-decoration: none;
  color: #424242;
  font-family: encode-bold;
	font-weight: normal;
    font-style: normal; 
  line-height: 2rem;
  font-size: .8rem;
	transition: color .6s;
}
.footer-nav a:hover {
  color: #7a5da7;
}
#logo-ft {
  grid-area: lg;
  width: 70px;
  margin: 10px 0px 0px 5px;
}
#me-ft {
  grid-area: bm;
  margin-top: -2.4em;
  width: 80px;
}
#navigation {
  grid-area: nv;
  margin-left: 4em;
}
#contact {
  grid-area: co;
  margin-left: 3em;
}
#aw-ft {
  grid-area: ar;
	position: inherit;
	right: 2em;
  margin-top: -12em;
  width: 110px;
  transform: rotateY(180deg) rotate(20deg);
}
#controls-ft {
  grid-area: cn;
  position: relative;
  width: 50px;
  bottom: -4em;
  right: 1em;
}
.footer-nav h3 {
  font-family: encode-bold;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
  color: #7a5da7;
  padding-bottom: 1.5em;
  font-size: 1.2em;
}
#ft-tear {
  width: 100%;
  max-width: 500px;
  max-height: 30px;
  height: auto;
  position: absolute;
  top: -1em;
}
#dots {
  grid-area: dt;
  margin-left: 50%;
}

/*ABOUT-PAGE*/
#about-port{
    width: 100%;
    margin: 10rem auto 10rem;
	max-width: 1200px;
}


#about-me{
    background-image: url(../_images/pt-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
	height: 780px;
	width: 100%;
	max-width: 370px;
	margin: 50px auto 0px;
}
#about-me img{
margin: 0px 23%;
	width: 170px;
}
.about-box h1{
	margin: 20px 18%;
	font-family: bellamy;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
	color:#7A5DA7;
	font-size: 1.2em;
}
.about-box p{
	margin: 70px 25% 0px;
	font-family: encode;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
	font-size: 1em;
	line-height: 2;	
	word-spacing: 2px;
}
.about-box p:nth-of-type(2){
	margin-top: 20px;
}
.about-box p span{
	color: white;
}


/*PORTFOLIO-PAGE*/

.grid-port {
  width: 100%;
	position: relative;
	height: 100%;
  padding: 10em 3em 25em;
  margin: 0em 4em 0rem;
  display: grid;
  grid-template-columns: 1fr;
}
.tear-yellow{
	  position: absolute;
  width: 8em;
  left: -7em;
  top: 10em;
  z-index: -1;
}
.quote-port {
	width: 150px;
	position: absolute;
	bottom: 2rem;
	margin-left: 3em;
}
.quote-port h2 {
  font-family: silk;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
	text-align: left;
  font-size: 2.1em;
  position: relative;
  z-index: 30;
  letter-spacing: .2rem;
	line-height: 2.7rem;
	color: white;
}
.quote-port h2 span{
	color: #7a5da7;
}

.quote-port h3 {
  text-align: center;
  font-size: 2.6em;
	  font-family: encode-bold;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
  color: #7a5da7;
	padding-bottom: 6rem;
}
/*
.quote-port img {
	position: absolute;
	width: 150px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -4em 25rem;
}
*/
.port-tv{
	width: 100%;
	position: relative;
	max-width: 800px;
	margin: 8em 8em 2em;
	margin-left: auto;
	margin-right: auto; 
}
.port-screen{
	width: 80%;
	
}
.portfolio-arrow{
	position: absolute;
	width: 40%;
	left: 1.8em;
	top: 21%;
	z-index: 2;
}
.btn-port{
	margin: 50px 32% 0px; 
}
.port-tv div:nth-child(2){
	top: 58%;
    left: 41%;
    width: 49%;
    height: 47%;
/*    margin: 0em 8%;*/
}
.port-mask{
	position: absolute;
	z-index: -1;
	top: 36%;
	width: 50%;
    height: auto;
	left: 24%;
}
.screen {
    background-color: #e1eef6;
    position: absolute;
    top: 61%;
    left: 40.9%;
    width: 50%;
    height: 50%;
    margin: 0em 8%;
    transform: translate(-50%, -50%);
    content: " ";
    overflow: hidden;
    background: #16222A;
    background-size: cover;
    background-image: url(https://cldup.com/gn3s3Fg75t.gif);
    color: #e1eef6;
    border-radius: 17%;
/*	box-shadow: 10px 1px 20% */
}
.screen img{
	width: 100%;
	position: inherit;
}
.title-port{
	position: absolute;
	font-family: silk;
	font-size: 2.4em;
	top: 8.5%;
	left: 26%;
	color: white;
	line-height: 2.3rem;
}

.title-port span{
	font-size: 1.6rem;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 400;
	letter-spacing: 1px;
	color: #FFEDC1;
	padding-left: 2px;
}
.slider-container div p:nth-child(1){
	top: 15%;
}
.slider-container div p:nth-child(4),p:nth-child(7),p:nth-child(9),p:nth-child(10),p:nth-child(11),p:nth-child(13),p:nth-child(15){
	top: 2%;
	line-height: 2.2rem;
	font-size: 2em;
}

#title{
	position: absolute;
	font-family: silk;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
	font-size: 1.1em;
	color: black;
	top: 15%;
	left: 8.5%;
	
}
.btn img{
	width: 2rem;
}
.btn{
display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
  text-decoration: none;
  width: 35px;
  height: 43px;
  padding: .5rem 0rem;
  border: 1.9px solid #5A5A5A;
  border-radius: .6rem;
  background-color: #FEF3DB;
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .15s cubic-bezier(0, 0, 0.6, 1);
  -moz-transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
  -ms-transition: -ms-transform .15s cubic-bezier(0, 0, 0.6, 1);
  -o-transition: -o-transform .15s cubic-bezier(0, 0, 0.6, 1);
  transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
}
.btn::before{
	content: "";
  position: absolute;
  z-index: -1;
  display: block;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 105%;
  height: 105%;
  border-radius: inherit;
  background-color: #FEF3DB;
  -webkit-box-shadow: 0 0 0 1.2px #585858, -.3em 0.2em 3px 2px #CEEFFF;
  box-shadow: 0 0 0 1.2px #585858, -.3em 0.2em 3px 2px #CEEFFF;
  -webkit-transform: translate3d(-.3em, 0.09em, -1em);
  -ms-transform: translate3d(-.3em, 0.09em, -1em); /* IE 9 */
  transform: translate3d(-.3em, 0.09em, -1em);
  -webkit-transition: .15s cubic-bezier(0, 0, .6, 1);
  -moz-transition: .15s cubic-bezier(0, 0, .6, 1);
  -ms-transition: .15s cubic-bezier(0, 0, .6, 1); /* IE 9 */
  -o-transition: .15s cubic-bezier(0, 0, .6, 1); /* Opera */
  transition: .15s cubic-bezier(0, 0, .6, 1);
}
.btn:hover {
  background: #F3E9D8;
}
.btn:active{
	 background: #E4D9C6;
	transform: rotate(-25deg) translate3d(-.3em, 0.09em, -1em);
}
.btn:active::before {
  -webkit-box-shadow: 0 0 0 1.5px #000000, 0 0 #E8DABE;
  box-shadow: 0 0 0 1.5px #000000, 0 0 #E8DABE;
  -webkit-transform: translate3d(0, 0em, 0em);
  transform: translate3d(0, 0em, 0em);
}
.next{
	top: 15.3rem;
	left: 9.2rem;
}
.prev{
	top: 17rem;
	left: 5.3rem;
}
.down{
	top: 22.3rem;
	left: 7.8rem;
}
.up{
	top: 20.5rem;
	left: 11.8rem;
}
#tv-control{
position: absolute;
	right: -0em;
	bottom: -8em;
	width: 220px;	
}
.control{
	width: 220px;
}
#tv-control:hover + .background{
	background-color: 
rgba(5,0,23,0.79);
-webkit-transition: all .8s 0s ease-in-out;
transition: all .8s 0s ease-in-out;
}
#tv-control:hover + .port-tv > .port-screen{
  -webkit-box-shadow: -10px 10px 10px #DAF3FF;
  box-shadow: -10px 10px 10px #DAF3FF;
}
 #switcher-tv {
	 top: 11.5rem;
	 left: 5rem;
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
}
#switcher-tv {
	width: 40px;
	height: 40px;
  padding: 1.25rem 0em;
  border: 1.9px solid #5A5A5A;
  border-radius: 2rem;
  background: #FEF3DB;
  transform-style: preserve-3d;
  -webkit-transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
  transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
}
.light{
position: inherit;
  top: 135px;
  right: 0;
  left: 27px;
  bottom: 0;
  width: 6px;
  height: 6px;
border-radius: 50%;
background-color:#0F9E2E;
}
#switcher-tv::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 105%;
  height: 105%;
  border-radius: inherit;
  background: #FEF3DB;
  box-shadow: 0 0 0 1.5px #585858, -.5em 0.5em 5px 2px #CEEFFF;
  transform: translate3d(-.3em, 0.09em, -1em);
  transition: .15s cubic-bezier(0, 0, .6, 1);
}
#switcher-tv:hover {
  background: #F3E9D8;
}
.light-active{
	background-color: #CF1D20;

}
#switcher-tv:active {
  background: #E4D9C6;
transform: translate3d(-.3em, 0.09em, -1em);

}
#switcher-tv:active::before {
  box-shadow: 0 0 0 1.5px #000000, 0 0 #E8DABE;
  transform: translate3d(0, 0em, 0em);
}
#switcher-tv img{
	width: 20px;
	position: inherit;
	top: -.6em;
	transform: rotate(-24deg) skewY(5deg);
	transform-style: preserve-3d;
}
.cables{
	position: absolute;
	width: 60%;
	top: 97%;
	left: 12%;
	z-index: -1;
}
.cables img{
	width: 100%;
}




/*GALLERY*/
.static-gallery{
	position: fixed;
	z-index: 99;
}
.static-gallery ul{
	list-style-type: none;
	margin: 0;
padding-top: 15vh;
	width: 70px;
	height: 100vh;
	background-color: white;
	border-right: solid 1px #000000;

}
.static-gallery li a{
	text-align: center;
	display: block;
	color: black;
	height: 2.5vh;
	padding: 1em;
	text-decoration: none;
	font-family: silk;
	font-weight: normal;
    font-style: normal; 
	font-size: 1em;
	border-top: solid 1px #000000;
	transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out;
}
.bdr-top{
	border-bottom: solid 1px #0D0000;
}

.static-gallery li a:hover{
	background-color: #f7c957;
	color: white;
	transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out;
}

.info-all{
  width: 87%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100vw;
  overflow-y: auto;
  z-index: 0;
	display: none;
	
/*  background-color: hsl(0,0%,100%);*/

}
.info-all:target {
  left: 13.5vw;
  z-index: 1;
	display: block;
}
.channel-h2{
	font-family: silk-rough;
	font-size: 1.5rem;
	color: #FFF5DA;
	font-weight: normal;
    font-style: normal; 
}
.info-all h2{
	background-color: #f7c957;
	color: #FFFFFF;
	text-align: left;
	font-size: 3em;
	padding: 10vh 0vw 10vw 12vw;
	letter-spacing: 1px;
	line-height: 3.5rem;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
}
.info-all h2 span{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2rem;
	font-weight: 400;
	padding-left: 2px;
	color: #FFF5DA;
	letter-spacing: 4px;
	line-height: 4rem;

}
.description-ga{
	font-size: 1em;
	letter-spacing: .2px;
	padding: 4em 4em 4em 5em;
	line-height: 1.5rem;
	background-color: hsl(0,0%,100%);
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
/*	margin-bottom: .3em;*/
}
.description-ga span{
	color: #E0AB28;
	font-size: 1.5rem;
}
.info-all img:not(.outlet-cable){
	width: 100%;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
	height: auto;
	display: block;
}

.gallery-main .logo-sm{
	width: 6%;
	left: 1.3em;
	right: 1.5em;
 max-width: 28px;

}
.outlet-cable{
	position: fixed;
	visibility: hidden;
   left: 50px;
	margin-top: -2rem;
  z-index: -1;
height: 5vh;
	max-width: 100px;
	min-height: 45px;
	width: auto;
		transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out;
}
.static-gallery li a:active .outlet-cable{
	visibility: visible;
		transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out;
}
.static-gallery li a:visited{
		transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out;
}
.static-gallery li a:active{
		transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out;
}
/*
.outlet-cable{
	position: fixed;
   left: 50px;
  z-index: 100;
height: 6vh;
	max-width: 100px;
	min-height: 45px;
	width: auto;
}
#ch-two .outlet-cable{
	top: 12vh;

}
#ch-three .outlet-cable{
	top: 18vh;

}
#ch-four .outlet-cable{
	top: 23vh;

}
#ch-five .outlet-cable{
	top: 27vh;

}
#ch-six .outlet-cable{
	top: 32vh;

}
#ch-seven .outlet-cable{
	top: 40vh;

}
*/



/*CONTACT-PAGE*/

.contact-container{
	width: 100%;
	height: 100vh;
	padding: 6rem;
display: flex;
	align-items: center;
	justify-content: center;
}
form{
	display: flex;
	flex-direction: column;
	padding: 4rem 6rem;
	max-width: 600px;
	border-radius: 20px;
	width: 100%;
	background-color: #F7C957;
	border: solid 2px rgba(0,0,0,1.00);
	align-items: start;
	gap: 2rem;}
.contact-left-title hr{
	border: none;
	width: 13.5rem;
	height: .5rem;
	background-color: #CEEFFF;
	border-radius: 10px;
	margin-bottom: 2rem;
	margin-left: .3rem;
}
.contact-inputs{
	margin: 0px auto;
	font-family: encode;
	font-weight: normal;
    font-style: normal; 
    text-decoration: none;
	width: 100%;
	height: 6rem;
	border: solid 2px #5B5B5B;
	outline: none;
	padding-left: 2.5rem;
	border-radius: 2rem;
}
form textarea{
	height: 14rem;
	padding-top: 1.5rem;
	border-radius: 2rem;
}
.contact-inputs:hover{
	border: 2px solid #CEEFFF;
}

.contact-inputs:focus{
	border: 2px solid #f7c957;
}

.contact-container button{
	 display: flex;
	align-items: center;
	font-family: encode;
	font-size: 1.4rem;
	margin-left: 1rem;
	margin-left: 40%;
	margin-top: 2rem;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
  text-decoration: none;
  padding: 1.5rem;
  border: 1.9px solid #5A5A5A;
  border-radius: .6em;
  background: #FEF3DB;
  transform-style: preserve-3d;
  transition: transform .15s cubic-bezier(0, 0, 0.6, 1);
}
.contact-container button::before{
	 content: '';
  position: absolute;
	z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 105%;
  height: 110%;
  border-radius: inherit;
  background: #FEF3DB;
  box-shadow: 0 0 0 1.2px #585858, -.3em 0.2em 3px 2px #CEEFFF;
  transform: translate3d(-.35em, 0.09em, -1em);
  transition: .15s cubic-bezier(0, 0, .6, 1);
}
.contact-container button:hover {
  background: #F3E9D8;
}
.contact-container button:active{
	 background: #E4D9C6;
transform: translate3d(-.35em, 0.09em, -1em);

}
.contact-container button:active::before {
  box-shadow: 0 0 0 1.5px #000000, 0 0 #E8DABE;
  transform: translate3d(0, 0em, 0em);
}



@media screen and (min-width : 700px) {
/*
	.background {
    background-size: 105% auto;
}
*/
  .face-animation {
    max-width: 450px;
    animation: load-face2 4s ease 0s 1 forwards;
  }
  .load-top {
    max-width: 1830px;
    max-height: 50vh;
  }
  .load-btm {
    max-width: 1830px;
    max-height: 50vh;
  }
	.yellow-bg {
  width: 110%;
		max-width: 950px;
  max-height: 450px;
  margin-top: -5%;
}
	.logo-sm {
  max-width: 50px;
}
  .grid {
    padding: 0px 60px 40px 50px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hd hd hd hd"
      ".. .. ab ab"
      "wm wm wm wm"
      ".. fe fe hb"
      "ne ne .. le"
      "de de .. le"
      "pr pr pr pr";
  }
  .hd-name {
    top: 0%;
    left: 14%;
	 right: 20%;
  }
	h1{
		font-size: 6em;
		margin: 0px 0em 0em .5em;
	}
  .top-right {
    width: 19%;
    max-width: 125px;
  }
 
	.bulb{
		width: 50px;
	}
  .purp-abt {
    padding: 4em 2em 2em 4em;
    margin: 9em 0vw 15em -10vw;
  }
  .purp-abt p {
    font-size: 1.4em;
  }
  .purp-abt p::first-line {
    font-size: 1.7rem;
  }
  .purp-face {
    width: 15em;
    top: -10.2em;
    right: 8em;
  }
  .middle-tear {
    width: 11em;
    left: -2em;
  }
  .feet-tv {
    height: 350px;
    margin-bottom: 7em;
  }
  .feet {
    width: 500px;
  }
	.feet-tv div {
  right: -9rem;
}
  .middle {
    top: 90em;
    height: 800px;
  }
  .controls {
    width: 80px;
    top: 9em;
  }
  #lrn {
    width: 55px;
    top: 8.5rem;
    left: 5.5rem;
  }
  .creative-dg h2 {
    font-size: 4.2em;
  }
  .creative-dg {
	  height: 200px;
    margin-bottom: -19em;
	  margin-left: 8rem;
  }
  .creative-dg h2 span {
    font-size: 4.5rem;
	  margin-left: -.25em;
  }
.creative-dg h2::before {
  width: 330px;
  height: 65px;
  right: -.8em;
}
  .arrow {
    width: 150px;
    top: 11em;
    left: -2em;
  }
  .creative-dg p {
    font-size: 1.8em;
    margin-top: 1em;
    margin-left: 3em;
  }
	.design-tear {
    height: 290px;
}
  .design-tear p {
	  width: 350px;
    line-height: 1.8em;
    font-size: 1.5rem;
    letter-spacing: .06rem;
	margin: 15rem 6rem 0rem 3rem;
  padding:3em 2em;
  }
	
  .me-button button {
    font-size: 1.25em;
  }
	.me-button{
	display: block;
		position: inherit;
		z-index: 20;
		top: -24.5rem;
		right: 5rem;
}
	.me-button img{
	width: 250px;
    height: auto;
	}
  .btn-talk {
    margin: 30em auto 0rem;
  }
	.btn img{
	width: 2.5rem;
}
  .portfolio {
    width: 100%;
    margin: 15rem auto 4em;
	  max-width: 1000px;
  }
  .main-ft {
    padding: 70px 25px 40px 15px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "lg bm nv dt co ar"
      "lg bm nv dt co cn";
  }
  .footer-nav a {
    line-height: 1.9em;
    font-size: 1em;
  }
  .footer-nv h3 {
    padding-bottom: 1em;
    font-size: 1.7em;
  }
  #logo-ft {
    width: 100px;
    margin: 30px 10px 0px 10px;
  }
  #me-ft {
    margin-top: 0em;
    width: 130px;
  }
  #contact {
    margin-left: 1em;
  }
  #aw-ft {
    margin-top: -8.8em;
    margin-right: -4em;
    width: 160px;
  }
  #controls-ft {
    width: 80px;
    bottom: -2.5em;
    right: -4em;
  }
	
	
	
/*ABOUT-PAGE*/
	
	#about-me{
   background-size: 100% auto;
	height: 1200px;
	width: 100%;
	max-width: 600px;
	margin: 30px auto;
}
#about-me img{
margin: 0px 23%;
	width: 270px;
}
.about-box h1{
	margin: 30px 18%;
	font-size: 2.05em;
}
.about-box p{
	margin: 100px 25% 0px;
	font-size: 1.5em;
	line-height: 2;	
	word-spacing: 2px;
}
.about-box p:nth-of-type(2){
	margin-top: 20px;
}
	
	
/*	PORTFOLIO-PAGE*/
	.grid-port {
  padding: 3em 5em 23em;
  margin: 0em 5em;
}
	.quote-port{
		bottom: -1em;
		margin-left: 5em;
		width: 210px;
		padding-bottom: 0em;
	}
	.quote-port h2{
		line-height: 3.5rem;
	}
	.quote-port h2 {
  font-size: 3.2em;
		
}
	.port-tv{
	margin-bottom: 8em;
	
	}
	.port-tv .middle-tear{
	left: -12em;
	top: 0;
}
	.tear-yellow{
  width: 9em;
  left: -7em;
  top: 15em;
}
	#title{
	font-size: 2.2em;
}
	.title-port{
	font-size: 3.5em;
	line-height: 3.5rem;
	top: 10%;
	}
.title-port span{
	font-size: 3rem;
}
.slider-container div p:nth-child(1){
	top: 17%;
}

.slider-container div p:nth-child(4),p:nth-child(7),p:nth-child(9),p:nth-child(10),p:nth-child(11),p:nth-child(13),p:nth-child(15){
	top: 2%;
	line-height: 3.9rem;
	font-size: 4em;
}
#tv-control{
	right: 5em;
	bottom: -19em;
	width: 320px;
	
}
	.next{
		top: 19.8rem;
		left: 13.5rem;
	}
	.prev{
	top: 22rem;
	left: 8.2rem;
	}
	.down{
		top: 29.5rem;
		left: 12rem;
	}
	.up{
		top: 27rem;
		left: 17.2rem;
	}
	.btn{
	width: 47px;
	height: 58px;
}
	
.control{
	width: 320px;
/*	background-color: blue;*/
}
#switcher-tv {
	 top: 14rem;
	 left: 7rem;
}
#switcher-tv {
	width: 50px;
	height: 50px;
	border-radius: 3rem;

}
.light{
  top: 165px;
  left: 39px;
  width: 9px;
  height: 8px;
}
#switcher-tv::before {
  width: 107%;
  height: 107%;
  transform: translate3d(-.4em, 0em, -1em);
}
#switcher-tv:active {
transform: translate3d(-.4em, -0.02em, -1em);

}
#switcher-tv img{
	width: 25px;
	top: -.4em;
	left: -.1em;
	transform: rotate(-26deg) skewY(5deg);
}
	.cables{
	top: 94%;
	left: 10%;
}
	
/*GALLERY*/

.gallery-main .logo-sm{
 max-width: 35px;

}	
.info-all{
  width: 91%;

}
.info-all:target {
  left: 9%;
}	
	
.static-gallery ul{
	width: 90px;
	padding-top: 13vh;

}
	.static-gallery li a{
	height: 2.5vh;
	padding: 1.5em 1em 1em;
	font-size: 1.2em;
}
	.info-all h2{
	font-size: 3.5em;
	padding: 10vh 0vw 10vw 8vw;
	line-height: 3.8rem;
}
	.info-all h2 span{
	font-size: 2.2rem;
}
	.description-ga{
	font-size: 1.1em;
	letter-spacing: .6px;
	padding: 4rem 7rem;
	line-height: 1.6rem;
}
.description-ga span{
	font-size: 1.5rem;
}
	

	
	
	
/*CONTACT-PAGE*/
	
	
}







@media screen and (min-width: 1000px) {
	label .menu {
  top: -80px;
}
	
label .hamburger {
  width: 35px;
}
	.grid {
    padding: 0px 10vw 45px;
  }
	h1{
		font-size: 6.5rem;
		margin-left: 8vw;
	}
  .load-top {
    max-width: 2300px;
    height: 40vh;
  }
  .load-btm {
    max-width: 2300px;
    height: 40vh;
  }
  .top-compu {
    display: block;
	max-height: 600px;
	  width: 110%;
	  margin-left: -6em;
	margin-top: -2em;
  }
	.top-right {
  width: 19%;
  max-width: 150px;

}
	  .middle-tear {
    width: 13rem;
    left: -2em;
  }
	.btm-tear {
	width: 120px;

}
  .yellow-bg {
    display: none;
  }
	 .hd-name {
    top: 5%;
margin: 0px auto;
		 width: 45%;
	max-width: 550px;
  }
	.purp-abt {
    padding: 5em 4em 2em 5em;
    margin: 5em 15vw 15em 0vw;
		width: 110%;
  max-width: 550px;
  height: 29em;
  }
	.purp-lines {
  width: 100%;
  max-width: 600px;
  max-height: 280px;
  top: -1em;
  left: 1.5em;
}
  .purp-abt p {
    font-size: 1.7em;
  }
  .purp-abt p::first-line {
    font-size: 2rem;
  }
  .purp-face {
    width: 17em;
    top: -12.2em;
    right: 8em;
  }
	.purp-lines {
  max-width: 550px;
  max-height: 280px;
  top: -1.7em;
	}
.purp-controls {
  width: 8.5rem;
  bottom: 2em;
  right: 4.5em;
}
.feet-tv {
    height: 350px;
    margin-bottom: 7em;
  }
  .feet {
    width: 600px;
  }	
	.feet-arrow {
  top: -4rem;
  left: -8.5rem;
  width: 220px;
}
	 #lrn {
    width: 70px;
    top: 9.8rem;
    left: 6.2rem;
  }
	.creative-dg{
		  width: 300px;

			  height: 450px;
		margin-top: 6rem;
		margin-left: 10vw; 
	}
	.creative-dg h2{
		font-size: 6rem;
	}
	.creative-dg h2 span{
		font-size: 5.5rem;
	}
	.creative-dg h2::before {
  width: 380px;
  height: 75px;
  right: -4rem;
}
	  .creative-dg p {
    font-size: 2.2rem;
    margin-top: 1em;
    margin-left: 13rem;
  }
	.arrow {
    width: 250px;
    top: 13em;
    left: -5rem;
  }
	 .controls {
    width: 120px;
    top: 13rem;
	right: 5rem;
  }
	.middle {
    top: 95em;
    height: 900px;
  }
.design-tear {
    height: 290px;
}
  .design-tear p {
	  width: 400px;
    font-size: 1.6rem;
    letter-spacing: .06rem;
	margin: 8rem 6rem 0rem 4rem;
  padding:4rem 4rem;
  }	

 .btn-talk {
    margin: 40rem auto 0rem;
  }
	  .portfolio {
    width: 100%;
    margin: 15rem auto 4em;
	  max-width: 750px;
  }
	.footer-nav a {
    line-height: 1.9em;
    font-size: 1.3em;
  }
  .footer-nav h3 {
    padding-bottom: 1em;
    font-size: 2.2em;
  }
  #logo-ft {
    width: 120px;
    margin: 50px 20px 0px 15%;
  }
  #me-ft {
    margin-top: 0em;
	  margin-left: -10%;
    width: 200px;
  }
  #contact {
    margin-left: 0em;
  }
	#navigation {
  margin-left: 8em;
}
  #aw-ft {
    margin-top: -10em;
    width: 190px;
  }
  #controls-ft {
    width: 100px;
    bottom: -3em;
    right: -4em;
  }
	#ft-tear{
 max-width: 800px;
	}
	#dots {
  margin-right: 40%;
	width: 15px;
}

	
/*	PORTFOLIO-PAGE*/
	#tv-control{
	right: 35%;
		left: 68%;
	bottom: -19em;
	width: 320px;
	
}
	.tear-yellow{
  width: 12em;
  left: -5em;
}
	.cables{
	width: 85.5%;
	top: 80%;
	left: 8%;
}
	.quote-port{
		margin-left: 15vw;
		width: 210px;
	}
	/*GALLERY*/

	
.info-all{
  width: 100%;
	padding-left: 20%;
	padding-right: 20%;
}
	.info-all h2{
		padding: 10% 0vw 10% 12vw;
	}
.info-all:target {
  left: 2%;
}
	.info-all h2 span{
		font-size: 2.5rem;
	}
	
.static-gallery ul{
	width: 90px;
	padding-top: 13vh;

}
	.static-gallery li a{
	height: 2.5vh;
	padding: 1.5em 1em 1em;
	font-size: 1.2em;
}
	.description-ga{
		font-size: 1.3rem;
		line-height: 2.1rem;
		padding: 6rem 14rem;
	}
	.description-ga span{
		font-size: 1.7rem;
		line-height: 1rem;
	}	
	
}
@media screen and (min-width: 1500px){
	 .hd-name {
    top: 8%;
	margin: 0px auto;
	width: 45%;
	max-width: 650px;
  }
	 .top-compu {
	max-height: 750px;
	width: 110%;
	margin-left: -6em;
  }
	.top-right{
	top: 15rem;
	right: -1em;
	}
		.grid {
    padding: 0px 16vw 45px;
  }
h1{
	font-size: 7.5rem;
	margin-left: 8vw;
	}
	.purp-abt {
	border: solid 2.5px rgba(0,0,0,1.00);
	padding: 5em 6rem 2em;
	max-width: 600px;
	height: 32rem;
  }
	.purp-abt p {
	font-size: 2rem;
	letter-spacing: .05rem;
  }
	.purp-abt p::first-line {
	font-size: 2.4rem;
  }
	.antenna {
	width: 8rem;
	top: -5rem;
	left: -5.5em;
}
	.purp-lines {
	max-width: 620px;
	max-height: 320px;
	top: -2.5em;
	left: 2.8em;
}
	.purp-controls {
	width: 10rem;
}
	.purp-face {
    width: 20rem;
    top: -15rem;
    right: 10rem;
  }
	.middle-tear {
    width: 15rem;
  }
	.feet-tv {
    height: 500px;
    margin-bottom: 7em;
  }
	.feet-tv div {
 	right: -10rem;
}
	.feet {
    width: 700px;
  }	
	.feet-arrow {
	top: -4rem;
	left: -10rem;
	width: 250px;
}
	#lrn {
    width: 80px;
    top: 12rem;
    left: 7.1rem;
  }
	.middle {
    top: 105rem;
    height: 1100px;
  }
	.creative-dg{
	width: 400px;
	height: 500px;
	margin-top: 0rem;
	margin-left: 11vw; 
	}
	.creative-dg h2{
	font-size: 6.6rem;
	}
	.creative-dg h2 span{
	font-size: 6.8rem;
	}
	.creative-dg h2::before {
	width: 480px;
	height: 90px;
 	right: -3rem;
}
	.creative-dg p {
    font-size: 2.5rem;
    margin-top: 2.5rem;
    margin-left: 10rem;
  }
	.arrow {
    width: 280px;
    top: 15em;
    left: -5rem;
  }
	.design-tear {
    height: 350px;
}
  .design-tear p {
	border: solid 2.5px rgba(0,0,0,1.00);
	width: 550px;
    font-size: 1.8rem;
    letter-spacing: .06rem;
	margin: 9rem 6rem 0rem 2rem;
	padding: 6rem 4rem;
  }	
	.btm-tear {
	width: 150px;

}
	.portfolio {
    width: 100%;
    margin: 20rem auto 4em;
	max-width: 900px;
  }
	
	
/*PORTFOLIO*/
#tv-control{
	right: 35%;
	left: 63%;
	bottom: -19em;
	
}

}
@keyframes lines {
  0% {
    width: 450px;
  }
  100% {
    width: 580px;
    left: -11em;
  }
}
@keyframes form {
  0% {
    left: 2em;
  }
  100% {
    left: 13em;
  }
}
@keyframes bulb {
  0% {
    transform: rotate(-10deg) translate(0px, 0px);
  }
  25% {
    transform: rotate(10deg) translate(10px, -10px);
  }
  50% {
    transform: rotate(-10deg) translate(10px, -10px);
  }
  75% {
    transform: rotate(10deg) translate(10px, -10px);
  }
  100% {
    transform: rotate(-10deg) translate(0px, 0px);
  }
}
@keyframes ft-arrow {
  0% {}
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes button {
  0% {
    color: #2FA3CC;
  }
  100% {
    color: #B47CDB;
  }
}