/* Athena Demo Styles
================================================== */

	/* Page Fonts -  You can customize on here: https://fonts.google.com/?sidebar.open=true&selection.family=Teko:wght@400;700|Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400 */
	@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	.font-main{ font-family: 'Kanit', sans-serif !important;}
	.font-secondary{ font-family: 'Kanit', sans-serif !important;}

	/* Body Options */
	body{ font-family: 'Kanit', sans-serif; font-weight: 200; letter-spacing: 0px; }
	body *{outline:none !important;}


/* Home Section
/* Blend mode effect on slide images
================================================== */

    /* Square 1 */
    .square1{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #ccc;-webkit-animation:square1 4s infinite ease;animation:square1 4s infinite ease;}
    .square1-inner{vertical-align:top;display:inline-block;width:100%;background-color:#ccc;-webkit-animation:square1-inner 4s infinite ease-in;animation:square1-inner 4s infinite ease-in;}
    @-webkit-keyframes square1{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 25%{-webkit-transform:rotate(180deg);transform:rotate(180deg);} 50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);} 75%{-webkit-transform:rotate(360deg);transform:rotate(360deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
    @keyframes square1{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 25%{-webkit-transform:rotate(180deg);transform:rotate(180deg);} 50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);} 75%{-webkit-transform:rotate(360deg);transform:rotate(360deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
    @-webkit-keyframes square1-inner{0%{height:0%;} 25%{height:0%;} 50%{height:100%;} 75%{height:100%;} 100%{height:0%;}}
    @keyframes square1-inner{0%{height:0%;} 25%{height:0%;} 50%{height:100%;} 75%{height:100%;} 100%{height:0%;}}


/* Team Section
================================================== */

	/* Creative team options */
    /* Figure options - margin for absolute items on bottom */
    .team-creative figure{ -webkit-transition:color 0.3s;transition:color 0.3s; }
    /* Hover position for figcaption */
    .team-creative figcaption{ position: relative; bottom: 0%; -webkit-transition:bottom 0.3s;transition:bottom 0.3s; }
    .team-creative figure:hover figcaption{ bottom: 50%; }
    /* Opacity option for progress bars */
    .team-creative figure .progress-bars{ opacity: 0; visibility: hidden; -webkit-transition-delay:0s;transition-delay:0s; }
    .team-creative figure:hover .progress-bars{ opacity: 1; visibility: visible; -webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s; -webkit-transition-delay:0.2s;transition-delay:0.2s; }
    /* Opacity option for image */
    .team-creative figure > .employee-photo img{  opacity: 1;-webkit-transition:opacity 0.3s;transition:opacity 0.3s; }
    .team-creative figure:hover > .employee-photo img{ opacity: .3; }
    /* Socials Aniamtion */
    .team-creative figure .socials a{opacity:0; -webkit-transform:translateY(15px);transform:translateY(15px); -webkit-transition:opacity 0.3s, transform 0.3s;transition:opacity 0.3s, transform 0.3s; -webkit-transition-delay:0s;transition-delay:0s;}
    /* Icon delays */
    .team-creative figure:hover .socials a{opacity:1; -webkit-transform:translateY(-20px);transform:translateY(-20px); -webkit-transition-delay:0.3s;transition-delay:0.3s;}
    .team-creative figure:hover .socials li:nth-of-type(2) a{-webkit-transition-delay:0.35s;transition-delay:0.35s;}
    .team-creative figure:hover .socials li:nth-of-type(3) a{-webkit-transition-delay:0.4s;transition-delay:0.4s;}
    .team-creative figure:hover .socials li:nth-of-type(4) a{-webkit-transition-delay:0.45s;transition-delay:0.45s;}
    .team-creative figure:hover .socials li:nth-of-type(5) a{-webkit-transition-delay:0.5s;transition-delay:0.5s;}
    .team-creative figure:hover .socials li:nth-of-type(6) a{-webkit-transition-delay:0.55s;transition-delay:0.55s;}
    .team-creative figure:hover .socials li:nth-of-type(7) a{-webkit-transition-delay:0.6s;transition-delay:0.6s;}



/* Blend mode effect on portfolio items
================================================== */

    .portfolio-items a{position: relative;}
    .portfolio-items a:before{width:100%; height: 100%; left:0; top: 0; position: absolute; z-index: 0; mix-blend-mode: soft-light; content: ''; background-color: transparent; -webkit-transition:all 0.3s;transition:all 0.3s;}
    .portfolio-items a:hover:before{background-color: inherit;}