*{
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

::selection{
    background-color: #222222;
    color: #FAFAFA;
}



/*BODY*/
.landing{
    min-height: 100vh;
    width: 100%;
    background: #FAFAFA;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content:center;
    align-items: center;
}

.container{
    max-width: 1800px;
	min-width: 1024px;
    width: 100%;
    height: 100vh;
    margin: auto;
    background: #FAFAFA;
}
/*BODY*/



/*LANDING GRID*/
.tabel{
    display: grid;
    grid-template-columns: 1fr 0.1fr 1fr;
    grid-template-rows: 1fr 0fr;
    grid-template-areas:
        "lefted midd righted"
        "bottom bottom bottom";
    grid-gap: 0px;
	background: #FAFAFA;
}

#lefted{
    grid-area: lefted;
    background: #FAFAFA;
}

#midd{
    grid-area: midd;
    background: #FAFAFA;
    color: transparent;
}

#righted{
    grid-area: righted;
    background: #FAFAFA;
}

#bottom{
    grid-area: bottom;
    background: #FAFAFA;
	background: transparent;
}

.contentLeft{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "title"
        "empty1"
        "documentation"
        "doc1"
        "doc2"
        "works"
        "works1"
        "works2"
        "works3"
        "works4";
    grid-gap: 0px;
}

#title{
    grid-area: title;
    background: transparent;
    text-align: left;
    padding-top: 70px;
}

#empty1{
    grid-area: empty1;
    background: transparent;
    color: transparent;
    padding-top: 190px;
}

#documentation{
    grid-area: documentation;
    background: transparent;
    text-align: left;
    padding-top: 41px;
    padding-bottom: 5px;
}

#doc1{
    grid-area: doc1;
    background: transparent;
    text-align: left;
    border-left: 1px solid #4D4D4D;
}

#doc2{
    grid-area: doc2;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#works{
    grid-area: works;
    background: transparent;
    text-align: left;
    padding-top: 41px;
    padding-bottom: 5px;
}

#works1{
    grid-area: works1;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#works2{
    grid-area: works2;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#works3{
    grid-area: works3;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#works4{
    grid-area: works4;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

.contentRight{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "empty2"
        "award"
        "award1"
        "collaboration"
        "collab1"
        "collab2"
        "collab3"
        "explorations"
        "explore1"
        "explore2"
        "contact";
    grid-gap: 0px;
}

#empty2{
    grid-area: empty2;
    background: transparent;
    color: transparent;
    padding-top: 15px;
}

#award{
    grid-area: award;
    background: transparent;
    text-align: left;
    padding-top: 41px;
    padding-bottom: 5px;
}

#award1{
    grid-area: award1;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#collaboration{
    grid-area: collaboration;
    background: transparent;
    text-align: left;
    padding-top: 41px;
    padding-bottom: 5px;
}

#collab1{
    grid-area: collab1;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#collab2{
    grid-area: collab2;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#collab3{
    grid-area: collab3;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#explorations{
    grid-area: explorations;
    background: transparent;
    text-align: left;
    padding-top: 41px;
    padding-bottom: 5px;
}

#explore1{
    grid-area: explore1;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#explore2{
    grid-area: explore2;
    background: transparent;
    border-left: 1px solid #4D4D4D;
}

#contact{
    grid-area: contact;
    background: transparent;
    padding-top: 200px;
    display: flex;
    justify-content:flex-end;
}
/*LANDING GRID*/



/*LANDING CONTENT*/

/*JUDUL*/
.name{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 64px;
    padding-top: 20px;
    font-weight: 500;
}

#title a{
    text-decoration: none;
    color: #222222;
}

.upper{
    font-family: 'Inter', sans-serif;
    vertical-align: top;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    cursor: default;
}
/*JUDUL*/



/*GLOBAL SETTING MENU*/
.doc0{
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    font-size: 15px;
    font-weight: 300;
    cursor: default;
}

.docs-content{
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222222;
}

.doc-btn{
    padding: 0px;
}

.hero-btndoc{
    display: flex;
    text-decoration: none;
    color: #222222;
    border-radius: 0px;
    cursor: pointer;
    transition: 0.5s;
    padding: 20px 0px 0px 20px;
}

.hero-btndoc:hover{
    padding: 20px 0px 0px 25px;
}

.hero-btndoc span{
    transition: 0.5s;
}

.hero-btndoc:hover span{
    transform: skew(-15deg, 0deg);
}
/*GLOBAL SETTING MENU*/



/*MENU BUTTON SETTING*/
#doc1 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#doc1 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#doc2 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#doc2 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#works1 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#works1 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#works2 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#works2 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#works3 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#works3 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#works4 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#works4 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#award1 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#award1 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#collab1 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#collab1 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#collab2 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#collab2 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#collab3 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#collab3 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#explore1 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#explore1 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}

#explore2 .doc-btn .docs-content span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0px;    
}

#explore2 .doc-btn img{
    width: 25px;
    padding: 5px 15px 5px 20px;  
}
/*MENU BUTTON SETTING*/



/*POPUP MODAL*/
.popup{
    width: 100%;
    height: 100vh;
    background-color: #FAFAFA;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup___content{
    max-width: 100%;
    width: 1500px;
    height: 90%;
    background-color: #FAFAFA;
    position: relative;
    top: 0%;
    left: 0;
    opacity: 0;
    transition: 0.7s ease;
    border-radius: 0px;
    overflow: hidden;
    transform: translateY(35%);
	border: 1px solid #222222;
}

.popIcon{
    position: relative;
    width: 35px;
    height: 35px;
    background: transparent;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #222222;
}

.popIcon .popup___close{
    z-index: 2;
	border-radius: 0px;
	display: flex;
	background: #222222;
	width: 35px;
	height: 35px;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.popIcon .popup___close svg{
	width: 35px;
	height: 35px;
	stroke: #FAFAFA;
	transition: 0.5s;
}

.popIcon .popup___close:hover{
	background: #FAFAFA;
}

.popIcon .popup___close:hover svg{
	transform: scale(85%);
	stroke: #222222;
}

.popup-location{
    position: relative;
    top: 0;
    left: 0;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	background: #FAFAFA;
	border-bottom: 1px solid #222222;
}

.popup-head{
    background: transparent;
    display: flex;
    justify-content: space-between;
    width: 100%;
	height: 100%;
	z-index: 9;
}

.popup-location ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.popup-location ul li span{
    color: #222222;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.popup-location ul li a{
    text-decoration: none;
    color: #222222;
    font-size: 18px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
}

.popup-location ul li a::after{
    content: '';
    width: 100%;
    height: 1px;
    background: #222222;
    display: block;
    margin-left: 0%;
    margin-top: 3px;
    transition: 0.5s;
    position: absolute;
    right: 0;
}

.popup-location ul li a:hover::after{
    width: 0%;
}

.stripHead{
    background-color: #222222;
    height: 1px;
    width: 50px;
    margin: 5px 30px;
}

#documentation1:target{
    opacity: 1;
    visibility: visible;
}

#documentation1:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#documentation2:target{
    opacity: 1;
    visibility: visible;
}

#documentation2:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup1:target{
    opacity: 1;
    visibility: visible;
}

#popup1:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup2:target{
    opacity: 1;
    visibility: visible;
}

#popup2:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup3:target{
    opacity: 1;
    visibility: visible;
}

#popup3:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup4:target{
    opacity: 1;
    visibility: visible;
}

#popup4:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup5:target{
    opacity: 1;
    visibility: visible;
}

#popup5:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup6:target{
    opacity: 1;
    visibility: visible;
}

#popup6:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup7:target{
    opacity: 1;
    visibility: visible;
}

#popup7:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup8:target{
    opacity: 1;
    visibility: visible;
}

#popup8:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup9:target{
    opacity: 1;
    visibility: visible;
}

#popup9:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup10:target{
    opacity: 1;
    visibility: visible;
}

#popup10:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

#popup0:target{
    opacity: 1;
    visibility: visible;
}

#popup0:target .popup___content{
    opacity: 1;
    transform: translateY(0%) rotate(0deg);
}

.popup-footer{
    background: transparent;
    display: none;
    justify-content: space-between;
    padding-bottom: 30px;
    padding-top: 20px;
    align-items: center;
    position: fixed;
    bottom: 0;
    max-width: 1800px;
    width: 100%;
    margin: auto;
    text-align: center;
}

.popup-action ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.stripFoot{
    background-color: #FAFAFA;
    height: 1px;
    width: 100px;
    margin: 5px 25px 5px 0px;
}

.foot-action{
    margin-left: 0px;
    padding-right: 110px;
}

.foot-action a{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: #222222;
    font-size: 18px;
    letter-spacing: 1px; 
}

.foot-action a::after{
    content: '';
    width: 0%;
    height: 1px;
    background: #222222;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
}

.foot-action a:hover::after{
    width: 100%;
}

.foot-actionGIF{
    margin-left: 0px;
    padding-right: 15px;
}

.foot-actionGIF a{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: #FAFAFA;
    font-size: 18px;
    letter-spacing: 1px; 
}

.foot-actionGIF a::after{
    content: '';
    width: 0%;
    height: 1px;
    background: #FAFAFA;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
}

.foot-actionGIF a:hover::after{
    width: 100%;
}
/*POPUP MODAL*/



/*POPUP MEDIA*/

/*NOISE*/
.endPage{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	overflow: hidden;
}

.noiseBG{
	position: absolute;
	top: -50px;
	left: -50px;
	width: calc(100% + 50px);
	height: calc(100% + 50px);
	background: repeating-linear-gradient(#111, #111 50%, #fff 50%, #fff);
	background-size: 5px 5px;
	filter: url(#noise);
}

.endPage svg{
	width: 0;
	height: 0;
}
/*NOISE*/

/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
.popupTabel{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pHead pHead pText"
		"pFoot pFoot pText"
        "pMedia pMedia pText"
		"pNone1 pNone1 pNone1";
    grid-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

#pHead{
    grid-area: pHead;
    background: transparent;
	padding-top: 20px;
}

#pMedia{
    grid-area: pMedia;
    background: transparent;
}

#pText{
    grid-area: pText;
    background: transparent;
    position: relative;
}

#pFoot{
    grid-area: pFoot;
    background: transparent;
    border-bottom: 1px solid #222222;
    border-radius: 0px;
	padding-top: 20px;
}

#pNone1{
	grid-area: pNone1;
    background: transparent;
    position: relative;
	height: 0px;
	border-top: 0px solid #222222;
	display: none;
}

.contentScrollMobile1P{
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
}

.contentScrollMobile1P::-webkit-scrollbar{
	display: none;
}

.mediaContainer iframe{
    width: 100%;
    height: 650px;
    border-radius: 0px;
    border: 1px solid #222222;
	margin: 10px;
}

.mediaContainer{
    grid-area: contFrame;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mediaContainerIN{
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    margin: 0px;
    border: 1px solid transparent;
    border-radius: 0px;
    height: 670px;
}

.mediaContainerIN iframe{
    display: block;
    width: 650px;
    height: 650px;
    border: 1px solid transparent;
    border-radius: 0px;
}

.container04{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "gif1 gif2 gif3"
        "gif4 gif5 gif6"
        "more more more";
    grid-gap: 10px;
    margin: 0px;
    background: transparent;
    height: 670px;
	margin: 10px;
}

#bar04{
    background: transparent;
    grid-area: bar04;
}

.video-containerg{
	width: 0px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.giphy-embed{
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 0px;
}

.embed {
    background-size: contain;
    height: 100%;
    width: 100%;
}

.embed[data-ready=true] {
    background: transparent;
}

#gif1{
    background: transparent;
    grid-area: gif1;
    border-radius: 0px;
    padding: 10px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#gif2{
    background: transparent;
    grid-area: gif2;
    border-radius: 0px;
    padding: 10px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#gif3{
    background: transparent;
    grid-area: gif3;
    border-radius: 0px;
    padding: 69px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#gif4{
    background: transparent;
    grid-area: gif4;
    border-radius: 0px;
    padding: 60px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#gif5{
    background: transparent;
    grid-area: gif5;
    border-radius: 0px;
    padding: 60px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#gif6{
    background: transparent;
    grid-area: gif6;
    border-radius: 0px;
    padding: 69px;
    border: 1px solid #222222;
    justify-content: center;
    align-items: center;
    display: flex;
}

#more{
    background: pink;
    grid-area: more;
    display: flex;
    justify-content: center;
    align-items:center;
}

#more a{
	display: flex;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.gifMore{
    background: #222222;
    display: flex;
    align-items:center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px solid #222222;
	color: #FAFAFA;
	transition: 0.5s;
}

.gifMore:hover{
	background: #FAFAFA;
	color: #222222;
}

.gifMore span{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1px; 
    position: relative;
}

/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/

/*ABOUT*/
.contentScroll0{
	height: 770px;
	background: #FAFAFA;
	overflow: hidden;
	overflow-y: scroll;
	margin: 0px;
}

.contentScroll0::-webkit-scrollbar{
	display: none;
}

.tabelAbout{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
	grid-template-areas: 
		"tabName tabName tabName tabName"
		"tabEmail tabSocmed tabIntro tabIntro"
		"tabEmpty tabEmpty tabEmpty tabEmpty"
		"tabExp tabExp tabExp tabExp"
		"tabExp1 tabExp1 tabExp1 tabExp1"
		"tabExp2 tabExp2 tabExp2 tabExp2"
		"tabExp3 tabExp3 tabExp3 tabExp3"
		"tabExp4 tabExp4 tabExp4 tabExp4"
		"tabExp5 tabExp5 tabExp5 tabExp5"
		"tabEmpty2 tabEmpty2 tabEmpty2 tabEmpty2";
	margin-top: 20px;
	text-align: left;
}

.tabelAbout a{
	color: #222222;
    text-decoration: none;
	transition: 0.5s;
}

.tabelAbout a:hover{
	color: #c7417b;
}

#tabName{
	grid-area: tabName;
	background: transparent;
}

#tabEmail{
	grid-area: tabEmail;
	background: transparent;
}

#tabSocmed{
	grid-area: tabSocmed;
	background: transparent;
}

#tabIntro{
	grid-area: tabIntro;
	background: transparent;
}

#tabEmpty{
	grid-area: tabEmpty;
	background: transparent;
	height: 50px;
}

#tabEmpty2{
	grid-area: tabEmpty2;
	background: transparent;
	height: 50px;
}

#tabExp{
	grid-area: tabExp;
	background: transparent;
}

#tabExp1{
	grid-area: tabExp1;
	background: transparent;
}

#tabExp2{
	grid-area: tabExp2;
	background: transparent;
}

#tabExp3{
	grid-area: tabExp3;
	background: transparent;
}

#tabExp4{
	grid-area: tabExp4;
	background: transparent;
}

#tabExp5{
	grid-area: tabExp5;
	background: transparent;
}

.abName{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 10px 0px;
	margin: 0px 20px;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

.abEmail{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	line-height: 25px;
}

.abList{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 10px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	line-height: 25px;
}

#tabExp1{
	position: relative;
	padding: 10px 0px 20px 0px;
	margin: 0px 20px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

#tabExp2{
	position: relative;
	padding: 10px 0px 20px 0px;
	margin: 0px 20px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

#tabExp3{
	position: relative;
	padding: 10px 0px 20px 0px;
	margin: 0px 20px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

#tabExp4{
	position: relative;
	padding: 10px 0px 20px 0px;
	margin: 0px 20px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

#tabExp5{
	position: relative;
	padding: 10px 0px 20px 0px;
	margin: 0px 20px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

.conExp1{
	position: absolute;
	left: 365px;
}

.conExp2{
	position: absolute;
	left: 740px;
}

#tabSocmed ul li{
    list-style: none;
    display: flex;
    position: relative;
}

.abIntro{
	position: relative;
	padding: 10px 20px 10px 10px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	line-height: 25px;
	text-align: justify;
}

.abIntro a{
	color: #222222;
	transition: 0.5s;
}

.abIntro a:hover{
	color: #c7417b;
}


.desExp{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 0px 20px 0px;
	margin: 0px 0px 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

.desExp2{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 10px 20px 10px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

.desExp3{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 10px 20px 10px;;
	margin: 0px 20px 0px 0px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	border-bottom: 1px solid #222222;
}

/*ABOUT*/

/*DOCUMENTATION*/
.popupTabelDoc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pHeadDoc pHeadDoc pHeadDoc"
		"pFootDoc pFootDoc pFootDoc"
        "containerScroll containerScroll containerScroll";
    grid-column-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

.contentTextDoc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pTextDocTitle1 pTextDocTitle1 pTextDocDesc1 pTextDocDesc1"
		"pTextDocRole1 pTextDocRole1 pTextDocDesc1 pTextDocDesc1"
		"pTextDocSW1 pTextDocSW1 pTextDocDesc1 pTextDocDesc1"
		"pTextDocNone1 pTextDocNone1 pTextDocNone1 pTextDocNone1"
		"pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle"
		"pTextDocMographIMG1 pTextDocMographIMG1 pTextDocMographIMG2 pTextDocMographIMG2"
		"pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc"
		"pTextDocNone2 pTextDocNone2 pTextDocNone2 pTextDocNone2"
		"pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle"
		"pTextDocKeyingIMG1 pTextDocKeyingIMG1 pTextDocKeyingDesc pTextDocKeyingDesc"
		"pTextDocNone3 pTextDocNone3 pTextDocNone3 pTextDocNone3"
		"pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle"
		"pTextDocRotoIMG1 pTextDocRotoIMG1 pTextDocRotoDesc pTextDocRotoDesc"
		"pTextDocNone4 pTextDocNone4 pTextDocNone4 pTextDocNone4"
		"pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle"
		"pTextDocTrackingIMG1 pTextDocTrackingIMG1 pTextDocTrackingIMG2 pTextDocTrackingIMG2"
		"pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc"
		"pTextDocNone5 pTextDocNone5 pTextDocNone5 pTextDocNone5"
		"pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle"
		"pTextDocShowIMG1 pTextDocShowIMG1 pTextDocShowIMG2 pTextDocShowIMG2"
		"pTextDocShowDesc1 pTextDocShowDesc1 pTextDocShowDesc2 pTextDocShowDesc2"
		"pTextDocShowDesc3 pTextDocShowDesc3 pTextDocShowDesc4 pTextDocShowDesc4"
		"pTextDocNone6 pTextDocNone6 pTextDocNone6 pTextDocNone6";
    grid-column-gap: 0px;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
}

.containerScroll{
	height: 650px;
	background: transparent;
	overflow: hidden;
	overflow-y: scroll;
	margin: 10px 10px 10px 10px;
	border-top: 1px solid #222222;
	border-left: 1px solid #222222;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#containerScroll{
	grid-area: containerScroll;
}

::-webkit-scrollbar{
	width: 10px;
}

::-webkit-scrollbar-track{
	background: #FAFAFA;
	margin-block: 0px;
}

::-webkit-scrollbar-thumb{
	background: #222222;
}

::-webkit-scrollbar-button{
	background: #FAFAFA;
	height: 10px;
	width: 10px;
	border-style: solid;
}

::-webkit-scrollbar-button:single-button:vertical:decrement{
	border-width: 0 5px 5px 5px;
	border-color: transparent transparent #222222 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:increment{
	border-width: 5px 5px 0 5px;
	border-color: #222222 transparent transparent transparent;
}

#pHeadDoc{
    grid-area: pHeadDoc;
    background: transparent;
	padding-top: 20px;
}

#pTextDocNone1{
	grid-area: pTextDocNone1;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone2{
	grid-area: pTextDocNone2;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone3{
	grid-area: pTextDocNone3;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone4{
	grid-area: pTextDocNone4;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone5{
	grid-area: pTextDocNone5;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone6{
	grid-area: pTextDocNone6;
    background: transparent;
    position: relative;
	height: 30px;
	border-bottom: 0px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocTitle1{
    grid-area: pTextDocTitle1;
    background: transparent;
    position: relative;
	height: 100px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.DocTitle{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 10px;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
	height: 100%;
}

#pTextDocDesc1{
    grid-area: pTextDocDesc1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #222222;
	border-right: 1px solid #222222;
	height: auto;
}

#pTextDocRole1{
    grid-area: pTextDocRole1;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.DocRole{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 0px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
	height: 100%;
}

.DocRole .DocRoleID{
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 120px;
	background: transparent;
	padding: 0px 10px;
	border-right: 1px solid #222222;
}

.DocRole .DocRoleDSC{
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	background: transparent;
	padding: 0px 10px;
}

#pTextDocSW1{
    grid-area: pTextDocSW1;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.DocSW{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 0px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
	height: 100%;
}

.DocSW .DocSWID{
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 120px;
	background: transparent;
	padding: 0px 10px;
	border-right: 1px solid #222222;
}

.DocSW .DocSWDSC{
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	background: transparent;
	padding: 0px 10px;
}

.DocDesc{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 20px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	height: 100%;
	line-height: 25px;
}

#pTextDocMographTitle{
	grid-area: pTextDocMographTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocMographIMG1{
    grid-area: pTextDocMographIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
}

#pTextDocMographIMG2{
    grid-area: pTextDocMographIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.mographIMG{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}

.mographIMG img{
	height: 100%;
	width: 100%;
}

.mographIMG1{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC1{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG1:hover{
	background: #FAFAFA;
}

.mographIMG1:hover .hovIMG1{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/4792a50cf76f83b532d6710987e2e23b/0a36ca957f0b8874-92/s1280x1920/5a4acfdb00d0c3a827ebe14db09e2553ab55d5b0.gifv);
	border: 1px solid #222222;
}

.hovIMG1{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/d851deb0f766d2c5c7034587ee963096/194b29fe6badec2c-4b/s1280x1920/0ae3f8c32c3974904330108305366029395763ac.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.mographIMG2{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC2{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG2:hover{
	background: #FAFAFA;
}

.mographIMG2:hover .hovIMG2{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/76ff055f1ce2dd6a9e40368de8638eb6/e74628d6371f3f0e-a0/s1280x1920/e4bb1da6afed6d7e9f25fd20062aa4764c695726.gifv);
	border: 1px solid #222222;
}

.hovIMG2{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/70d496f9888fb361d653535bf34e5918/7944dbdcb1197276-f9/s1280x1920/a8181006ca843f3555126abf7d40165dcfd34d34.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}


#pTextDocMographDesc{
	grid-area: pTextDocMographDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

.mographDesc{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 10px;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
	height: 100%;
	line-height: 25px;
}

#pTextDocKeyingTitle{
	grid-area: pTextDocKeyingTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocKeyingIMG1{
    grid-area: pTextDocKeyingIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.mographIMG3{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC3{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG3:hover{
	background: #FAFAFA;
}

.mographIMG3:hover .hovIMG3{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/18daca204f1bae65945917bca7eb455e/ba5225a740b842f4-d9/s1280x1920/320d69fb1c78341eb273c7aa64b6364b493ab099.gifv);
	border: 1px solid #222222;
}

.hovIMG3{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/6b5d0e854ae6957236cc369b320ec4c0/2242c8a1d945f2fc-21/s1280x1920/3e4fa0285024c305fdd613d566abd90d1990fa78.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocKeyingDesc{
	grid-area: pTextDocKeyingDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
	border-left: 1px solid #222222;
	height: auto;
}

#pTextDocRotoTitle{
	grid-area: pTextDocRotoTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocRotoIMG1{
    grid-area: pTextDocRotoIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.mographIMG4{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC4{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG4:hover{
	background: #FAFAFA;
}

.mographIMG4:hover .hovIMG4{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/ec586f697c9a00ba2f55ee4faa6c08aa/bb318272c8e01fe6-58/s1280x1920/ecd295e0129cfef005967ed52456ac2d44a44343.gifv);
	border: 1px solid #222222;
}

.hovIMG4{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/0af5404514084c6c7a1c1770fc40dd6c/fbd87bee8422a25c-5d/s1280x1920/24574440c2afb7ca7cb7ded368da1311fa486721.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocRotoDesc{
	grid-area: pTextDocRotoDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
	border-left: 1px solid #222222;
	height: auto;
}

#pTextDocTrackingTitle{
	grid-area: pTextDocTrackingTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocTrackingIMG1{
    grid-area: pTextDocTrackingIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocTrackingIMG2{
    grid-area: pTextDocTrackingIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.mographIMG5{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC5{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG5:hover{
	background: #FAFAFA;
}

.mographIMG5:hover .hovIMG5{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/4fd320824a9657ee19e44a0cb32ca817/f686068eebb6962a-39/s1280x1920/e5155e4640a5ead7b8cd7a62db87c4069817bf9f.gifv);
	border: 1px solid #222222;
}

.hovIMG5{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/294471b672a146df9877c3bf9d327d36/d5181f5475de39b7-05/s1280x1920/2dde121fc75d467a36695a0853b019fa90e70b58.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.mographIMG6{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC6{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG6:hover{
	background: #FAFAFA;
}

.mographIMG6:hover .hovIMG6{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/fa396659ab3c18048b11ae19545e419f/0c496ed6a6394f52-f6/s1280x1920/605cf4ebbfe2772d39a86e53af6f7dc1155ec145.gifv);
	border: 1px solid #222222;
}

.hovIMG6{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/b0a404f4199994acb414beda76e4c500/95e427c94c1619b6-4b/s1280x1920/a79d1670ef73a7a29728b9df1e17ae7033e1944c.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocTrackingDesc{
	grid-area: pTextDocTrackingDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

#pTextDocShowTitle{
	grid-area: pTextDocShowTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocShowIMG1{
    grid-area: pTextDocShowIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocShowIMG2{
    grid-area: pTextDocShowIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.mographIMG7{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC7{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG7:hover{
	background: #FAFAFA;
}

.mographIMG7:hover .hovIMG7{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/02e812dd9d691f7d49d894a0744403d8/87d96d7e7a4f603f-7f/s1280x1920/32cdccbcc9f727b91e90dde9afce565cf09bf936.gifv);
	border: 1px solid #222222;
}

.hovIMG7{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/61e3d7361e2f000a0fb991e4451298c6/27891b132cac5df9-0d/s1280x1920/9cd065536cb208b232e5a60c267c6a6a99f88adb.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.mographIMG8{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.mographIMGC8{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.mographIMG8:hover{
	background: #FAFAFA;
}

.mographIMG8:hover .hovIMG8{
	width: 100%;
	height: 398px;
	background-image: url(https://64.media.tumblr.com/c4b6fe4bb59b6ac1b5ceeb2e568f8b7d/633e50c4dc843c2f-9f/s1280x1920/d6768eb5d78cb854ab7de071ff909c615d9b2c58.gifv);
	border: 1px solid #222222;
}

.hovIMG8{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/0abaf197af84b03fc7ef433b5982db73/1fce87dc8d7d44cf-73/s1280x1920/53241f2599b25be1b47229e0a2044094aa496b49.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocShowDesc1{
	grid-area: pTextDocShowDesc1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 50px;
	border-right: 0px solid #222222;
}

#pTextDocShowDesc2{
	grid-area: pTextDocShowDesc2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 50px;
	border-right: 1px solid #222222;
	border-left: 1px solid #222222;
}

#pTextDocShowDesc3{
	grid-area: pTextDocShowDesc3;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 100px;
	border-right: 0px solid #222222;
}

#pTextDocShowDesc4{
	grid-area: pTextDocShowDesc4;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 100px;
	border-right: 1px solid #222222;
	border-left: 1px solid #222222;
}

.popupTabelDoc2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pHeadDoc2 pHeadDoc2 pHeadDoc2"
		"pFootDoc2 pFootDoc2 pFootDoc2"
        "containerScroll2 containerScroll2 containerScroll2";
    grid-column-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

.contentTextDoc2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pTextDocTitle2 pTextDocTitle2 pTextDocDesc2 pTextDocDesc2"
		"pTextDocRole2 pTextDocRole2 pTextDocDesc2 pTextDocDesc2"
		"pTextDocSW2 pTextDocSW2 pTextDocDesc2 pTextDocDesc2"
		"pTextDocNone1D pTextDocNone1D pTextDocNone1D pTextDocNone1D"
		"pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle"
		"pTextDocModelIMG1 pTextDocModelIMG1 pTextDocModelIMG2 pTextDocModelIMG2"
		"pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc"
		"pTextDocNone2D pTextDocNone2D pTextDocNone2D pTextDocNone2D"
		"pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle"
		"pTextDocMatIMG1 pTextDocMatIMG1 pTextDocMatIMG2 pTextDocMatIMG2"
		"pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc"
		"pTextDocNone3D pTextDocNone3D pTextDocNone3D pTextDocNone3D"
		"pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle"
		"pTextDocRigIMG1 pTextDocRigIMG1 pTextDocRigIMG2 pTextDocRigIMG2"
		"pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc"
		"pTextDocNone4D pTextDocNone4D pTextDocNone4D pTextDocNone4D"
		"pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle"
		"pTextDocCompIMG1 pTextDocCompIMG1 pTextDocCompDesc pTextDocCompDesc"
		"pTextDocNone5D pTextDocNone5D pTextDocNone5D pTextDocNone5D"
		"pTextDocARTitle pTextDocARTitle pTextDocARTitle pTextDocARTitle"
		"pTextDocARIMG1 pTextDocARIMG1 pTextDocARIMG2 pTextDocARIMG2"
		"pTextDocARDesc pTextDocARDesc pTextDocARDesc pTextDocARDesc"
		"pTextDocNone6D pTextDocNone6D pTextDocNone6D pTextDocNone6D"
		"pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle"
		"pTextDocCaseIMG1 pTextDocCaseIMG1 pTextDocCaseIMG2 pTextDocCaseIMG2"
		"pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc"
		"pTextDocNone7D pTextDocNone7D pTextDocNone7D pTextDocNone7D";
    grid-column-gap: 0px;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
}

.containerScroll2{
	height: 650px;
	background: transparent;
	overflow: hidden;
	overflow-y: scroll;
	margin: 10px 10px 10px 10px;
	border-top: 1px solid #222222;
	border-left: 1px solid #222222;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#containerScroll2{
	grid-area: containerScroll2;
}

#pHeadDoc2{
    grid-area: pHeadDoc2;
    background: transparent;
	padding-top: 20px;
}

#pTextDocNone1D{
	grid-area: pTextDocNone1D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone2D{
	grid-area: pTextDocNone2D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone3D{
	grid-area: pTextDocNone3D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone4D{
	grid-area: pTextDocNone4D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone5D{
	grid-area: pTextDocNone5D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone6D{
	grid-area: pTextDocNone6D;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocNone7D{
	grid-area: pTextDocNone7D;
    background: transparent;
    position: relative;
	height: 30px;
	border-bottom: 0px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocTitle2{
    grid-area: pTextDocTitle2;
    background: transparent;
    position: relative;
	height: 100px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocDesc2{
    grid-area: pTextDocDesc2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #222222;
	border-right: 1px solid #222222;
	height: auto;
}

#pTextDocRole2{
    grid-area: pTextDocRole2;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocSW2{
    grid-area: pTextDocSW2;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocModelTitle{
	grid-area: pTextDocModelTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocModelIMG1{
    grid-area: pTextDocModelIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocModelIMG2{
    grid-area: pTextDocModelIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.model3DIMG1{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC1{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG1:hover{
	background: #FAFAFA;
}

.model3DIMG1:hover .hovmodel3DIMG1{
	background-image: url(https://64.media.tumblr.com/eec1f3592e49168145db8cc4d1e6042b/c5e217895ca5d831-00/s1280x1920/2298cb84b976e102e141a3d927c9ebc997e0a290.gifv);
}

.model3DIMG1:hover .model3DIMGC1{
	border: 1px solid #222222;
}

.hovmodel3DIMG1{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/4749cc42595388a732a0f798ed28fbf8/5399129e8f14618e-d0/s1280x1920/8f36eff853b54354265f6ada7d556e34ba562d87.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.model3DIMG2{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC2{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG2:hover{
	background: #FAFAFA;
}

.model3DIMG2:hover .hovmodel3DIMG2{
	background-image: url(https://64.media.tumblr.com/948d24f843553c3790f23a1eeb540b06/6067b430327954bd-50/s1280x1920/158f8933e1f4de31a8ebaa9dea723d7bff2166dc.gifv);
}

.model3DIMG2:hover .model3DIMGC2{
	border: 1px solid #222222;
}

.hovmodel3DIMG2{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/d9bdc04a94a9bc7d7b9c135907bf2cff/fbb1798052514963-8b/s1280x1920/f6349558622b133462c2204ce9e2ebf2419a6186.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocModelDesc{
	grid-area: pTextDocModelDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

#pTextDocMatTitle{
	grid-area: pTextDocMatTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocMatIMG1{
    grid-area: pTextDocMatIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocMatIMG2{
    grid-area: pTextDocMatIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.model3DIMG3{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC3{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG3:hover{
	background: #FAFAFA;
}

.model3DIMG3:hover .hovmodel3DIMG3{
	background-image: url(https://64.media.tumblr.com/c2c5da08899de078d410c810b9d82c93/26cc74925535231b-e0/s1280x1920/01dc145656fc14b07a51015013e334ef5a6afff2.gifv);
}

.model3DIMG3:hover .model3DIMGC3{
	border: 1px solid #222222;
}

.hovmodel3DIMG3{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/a269b137ada984cab1a18ac7946ebf0a/fef3bf0a251287f5-8e/s1280x1920/9fc2c453ea9415425692e3d502faaf1391a36dcf.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.model3DIMG4{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC4{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG4:hover{
	background: #FAFAFA;
}

.model3DIMG4:hover .hovmodel3DIMG4{
	background-image: url(https://64.media.tumblr.com/3b5e44f4a55491df8715bfcb841ac574/7a8dd6bf459a6be8-a1/s1280x1920/af92e03bfb53edcbc191ac388c3a845094268bef.gifv);
}

.model3DIMG4:hover .model3DIMGC4{
	border: 1px solid #222222;
}

.hovmodel3DIMG4{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/79066f440ce8c4b886a3429e0d5be1b1/8fca98de7e7e7fe7-ba/s1280x1920/981a9096c41fa7cee5ce47f6e3929bcb8a61b782.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocMatDesc{
	grid-area: pTextDocMatDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

#pTextDocRigTitle{
	grid-area: pTextDocRigTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocRigIMG1{
    grid-area: pTextDocRigIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocRigIMG2{
    grid-area: pTextDocRigIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.model3DIMG5{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC5{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG5:hover{
	background: #FAFAFA;
}

.model3DIMG5:hover .hovmodel3DIMG5{
	background-image: url(https://64.media.tumblr.com/eb1acba85e70be34c70c68665a26b5c5/78eb611ffd66ef59-05/s1280x1920/ae0e3b8608155aba5167f3789772937008fddaf2.gifv);
}

.model3DIMG5:hover .model3DIMGC5{
	border: 1px solid #222222;
}

.hovmodel3DIMG5{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/182cfe3579ca86c8b6bca065bfa54af8/35a8db7f1f67d5e0-42/s1280x1920/3f1cd757c43125096c973395f81f88e2c21258b2.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.model3DIMG6{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMGC6{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	background: #4D4D4D;
	border: 1px solid #FAFAFA;
	width: 100%;
}

.model3DIMG6:hover{
	background: #FAFAFA;
}

.model3DIMG6:hover .hovmodel3DIMG6{
	background-image: url(https://64.media.tumblr.com/5eb985093e3d7e08bd15b077d6d243ae/d64773f8706f9f21-11/s1280x1920/e8cecb36a7c23982671631e0719ebb8244a81c6b.gifv);
}

.model3DIMG6:hover .model3DIMGC6{
	border: 1px solid #222222;
}

.hovmodel3DIMG6{
	width: 400px;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/da064ac699d9755d684c3602dad43040/bb32e7671451578a-04/s1280x1920/0a7353cff53aac181cd1ebd23d566683fcb18070.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

#pTextDocRigDesc{
	grid-area: pTextDocRigDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

#pTextDocCompTitle{
	grid-area: pTextDocCompTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocCompIMG1{
    grid-area: pTextDocCompIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

.model3DIMG7{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	cursor: pointer;
	transition: 0.5s;
}

.model3DIMG7:hover{
	background: #FAFAFA;
}

.model3DIMG7:hover .hovmodel3DIMG7{
	background-image: url(https://64.media.tumblr.com/201098470facc8f17a5b51f1b8f93255/98877ffd1cd4240d-ea/s1280x1920/7a9e46294662dba979cf7aa8ab8d3469b135d3cd.gifv);
	border: 1px solid #222222;
}

.hovmodel3DIMG7{
	width: 100%;
	height: 400px;
	background-image: url(https://64.media.tumblr.com/ebea9565085fa91426089561eed6854d/0781839fb5d57c05-5c/s1280x1920/8976ff0f47294c4a6319dc5f5bafc28f7078e295.pnj);
	background-size: contain;
	position: relative;
	display: flex;
	border: 1px solid #FAFAFA;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FAFAFA;
}

#pTextDocCompDesc{
	grid-area: pTextDocCompDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
	border-left: 1px solid #222222;
	height: auto;
}

#pTextDocARTitle{
	grid-area: pTextDocARTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocARIMG1{
    grid-area: pTextDocARIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocARIMG2{
    grid-area: pTextDocARIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

.hov-modelIMG{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background: #222222;
	transition: 0.5s;
}

.hov-modelIMG:hover{
	background: #FAFAFA;
}

.hov-modelIMG:hover iframe{
	border: 1px solid #222222;
}

.hov-modelIMG iframe{
	height: 400px;
	width: 100%;
	border: 1px solid #FAFAFA
}

#pTextDocARDesc{
	grid-area: pTextDocARDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

#pTextDocCaseTitle{
	grid-area: pTextDocCaseTitle;
    background: transparent;
    position: relative;
	height: 50px;
	border-bottom: 1px solid #222222;
	border-right: 1px solid #222222;
}

#pTextDocCaseIMG1{
    grid-area: pTextDocCaseIMG1;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-right: 0px solid #222222;
}

#pTextDocCaseIMG2{
    grid-area: pTextDocCaseIMG2;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	border-left: 1px solid #FAFAFA;
	border-right: 1px solid #222222;
}

#pTextDocCaseDesc{
	grid-area: pTextDocCaseDesc;
    background: transparent;
    position: relative;
	border-bottom: 1px solid #222222;
	height: 150px;
	border-right: 1px solid #222222;
}

.modelIMG{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}

.model3DIMG{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
	background: #4D4D4D;
	border: 1px solid #222222;
}

.modelIMG img{
	height: 100%;
	width: 100%;
}

.model3DIMG img{
	display: block;
	width: 400px;
	height: 400px;
	background: transparent;
}

.modelIMG iframe{
	height: 400px;
	width: 100%;
}

#pFootDoc{
    grid-area: pFootDoc;
    background: transparent;
    border-bottom: 1px solid #222222;
    border-radius: 0px;
	padding-top: 20px;
}

.pText-contentDoc{
    height: 670px;
    background-color: #FAFAFA;
    border-radius: 0px;
	border: 1px solid #222222;
    position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

#pFootDoc2{
    grid-area: pFootDoc2;
    background: transparent;
    border-bottom: 1px solid #222222;
    border-radius: 0px;
	padding-top: 20px;
}
/*DOCUMENTATION*/

/*WORKS PANDIT*/
.popupTabelTri{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pHeadTri pHeadTri pHeadTri"
		"pFootTri pFootTri pFootTri"
        "contentScrollMobileTri contentScrollMobileTri contentScrollMobileTri";
    grid-column-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

#contentScrollMobileTri{
	grid-area: contentScrollMobileTri;
}

.contentScrollMobileTri{
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
}

.contentScrollMobileTri::-webkit-scrollbar{
	display: none;
}

.contentTextTri{
    display: grid;
    grid-template-columns: 1fr 0.02fr 1fr 0.02fr 1fr 0fr 0fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pTextTri1 pTextTriNone1 pTextTri2 pTextTriNone2 pTextTri3 pTextTriNone3 pTextTriNone4";
    grid-column-gap: 0px;
	grid-row-gap: 0px;
    padding: 0px;
    margin: 10px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

#contentTextTri{
	grid-area: contentTextTri;
	background: transparent;
}

#pHeadTri{
    grid-area: pHeadTri;
    background: transparent;
	padding-top: 20px;
}

#pTextTri1{
    grid-area: pTextTri1;
    background: transparent;
    position: relative;
}

#pTextTri2{
    grid-area: pTextTri2;
    background: transparent;
    position: relative;
}

#pTextTri3{
    grid-area: pTextTri3;
    background: transparent;
    position: relative;
}

#pFootTri{
    grid-area: pFootTri;
    background: transparent;
    border-bottom: 1px solid #222222;
    border-radius: 0px;
	padding-top: 20px;
}

#pTextTriNone1{
	grid-area: pTextTriNone1;
	background: transparent;
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	height: auto;
}

#pTextTriNone2{
	grid-area: pTextTriNone2;
	background: transparent;
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	height: auto;
}

#pTextTriNone3{
	grid-area: pTextTriNone3;
	background: transparent;
	border-top: 0px solid #222222;
	border-bottom: 0px solid #222222;
	height: auto;
}

#pTextTriNone4{
	grid-area: pTextTriNone4;
	background: transparent;
	border-top: 0px solid #222222;
	border-bottom: 0px solid #222222;
	height: auto;
}

.pText-contentTri{
    height: 670px;
    background-color: #FAFAFA;
    border-radius: 0px;
	border: 1px solid #222222;
    position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

.gotoIcon{
	position: absolute;
	width: 100%;
	height: 70px;
	background: transparent;
    bottom: 0;
	border-top-right-radius: 0px;
	border-top: 1px solid #222222;
}

.visitLink{
	position: relative;
	background: #222222;
	color: #FAFAFA;
	width: 100%;
	height: 100%;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.visitLink:hover{
	background: #FAFAFA;
	color: #222222;
}

.gotoIcon a{
	text-decoration: none;
	font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
}

.triText{
	padding: 20px;
	width: 100%;
	z-index: 1;
}

.pTexttri-Head{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 25px 0px;
	position: relative;
}

.triImage{
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	border: 1px solid #222222;
	width: 100%;
	height: 250px;
	border-radius: 0px;
	overflow: hidden;
}

.triImage img{
	position: relative;
	width: 100%;
	display: flex;
}

.pTexttri-Title{
    background: transparent;
    padding: 20px 0px 15px 0px;
	position: relative;
	display: flex;
}

.pTexttri-info{
    background: transparent;
}

.pTexttri-Head span{
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
}

.pTexttri-Title span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 54px;
    font-weight: 400;
    color: #222222;
}

.pTexttri-info .undertxttri{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #222222;
    line-height: 25px;
}
/*WORKS PANDIT*/

/*WORKS AMPHIBI, PEKOPO*/
.popupTabel2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "contentScrollMobile";
    grid-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

#pMedia2{
    grid-area: pMedia2;
    background: transparent;
	z-index: 3;
}

.playlistContainer{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
	grid-template-areas: 
		"menuContainer"
		"vidmain"
		"contentNone";
	position: relative;
	gap: 0px;
}

#contentNone{
	grid-area: contentNone;
	height: 0px;
	background: transparent;
	display: none;
}

#contentScrollMobile{
	grid-area: contentScrollMobile;
}

.contentScrollMobile{
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
}

.contentScrollMobile::-webkit-scrollbar{
	display: none;
}

.menuContainer{
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
	grid-template-areas: 
		"identity video-list";
	gap: 0px;
	border-bottom: 1px solid #FAFAFA;
}

#identity{
	grid-area: identity;
	background: transparent;
	height: 100%;
	border-bottom: 1px solid #222222;
}

#video-list{
	grid-area: video-list;
}

#vidmain{
	grid-area: vidmain;
}

#menuContainer{
	grid-area: menuContainer;
	position: absolute;
	width: 100%;
	height: 100%;
}

.identityContent{
	height: 100%;
	display: grid;
	background: transparent;
}

.identityTitle{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 20px;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
	gap: 10px;
	z-index: 9999;
}

.titleLinked{
    margin-left: 0px;
    padding-right: 0px;
}

.titleLinked a{
	position: relative;
    text-decoration: none;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
}

.titleLinked a::after{
    content: '';
    width: 100%;
    height: 1px;
    background: #222222;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
	position: absolute;
    right: 0;
}

.titleLinked a:hover::after{
    width: 0%;
}

.identitySubtitle{
	background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.identitySubtitle ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.identitySubtitle span{
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    padding: 10px 20px;
    letter-spacing: 1px;
}

.playlistContainer .main-video{
    background: transparent;
}

.playlistContainer .main-video .video{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
		"identityContent empt"
		"vidFoot empt"
        "contFrame titlevideo"
        ;
    gap: 0px;
	margin-bottom: 0px;
}

.playlistContainer .main-video #identityContent{
	grid-area: identityContent;
}

.playlistContainer .main-video #empt{
	grid-area: empt;
	background: red;
	height: 120px;
	border-bottom: 0px solid #222222;
}

.playlistContainer .main-video iframe{
    width: 100%;
    height: 650px;
    border-radius: 0px;
    border: 1px solid #222222;
	margin: 10px;
}

.playlistContainer .main-video #contFrame{
    grid-area: contFrame;
	display: flex;
	justify-content: center;
	align-items: center;
}

.playlistContainer .main-video #titlevideo{
    grid-area: titlevideo;
    background: #FAFAFA;
    border-radius: 0px;
	border-left: 1px solid #222222;
	border-top: 0px solid #222222;
}

.playlistContainer .main-video #vidFoot{
    grid-area: vidFoot;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0px;
}

.playlistContainer .main-video #titlevideo #judul{
    color: #222222;
    font-size: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
}

.playlistContainer .main-video #titlevideo #info{
    color: #222222;
    font-size: 15px;
    height: 650px;
    position:relative;
	border-bottom: 0px solid #222222;
}

.playlistContainer .video-list{
    background: transparent;
    border-radius: 0px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
	border-left: 1px solid #222222;
}

.playlistContainer .video-list .vid #identityContent{
	display: none;
}

.playlistContainer .video-list .vid #empt{
	display: none;
}

.playlistContainer .video-list .vid iframe{
    width: 100px;
    border-radius: 5px;
    display: none;
}

.playlistContainer .video-list .vid #titlevideo #info{
    display: none;
}

.playlistContainer .video-list .vid #vidFoot{
    display: none;
}

.playlistContainer .video-list .vid{
    display: flex;
    align-items: center;
    background: #222222;
    border-radius: 0px;
    padding: 0px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.playlistContainer .video-list .vid:hover{
    background: #FAFAFA;
}

.playlistContainer .video-list .vid.active{
    background: #FAFAFA;
}

.playlistContainer .video-list .vid.active #titlevideo{
    color: #222222;
}

.playlistContainer .video-list .vid.active #titlevideo .judul{
	border-bottom: 1px solid #222222;
}

.playlistContainer .video-list .vid.active #titlevideo .judul .numb{
	border-right: 1px solid #222222;
}

.playlistContainer .video-list .vid.active #titlevideo .judul .numbSymbol svg{
	stroke: #222222;
}

.playlistContainer .video-list .vid #titlevideo{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FAFAFA;
    letter-spacing: 1px;
    transition: 0.5s;
	width: 100%;
	height: 100%;
}

.playlistContainer .video-list .vid:hover #titlevideo{
    color: #222222;
}

.playlistContainer .video-list .vid:hover #titlevideo .judul{
	border-bottom: 1px solid #222222;
}

.playlistContainer .video-list .vid:hover #titlevideo .judul .numb{
	border-right: 1px solid #222222;
}

.playlistContainer .video-list .vid:hover #titlevideo .judul .numbSymbol svg{
	stroke: #222222
}

.playlistContainer .main-video .video .judul{
	display: none;
}

.judul{
	background: transparent;
	padding: 0px 0px;
	display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
	border-bottom: 1px solid #FAFAFA;
}

.numb{
	height: 40px;
	width: 50px;
	background: transparent;
	border-right: 1px solid #FAFAFA;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbJudul{
    display: flex;
    align-items: center;
	position: relative;
	width: 100%;
	padding: 0px 10px;
}

.numbJudul .dur{
	padding-right: 20px;
	position: absolute;
	right: 0;
}

.numbSymbol{
	height: 40px;
	width: 45px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbSymbol svg{
	transform: rotate(0deg);
	width: 15px;
	stroke: #FAFAFA;
}


.playlistContainer2{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
	grid-template-areas: 
		"menuContainer2"
		"vidmain2"
		"contentNone2";
	position: relative;
	gap: 0px;
}

#contentNone2{
	grid-area: contentNone2;
	height: 0px;
	background: transparent;
	display: none;
}

.menuContainer2{
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
	grid-template-areas: 
		"identity2 vidlist2";
	gap: 0px;
	border-bottom: 1px solid #FAFAFA;
}

#identity2{
	grid-area: identity2;
	background: transparent;
	height: 100%;
	border-bottom: 1px solid #222222;
}

#vidlist2{
	grid-area: vidlist2;
}

#vidmain2{
	grid-area: vidmain2;
}

#menuContainer2{
	grid-area: menuContainer2;
	position: absolute;
	width: 100%;
	height: 100%;
}

.identityContent2{
	height: 100%;
	display: grid;
	background: transparent;
}

.identityTitle2{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 20px;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
	z-index: 9999;
}

.identitySubtitle2{
	background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.identitySubtitle2 ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.identitySubtitle2 span{
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    padding: 10px 20px;
    letter-spacing: 1px;
}

.playlistContainer2 .main-video2{
    background: transparent;
}

.playlistContainer2 .main-video2 .video2{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
		"identityContent2 empt2"
		"vidFoot2 empt2"
        "contFrame2 titlevideo2"
        ;
    gap: 0px;
}

.playlistContainer2 .main-video2 #identityContent2{
	grid-area: identityContent2;
}

.playlistContainer2 .main-video2 #empt2{
	grid-area: empt2;
	background: red;
	height: 120px;
}

.playlistContainer2 .main-video2 iframe{
    width: 100%;
    height: 650px;
    border-radius: 0px;
    border: 1px solid #222222;
	margin: 10px;
}

.playlistContainer2 .main-video2 #contFrame2{
    grid-area: contFrame2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.playlistContainer2 .main-video2 #titlevideo2{
    grid-area: titlevideo2;
    background: #FAFAFA;
    border-radius: 0px;
	border-left: 1px solid #222222;
	border-top: 0px solid #222222;
}

.playlistContainer2 .main-video2 #vidFoot2{
    grid-area: vidFoot2;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0px;
}

.playlistContainer2 .main-video2 #titlevideo2 #judul2{
    color: #222222;
    font-size: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
}

.playlistContainer2 .main-video2 #titlevideo2 #info2{
    color: #222222;
    font-size: 15px;
    height: 650px;
    position:relative;
}

.playlistContainer2 .video-list2{
    background: transparent;
    border-radius: 0px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
	border-left: 1px solid #222222;
}

.playlistContainer2 .video-list2 .vid2 #identityContent2{
	display: none;
}

.playlistContainer2 .video-list2 .vid2 #empt2{
	display: none;
}

.playlistContainer2 .video-list2 .vid2 iframe{
    width: 100px;
    border-radius: 5px;
    display: none;
}

.playlistContainer2 .video-list2 .vid2 #titlevideo2 #info2{
    display: none;
}

.playlistContainer2 .video-list2 .vid2 #vidFoot2{
    display: none;
}

.playlistContainer2 .video-list2 .vid2{
    display: flex;
    align-items: center;
    background: #222222;
    border-radius: 0px;
    padding: 0px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.playlistContainer2 .video-list2 .vid2:hover{
    background: #FAFAFA;
}

.playlistContainer2 .video-list2 .vid2.active{
    background: #FAFAFA;
}

.playlistContainer2 .video-list2 .vid2.active #titlevideo2{
    color: #222222;
}

.playlistContainer2 .video-list2 .vid2.active #titlevideo2 .judul2{
	border-bottom: 1px solid #222222;
}

.playlistContainer2 .video-list2 .vid2.active #titlevideo2 .judul2 .numb2{
	border-right: 1px solid #222222;
}

.playlistContainer2 .video-list2 .vid2.active #titlevideo2 .judul2 .numbSymbol2 svg{
	stroke: #222222;
}

.playlistContainer2 .video-list2 .vid2 #titlevideo2{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FAFAFA;
    letter-spacing: 1px;
    transition: 0.5s;
	width: 100%;
	height: 100%;
}

.playlistContainer2 .video-list2 .vid2:hover #titlevideo2{
    color: #222222;
}

.playlistContainer2 .video-list2 .vid2:hover #titlevideo2 .judul2{
	border-bottom: 1px solid #222222;
}

.playlistContainer2 .video-list2 .vid2:hover #titlevideo2 .judul2 .numb2{
	border-right: 1px solid #222222;
}

.playlistContainer2 .video-list2 .vid2:hover #titlevideo2 .judul2 .numbSymbol2 svg{
	stroke: #222222
}

.playlistContainer2 .main-video2 .video2 .judul2{
	display: none;
}

.judul2{
	background: transparent;
	padding: 0px 0px;
	display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
	border-bottom: 1px solid #FAFAFA;
}

.numb2{
	height: 40px;
	width: 50px;
	background: transparent;
	border-right: 1px solid #FAFAFA;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbJudul2{
    display: flex;
    align-items: center;
	position: relative;
	width: 100%;
	padding: 0px 10px;
}

.numbJudul2 .dur{
	padding-right: 20px;
	position: absolute;
	right: 0;
}

.numbSymbol2{
	height: 40px;
	width: 45px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbSymbol2 svg{
	transform: rotate(0deg);
	width: 15px;
	stroke: #FAFAFA;
}
/*WORKS AMPHIBI, PEKOPO*/



/*WORKS SERIES*/
.popupTabelS{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "contentScrollMobileS";
    grid-gap: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 0px solid #FAFAFA;
    border-radius: 0px;
}

#contentScrollMobileS{
	grid-area: contentScrollMobileS;
}

.contentScrollMobileS{
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
}

.contentScrollMobileS::-webkit-scrollbar{
	display: none;
}



#pMediaS{
    grid-area: pMediaS;
    background: transparent;
	z-index: 3;
}

.playlistContainerS{
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-end;
	grid-template-areas: 
		"vidmainS"
		"menuContainerS"
		"contentNoneS";
	gap: 0px;
}

#contentNoneS{
	grid-area: contentNoneS;
	height: 0px;
	background: transparent;
	display: none;
}

.menuContainerS{
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: flex-end;
	grid-template-areas: 
		"identityS vidlistS";
	gap: 0px;
	z-index: 1;
}

#identityS{
	grid-area: identityS;
	background: transparent;
	height: auto;
}

#vidlistS{
	grid-area: vidlistS;
}

#vidmainS{
	grid-area: vidmainS;
	position: relative;
}

#menuContainerS{
	grid-area: menuContainerS;
	position: absolute;
	width: 100%;
}

.identityContentS{
	height: 100%;
	display: grid;
	background: transparent;
}

.identityTitleS{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 20px;
	font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #222222;
	padding-top: 20px;
}

.playlistContainerS .main-videoS{
    background: transparent;
}

.playlistContainerS .main-videoS .videoS{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
		"identityContentS titlevideoS"
		"vidFootS titlevideoS"
        "contFrameS titlevideoS"
		"contFrameS emptS";
    gap: 0px;
}

.playlistContainerS .main-videoS #identityContentS{
	grid-area: identityContentS;
}

.playlistContainerS .main-videoS #emptS{
	grid-area: emptS;
	background: red;
	height: 200px;
	border-bottom: 0px solid #222222;
}

.playlistContainerS .main-videoS iframe{
    width: 100%;
    height: 650px;
    border-radius: 0px;
    border: 1px solid #222222;
	margin: 10px;
}

.playlistContainerS .main-videoS #contFrameS{
    grid-area: contFrameS;
	display: flex;
	justify-content: center;
	align-items: center;
}

.playlistContainerS .main-videoS #titlevideoS{
    grid-area: titlevideoS;
    background: #FAFAFA;
    border-radius: 0px;
	border-left: 1px solid #222222;
	border-top: 0px solid #222222;
}

.playlistContainerS .main-videoS #vidFootS{
    grid-area: vidFootS;
    background: transparent;
    border-bottom: 1px solid #222222;
    border-radius: 0px;
	padding-top: 20px;
}

.playlistContainerS .main-videoS #titlevideoS #judulS{
    color: #222222;
    font-size: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
}

.playlistContainerS .main-videoS #titlevideoS #infoS{
    color: #222222;
    font-size: 15px;
    height: 500px;
    position:relative;
}

.playlistContainerS .video-listS{
    background: transparent;
    border-radius: 0px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
	border-left: 1px solid #222222;
}

.playlistContainerS .video-listS .vidS #identityContentS{
	display: none;
}

.playlistContainerS .video-listS .vidS #emptS{
	display: none;
}

.playlistContainerS .video-listS .vidS iframe{
    width: 100px;
    border-radius: 5px;
    display: none;
}

.playlistContainerS .video-listS .vidS #titlevideoS #infoS{
    display: none;
}

.playlistContainerS .video-listS .vidS #vidFootS{
    display: none;
}

.playlistContainerS .video-listS .vidS{
    display: flex;
    align-items: center;
    background: #222222;
    border-radius: 0px;
    padding: 0px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.playlistContainerS .video-listS .vidS:hover{
    background: #FAFAFA;
}

.playlistContainerS .video-listS .vidS.active{
    background: #FAFAFA;
}

.playlistContainerS .video-listS .vidS.active #titlevideoS{
    color: #222222;
}

.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS{
	border-top: 1px solid #222222;
}

.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS .numbS{
	border-right: 1px solid #222222;
}

.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS .numbSymbolS svg{
	stroke: #222222;
}

.playlistContainerS .video-listS .vidS #titlevideoS{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FAFAFA;
    letter-spacing: 1px;
    transition: 0.5s;
	width: 100%;
	height: 100%;
}

.playlistContainerS .video-listS .vidS:hover #titlevideoS{
    color: #222222;
}

.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS{
	border-top: 1px solid #222222;
}

.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS .numbS{
	border-right: 1px solid #222222;
}

.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS .numbSymbolS svg{
	stroke: #222222
}

.playlistContainerS .main-videoS .videoS .judulS{
	display: none;
}

.judulS{
	background: transparent;
	padding: 0px 0px;
	display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
	border-top: 1px solid #FAFAFA;
}

.numbS{
	height: 40px;
	width: 50px;
	background: transparent;
	border-right: 1px solid #FAFAFA;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbJudulS{
    display: flex;
    align-items: center;
	position: relative;
	width: 100%;
	padding: 0px 10px;
}

.numbJudulS .dur{
	padding-right: 20px;
	position: absolute;
	right: 0;
}

.numbSymbolS{
	height: 40px;
	width: 45px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}

.numbSymbolS svg{
	transform: rotate(0deg);
	width: 15px;
	stroke: #FAFAFA;
}

.pText-infoS{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    padding: 0px 20px 25px 20px;
    position:absolute;
    bottom: 0;
}

.pText-infoS .undertxtS{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #222222;
    line-height: 25px;
}
/*WORKS SERIES*/

/*POPUP MEDIA*/



/*POPUP MEDIA TEXT*/

/*TEXT RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */
.pText-container{
    background-color: transparent;
	height: 100%;
	display: flex;
}
/*TEXT RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */



/*TEXT RUANGGURU, AWARD, SERIES, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */
.pText-content{
    height: 100%;
	width: 100%;
    background-color: transparent;
    border-radius: 0px;
    border-left: 1px solid #222222;
	border-top: 0px solid #222222;
    position: relative;
}
/*TEXT RUANGGURU, AWARD, SERIES, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */



/*TEXT RUANGGURU, AMPHIBI, PEKOPO, AWARD, SERIES, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */
.pText-Head{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 25px 20px;
}

.pText-Title{
    background: transparent;
    padding: 20px 20px 25px 20px;
}

.pText-info{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    padding: 200px 20px 25px 20px;
    position:absolute;
    bottom: 0;
}

.pText-Head span{
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
}

.pText-Title span{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #222222;
}

.pText-info .undertxt{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #222222;
    line-height: 25px;
}
/*TEXT RUANGGURU, AMPHIBI, PEKOPO, AWARD, SERIES, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY */



/*TEXT JUDGEMENT, INTERACTIVE*/
.pText-Title .resizeTitle{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #222222;
}
/*TEXT JUDGEMENT, INTERACTIVE*/



/*TEXT AMPHIBI, PEKOPO*/
.pText-info .undertxt span{
    padding-top: 70px;
    display: block;
}
/*TEXT AMPHIBI, PEKOPO*/



/*TEXT AWARD, INTERACTIVE*/
.pText-info .undertxt a{
    color: #222222;
    text-decoration: none;
	transition: 0.5s;
}

.pText-info .undertxt a:hover{
    color: #c7417b;
    text-decoration: none;
}
/*TEXT AWARD, INTERACTIVE*/

/*POPUP MEDIA TEXT*/




/*POPUP MEDIA BOTTOM*/
.pFoot-content{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	padding-bottom: 0px;
}

.pFoot-content ul li{
    list-style: none;
    display: inline-block;
    position: relative;
	padding: 10px 20px;
}

.pFoot-content{
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #222222;
    letter-spacing: 1px;
}

.pFoot-content span{
	padding-right: 20px;
}
/*POPUP MEDIA BOTTOM*/




/*KONTAK*/
.txtContact{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 64px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0px;
    position: relative;
}

#contact a{
    text-decoration: none;
    color: #222222;
}

.upperContact{
    font-family: 'Inter', sans-serif;
    vertical-align: top;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #222222;
    cursor: default;
}

.txtContact::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #808080;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
    position: absolute;
    right: 0;
}

.txtContact:hover::after{
    width:100%;
}
/*KONTAK*/

/*LANDING CONTENT*/



/*FOOTER*/
.footer{
    background: transparent;
	position: fixed;
    bottom: 0;
	left: 0;
    width: 100%;
    margin: auto;
	display: flex;
    justify-content: center;
    align-items: center;
}

.adjustFooter{
	display: flex;
    justify-content: space-between;
    align-items: center;
	max-width: 1800px;
	min-width: 1024px;
    width: 100%;
}

.footerContent{
    background: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	padding: 20px 0px;
	position: relative;
	width: 100%;
}

.socmed{
	padding-left: 0px;
}

.socmed ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.socmed .fa{
    font-size: 20px;
    color: #808080;
    padding-right: 30px;
}

.socmed .fa::after{
    content: '';
    width: 0%;
    height: 1px;
    background: #808080;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
}

.socmed .fa:hover::after{
    width: 100%;
}

.copyrights{
    font-size: 12px;
    color: #808080;
	padding-right: 0px
}

.strip{
    background-color: #808080;
    height: 3px;
    width: 100px;
    transform: translateY(-100%);
    margin-right: 30px;
}

.iam{
    margin-left: 0px;
}

.iam a{
    text-decoration: none;
    color: #808080;
    font-size: 15px;
    font-weight: 500; 
}

.iam a::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #808080;
    display: block;
    margin-left: 0%;
    transition: 0.5s;
}

.iam a:hover::after{
    width: 100%;
}
/*FOOTER*/



/*RESPONSIVE*/

/*Laptop L*/
@media screen and (min-width:1024px) and (max-width:1440px){
	/*BODY*/
		.container{
			max-width: 1340px;
			min-width: 1024px;
		}
	/*BODY*/
	
	/*LANDING GRID*/
		#empty1{
			padding-top: 75px;
		}
	
		#contact{
			padding-top: 100px;
		}
	/*LANDING GRID*/
	
	/*JUDUL*/
		.name{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 52px;
			padding-top: 20px;
			font-weight: 500;
		}
	/*JUDUL*/
	
	/*KONTAK*/
		.txtContact{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 52px;
			font-weight: 500;
			letter-spacing: 1px;
			padding: 0px;
			position: relative;
		}
	/*KONTAK*/
	
	/*FOOTER*/
		.footerContent{
			padding: 20px 50px;
		}
	/*FOOTER*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 950px;
		}
	/*POPUP MODAL*/
	
	/*DOC MOGRAPH*/
		#pTextDocTitle1{
			height: 130px;
		}
	
		.containerScroll{
			height: 530px;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 245px;
		}
	
		.hovIMG1{
			height: 245px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 245px;
		}
	
		.hovIMG2{
			height: 245px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 245px;
		}
	
		.hovIMG3{
			height: 245px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 245px;
		}
	
		.hovIMG4{
			height: 245px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 245px;
		}
	
		.hovIMG5{
			height: 245px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 245px;
		}
	
		.hovIMG6{
			height: 245px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 245px;
		}
	
		.hovIMG7{
			height: 245px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 245px;
		}
	
		.hovIMG8{
			height: 245px;
		}
	/*DOC MOGRAPH*/
	
	/*DOC 3D*/
		.containerScroll2{
			height: 530px;
		}
	
		.hovmodel3DIMG1{
			height: 300px;
		}
	
		.hovmodel3DIMG2{
			height: 300px;
		}
	
		.hovmodel3DIMG3{
			height: 300px;
		}
	
		.hovmodel3DIMG4{
			height: 300px;
		}
	
		.hovmodel3DIMG5{
			height: 300px;
		}
	
		.hovmodel3DIMG6{
			height: 300px;
		}
	
		.hovmodel3DIMG7{
			height: 245px;
		}
	
		.hov-modelIMG iframe{
			height: 245px;
			width: 100%;
			border: 1px solid #FAFAFA
		}
	/*DOC 3D*/
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
		.mediaContainer iframe{
			height: 530px;
		}
	
		.pText-Title span{
			font-size: 40px;
		}
	
		.pText-info .undertxt{
			font-size: 15px;
			line-height: 22px;
		}
	
		.pFoot-content{
			font-family: 'Inter', sans-serif;
			font-size: 15px;
		}
	
		.pFoot-content ul li{
			padding: 10px 20px;
		}
	
		.pText-Title .resizeTitle{
			font-size: 30px;
		}
	
		.pText-Head span{
			font-size: 15px;
		}
	
		.mediaContainerIN{
			height: 530px;
		}
	
		.mediaContainerIN iframe{
			width: 500px;
			height: 500px;
		}
	
		.playlistContainer .main-video .video{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
			grid-template-areas:
				"identityContent empt"
				"vidFoot vidFoot"
				"contFrame contFrame"
				"titlevideo titlevideo";
			gap: 0px;
		}
	
		.playlistContainer .main-video #empt{
			height: 83px;
		}
	
		.playlistContainer .main-video iframe{
			height: 500px;
			margin-top: 10px;
		}
	
		.playlistContainer .main-video #titlevideo #info{
			height: 270px;
		}
	
		.contentScrollMobile{
			height: 750px;
		}
	
		.playlistContainer .main-video #titlevideo{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		#identity{
			height: 123px;
		}
	
		.pText-info{
			padding: 20px 20px 30px 20px;
		}
	
		.pText-Head{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info .undertxt span{
			padding-top: 30px;
			display: block;
		}
	
		.playlistContainer2 .main-video2 .video2{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
			grid-template-areas:
				"identityContent2 empt2"
				"vidFoot2 vidFoot2"
				"contFrame2 contFrame2"
				"titlevideo2 titlevideo2";
			gap: 0px;
		}
	
		.playlistContainer2 .main-video2 #empt2{
			height: 83px;
		}
	
		.playlistContainer2 .main-video2 iframe{
			height: 500px;
			margin-top: 10px;
		}
	
		.playlistContainer2 .main-video2 #titlevideo2 #info2{
			height: 270px;
		}
	
		.contentScrollMobile{
			height: 750px;
		}
	
		.playlistContainer2 .main-video2 #titlevideo2{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		#identity2{
			height: 123px;
		}
	
		.pText-info2{
			padding: 20px 20px 30px 20px;
		}
	
		.pText-Head2{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title2{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info2 .undertxt2 span{
			padding-top: 30px;
			display: block;
		}
	
		.container04{
			height: 600px;
		}
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
	
	/*WORKS AMPHIBI, PEKOPO*/
		#contentNone{
			height: 30px;
			background: transparent;
			display: block;
		}
	
		#contentNone2{
			height: 30px;
			background: transparent;
			display: block;
		}
	/*WORKS AMPHIBI, PEKOPO*/
	
	/*WORKS PANDIT*/
		.pText-contentTri{
			height: 600px;
		}
	
		.triImage{
			width: 100%;
			height: 140px;
		}
	
		.pTexttri-Head span{
			font-size: 15px;
		}
	
		.pTexttri-Title span{
			font-size: 40px;
		}
	
		.pTexttri-info .undertxttri{
			font-size: 15px;
		}
	/*WORKS PANDIT*/
	
	/*WORKS SERIES*/
		.playlistContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"menuContainerS"
				"vidmainS"
				"contentNoneS";
			position: relative;
			gap: 0px;
		}
	
		.playlistContainerS .main-videoS .videoS{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 1fr;
			grid-template-areas:
				"identityContentS emptS"
				"vidFootS emptS"
				"contFrameS contFrameS"
				"titlevideoS titlevideoS";
			gap: 0px;
		}
	
		.contentScrollMobileS{
			height: 750px;
		}
	
		#menuContainerS{
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.playlistContainerS .main-videoS #emptS{
			grid-area: emptS;
			background: red;
			height: 205px;
		}
	
		.playlistContainerS .main-videoS iframe{
			width: 100%;
			height: 480px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.judulS{
			border-top: 0px solid #FAFAFA;
			border-bottom: 1px solid #FAFAFA;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 300px;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		.pText-infoS .undertxtS{
			font-size: 15px;
		}
		
		.playlistContainerS .video-listS .vidS #titlevideoS{
			font-size: 15px;
		}
	
		#contentNoneS{
			height: 30px;
			background: transparent;
			display: block;
		}
	/*WORKS SERIES*/
	
	/*ABOUT*/
	.tabelAbout{
		display: grid;
		grid-template-columns: 0.7fr 1.3fr 1fr 1fr;
	}
	
	.conExp1{
		position: absolute;
		left: 165px;
	}

	.conExp2{
		position: absolute;
		left: 470px;
	}
	/*ABOUT*/
	
}
/*Laptop L*/

/*Laptop*/
@media screen and (min-width:768px) and (max-width:1024px){
	/*LANDING GRID*/
		.tabel{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr;
			grid-template-areas:
				"lefted"
				"righted"
				"midd"
				"bottom";
			grid-gap: 0px;
		}

		.contentLeft{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"title"
				"empty1"
				"documentation"
				"doc1"
				"doc2"
				"works"
				"works1"
				"works2"
				"works3"
				"works4";
			grid-gap: 0px;
			padding: 0px 50px;
		}

		#empty1{
			padding-top: 100px;
		}

		.contentRight{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"empty2"
				"award"
				"award1"
				"collaboration"
				"collab1"
				"collab2"
				"collab3"
				"explorations"
				"explore1"
				"explore2"
				"contact";
			grid-gap: 0px;
			padding: 0px 50px;
		}
	
		#empty2{
			display: none;
		}
	/*LANDING GRID*/
	
	/*FOOTER*/
		.adjustFooter{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 1024px;
			min-width: 768px;
			width: 100%;
		}
		.footerContent{
			padding: 20px 50px;
		}
	
		.socmed ul li{
			list-style: none;
			display: inline-block;
			position: relative;
		}
	
		.copyrights{
			font-size: 12px;
			color: #808080;
		}
	/*FOOTER*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 950px;
		}
	/*POPUP MODAL*/
	
	/*DOC MOGRAPH*/
		#pTextDocTitle1{
			height: 130px;
		}
	
		.containerScroll{
			height: 530px;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 245px;
		}
	
		.hovIMG1{
			height: 245px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 245px;
		}
	
		.hovIMG2{
			height: 245px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 245px;
		}
	
		.hovIMG3{
			height: 245px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 245px;
		}
	
		.hovIMG4{
			height: 245px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 245px;
		}
	
		.hovIMG5{
			height: 245px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 245px;
		}
	
		.hovIMG6{
			height: 245px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 245px;
		}
	
		.hovIMG7{
			height: 245px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 245px;
		}
	
		.hovIMG8{
			height: 245px;
		}
	/*DOC MOGRAPH*/
	
	/*DOC 3D*/
		.containerScroll2{
			height: 530px;
		}
	
		.hovmodel3DIMG1{
			height: 300px;
		}
	
		.hovmodel3DIMG2{
			height: 300px;
		}
	
		.hovmodel3DIMG3{
			height: 300px;
		}
	
		.hovmodel3DIMG4{
			height: 300px;
		}
	
		.hovmodel3DIMG5{
			height: 300px;
		}
	
		.hovmodel3DIMG6{
			height: 300px;
		}
	
		.hovmodel3DIMG7{
			height: 245px;
		}
	
		.hov-modelIMG iframe{
			height: 245px;
			width: 100%;
			border: 1px solid #FAFAFA
		}
	/*DOC 3D*/
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
		.mediaContainer iframe{
			height: 530px;
		}
	
		.pText-Title span{
			font-size: 40px;
		}
	
		.pText-info .undertxt{
			font-size: 15px;
			line-height: 22px;
		}
	
		.pFoot-content{
			font-family: 'Inter', sans-serif;
			font-size: 15px;
		}
	
		.pFoot-content ul li{
			padding: 10px 20px;
		}
	
		.pText-Title .resizeTitle{
			font-size: 30px;
		}
	
		.pText-Head span{
			font-size: 15px;
		}
	
		.mediaContainerIN{
			height: 530px;
		}
	
		.mediaContainerIN iframe{
			width: 500px;
			height: 500px;
		}
	
		.playlistContainer .main-video .video{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
			grid-template-areas:
				"identityContent empt"
				"vidFoot vidFoot"
				"contFrame contFrame"
				"titlevideo titlevideo";
			gap: 0px;
		}
	
		.playlistContainer .main-video #empt{
			height: 83px;
		}
	
		.playlistContainer .main-video iframe{
			height: 500px;
			margin-top: 10px;
		}
	
		.playlistContainer .main-video #titlevideo #info{
			height: 270px;
		}
	
		.contentScrollMobile{
			height: 750px;
		}
	
		.playlistContainer .main-video #titlevideo{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		#identity{
			height: 123px;
		}
	
		.pText-info{
			padding: 20px 20px 30px 20px;
		}
	
		.pText-Head{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info .undertxt span{
			padding-top: 30px;
			display: block;
		}
	
		.playlistContainer2 .main-video2 .video2{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
			grid-template-areas:
				"identityContent2 empt2"
				"vidFoot2 vidFoot2"
				"contFrame2 contFrame2"
				"titlevideo2 titlevideo2";
			gap: 0px;
		}
	
		.playlistContainer2 .main-video2 #empt2{
			height: 83px;
		}
	
		.playlistContainer2 .main-video2 iframe{
			height: 500px;
			margin-top: 10px;
		}
	
		.playlistContainer2 .main-video2 #titlevideo2 #info2{
			height: 270px;
		}
	
		.contentScrollMobile{
			height: 750px;
		}
	
		.playlistContainer2 .main-video2 #titlevideo2{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		#identity2{
			height: 123px;
		}
	
		.pText-info2{
			padding: 20px 20px 30px 20px;
		}
	
		.pText-Head2{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title2{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info2 .undertxt2 span{
			padding-top: 30px;
			display: block;
		}
	
		.container04{
			height: 600px;
		}
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
	
	/*WORKS AMPHIBI, PEKOPO*/
		#contentNone{
			height: 30px;
			background: transparent;
			display: block;
		}
	
		#contentNone2{
			height: 30px;
			background: transparent;
			display: block;
		}
	/*WORKS AMPHIBI, PEKOPO*/
	
	/*WORKS PANDIT*/
		.pText-contentTri{
			height: 600px;
		}
	
		.triImage{
			width: 100%;
			height: 140px;
		}
	
		.pTexttri-Head span{
			font-size: 15px;
		}
	
		.pTexttri-Title span{
			font-size: 40px;
		}
	
		.pTexttri-info .undertxttri{
			font-size: 15px;
		}
	/*WORKS PANDIT*/
	
	/*WORKS SERIES*/
		.playlistContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"menuContainerS"
				"vidmainS"
				"contentNoneS";
			position: relative;
			gap: 0px;
		}
	
		.playlistContainerS .main-videoS .videoS{
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 1fr;
			grid-template-areas:
				"identityContentS emptS"
				"vidFootS emptS"
				"contFrameS contFrameS"
				"titlevideoS titlevideoS";
			gap: 0px;
		}
	
		.contentScrollMobileS{
			height: 750px;
		}
	
		#menuContainerS{
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.playlistContainerS .main-videoS #emptS{
			grid-area: emptS;
			background: red;
			height: 205px;
		}
	
		.playlistContainerS .main-videoS iframe{
			width: 100%;
			height: 480px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.judulS{
			border-top: 0px solid #FAFAFA;
			border-bottom: 1px solid #FAFAFA;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 300px;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		.pText-infoS .undertxtS{
			font-size: 15px;
		}
		
		.playlistContainerS .video-listS .vidS #titlevideoS{
			font-size: 15px;
		}
	
		#contentNoneS{
			height: 30px;
			background: transparent;
			display: block;
		}
	/*WORKS SERIES*/
	
}
/*Laptop*/

/*Tablet*/
@media screen and (min-width:425px) and (max-width:768px){
	/*BODY*/
		.container{
			max-width: 767px;
			min-width: 0px;
		}
	/*BODY*/
	
	/*LANDING GRID*/
		.tabel{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr;
			grid-template-areas:
				"lefted"
				"righted"
				"midd"
				"bottom";
			grid-gap: 0px;
		}

		.contentLeft{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"title"
				"empty1"
				"documentation"
				"doc1"
				"doc2"
				"works"
				"works1"
				"works2"
				"works3"
				"works4";
			grid-gap: 0px;
			padding: 0px 50px;
		}

		#empty1{
			padding-top: 70px;
		}

		.contentRight{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"empty2"
				"award"
				"award1"
				"collaboration"
				"collab1"
				"collab2"
				"collab3"
				"explorations"
				"explore1"
				"explore2"
				"contact";
			grid-gap: 0px;
			padding: 0px 50px;
		}
	
		#empty2{
			display: none;
		}
	
		.name{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 32px;
			padding-top: 20px;
			font-weight: 500;
		}
	
		.upper{
			font-family: 'Inter', sans-serif;
			vertical-align: top;
			font-size: 13px;
			font-weight: 300;
			letter-spacing: 1px;
			cursor: default;
		}
	/*LANDING GRID*/
	
	/*GLOBAL SETTING MENU*/
		.doc0{
			font-family: 'Inter', sans-serif;
			letter-spacing: 1px;
			font-size: 13px;
			font-weight: 300;
			cursor: default;
		}
	/*GLOBAL SETTING MENU*/
	
	/*MENU BUTTON SETTING*/
		#doc1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}
	
		#doc2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}
	
		#works1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works3 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works4 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#award1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab3 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#explore1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#explore2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

	/*MENU BUTTON SETTING*/
	
	/*KONTAK*/
		.txtContact{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 32px;
			font-weight: 500;
			letter-spacing: 1px;
			padding: 0px;
			position: relative;
		}
	
		.upperContact{
			font-family: 'Inter', sans-serif;
			vertical-align: top;
			font-size: 13px;
			font-weight: 300;
			letter-spacing: 1px;
			color: #222222;
			cursor: default;
		}
	/*KONTAK*/
	
	/*FOOTER*/
		.adjustFooter{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 768px;
			min-width: 425px;
			width: 100%;
		}
		.footerContent{
			padding: 20px 50px;
		}
	
		.socmed ul li{
			list-style: none;
			display: inline-block;
			position: relative;
			padding-left: 0px;
		}
	
		.copyrights{
			font-size: 11px;
			color: #808080;
		}
	
		.strip{
			background-color: #808080;
			height: 3px;
			width: 30px;
			transform: translateY(-100%);
			margin-right: 30px;
		}
	
		.iam a{
			text-decoration: none;
			color: #808080;
			font-size: 13px;
			font-weight: 500; 
		}
	/*FOOTER*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 650px;
		}
	
		.pFoot-content{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
		}
	/*POPUP MODAL*/
	
	/*DOCUMENTATION*/
		.popup-location ul li span{
			color: #222222;
			font-size: 13px;
			font-family: 'Inter', sans-serif;
			font-weight: 400;
		}
	
		.containerScroll{
			height: 530px;
		}
	
		.contentTextDoc{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pTextDocTitle1 pTextDocTitle1 pTextDocTitle1 pTextDocTitle1"
				"pTextDocRole1 pTextDocRole1 pTextDocRole1 pTextDocRole1"
				"pTextDocSW1 pTextDocSW1 pTextDocSW1 pTextDocSW1"
				"pTextDocDesc1 pTextDocDesc1 pTextDocDesc1 pTextDocDesc1"
				
				"pTextDocNone1 pTextDocNone1 pTextDocNone1 pTextDocNone1"
				
				"pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle"
				"pTextDocMographIMG1 pTextDocMographIMG1 pTextDocMographIMG1 pTextDocMographIMG1"
				"pTextDocMographIMG2 pTextDocMographIMG2 pTextDocMographIMG2 pTextDocMographIMG2"
				"pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc"
				
				"pTextDocNone2 pTextDocNone2 pTextDocNone2 pTextDocNone2"
				
				"pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle"
				"pTextDocKeyingIMG1 pTextDocKeyingIMG1 pTextDocKeyingIMG1 pTextDocKeyingIMG1"
				"pTextDocKeyingDesc pTextDocKeyingDesc pTextDocKeyingDesc pTextDocKeyingDesc"
				
				"pTextDocNone3 pTextDocNone3 pTextDocNone3 pTextDocNone3"
				
				"pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle"
				"pTextDocRotoIMG1 pTextDocRotoIMG1 pTextDocRotoIMG1 pTextDocRotoIMG1"
				"pTextDocRotoDesc pTextDocRotoDesc pTextDocRotoDesc pTextDocRotoDesc"
				
				"pTextDocNone4 pTextDocNone4 pTextDocNone4 pTextDocNone4"
				
				"pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle"
				"pTextDocTrackingIMG1 pTextDocTrackingIMG1 pTextDocTrackingIMG1 pTextDocTrackingIMG1"
				"pTextDocTrackingIMG2 pTextDocTrackingIMG2 pTextDocTrackingIMG2 pTextDocTrackingIMG2"
				"pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc"
				
				"pTextDocNone5 pTextDocNone5 pTextDocNone5 pTextDocNone5"
				
				"pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle"
				"pTextDocShowIMG1 pTextDocShowIMG1 pTextDocShowIMG1 pTextDocShowIMG1"
				"pTextDocShowDesc1 pTextDocShowDesc1 pTextDocShowDesc1 pTextDocShowDesc1"
				"pTextDocShowDesc3 pTextDocShowDesc3 pTextDocShowDesc3 pTextDocShowDesc3"
				"pTextDocShowIMG2 pTextDocShowIMG2 pTextDocShowIMG2 pTextDocShowIMG2"
				"pTextDocShowDesc2 pTextDocShowDesc2 pTextDocShowDesc2 pTextDocShowDesc2"
				"pTextDocShowDesc4 pTextDocShowDesc4 pTextDocShowDesc4 pTextDocShowDesc4"
				
				"pTextDocNone6 pTextDocNone6 pTextDocNone6 pTextDocNone6";
			grid-column-gap: 0px;
			padding: 0px;
			margin: 0px;
			border-radius: 0px;
		}
	
		.DocTitle{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 10px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			height: 100%;
		}
	
		#pTextDocTitle1{
			grid-area: pTextDocTitle1;
			background: transparent;
			position: relative;
			height: 100px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.identityTitle{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			gap: 10px;
			z-index: 9999;
		}
	
		#pTextDocRole1{
			grid-area: pTextDocRole1;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.DocRole{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 0px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
			height: 100%;
		}
	
		#pTextDocSW1{
			grid-area: pTextDocSW1;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.DocSW{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 0px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
			height: 100%;
		}
	
		#pTextDocDesc1{
			grid-area: pTextDocDesc1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
			height: 150px;
		}
	
		.DocDesc{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			height: 100%;
			line-height: 25px;
		}
	
		#pTextDocMographIMG1{
			grid-area: pTextDocMographIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #FAFAFA;
			border-right: 1px solid #222222;
		}
	
		#pTextDocMographIMG2{
			grid-area: pTextDocMographIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocKeyingIMG1{
			grid-area: pTextDocKeyingIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocKeyingDesc{
			grid-area: pTextDocKeyingDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 150px;
		}
	
		.mographDesc{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 10px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			height: 100%;
			line-height: 25px;
		}
	
		#pTextDocRotoIMG1{
			grid-area: pTextDocRotoIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRotoDesc{
			grid-area: pTextDocRotoDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 150px;
		}
	
		#pTextDocTrackingIMG1{
			grid-area: pTextDocTrackingIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #FAFAFA;
			border-right: 1px solid #222222;
		}

		#pTextDocTrackingIMG2{
			grid-area: pTextDocTrackingIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowIMG1{
			grid-area: pTextDocShowIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc1{
			grid-area: pTextDocShowDesc1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 50px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc3{
			grid-area: pTextDocShowDesc3;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 100px;
			border-right: 1px solid #222222;
		}

		#pTextDocShowIMG2{
			grid-area: pTextDocShowIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc2{
			grid-area: pTextDocShowDesc2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 50px;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
		}
	
		#pTextDocShowDesc4{
			grid-area: pTextDocShowDesc4;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 100px;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 335px;
		}
	
		.hovIMG1{
			height: 335px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 335px;
		}
	
		.hovIMG2{
			height: 335px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 335px;
		}
	
		.hovIMG3{
			height: 335px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 335px;
		}
	
		.hovIMG4{
			height: 335px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 335px;
		}
	
		.hovIMG5{
			height: 335px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 335px;
		}
	
		.hovIMG6{
			height: 335px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 335px;
		}
	
		.hovIMG7{
			height: 335px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 335px;
		}
	
		.hovIMG8{
			height: 335px;
		}
	
	
		.containerScroll2{
			height: 530px;
		}
	
		.contentTextDoc2{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pTextDocTitle2 pTextDocTitle2 pTextDocTitle2 pTextDocTitle2"
				"pTextDocRole2 pTextDocRole2 pTextDocRole2 pTextDocRole2"
				"pTextDocSW2 pTextDocSW2 pTextDocSW2 pTextDocSW2"
				"pTextDocDesc2 pTextDocDesc2 pTextDocDesc2 pTextDocDesc2"
				
				"pTextDocNone1D pTextDocNone1D pTextDocNone1D pTextDocNone1D"
				
				"pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle"
				"pTextDocModelIMG1 pTextDocModelIMG1 pTextDocModelIMG1 pTextDocModelIMG1"
				"pTextDocModelIMG2 pTextDocModelIMG2 pTextDocModelIMG2 pTextDocModelIMG2"
				"pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc"
				
				"pTextDocNone2D pTextDocNone2D pTextDocNone2D pTextDocNone2D"
				
				"pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle"
				"pTextDocMatIMG1 pTextDocMatIMG1 pTextDocMatIMG1 pTextDocMatIMG1"
				"pTextDocMatIMG2 pTextDocMatIMG2 pTextDocMatIMG2 pTextDocMatIMG2"
				"pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc"
				
				"pTextDocNone3D pTextDocNone3D pTextDocNone3D pTextDocNone3D"
				
				"pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle"
				"pTextDocRigIMG1 pTextDocRigIMG1 pTextDocRigIMG1 pTextDocRigIMG1"
				"pTextDocRigIMG2 pTextDocRigIMG2 pTextDocRigIMG2 pTextDocRigIMG2"
				"pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc"
				
				"pTextDocNone4D pTextDocNone4D pTextDocNone4D pTextDocNone4D"
				
				"pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle"
				"pTextDocCompIMG1 pTextDocCompIMG1 pTextDocCompIMG1 pTextDocCompIMG1"
				"pTextDocCompDesc pTextDocCompDesc pTextDocCompDesc pTextDocCompDesc"
				
				"pTextDocNone5D pTextDocNone5D pTextDocNone5D pTextDocNone5D"
				
				"pTextDocARTitle pTextDocARTitle pTextDocARTitle pTextDocARTitle"
				"pTextDocARIMG1 pTextDocARIMG1 pTextDocARIMG1 pTextDocARIMG1"
				"pTextDocARIMG2 pTextDocARIMG2 pTextDocARIMG2 pTextDocARIMG2"
				"pTextDocARDesc pTextDocARDesc pTextDocARDesc pTextDocARDesc"
				
				"pTextDocNone6D pTextDocNone6D pTextDocNone6D pTextDocNone6D"
				
				"pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle"
				"pTextDocCaseIMG1 pTextDocCaseIMG1 pTextDocCaseIMG1 pTextDocCaseIMG1"
				"pTextDocCaseIMG2 pTextDocCaseIMG2 pTextDocCaseIMG2 pTextDocCaseIMG2"
				"pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc"
				
				"pTextDocNone7D pTextDocNone7D pTextDocNone7D pTextDocNone7D";
			grid-column-gap: 0px;
			padding: 0px;
			margin: 0px;
			border-radius: 0px;
		}
	
		#pTextDocTitle2{
			grid-area: pTextDocTitle2;
			background: transparent;
			position: relative;
			height: 100px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRole2{
			grid-area: pTextDocRole2;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocSW2{
			grid-area: pTextDocSW2;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocDesc2{
			grid-area: pTextDocDesc2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
			height: 150px;
		}
	
		#pTextDocModelIMG1{
			grid-area: pTextDocModelIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocModelIMG2{
			grid-area: pTextDocModelIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocMatIMG1{
			grid-area: pTextDocMatIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocMatIMG2{
			grid-area: pTextDocMatIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRigIMG1{
			grid-area: pTextDocRigIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocRigIMG2{
			grid-area: pTextDocRigIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocCompIMG1{
			grid-area: pTextDocCompIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocCompDesc{
			grid-area: pTextDocCompDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 150px;
		}
	
		#pTextDocARIMG1{
			grid-area: pTextDocARIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocARIMG2{
			grid-area: pTextDocARIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocCaseIMG1{
			grid-area: pTextDocCaseIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocCaseIMG2{
			grid-area: pTextDocCaseIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.hovmodel3DIMG1{
			height: 335px;
		}
	
		.hovmodel3DIMG2{
			height: 335px;
		}
	
		.hovmodel3DIMG3{
			height: 335px;
		}
	
		.hovmodel3DIMG4{
			height: 335px;
		}
	
		.hovmodel3DIMG5{
			height: 335px;
		}
	
		.hovmodel3DIMG6{
			height: 335px;
		}
	
		.hovmodel3DIMG7{
			height: 335px;
		}
	
		.hov-modelIMG iframe{
			height: 335px;
			width: 100%;
			border: 1px solid #FAFAFA
		}

	/*DOCUMENTATION*/
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
		.contentScrollMobile1P{
			overflow: hidden;
			overflow-y: scroll;
			height: 700px;
		}
	
		.popupTabel{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pHead pHead pHead"
				"pFoot pFoot pFoot"
				"pMedia pMedia pMedia"
				"pText pText pText"
				"pNone1 pNone1 pNone1";
			grid-gap: 0px;
			padding: 0px;
			margin-left: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			margin-top: 0px;
			border: 0px solid #FAFAFA;
			border-radius: 0px;
		}
	
		#pHead{
			padding-top: 0px;
		}
	
		#pFoot{
			padding-top: 0px;
		}
	
		#pNone1{
			grid-area: pNone1;
			position: relative;
			background: transparent;
			height: 30px;
			border-top: 1px solid #222222;
			display: block;
		}
	
		.pText-container{
			background-color: transparent;
			height: 350px;
			display: flex;
		}
	
		.mediaContainer iframe{
			width: 100%;
			height: 350px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.pText-Head span{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
		}
	
		.pText-Title span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
		}
	
		.pText-info .undertxt{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			line-height: 25px;
		}
	
		.pText-Head{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info{
			background: transparent;
			display: flex;
			justify-content: space-between;
			align-items:flex-end;
			padding: 0px 20px 25px 20px;
			position:relative;
			bottom: 0;
		}
	
		.pText-info .undertxt span{
			padding-top: 20px;
			display: block;
		}
	
		.pText-content{
			height: 200px;;
			width: 100%;
			background-color: transparent;
			border-radius: 0px;
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			position: relative;
		}
	
		.titleLinked a{
			position: relative;
			text-decoration: none;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
		}
	
		.pText-Title .resizeTitle{
			font-size: 20px;
		}
	
		.mediaContainerIN{
			height: 350px;
		}
	
		.mediaContainerIN iframe{
			width: 300px;
			height: 300px;
		}
	
		.container04{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"gif1"
				"gif2" 
				"gif3"
				"gif4" 
				"gif5" 
				"gif6"
				"more";
			grid-gap: 10px;
			margin: 0px;
			background: transparent;
			height: 2000px;
			margin: 10px;
		}
	
		.video-containerg{
			width: 0px;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.giphy-embed{
			display: block;
			width: 150px;
			height: 150px;
			border-radius: 0px;
		}
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
	
	/*WORKS PANDIT*/
	.contentTextTri{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"pTextTri1 pTextTri1 pTextTri1"
			"pTextTriNone1 pTextTriNone1 pTextTriNone1"
			"pTextTri2 pTextTri2 pTextTri2"
			"pTextTriNone2 pTextTriNone2 pTextTriNone2"
			"pTextTri3 pTextTri3 pTextTri3"
			"pTextTriNone3 pTextTriNone3 pTextTriNone3"
			"pTextTriNone4 pTextTriNone4 pTextTriNone4";
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		padding: 0px;
		margin: 10px;
		border: 0px solid #FAFAFA;
		border-radius: 0px;
	}
	
	#pHeadTri{
		padding-top: 0px;
	}
	
	#pFootTri{
		padding-top: 0px;
	}
	
	#pTextTriNone1{
		height: 30px;
		border-top: 0px solid #222222;
		border-bottom: 0px solid #222222;
		border-left: 1px solid #222222;
		border-right: 1px solid #222222;
		background: transparent;
	}
	
	#pTextTriNone2{
		height: 30px;
		border-top: 0px solid #222222;
		border-bottom: 0px solid #222222;
		border-left: 1px solid #222222;
		border-right: 1px solid #222222;
		background: transparent;
	}
	
	#pTextTriNone3{
		height: 30px;
		border-top: 0px solid #222222;
		border-bottom: 1px solid #222222;
		border-left: 1px solid #222222;
		border-right: 1px solid #222222;
		background: transparent;
	}
	
	#pTextTriNone4{
		height: 30px;
		border-top: 0px solid #222222;
		border-bottom: 1px solid #222222;
		border-left: 1px solid #222222;
		border-right: 1px solid #222222;
		background: red;
	}
	
	.pText-contentTri{
		height: 570px;
		background-color: #FAFAFA;
		border-radius: 0px;
		border: 1px solid #222222;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		overflow: hidden;
	}
	
	.gotoIcon{
		height: 50px;
	}
	
	.gotoIcon a{
		font-size: 13px;
	}
	
	.contentScrollMobileTri{
		overflow: hidden;
		overflow-y: scroll;
		height: 600px;
	}
	
	.pTexttri-Head span{
		font-size: 13px;
	}
	
	.pTexttri-Title span{
		font-size: 20px;
	}
	
	.pTexttri-info .undertxttri{
		font-size: 13px;
	}
	
	/*WORKS PANDIT*/
	
	/*WORKS AMPHIBI, PEKOPO*/
	.contentScrollMobile{
		overflow: hidden;
		overflow-y: scroll;
		height: 700px;
	}
	
	#contentNone{
		height: 30px;
		background: transparent;
		display: block;
	}
	
	.menuContainer{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-template-areas: 
			"identity"
			"video-list";
		gap: 0px;
		border-bottom: 1px solid #FAFAFA;
	}
	
	.playlistContainer .main-video .video{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"identityContent"
			"vidFoot"
			"empt"
			"contFrame"
			"titlevideo";
		gap: 0px;
		margin-bottom: 0px;
	}
	
	.playlistContainer .main-video #empt{
		grid-area: empt;
		background: transparent;
		height: 150px;
		border-bottom: 1px solid #222222;
	}
	
	#identity{
		height: 99px;
	}
	
	.identityContent{
		height: 50px;
		display: grid;
		background: transparent;
	}
	
	.pFoot-content ul li{
		padding: 15px 20px;
	}
	
	.playlistContainer .main-video iframe{
		width: 100%;
		height: 350px;
	}
	
	.playlistContainer .video-list .vid #titlevideo{
		font-size: 13px;
	}
	
	.playlistContainer .video-list{
		border-left: 0px solid #222222;
	}
	
	.playlistContainer .main-video #titlevideo{
		border-left: 0px solid #222222;
		border-top: 1px solid #222222;
	}
	
	.playlistContainer .main-video #titlevideo #info{
		color: #222222;
		font-size: 15px;
		height: 300px;
		position:relative;
		border-bottom: 1px solid #222222;
	}
	
	
	#contentNone2{
		height: 30px;
		background: transparent;
		display: block;
	}
	
	.menuContainer2{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-template-areas: 
			"identity2"
			"video-list2";
		gap: 0px;
		border-bottom: 1px solid #FAFAFA;
	}
	
	.playlistContainer2 .main-video2 .video2{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"identityContent2"
			"vidFoot2"
			"empt2"
			"contFrame2"
			"titlevideo2";
		gap: 0px;
		margin-bottom: 0px;
	}
	
	.playlistContainer2 .main-video2 #empt2{
		background: transparent;
		height: 150px;
		border-bottom: 1px solid #222222;
	}
	
	#identity2{
		height: 99px;
	}
	
	.identityContent2{
		height: 50px;
		display: grid;
		background: transparent;
		padding-bottom: 0px;
	}
	
	.pFoot-content2 ul li{
		padding: 15px 20px;
	}
	
	.playlistContainer2 .main-video2 iframe{
		width: 100%;
		height: 350px;
	}
	
	.playlistContainer2 .video-list2 .vid2 #titlevideo2{
		font-size: 13px;
	}
	
	.playlistContainer2 .video-list2{
		border-left: 0px solid #222222;
	}
	
	.playlistContainer2 .main-video2 #titlevideo2{
		border-left: 0px solid #222222;
		border-top: 1px solid #222222;
	}
	
	.playlistContainer2 .main-video2 #titlevideo2 #info2{
		color: #222222;
		font-size: 15px;
		height: 300px;
		position:relative;
		border-bottom: 1px solid #222222;
	}

	/*WORKS AMPHIBI, PEKOPO*/
	
	
	/*WORKS SERIES*/
		.playlistContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"menuContainerS"
				"vidmainS"
				"contentNoneS";
			position: relative;
			gap: 0px;
		}
	
		#contentNoneS{
			height: 30px;
			background: transparent;
			display: block;
		}
	
		.playlistContainerS .main-videoS .videoS{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			grid-template-areas:
				"identityContentS"
				"vidFootS"
				"emptS"
				"contFrameS"
				"titlevideoS";
			gap: 0px;
		}
	
		.menuContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"identityS"
				"vidlistS";
			gap: 0px;
			z-index: 1;
		}
	
		#identityS{
			height: 111px;
		}
	
		.contentScrollMobileS{
			height: 750px;
		}
	
		#menuContainerS{
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.playlistContainerS .main-videoS #emptS{
			background: transparent;
			height: 230px;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .main-videoS iframe{
			width: 100%;
			height: 350px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS{
			border-left: 0px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.judulS{
			border-top: 0px solid #FAFAFA;
			border-bottom: 1px solid #FAFAFA;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 300px;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		.playlistContainerS .video-listS .vidS #titlevideoS{
			font-size: 13px;
		}
	
		.pText-infoS .undertxtS{
			font-size: 15px;
		}
		
		.identityTitleS{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			padding-top: 20px;
		}
	/*WORKS SERIES*/
	
	/*SCROLL*/
		::-webkit-scrollbar{
			width: 5px;
		}
	/*SCROLL*/
	
	/*ABOUT*/
	.tabelAbout{
		display: grid;
		grid-template-columns: 0.7fr 1fr 1fr 1fr;
	}
	
	.conExp1{
		position: absolute;
		left: 290px;
	}

	.conExp2{
		position: absolute;
		left: 470px;
		display: none;
	}
	/*ABOUT*/
}
/*Tablet*/

/*Mobile L*/
@media screen and (min-width:375px) and (max-width:425px){
	/*BODY*/
		.container{
			max-width: 425px;
			min-width: 375px;
		}
	/*BODY*/
	
	/*LANDING GRID*/
		.contentLeft{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"title"
				"empty1"
				"documentation"
				"doc1"
				"doc2"
				"works"
				"works1"
				"works2"
				"works3"
				"works4";
			grid-gap: 0px;
			padding: 0px 25px;
		}
	
		#empty1{
			padding-top: 10px;
		}
	
		.contentRight{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"empty2"
				"award"
				"award1"
				"collaboration"
				"collab1"
				"collab2"
				"collab3"
				"explorations"
				"explore1"
				"explore2"
				"contact";
			grid-gap: 0px;
			padding: 0px 25px;
		}
	
		#empty2{
			display: none;
		}
	
		#contact{
			padding-top: 100px;
		}
	/*LANDING GRID*/
	
	/*FOOTER*/
		.adjustFooter{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 425px;
			min-width: 375px;
			width: 100%;
		}
		.footerContent{
			padding: 20px 25px;
		}
	
		.socmed ul li{
			list-style: none;
			display: inline-block;
			position: relative;
			padding-left: 0px;
		}
	
		.socmed .fa{
			font-size: 15px;
			color: #808080;
			padding-right: 15px;
		}
	
		.copyrights{
			font-size: 11px;
			color: #808080;
		}
	
		.strip{
			background-color: #808080;
			height: 3px;
			width: 15px;
			transform: translateY(-100%);
			margin-right: 15px;
		}
	
		.iam a{
			text-decoration: none;
			color: #808080;
			font-size: 13px;
			font-weight: 500; 
		}
	/*FOOTER*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 370px;
		}
	/*POPUP MODAL*/
	
	/*POPUP MEDIA BOTTOM*/
		.pFoot-content{
			background: transparent;
			display: inline-block;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-bottom: 15px;
		}
	
		.pFoot-content ul li{
			list-style: none;
			display: grid;
			position: relative;
			padding: 5px 20px;
		}
	
		.pFoot-content span{
			padding-right: 0px;
		}

		
	/*POPUP MEDIA BOTTOM*/
	
	/*DOCUMENTATION*/
		.popup-location ul li span{
			color: #222222;
			font-size: 13px;
			font-family: 'Inter', sans-serif;
			font-weight: 400;
		}
	
		.containerScroll{
			height: 430px;
		}
	
		#pTextDocDesc1{
			grid-area: pTextDocDesc1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
			height: 250px;
		}
	
		#pTextDocMographDesc{
			grid-area: pTextDocMographDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 200px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocKeyingDesc{
			grid-area: pTextDocKeyingDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 200px;
		}
	
		#pTextDocRotoDesc{
			grid-area: pTextDocRotoDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 200px;
		}
	
		#pTextDocTrackingDesc{
			grid-area: pTextDocTrackingDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 200px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc3{
			height: 150px;
		}

		#pTextDocShowDesc4{
			height: 150px;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 177px;
		}
	
		.hovIMG1{
			height: 177px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 177px;
		}
	
		.hovIMG2{
			height: 177px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 177px;
		}
	
		.hovIMG3{
			height: 177px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 177px;
		}
	
		.hovIMG4{
			height: 177px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 177px;
		}
	
		.hovIMG5{
			height: 177px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 177px;
		}
	
		.hovIMG6{
			height: 177px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 177px;
		}
	
		.hovIMG7{
			height: 177px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 177px;
		}
	
		.hovIMG8{
			height: 177px;
		}
	
	
		.containerScroll2{
			height: 430px;
		}
	
		#pTextDocDesc2{
			height: 250px;
		}
	
		#pTextDocModelDesc{
			height: 250px;
		}
	
		#pTextDocMatDesc{
			height: 200px;
		}
	
		#pTextDocRigDesc{
			height: 250px;
		}
	
		#pTextDocCompDesc{
			height: 200px;
		}
	
		#pTextDocARDesc{
			height: 250px;
		}
	
		#pTextDocCaseDesc{
			height: 200px;
		}
	
		#pHeadDoc{
			padding-top: 10px;
		}
	
		#pFootDoc{
			padding-top: 10px;
		}
	
		#pHeadDoc2{
			padding-top: 10px;
		}
	
		#pFootDoc2{
			padding-top: 10px;
		}
	/*DOCUMENTATION*/
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
		.contentScrollMobile1P{
			height: 550px;
		}
	
		#pHead{
			padding-top: 10px;
		}
	
		#pFoot{
			padding-top: 10px;
		}
	
		.mediaContainer iframe{
			height: 250px;
		}
	
		.pText-container{
			background-color: transparent;
			height: 500px;
			display: flex;
		}
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
	
	/*WORKS PANDIT*/
		.contentScrollMobileTri{
			height: 450px;
		}
	
		#pHeadTri{
			padding-top: 10px;
		}

		#pFootTri{
			padding-top: 10px;
		}
	/*WORKS PANDIT*/
	
	/*WORKS AMPHIBI, PEKOPO*/
		.contentScrollMobile{
			height: 600px;
		}
	
		#identity{
			height: 150px;
		}
	
		.playlistContainer .main-video iframe{
			width: 100%;
			height: 250px;
		}
	
		#identity2{
			height: 150px;
		}
	
		.playlistContainer2 .main-video2 iframe{
			width: 100%;
			height: 250px;
		}
	/*WORKS AMPHIBI, PEKOPO*/
	
	/*WORKS SERIES*/
	
		.contentScrollMobileS{
			height: 650px;
		}
	
		#identityS{
			height: 158px;
		}
	
		.playlistContainerS .main-videoS iframe{
			height: 250px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 430px;
		}
	/*WORKS SERIES*/
	
	/*SCROLL*/
		::-webkit-scrollbar{
			width: 5px;
		}
	/*SCROLL*/
	
	/*ABOUT*/
		.tabelAbout{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas: 
				"tabName tabName tabName tabName"
				"tabEmail tabEmail tabEmail tabEmail"
				"tabSocmed tabSocmed tabSocmed tabSocmed"
				"tabIntro tabIntro tabIntro tabIntro"
				"tabEmpty tabEmpty tabEmpty tabEmpty"
				"tabExp tabExp tabExp tabExp"
				"tabExp1 tabExp1 tabExp1 tabExp1"
				"tabExp2 tabExp2 tabExp2 tabExp2"
				"tabExp3 tabExp3 tabExp3 tabExp3"
				"tabExp4 tabExp4 tabExp4 tabExp4"
				"tabExp5 tabExp5 tabExp5 tabExp5"
				"tabEmpty2 tabEmpty2 tabEmpty2 tabEmpty2";
			margin-top: 20px;
			text-align: left;
		}
	
		.abName{
			font-size: 20px;
		}
	
		.abEmail{
			font-size: 13px;
		}
	
		.abList{
			padding: 10px 20px;
			font-size: 13px;
		}
	
		.abIntro{
			padding: 10px 20px 10px 20px;
			font-size: 13px;
		}
	
		#tabExp1{
			font-size: 13px;
		}
	
		#tabExp2{
			font-size: 13px;
		}
	
		#tabExp3{
			font-size: 13px;
		}
	
		#tabExp4{
			font-size: 13px;
		}
	
		#tabExp5{
			font-size: 13px;
		}
	
		.conExp1{
			position: absolute;
			left: 100px;
		}
	/*ABOUT*/
}
/*Mobile L*/

/*Mobile M*/
@media screen and (min-width:320px) and (max-width:375px){
	/*BODY*/
		.container{
			max-width: 375px;
			min-width: 320px;
		}
	/*BODY*/
	
	/*LANDING GRID*/
		.tabel{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr;
			grid-template-areas:
				"lefted"
				"righted"
				"midd"
				"bottom";
			grid-gap: 0px;
		}
		
		.contentLeft{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"title"
				"empty1"
				"documentation"
				"doc1"
				"doc2"
				"works"
				"works1"
				"works2"
				"works3"
				"works4";
			grid-gap: 0px;
			padding: 0px 25px;
		}
	
		#empty1{
			padding-top: 10px;
		}
	
		.contentRight{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"empty2"
				"award"
				"award1"
				"collaboration"
				"collab1"
				"collab2"
				"collab3"
				"explorations"
				"explore1"
				"explore2"
				"contact";
			grid-gap: 0px;
			padding: 0px 25px;
		}
	
		#empty2{
			display: none;
		}
	
		#contact{
			padding-top: 100px;
		}
	
		.name{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 32px;
			padding-top: 20px;
			font-weight: 500;
		}
	
		.upper{
			font-family: 'Inter', sans-serif;
			vertical-align: top;
			font-size: 13px;
			font-weight: 300;
			letter-spacing: 1px;
			cursor: default;
		}
	/*LANDING GRID*/
	
	/*GLOBAL SETTING MENU*/
		.doc0{
			font-family: 'Inter', sans-serif;
			letter-spacing: 1px;
			font-size: 13px;
			font-weight: 300;
			cursor: default;
		}
	/*GLOBAL SETTING MENU*/
	
	/*MENU BUTTON SETTING*/
		#doc1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}
	
		#doc2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}
	
		#works1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works3 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#works4 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#award1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#collab3 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#explore1 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

		#explore2 .doc-btn .docs-content span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 1px;
			padding: 0px;    
		}

	/*MENU BUTTON SETTING*/
	
	/*FOOTER*/
		.adjustFooter{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 375px;
			min-width: 320px;
			width: 100%;
		}
		.footerContent{
			padding: 20px 20px;
		}
	
		.socmed ul li{
			list-style: none;
			display: inline-block;
			position: relative;
			padding-left: 0px;
		}
	
		.socmed .fa{
			font-size: 15px;
			color: #808080;
			padding-right: 10px;
		}
	
		.copyrights{
			font-size: 11px;
			color: #808080;
		}
	
		.strip{
			background-color: #808080;
			height: 3px;
			width: 10px;
			transform: translateY(-100%);
			margin-right: 10px;
		}
	
		.iam a{
			text-decoration: none;
			color: #808080;
			font-size: 13px;
			font-weight: 500; 
		}
	/*FOOTER*/
	
	/*KONTAK*/
		.txtContact{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 32px;
			font-weight: 500;
			letter-spacing: 1px;
			padding: 0px;
			position: relative;
		}
	
		.upperContact{
			font-family: 'Inter', sans-serif;
			vertical-align: top;
			font-size: 13px;
			font-weight: 300;
			letter-spacing: 1px;
			color: #222222;
			cursor: default;
		}
	/*KONTAK*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 320px;
		}
	
		.pFoot-content{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
		}
	/*POPUP MODAL*/
	
	/*DOCUMENTATION*/
		.popup-location ul li span{
			color: #222222;
			font-size: 13px;
			font-family: 'Inter', sans-serif;
			font-weight: 400;
		}
	
		.containerScroll{
			height: 530px;
		}
	
		.contentTextDoc{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pTextDocTitle1 pTextDocTitle1 pTextDocTitle1 pTextDocTitle1"
				"pTextDocRole1 pTextDocRole1 pTextDocRole1 pTextDocRole1"
				"pTextDocSW1 pTextDocSW1 pTextDocSW1 pTextDocSW1"
				"pTextDocDesc1 pTextDocDesc1 pTextDocDesc1 pTextDocDesc1"
				
				"pTextDocNone1 pTextDocNone1 pTextDocNone1 pTextDocNone1"
				
				"pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle pTextDocMographTitle"
				"pTextDocMographIMG1 pTextDocMographIMG1 pTextDocMographIMG1 pTextDocMographIMG1"
				"pTextDocMographIMG2 pTextDocMographIMG2 pTextDocMographIMG2 pTextDocMographIMG2"
				"pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc pTextDocMographDesc"
				
				"pTextDocNone2 pTextDocNone2 pTextDocNone2 pTextDocNone2"
				
				"pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle pTextDocKeyingTitle"
				"pTextDocKeyingIMG1 pTextDocKeyingIMG1 pTextDocKeyingIMG1 pTextDocKeyingIMG1"
				"pTextDocKeyingDesc pTextDocKeyingDesc pTextDocKeyingDesc pTextDocKeyingDesc"
				
				"pTextDocNone3 pTextDocNone3 pTextDocNone3 pTextDocNone3"
				
				"pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle pTextDocRotoTitle"
				"pTextDocRotoIMG1 pTextDocRotoIMG1 pTextDocRotoIMG1 pTextDocRotoIMG1"
				"pTextDocRotoDesc pTextDocRotoDesc pTextDocRotoDesc pTextDocRotoDesc"
				
				"pTextDocNone4 pTextDocNone4 pTextDocNone4 pTextDocNone4"
				
				"pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle pTextDocTrackingTitle"
				"pTextDocTrackingIMG1 pTextDocTrackingIMG1 pTextDocTrackingIMG1 pTextDocTrackingIMG1"
				"pTextDocTrackingIMG2 pTextDocTrackingIMG2 pTextDocTrackingIMG2 pTextDocTrackingIMG2"
				"pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc pTextDocTrackingDesc"
				
				"pTextDocNone5 pTextDocNone5 pTextDocNone5 pTextDocNone5"
				
				"pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle pTextDocShowTitle"
				"pTextDocShowIMG1 pTextDocShowIMG1 pTextDocShowIMG1 pTextDocShowIMG1"
				"pTextDocShowDesc1 pTextDocShowDesc1 pTextDocShowDesc1 pTextDocShowDesc1"
				"pTextDocShowDesc3 pTextDocShowDesc3 pTextDocShowDesc3 pTextDocShowDesc3"
				"pTextDocShowIMG2 pTextDocShowIMG2 pTextDocShowIMG2 pTextDocShowIMG2"
				"pTextDocShowDesc2 pTextDocShowDesc2 pTextDocShowDesc2 pTextDocShowDesc2"
				"pTextDocShowDesc4 pTextDocShowDesc4 pTextDocShowDesc4 pTextDocShowDesc4"
				
				"pTextDocNone6 pTextDocNone6 pTextDocNone6 pTextDocNone6";
			grid-column-gap: 0px;
			padding: 0px;
			margin: 0px;
			border-radius: 0px;
		}
	
		.DocTitle{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 10px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			height: 100%;
		}
	
		#pTextDocTitle1{
			grid-area: pTextDocTitle1;
			background: transparent;
			position: relative;
			height: 100px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.identityTitle{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			gap: 10px;
			z-index: 9999;
		}
	
		#pTextDocRole1{
			grid-area: pTextDocRole1;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.DocRole{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 0px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
			height: 100%;
		}
	
		#pTextDocSW1{
			grid-area: pTextDocSW1;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		.DocSW{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 0px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
			height: 100%;
		}
	
		#pTextDocDesc1{
			grid-area: pTextDocDesc1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
			height: 300px;
		}
	
		.DocDesc{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			height: 100%;
			line-height: 25px;
		}
	
		#pTextDocMographIMG1{
			grid-area: pTextDocMographIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #FAFAFA;
			border-right: 1px solid #222222;
		}
	
		#pTextDocMographIMG2{
			grid-area: pTextDocMographIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocMographDesc{
			grid-area: pTextDocMographDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 300px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocKeyingIMG1{
			grid-area: pTextDocKeyingIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocKeyingDesc{
			grid-area: pTextDocKeyingDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 200px;
		}
	
		.mographDesc{
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 10px;
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			height: 100%;
			line-height: 25px;
		}
	
		#pTextDocRotoIMG1{
			grid-area: pTextDocRotoIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRotoDesc{
			grid-area: pTextDocRotoDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 200px;
		}
	
		#pTextDocTrackingIMG1{
			grid-area: pTextDocTrackingIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #FAFAFA;
			border-right: 1px solid #222222;
		}

		#pTextDocTrackingIMG2{
			grid-area: pTextDocTrackingIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocTrackingDesc{
			grid-area: pTextDocTrackingDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 200px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowIMG1{
			grid-area: pTextDocShowIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc1{
			grid-area: pTextDocShowDesc1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 50px;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc3{
			grid-area: pTextDocShowDesc3;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 200px;
			border-right: 1px solid #222222;
		}

		#pTextDocShowIMG2{
			grid-area: pTextDocShowIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocShowDesc2{
			grid-area: pTextDocShowDesc2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 50px;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
		}
	
		#pTextDocShowDesc4{
			grid-area: pTextDocShowDesc4;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			height: 200px;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 150px;
		}
	
		.hovIMG1{
			height: 150px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 150px;
		}
	
		.hovIMG2{
			height: 150px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 150px;
		}
	
		.hovIMG3{
			height: 150px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 150px;
		}
	
		.hovIMG4{
			height: 150px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 150px;
		}
	
		.hovIMG5{
			height: 150px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 150px;
		}
	
		.hovIMG6{
			height: 150px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 150px;
		}
	
		.hovIMG7{
			height: 150px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 150px;
		}
	
		.hovIMG8{
			height: 150px;
		}
	
	
		.containerScroll2{
			height: 530px;
		}
	
		.contentTextDoc2{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pTextDocTitle2 pTextDocTitle2 pTextDocTitle2 pTextDocTitle2"
				"pTextDocRole2 pTextDocRole2 pTextDocRole2 pTextDocRole2"
				"pTextDocSW2 pTextDocSW2 pTextDocSW2 pTextDocSW2"
				"pTextDocDesc2 pTextDocDesc2 pTextDocDesc2 pTextDocDesc2"
				
				"pTextDocNone1D pTextDocNone1D pTextDocNone1D pTextDocNone1D"
				
				"pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle pTextDocModelTitle"
				"pTextDocModelIMG1 pTextDocModelIMG1 pTextDocModelIMG1 pTextDocModelIMG1"
				"pTextDocModelIMG2 pTextDocModelIMG2 pTextDocModelIMG2 pTextDocModelIMG2"
				"pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc pTextDocModelDesc"
				
				"pTextDocNone2D pTextDocNone2D pTextDocNone2D pTextDocNone2D"
				
				"pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle pTextDocMatTitle"
				"pTextDocMatIMG1 pTextDocMatIMG1 pTextDocMatIMG1 pTextDocMatIMG1"
				"pTextDocMatIMG2 pTextDocMatIMG2 pTextDocMatIMG2 pTextDocMatIMG2"
				"pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc pTextDocMatDesc"
				
				"pTextDocNone3D pTextDocNone3D pTextDocNone3D pTextDocNone3D"
				
				"pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle pTextDocRigTitle"
				"pTextDocRigIMG1 pTextDocRigIMG1 pTextDocRigIMG1 pTextDocRigIMG1"
				"pTextDocRigIMG2 pTextDocRigIMG2 pTextDocRigIMG2 pTextDocRigIMG2"
				"pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc pTextDocRigDesc"
				
				"pTextDocNone4D pTextDocNone4D pTextDocNone4D pTextDocNone4D"
				
				"pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle pTextDocCompTitle"
				"pTextDocCompIMG1 pTextDocCompIMG1 pTextDocCompIMG1 pTextDocCompIMG1"
				"pTextDocCompDesc pTextDocCompDesc pTextDocCompDesc pTextDocCompDesc"
				
				"pTextDocNone5D pTextDocNone5D pTextDocNone5D pTextDocNone5D"
				
				"pTextDocARTitle pTextDocARTitle pTextDocARTitle pTextDocARTitle"
				"pTextDocARIMG1 pTextDocARIMG1 pTextDocARIMG1 pTextDocARIMG1"
				"pTextDocARIMG2 pTextDocARIMG2 pTextDocARIMG2 pTextDocARIMG2"
				"pTextDocARDesc pTextDocARDesc pTextDocARDesc pTextDocARDesc"
				
				"pTextDocNone6D pTextDocNone6D pTextDocNone6D pTextDocNone6D"
				
				"pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle pTextDocCaseTitle"
				"pTextDocCaseIMG1 pTextDocCaseIMG1 pTextDocCaseIMG1 pTextDocCaseIMG1"
				"pTextDocCaseIMG2 pTextDocCaseIMG2 pTextDocCaseIMG2 pTextDocCaseIMG2"
				"pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc pTextDocCaseDesc"
				
				"pTextDocNone7D pTextDocNone7D pTextDocNone7D pTextDocNone7D";
			grid-column-gap: 0px;
			padding: 0px;
			margin: 0px;
			border-radius: 0px;
		}
	
		#pTextDocTitle2{
			grid-area: pTextDocTitle2;
			background: transparent;
			position: relative;
			height: 100px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRole2{
			grid-area: pTextDocRole2;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocSW2{
			grid-area: pTextDocSW2;
			background: transparent;
			position: relative;
			height: 50px;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocDesc2{
			grid-area: pTextDocDesc2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
			height: 300px;
		}
	
		#pTextDocModelIMG1{
			grid-area: pTextDocModelIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocModelIMG2{
			grid-area: pTextDocModelIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocModelDesc{
			height: 300px;
		}
	
		#pTextDocMatIMG1{
			grid-area: pTextDocMatIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocMatIMG2{
			grid-area: pTextDocMatIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocMatDesc{
			height: 200px;
		}
	
		#pTextDocRigIMG1{
			grid-area: pTextDocRigIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocRigIMG2{
			grid-area: pTextDocRigIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocRigDesc{
			height: 300px;
		}
	
		#pTextDocCompIMG1{
			grid-area: pTextDocCompIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocCompDesc{
			grid-area: pTextDocCompDesc;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
			border-left: 0px solid #222222;
			height: 300px;
		}
	
		#pTextDocARIMG1{
			grid-area: pTextDocARIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocARIMG2{
			grid-area: pTextDocARIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocARDesc{
			height: 300px;
		}
	
		#pTextDocCaseIMG1{
			grid-area: pTextDocCaseIMG1;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		#pTextDocCaseIMG2{
			grid-area: pTextDocCaseIMG2;
			background: transparent;
			position: relative;
			border-bottom: 1px solid #222222;
			border-left: 0px solid #222222;
			border-right: 1px solid #222222;
		}
	
		#pTextDocCaseDesc{
			height: 200px;
		}
	
		.hovmodel3DIMG1{
			height: 150px;
		}
	
		.hovmodel3DIMG2{
			height: 150px;
		}
	
		.hovmodel3DIMG3{
			height: 150px;
		}
	
		.hovmodel3DIMG4{
			height: 150px;
		}
	
		.hovmodel3DIMG5{
			height: 150px;
		}
	
		.hovmodel3DIMG6{
			height: 150px;
		}
	
		.hovmodel3DIMG7{
			height: 150px;
		}
	
		.hov-modelIMG iframe{
			height: 150px;
			width: 100%;
			border: 1px solid #FAFAFA
		}

	/*DOCUMENTATION*/
	
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
		.contentScrollMobile1P{
			overflow: hidden;
			overflow-y: scroll;
			height: 550px;
		}
	
		.popupTabel{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pHead pHead pHead"
				"pFoot pFoot pFoot"
				"pMedia pMedia pMedia"
				"pText pText pText"
				"pNone1 pNone1 pNone1";
			grid-gap: 0px;
			padding: 0px;
			margin-left: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			margin-top: 0px;
			border: 0px solid #FAFAFA;
			border-radius: 0px;
		}
	
		#pHead{
			padding-top: 10px;
		}
	
		#pFoot{
			padding-top: 10px;
		}
	
		#pNone1{
			grid-area: pNone1;
			position: relative;
			background: transparent;
			height: 30px;
			border-top: 1px solid #222222;
			display: block;
		}
	
		.pText-container{
			background-color: transparent;
			height: 550px;
			display: flex;
		}
	
		.mediaContainer iframe{
			width: 100%;
			height: 200px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.pText-Head span{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
		}
	
		.pText-Title span{
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
		}
	
		.pText-info .undertxt{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			line-height: 25px;
		}
	
		.pText-Head{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-Title{
			padding: 10px 20px 10px 20px;
		}
	
		.pText-info{
			background: transparent;
			display: flex;
			justify-content: space-between;
			align-items:flex-end;
			padding: 0px 20px 25px 20px;
			position:relative;
			bottom: 0;
		}
	
		.pText-info .undertxt span{
			padding-top: 20px;
			display: block;
		}
	
		.pText-content{
			height: 200px;;
			width: 100%;
			background-color: transparent;
			border-radius: 0px;
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
			position: relative;
		}
	
		.titleLinked a{
			position: relative;
			text-decoration: none;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
		}
	
		.pText-Title .resizeTitle{
			font-size: 20px;
		}
	
		.mediaContainerIN{
			height: 350px;
		}
	
		.mediaContainerIN iframe{
			width: 300px;
			height: 300px;
		}
	
		.container04{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"gif1"
				"gif2" 
				"gif3"
				"gif4" 
				"gif5" 
				"gif6"
				"more";
			grid-gap: 10px;
			margin: 0px;
			background: transparent;
			height: 2000px;
			margin: 10px;
		}
	
		.video-containerg{
			width: 0px;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.giphy-embed{
			display: block;
			width: 150px;
			height: 150px;
			border-radius: 0px;
		}
	/*WORKS RUANGGURU, AWARD, JUDGEMENT, LYRIC, INTERACTIVE, GIPHY*/
	
	/*WORKS PANDIT*/
		.contentTextTri{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"pTextTri1 pTextTri1 pTextTri1"
				"pTextTriNone1 pTextTriNone1 pTextTriNone1"
				"pTextTri2 pTextTri2 pTextTri2"
				"pTextTriNone2 pTextTriNone2 pTextTriNone2"
				"pTextTri3 pTextTri3 pTextTri3"
				"pTextTriNone3 pTextTriNone3 pTextTriNone3"
				"pTextTriNone4 pTextTriNone4 pTextTriNone4";
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			padding: 0px;
			margin: 10px;
			border: 0px solid #FAFAFA;
			border-radius: 0px;
		}

		#pHeadTri{
			padding-top: 10px;
		}

		#pFootTri{
			padding-top: 10px;
		}

		#pTextTriNone1{
			height: 30px;
			border-top: 0px solid #222222;
			border-bottom: 0px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
			background: transparent;
		}

		#pTextTriNone2{
			height: 30px;
			border-top: 0px solid #222222;
			border-bottom: 0px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
			background: transparent;
		}

		#pTextTriNone3{
			height: 30px;
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
			background: transparent;
		}

		#pTextTriNone4{
			height: 30px;
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
			background: red;
		}

		.pText-contentTri{
			height: 500px;
			background-color: #FAFAFA;
			border-radius: 0px;
			border: 1px solid #222222;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			overflow: hidden;
		}

		.gotoIcon{
			height: 50px;
		}

		.gotoIcon a{
			font-size: 13px;
		}

		.contentScrollMobileTri{
			overflow: hidden;
			overflow-y: scroll;
			height: 450px;
		}

		.pTexttri-Head span{
			font-size: 13px;
		}

		.pTexttri-Title span{
			font-size: 20px;
		}

		.pTexttri-info .undertxttri{
			font-size: 13px;
		}

		.triImage{
			width: 100%;
			height: 140px;
		}
	/*WORKS PANDIT*/
	
	/*WORKS AMPHIBI, PEKOPO*/
	.contentScrollMobile{
		overflow: hidden;
		overflow-y: scroll;
		height: 550px;
	}
	
	#contentNone{
		height: 30px;
		background: transparent;
		display: block;
	}
	
	.menuContainer{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-template-areas: 
			"identity"
			"video-list";
		gap: 0px;
		border-bottom: 1px solid #FAFAFA;
	}
	
	.playlistContainer .main-video .video{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"identityContent"
			"vidFoot"
			"empt"
			"contFrame"
			"titlevideo";
		gap: 0px;
		margin-bottom: 0px;
	}
	
	.playlistContainer .main-video #empt{
		grid-area: empt;
		background: transparent;
		height: 150px;
		border-bottom: 1px solid #222222;
	}
	
	#identity{
		height: 150px;
	}
	
	.identityContent{
		height: 50px;
		display: grid;
		background: transparent;
	}
	
	.playlistContainer .main-video iframe{
		width: 100%;
		height: 250px;
	}
	
	.playlistContainer .video-list .vid #titlevideo{
		font-size: 13px;
	}
	
	.playlistContainer .video-list{
		border-left: 0px solid #222222;
	}
	
	.playlistContainer .main-video #titlevideo{
		border-left: 0px solid #222222;
		border-top: 1px solid #222222;
	}
	
	.playlistContainer .main-video #titlevideo #info{
		color: #222222;
		font-size: 15px;
		height: 350px;
		position:relative;
		border-bottom: 1px solid #222222;
	}
	
	
	#contentNone2{
		height: 30px;
		background: transparent;
		display: block;
	}
	
	.menuContainer2{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-template-areas: 
			"identity2"
			"video-list2";
		gap: 0px;
		border-bottom: 1px solid #FAFAFA;
	}
	
	.playlistContainer2 .main-video2 .video2{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"identityContent2"
			"vidFoot2"
			"empt2"
			"contFrame2"
			"titlevideo2";
		gap: 0px;
		margin-bottom: 0px;
	}
	
	.playlistContainer2 .main-video2 #empt2{
		background: transparent;
		height: 150px;
		border-bottom: 1px solid #222222;
	}
	
	#identity2{
		height: 150px;
	}
	
	.identityContent2{
		height: 50px;
		display: grid;
		background: transparent;
		padding-bottom: 0px;
	}

	.playlistContainer2 .main-video2 iframe{
		width: 100%;
		height: 250px;
	}
	
	.playlistContainer2 .video-list2 .vid2 #titlevideo2{
		font-size: 13px;
	}
	
	.playlistContainer2 .video-list2{
		border-left: 0px solid #222222;
	}
	
	.playlistContainer2 .main-video2 #titlevideo2{
		border-left: 0px solid #222222;
		border-top: 1px solid #222222;
	}
	
	.playlistContainer2 .main-video2 #titlevideo2 #info2{
		color: #222222;
		font-size: 15px;
		height: 350px;
		position:relative;
		border-bottom: 1px solid #222222;
	}

	/*WORKS AMPHIBI, PEKOPO*/
	
	/*WORKS SERIES*/
		.playlistContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"menuContainerS"
				"vidmainS"
				"contentNoneS";
			position: relative;
			gap: 0px;
		}
	
		#contentNoneS{
			height: 30px;
			background: transparent;
			display: block;
		}
	
		.playlistContainerS .main-videoS .videoS{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			grid-template-areas:
				"identityContentS"
				"vidFootS"
				"emptS"
				"contFrameS"
				"titlevideoS";
			gap: 0px;
		}
	
		.menuContainerS{
			display: grid;
			grid-template-columns: 1fr;
			align-items: flex-end;
			grid-template-areas: 
				"identityS"
				"vidlistS";
			gap: 0px;
			z-index: 1;
		}
	
		#identityS{
			height: 158px;
		}
	
		.contentScrollMobileS{
			height: 550px;
		}
	
		#menuContainerS{
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.playlistContainerS .main-videoS #emptS{
			background: transparent;
			height: 230px;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .main-videoS iframe{
			width: 100%;
			height: 250px;
			border-radius: 0px;
			border: 1px solid #222222;
			margin: 10px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS{
			border-left: 0px solid #222222;
			border-top: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS{
			border-left: 0px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS.active #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.playlistContainerS .video-listS .vidS:hover #titlevideoS .judulS{
			border-top: 0px solid #222222;
			border-bottom: 1px solid #222222;
		}
	
		.judulS{
			border-top: 0px solid #FAFAFA;
			border-bottom: 1px solid #FAFAFA;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 450px;
			border-bottom: 1px solid #222222;
			margin-bottom: 0px;
		}
	
		.playlistContainerS .video-listS .vidS #titlevideoS{
			font-size: 13px;
		}
	
		.pText-infoS .undertxtS{
			font-size: 13px;
		}
		
		.identityTitleS{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0px 20px;
			font-family: 'Bricolage Grotesque', sans-serif;
			font-size: 20px;
			font-weight: 400;
			color: #222222;
			padding-top: 20px;
		}
	/*WORKS SERIES*/
	
	/*SCROLL*/
		::-webkit-scrollbar{
			width: 5px;
		}
	/*SCROLL*/
}
/*Mobile M*/

/*Mobile S*/
@media screen and (max-width:320px){
	/*BODY*/
		.container{
			max-width: 320px;
		}
	/*BODY*/
	
	/*FOOTER*/
		.adjustFooter{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 320px;
			min-width: 270px;
			width: 100%;
		}
		.footerContent{
			padding: 20px 20px;
		}
	
		.socmed ul li{
			list-style: none;
			display: inline-block;
			position: relative;
			padding-left: 0px;
		}
	
		.socmed .fa{
			font-size: 13px;
			color: #808080;
			padding-right: 7px;
		}
	
		.copyrights{
			font-size: 10px;
			color: #808080;
		}
	
		.strip{
			background-color: #808080;
			height: 3px;
			width: 7px;
			transform: translateY(-100%);
			margin-right: 7px;
		}
	
		.iam a{
			text-decoration: none;
			color: #808080;
			font-size: 11px;
			font-weight: 500; 
		}
	/*FOOTER*/
	
	/*POPUP MODAL*/
		.popup___content{
			width: 270px;
		}
	
		.pFoot-content{
			font-family: 'Inter', sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1px;
		}
	/*POPUP MODAL*/
	
	/*POPUP MEDIA BOTTOM*/
		.pFoot-content{
			background: transparent;
			display: inline-block;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-bottom: 15px;
		}
	
		.pFoot-content ul li{
			list-style: none;
			display: grid;
			position: relative;
			padding: 5px 20px;
		}
	
		.pFoot-content span{
			padding-right: 0px;
		}

		
	/*POPUP MEDIA BOTTOM*/
	
	/*DOCUMENTATION*/
		.containerScroll{
			height: 430px;
		}
	
		.mographIMG1:hover .hovIMG1{
			height: 120px;
		}
	
		.hovIMG1{
			height: 120px;
		}
	
		.mographIMG2:hover .hovIMG2{
			height: 120px;
		}
	
		.hovIMG2{
			height: 120px;
		}
	
		.mographIMG3:hover .hovIMG3{
			height: 120px;
		}
	
		.hovIMG3{
			height: 120px;
		}
	
		.mographIMG4:hover .hovIMG4{
			height: 120px;
		}
	
		.hovIMG4{
			height: 120px;
		}
	
		.mographIMG5:hover .hovIMG5{
			height: 120px;
		}
	
		.hovIMG5{
			height: 120px;
		}
	
		.mographIMG6:hover .hovIMG6{
			height: 120px;
		}
	
		.hovIMG6{
			height: 120px;
		}
	
		.mographIMG7:hover .hovIMG7{
			height: 120px;
		}
	
		.hovIMG7{
			height: 120px;
		}
	
		.mographIMG8:hover .hovIMG8{
			height: 120px;
		}
	
		.hovIMG8{
			height: 120px;
		}
	
		.containerScroll2{
			height: 430px;
		}
	
		.hovmodel3DIMG1{
			height: 120px;
		}
	
		.hovmodel3DIMG2{
			height: 120px;
		}
	
		.hovmodel3DIMG3{
			height: 120px;
		}
	
		.hovmodel3DIMG4{
			height: 120px;
		}
	
		.hovmodel3DIMG5{
			height: 120px;
		}
	
		.hovmodel3DIMG6{
			height: 120px;
		}
	
		.hovmodel3DIMG7{
			height: 120px;
		}
	
		.hov-modelIMG iframe{
			height: 120px;
			width: 100%;
			border: 1px solid #FAFAFA
		}
	
		#pTextDocDesc2{
			height: 350px;
		}
	
		#pTextDocModelDesc{
			height: 350px;
		}
	
		#pTextDocMatDesc{
			height: 250px;
		}
	
		#pTextDocRigDesc{
			height: 350px;
		}
	
		#pTextDocCompDesc{
			height: 350px;
		}
	
		#pTextDocARDesc{
			height: 350px;
		}
	
		#pTextDocCaseDesc{
			height: 250px;
		}
	
		#pHeadDoc{
			padding-top: 10px;
		}
	
		#pFootDoc{
			padding-top: 10px;
		}
	
		#pHeadDoc2{
			padding-top: 10px;
		}
	
		#pFootDoc2{
			padding-top: 10px;
		}
	
		
	/*DOCUMENTATION*/
	
	/*WORKS AMPHIBI, PEKOPO*/
		.pText-container{
			background-color: transparent;
			height: 650px;
			display: flex;
		}	
	
	/*WORKS AMPHIBI, PEKOPO*/
	
	/*WORKS SERIES*/
	
		.contentScrollMobileS{
			height: 550px;
		}
	
		#identityS{
			height: 158px;
		}
	
		.playlistContainerS .main-videoS iframe{
			height: 150px;
		}
	
		.playlistContainerS .main-videoS #titlevideoS #infoS{
			height: 480px;
		}
	/*WORKS SERIES*/
	
	/*SCROLL*/
		::-webkit-scrollbar{
			width: 5px;
		}
	/*SCROLL*/
	
	/*ABOUT*/
		.tabelAbout{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas: 
				"tabName tabName tabName tabName"
				"tabEmail tabEmail tabEmail tabEmail"
				"tabSocmed tabSocmed tabSocmed tabSocmed"
				"tabIntro tabIntro tabIntro tabIntro"
				"tabEmpty tabEmpty tabEmpty tabEmpty"
				"tabExp tabExp tabExp tabExp"
				"tabExp1 tabExp1 tabExp1 tabExp1"
				"tabExp2 tabExp2 tabExp2 tabExp2"
				"tabExp3 tabExp3 tabExp3 tabExp3"
				"tabExp4 tabExp4 tabExp4 tabExp4"
				"tabExp5 tabExp5 tabExp5 tabExp5"
				"tabEmpty2 tabEmpty2 tabEmpty2 tabEmpty2";
			margin-top: 20px;
			text-align: left;
		}
	
		.abName{
			font-size: 20px;
		}
	
		.abEmail{
			font-size: 13px;
		}
	
		.abList{
			padding: 10px 20px;
			font-size: 13px;
		}
	
		.abIntro{
			padding: 10px 20px 10px 20px;
			font-size: 13px;
		}
	
		#tabExp1{
			font-size: 13px;
		}
	
		#tabExp2{
			font-size: 13px;
		}
	
		#tabExp3{
			font-size: 13px;
		}
	
		#tabExp4{
			font-size: 13px;
		}
	
		#tabExp5{
			font-size: 13px;
		}
	
		.conExp1{
			position: absolute;
			left: 100px;
		}
	/*ABOUT*/
}
/*Mobile S*/

/*RESPONSIVE*/