/**
* All of the CSS for public
*/

.home .entry-content,
.page-id-6827 .entry-content {
	margin-top: 0;
}

.home #front-main {
	margin-left: -2vw;
    margin-right: -2vw;
}

.site-footer {
	padding: 10px 5vw;
	background-color: #115172;
	color: white;
	font-size: 16px;
	height: fit-content;
	width: 100%;
}

.site-info {
	display: flex;
	justify-content: space-between;
}

.background-banner {
	box-shadow: 3px 3px 10px 3px #115172;
	text-align: center;
	margin: 40px auto;
	display: flex;
    justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	background: #def1fa;
	border-radius: 10px;
}

.banner-cta-content {
	margin-top: auto; 
	margin-bottom: auto;
	padding: 0 5vw;
	margin-left: auto;
    margin-right: auto;
}

.background-banner .banner-cta-content a,
.background-banner .bundle .bundle-btn a {
	color: white;
	text-decoration: none;
    font-size: 16px;
    background: #115172;
    padding: 15px 20px;
    border: 3px double white;
	margin: 0 5px;
	white-space: nowrap;
}

.background-banner .banner-cta-content a:hover,
.background-banner .bundle .bundle-btn a:hover {
	color: #721020;
	background: white;
	border: 3px double #721020;
}

.background-banner p {
	color: #115172;
	font-size: 16px;
	margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.background-banner .bundle {
	display: flex;
    justify-content: space-evenly;
	background: #d9e0e6;
    border-radius: 10px;
	padding: 1vw 2vw;
}

.background-banner .bundle .bundle-btn {
	font-size: 20px;
	font-style: normal;
	margin-top: auto;
    margin-bottom: auto;
}

.background-banner .plus {
	font-size: 60px;
	font-weight: bold;
	margin-top: auto;
    margin-bottom: auto;
	line-height: 0.5;
}

.frnt-bot-img {
	display: flex;
	margin-top: auto;
    margin-bottom: auto;
}

/* WOOCOMMERCE */
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover {
	background-color: #115172;
}

.woocommerce-store-notice:not(.woocommerce .woocommerce-store-notice) {
	display: none!important;
}

.woocommerce div.product div.images img {
	width: initial!important;
	margin-left: auto;
    margin-right: auto;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 120px;
}

.single-product .product .single_add_to_cart_button.button,
.woocommerce .product .add_to_cart_button.button {
    background-color: #115172;
    color: #FFFFFF;
	border: 3px double white;
	width: 200px;
	max-width: 100%;
	text-align: center;
}

.single-product .product .single_add_to_cart_button.button:hover,
.woocommerce .product .add_to_cart_button.button:hover {
    background-color: white;
    color: #115172;
	border: 3px double #115172;
	width: 200px;
}

.woocommerce div.product div.images {
    margin-top: 3em;
	width: 30%;
}
.woocommerce div.product div.summary {
	width: 70%;
	padding-left: 3%;
}
.refunds {
	display: flex;
	margin-bottom: 3em;
}
.refunds p {
	width: 70%;
}
.refunds a {
	width: 100%;
	display: inline-block;
}
.refunds div {
	text-align: center;
}
.product_meta {
	display: none;
}
.installation {
	display: inline-block;
    width: 45%;
    vertical-align: top;
}
.installation a {
	margin-top: 20px;
    display: inline-block;
	border: 3px double #115172;
    padding: 5px;
    border-radius: 5px;
}
/* SHOP PAGE */
.woocommerce-shop #primary {
    padding-bottom: 70px;
}
.woocommerce-shop .products {
	text-align: center;
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
}
.woocommerce-shop .entry-content ul.columns-3 li.product {
    margin: 30px!important;
    padding: 20px;
    max-width: 300px;
    min-width: 250px;
}
/* END WOOCOMMERCE */

.page-index {
	width: fit-content;
    background: #e8f5fc;
    padding: 2%;
    margin-right: 3em;
	max-width: 90vw;
}

.page-index ul {
    padding-right: 40px;
	margin-left: 0;
}

.page-index ul li {
	margin-bottom: 3px;
    font-weight: bold;
}

.page-index ul li ul li {
	font-weight: normal;
}

.nerot {
    text-align: center;
    width: 100%;
	margin-top: 80px;
	margin-bottom: 30px;
}

html[lang="en-GB"] .nerot { display: none; }

.postid-2863 h3[id^="a"], 
.postid-2863 h4[id^="b"] {
	padding-top: 100px; 
	margin-top: -100px; 
}

.wpcf7 {
	border-radius: 10px;
	padding: 15px 30px;
    margin-top: 10px;
    background: #115172;
	width: fit-content;
    margin-left: auto;
    margin-right: auto;
	max-width: 100%;
}

.wpcf7 label, .wpcf7 small {
	color: white;
}

.wpcf7 .wpcf7-response-output {
	color: white;
}

#cf7-setup li {
	margin-top: 40px;
}

#cf7-setup a {
	width: 100%;
    display: block;
}


#cf7-setup img {
	margin-top: 20px;
}

.cf7-flex {
	display: flex;
}

.cf7-flex a {
	width: initial!important;
}

.cf7-flex a:nth-of-type(2) img {
	margin-left: 40px;
} 

.wp-image-3138 {
	max-width: 40vw;
}

/* Button General */
.general-btn a {
	color: white;
	text-decoration: none;
	font-size: 18px;
	background: #115172;
	padding: 10px 20px;
	border: 3px double white;
	white-space: nowrap;
	text-align: center;
	font-weight: bold;
}
.general-btn a:hover {
	color: #115172;
	background: white;
	border: 3px double #115172;
}

/* Homepage */
.front-coding-image {
	box-shadow: 3px 3px 10px 3px #115172;
	padding: 50px;
	border-radius: 30px;
}
.front-coding-image p {
	font-size: 60px!important;
}
.front-coding-image img {
	width: 30vw;
	box-shadow: 3px 3px 10px 3px #115172;
    border-radius: 5px;
}
.front-icons {
	display: flex;
	justify-content: space-between;
	margin-top: 120px;
	margin-left: 5vw;
    margin-right: 5vw;
}
.front-icons .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 300px;
}
.front-icons .wp-block-column svg {
	flex-grow: 1;
	width: 25vw;
	fill: #115172;
}
.front-pr-langs {
	margin-left: 15vw;
    margin-right: 15vw;
	justify-content: center;
}
.front-pr-langs .wp-block-column {
	display: flex;
    justify-content: center;
	max-width: 150px;
}
.front-woo {
	border: 3px double #115172;
    padding: 40px;
    border-radius: 5px;
    background: lavenderblush;
    box-shadow: 3px 3px 20px 1px #115172;
}
.front-woo h2 {
	font-size: 1.8em;
}
.front-woo p, .front-integration p {
	font-size: 24px;
}
.front-woo a {
	text-decoration: underline;
}
.front-integration {
	margin-left: 15vw;
	margin-right: 15vw;
	border-radius: 3px;
}
.front-integration p {
	color: white;
}
.front-integration .wp-block-column svg {
	fill: white;
	width: 100%;
    height: 100%;
}
.front-link-bot {
	background: #115172;
	color: white;
	padding: 26px;
	box-shadow: 3px 3px 20px 1px #115172;
	border-radius: 5px;font-size: 20px;
	font-weight: bold;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 24px;
}
.front-link-bot svg {
	margin-right: 20px;
	width: 50%;
	fill: white;
	animation: move-back-and-forth 2s ease-in-out infinite;
}

/* General Portfolio Styling */
.page-id-9673 .entry-content p {
	font-size: 30px;
	margin: 10px 0;
}
.portfolio {
	margin: 20px;
	font-family: Arial, sans-serif;
}

.portfolio h1, h2, h3, h4 {
	color: #115172;
}

/* Main Heading */
.portfolio > h3 {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 30px;
	margin-top: 60px;
	color: #115172;
}

/* Subheadings for Groups */
.portfolio-group h4 {
	font-size: 1.5rem;
	margin-top: 30px;
	margin-bottom: 15px;
	border-bottom: 2px solid #115172;
	padding-bottom: 5px;
}

/* Box Container Styling */
.box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
}

/* Individual Box Styling */
.box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #115172;
	border: 10px double white;
	border-radius: 5px;
	cursor: pointer;
	overflow: hidden;
	padding: 20px; 
	aspect-ratio: 1 / 1;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.box span {
	font-weight: bold;
	font-size: 1.7rem;
	color: white;
	margin-bottom: 10px;
	max-width: 90%;
	word-wrap: break-word;
	z-index: 1;
	transition: color 0.3s ease;
}

.box.active span {
	display: none;
}

.box .details {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #115172;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.box.active .details {
	opacity: 1;
	pointer-events: auto;
}

.details div {
	margin-bottom: 10px;
	text-align: left;
	width: 100%;
}

.project-summary strong,
.project-solution strong,
.project-result strong,
.project-tech strong {
	display: block;
	color: #ffdd57;
	font-weight: bold;
	margin-bottom: 3px;
}

.project-link a {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
}


.download-file a {
	color: white;
	padding: 5px;
    border-radius: 5px;
}
  
@keyframes move-back-and-forth {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(10px);
	}
	50% {
		transform: translateX(0);
	}
	75% {
		transform: translateX(10px);
	}
	100% {
		transform: translateX(0);
	}
}

@media( max-width: 1820px ) {
	.background-banner .banner-cta-content,
	.background-banner .bundle {
		width: 100%;
		justify-content: center;
	}
}

@media( max-width: 1290px ) {
    .wp-block-column { 
        flex-basis: 100%!important;
    }
}

@media( max-width: 1260px ) {
    .wp-block-column[style*=flex-basis] {
        flex-grow: 1;
    }
    #slider-text {
        font-size: 2.5em;
    }
	.front-integration.wp-block-columns {
		flex-wrap: wrap!important;
	}
}

@media( max-width: 1100px ) {
    header#masthead.site-header {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
		order: 2;
    }
    .site-branding {
        margin: 0;
    }
	#sticking {
		display: flex;
        align-items: center;
        justify-content: space-evenly;
	}
    .entry-content ul, .entry-content ol {
        margin-left: 0;
    }
    #contact {
        position: initial;
        margin-top: 10px;
        margin-bottom: 10px;
        z-index: 100;
    }

    .container {
        cursor: pointer;
		z-index: 1000;
        width: 40px;
        margin-top: -5px;
        height: 40px;
        order: 1;
    }

    .main-navigation {
        width: 40vw;
        padding: 0 10px;
        background-color: #115172;
        z-index: 100;
        top: 50px;
        transition: transform 0.5s ease;
		position: relative;
		left: -150vw;
		border: 1px solid white;
		box-shadow: lightgrey 1px 1px 1px 1px;
		overflow-y: scroll;
		max-height: 75vh;
    }

    .change .main-navigation {
		transition: transform 0.5s ease;
		transform: translateX( 150vw ); 
    }

    #primary-menu li:not(:nth-last-child(1)) {
        border-bottom: 1px solid white;
    }

    #primary-menu li ul.sub-menu {
        margin-top: 0;
        padding: 15px 20px;
        background: #115172;
		box-shadow: 0px 0px 10px;
		overflow-y: scroll;
        max-height: 200px;
		width: 250px;
		display: flex;
    }

    .main-navigation ul {
		display: block; 
		text-align: center;
	}

    .bar1, .bar2, .bar3 {
        width: 40px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-8px, 7px);
    }

    .change .bar2 { opacity: 0; }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }

	#site-navigation a {
		color: white;
	}
	
	#site-navigation a:visited {
		color: lightgrey!important;
	}

	.front-coding-image img {
		width: 100%;
	}
	.front-coding-image .wp-block-media-text__content p {
		text-align: center;
	}
	.front-coding-image p {
		font-size: 34px!important;
	}
}

@media( max-width: 789px ) {
	.background-banner .bundle {
		flex-wrap: wrap;
		padding: 2vw 0;
	}
	.background-banner .bundle .plus {
		width: 100%;
    	padding: 1vw 0;
	}
	.background-banner .bundle .bundle-btn {
		width: 100%;
		margin: 20px 0;
	}
}

@media( max-width: 781px ) {
	.front-icons {
		margin-top: 100px;
	}
	.front-icons .wp-block-column svg {
		width: initial;
	}
}

@media (max-width: 768px) {
	.main-navigation {
        width: 75vw;
	}
	#slider-text {
        left: 50%;
        right: initial;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    
    img#front-slider {
        top: initial;
    }

    #contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #h_email {
        margin-right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #slider_container {
        margin-bottom: initial;
        height: 40vw;
    }
    #slider-text {
        font-size: 2em;
    }
    .post-1969 h2 {
        margin-top: 0;
    }
	.post-4328 li p {
		padding: 0!important;
		text-align: center;
	}
	.site-footer {
		display: flex;
		align-content: center;
		flex-wrap: wrap;
	}
    #footer_name {
        font-size: 14px;
        max-width: 50vw;
        display: inline-block;
    }
    .site-info {
        margin: 0 15px;
		flex-wrap: wrap;
		line-height: 1.7;
    }
    #ig_logo {
        margin-left: calc( 10vw - 15px );
    }
	#cf7-setup {
		padding-inline-start: 5vw;
	}
	.cf7-flex {
		flex-wrap:wrap;
	}
	.cf7-flex a:nth-of-type(2) img {
		margin-left: 0;
		margin-top: 10px;
	} 
	.woocommerce div.product div.images {
		width: initial;
	}
	.woocommerce div.product div.summary {
		width: initial;
		padding-left: initial;
	}
	.front-woo {
		padding: 20px;
	}
	.front-integration {
		padding: 20px;
		margin-left: 1vw;
		margin-right: 1vw;
	}
	.front-pr-langs img {
		width: 150px;
	}
}

@media( max-width: 500px ) {
    header#masthead.site-header {
        padding: 0;
    }
    #h_email a, #h_phone a {
        font-size: 20px;
    }
    #slider-text {
        font-size: 1.5em;
    }
}

@media (max-width: 360px) {
    #slider-text {
        font-size: 1.3em;
    }

}