/*
    LPC 2023 stylesheet for Indico
*/

/* Since we are using an image for the banner, limiting the max width across all screens */
body {
    max-width: 1920px;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0OMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t3NeCAAFOvV9SNjBwHuBZFI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0OMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t3NeCAAFOvV9SNjBznuB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJPxzGOF.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJ3xzA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ----------- Styles for the conference header ----------- */

/*
    The wrapper of the whole conference page.
*/

.conf {
    width: 100%;
    border: none;
    margin: auto;
}

/* This is "behind" the header top bar, the title box with the image
   and the title, and also behind the subtitle with the date and timezone.
   Note that the timezone and the date are padded left by 6px, so a bit of
   this confheader will show and the color has to match the color of the
   subtitle background */
.confheader {
    background-color: #ffffff;
}

/*
    Wraps around the upper part of the conference header.
*/
.confTitleBox {
    min-height: 90px;
    height: 40vh;
    min-height: 90px;
    max-height: 225px;
    background: transparent url(https://congreteria.com/event/1/images/3-tagra24_banner.png);
    /* background: transparent url(https://lpc.events/blog/current/wp-content/uploads/2024/02/lpc24_banner_no_title.png); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*
    Sets the width of the upper part of the conference header.
    Is set to 950px and centered by default.
*/
.confTitle {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

/*
    The box containing the logo. By the default the logo is placed
    on the left of the conference title.
*/
.confLogoBox {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 142px;
    width: 13.4vw;
    max-width: 256px;
    min-height: 90px;
    height: 40vh;
    max-height:200px;
    /* background: transparent url(https://congreteria.com/event/1/images/5-tagra_logo_2.png); 
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat; */
}

/*
    The style for the title text.
*/
.conference-title-link {
    border: 0;
    margin: 0;
    padding: 0;
}

span.conference-title-link span {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    float: down;
    height: 38vh;
    min-height: 90px;
    max-height:200px;
    color: transparent;
    /* background: transparent url(https://congreteria.com/event/1/images/4_title.svg); */
    /* background: transparent url(https://congreteria.com/event/1/images/4_title.svg); */
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-y: 95%;
    background-position-x: 14vw;
}

/*
    Wrapper around the bottom part of the conference header
*/
.confSubTitleBox {
    background-color: #d1d1d1;
    border: 0;
}

/*
    Styles for the date and place information.
*/

.datePlace {
    font-size: 1.2em;
    margin: 0.4em;
}

div.datePlace > div.date {
    float: left;
    font-size: 1em;
    margin: 0.2em;
    color: black;
}

div.datePlace > div.timezone {
    float: left;
    font-size: 1em;
    margin: 0.2em;
    color: #777;
}

/*
    The content of the lower part of the header. Is by default
    centered and has a fixed width.
*/
.confSubTitleContent {
    width: 100%;
    margin: 0 auto;
    font-size: 1em;
    color: #4e94af;
}

/*
    Style for links in the lower part of the header
*/
.confSubTitle a {
    font-size: 1em;
}




/*
    Announcement styles
*/
.simpleTextAnnouncement {
    background: #F5FAFF url(../../images/conf/sprites_blue.png) repeat-x scroll 0 -400px;
    border-top: 1px solid #4e94af;
    font-family: "Nunito Sans";
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    color: #4e94af;
    padding: 8px 0;
}


/* ----------- Styles for the main content ----------- */


a:hover, .fake-link:hover, .ui-widget-content a:hover {
    color: #aa6618;
}


/*
    The wrapper around the menu and the page content.
    By default centered with a fix width.
*/
#confSectionsBox {
    width: 100%;
    margin: 0 auto;
    height: 82vh; /* Added to grow the menu column gray background  */
}


/* ----------- Styles for the menu ----------- */


/* Styles for all menu Items */

/*
    Wrapper around the menu
*/
.conf_leftMenu {
    float:left;
    font-size: 13px;
}

table.overviewtable {border: 0; border-spacing: 4; badding: 4; vertical-align: top}
td.overviewtable {vertical-align: top;padding: 0 0 2em 0;}
td.rightcol{padding-left: 3em;}

/*
    Styles for the menu box
*/
#outer {
    border: 0;
}

/*
    The menu item
*/
#outer li a {
    font-family: "Nunito Sans";
    font-size: 1.3em;
}

/*
    The menu item when doing mouseover
*/
#outer li a:hover {
    background-color: #d79795;
    color: white;
}

#outer li a:not(.no-link):hover {
    background: #d79795;
    color: white;
}

/*
    Tooltips styles
*/
.qtip-default {
    font-size: 14px;
    line-height: 16px;
}
.qtip-default a .qtip-default.qtip-popup a, .qtip-default.add-field-qtip a, .qtip-default.informational a, .qtip-default.qbubble a {
    color: #158ebb;
}
.settingsWidget a, .protectionWidget a {
    font-size: 1em;
}


/*
    A non selected menu item
*/
.menuConfTitle {
    text-align: left;
}

.menuConfTitle a {
    color: #000000;
    padding: 7px 12px;
}

/*
    A selected menu item
*/

.menuConfTitle.selected > a, .menuConfMiddleCell.selected > a {
    color: white;
    background-color: #c16260;
}

.menuConfSelected, .menuConfMiddleCell.selected {
    border: 0;
}


/*
    sub menu item
*/
li ul.inner li a {
    padding: 3px 12px 3px 30px;
    background: transparent url(../../images/conf/left_menu_bullet.png) scroll no-repeat 15px center;
}


/*
    Support box
*/

.support_box {
    border: 0;
}

.support_box > h3 {
    color: #f6f6f6;
    background-color: #c16260;
    font-family: "Nunito Sans";
    font-size: 1.3em;
}



/* ----------- Styles for the page content ----------- */


.conference-page header {
    margin-bottom: 0px;
}

.conference-page header h2 {
    color: #6a8a25;
    padding-right: 5px;
    font-size: 2.5em;
    font-weight: 400;
}

.conference-page header h2 {
    font-size: 2em;
}

a, .fake-link, .ui-widget-content a {
    color: #c16260;
}

.ui-dialog-title {
    color: #c16260;
    font-weight: 700;
}

div.infoline {
    float: none;
    width: 100%;
}

/* .infoline.date {
    display: none;
} */

#tz-selector-link {
    display: none;	
}

#protection-details-link, #language-selector-link {
    display: none;
}

/* div.material-list, div.location {
    display: none;
}
*/
/* Menu control trickery */

input.LeftMenuCtrl {
    display: none;
}

img.SponsorImg {
    max-width: 100px;
    margin: 5px;
}

.SponsorClass h5 {
    font-family: 'Nunito Sans';
    margin-top: 5px;
    margin-bottom: 5px;
}

img.confLogo {
    display: none;
}

div.centered-column-wrapper {
    width: auto;
}

/* Narrow-screen breakpoint */
/* nnnn */
@media screen and (max-width: 54em) {
    .confTitleBox, .confLogoBox, span.conference-title-link span {
        height: 12vh;
        min-width: 90px;
    }
    div.conf_leftMenu {
	position: absolute;
	top: 50px;
	right: 1em;
	z-index: 20;
    }
    label.LeftMenuCtrl:after {
	content: "X";
    }
    label.LeftMenuCtrl {
	position: absolute;
	top: 0.7em;
	right: 0.4em;
	font-size: x-large;
	color: white;
    }
    input[type=checkbox]:checked ~ label.LeftMenuCtrl:after {
	content: "☰";
    }

    input[type=checkbox]:checked ~ div.conf_leftMenu {
	display: none;
    }
    div.confBodyBox {
	margin-left: 1em;
	margin-right: 1em;
    }
    li.LeftMenuCtrl {
	padding-left: 7px;
    }
    div.SponsorBox {
	float: right;
	background-color: #f6f6f6;
	padding: 0;
	margin: 0;
	border: 0;
    }
    div.SponsorClass {
	display: inline-block;
	vertical-align: top;
	text-align: center;
    }
    div.centered-column {
	margin: 2em;
	width: 100%;
    }
    td.rightcol{padding: 2em 0 2em 0;}
}

/* Wide-screen defaults. */
/* wwwww */
@media screen and (min-width: 54em) {
    label.LeftMenuCtrl:after,
    input[type=checkbox]:checked ~ label.LeftMenuCtrl:after {
	content: none;
    }
    header .title-with-actions {
        margin-top: 1.4vh;
        margin-bottom: 1.4vh;
    }
    input[type=checkbox]:checked ~ div.conf_leftMenu, div.SponsorBox {
	min-height: 1110px;
	height: 1400px;
	min-width: 142px;
        width: 13.4vw;
	max-width: 256px;
    }
    input[type=checkbox]:checked ~ div.conf_leftMenu {
	      display: block;
	      background-color: #f6f6f6;
    }
    li.LeftMenuCtrl {
	      display: none;
    }
    ul#outer {
        line-height: 1.6;
    }
    div.col2 {
        margin-top: 2vmin;
    }
    div.confBodyBox {
        margin-left: 17%;
        margin-right: 17%;
    }
    div.SponsorBox {
	      float: right;
	      background-color: #f6f6f6;
	      padding: 0;
	      margin: 0;
	      border: 0;
    }
    div.SponsorClass {
        margin: 0;
        text-align: center;
    }
    div.SponsorClass h5, div.SponsorClass a, div.SponsorClass img {
	      text-align: center;
	      font-size: 1.3em;
    }
    div.SponsorClass:first-child h5 {
	      margin-top: 1px;
    }
}

/* Disappear a bunch of the iconery we don't really have a use for */
div.button-bar {
    display: none;
}

div.conferenceDetails div.description {
    margin: 0 0 2em 0;
    color: black;
}

div.description h2 {
    margin-top: 0;
}

div.main-action-bar {
    background-color: #c9dce6;
}

ul.steps li.completed .circle::before {
    background-color: #c16260;
    border-color: #c16260;
}
ul.steps li:first-child .horizontal-line {
    background-color: #c16260;
}

ul.steps li.completed .text {
    color: #c16260;
}

div.action-box.highlight {
    background-color: #f6f6f6;
    border-color: #ccc;
}

.action-box.highlight {
    color: black;
}

.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) > .icon {
    color: black;
}

.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) {
    color: #black;
}

.action-box.highlight .section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain) .text .label {
    color: #4e94af;
}

a.i-button {
    background-color: #4e94af;
}

/* This is painful */
.i-button.highlight:not(.label):not(.borderless):not(.text-color), .i-selection input[type="radio"]:checked + label:not(.label):not(.borderless):not(.text-color), .categorynav .category-list .item .button-wrapper .highlight:not(.label):not(.borderless):not(.text-color).action-button, .categorynav .category-list .item .button-wrapper :not(.label):not(.borderless):not(.text-color).action-button, .highlight:not(.label):not(.borderless):not(.text-color).action-button, :not(.label):not(.borderless):not(.text-color).action-button {
    background-color: #4e94af;
}

.call-for-abstracts .cfa-announcement {
    color: black;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    color: black;
    font-weight: 500;
}

.conference-page .page-content h1, .conference-page .page-content h2, .conference-page .page-content h3 {
    color: black;
}

.footer * {
    line-height: initial;
}

/* Stuff for the timetable */
table.lpctt {
    border: black;
    padding: 5px;
    border-style: groove;
    border-width: 3px;
    background-color: white;
}

table.lpctt tr:hover {
    background-color: #f6f6f6;
}

tr.lpcttday {
    background-color: beige;
}

span.lpctt {
    display: none;
}

@media only screen and (max-width: 48em) {
	/* Force table to not be like tables anymore */
	table.lpctt  {
        display: table-row;
	width: 95%;
    }
    table.lpctt thead {
        display: none;
    }
    span.lpctt {
	display: inline;
    }
    table.lpctt tbody, th, td, tr {
		display: block;
	}

    tr.lpctthdr {
	display: none;
    }

    table.lpctt td {
	    /* Behave  like a "row" */
	    border: none;
	    position: relative;
	    /* padding-left: 50%;*/
	}

	table.lpctt td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
}


/* ----------- Styles for general definitions across the page ----------- */

/*
    The general table styling (TODO test in the schedule view.)
*/

* {
    font-family: "Nunito Sans";
}

body {
    font-size: 1em;
    font-weight: 400;
}

/* p { */
/*     font-size: 1.3em; */
/*     font-weight: 400; */
/*     line-height: 1.5em; */
/* } */

.fixed-width-standalone-page header .page-info, .fixed-width-standalone-text-page header .page-info, .dialog-page header .page-info, .management-page header .page-info, .conference-page header .page-info, .meeting-page header .page-info, .category-calendar-page header .page-info, h1, .corner-message, div.announcement-bar, div.main-breadcrumb, div.session-bar, #filter-placeholder, .qtip-default.add-field-qtip, .side-menu, .categorynav .category-list .search-results-list .title strong, .timetable-title, .participant-list-wrapper ul.participant-list, .paper-content .spotlight-file-name .fixed-width-standalone-page header .page-description, .fixed-width-standalone-text-page header .page-description, .dialog-page header .page-description, .management-page header .page-description, .conference-page header .page-description, .meeting-page header .page-description, .category-calendar-page header .page-description, h2, h3, h4, .i-box .i-box-header .i-box-title, .i-timeline-item .i-timeline-item-box .i-box-header .i-box-title, .categorynav .category-list .i-box-header .i-box-title, .person-link-list .i-box-header .i-box-title, #email-template-manager .email-template-wrapper .regform-section-sortable-placeholder .i-box-header .i-box-title, .regform-section .i-box-header .i-box-title, .regform-done .i-box-header .i-box-title, .regform-section-sortable-placeholder .i-box-header .i-box-title, .review-item-content .i-box-header .i-box-title, .regform-section-title, .toolbar.global-menu, ul.steps .label, .categorynav .category-list .item .title-wrapper .title, .regFormSectionNewSection, input.regFormTitleInputMgmt .category-info, .speaker-list, .conference-page, .conference-page .description, .conference-page .infogrid, .contribution-list, .track-review-list, .paper-contribution-list {
    font-family: "Nunito Sans";
}

.conference-page section .header-row h3 {
    color: #865899;
}

div.session-bar .toolbar {
    margin-left: 1em;
    margin-right: 1em;
}

/* ----------- Styles to improve the Topics view (MC in particular)  ----------- */

span.contrib-id {
  visibility: hidden;
  display: none;
}

div.contrib-title {
  font-size: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

div#display-contribution-list {
  max-width: 900px;
}

.contribution-row {
  margin-top: 4em;
}

div.speaker-list.icon-user {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.contribution-list .contribution-row .description::before, .contribution-list .track-review-row .description::before, .track-review-list .contribution-row .description::before, .track-review-list .track-review-row .description::before {
  background: none;
  overflow: visible;
}

.contribution-list .contribution-row .description, .contribution-list .track-review-row .description, .track-review-list .contribution-row .description, .track-review-list .track-review-row .description {
  max-height: initial;
  overflow: visible;
  color: black;
}

.contribution-list .contribution-row:hover, .contribution-list .track-review-row:hover, .track-review-list .contribution-row:hover, .track-review-list .track-review-row:hover {
  border-color: #c16260;
}

.conference-page .page-content h3:first-child {
  font-size: 1.4em;
}

.contrib-title span {
  /* TODO Not the best selector. Used on the Topics' page for titles */
  font-size: 2em;
}

table {
    border-collapse: collapse;
    border: solid 2px;
}

tr {
    border-bottom: 1px solid #ccc;
}

th, td {
    text-align: left;
    padding: 6px;
}

body {
    max-width: 1920px;
}

/* Profile Card */
/* go on then, styles go here.. knock yourself out! */

/* go on then, styles go here.. knock yourself out! */

.header img {
  border-radius: 50%;
  margin: 20px auto;
  display: block;
  width: 200px;
  border: 5px solid #fff;
}

.kutu {
  border-top: 0px solid #26A69A;
  border-bottom: 0px solid #00695C;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  height: 250px;
  width: 250px;
  background: url(https://s-media-cache-ak0.pinimg.com/736x/3a/1f/02/3a1f02c10700daa80655a302c5a27acf.jpg);
  background-size: cover;
  overflow: hidden;
  box-shadow: 0 0 100px 10px #fff;
  transition: all ease 0.3s;
}

.kutu:hover {
  border-top: 4px solid #26A69A;
  border-bottom: 4px solid #00695C;
  border-radius: 5px;
  height: 480px;
  width: 100%;
  box-shadow: 0 0 70px 10px #fff;
}

.kutu:hover .header img {
  animation: profile_image 2000ms linear both;
  animation-delay: 0.5s;
}

.header {
  text-align: center;
}

.header h1 {
  position: relative;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  padding: 10px;
  transition: all ease 0.250s;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.kutu:hover .header h1 {
  margin-top: 0px;
  outline: 0 solid #fff;
  border-top: 0px solid #fff;
  border-bottom: 1px solid #fff;
}

.header h2 {
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 17px;
  font-weight: normal;
  line-height: 0px;
  margin: 0;
}

.profile-bio {
  margin-top: 20px;
  padding: 1px 20px 10px 20px !important;
  transition: all linear 1.5s;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 49%, rgba(0, 0, 0, 0.61) 100%);
}

.kutu:hover .profile-bio {
  opacity: 1;
}

.profile-bio p:first-child {
  text-align: center;
  font-size: 16px;
}

.profile-social-links {
  position: relative;
  margin-top: -440px;
  margin-left: -100px;
  list-style-type: none;
  opacity: 0;
  transition: all ease 0.5s;
}

.kutu:hover .profile-social-links {
  margin-left: -30px;
  opacity: 1;
}

.profile-social-links li img {
  width: 30px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
}
/*PROFILE IMAGE ANIMATE */

@keyframes profile_image {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.7% {
    transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.81% {
    transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.41% {
    transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.21% {
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.54% {
    transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
/*NAME ANIMATE */

.kutu:hover .header h1 {
  animation: name_and_job 1500ms linear both;
  animation-delay: 0.4s;
}

@keyframes name_and_job {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

.outer-flex {
	display: flex;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.inner-flex {
	background-color: #f9f9f9;
    flex: 1 1 calc(50% - 15px);
    padding: 15px;
    transition: transform 0.2s;
}

.kutu:hover ul li:first-child {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 0.75s;
}

.kutu:hover ul li:nth-child(2) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1s;
}

.kutu:hover ul li:nth-child(3) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1.25s;
}

@keyframes social_animation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

/* End Profile Card */