﻿
@charset "utf-8";
/* CSS Document */

body{
	font-family: 'CustomFont', Arial, sans-serif;
	font-family: montserrat,sans-serif;
font-weight: 400;
font-style: normal;
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	    background: #f5f5f5;
}
h1{
	    font-size: 65px;
    font-weight: 600;
}

h2{
	font-size: 35px;
	text-transform: uppercase;
}
p{
	line-height: 1.5em;
	color: 1a1a1a;
	font-weight: 300;
}z
a{
	font-size: 16px;
}

.home-avaluation-section{

	width: 100%;
	height: 100%;
	    margin-bottom: 100px;
}

.home-avaluation-box{
	
max-width: 800px;
	margin: 0 auto;
	    padding: 60px 60px 60px 80px;
  position: relative;
	background-color: #FFFFFF;
	margin-top: 40px;
}

.home-ava-cir-logo img{
	width: 100px;
}

.home-avaluation-header{
	display: grid;
	    grid-template-columns: 80% 20%;
	margin-bottom: 20px;
	border-bottom: 1px solid  #AAAAAA;   
	padding-bottom: 30px;

}

.home-ave-p {
	font-size: 25px;
	font-weight: 600;
	 
	line-height: 1.2;
	padding-right: 20px;
}
.home-ave-header-box p{
	padding-right: 20px;
}
.home-ava-cir-logo img{
	float: right;
	width: 100%;
	padding-top: 15px;
}
.home-ave-h{
	font-size: 18px;
	
	
}
.home-ave-header-box{
	    margin-right: 20px;
}

/*FORM*/

/* Form */
.box{
	margin-top: 40px;
}

.row .col-6 input{
	margin-right: 40px;
}


	form {
		margin: 0 0 2em 0;
	}
.col-6{
	padding-top: 15px;
	margin-right: 20px;
	
}
.row{
	    display: grid;
        grid-template-columns: 50% 50%;
}


	label {
		color: #1a1a1a;
		display: block;
		font-size: 0.9em;
		font-weight: 400;
		margin: 0 0 .5em 0;
		text-align: left;
	}
input{
		margin-right: 40px;
}


	input[type="text"],
	input[type="password"],
	input[type="email"],
input[type="date"],
input[type="tel"],
input[type="textarea"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background-color: #f8f8f8;
		border-radius: 6px;
		padding: 8px 15px;
		border: solid 1px #e5e5e5;
		color: #1a1a1a;
		display: block;
		outline: 0;
	margin-right: 20px;
		text-decoration: none;
		width: 100%;
			
		
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: 1px solid  #a6a6a6 ;
			box-shadow: 0 0 0 2px #a6a6a6;
			
			
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e5e5e5' /%3E%3C/svg%3E");
		background-size: 1.25em;
		background-repeat: no-repeat;
		background-position: calc(100% - 1em) center;
		height: 3em;
		padding-right: 3em;
		text-overflow: ellipsis;
	}

		select option {
			color: #1A1A1A;
			background-color: #f5f5f5;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
input[type="tel"],
	select {
		height: 3em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

input[type="checkbox"] + label,
	 {
			text-decoration: none;
			color: #1A1A1A;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 300;
			padding-left: 2.55em;
			padding-right: 0.75em;
			position: relative;
			padding-top: 8px;
		}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: #1A1A1A;
			cursor: pointer;
			display: inline-block;
			font-size: 14px;
			font-weight: 400;
			padding-left: 2em;
			padding-right: 0.75em;
			position: relative;
			padding-top: 2px;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: #f8f8f8;
				border-radius: 6px;
				border: solid 1px #e5e5e5;
				content: '';
				display: inline-block;
				font-size: 0.6em;
				height: 2.25em;
				left: 0;
				line-height: 2.25em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.25em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #666;
			border-color: #666;
			color: #ffffff;
			content: '✓';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #3E3E3E;
			border-color: #3E3E3E;
			box-shadow: 0 0 0 1px #3E3E3E;;
		}

	input[type="checkbox"] + label:before {
		border-radius: 6px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: #a0a0a0 !important;
		font-weight: 200;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: #a0a0a0 !important;
		font-weight: 200;
		opacity: .5;
	}

	::-moz-placeholder {
		color: #848484!important;
		font-weight: 200;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: #1a1a1a !important;
		opacity: 1.0;
	}


.checkbox-flex {
	display: flex;
	justify-content: flex-start;
}

#ratio-button-section {
	margin-top: 30px;
	margin-left: 20px;

}



/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	background-color: #0077b7;
	border-radius: 6px;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	height: 3em;
	line-height: 3em;
	padding: 0 4em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px;
	margin-top: 20px;
}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		.button:hover {
			background-color: #192450;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		.button:active {
			background-color: #595959;
		}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		.button.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		.button.small {
			font-size: 0.8em;
			height: 2.7em;
			line-height: 2.7em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		.button.large {
			font-size: 1.25em;
			height: 2.7em;
			line-height: 2.7em;
		}

		input[type="submit"].alt,
		input[type="reset"].alt,
		input[type="button"].alt,
		.button.alt {
			background-color: transparent;
			box-shadow: inset 0 0 0 2px #e5e5e5;
			color: #1A1A1A;
		}

			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="button"].alt:hover,
			.button.alt:hover {
				background-color: #f8f8f8;
			}

			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			input[type="button"].alt:active,
			.button.alt:active {
				background-color: #f0f0f0;
			}

			input[type="submit"].alt.icon:before,
			input[type="reset"].alt.icon:before,
			input[type="button"].alt.icon:before,
			.button.alt.icon:before {
				color: #999;
			}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		.button.primary {
			background-color: #e89980;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			.button.primary:hover {
				background-color: #ecaa96;
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			.button.primary:active {
				background-color: #e4886a;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		.button.disabled,
		.button:disabled {
			background-color: #777 !important;
			box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
			color: #f5f5f5 !important;
			cursor: default;
			opacity: 0.25;
		}

.col-12 ul {
	
	padding: 0;
}




/* Banner */

#banner {
	background-color: #666;
	background-image: url( "/images/home-avaluation.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	padding: 13em 0 15em 0;
	text-align: center;
}

#header-wrap{
	max-width: 1200px;
    margin: 0 auto;
}

		#banner :last-child {
			margin-bottom: 0;
		}

		#banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
			color: #fff;
		}

		#banner h2 {
			font-size: 3.5em;
			line-height: 1em;
			margin: 0 0 0.5em 0;
			padding: 0;
		}

		#banner p {
			font-size: 1.25em;
			margin-bottom: 1.75em;
		}

		#banner input[type="submit"],
		#banner input[type="reset"],
		#banner input[type="button"],
		#banner .button {
			background-color: transparent;
			box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
			color: #fff;
			min-width: 12em;
		}

			#banner input[type="submit"]:hover,
			#banner input[type="reset"]:hover,
			#banner input[type="button"]:hover,
			#banner .button:hover {
				background-color: rgba(255, 255, 255, 0.1);
			}

			#banner input[type="submit"]:active,
			#banner input[type="reset"]:active,
			#banner input[type="button"]:active,
			#banner .button:active {
				background-color: rgba(255, 255, 255, 0.2);
			}

			#banner input[type="submit"].primary,
			#banner input[type="reset"].primary,
			#banner input[type="button"].primary,
			#banner .button.primary {
				background: #fff;
				color: #666 !important;
			}



/*INTRO SECTION*/
.home-intro-section{
	background-color: #FFFFFF;
	    padding: 60px 0px 50px 0px;
}

.pre-intro-section-box{
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	    grid-template-columns: 40% 70%;
	

}

.intro-points{
		padding-left: 40px;
}

.intro-heading p{
	font-size: 35px;
	margin: 0 auto;
	font-weight: 600;
	    color: #0084C8;
	line-height: 1.2;
	padding-top: 15px;
}






li {
	list-style-type: none!important;
	    font-weight: 300;
	    padding-bottom: 20px;
	font-size: 18px;
}

ul {
  list-style: none;
}
ul li:before {
  content: '\2714\0020';
	color: #0084C8;
		padding-right: 10px;
margin-left: -30px;
}




@media (max-width: 1000px) {
	h1{
		font-size: 45px;
	}
	#banner{
		    padding: 8em 0 8em 0;
	}
	.pre-intro-section-box {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto;
		padding: 0px 30px 0px 30px;
	
	}
	.intro-points {
    padding-left: 0px;
}
	.intro-heading p{
		font-size: 25px;
	}
	.home-avaluation-box{
		
		
    padding: 60px 30px 60px 30px
	}

	.home-intro-section{
		background: #f5f5f5;
	}

.home-avaluation-header {
    display: grid;
    grid-template-columns: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
    padding-bottom: 30px;
}
	.home-ava-cir-logo img{
		display: none;
	}
.home-ave-header-box p {
    padding-right: 0px;
}
	.row {
    display: grid;
    grid-template-columns: auto;
}
	div.col-6.col-12-mobilep {
    margin-right: 40px;
}
	.home-avaluation-box{
		margin-top: 0px;
	}
	.checkbox-flex {
		display: flex;
		justify-content: flex-start;
		margin-top: 30px;
	}
	

}