/* 
Theme Name: TCG Child Theme
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Thomas Concrete Group Child Theme based on Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: tcg
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



/* font settings */

@font-face {
	font-family: 'Foundry Gridnik';
    font-style: normal;
    font-weight: 200;
    font-display: auto;
    src: url('fonts/foundry-gridnik/light/light.eot'); 
    src: url('fonts/foundry-gridnik/light/light.eot?#iefix') format('embedded-opentype'),
		 url('fonts/foundry-gridnik/light/light.woff2') format('woff2'),
         url('fonts/foundry-gridnik/light/light.woff') format('woff'), 
         url('fonts/foundry-gridnik/light/light.ttf')  format('truetype')
}

@font-face {
	font-family: 'Foundry Gridnik';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('fonts/foundry-gridnik/regular/regular.eot'); 
    src: url('fonts/foundry-gridnik/regular/regular.eot?#iefix') format('embedded-opentype'),
		 url('fonts/foundry-gridnik/regular/regular.woff2') format('woff2'), 
         url('fonts/foundry-gridnik/regular/regular.woff') format('woff'), 
         url('fonts/foundry-gridnik/regular/regular.ttf')  format('truetype')
}

@font-face {
	font-family: 'Foundry Gridnik';
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url('fonts/foundry-gridnik/medium/medium.eot'); 
    src: url('fonts/foundry-gridnik/medium/medium.eot?#iefix') format('embedded-opentype'),
		 url('fonts/foundry-gridnik/medium/medium.woff2') format('woff2'),
         url('fonts/foundry-gridnik/medium/medium.woff') format('woff'), 
         url('fonts/foundry-gridnik/medium/medium.ttf')  format('truetype')
}

@font-face {
	font-family: 'Foundry Gridnik';
    font-style: normal;
    font-weight: 800;
    font-display: auto;
    src: url('fonts/foundry-gridnik/extra-bold/extra-bold.eot'); 
    src: url('fonts/foundry-gridnik/extra-bold/extra-bold.eot?#iefix') format('embedded-opentype'),
		 url('fonts/foundry-gridnik/extra-bold/extra-bold.woff2') format('woff2'),
         url('fonts/foundry-gridnik/extra-bold/extra-bold.woff') format('woff'), 
         url('fonts/foundry-gridnik/extra-bold/extra-bold.ttf')  format('truetype')
}




/* Link underline only in paragraphs */
p a {
	text-decoration: underline !important;
}
p a:hover {
	text-decoration: none !important;
}



/* No bottom margin on the last P-tag in same widget */
.elementor-widget-text-editor p:last-child {
	margin: 0 !important;
}


/* Aspec ratio for different breakpoints */
.aspect-ratio-1 {
    aspect-ratio: 1;
}

body[data-elementor-device-mode="mobile"] .aspect-ratio-mobile-1 {
    aspect-ratio: 1;
}

body[data-elementor-device-mode="tablet"] .aspect-ratio-tablet-1 {
    aspect-ratio: 1;
}

body[data-elementor-device-mode="desktop"] .aspect-ratio-desktop-1 {
    aspect-ratio: 1;
}



/* Center middle icon in buttons */
.elementor-button-icon .elementor-align-icon-right {
    display: flex;
}
.elementor-button-content-wrapper {
	align-items: center;
}
.tcg-btn-icon-big .elementor-align-icon-right svg {
	width: 1.5em;
}


/* Remove border around buttons and links i safari */
:focus {
    outline: none;
}




/* Column system for similiar projects and related 
stories at the bottom of single post page. Used with Shortcode */
.tcg-container {
	display: block;
	margin-bottom: 20px;
	margin-top: 40px;
}

.tcg-container .tcg-headline {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;			
}	
		
.tcg-container .tcg-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}
		
.tcg-container .tcg-col-4 {
	flex-basis: calc(33.33% - 20px);
}

.tcg-container .tcg-col-4 img {
	width: 100%;
	margin-bottom: 5px;
	object-fit: cover;
	aspect-ratio: 4/3;
}

.tcg-container .tcg-col-4 p {
	line-height: 1.3em;
}



/* Custom class for links to add chevron in the end */
.tcg-links-chevron p a {
	display: inline-flex;
	align-items: center;
	font-weight: bold;
	text-decoration: none !important;
	line-height: 1.8em;
}
.tcg-links-chevron p a::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px; 
	margin-left: 5px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
}



/* Remove borders rom accordions content */
.e-n-accordion-item div[role="region"] {
	border: 0;
}






/* TCG Dropdowns */
.tcg-dropdown {
	width: 100%;
	position: relative;
	margin-bottom: 10px;
	box-shadow: 2px 2px 10px #ccc;
	border-radius: 8px;
}

.tcg-dropdown-btn {
	width: 100%;

}

.tcg-dropdown .elementor-button {
	padding: 10px 10px 10px 20px;
}
.tcg-dropdown-btn-text {
	flex-grow: 1;
    order: 10;
    display: inline-block;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
	text-transform: uppercase;
}

.tcg-dropdown-btn .elementor-button-text {
	text-align: left;
	line-height: 1em;
}

.tcg-dropdown-btn .elementor-button-icon {
    display: flex;
}

.tcg-dropdown-btn .elementor-align-icon-right svg {
	width: 2em;
}


.tcg-dropdown-list {
	display: none;
	border: 1px solid #cccccc;
	border-radius: 10px;
	padding: 15px;
	position: absolute;
	width: 100%;
	z-index: 10;
	margin-top: 1px;
	background-color: #ffffff;
	
    max-height: 300px;
    overflow: hidden auto;	
}




.tcg-dropdown-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}

.tcg-dropdown-list li {
	background-color: #fff;
	padding: 5px 0 5px 10px;

}

.tcg-dropdown-list li:hover {

	cursor: pointer;
	color: var(--e-global-color-primary);
}
	

.tcg-dropdown-list li.selected {
	color: var(--e-global-color-primary);
}










/* Animation on buttons and links */


.elementor-button, .elementor-element a {
    transition: all 0.3s ease;
}

.elementor-button-icon, .elementor-icon {
    transition: transform 0.3s ease;
}




.elementor-element a:hover  .elementor-button-icon.elementor-align-icon-right,
.elementor-element a:hover .elementor-icon 
{
    animation: slide-right 0.4s ease-in-out;
}


.elementor-button:hover  .elementor-button-icon.elementor-align-icon-left {
    animation: slide-left 0.4s ease-in-out;
}


@keyframes slide-right {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}


@keyframes slide-left {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-2px);
    }
}






/* Our history timeline */
@media only screen and (min-width: 768px) {
    .tcg-timeline-border {
        border-left: 10px solid #D0D0D0 ;
    }
}



.tcg-timeline-bouble-right::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
	left: 40px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #50C0F0;
    transform: translateX(-50%);
    }
    
    
@media only screen and (min-width: 768px) {
    .tcg-timeline-bouble-right::after {
        bottom: 0px;
        left: -20px;
        top: 20px;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 0;
        border-right: 20px solid #50C0F0;
        transform: translateX(0%);
    }
}

.tcg-timeline-bouble-left::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
	left: 40px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #50C0F0;
    transform: translateX(-50%);
	
}
    
    
@media only screen and (min-width: 768px) {
    .tcg-timeline-bouble-left::after {
        bottom: 0px;
        right: -20px;
        top: 20px;
		left: 100%;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 0;
        border-left: 20px solid #50C0F0;
        transform: translateX(0%);
    }
}



/* Aspec ratio for Person box */
.tcg-person-box img {
	object-fit: cover;
    aspect-ratio: 10/9;
	margin-bottom: 10px;
}


/* Story and project box in Elemento Loop hover effect */
/*.e-loop-item a img {
	transition-duration: 0.3s;
}
.e-loop-item a:hover img {
	opacity: 0.7;
}*/



/* IMG effect hover if link on all images */
a img {
	transition-duration: 0.3s;
}

a:hover img {
	opacity: 0.7;
}


/* Hover elementor button */

.elementor-button-link:hover {
	color: #50C0F0;
}
.elementor-button.elementor-button-link:hover .elementor-button-content-wrapper .elementor-button-icon {
	fill: #50C0F0;
}








/* Custom table */
/* Mobile-first styling */

.elementor-table td {
	border: 0; 
}

.elementor-table {
    width: 100%;
    table-layout: fixed;
    margin-top: 20px;
    border-collapse: collapse;
}

.elementor-table thead {
    display: none; /* Dölj rubriker i mobilläge */
}

.elementor-table tbody,
.elementor-table tr {
    display: block;
    width: 100%;
}

.elementor-table tr {
    margin-bottom: 15px;
    /*border-bottom: 1px solid #eee;*/
    padding: 10px 0;
}

.elementor-table td {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}

.elementor-table td:not(:last-child) {
    /*border-bottom: 1px solid #ddd; */
}

.elementor-table td a {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.elementor-table td a:hover {
    color: #d64e4e;
}

.elementor-table td a::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23d64e4e' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.elementor-table .download-button {
    background-color: #d64e4e; /* Röd bakgrund */
    color: #fff; /* Vit text */
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px; /* Rundade hörn */
    border: none;
    cursor: pointer;
}

.elementor-table .download-button:hover {
    background-color: #b53a3a; /* Mörkare röd vid hover */
}

/* Anpassningar för större skärmar */
@media screen and (min-width: 769px) {
    .elementor-table {
        width: 100%;
        margin-top: 20px;
        border-collapse: collapse;
    }

    .elementor-table thead {
        display: table-header-group; /* Visa rubriker igen */
    }

    .elementor-table tbody, 
    .elementor-table tr {
        display: table-row-group;
    }

    .elementor-table tr {
        display: table-row;
        margin-bottom: 0;
        border-bottom: none;
        padding: 0;
    }

    .elementor-table td {
        display: table-cell;
        width: auto;
        padding: 8px;
        position: static;
        text-align: left;
    }

    .elementor-table td:not(:last-child) {
        border-bottom: none; /* Ta bort separeringen mellan celler */
    }

    .elementor-table th,
    .elementor-table td {
        border: none !important;
    }

    .elementor-table th:first-child,
    .elementor-table td:first-child {
        width: 40%; /* Första kolumnen */
        padding-left: 20px;
        word-wrap: break-word;
		text-align: left;
    }

    .elementor-table th:nth-child(2),
    .elementor-table td:nth-child(2) {
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .elementor-table th:nth-child(3),
    .elementor-table td:nth-child(3) {
        width: 25%;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .elementor-table .download-button {
        background-color: #d64e4e; /* Röd bakgrund */
        color: #fff; /* Vit text */
        padding: 6px 12px;
        text-decoration: none;
        border-radius: 4px; /* Rundade hörn */
        border: none;
        cursor: pointer;
    }

    .elementor-table .download-button:hover {
        background-color: #b53a3a; /* Mörkare röd vid hover */
    }
}




.scroll-to-top {
  display: none; /* Göm knappen initialt */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s;
}

.scroll-to-top img {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Om ikonen inte redan är rund */
}

.scroll-to-top:hover {
  transform: scale(1.1); /* Ger en liten zoom-effekt vid hover */
}



#topmenu .elementor-nav-menu--dropdown {
    border-bottom: 6px solid #50C0F0;
    padding: 0 0 5px 0;
    
    /*border-top: 1px solid #ccc;*/
    
    
}
/*
selector .sub-menu li {
    margin-right:  -5px !important;
}*/

#topmenu .elementor-nav-menu--dropdown a {
    padding-left: 10px;
    padding-right: 20px;
}

#topmenu .elementor-nav-menu--dropdown .menu-item-has-children .elementor-sub-item {
	justify-content: space-between;
}


#topmenu .elementor-nav-menu .sub-arrow {
    color: #50C0F0;   
}


#topmenu .menu-item-has-children .elementor-item .sub-arrow {
    display: none !important;
}


#topmenu .elementor-nav-menu--dropdown .sub-arrow .fa-svg-chevron-down {
    display: none !important;
}








	#topmenu .elementor-nav-menu--dropdown .menu-item-has-children > a::after {
		content: '';
		display: inline-flex;
		width: 18px; 
		height: 18px; 
		margin-left: 8px; 
		background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22uuid-02b921ad-fe38-4752-b157-6308596cb860%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20id%3D%22uuid-fbd6c389-b9e8-4f50-8556-1c0df30359bd%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22%2350c0f0%22%20stroke-width%3D%220%22/%3E%3Cpath%20d%3D%22M14.5%2C8.16l-4.51%2C4.51-4.49-4.51%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E');
		background-size: contain;
		background-repeat: no-repeat;
		
	}

@media (min-width: 1025px) {
    #topmenu .elementor-nav-menu--dropdown .menu-item-has-children > a::after {
        transform: rotate(-90deg);
    }
}


.ratio-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
}