/*
* ----------------------------------------------------------------------------------------
Author        : Rama Hardian
Template Name : Coag - personal one page template
Version       : 1.0
Changelog     : Fixing fault css
* ----------------------------------------------------------------------------------------
  TABLE OF CONTENT
* ----------------------------------------------------------------------------------------
* 00.COLOR VARIABLE
* 01.BASE CSS
* 02.LOADDER
* 03.ANIMATION KEYFRAME
* 04.LEFT SECTION
* 05. RIGHT SIDE SECTION
* 06. HERO SECTION
* 07. ABOUT SECTION
* 08. WHAT I DO SECTION
* 09. SKILLS SECTION
* 10. RESUME SECTION
* 11. PORTFOLIO SECTION
* 12. CONTACT SECTION
* 13.MEDIA QUERY PAGE
*/
/*
* ----------------------------------------------------------------------------------------
* 00.COLOR VARIABLE
* ----------------------------------------------------------------------------------------
*/
:root {
    /* background base color */
    --basecolor-1:#091fe1;
    --basecolor-2:#fff;
    --basecolor-3:#d0cce6;
    --basecolor-4:rgba(243, 241, 255, .5);
    /* text base color */
    --textcolor-1:#7e7d8f;
    --textcolor-2:#fff;
    --textcolor-3:#091fe1;
    --textcolor-4:#232323;  
    /* gradient color */
    --primary_gradient:#091fe1;
    --second_gradient:#091fe1;
 }   
 /*
 * ----------------------------------------------------------------------------------------
 * 01.BASE CSS
 * ----------------------------------------------------------------------------------------
 */
 *,
 ::after,
 ::before {
     box-sizing: border-box;
 }
 
 html,
 body {
     font-family: 'Karla', sans-serif;
     font-weight: 300;
     color: var(--textcolor-1);
     background: var(--basecolor-2);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
     font-smoothing: antialiased;
 }
 
 label {
     padding-top: 20px;
 }
 
 .btn-page {
     padding: 15px 40px 15px;
     border: 8px solid var(--basecolor-1);
     border-radius: 50px;
     margin-top: 10px;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--basecolor-1);
     font-weight: bold;
     display: inline-block;
     transition: all .3s;
 }
 
 .btn-page:hover {
     text-decoration: none;
     color: var(--textcolor-2);
     background: var(--basecolor-1);
 }
 
 .more-btn {
     position: relative;
     margin-top: 50px;
 }
 
 .coag-title-head {
     padding-left: 50px;
     position: relative;
 }
 
 .coag-title-head h3 {
     position: absolute;
     right: 30px;
     top: -75px;
     padding: 10px;
     background: var(--textcolor-3);
     border-radius: 10%;
     font-size: 20px;
     font-family: 'Secular One', sans-serif;
     letter-spacing: 2px;
     color: var(--textcolor-2);
 }
 
 .coag-title-head h1 {
     font-family: 'Secular One', sans-serif;
     position: relative;
     color: var(--textcolor-4);
 }
 
 .transparant-text {
     letter-spacing: 1px;
     color: var(--textcolor-1);
 }
 
 .wrap-content-all {
     padding-right: 0;
 }
 
 .colored {
     color: var(--textcolor-3);
 }
 
 #coagmainwrap-page {
     overflow: hidden;
 }
 
 label.error {
     display: none !important;
 }
 
 input.error {
     border: 3px solid red;
 }
 
 input:focus.error {
     border: 3px solid red;
 }
 
 textarea.error {
     border: 3px solid red;
 }
 
 textarea:focus.error {
     border: 3px solid red;
 }
 
 strong {
     font-weight: bold;
 }
 
 .alert {
     margin-top: 30px;
     display: none;
 }
 
 /*
 * ----------------------------------------------------------------------------------------
 * 02.LOADDER
 * ----------------------------------------------------------------------------------------
 */
 
 
 #preloader {
     position: fixed;
     display: table;
     table-layout: fixed;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: var(--basecolor-1);
     z-index: 999999;
 }
 
 #preloader-status {
     display: table-cell;
     vertical-align: middle;
 }
 
 .preloader-position {
     position: relative;
     margin: 0 auto;
     text-align: center;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .loaderme {
     width: 45px;
     height: 45px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -22px 0 0 -22px;
     font-size: 10px;
     text-indent: -12345px;
     -webkit-animation: loadder 1s infinite linear;
     animation: loadder 1s infinite linear;
     border: 3px solid rgba(255, 255, 255, .2);
     -webkit-border-radius: 50%;
     border-radius: 50%;
 }
 
 .loaderme span {
     position: absolute;
     width: 45px;
     height: 45px;
     top: -3px;
     left: -3px;
     border: 3px solid transparent;
     border-top: 3px solid #fff;
     -webkit-border-radius: 50%;
     border-radius: 50%;
 }
 
 
 /*
 * ----------------------------------------------------------------------------------------
 * 03.ANIMATION KEYFRAME
 * ----------------------------------------------------------------------------------------
 */
 
 
 @keyframes strips {
     from {
         background-position: 0 0;
     }
 
     to {
         background-position: 60px 30px;
     }
 }
 
 @-webkit-keyframes loadder {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
 
 /*
 * ----------------------------------------------------------------------------------------
 * 04.LEFT SECTION
 * ----------------------------------------------------------------------------------------
 */
 
 .coag-first-left-col {
     background: var(--basecolor-1);
 }
 
 .img-top {
     background-image: url(../image/content/logo.png);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     width: 60px;
     height: 60px;
     position: absolute;
     top: 30px;
     left: 30px;
 }
 
 .coag-side-left {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     display: block;
     padding: 0;
     padding-left: 0;
     padding-right: 0;
     overflow-x: hidden;
     overflow-y: auto;
     background: var(--basecolor-1);
 }
 
 .bottom-info-left {
     bottom: 30px;
     position: absolute;
     height: auto;
     left: 30px;
     width: 200px;
     color: var(--textcolor-2);
 }
 
 .wrap-info h3 {
     font-size: 13px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1px;
 }
 
 .wrap-info p {
     font-size: 13px;
     color: var(--textcolor-2);
     opacity: .7;
 }
 
 
 /* ---------------------------------------------- /*
 * 05. RIGHT SIDE SECTION
 /* ---------------------------------------------- /*
 */
 
 .coag-side-right {
     padding-left: calc(50% - 25.9%);
     padding-right: 0;
 }
 
 
 /* ---------------------------------------------- /*
 * 06. HERO SECTION
 /* ---------------------------------------------- /*
 */
 
 #hero-wrap {
     position: relative;
     padding-top: 50px;
     padding-bottom: 100px;
     border-bottom: 1px solid var(--basecolor-1);
 }
 
 .hero-wrap-content {
     padding: 0;
     text-align: center;
     position: absolute;
     left: -80px;
     z-index: 3;
 }
 
 
 .upper-medium {
     position: absolute;
     height: 200px;
     background: var(--basecolor-1);
     width: 100%;
     top: 0;
     display: none;
 }
 
 .img-top-med {
     background-image: url(../image/content/logo.png);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     width: 60px;
     height: 60px;
     position: absolute;
     top: 30px;
     right: 50px;
 }
 
 .coag-wrap-contenthero {
     width: 100%;
     height: 100vh;
 }
 
 .hero-img {
 
     z-index: 3;
     backface-visibility: hidden;
     border-radius: 5px;
     -webkit-box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
 }
 
 .miniinfo-coag {
     float: right;
     position: relative;
     right: 50px;
     padding-top: 150px;
     width: 50%;
 }
 
 .miniinfo-coag h1 {
     font-family: 'Secular One', sans-serif;
     font-size: 40px;
     position: relative;
     color: var(--textcolor-4);
 }
 
 .miniinfo-coag h1:before {
     content: '';
     width: 100px;
     position: absolute;
     height: 3px;
     border-radius: 90px;
     background: var(--basecolor-1);
     top: -30px;
     left: 0;
     z-index: 1;
 }
 
 .miniinfo-coag p.titlenya {
     font-family: 'Karla', sans-serif;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 1px;
     color: var(--textcolor-4);
 }
 
 .miniinfo-coag p.infonya {
     font-family: 'Karla', sans-serif;
     font-size: 15px;
 
 }
 
 
 /* ---------------------------------------------- /*
 * 07. ABOUT SECTION
 /* ---------------------------------------------- /*
 */
 
 #about-wrap {
     padding-top: 50px;
     padding-bottom: 100px;
     height: auto;
     border-bottom: 1px solid var(--basecolor-1);
 }
 
 .wrp-left,
 .wrp-right {
     display: inline-block;
     width: 100%;
     position: relative;
 }
 
 .coag-wrap-contentabout {
     position: relative;
     display: inline-block;
 }
 
 .img-potocoag-one {
     width: 40%;
     height: auto;
     position: relative;
     float: right;
     right: 50px;
     top: -100px;
     border-radius: 5px;
 }
 
 .img-potocoag-two {
     width: 40%;
     height: auto;
     float: left;
     position: relative;
     left: 50px;
     top: -100px;
     border-radius: 5px;
 }
 
 .about-wrap-inside {
     width: 50%;
     padding-left: 50px;
     padding-top: 100px;
     position: relative;
 }
 
 .about-wrap-inside p:before {
     content: '';
     width: 200px;
     position: absolute;
     height: 3px;
     border-radius: 90px;
     background: var(--basecolor-1);
     top: 50px;
     left: 50px;
     z-index: 1;
 }
 
 .info-about {
     width: 50%;
     position: relative;
     margin-left: 50px;
     margin-top: 50px;
     float: left;
     padding: 30px;
     border: 3px solid var(--basecolor-1);
     border-radius: 5px;
     color: var(--textcolor-1);
 }
 
 .info-about.second-one {
     float: right;
     margin-right: 50px;
     margin-top: 50px;
 }
 
 .info-title:before {
     font-family: FontAwesome;
     content: "\f0c8";
     position: absolute;
     left: 0;
     top: 0;
     color: var(--textcolor-3);
 }
 
 .info-title {
     font-weight: bold;
     margin-bottom: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--textcolor-4);
     position: relative;
 }
 
 .info-second {
     padding-top: 10px;
     width: auto;
 }
 
 .info-second:nth-last-child(1) {
     margin-bottom: 0;
 }
 
 .btn-resume {
     position: relative;
     margin-top: 100px;
 }
 
 
 
 /* ---------------------------------------------- /*
 * 08. WHAT I DO SECTION
 /* ---------------------------------------------- /*
 */
 
 #what-ido {
     padding-top: 50px;
     padding-bottom: 50px;
     border-bottom: 1px solid var(--basecolor-1);
 }
 
 .whatitem-wrap {
     transition: all .5s ease-in-out;
     column-gap: 30px;
     column-fill: initial;
     column-count: 2;
     margin-top: 50px;
     padding-left: 50px;
     padding-right: 50px;
 }
 
 .item {
     margin-bottom: 30px;
     display: inline-block;
     vertical-align: top;
     width: 100%;
     padding: 30px;
     border: 3px solid var(--basecolor-1);
     border-radius: 5px;
     position: relative;
     transition: all .3s;
     cursor: pointer;
 }
 
 .title-what {
     font-weight: bold;
     color: var(--textcolor-4);
 }
 
 .texts {
     padding-left: 100px;
 }
 
 .texts p {
     padding-top: 10px;
     line-height: 1.6;
 }
 
 .texts i {
     position: absolute;
     font-size: 50px;
     left: 30px;
     color: var(--textcolor-3);
 }
 
 .item:hover .texts h4 {
     color: var(--textcolor-2);
 }
 
 .item:hover .texts p {
     color: var(--textcolor-2);
 }
 
 .item:hover .texts i {
     color: var(--textcolor-2);
 }
 
 .item:hover {
     background: var(--basecolor-1);
 }
 
 
 
 /* ---------------------------------------------- /*
 * 09. SKILLS SECTION
 /* ---------------------------------------------- /*
 */
 
 
 #skill-ido {
     padding-top: 50px;
     padding-bottom: 50px;
     border-bottom: 1px solid var(--basecolor-1);
 }
 
 .skillitem-wrap {
     transition: all .5s ease-in-out;
     column-gap: 30px;
     column-fill: initial;
     column-count: 2;
     margin-top: 50px;
     padding-left: 50px;
     padding-right: 50px;
 }
 
 .wrap-pie {
     margin-bottom: 30px;
     display: inline-block;
     vertical-align: top;
     width: 100%;
     padding: 30px;
     border: 3px solid var(--basecolor-1);
     border-radius: 5px;
     position: relative;
     transition: all .3s;
     cursor: pointer;
 }
 
 .wrap-pie:hover {
     opacity: 1;
     transition: opacity 0.3s ease;
     background-size: 30px 30px;
     background-image: linear-gradient(45deg, var(--basecolor-4) 25%, transparent 25%, transparent 50%, var(--basecolor-4) 50%, var(--basecolor-4) 75%, transparent 75%, transparent);
     animation: strips 0.5s linear infinite;
     box-shadow: 0 10px 20px 0 rgba(32, 33, 36, 0.28);
 }
 
 .pies {
     margin: 30px auto;
 }
 
 .title-skill {
     font-family: 'Secular One', sans-serif;
     letter-spacing: 2px;
     position: relative;
     color: var(--textcolor-4);
 }
 
 .other {
     padding-top: 30px;
     padding-bottom: 30px;
 }
 
 .more-skill {
     padding-left: 50px;
     padding-right: 50px;
 }
 
 .more-skill-name {
     font-weight: 100;
     text-transform: uppercase;
     margin: 20px 0;
     font-family: 'Secular One', sans-serif;
     letter-spacing: 2px;
     position: relative;
     color: var(--textcolor-4);
 }
 
 .more-skill-bar {
     height: 10px;
     background: rgba(255, 255, 255, .20);
     border-radius: 8px;
 }
 
 .more-skill-per {
     height: 5px;
     background-color: var(--basecolor-1);
     border-radius: 8px;
     width: 0;
     transition: all .3s linear;
     position: relative;
 }
 
 .more-skill-per::before {
     content: attr(data-num);
     position: absolute;
     padding: 4px 6px;
     background-color: var(--basecolor-1);
     color: var(--textcolor-2);
     font-size: 12px;
     border-radius: 4px;
     top: -35px;
     right: 0;
     transform: translateX(50%);
 }
 
 .more-skill-per::after {
     content: '';
     position: absolute;
     width: 10px;
     height: 10px;
     background-color: var(--basecolor-1);
     top: -16px;
     right: 0;
     transform: translateX(50%) rotate(45deg);
     border-radius: 2px;
 }
 
 
 /* ---------------------------------------------- /*
 * 10. RESUME SECTION
 /* ---------------------------------------------- /*
 */
 
 
 #resume-me {
     padding-top: 50px;
     padding-bottom: 50px;
 }
 
 .timeline-resume {
     list-style: none;
     padding: 0;
     margin: 0;
     position: relative;
     padding-top: 15px;
     padding-bottom: 15px;
 }
 
 .timeline-resume:before {
     content: "";
     position: absolute;
     width: 1px;
     left: -1px;
     top: 30px;
     bottom: 10px;
     background-color: var(--basecolor-1);
 }
 
 .timeline-resume>li .all-inresume {
     padding: 0 50px;
     position: relative;
 }
 
 .timeline-resume>li .all-inresume:before {
     content: "";
     position: absolute;
     left: 0;
     top: 3px;
     width: 14px;
     height: 14px;
     background-color: var(--basecolor-1); 
     -webkit-transition: all .3s ease;
 
     transition: all .3s ease;
     z-index: 100;
     margin-left: -8px;
     border-radius: 50%;
 }
 
 .timeline-resume>li .all-inresume h1 {
     margin-top: 0px;
     color: var(--textcolor-4);
     font-size: 15px;
     letter-spacing: 2px;
     font-family: 'Secular One', sans-serif;
 }
 
 .timeline-resume>li .all-inresume .date {
     position: relative;
     display: inline-block;
     font-size: 13px;
     font-weight: 400;
     text-transform: uppercase;
     color: var(--textcolor-3);
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
 }
 
 .timeline-resume>li .all-inresume p {
     margin-top: 5px;
     margin-bottom: 30px;
     font-size: 13px;
 }
 
 .wrap-resume-content {
     padding-left: 50px;
     padding-right: 50px;
     padding-top: 30px;
     padding-bottom: 30px;
 }
 
 
 /* ---------------------------------------------- /*
 * 11. PORTFOLIO SECTION
 /* ---------------------------------------------- /*
 */
 
 .coag-wrap-contentportfolio {
     text-align: left;
 }
 
 #portfolio-section {
     padding-bottom: 50px;
     border-bottom: 1px solid var(--textcolor-3);
     border-top: 1px solid var(--textcolor-3);
     padding-top: 50px;
     text-align: center;
 }
 
 .portfolioitem-wrap {
     transition: all .5s ease-in-out;
     column-gap: 0;
     column-fill: initial;
     column-count: 2;
     margin-top: 50px;
     padding-left: 50px;
     padding-right: 50px;
 }
 
 .wrap-itemporfolio {
     display: inline-block;
     vertical-align: top;
     width: 100%;
     border-radius: 5px;
     position: relative;
     transition: all .3s;
     cursor: pointer;
 }
 
 .wrap-itemporfolio:hover .content-overlay {
     opacity: 1;
 }
 
 .image-place {
     width: 100%;
 }
 
 .image-place img {
     width: 100%;
 }
 
 .content-overlay {
     background: rgba(255, 255, 255, 0.8);
     position: absolute;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out 0s;
     -moz-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
 }
 
 .content-details {
     position: absolute;
     text-align: left;
     width: 100%;
     bottom: 20px;
     padding-left: 30px;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out 0s;
     -moz-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
 }
 
 .wrap-itemporfolio:hover .content-details {
     opacity: 1;
 }
 
 .content-details h3 {
     font-size: 15px;
     font-weight: bold;
     text-transform: uppercase;
     color: var(--textcolor-3);
 }
 
 .content-details p {
     font-size: 13px;
     color: var(--textcolor-4);
 }
 
 .sign {
     position: absolute;
     right: 30px;
     bottom: 30px;
     font-size: 20px;
     color: var(--textcolor-4);
 }
 
 
 /* ---------------------------------------------- /*
 * 12. CONTACT SECTION
 /* ---------------------------------------------- /*
 */
 
 #contact-me {
     padding-top: 50px;
     padding-bottom: 100px;
     position: relative;
 }
 
 .contact-form-wrap {
     padding-top: 50px;
     height: auto;
 }
 
 .form-wrap {
     width: 450px;
     height: 500px;
     left: -80px;
     background: var(--textcolor-4);
     position: absolute;
     z-index: 3;
     backface-visibility: hidden;
     border-radius: 5px;
     -webkit-box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 10px 10px 67px 0px rgba(0, 0, 0, 0.5);
 }
 
 .wrap-form {
     width: 50%;
     padding-left: 50px;
     padding-top: 50px;
     padding-top: 30px;
     position: relative;
 }
 
 .wrap-input {
     position: relative;
 }
 
 .input-form {
     width: 100%;
     height: 50px;
     padding-left: 60px;
     border: 3px solid var(--textcolor-1);
     transition: all .3s;
 }
 
 .input-form-text {
     height: 150px;
     padding-left: 0;
     padding: 10px;
     border: 3px solid var(--textcolor-1);
     width: 100%;
     resize: none;
     transition: all .3s;
 }
 
 .ico {
     font-size: 20px;
     position: absolute;
     left: 15px;
     bottom: 15px;
     padding-right: 10px;
     border-right: 1px solid var(--textcolor-1);
 }
 
 .inp:focus {
     outline: none;
     border: 3px solid var(--basecolor-1);
 }
 
 .tombol-submit:focus {
     outline: none;
 }
 
 .tombol-submit {
     background: transparent;
     padding: 15px 40px 15px;
     border: 8px solid var(--basecolor-1);
     text-transform: uppercase;
     color: var(--textcolor-3);
     margin-top: 30px;
     width: 100%;
     letter-spacing: 2px;
     font-weight: bold;
     border-radius: 50px;
     cursor: pointer;
     transition: all .3s;
 }
 
 .tombol-submit:hover {
     text-decoration: none;
     color: var(--textcolor-2);
     background: var(--basecolor-1);
 }
 
 .wrap-contact-content {
     position: relative;
 }
 
 .map-wrap {
     position: absolute;
     right: 0;
     padding-right: 50px;
     top: 0;
     width: 45%;
 }
 
 .map-wrap iframe {
     width: 100%;
     height: 300px;
     border-radius: 10px;
 }
 
 .info-detailcontact {
     border: 3px solid var(--basecolor-1);
     padding: 20px;
     margin-top: 30px;
     border-radius: 5px;
     display: none;
 }
 
 .info-detailcontact h3 {
     color: var(--textcolor-4);
     font-size: 15px;
     font-weight: bold;
 }
 
 .sosmed-list {
     padding-left: 0;
     margin-bottom: 0;
     margin-top: 10px;
     text-align: center;
 }
 
 .sosmed-list li {
     list-style: none;
     display: inline-block;
     margin-right: 50px;
 }
 
 .sosmed-list li:nth-last-child(1) {
     margin-right: 0;
 }
 
 .sosmed-list li a {
     list-style: none;
     display: inline-block;
     font-size: 20px;
     color: var(--textcolor-3);
     transition: all .3s;
 }
 
 .sosmed-list li a:hover {
     color: var(--textcolor-1);
 }
 
 .sosmedia {
     display: block;
     text-align: center;
     transition: all .3s;
 }
 
 .sosmedia h3 {
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 20px;
 }
 
 /* ---------------------------------------------- /*
 * 13.MEDIA QUERY PAGE
 /* ---------------------------------------------- /*
 */
 
 @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
     .coag-wrap-contenthero {
         width: 100%;
     }
 }
 
 @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
     .coag-wrap-contenthero {
         width: 100%;
     }
 }
 
 @media screen and (max-width: 2560px) {
     .wrap-poto-about {
         text-align: center;
     }
     #hero-wrap {
         padding-top: 50px;
         padding-bottom: 200px;
     }
 
     .img-top {
         width: 100px;
         height: 100px;
     }
 
     .hero-img {
         width: 800px;
     }
 
     .bottom-info-left {
         width: 350px;
     }
 
     .wrap-info h3 {
         font-size: 20px;
     }
 
     .wrap-info p {
         font-size: 20px;
     }
 
     .coag-title-head h1 {
         font-size: 80px;
 
     }
 
     .transparant-text {
         font-size: 50px;
     }
 
     .miniinfo-coag h1 {
         font-size: 80px;
     }
 
     .miniinfo-coag p.titlenya {
         font-size: 30px;
     }
 
     .miniinfo-coag p.infonya {
         font-size: 30px;
     }
 
     .about-wrap-inside p {
         font-size: 30px;
     }
 
     .btn-page {
         font-size: 30px;
     }
 
     .info-title {
         font-size: 20px;
         padding-left: 30px;
     }
 
     .info-second {
         font-size: 30px;
     }
 
     .title-what {
         font-size: 30px;
     }
 
     .texts p {
         font-size: 20px;
     }
 
     .title-skill {
         font-size: 30px;
     }
 
     .detail-skill {
         font-size: 20px;
     }
 
     .more-skill-name {
         font-size: 30px;
     }
 
     .more-skill-per::before {
         font-size: 20px;
         top: -45px;
     }
 
     .timeline-resume>li .all-inresume h1 {
         font-size: 30px;
     }
 
     .timeline-resume>li .all-inresume .date {
         font-size: 20px;
     }
 
     .timeline-resume>li .all-inresume p {
         font-size: 25px;
     }
 
     .content-details h3 {
         font-size: 30px;
     }
 
     .content-details p {
         font-size: 20px;
     }
 
     .sign {
         font-size: 50px;
     }
 
     label {
         font-size: 20px;
     }
 
     .tombol-submit {
         font-size: 30px;
     }
 
     .info-detailcontact h3 {
         font-size: 20px;
     }
 
     .sosmed-list li a i {
         font-size: 30px;
     }
 
     .map-wrap iframe {
         height: 400px;
     }
 }
 
 @media screen and (max-width: 1920px) {
     .hero-img {
         width: 500px;
     }
 
     .miniinfo-coag h1 {
         font-size: 40px;
     }
 
     .bottom-info-left {
         width: 250px;
     }
 
     .wrap-info h3 {
         font-size: 15px;
     }
 
     .wrap-info p {
         font-size: 15px;
     }
 
 
     .miniinfo-coag p.titlenya {
         font-size: 20px;
     }
 
     .miniinfo-coag p.infonya {
         font-size: 20px;
     }
 
     .coag-title-head h1 {
         font-size: 40px;
     }
 
     .transparant-text {
         font-size: 20px;
     }
 
     .about-wrap-inside p {
         font-size: inherit;
     }
 
     .btn-page {
         font-size: inherit;
     }
 
     .info-title {
         font-size: 13px;
         padding-left: 25px;
     }
 
     .info-second {
         font-size: 15px;
 
     }
 
     .info-about.second-one {
         margin-right: 30px;
     }
 
     .info-about {
         margin-left: 30px;
     }
 
     .title-what {
         font-size: 20px;
     }
 
     .texts p {
         font-size: 15px;
     }
 
     .title-skill {
         font-size: inherit;
     }
 
     .detail-skill {
         font-size: inherit;
     }
 
     .more-skill-name {
         font-size: inherit;
     }
 
     .more-skill-per::before {
         font-size: inherit;
         top: -50px;
     }
 
     .timeline-resume>li .all-inresume h1 {
         font-size: 25px;
     }
 
     .timeline-resume>li .all-inresume .date {
         font-size: 18px;
     }
 
     .timeline-resume>li .all-inresume p {
         font-size: 15px;
     }
 
     .content-details h3 {
         font-size: 20px;
     }
 
     .content-details p {
         font-size: 15px;
     }
 
     .sign {
         font-size: 30px;
     }
 
     label {
         font-size: 20px;
     }
 
     .tombol-submit {
         font-size: inherit;
     }
 
     .info-detailcontact h3 {
         font-size: 20px;
     }
 
     .sosmed-list li a i {
         font-size: 30px;
     }
 
     .map-wrap iframe {
         height: 400px;
     }
 }
 
 @media screen and (max-width: 1366px) {
 
     #hero-wrap {
         padding-bottom: 150px;
     }
 
     .img-top {
         width: 60px;
         height: 60px;
     }
 
     .bottom-info-left {
         width: 200px;
     }
 
     .img-potocoag-two {
         top: 0;
     }
     
     .wrap-info h3 {
         font-size: 13px;
     }
 
     .wrap-info p {
         font-size: 13px;
     }
 
     .hero-img {
         width: 450px;
     }
 
     .miniinfo-coag h1 {
         font-size: 40px;
     }
 
     .miniinfo-coag p.titlenya {
         font-size: 15px;
     }
 
     .miniinfo-coag p.infonya {
         font-size: 15px;
     }
 
     .coag-title-head h1 {
         font-size: 40px;
     }
 
     .transparant-text {
         font-size: 20px;
     }
 
     .about-wrap-inside p {
         font-size: inherit;
     }
 
     .btn-page {
         font-size: inherit;
     }
 
     .info-title {
         font-size: 13px;
         padding-left: 25px;
     }
 
     .info-second {
         font-size: 15px;
 
     }
 
     .info-about.second-one {
         margin-right: 30px;
     }
 
     .info-about {
         margin-left: 30px;
     }
 
     .title-what {
         font-size: 20px;
     }
 
     .texts p {
         font-size: 15px;
     }
 
     .title-skill {
         font-size: inherit;
     }
 
     .detail-skill {
         font-size: inherit;
     }
 
     .more-skill-name {
         font-size: inherit;
     }
 
     .more-skill-per::before {
         font-size: inherit;
         top: -40px;
     }
 
     .timeline-resume>li .all-inresume h1 {
         font-size: inherit;
     }
 
     .timeline-resume>li .all-inresume .date {
         font-size: inherit;
     }
 
     .timeline-resume>li .all-inresume p {
         font-size: inherit;
     }
 
     .content-details h3 {
         font-size: inherit;
     }
 
     .content-details p {
         font-size: inherit;
     }
 
     .sign {
         font-size: 20px;
     }
 
     label {
         font-size: inherit;
     }
 
     .info-detailcontact h3 {
         font-size: inherit;
     }
 
     .sosmed-list li a i {
         font-size: 20px;
     }
 
     .map-wrap iframe {
         height: 400px;
     }
 }
 
 @media screen and (max-width: 1280px) {
     #hero-wrap {
         padding-top: 70px;
     }
 
     .hero-wrap-content {
         left: -40px;
     }
 
     .hero-img {
         width: 350px;
         left: -50px;
     }
 
     .miniinfo-coag p.infonya {
         font-size: 13px;
     }
 
     .btn-page {
         padding: 13px 30px 13px;
     }
 
     .miniinfo-coag {
         right: 50px;
     }
 
     .img-potocoag-one,
     .img-potocoag-two {
         width: 230px;
     }
 
     .bottom-info-left {
         width: 150px;
     }
 
 }
 
 @media screen and (max-width: 1024px) {
 
     .hero-img {
         width: 350px;
         left: -50px;
     }
 
     .miniinfo-coag {
         width: 300px;
     }
 
     .whatitem-wrap {
         column-count: 1;
     }
 
     .tombol-submit {
         width: 100%;
     }
 
     .about-wrap-inside {
         width: 80%;
     }
 
     .img-potocoag-two {
         top: 50px;
     }
 
     .img-potocoag-one {
         top: 0;
     }
 
     .wrap-form {
         width: 100%;
         padding-left: 50px;
         padding-right: 50px;
     }
 
     .map-wrap {
         position: relative;
         padding-left: 50px;
         padding-top: 50px;
     }
 
     .map-wrap iframe {
         width: 100%;
     }
 
     .map-wrap {
         width: 100%;
     }
 }
 
 @media (max-width: 999px) {
     #hero-wrap {
         padding-top: 120px;
     }
 
     .hero-wrap-content {
         padding: 50px;
         position: absolute;
         text-align: unset;
         left: 0;
         z-index: 3;
     }
 
     .upper-medium {
         display: block;
     }
 
     .wrap-content-all {
         padding-right: 0;
         padding-left: 0;
     }
 
     .coag-side-left {
         display: none;
     }
 
     .coag-side-right {
         padding-left: 0;
     }
 
     .hero-img {
         width: 45%;
         border-radius: 0;
         left: 50px;
     }
 
     .img-potocoag-one,
     .img-potocoag-two {
         width: 30%;
     }
 
     .miniinfo-coag {
         right: 30px;
         padding-top: 150px;
         width: 45%;
     }
 
     .info-detailcontact {
 
         display: block;
     }
 
 
     #contact-me {
         padding-bottom: 200px;
     }
 }
 
 @media (max-width: 978px) {
     .info-about {
         width: 50%;
         position: relative;
         margin-left: 50px;
         margin-top: 50px;
         padding: 0;
         border: none;
         border-radius: 5px; 
     }
 
     .wrap-poto-about {
         display: inline-block;
         width: 100%;
         position: relative;
     }
 
     .img-potocoag-one,
     .img-potocoag-two {
         width: 100%;
         height: auto;
         padding: 100px;
         padding-top: 50px;
         margin: 0 auto;
     }
 
     .img-potocoag-one {
         position: relative;
         margin-top: 50px;
         top: 0;
         left: 0;
         right: 0;
         border-radius: 5px;
     }
 
     .about-wrap-inside {
         width: 90%;
     }
 
     .img-potocoag-two {
         position: relative;
         top: 50px;
         right: 0;
         left: 0;
         float: unset;
         border-radius: 5px;
     }
 
     .info-about.second-one {
         position: relative;
         padding-top: 50px;
         float: unset;
     }
 
     .btn-resume {
         position: relative;
         left: 50px;
         margin-top: 50px;
     }
 }
 
 @media(max-width: 890px) {
     .coag-wrap-contenthero {
         height: auto;
     }
 
     .hero-wrap-content {
         text-align: center;
         position: relative;
 
     }
 
     .img-top-med {
         width: 60px;
         height: 60px;
         position: relative;
         margin: 0 auto;
         left: 0;
     }
 
     .hero-img {
         width: 80%;
         position: relative;
         margin: 0 auto;
         left: 0;
     }
 
     .coag-title-head h3 {
         font-size: 25px;
     }
 
     .whatitem-wrap,
     .skillitem-wrap,
     .portfolioitem-wrap {
         column-count: 1;
         padding-left: 30px;
         padding-right: 30px;
     }
 
 
     .miniinfo-coag {
         margin: 0 auto;
         float: unset;
         left: 0;
         width: 80%;
         text-align: center;
     }
 
     .miniinfo-coag h1:before {
 
         left: 50%;
         transform: translate(-50%, 0);
         z-index: 1;
     }
 
     #contact-me {
         padding-bottom: 100px;
     }
     .more-skill {
         padding-left: 30px;
         padding-right: 30px;
     }
     .wrap-resume-content {
         padding-right: 20px;
     }
     .title-skill {
         font-size: inherit;
     }
 
     .detail-skill {
         font-size: inherit;
     }
 
     .more-skill-name {
         font-size: inherit;
     }
 
     .more-skill-per::before {
         font-size: 13px;
         top: -35px;
     }
         
     .timeline-resume>li .all-inresume h1 {
         font-size: inherit;
     }
 
     .timeline-resume>li .all-inresume .date {
         font-size: inherit;
     }
 
     .timeline-resume>li .all-inresume p {
         font-size: 15px;
     }
 
     .content-details h3 {
         font-size: inherit;
     }
 
     .content-details p {
         font-size: inherit;
     }
 }
 
 @media (max-width: 768px) {
     .hero-wrap-content {
 
         text-align: center;
         position: relative;
         left: 0;
         z-index: 3;
     }
 
 }
 
 @media only screen and (max-width: 690px) {
 
 
     .coag-title-head h3 {
         top: -70px;
         font-size: 15px;
     }
 
     .btn-page {
         padding: 13px 20px 13px; 
     }
 
     .coag-title-head h1 {
         font-size: 30px;
     }
 
     .miniinfo-coag h1 {
         font-size: 30px;
     }
 
     .texts {
         padding-left: 0;
     }
 
     .texts i {
         position: relative;
         font-size: 50px;
         left: 0;
         width: 100%;
         margin-bottom: 30px;
         text-align: center;
     }
 
     .title-what {
         font-size: 20px;
         text-align: center;
     }
 
     .texts p {
         font-size: 15px;
         text-align: center;
     }
     .wrap-poto-about {
         text-align: left;
     }
 }
 
 @media only screen and (max-width: 580px) {
 
     .info-about.second-one {
         margin-right: 0;
     }
 
     .info-about {
         margin-left: 30px;
     }
 
     .about-wrap-inside {
         width: 100%;
     }
 
     .hero-img {
         width: 100%;
     }
 
     .coag-title-head,
     .about-wrap-inside {
         padding-left: 30px;
         padding-right: 30px;
     }
 
     .img-potocoag-one,
     .img-potocoag-two {
         padding: 30px;
     }
 
     .timeline-resume>li .all-inresume {
         padding: 0 0 10px 30px;
     }
 
     .about-wrap-inside p:before {
         left: 30px;
     }
 
     .map-wrap {
         padding-left: 30px;
         padding-right: 30px;
     }
 
     .wrap-form {
         padding-left: 30px;
         padding-right: 30px;
     }
 }
 
 @media (max-width: 480px) {}
 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
     .coag-wrap-contenthero {
         width: 100%;
     }
 }
 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}