/* 
Theme Name:		 Sons of Promise
Theme URI:		 -
Description:	 It is a child theme
Author:			 
Author URI:		 
Template:		 blocksy
Version:		 1.0.0
Text Domain:	 blocksy
*/
/*
    Add your custom styles here
*/
.rotate-right {
  animation: rotation 50s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
body .elementor-heading-title {
	line-height: 1.1em;
}
.community {
	gap: 20px;
	display: flex;
}
@media (max-width: 678px){
	.community{
		display: block;
	}
}
.community p{
	width: 100%;
}
.programs .community p {
	margin-bottom: 1.6rem;
}
p.ctct-form-field.ctct-form-field-submit{
	margin-bottom: 0;
}
.ctct-form.community input[type=submit]{
    width: 100%;
    text-align: center;
    background: var(--theme-palette-color-1);
    transition: all .3s ease-in-out;
    font-weight: 600;
}
.ctct-form.community input[type=submit]:hover,
.programs .community input[type=submit]:hover{
	background: #000;
	color: #fff;
}
.programs .community{
	display: block;
}
.programs .community input[type=submit] {
	text-align: left;
	width: auto;
	height: auto;
	min-height: 25px;
	font-weight: 600;
	background:var(--theme-palette-color-1);
	transition: all .3s ease-in-out;
}
.programs .community input {
	height: 3em;
}
form.community {
    margin-bottom: 0;
}
a.button.ctct-button,
.programs .ctct-form-description{
	display: none;
}

@media (min-width: 1000px) {
	#header .ct-container-fluid {
			max-width: 90%;
	}
	#header [data-column=start] [data-items=primary] {
			border-right: 1px solid #fff;
			width: fit-content;
	}
    [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.headerbutton a,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.headerbuttonjoin a{
        border: 2px solid var(--theme-palette-color-3);;
        padding: 5px 20px;
        margin-left: 20px;
        vertical-align: middle;
        transition: all .3s ease-in-out;
        line-height: normal;
        height: unset;
    }
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.headerbuttonjoin a{
		background: var(--theme-palette-color-3);
	}
		[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.headerbuttonjoin a:hover{
			background: var(--theme-palette-color-6);
		color: var(--theme-palette-color-1);
			border-color: var(--theme-palette-color-6);
	}
}