@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    @font-face {
        font-family: 'Poppins';
        font-weight: normal;
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        src: url('/wp-content/themes/cwhsurveyors/webfonts/Poppins-Regular.woff2')  format('woff2');
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 500;
        font-style: normal;
        font-display: swap;
        src: url('/wp-content/themes/cwhsurveyors/webfonts/Poppins-Medium.woff2')  format('woff2');
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 600;
        font-style: normal;
        font-display: swap;
        src: url('/wp-content/themes/cwhsurveyors/webfonts/Poppins-SemiBold.woff2')  format('woff2');
    }
    html{
        overflow-y: scroll;
    }
    body{
        @apply text-font;
    }
    a{
        @apply text-red no-underline;
    }
    a:hover{
        @apply text-blue;
    }
    .hero-carousel a{
        @apply text-blue no-underline;
    }
    .hero-carousel a:hover{
        @apply text-red;
    }
    strong, b{
        @apply font-semibold;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply text-blue mb-2 lg:mb-3 2xl:mb-4 font-semibold leading-tight;
    }
    small{
        @apply font-normal;
    }
    h1 {
        @apply text-2xl md:text-3xl 2xl:text-[40px];
    }
    h2 {
        @apply text-2xl md:text-3xl 2xl:text-[40px];
    }
    h3 {
        @apply text-lg md:text-xl 2xl:text-2xl;
    }
    h4{
        @apply text-base md:text-lg 2xl:text-xl;
    }
    p{
        @apply mb-2 sm:mb-3 md:mb-5 lg:mb-6 last:mb-0;
    }
    ul {
        @apply list-disc list-outside marker:text-blue;
        margin-block-start: 0em;
        margin-block-end: 1.5em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    ul ul{
        @apply mb-0;
    }
    ol {
        @apply list-decimal;
        @apply list-outside;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    table{
        margin-bottom: 2rem;
    }
    table tr td{
        border: 1px solid #fff;
        padding: 0.5rem;
    }
    table tr:nth-child(2n) {
        border-bottom: 0;
        background-color: #f2f2f2;
    }
    footer .button {
        @apply bg-red border-red hover:bg-red hover:border-red hover:text-white;
    }
    footer a{
        @apply text-white;
    }
    footer a:hover{
        @apply text-grey underline;
    }
    .widget-title{
        @apply text-lg md:text-xl 2xl:text-2xl text-center; 
    }
}

@layer components {
    .button{
        @apply block w-fit h-auto py-2 px-6 2xl:py-3 2xl:px-8 text-center text-base lg:text-lg 2xl:text-xl font-medium no-underline hover:duration-300 text-white bg-blue border-2 border-solid border-blue hover:bg-red hover:border-red hover:text-white rounded-lg;
    }
    .openmenu{
        @apply before:rotate-90 after:rotate-180;
    }
    .h-05{
        height: 0.125rem;
    }
    .initial{
        position: initial;   
    }
    .transition-custom{
        transition: all 0.25s ease;
    }
    .shadow-custom{
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }
    .clip-custom{
        clip-path: ellipse(60% 70% at 60% 50%);
    }
    .bg-gradient-custom{
        background: linear-gradient(360deg, #333333 0%, rgba(123, 131, 140, 0.586896) 41.31%, rgba(217, 217, 217, 0) 100%);
    }
    .bg-gradient-header{
        background: linear-gradient(270deg,#33506d 0%,#c20f23 100%);
    }
    .bg-gradient-video{
        background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 84%);
    }
    .bg-gradient-image{
        background: linear-gradient(128deg,#c20f23 0%,#33506d 62%)!important;
    }
    [type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 0.875rem;
        padding: 0.75rem 1.5rem !important;
        border: 1px solid #BEBEBE;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.02);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: normal;
        color: #0a0a0a;
        transition: box-shadow 0.5s,border-color 0.25s ease-in-out;
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
        height: auto;
    }
    select{
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 0.875rem;
        padding: 0.75rem 1.5rem !important;
        border: 1px solid #BEBEBE;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.02);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: normal;
        color: #0a0a0a;
        transition: box-shadow 0.5s,border-color 0.25s ease-in-out;
        box-shadow: none;
        height: auto;
    }
    html{
        -webkit-tap-highlight-color:  transparent; 
    }
}

.art-side-form {
	position:fixed;
	right:0;
	background:#fff;
	padding:20px;
	width:375px;
	z-index:9999;
	-webkit-box-shadow:0 0 12px 2px rgba(0,0,0,0.15);
	box-shadow:0 0 12px 2px rgba(0,0,0,0.15);
	-webkit-transform:translate3d(100%,0,0);
	transform:translate3d(100%,0,0);
	-webkit-transition:-webkit-transform .8s;
	transition:-webkit-transform .8s;
	-o-transition:transform .8s;
	transition:transform .8s;
	transition:transform 0.8s,-webkit-transform .8s;
	-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function:cubic-bezier(0.7,0,0.3,1);
	transition-timing-function:cubic-bezier(0.7,0,0.3,1);
	top:calc(50% - 14em);
}

.art-side-form.open {
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}

.art-side-form .art-side-below-form {
	font-size:12px;
	text-align:center;
	padding-top: 1rem;
}

.art-side-form .art-side-below-form a {
	letter-spacing:0;
	text-decoration:underline;
}


.art-side-form .art-side-form-tab {
	position:absolute;
	left:-50px;
	width:50px;
	height:200px;
	background:#C20F23;
	top:calc(50% - 100px);
	border-radius:10px 0 0 10px;
	color:#fff;
	-webkit-box-shadow:-2px 0 5px 1px rgba(0,0,0,0.25);
	box-shadow:-2px 0 5px 1px rgba(0,0,0,0.25);
	cursor:pointer;
}

.art-side-form .art-side-form-side-text {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	margin:0;
	width:0;
	white-space:nowrap;
	-webkit-transform-origin:bottom;
	-ms-transform-origin:bottom;
	transform-origin:bottom;
	text-align:left;
	position:absolute;
	padding-bottom:15px;
	font-size:14px;
	text-transform:uppercase;
	font-weight:800;
	letter-spacing:.1em;
}

.art-side-form .art-side-form-side-icon {
	position:absolute;
	bottom:8px;
	width:100%;
	left:0;
	font-size:20px;
	text-align:center;
}

.art-side-form .gform_wrapper ul li.gfield {
	margin-top: 0;
}

.art-side-form .frm_submit button {
	width:100%;
}

.art-side-form h3 {
	color:#0a2032;
	margin-bottom:10px;
	font-weight:800;
	font-size: 1.5rem;
}

.art-side-form .frm_forms .frm_message {
	color:green;
	margin-bottom:40px;
}

.with-side-form .menu-contact-us.red-item {
	display:none;
}

.close-cross {
	position:absolute;
	right:24px;
	top:20px;
	width:24px;
	height:24px;
	opacity:1;
}

.close-cross:hover {
	opacity:.8;
}

.close-cross:after,
.close-cross:before {
	position:absolute;
	left:15px;
	content:' ';
	height:23px;
	width:2px;
	background-color:#000;
}

.close-cross:before {
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

.close-cross:after {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

#gform_confirmation_wrapper_2 {
    padding-top: 2rem;
}

.art-side-form .gform_wrapper .top_label .ginput_container {
	/*margin-top: 0;*/
}

.art-side-form .gform_wrapper input {
	margin-bottom: 0;
}

.art-side-form .gform_wrapper .gfield_label {
	font-size: 0.9rem;
}

.art-side-form .gform_wrapper .field_sublabel_hidden_label {
	margin-bottom: 0;
}


@media only screen and (max-width:736px) {
	
	.art-side-form .art-side-below-form {
		padding-top: 0;
	}
	.gform_wrapper ul li.gfield {
		margin: 0 !important;
		padding: 0 !important;
	}
	.name_first,
	.name_last {
		width: 48%;
		display: inline-block !important;
	}
		
	.art-side-form {
		bottom:0;
		top:auto;
		width:100%;
		left:auto;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0);
	}
	
	.art-side-form.open .art-side-form-tab:after,
	.art-side-form.open .art-side-form-tab:before {
		position:absolute;
		content:' ';
		height:23px;
		width:2px;
		background-color:#fff;
		right:24px;
		top:13px;
	}
	
	.art-side-form.open .art-side-form-tab:before {
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	.art-side-form.open .art-side-form-tab:after {
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	
	.art-side-form .art-side-form-tab {
		left:0;
		width:100%;
		height:50px;
		border-radius:0;
		top:-50px;
		text-align:center;
		padding-top:7px;
	}
	
	.art-side-form .art-side-form-side-text {
		letter-spacing:.1em;
		display:inline-block;
		margin-right:10px;
		font-size:16px;
		position:relative;
		-webkit-transform:none;
		-ms-transform:none;
		transform:none;
		width:auto;
	}
	
	.art-side-form .art-side-form-side-icon {
		position:relative;
		width:auto;
		font-size:24px;
		text-align:center;
		display:inline-block;
		bottom:auto;
	}
	
	.art-side-form .close-cross {
		display:none;
	}
	
	.with-side-form footer {
		padding-bottom:50px;
	}
	
	.art-side-form-inner {
		max-height:70vh;
		overflow:auto;
	}
	
}

#frm_form_15_container input[type="text"],
#frm_form_15_container input[type="email"],
#frm_form_15_container input[type="tel"],
#frm_form_15_container textarea
{
		max-width: 100%;
        font-size: 13px !important;
}

#frm_form_15_container input[type="submit"] {
	padding: 15px 40px;
	background: #33506D;
	color: #fff;
	font-weight: bold;
	width: 100%;
}

#frm_form_15_container p {
	margin-bottom: 1em;
}

#frm_form_15_container .wpcf7-validation-errors, #frm_form_15_container.wpcf7-acceptance-missing {
	border: 2px solid red;
}