@import url("https://use.typekit.net/oif7rzo.css");

*{
scroll-behavior: smooth !important;
        scroll-margin-top: 10vw;
}
/* ---------- SET OF BASE COLORS------------------------ */
:root {
	--primary1: #1a3242;
	--secondary1a:#054254;
	--secondary1b:#314755;
	--secondary1c:#485b68;
	
	--primary2: #5b754b;
	--secondary2a:#9cb98b;
	
	--primary3: #C5511B;
	--primary4: #272727;
	
	--black:#000;
	--white:#fff;
	
	--tonal1:#ECF3F4;
	--tonal2:#e5e5e5;
	
	--text1:#ccc;
	--text2:#4a4a4a;
}



body{
	background-color: var(--primary4);
    color:var(--text1);
    margin:0;
    padding:0;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:62.5%;
}

/* ---------- WCC SITE SPECIFIC AREA ---------------------------------------------------------------------------------------- */
#wcc_site_specific_area{
    background-color:var(--white);
    color:var(--text2);
    margin:0;
    padding:0;
    position:relative;
    font-size:4vw;
}
/* ----------UPPER AREA- COntain TOP and Navigation areas--------------------------------------------------------- */
#upper{
    position:relative;
}


/* ---------- TOP AREA ---------------------------------------------------------------------------------------- */
#top{
    background-color: var(--primary1);
    color:var(--white);
    margin:0;
    padding:0;
    overflow:hidden;
    text-align:center;
    font-family: neue-haas-grotesk-display, sans-serif;
}
#top H2{
    margin:0;
    font-weight: 300;
    font-style: normal;
    padding:0.6em;
    font-size:4vw;
}
.top_bold{
    font-weight:700;
}





/* ---------- NAVIGATION ---------------------------------------------------------------------------------------- */
#navarea{
    position:relative;
}
/* ---------- Define a block for navigation icons ----------------- */
#mobile_icons{
    background-color:var(--primary2);
    text-align:center;
    color:var(--white);
    position:fixed;
    z-index:100;
    width:100vw;
    bottom:0;
    display:block;
    border-top:1px solid var(--white);
    font-size:12px;
}
/* ---------- Create a standard for mobile icons ----------------- */
.mobile_icon{
    vertical-align:top;
    display:inline-block;
    width:30%;
    height:15vh;
    text-indent:-9999px;
    background-size:auto 70%;
    background-position:center center;
    background-repeat:no-repeat;  
    transition: transform 0.5s ease;
}
#mobile_icons a{
    color:var(--white);
}
/* ---------- define background images for mobile icons ----------------- */
#shownav{
    background-image:url("../images/hamburger.svg");
}
#home_logo{
    background-image:url("../images/wcc_logo.svg");
	width:40%;
}
#showsearch{
    background-image:url("../images/search.svg");
}

/* ---------- Create a standard transformation for mobile icons when clicked----------------- */
.rotate{
     transform: rotate(90deg);
}


/* ---------- Define the block around the main menu structure ----------------- */
#navigation{
    position:fixed;
    z-index:50;
    top:0;
    width:100vw;
    height:85vh;
    left:-100vw;
    background-color:var(--white);
    margin:0px;
    padding:0px;
    transition: all 0.5s ease;
    display:block;
    background-image:none;
}
/* ---------- Define a transformation to move the main menu structure ----------------- */
#navigation.movein{
    left:0;
}
/* ------ define the main layout styles for the navigation----- */
#navigation ul{
    background-color:var(--primary1);
    margin:0px;
    padding:0px;
    list-style-type: none;
    list-style-image: none;
    width:100%;
    overflow:hidden;
}
#navigation li{
    margin:0px;
    padding:0px;
    list-style-type: none;
    list-style-image: none;
    display:block;
}
#navigation li a{
    display:block;
    text-align:center;
    text-decoration:none;
    transition: all 0.3s ease;
    color:var(--white);
    border-top:1px solid var(--secondary1c);
}
#navigation ul ul li a{
     background-color:var(--secondary1b);
}
#navigation ul ul ul li a{
     background-color:var(--secondary1c);
}

/* ------ define reuseable styles for mobile menu items that have sub content or are expanded ----- */
#navigation ul li a.hascontent{
    background-image:url("../images/arrow_white.svg");
    background-repeat:no-repeat;
    background-position:top right;
    background-size:auto 100%;
}
#navigation ul li a.expandedcontent{
    background-image:url("../images/x.svg");
    background-repeat:no-repeat;
    background-position:top right;
    background-size:auto 100%;
}


/* ---------- Define the block around the search structure ----------------- */
.search-block-form{
    position:fixed;
    z-index:50;
    top:0;
    width:100vw;
    height:75vh;
    padding-top:25vh;
    left:-100vw;
    background-color:var(--primary3);
    color:var(--white);
    text-align:center;
    transition: all 0.5s ease;
    font-size:2.1em;
}
.search-block-form input{
    font-size:1em;
    border:0;
    border-radius:0.2em;
    margin:0.5em;
    padding:0.5em;
	max-width:70vw;
}
/* ---------- Define a transformation to move the search structure ----------------- */
.search-block-form.movein{
    left:0;
}
/* ----------FEATURED AREA------------------------------------------------ */
#featured{
	position:relative;
	z-index:0;
	overflow:hidden;
}

/* ---------- Reusable slides for carousel------------------------------------------------ */
.slide{
    position:absolute;
    left:0;
    top:0;
    z-index:8;
    opacity:1.0;
    width:100%;
}
.slide.active {
    z-index:10;
    opacity:1.0;
}

.slide.last-active {
    z-index:9;
}
/* ---------- CONTENT AREA ---------------------------------------------------------------------------------------- */
#content{
    width:94%;
    margin:auto;
	position:relative;
	z-index:20;
	border-bottom:1px solid var(--white);
}
H1{
	font-size:2em;
}
H2{
	font-size:1.6em;
	font-weight:400;
}
H3{
	font-size:1.2em;
}
p{

}
a{
	color:var(--primary3)
}
/* ----- setup a width and height for embedded videos -----*/



/* ---------- FORMS -------------------------------------------------------------------------------------------------------------------------------------- */
.webform-submission-form{
    background-color:var(--tonal1);
    border-radius:0.4em;
}
.webform-submission-form .description{
padding:0.5em;
}
/* ---------- sections------------------------------------------------ */
.webform-submission-form .webform-section{
    border-bottom:1em solid var(--white);

}
.webform-section h2{
    border-bottom:none !important;
    margin:0 !important;
    margin-bottom:0.5em !important;
    padding:0.5em !important;
    padding-top:1em !important;
    padding-bottom:1em !important;
    font-size:1.2em !important;
    background-color:#BDCED1;
    background-image:url("../images/data.svg");
    background-repeat:no-repeat;
    background-position:top right;
    background-size:auto 100%;
    color:var(--secondary1a);
}


/* ---------- text fields and emails and dates------------------------------------------------ */
.webform-submission-form .js-form-type-textfield,.webform-submission-form .js-form-type-email, .webform-submission-form .js-form-type-date, .webform-submission-form .js-form-type-datetime, .webform-submission-form .js-form-type-select, .webform-submission-form .js-form-type-managed-file{
    border-bottom:1px solid var(--white);
        padding:0.5em;
}
.webform-submission-form .js-form-type-textfield label, .webform-submission-form .js-form-type-email label, .webform-submission-form .js-form-type-date label, .webform-submission-form .js-form-type-datetime label, .webform-submission-form .js-form-type-select label, .webform-submission-form .js-form-type-managed-file label{
    min-width:25%;
    font-weight:700;
    display:inline-block;
    color:var(--secondary1a);
}

.webform-submission-form .js-form-type-textfield input, .webform-submission-form .js-form-type-email input, .webform-submission-form .js-form-type-date input, .webform-submission-form .js-form-type-datetime input, .webform-submission-form .js-form-type-select input, .webform-submission-form .js-form-type-managed-file input{
    padding:1em;
    border:1px solid var(--secondary1a);
    border-radius:0.3em;
}
/* ---------- text areas------------------------------------------------ */
.webform-submission-form .js-form-type-textarea{
    padding:0.5em;
}
.webform-submission-form .js-form-type-textarea label{
    font-weight:700;
    color:var(--secondary1a);
    padding-bottom:0.5em;
}
.webform-submission-form .form-textarea{
    width:95%;
    padding:1em;
    border:1px solid var(--secondary1a);
    border-radius:0.3em;
    margin-top:1em;
}
/* ---------- radio and checkbuttons------------------------------------------------ */
.webform-submission-form .js-form-type-radio{
    padding:0.3em;
}
.webform-submission-form .js-form-type-radio label{
    font-weight:700;
    display:inline-block;
    color:var(--secondary1a);
}
/* ---------- Composite elements------------------------------------------------ */
.webform-submission-form .js-form-type-webform-custom-composite label{
        font-weight:700;
    display:inline-block;
    color:var(--secondary1a);
    padding:0.5em;
}
/* ---------- RANGE elements------------------------------------------------ */
.webform-submission-form .js-form-type-range{

}
.webform-submission-form .js-form-type-range label{
            font-weight:700;
    display:inline-block;
    color:var(--secondary1a);
    padding:0.5em;
    min-width:25%;
}
.webform-submission-form .js-form-type-range input{
    font-size:1.2em;
    font-weight:700;
    color:var(--secondary1a);
}
.webform-submission-form .js-form-type-number{

    display:inline-block;
}

/* ---------- fieldsets------------------------------------------------ */

.webform-submission-form fieldset{
    border:none;
    padding:0px;
    padding-left:20px;
    padding-right:20px;
    border-bottom:1px solid var(--white) !important;
    padding-bottom:0.5em !important;

}

.webform-submission-form legend{
    display:block;
    margin:0px;
    padding:0px;
    padding:0.5em;
    position:relative;
    font-weight:700;
    color:var(--secondary1a);
}


/* ---------- submit area------------------------------------------------ */
.webform-submission-form .form-actions{
background-color:#BDCED1;
        padding:0.5em;
        border-radius:0.4em;

}
.webform-submission-form .form-submit{
    padding:0.8em;
    border:none;
    border-radius:0.3em;
    background-color:var(--secondary1a);
    color:var(--white);
    font-size:1.2em;
    font-weight:700;

}
.webform-submission-form .form-submit:hover{
    background-color:var(--primary3);
}

/* ---------- TABLES ---------------------------------------------------------------------------------------- */
table{
    width:100%;
    border-collapse: collapse;
	border:1px solid #fff;
}
th{
	background-color:#666;
    color:#fff;    
    padding:0.4em;
    text-align:left;
    vertical-align:top;
	border:1px solid #fff;
}

tr{
	background-color:#E8E8E8;
	    text-align:left;
}
td{
	padding:0.4em;
    text-align:left;
    vertical-align:top;
	border:1px solid #fff;
}

table a{
	display:inline-block;
    background-color:#5b754b;
    color:#fff;
    text-decoration:none;
    padding:0.3em;
    padding-left:0.6em;
    padding-right:2em;
    border-radius:0.3em;
    margin-bottom:0.5em;
    background-image:url("../images/button_arrow.png");
    background-repeat:no-repeat;
    background-position:right center;
    font-size:0.9em;
}
table a:hover{
	background-color:#000;
}

/* ---------- FOOTER AREA ---------------------------------------------------------------------------------------- */
#footer{
    font-size:3vw;
    font-family: neue-haas-grotesk-display, sans-serif;
	position:relative;
    height:auto;
    overflow:hidden;
    margin-bottom:15vh;
    background-color:var(--primary1);

}
#wcc_swoosh{
    
}
.wcc_swoosh_background{
	fill:var(--white);
}
.wcc_swoosh_color{
	fill:var(--primary2);
}
.wcc_swoosh_body{
	fill:var(--primary1);
}
#wcc_logo{
	background-image:url("../images/wcc_logo_full.svg");
	background-repeat:no-repeat;
	background-size:auto 15vw;
    background-position:top left;
	position:relative;
    z-index:20;
    padding-left:0;
    padding-top:16vw;
    margin-left:5vw;
}
#skyline{
	background-image:url("../images/skyline.svg");
	background-repeat:no-repeat;
	width:100vw;
	height:23vw;
	background-size:100% auto;
	position:relative;
    z-index:20;
	right:0;
}

#wcc_tag{
	font-size:4vw;
	font-weight:700;
	position:relative;
	color:var(--black);
    z-index:30;
    right:0;
    bottom:0;
    padding-right:2vw;
    width:98vw;
    padding-bottom:2vw;
    background-color:var(--white);
    text-align:right;
    padding-top:2vw;
}
#social_icons{
	margin:0px;
	padding:0px;
	display:inline-block;
	vertical-align:middle;
	bottom:0;
	right:0;
	height:6vw;
	margin-left:1vw;
}
.social_icon{
	height:100%;
}
.social_icon_outer{
	fill:var(--primary2);
}
.social_icon_inner{
	fill:var(--white);
}
#footer H2{
    font-weight: 400;
    font-style: normal;
    font-size:1.8em;
    color:var(--white);
    margin:0px;
    padding:0px;
}
#footer p{
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0px;
}
#footer a{
    color:var(--white);
    text-decoration:none;
}
.admin_login{
    display:block;
}
.acknowledgement{
	background-image:url("../images/flags.png");
	background-repeat:no-repeat;
	background-size:auto 2em;
	padding-top:3em;

}